html.ready .line-in{transform:translateY(0)}

.hero-foot{
  display:flex;justify-content:flex-end;align-items:flex-end;gap:24px;
  margin-top:clamp(24px,5vh,56px);
  padding-bottom:26px;
  opacity:0;transform:translateY(14px);
  transition:opacity .9s var(--ease) .5s,transform .9s var(--ease) .5s;
}
html.ready .hero-foot{opacity:1;transform:none}
html.ready .hero-fig{opacity:1;transform:none}
.scroll-cue{
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  display:flex;align-items:center;gap:10px;white-space:nowrap;color:var(--grey);
}
.scroll-cue::after{
  content:"";width:1px;height:44px;background:var(--ink);
  animation:cue 1.8s var(--ease) infinite;
  transform-origin:top;
}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:640px){.hero-foot{display:none}}

.morph{
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  overflow:hidden;
  background:var(--paper);
  opacity:0;transition:opacity 1.2s ease .7s;
}
html.ready .morph{opacity:1}
.morph canvas{
  display:block;width:100%;height:96px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}


.sect{padding:clamp(72px,12vh,150px) clamp(16px,3vw,40px)}
.sect-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  padding-bottom:16px;margin-bottom:clamp(36px,6vh,72px);
  border-bottom:1px solid var(--hairline);
}
.sect-head .n{color:var(--red)}
.statement{
  font-size:clamp(30px,4.6vw,68px);
  line-height:1.06;letter-spacing:-.02em;font-weight:400;
  max-width:22ch;text-wrap:balance;
}
.statement em{font-style:italic;color:var(--red)}

.rv{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}

.skills-intro{
  display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(24px,4vw,72px);
  align-items:end;margin-bottom:clamp(40px,7vh,90px);
}
.skills-intro p{
  font-family:var(--mono);font-size:12.5px;line-height:1.85;letter-spacing:.02em;
  color:var(--ink-2);max-width:46ch;
}
@media (max-width:900px){.skills-intro{grid-template-columns:1fr}}

.skill{
  display:grid;
  grid-template-columns:clamp(48px,7vw,110px) 1.15fr 1fr;
  gap:clamp(14px,2.5vw,40px);
  align-items:start;
  padding:clamp(26px,3.5vh,44px) clamp(10px,1.5vw,24px);
  border-top:1px solid var(--hairline);
  position:relative;
  transition:background .4s var(--ease),color .4s var(--ease);
}
.skill:last-child{border-bottom:1px solid var(--hairline)}
.skill-num{
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--grey);
  padding-top:.7em;display:flex;align-items:center;gap:10px;
  transition:color .4s;
}
.skill-num .blip{
  width:8px;height:8px;border-radius:50%;background:var(--red);flex:none;
  opacity:0;transform:scale(.4);transition:opacity .35s,transform .35s var(--ease);
}
.skill-title{
  font-size:clamp(28px,4vw,58px);line-height:1.02;letter-spacing:-.02em;font-weight:400;
  transition:transform .5s var(--ease);
}
.skill-desc{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;
  color:var(--grey);margin-top:12px;transition:color .4s;
}
.skill-tags{display:flex;flex-wrap:wrap;gap:8px;padding-top:.55em}
.skill-tags li{
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;
  padding:7px 12px;border:1px solid var(--hairline);border-radius:999px;
  transition:border-color .4s,background .3s,color .3s;
  white-space:nowrap;
}
@media (hover:hover){
  .skill:hover{background:var(--ink);color:var(--paper)}
  .skill:hover .skill-num{color:var(--paper)}
  .skill:hover .skill-num .blip{opacity:1;transform:scale(1);animation:pulse 1.4s ease-out infinite}
  .skill:hover .skill-title{transform:translateX(clamp(6px,1vw,16px))}
  .skill:hover .skill-desc{color:rgba(247,245,240,.6)}
  .skill:hover .skill-tags li{border-color:var(--hairline-inv)}
  .skill:hover .skill-tags li:first-child{background:var(--red);border-color:var(--red);color:var(--paper)}
}
@media (max-width:900px){
  .skill{grid-template-columns:1fr;gap:14px}
  .skill-num{padding-top:0}
  .skill-tags{padding-top:0}
}

.dark{background:var(--ink);color:var(--paper)}
.dark .sect-head{border-color:var(--hairline-inv)}
.dark ::selection{background:var(--paper);color:var(--ink)}


/* skills on the dark ground: hairlines invert, hover flips to paper */
.dark .skill{border-top-color:var(--hairline-inv)}
.dark .skill:last-child{border-bottom-color:var(--hairline-inv)}
.dark .skill-tags li{border-color:var(--hairline-inv)}
.dark .skills-intro p{color:rgba(247,245,240,.72)}
@media (hover:hover){
  .dark .skill:hover{background:var(--paper);color:var(--ink)}
  .dark .skill:hover .skill-num{color:var(--ink)}
  .dark .skill:hover .skill-desc{color:rgba(22,20,18,.6)}
  .dark .skill:hover .skill-tags li{border-color:var(--hairline)}
}