.about-page{background:radial-gradient(ellipse at 24% 60%,rgb(var(--accent-rgb) / 0.0510),transparent 52%),radial-gradient(ellipse at 95% 18%,rgb(var(--accent-alt-rgb) / 0.0275),transparent 48%),var(--bg)}
.about-page .content-view{align-items:stretch;min-height:100dvh;padding:clamp(100px,16dvh,138px) 5.8vw clamp(24px,4dvh,48px)}
.about-shell{display:flex;flex-direction:column;width:100%;max-width:1460px;min-width:0;margin:0 auto}
.about-title{width:fit-content;margin:0;font:180 clamp(36px,4.3vw,72px)/1.03 Roboto Flex,Arial,sans-serif;font-variation-settings:'opsz' 144,'wdth' 68;letter-spacing:-.025em;text-transform:uppercase;animation:about-arrive .8s var(--ease) both}
.about-main{flex:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;gap:8vw;min-height:300px;padding:clamp(28px,5dvh,64px) 0}
.about-portrait{position:relative;isolation:isolate;min-width:0;perspective:1000px;touch-action:pan-y pinch-zoom;user-select:none}
.about-aura{position:absolute;z-index:-1;inset:-16% 0;pointer-events:none;opacity:var(--aura-opacity,.55);transition:opacity .6s}
.about-aura::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at var(--light-x,40%) var(--light-y,50%),rgb(var(--accent-rgb) / 0.1451),transparent 64%),radial-gradient(ellipse at 70% 60%,rgb(var(--accent-alt-rgb) / 0.0863),transparent 64%);filter:blur(22px)}
.about-aura::after{content:'';position:absolute;inset:0;background-image:radial-gradient(rgb(var(--accent-alt-rgb) / 0.4392) .7px,transparent .7px);background-size:18px 18px;mask-image:radial-gradient(ellipse,#0008,transparent 68%);opacity:0;transition:opacity .6s}
.about-portrait[data-tone=systems] .about-aura::after{opacity:1}
.about-name{position:relative;margin:0;font:180 clamp(72px,min(11.5vw,18dvh),168px)/.98 Roboto Flex,Arial,sans-serif;letter-spacing:-.045em;transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translate(var(--shift-x,0px),var(--shift-y,0px));transform-origin:center}
.about-name>span{position:relative;display:block;width:fit-content;max-width:100%;color:var(--ink);font-variation-settings:'opsz' 144,'wdth' var(--first-width,80),'wght' var(--name-weight,180);transition:font-variation-settings .6s var(--ease),color .4s;animation:about-arrive 1s .12s var(--ease) both}
.about-name>span::before{content:attr(data-echo);position:absolute;inset:0;z-index:-1;color:transparent;-webkit-text-stroke:.7px var(--accent);opacity:var(--echo-opacity,.12);translate:var(--echo-x,0px) var(--echo-y,0px);pointer-events:none}
.about-name>span+span{animation-delay:.22s}
.about-name>span+span{font-variation-settings:'opsz' 144,'wdth' var(--last-width,80),'wght' var(--name-weight,180)}
.about-portrait[data-tone=design] .about-name>span{color:var(--accent)}
.about-portrait[data-tone=systems] .about-name>span::before{color:transparent;-webkit-text-stroke-color:var(--accent-alt)}
.about-period{color:var(--accent-alt)}
.about-story{max-width:46ch;animation:about-arrive 1s .24s var(--ease) both}
.about-story p{margin:0;color:var(--copy-soft);font:350 clamp(15px,1.3vw,18px)/1.65 Roboto Flex,Arial,sans-serif}
.about-story .about-lead{margin-bottom:22px;color:var(--ink);font:300 clamp(24px,2.6vw,38px)/1.3 Roboto Flex,Arial,sans-serif;font-variation-settings:'opsz' 72,'wdth' 92;letter-spacing:-.025em}
.about-word{color:var(--ink);text-decoration:underline;text-decoration-color:rgb(var(--accent-rgb) / 0.4392);text-decoration-thickness:1px;text-underline-offset:4px;transition:color .3s,text-decoration-color .3s}
.about-word:hover,.about-word:focus-visible{color:var(--accent-alt);text-decoration-color:var(--accent-alt)}
.about-portrait[data-paused] .about-name{transform:none}
.about-portrait[data-paused] .about-aura,.about-portrait[data-paused] .about-name>span::before{opacity:0}
.about-next{display:flex;justify-content:space-between;align-items:center;gap:28px;padding-top:14px;border-top:1px solid var(--line);animation:about-arrive 1s .32s var(--ease) both}
.about-next a{position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:32px;min-height:44px;padding:4px 0;font:11px/1.6 Plex,monospace;transition:color .3s}
.about-next a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,var(--accent),var(--accent-alt));transform:scaleX(.25);transform-origin:left;transition:transform .6s var(--ease)}
.about-next a span{font-size:20px;color:var(--accent);transition:translate .5s var(--ease),color .3s}
.about-next a:hover,.about-next a:focus-visible{color:var(--accent)}
.about-next a:hover::after,.about-next a:focus-visible::after{transform:scaleX(1)}
.about-next a:hover span,.about-next a:focus-visible span{translate:2px -2px;color:var(--accent-alt)}
@keyframes about-arrive{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
@media(max-width:760px){
 .about-page .content-view{padding:112px 5vw 24px}
 .about-title{font-size:42px}
 .about-main{grid-template-columns:1fr;align-content:center;gap:24px;padding:24px 0}
 .about-name{font-size:clamp(40px,13vw,64px);line-height:1.1;transform:translate(calc(var(--shift-x,0px)*.6),calc(var(--shift-y,0px)*.6))}
 .about-name>span{display:inline-block}
 .about-name>span::before{opacity:calc(var(--echo-opacity,.12)*.45);translate:calc(var(--echo-x,0px)*.6) calc(var(--echo-y,0px)*.6)}
 .about-aura{inset:-45% 0}
 .about-story{max-width:46ch}
 .about-story .about-lead{font-size:22px;line-height:1.35;margin-bottom:14px}
 .about-story p{font-size:15px;line-height:1.6}
 .about-next{gap:20px;padding-top:12px}
 .about-next a{gap:18px;font-size:10px}
}
@media(prefers-reduced-motion:reduce){.about-name{transform:none}.about-aura,.about-name>span::before{display:none}}