/* ═══════════ SECTION TAG (yellow dash + stacked label) ═══════════ */
.tag{
  font-family:var(--f-heavy);
  font-size:var(--t-tag);
  line-height:1.06;
  letter-spacing:-.01em;
  text-transform:uppercase;
  position:relative;
  padding-left:1.15em;
  margin-bottom:1.35rem;
}
.tag::before{
  content:"";
  position:absolute;
  left:0; top:.34em;
  width:.72em; height:.2em;
  background:var(--hl);
}

/* ═══════════ HIGHLIGHTER SWIPE ═══════════ */
.hl{
  background-image:linear-gradient(var(--hl),var(--hl));
  background-repeat:no-repeat;
  background-position:0 62%;
  background-size:0% 78%;
  padding:0 .16em;
  transition:background-size .85s var(--ease) .25s;
}
.is-in .hl,
.hl.is-in{ background-size:100% 78%; }

/* ═══════════ WASHI TAPE ═══════════ */
.tape{
  position:absolute;
  width:118px; height:32px;
  background:
    linear-gradient(105deg, rgba(255,255,255,.14) 0 12%, transparent 12% 100%),
    #1c1c1e;
  filter:url(#grain-coarse) contrast(1) ;
  box-shadow:0 4px 14px rgba(0,0,0,.28);
  z-index:3;
  /* torn short edges */
  clip-path:polygon(
    3% 0%, 97% 4%, 100% 22%, 96% 44%, 99% 68%, 95% 100%,
    6% 96%, 2% 74%, 5% 50%, 0% 28%
  );
}
.tape::after{
  content:"";
  position:absolute; inset:0;
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,.05) 0 2px, transparent 2px 5px);
  mix-blend-mode:overlay;
}
.tape--tr{ top:-16px; right:-26px; transform:rotate(38deg); }
.tape--bl{ bottom:34px; left:-40px; transform:rotate(14deg); }

/* ═══════════ HAND ANNOTATIONS ═══════════ */
.hand{
  font-family:var(--f-hand);
  font-size:clamp(.95rem,1.4vw,1.3rem);
  line-height:1.05;
  color:var(--ink-soft);
  position:absolute;
  white-space:nowrap;
  pointer-events:none;
}

