/* =========================================================
   Section 3 — About. Black like the rest of the site, read top to bottom.
   Head → portrait + statement + numbers → experience accordion → skills / education / CV.
   ========================================================= */

.about{padding:clamp(72px,9vw,144px) var(--margin);border-top:1px solid var(--line);overflow-x:clip}

/* head */
.about__head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 20px;padding-bottom:20px;border-bottom:1px solid var(--line-strong);margin-bottom:clamp(36px,5vw,72px)}
.about__idx{color:var(--mute-2)}
.about__idx::before{content:"";display:inline-block;width:10px;height:10px;background:var(--acid);margin-right:8px;vertical-align:-1px}
.about__title{font-family:var(--f-display);font-weight:600;font-size:var(--t-xl);letter-spacing:-.04em;line-height:.9;text-transform:uppercase}
.about__roles{color:var(--mute-2);margin-left:auto}

/* intro */
.about__intro{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,64px)}
.about__pic{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--ink-2);max-width:420px}
.about__pic img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transform:scale(1.04);transition:filter .8s var(--expo),transform 1.2s var(--expo)}
.about__pic:hover img{filter:none;transform:scale(1)}
.about__pic figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;padding:12px 14px;color:var(--paper);background:linear-gradient(transparent,rgba(9,9,9,.75))}
.about__pic figcaption sup{font-size:.7em}
.about__pic::after{content:"";position:absolute;top:0;left:0;width:36px;height:36px;border-top:2px solid var(--acid);border-left:2px solid var(--acid)}
.about__copy{display:flex;flex-direction:column;gap:clamp(20px,2.4vw,32px);min-width:0}
.about__statement{font-family:var(--f-display);font-weight:500;font-size:var(--t-l);letter-spacing:-.03em;line-height:1.08;text-wrap:balance}
.about__statement .w{transition:color .3s}
.about__body{color:var(--mute-2);font-size:clamp(16px,1.2vw,19px);max-width:54ch}

/* numbers */
.about__stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px var(--gutter);margin-top:8px}
.stat{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line-strong);padding-top:14px}
.stat__v{font-family:var(--f-display);font-weight:700;font-size:clamp(40px,4.4vw,72px);letter-spacing:-.05em;line-height:.85;color:var(--acid);font-variant-numeric:tabular-nums}
.stat__l{color:var(--mute-2);font-size:14px;line-height:1.35;max-width:22ch}

/* blocks */
.about__block{margin-top:clamp(56px,7vw,112px)}
.about__k{color:var(--mute-2);margin-bottom:16px}
.about__k span{color:var(--acid)}

/* experience accordion */
.xp{list-style:none;padding:0;margin:0;border-top:1px solid var(--line-strong)}
.xp__row{border-bottom:1px solid var(--line)}
.xp__sum{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 24px;gap:4px 16px;align-items:baseline;padding:18px 0;transition:padding .4s var(--expo),color .3s}
.xp__sum::-webkit-details-marker{display:none}
.xp__yr{grid-column:1;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;color:var(--mute-2)}
.xp__role{grid-column:1;font-family:var(--f-display);font-weight:600;font-size:clamp(19px,1.8vw,28px);letter-spacing:-.03em;line-height:1.1;transition:color .3s}
.xp__co{grid-column:1;color:var(--mute-2);font-size:15px}
.xp__pm{grid-column:2;grid-row:1/span 3;align-self:center;position:relative;width:16px;height:16px}
.xp__pm::before,.xp__pm::after{content:"";position:absolute;left:0;top:50%;width:16px;height:1.5px;background:currentColor;transition:transform .4s var(--expo)}
.xp__pm::after{transform:rotate(90deg)}
details[open] .xp__pm::after{transform:rotate(0)}
.xp__sum:hover .xp__role,details[open] .xp__role{color:var(--acid)}
.xp__row.is-current .xp__yr::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--acid);margin-left:10px;vertical-align:1px;animation:xpLive 1.6s ease-in-out infinite}
@keyframes xpLive{50%{opacity:.25}}
.xp__text{color:var(--mute-2);max-width:62ch;padding:0 0 22px;font-size:16px}
.xp__sum:focus-visible{outline:2px solid var(--acid);outline-offset:4px}

/* skills, education, CV */
.about__end{display:grid;grid-template-columns:1fr;gap:clamp(36px,4vw,64px)}
.kit__row{display:grid;grid-template-columns:1fr;gap:10px;padding:16px 0;border-top:1px solid var(--line)}
.kit__g{color:var(--paper)}
.kit__list{display:flex;flex-wrap:wrap;gap:6px}
.chip-skill{font-size:13.5px;padding:6px 12px;border:1px solid var(--line-strong);border-radius:999px;transition:background .3s,color .3s,border-color .3s}
.chip-skill:hover{background:var(--acid);color:var(--ink);border-color:var(--acid)}
.about__side{display:flex;flex-direction:column;gap:24px}
.cv__card{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line-strong);padding-top:14px}
.cv__card .label{color:var(--mute-2)}
.cv__big{font-family:var(--f-display);font-weight:600;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.03em;line-height:1.1}
.cv__school{color:var(--mute-2)}
.about__acts{display:flex;flex-wrap:wrap;gap:12px}

@media (min-width:900px){
	.about__intro{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
	.about__pic{grid-column:1/span 4;max-width:none;align-self:start;position:sticky;top:calc(var(--header-h) + 24px)}
	.about__copy{grid-column:6/span 7}
	.about__stats{grid-template-columns:repeat(4,minmax(0,1fr))}
	.xp__sum{grid-template-columns:150px minmax(0,1.3fr) minmax(0,1fr) 24px;padding:22px 0}
	.xp__yr,.xp__role,.xp__co{grid-column:auto}
	.xp__pm{grid-column:4;grid-row:1}
	.xp__text{margin-left:166px}
	.xp__sum:hover{padding-left:12px}
	.about__end{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
	.about__skills{grid-column:1/span 8}
	.about__side{grid-column:10/span 3}
	.kit__row{grid-template-columns:180px 1fr;align-items:baseline}
}

@media (prefers-reduced-motion:reduce){
	.about__pic img,.xp__sum{transition:none}
	.xp__row.is-current .xp__yr::after{animation:none}
}