/* About: an editorial skills index with a scroll-linked, native vector specimen. */
.skills-showcase .section-heading{align-items:end;margin-bottom:55px}
.skills-hint{max-width:320px;font-size:16px;line-height:1.7}.skills-hint span{font-size:12px;color:var(--muted)}
.skills-exhibit{display:grid;grid-template-columns:1.15fr 1fr;gap:7vw;align-items:start}
.skills-visual{grid-column:2;grid-row:1;position:sticky;top:130px;min-width:0;padding:24px;border:1px solid #64dcdd35;background:radial-gradient(ellipse at 50% 48%,#64dcdd12,transparent 70%),#080c0c;border-radius:4px;overflow:hidden}
.skills-visual-meta{display:flex;justify-content:space-between;gap:12px;color:var(--aqua);font-size:10px;letter-spacing:.09em}
.skills-visual svg{display:block;width:100%;max-height:340px;margin:18px auto;stroke:var(--aqua);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.skill-art{opacity:0;transform-origin:192px 170px;transform:scale(.88) rotate(-7deg);transition:opacity .5s ease,transform .8s var(--ease)}
.skill-art.is-active{opacity:1;transform:none}.skill-art .solid{fill:var(--aqua);stroke:none}
.motion-on .skill-art.is-active{animation:skill-arrive .8s var(--ease)}
@keyframes skill-arrive{from{opacity:0;transform:scale(.88) rotate(-7deg)}to{opacity:1;transform:none}}
.skills-caption{font:500 15px/1.5 Inter,sans-serif;text-transform:uppercase;letter-spacing:.025em;color:var(--ink)}
.skills-dots{display:flex;gap:6px;margin-top:16px}.skills-dots i{height:2px;flex:1;background:#ffffff20}.skills-dots i.is-active{background:var(--aqua)}
.skills-list{grid-column:1;grid-row:1;min-width:0}
.skill-card{position:relative;display:grid;grid-template-columns:32px 1fr auto;align-items:baseline;gap:14px;width:100%;padding:48px 0;border:0;border-top:1px solid var(--line);background:none;color:var(--ink);text-align:left;cursor:pointer}
.skill-card:last-child{border-bottom:1px solid var(--line)}
.skill-index{font:400 11px/1.5 Inter,sans-serif;color:var(--muted)}
.skill-name{font:600 clamp(20px,2.15vw,34px)/1.2 Montserrat,sans-serif;letter-spacing:-.04em;text-transform:uppercase;overflow-wrap:anywhere;transition:color .3s,transform .4s var(--ease)}
.skill-score{font:400 13px/1.5 Inter,sans-serif;color:var(--aqua)}
.skill-card[aria-pressed=true] .skill-name,.skill-card:hover .skill-name{color:var(--aqua)}
.skill-card:hover .skill-name{transform:translateX(4px)}
.skill-card:focus-visible{outline:2px solid var(--aqua);outline-offset:7px}
.skill-rule{position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--aqua);transform-origin:left;transform:scaleX(0);transition:transform .9s var(--ease)}
.skill-card.is-seen .skill-rule{transform:scaleX(1)}
.skill-card[aria-pressed=false].is-seen .skill-rule{opacity:.3}
.skills-portrait{margin-top:70px}.skills-portrait img{width:100%;max-height:460px;object-fit:cover;object-position:center 40%;border-radius:4px}
@media(max-width:900px){.skills-exhibit{gap:35px;grid-template-columns:1fr 1fr}.skill-card{grid-template-columns:22px 1fr;gap:10px;padding:36px 0}.skill-score{grid-column:2}.skills-visual{padding:18px}}
@media(max-width:600px){.skills-showcase .section-heading{gap:24px;margin-bottom:30px}.skills-exhibit{display:flex;flex-direction:column;gap:24px}.skills-visual{position:sticky;top:80px;z-index:3;width:100%;height:194px;padding:16px;background:#080c0c;display:grid;grid-template-columns:1fr 130px;grid-template-rows:auto 1fr auto;gap:12px}.skills-visual-meta{grid-column:1/-1;font-size:9px}.skills-visual svg{grid-column:2;grid-row:2/4;width:130px;height:122px;margin:0}.skills-caption{grid-column:1;grid-row:2;align-self:center;font-size:13px}.skills-dots{grid-column:1;grid-row:3;margin:0 0 8px}.skills-list{width:100%}.skill-card{grid-template-columns:22px 1fr auto;padding:32px 0}.skill-name{font-size:clamp(18px,5vw,25px)}.skill-score{grid-column:auto;font-size:12px}.skills-portrait{margin-top:40px}.skills-portrait img{min-height:230px}}
@media(prefers-reduced-motion:reduce){.skill-art{transition:none;animation:none!important}.skill-rule{transform:scaleX(1)}}
.motion-off .skill-rule,html:not(.js) .skill-rule{transform:scaleX(1)}
html:not(.js) .skills-hint span{display:none}