#about-page{position:fixed;inset:0;z-index:7;background:#fff;overflow-y:auto;overflow-x:clip;overscroll-behavior:contain;scrollbar-width:thin;opacity:0;touch-action:pan-y pinch-zoom}
#about-page[hidden]{display:none}.about-inner{min-height:100%;display:flex;flex-direction:column;align-items:center;padding:132px 0 30px}.about-copy{width:min(560px,calc(100% - 64px));margin-block:auto;padding-block:32px}
.about-copy h1{margin:0 0 28px;font-size:19px;line-height:1.45;font-weight:400;letter-spacing:-.025em;outline:none}.about-copy>p{font-size:15px;font-weight:400;line-height:1.9;letter-spacing:.002em;margin:0 0 22px;color:#444}.about-copy>p:last-of-type{margin-bottom:0}
.about-education{display:flex;flex-direction:column;gap:22px;margin-top:48px}.about-education p{margin:0}.about-school{font-size:12px;font-weight:500;line-height:1.55;color:#555}.about-degree{font-size:10px;line-height:1.8;color:#929292;margin-top:3px!important}
.about-footnote{align-self:flex-end;position:relative;margin:32px 30px 0;font-size:12px;line-height:1.6;color:#969696}.about-footnote>span{display:block}#puffy-toggle{font:inherit;color:#757575;text-decoration:underline;text-decoration-color:#c4c4c4;text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}#puffy-toggle:hover,#puffy-toggle[aria-expanded=true]{color:#333;text-decoration-color:#777}
#puffy-note{position:absolute;bottom:calc(100% + 17px);right:0;width:224px;margin:0;padding:8px 8px 10px;background:#fff;box-shadow:0 4px 24px #00000010;opacity:0;transform:translateY(10px);clip-path:inset(7% 0 0);z-index:1}#puffy-note[hidden]{display:none}#puffy-note img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}#puffy-note figcaption{padding:10px 2px 0;font-size:11px;line-height:1.5;color:#444}#puffy-note figcaption span,#puffy-note small{display:block}#puffy-note small{font-size:9px;font-weight:400;color:#929292;margin-top:2px}
body[data-view=about]{overscroll-behavior:none}body[data-view^=about] .masthead{z-index:8;right:calc(30px + var(--about-scrollbar-gap,0px))}body[data-view^=about] .masthead:before{content:'';position:absolute;inset:-28px -30px -18px;background:#fff;z-index:-1}body[data-view^=about] #about{text-decoration:underline;text-underline-offset:5px}
body[data-view=about] #portfolio-shell>main,body[data-view=about] #project-label,body[data-view=about] footer,body[data-view=about] #skip-intro{opacity:0!important;pointer-events:none}
body[data-view=about-loading] #portfolio-shell>main,body[data-view=about-loading] #project-label,body[data-view=about-loading] footer,body[data-view=about-loading] #skip-intro{visibility:hidden}
#portfolio-shell>main{transition:opacity .4s cubic-bezier(.22,.61,.36,1)}body[data-view=about] footer{visibility:hidden}#about-page[data-state=leaving]{pointer-events:none}
@media(max-width:650px){.about-inner{padding:120px 0 26px}.about-copy{width:calc(100% - 48px);padding-block:0;margin-block:0}.about-copy h1{font-size:18px;margin-bottom:25px}.about-copy>p{font-size:14px;line-height:1.85;margin-bottom:24px}.about-education{margin-top:40px;gap:20px}.about-footnote{margin:50px 24px 0;align-self:flex-start;font-size:12px}#puffy-note{position:relative;bottom:auto;left:auto;right:auto;margin-top:14px;width:min(256px,calc(100vw - 48px))}body[data-view^=about] .masthead{right:calc(18px + var(--about-scrollbar-gap,0px))}body[data-view^=about] .masthead:before{inset:-24px -18px -22px}}
@media(max-height:650px) and (min-width:651px){.about-inner{padding-top:112px}.about-copy{padding-block:0}.about-footnote{margin-top:48px}}
@media(prefers-reduced-motion:reduce){#portfolio-shell>main{transition:none}}