/* ── about ── */
.wave{display:block;width:100%;height:110px;margin-top:70px}
.wave path{stroke:var(--line);stroke-width:2;fill:none}
.about{position:relative;max-width:1260px;margin-inline:auto;padding-top:70px;padding-bottom:110px}
.about-head{display:flex;justify-content:center;align-items:center;gap:44px;flex-wrap:wrap}
.about-hand{font-family:var(--hand);font-size:30px;rotate:-8deg}
.whatsup{position:relative;border:1.5px solid var(--cyan);padding:6px 16px;font-size:18px}
.whatsup .hd{width:9px;height:9px}
.whatsup .hd.tl{top:-5px;left:-5px}.whatsup .hd.tr{top:-5px;right:-5px}.whatsup .hd.bl{bottom:-5px;left:-5px}.whatsup .hd.br{bottom:-5px;right:-5px}
.about-big{max-width:14em;margin:44px auto 0;text-align:center;font-size:clamp(32px,4.6vw,58px);font-weight:500;line-height:1.12;letter-spacing:-.04em;text-wrap:balance}
.tile{display:inline-grid;place-items:center;width:.9em;height:1.1em;border-radius:.14em;vertical-align:-.2em;margin:0 .06em;rotate:-6deg;box-shadow:0 3px 0 rgba(0,0,0,.12)}
.tile svg{width:62%;height:62%}
.t1{background:var(--cyan)}.t2{background:var(--yellow);rotate:7deg}.t3{background:var(--pink);rotate:-4deg}
.pol{position:absolute;width:184px;background:#fff;color:#111;padding:10px 10px 12px;box-shadow:0 12px 32px rgba(0,0,0,.10),0 0 0 1px rgba(0,0,0,.05)}
.pol.p1{left:max(16px,1.5%);top:190px;rotate:-7deg}
.pol.p2{right:max(16px,1.5%);top:370px;rotate:6deg}
.pimg{aspect-ratio:4/5;display:grid;place-items:center;background:repeating-linear-gradient(135deg,#E8F7FD 0 12px,#D9F1FA 12px 24px);overflow:hidden}
.pimg.ws{background:repeating-linear-gradient(135deg,#FDF3D8 0 12px,#F8E9BE 12px 24px)}
.pimg img{width:100%;height:100%;object-fit:cover}
.pimg span{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);background:#fff;padding:3px 8px;border-radius:99px}
.pol figcaption{font-family:var(--hand);font-size:21px;text-align:center;margin-top:6px;line-height:1}
@media(max-width:1100px){
  .pols{display:flex;justify-content:center;gap:28px;margin-top:40px}
  .pol{position:relative;left:auto!important;right:auto!important;top:auto!important;width:150px}
}
.skills{display:flex;flex-wrap:wrap;justify-content:center;gap:22px 16px;margin-top:60px}
.skills .pill{font-size:14px;padding:12px 22px}
.skills{gap:10px 8px;max-width:780px;margin-inline:auto}
.sk{display:flex;gap:8px;font-size:clamp(24px,3.2vw,38px)}
.slab{display:flex;align-items:center;height:1.66em;padding:0 .4em;font-weight:500;letter-spacing:-.035em;white-space:nowrap;background:var(--sbg);color:var(--sfg,var(--ink))}
.stile{position:relative;flex:none;width:1.66em;height:1.66em;background:var(--sbg);display:grid;place-items:center}
.stile svg{width:76%;height:76%;transition:rotate .45s cubic-bezier(.3,1.4,.5,1)}
.stile::after{content:"";position:absolute;inset:0;outline:2px dashed var(--ink);outline-offset:-2px;opacity:0;transition:opacity .2s}
.stile .hd{width:9px;height:9px;background:#fff;opacity:0;transition:opacity .2s}
.stile .hd.tl{top:-5px;left:-5px}.stile .hd.tr{top:-5px;right:-5px}.stile .hd.bl{bottom:-5px;left:-5px}.stile .hd.br{bottom:-5px;right:-5px}
.sk:hover .stile::after,.sk:hover .stile .hd{opacity:1}
.sk:hover .stile svg{rotate:90deg}
.sy{--sbg:var(--yellow)}.sg{--sbg:var(--green)}.sp{--sbg:var(--pink);--sfg:#fff}.sc{--sbg:var(--cyan)}