/* Resume page: logos, timeline, stats, certification search (Oct 2026). Loaded only on /resume. */
:root{ --tile-bg:#fff; --mono-bg:92%; --mono-fg:30%; --mono-s:42% }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --tile-bg:#f4f5f3; --mono-bg:22%; --mono-fg:80%; --mono-s:30% } }
:root[data-theme="dark"]{ --tile-bg:#f4f5f3; --mono-bg:22%; --mono-fg:80%; --mono-s:30% }

.min0{ min-width:0 }
.side-note{ color:var(--mute); margin-top:18px; max-width:34ch }
.filter sup{ font-size:.72em; opacity:.6; margin-left:.15em; top:-.5em }

/* Stats */
.stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; margin:clamp(44px,6vw,80px) 0 0; border-top:1px solid var(--line) }
.stats > div{ padding:22px 20px 0 0; display:flex; flex-direction:column-reverse; gap:6px; min-width:0 }
.stats > div + div{ padding-left:20px; border-left:1px solid var(--line) }
.stats dt{ color:var(--mute); font-size:.92rem }
.stats dd{ margin:0; font-size:clamp(2.6rem,5.4vw,4.8rem); font-weight:500; letter-spacing:-.045em; line-height:1; font-variant-numeric:tabular-nums }

/* Logo tiles */
.tile{ flex:none; display:grid; place-items:center; width:56px; height:56px; border-radius:16px; background:var(--tile-bg); border:1px solid var(--line); overflow:hidden; transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out) }
.tile img{ width:100%; height:100%; object-fit:contain }
.tile--mono{ background:hsl(var(--h) var(--mono-s) var(--mono-bg)); color:hsl(var(--h) var(--mono-s) var(--mono-fg)); font-weight:600; font-size:1.05rem; letter-spacing:-.02em }
.tile--lg{ width:88px; height:88px; border-radius:24px }

/* Logo marquee */
.logos{ padding-block:clamp(56px,7vw,96px) 0 }
.logos > .label{ display:block; margin-bottom:22px }
.logos > .label .inner{ display:block }
.logos__viewport{ display:flex; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent) }
.logos__track{ list-style:none; margin:0; padding:0 14px 0 0; display:flex; gap:14px; flex:none; animation:marquee 46s linear infinite }
.logos__viewport:hover .logos__track{ animation-play-state:paused }
.logos__track li{ display:flex; align-items:center; gap:12px; padding:8px 20px 8px 8px; border:1px solid var(--line); border-radius:99px; white-space:nowrap; font-size:.95rem; transition:background .3s, border-color .3s }
.logos__track li:hover{ background:var(--bg-2); border-color:transparent }
.logos__track .tile{ width:44px; height:44px; border-radius:99px }
@keyframes marquee{ to{ transform:translateX(-100%) } }

/* Experience side panel: follows the role in view */
.xp-now{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; margin-top:clamp(36px,5vw,64px) }
.xp-now__year{ font-size:clamp(3.4rem,6.5vw,6.4rem); font-weight:500; letter-spacing:-.05em; line-height:.9; font-variant-numeric:tabular-nums; color:var(--accent) }
.xp-now__org{ color:var(--mute); font-size:1rem }
.xp-now .tile--lg:empty{ visibility:hidden }
.xp-now.is-swap .xp-now__year,.xp-now.is-swap .xp-now__org,.xp-now.is-swap .tile{ animation:swap .5s var(--ease-out) }
@keyframes swap{ from{ opacity:0; transform:translateY(14px) } }

