/* The portrait is the human source of the portfolio's visual transmission. */
#about{position:relative;isolation:isolate;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);column-gap:7%;row-gap:0;background:radial-gradient(ellipse at 25% 46%,#90bc3510,transparent 56%);align-items:center}
#about>.eyebrow{grid-column:1/-1;margin-bottom:42px;font-size:12px}
.source-portrait{position:relative;min-width:0;width:100%;max-width:540px;margin:0;align-self:center}
.portrait-topline{display:flex;justify-content:space-between;gap:16px;align-items:center;border-top:1px solid #c5ff5d55;padding:14px 0;color:#c5ff5d;font:12px/1.5 monospace;letter-spacing:.08em}
.portrait-aperture{position:relative;isolation:isolate;aspect-ratio:3/4;background:#090e0c;overflow:hidden}
.portrait-aperture img{display:block;width:100%;height:100%;object-fit:cover;mask-image:linear-gradient(to bottom,#000 85%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 85%,transparent 100%)}
.portrait-aperture:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#080b0b66,transparent 12%,transparent 88%,#080b0b66);z-index:1}
.portrait-registration{position:absolute;inset:18px;z-index:2;pointer-events:none;background:linear-gradient(#c5ff5d88,#c5ff5d88) 0 0/26px 1px no-repeat,linear-gradient(#c5ff5d88,#c5ff5d88) 0 0/1px 26px no-repeat,linear-gradient(#c5ff5d88,#c5ff5d88) 100% 0/26px 1px no-repeat,linear-gradient(#c5ff5d88,#c5ff5d88) 100% 0/1px 26px no-repeat,linear-gradient(#c5ff5d44,#c5ff5d44) 0 100%/26px 1px no-repeat,linear-gradient(#c5ff5d44,#c5ff5d44) 0 100%/1px 26px no-repeat,linear-gradient(#c5ff5d44,#c5ff5d44) 100% 100%/26px 1px no-repeat,linear-gradient(#c5ff5d44,#c5ff5d44) 100% 100%/1px 26px no-repeat}
.portrait-exposure{position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 40%,#e2ffab16 50%,transparent 60%);transform:translateX(-110%);z-index:3;opacity:0}
.js-motion #about.visible .portrait-exposure{animation:portrait-expose 1.6s .25s ease-out both}
.source-portrait figcaption{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 18px;border-bottom:1px solid var(--line);padding:15px 0;color:#b5c4b2;font-size:14px;line-height:1.5}
.source-portrait figcaption>span:first-child{color:#edf2ed}
.source-portrait figcaption>span:last-child{font-size:12px;font-family:monospace}
.about-story{position:relative;min-width:0;padding:32px 0}
.source-connection{position:relative;display:flex;align-items:center;gap:16px;margin-bottom:35px;color:#c5ff5d;font:12px/1.6 monospace;letter-spacing:.075em}
.source-connection i{display:block;position:relative;flex:0 0 38px;height:1px;background:#c5ff5d99}
.source-connection i:before{content:'';position:absolute;left:0;top:-3px;width:7px;height:7px;border:1px solid #c5ff5d;background:#080b0b;transform:rotate(45deg)}
#about h2{font-size:clamp(38px,5.25vw,84px);line-height:1.08;margin-bottom:32px}
#about .about-story>p{font-size:clamp(17px,1.5vw,21px);line-height:1.7;max-width:570px;margin-bottom:20px}
#about .skills{margin-top:30px;gap:8px}
#about .skills span{font-size:14px;padding:8px 11px}
.source-timeline{grid-column:1/-1;display:flex;align-items:center;gap:18px;color:#a8b9a4;font:12px/1.5 monospace;letter-spacing:.12em;margin-top:42px;padding-top:18px;border-top:1px solid var(--line)}
.source-timeline i{flex:1;height:14px;position:relative;background:repeating-linear-gradient(90deg,#77985b66 0 1px,transparent 1px 10px);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.source-timeline i:after{content:'';position:absolute;inset:5px 12%;border-top:1px solid #c5ff5d55;background:#080b0b}
@keyframes portrait-expose{0%{transform:translateX(-110%);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateX(110%);opacity:0}}
.paused .portrait-exposure,.page-hidden .portrait-exposure{animation-play-state:paused!important}
@media(max-width:850px){#about{column-gap:5%}#about h2{font-size:clamp(32px,4.9vw,46px)}.source-connection{font-size:12px;letter-spacing:0;gap:10px}.source-connection i{flex-basis:20px}#about .skills span{font-size:14px}.source-portrait figcaption{flex-direction:column}.about-story{padding:20px 0}}
@media(max-width:650px){#about{grid-template-columns:minmax(0,1fr);row-gap:0}#about>.eyebrow{margin-bottom:30px;line-height:1.6}.source-portrait{max-width:420px;justify-self:center}.portrait-topline{font-size:12px}.source-portrait figcaption{flex-direction:row}.about-story{padding:38px 0 0}.source-connection{margin-bottom:24px;letter-spacing:.055em}#about h2{font-size:clamp(37px,10.7vw,64px);margin-bottom:25px}#about .about-story>p{font-size:18px}.source-timeline{gap:10px;letter-spacing:0;margin-top:32px}.source-timeline i{min-width:5px}.source-portrait figcaption>span:last-child{font-size:12px}}
@media(prefers-reduced-motion:reduce){.js-motion #about.visible .portrait-exposure{animation:none;display:none}}
