/* ================= EXPERIENCE TIMELINE ================= */
.experience .corner{top:calc(var(--sp) - 40px)}
.experience .pix-title{margin-bottom:30px}

.xp-sum{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:60px}
.xp-sum .note{display:flex;align-items:center;gap:12px;padding:14px 20px;font-size:15px}
.xp-sum .note b{font-family:var(--pix);font-size:48px;line-height:.8;margin:0}

.xp-list{list-style:none;position:relative;display:grid;gap:34px}
/* dashed track + fill that grows while scrolling */
.xp-list::before,.xp-list::after{content:"";position:absolute;left:190px;top:10px;bottom:10px;width:3px}
.xp-list::before{background:repeating-linear-gradient(var(--ink) 0 8px,transparent 8px 14px);opacity:.25}
.xp-list::after{background:var(--yellow);transform-origin:top;transform:scaleY(var(--fill,0));box-shadow:0 0 0 1px var(--ink)}

.xp{display:grid;grid-template-columns:190px 1fr;gap:44px;position:relative}
.xp::before{content:"";position:absolute;left:182px;top:22px;width:19px;height:19px;background:var(--paper);border:3px solid var(--ink);z-index:2;transition:background .3s,transform .4s var(--ease)}
.xp:hover::before,.xp.lit::before{background:var(--yellow);transform:rotate(45deg) scale(1.15)}
.xp.now::before{background:var(--green)}

.xp-when{text-align:right;padding-top:10px;padding-right:30px;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.xp-n{font-family:var(--pix);font-size:44px;line-height:.8;color:var(--ink)}
.xp.now .xp-n{background:var(--green);color:#fff;padding:2px 10px 4px;font-size:30px;animation:blip 1.6s infinite}
.xp-when b{font-size:12px;font-weight:700}
.xp-when em{font-style:normal;font-size:17px;color:var(--muted)}

.xp-card{position:relative;padding:26px 30px;clip-path:none;box-shadow:0 10px 24px rgba(0,0,0,.08);transform:rotate(var(--tilt,-.6deg));transition:transform .4s var(--ease),box-shadow .4s}
.xp:nth-child(even) .xp-card{--tilt:.6deg}
.xp-card:hover{transform:rotate(0) translateX(8px);box-shadow:8px 8px 0 var(--ink)}
.xp-card .tape{left:auto;right:30px;top:-12px;transform:rotate(-8deg)}
.xp-card .tape.t2{right:auto;left:30px;transform:rotate(6deg)}
.xp-type{font-size:11px;font-weight:700;opacity:.7}
.xp-card h3{font-size:clamp(22px,2.2vw,30px);font-weight:700;letter-spacing:-.6px;margin:6px 0 4px}
.xp-co{font-size:17px;font-weight:600}
.xp-co small{display:block;font-size:12px;font-weight:400;opacity:.7}
.xp-loc{font-size:14px;margin-top:8px;opacity:.85}
.xp-skills{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.xp-skills span{font-family:var(--mono);font-size:12px;font-weight:700;background:#fff;border:1.5px solid var(--ink);padding:5px 10px;box-shadow:2px 2px 0 var(--ink);transition:transform .2s,box-shadow .2s}
.xp-skills span:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}

@media (max-width:900px){
  .xp-list::before,.xp-list::after{left:8px}
  .xp{grid-template-columns:1fr;gap:12px;padding-left:40px}
  .xp::before{left:0}
  .xp-when{padding-right:0;text-align:left;align-items:flex-start;flex-direction:row;flex-wrap:wrap;gap:10px;padding-top:16px}
  .xp-n{font-size:34px}
  .xp-card{padding:22px}
  .xp-sum .note{flex:1 1 100%}
}