/* Timeline */
.tl{ --p:0; position:relative; list-style:none; margin:0; padding:0 }
.tl::before,.tl::after{ content:""; position:absolute; left:27px; top:28px; bottom:28px; width:2px; border-radius:2px; background:var(--line) }
.tl::after{ background:var(--accent); bottom:auto; height:calc((100% - 56px) * var(--p)); transition:height .15s linear }
.tl--static::after{ display:none }
.tl__item{ position:relative; z-index:1; display:grid; grid-template-columns:56px minmax(0,1fr); gap:22px; padding:0 0 clamp(30px,3.6vw,46px) }
.tl__item:last-child{ padding-bottom:0 }
.tl__body{ min-width:0; padding:14px 18px 18px; margin:-14px -18px 0; border-radius:18px; transition:background .4s var(--ease-out) }
.tl__when{ display:flex; align-items:center; gap:10px; color:var(--accent); font-size:.9rem; font-variant-numeric:tabular-nums }
.tl h3{ font-size:clamp(1.25rem,1.8vw,1.6rem); letter-spacing:-.02em; margin-top:6px }
.tl__org{ color:var(--fg); font-size:.98rem; margin-top:4px }
.tl__org a{ border-bottom:1px solid var(--line); transition:border-color .3s, color .3s }
.tl__org a:hover{ color:var(--accent); border-color:currentColor }
.tl__desc{ color:var(--mute); font-size:.95rem; max-width:62ch; margin-top:8px }
.tl__item.is-active .tl__body{ background:var(--bg-2) }
.tl__item.is-active .tile{ transform:scale(1.08); box-shadow:0 10px 30px -12px #0005 }
.tl__item.is-in{ animation:rise .6s var(--ease-out) both }
@keyframes rise{ from{ opacity:0; transform:translateY(18px) } }
.live{ display:inline-flex; align-items:center; gap:6px; padding:.18em .6em; border-radius:99px; background:var(--accent); color:#fff; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase }
.live::before{ content:""; width:6px; height:6px; border-radius:50%; background:#fff; animation:pulse 1.8s ease-out infinite }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 #fffa } 100%{ box-shadow:0 0 0 7px #fff0 } }
@media (hover:hover) and (pointer:fine){
  .tl__item:hover .tile{ transform:scale(1.08) rotate(-4deg) }
  .tl__item:hover .tl__body{ background:var(--bg-2) }
}

/* Awards */
.award{ position:relative; overflow:hidden; transform-style:preserve-3d; transition:transform .5s var(--ease-out), background .4s; will-change:transform }
.award__n{ display:block; font-size:clamp(2.4rem,3.4vw,3.2rem); font-weight:500; letter-spacing:-.05em; line-height:1; color:var(--accent); margin-bottom:22px; font-variant-numeric:tabular-nums }
.award::after{ content:""; position:absolute; inset:0; background:radial-gradient(260px circle at var(--gx,50%) var(--gy,0%), color-mix(in srgb,var(--accent) 16%,transparent), transparent 70%); opacity:0; transition:opacity .4s; pointer-events:none }
.award:hover::after{ opacity:1 }

/* Certifications */
.cert-tools{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; margin-bottom:14px }
.cert-tools .filter{ margin:0 }
.search{ position:relative; flex:1 1 260px; max-width:380px; display:block }
.search svg{ position:absolute; left:16px; top:50%; width:18px; height:18px; transform:translateY(-50%); fill:none; stroke:var(--mute); stroke-width:2; stroke-linecap:round }
.search input{ width:100%; font:inherit; font-size:.95rem; color:var(--fg); background:var(--bg-2); border:1px solid transparent; border-radius:99px; padding:.85em 1.2em .85em 2.9em; transition:border-color .3s, background .3s }
.search input:focus{ outline:none; border-color:var(--accent); background:var(--bg) }
.cert-count{ color:var(--mute); font-size:.88rem; margin:10px 0 14px; min-height:1.4em }
.clist{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line) }
.clist li{ display:grid; grid-template-columns:36px minmax(0,1fr) minmax(0,.55fr) 8ch 11ch; gap:6px 20px; align-items:center; padding:14px 10px; margin:0 -10px; border-bottom:1px solid var(--line); border-radius:12px; font-size:.95rem; transition:background .3s }
.clist li:hover{ background:var(--bg-2) }
.clist li.is-in{ animation:rise .45s var(--ease-out) both }
.badge{ width:36px; height:36px; border-radius:11px; display:grid; place-items:center; background:hsl(var(--h) var(--mono-s) var(--mono-bg)); color:hsl(var(--h) var(--mono-s) var(--mono-fg)); font-size:.78rem; font-weight:600; letter-spacing:-.01em }
.badge--icon{ background:var(--tile-bg); border:1px solid var(--line) }
.badge--icon img{ width:18px; height:18px }
.clist__by,.clist time{ color:var(--mute) }
.clist time{ font-variant-numeric:tabular-nums }
.verify{ justify-self:end; display:inline-flex; align-items:center; gap:6px; color:var(--accent); font-size:.88rem; padding:.45em .85em; border-radius:99px; border:1px solid color-mix(in srgb,var(--accent) 40%,transparent); transition:background .3s, color .3s }
.verify svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.verify:hover{ background:var(--accent); color:#fff }
.noverify{ justify-self:end; color:var(--mute); font-size:.8rem; opacity:.7 }
.cert-empty{ color:var(--mute); padding:28px 0 }
.cert-more{ margin-top:24px }

/* Skills */
.skills > div{ transition:opacity .4s }
.skills__n{ opacity:.6; margin-left:4px }
.skills .chips li{ display:inline-flex; align-items:center; gap:7px; transition:transform .35s var(--ease-out), background .3s, color .3s }
.skills .chips img{ width:16px; height:16px }
.skills .rv.in .chips li{ animation:pop .5s var(--ease-out) both; animation-delay:calc(var(--n) * 45ms) }
@keyframes pop{ from{ opacity:0; transform:translateY(10px) scale(.94) } }
@media (hover:hover) and (pointer:fine){
  .skills:hover > div{ opacity:.4 }
  .skills > div:hover{ opacity:1 }
  .skills .chips li:hover{ transform:translateY(-3px); background:var(--fg); color:var(--bg) }
}

@media (max-width:1080px){
  .clist li{ grid-template-columns:36px minmax(0,1fr) 8ch auto }
  .clist__by{ grid-column:2; grid-row:2; font-size:.88rem }
  .clist time{ grid-column:3; grid-row:1 }
  .clist .verify,.clist .noverify{ grid-column:4; grid-row:1 / span 2 }
}
@media (max-width:860px){
  .stats{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .stats > div:nth-child(3){ padding-left:0; border-left:0 }
  .stats > div:nth-child(n+3){ border-top:1px solid var(--line); margin-top:22px }
  .xp-now{ display:none }
}
@media (max-width:560px){
  .tile{ width:46px; height:46px; border-radius:13px }
  .tl::before,.tl::after{ left:22px; top:23px }
  .tl__item{ grid-template-columns:46px minmax(0,1fr); gap:16px }
  .tl__body{ padding:10px 12px 14px; margin:-10px -12px 0 }
  .clist li{ grid-template-columns:36px minmax(0,1fr) auto; gap:4px 14px }
  .clist time{ grid-column:2; grid-row:3; font-size:.85rem }
  .clist .verify,.clist .noverify{ grid-column:3; grid-row:1 / span 3 }
  .verify{ padding:.45em .7em }
  .noverify{ display:none }
  .search{ max-width:none }
  [data-cert-filter],[data-xp-filter]{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent); mask-image:linear-gradient(90deg,#000 85%,transparent) }
  [data-cert-filter]::-webkit-scrollbar,[data-xp-filter]::-webkit-scrollbar{ display:none }
  [data-cert-filter] .pill,[data-xp-filter] .pill{ flex:none }
}
@media (prefers-reduced-motion:reduce){
  .logos__track{ animation:none }
  .logos__viewport{ flex-wrap:wrap; -webkit-mask-image:none; mask-image:none; padding-inline:var(--gut) }
  .logos__track[aria-hidden]{ display:none }
  .logos__track{ flex-wrap:wrap; flex:1 }
  .tl__item.is-in,.clist li.is-in,.skills .rv.in .chips li{ animation:none }
  .tl::after{ transition:none }
}