.hero{
  position:relative; overflow:hidden;
  padding:clamp(112px,16vh,168px) 0 clamp(56px,8vh,92px);
}

.hero-field{
  position:absolute; inset:-14% -18% auto -18%; height:150%;
  pointer-events:none;
  background:
    radial-gradient(58% 52% at 20% 16%, rgba(71,35,169,.34), transparent 66%),
    radial-gradient(44% 40% at 84% 4%,  rgba(155,60,211,.26), transparent 70%),
    radial-gradient(56% 58% at 64% 58%, rgba(50,21,117,.50), transparent 72%),
    linear-gradient(to bottom, transparent 46%, rgba(52,26,112,.24) 76%);
}

.hero-grid{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:minmax(180px, 280px) 1fr;
  gap:clamp(26px, 4.5vw, 60px);
  align-items:start;
}

.hero-portrait{ position:relative; }

.portrait-wrap{ width:100%; }

.portrait{
  width:100%;
  animation:bob 7.5s ease-in-out infinite;
  will-change:transform;
}
@keyframes bob{ 50%{ transform:translateY(-13px) } }

.portrait img{ width:100%; height:auto; }

.portrait-shadow{
  width:58%; height:15px;
  margin:4px auto 0;
  border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(2,1,7,.9), rgba(30,10,58,.5) 55%, transparent 74%);
  filter:blur(6px);
  animation:bobshade 7.5s ease-in-out infinite;
  will-change:transform, opacity;
}
@keyframes bobshade{ 50%{ transform:translateY(-5px) scaleX(.84); opacity:.5 } }

.handle-note{
  margin-top:18px;
  font-size:12.5px; line-height:1.8;
  letter-spacing:.01em;
  color:var(--mid);
  text-align:center;
}
.handle-note b{
  display:block;
  margin-bottom:5px;
  font-size:12px; font-weight:700; letter-spacing:.04em;
  color:var(--accent);
}

.hero-body{ padding-top:clamp(0px,1.6vw,20px); min-width:0; }

.kicker{
  font-size:12px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--mid);
  margin-bottom:16px;
}

.hero h1{
  font-size:clamp(38px, 7.4vw, 88px);
  font-weight:800;
  letter-spacing:-.06em;
  margin-bottom:8px;
}
.h1-name{ color:var(--star); }

.role{
  color:var(--accent);
  font-size:clamp(13px,1.6vw,15px);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:26px;
}

.blurb{
  max-width:58ch;
  color:#ece8f7;
  font-size:clamp(15px,1.25vw,17px);
  line-height:1.8;
  margin-bottom:26px;
}

.facts{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
  background:var(--panel);
  margin-bottom:28px;
  max-width:520px;
}
@media (max-width:560px){ .facts{ grid-template-columns:1fr 1fr; } }
@media (max-width:359px){ .facts{ grid-template-columns:1fr; } }

.fact{
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:12px 15px;
  min-width:0;
}
.fact b{
  display:block;
  font-size:11px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--mid);
  margin-bottom:5px;
}
.fact span{ font-size:16px; font-weight:700; color:var(--star); }

.skills{
  margin-top:36px;
  padding-top:24px;
}
.skills-label{
  font-size:12px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--mid);
  margin-bottom:15px;
}
.skill-list{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; list-style:none; }
.skill-list li{ list-style:none; }
.skill-list li::marker{ content:''; }

.skill{
  display:inline-block;
  padding:7px 13px;
  font-size:12.5px; font-weight:500; letter-spacing:.02em;
  color:#e9e5f5;
  border:1px solid var(--line-hi);
  background-color:#171233;
  background-image:linear-gradient(var(--plasma-lo), var(--plasma-lo));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:100% 0;
  cursor:default;
  transition:background-size .36s var(--ease), color .26s, border-color .26s, letter-spacing .3s var(--ease);
}
.skill:hover{
  background-size:100% 100%;
  color:var(--star); border-color:var(--plasma); letter-spacing:.09em;
}

@media (max-width:820px){
  .hero-grid{ grid-template-columns:1fr; gap:22px; }
  .portrait-wrap{ max-width:160px; }
  .handle-note{ text-align:left; max-width:46ch; margin-top:14px; }
}
@media (max-width:480px){
  .portrait-wrap{ max-width:124px; }
}