@font-face{font-family:Maria;src:url('/assets/about/maria-web.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
.about-story{--about-blue:#9bcbd7;--about-header:88px;background:var(--about-blue);color:#fffbf2}
.about-stage{position:relative;overflow:hidden;min-height:calc(100svh - var(--about-header));padding:40px 24px 64px}
.about-composition{position:relative;max-width:1440px;margin:auto}
.about-welcome{font:400 clamp(48px,8vw,150px)/1.5 Maria,cursive;text-align:center;margin:0;color:#fffbf2;transform:skewX(-10deg)}
.about-welcome__y{display:inline-block;transform-origin:50% var(--welcome-baseline,calc(50% - .22em));transform:translateY(var(--welcome-y-offset,-.0043em)) scaleY(var(--welcome-y-scale,.6513))}
.about-portrait{position:relative;width:clamp(190px,22vw,350px);margin:65px auto 40px}
.about-portrait__frame{padding:5px 4px 9px 7px;background:#30140c;clip-path:polygon(1% 0,99.7% .8%,100% 99.5%,.2% 100%,0 65%)}
.about-portrait__frame img{display:block;width:100%;height:auto;aspect-ratio:.8;object-fit:cover;object-position:center bottom}
.about-tape{position:absolute;left:-15%;top:-19%;width:124%;height:30%;transform:rotate(-1deg)}
.about-tape>img{width:100%;height:100%;display:block;opacity:.9}
.about-tape__name{position:absolute;left:50%;top:75%;transform:translate(-50%,-50%);font:400 clamp(32px,3.1vw,54px)/1.3 Maria,cursive;letter-spacing:.12em;color:#30140c;opacity:0}
.about-hi{position:absolute;left:80%;top:9%;width:54%;aspect-ratio:180/160;color:#30140c}
.about-hi svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.about-hi span{position:absolute;left:58%;top:70%;transform:translate(-50%,-50%);font:400 clamp(32px,3vw,56px)/1.3 Maria,cursive}
.about-morph-name{font:400 clamp(80px,10vw,190px)/1.3 Maria,cursive;letter-spacing:.08em;color:#30140c;text-align:center;margin:0}
.about-biography{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:1050px;margin:40px auto 110px;font-size:clamp(16px,1.3vw,25px);line-height:1.45}
.about-biography p{margin:0 0 1.3em}.about-biography p:last-child{margin-bottom:0}.about-career{text-align:right}.about-biography strong{font-weight:750}
.about-bio-anchor{display:none}
.about-interests{max-width:1000px;margin:auto}
.about-interests h2{font:400 clamp(60px,10vw,190px)/1.1 Maria,cursive;color:#30140c;text-align:center;letter-spacing:.05em;margin:0 0 20px}
.about-interests__first,.about-interests__label{display:block}
.about-interests__label{margin-top:-.375em}
.about-interests ul{margin:0;padding:0;list-style:none;font-size:clamp(16px,1.3vw,25px);line-height:1.65}
/* Enhanced layout: one pinned composition, with natural document scrolling. */
.about-enhanced .about-story{height:calc(100svh - var(--about-header) + var(--about-distance,2600px))}
.about-enhanced .about-stage{position:sticky;top:var(--about-header);height:calc(100svh - var(--about-header));min-height:0;padding:0}
.about-enhanced .about-composition{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(100%,calc((100svh - var(--about-header))*16/9));max-width:none;aspect-ratio:16/9;container-type:inline-size}
.about-enhanced .about-intro{position:absolute;inset:0;will-change:transform}
.about-enhanced .about-welcome{position:absolute;top:8%;left:6%;width:88%;font-size:9.5cqw;line-height:1.5;white-space:nowrap}
.about-enhanced .about-portrait{position:absolute;width:15.4%;left:42.3%;top:39%;margin:0}
.about-enhanced .about-tape__name{font-size:2.7cqw}
.about-enhanced .about-hi span{font-size:3cqw}
.about-enhanced .about-morph-name{position:absolute;left:0;top:0;font-size:9.5cqw;line-height:1.3;white-space:nowrap;transform-origin:0 0;z-index:3;will-change:transform}
.about-enhanced .about-biography{position:absolute;inset:0;margin:0;max-width:none;display:block;font-size:1.3cqw;line-height:1.4}
.about-enhanced .about-bio-anchor{display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:400 9.5cqw/1.3 Maria,cursive;letter-spacing:.08em;opacity:0}
.about-enhanced .about-career,.about-enhanced .about-introduction{position:absolute;top:50%;width:25.3%;transform:translateY(-50%);will-change:transform}
.about-enhanced .about-career{left:4.4%}.about-enhanced .about-introduction{right:5.2%}
.about-enhanced .about-interests{position:absolute;inset:0;max-width:none;margin:0}
.about-enhanced .about-interests h2{position:absolute;left:50%;top:24%;transform:translateX(-50%);font-size:9.5cqw;line-height:1.3;letter-spacing:.08em;margin:0;white-space:nowrap}
.about-enhanced .about-interests__first{display:flex;justify-content:center}.about-enhanced .about-interest-anchor{opacity:0}.about-enhanced .about-interests__suffix{letter-spacing:0}
.about-enhanced .about-interests__label{line-height:1.15}
.about-enhanced .about-interests ul{position:absolute;left:29.3%;top:51.5%;width:65%;font-size:1.3cqw;line-height:1.65}
.about-enhanced:not(.about-ready) .about-composition{visibility:hidden}
@media(max-width:760px){
 .about-story{--about-header:116px}
 .about-biography{grid-template-columns:1fr;gap:28px;margin-block:32px 70px}.about-career{text-align:left}
 .about-enhanced .about-composition{width:100%;height:100%;aspect-ratio:auto}
 .about-enhanced .about-welcome{top:8%;left:5%;width:90%;font-size:10.8cqw;white-space:normal;line-height:1.4}
 .about-enhanced .about-portrait{width:min(47%,260px);left:50%;top:34%;transform:translateX(-50%)}
 .about-enhanced .about-tape__name{font-size:7cqw}.about-enhanced .about-hi span{font-size:8cqw}
 .about-enhanced .about-morph-name,.about-enhanced .about-bio-anchor{font-size:20cqw}
 .about-enhanced .about-bio-anchor{top:13%}
 .about-enhanced .about-biography{font-size:clamp(12px,3.5cqw,17px);line-height:1.45}
 .about-enhanced .about-career,.about-enhanced .about-introduction{left:8%;right:auto;width:84%;top:29%;text-align:left}
 .about-enhanced .about-introduction{top:65%}
 .about-enhanced .about-interests h2{font-size:18cqw;top:19%}
 .about-enhanced .about-interests ul{left:8%;top:41%;width:84%;font-size:clamp(12px,3.6cqw,17px);line-height:1.65}
}
@media(max-width:760px) and (max-height:740px){
 .about-enhanced .about-portrait{width:min(43%,calc((100svh - 116px)*.43));top:31%}
 .about-enhanced .about-career{top:25%}.about-enhanced .about-introduction{top:64%}
 .about-enhanced .about-biography{font-size:12px;line-height:1.35}
 .about-enhanced .about-interests h2{top:12%}.about-enhanced .about-interests ul{top:37%;font-size:12px}
}
/* Same closing typography, placement and entrance as the home page. */
@font-face{font-family:'Pinyon Script';src:url('/assets/pinyon-script-regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
.about-ending{--ending-header:88px;--next-heading-size:clamp(36px,10vw,200px);position:relative;min-height:calc(100svh - var(--ending-header));background:#fffbf2;color:#590c1a}
.about-ending__content{position:absolute;inset:0;overflow:hidden}
.about-ending h2{position:absolute;left:50%;top:calc(50svh - var(--ending-header));width:max-content;max-width:94%;margin:0;font-family:'Pinyon Script',cursive;font-size:var(--next-heading-size);font-style:normal;font-weight:400;line-height:1.2;text-align:center;white-space:nowrap;transform:translate(-50%,-50%) scale(var(--ending-scale,1));transform-origin:center}
.about-ending__subline-clip{position:absolute;left:0;right:0;top:calc(50svh - var(--ending-header) + var(--next-heading-size) * .375);overflow:hidden;padding:clamp(2px,.25svh,4px) 20px 4px;text-align:center}
.about-ending__subline{margin:0;font-family:Manrope,Arial,sans-serif;font-size:clamp(24px,5.25vw,96px);font-style:normal;font-weight:400;line-height:1.15}
.about-ending__subline a{display:inline-block;color:inherit}
.about-ending__subline a:focus-visible{outline-color:currentColor;outline-offset:-2px}
@media(hover:hover){.about-ending__subline a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.12em}}
.about-enhanced .about-story,.about-enhanced .about-ending{background:color-mix(in srgb,#9bcbd7,#fffbf2 var(--about-ending-mix,0%))}
.about-enhanced .about-ending__subline{visibility:hidden;transform:translateY(calc(-100% - 24px))}
.about-enhanced .about-ending.is-subline-visible .about-ending__subline{visibility:visible;animation:about-ending-enter 1s cubic-bezier(.22,.61,.36,1) both}
@keyframes about-ending-enter{from{transform:translateY(calc(-100% - 24px))}to{transform:translateY(0)}}
@media(max-width:760px){.about-ending{--ending-header:116px}}
@media(prefers-reduced-motion:reduce){.about-ending h2{transform:translate(-50%,-50%)}.about-ending .about-ending__subline{animation:none!important;transform:none;visibility:visible}}