/* hand-drawn arrows */
.scribble{
  position:absolute;
  overflow:visible;
  pointer-events:none;
  fill:none;
  stroke:var(--ink);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.scribble .draw{
  stroke-dasharray:var(--len,300);
  stroke-dashoffset:var(--len,300);
}
.is-in .scribble .draw{
  animation:draw 1.1s var(--ease) .35s forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion: reduce){
  .scribble .draw{ stroke-dashoffset:0; }
}

/* ═══════════ CONTACTS ═══════════ */
.contacts{
  display:flex;
  align-items:flex-start;
  gap:clamp(1rem,3vw,2.6rem);
  flex-wrap:wrap;
  margin-top:clamp(2rem,4vw,3.4rem);
}
.tag--split{ margin-bottom:0; flex:0 0 auto; }
.contacts__list{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem .6rem;
  padding-top:.15rem;
}
.contacts__item{ display:flex; }
.contacts__link{
  display:flex; align-items:center; gap:.5rem;
  font-size:var(--t-body);
  padding:.3rem .8rem .3rem .3rem;
  border-radius:999px;
  border:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.contacts__link:hover{
  border-color:var(--ink);
  background:rgba(0,0,0,.03);
}
.contacts__icon{
  width:32px; height:32px;
  display:grid; place-items:center;
  background:var(--hl);
  border-radius:50%;
  color:var(--ink);
  flex:0 0 auto;
  transition:transform .35s var(--ease);
}
.contacts__icon svg{ width:16px; height:16px; }
.contacts__link:hover .contacts__icon{ transform:rotate(-10deg) scale(1.1); }
.contacts__label{ white-space:nowrap; }

/* ═══════════ TIMELINE ═══════════ */
.timeline__item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.1rem .7rem;
  padding-bottom:1.15rem;
}
.timeline__yr{
  font-family:var(--f-heavy);
  font-size:.56rem;
  background:var(--ink);
  color:var(--hl);
  padding:.28em .5em;
  height:max-content;
  letter-spacing:.02em;
}
.timeline__co{
  font-family:var(--f-display);
  font-weight:800;
  font-size:1.02rem;
  line-height:1.2;
}
.timeline__loc{
  grid-column:2;
  font-size:.68rem;
  color:var(--ink-faint);
}
.timeline__role{
  grid-column:2;
  margin-top:.3rem;
  font-family:var(--f-heavy);
  font-size:.72rem;
  width:max-content;
  max-width:100%;
}
.timeline__meta{
  grid-column:2;
  margin-top:.4rem;
  font-size:.63rem;
  color:var(--ink-faint);
  line-height:1.4;
}
.timeline__meta b{ color:var(--ink-soft); font-weight:700; }

/* ═══════════ SKILL BARS ═══════════ */
.skills__item{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:.5rem;
  padding-bottom:.75rem;
}
.skills__label{
  font-family:var(--f-heavy);
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.02em;
  grid-column:1;
}
.skills__num{
  grid-row:1 / span 2;
  grid-column:2;
  width:22px; height:22px;
  display:grid; place-items:center;
  background:var(--hl);
  font-family:var(--f-heavy);
  font-size:.66rem;
}
.skills__track{
  grid-column:1;
  position:relative;
  height:9px;
  margin-top:.28rem;
}
.skills__track::before{
  content:"";
  position:absolute; left:0; top:50%;
  width:100%; height:1px;
  background:var(--paper-line);
}
.skills__fill{
  position:absolute; left:0; top:50%;
  height:2px;
  background:var(--ink);
  width:0;
  transition:width 1.1s var(--ease) .2s;
}
.skills__fill::after{
  content:"";
  position:absolute; right:-1px; top:50%;
  width:7px; height:7px;
  border-top:2px solid var(--ink);
  border-right:2px solid var(--ink);
  transform:translateY(-50%) rotate(45deg);
}

/* ═══════════ TOOL CHIPS ═══════════ */
.tools{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.7rem;
  max-width:230px;
}
.tools__item{
  aspect-ratio:1;
  display:grid; place-items:center;
  background:var(--white);
  border:2px solid var(--ink);
  border-radius:50%;
  padding:.5rem;
  transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
  cursor:default;
}
.tools__item img{ width:100%; height:100%; object-fit:contain; }
.tools__item:hover{ border-color:var(--hl); box-shadow:0 6px 14px rgba(0,0,0,.14); transform:translateY(-4px); }

/* ═══════════ HOBBIES ═══════════ */
.hobbies{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem .7rem;
}
.hobbies__item{
  width:50px;
  text-align:center;
  font-size:.5rem;
  line-height:1.25;
  color:var(--ink-soft);
  text-transform:uppercase;
  letter-spacing:.02em;
}
.hobbies__ico{
  font-size:1.5rem;
  display:block;
  margin-bottom:.3rem;
  filter:grayscale(.15);
  transition:transform .35s var(--ease);
}
.hobbies__item:hover .hobbies__ico{ transform:translateY(-5px) rotate(-8deg); }

/* ═══════════ RANDOM FACTS ═══════════ */
.facts{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.9rem .8rem;
}
.facts__n{
  font-family:var(--f-heavy);
  font-size:clamp(1.3rem,2.4vw,1.85rem);
  line-height:1;
  position:relative;
  width:max-content;
  padding:0 .1em;
}
.facts__n::before{
  content:"";
  position:absolute;
  left:0; right:0; bottom:.02em;
  height:.44em;
  background:var(--hl);
  z-index:-1;
}
.facts__t{
  margin-top:.3rem;
  font-size:.54rem;
  line-height:1.35;
  color:var(--ink-faint);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ═══════════ DINO STRIP ═══════════ */
.dino{
  position:relative;
  height:44px;
  margin-top:1.6rem;
  overflow:hidden;
  border-bottom:1px solid var(--paper-line);
  mask-image:linear-gradient(90deg,transparent,#000 12% 88%,transparent);
}
.dino__track{
  position:absolute;
  bottom:0;
  display:flex;
  align-items:flex-end;
  gap:70px;
  animation:run 14s linear infinite;
  will-change:transform;
}
@keyframes run{ to{ transform:translateX(-50%); } }
.dino svg{ fill:var(--ink-faint); flex:0 0 auto; }
.dino .is-dino{ fill:var(--ink); animation:hop 1.1s var(--ease) infinite; }
@keyframes hop{ 0%,72%,100%{ transform:translateY(0); } 84%{ transform:translateY(-9px); } }
@media (prefers-reduced-motion: reduce){
  .dino__track,.dino .is-dino{ animation:none; }
}