/* Experience: a timeline of logo nodes; each role unfolds to show what I did, the stack and a case study card. */
.xp { margin-top: 28px; }

.xp-tl { list-style: none; position: relative; }
.xp-tl::before { content: ""; position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px; background: var(--line); }
.xp-item { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 20px; padding-bottom: 14px; }
.xp-item:last-child { padding-bottom: 0; }
.xp-logo { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: border-color .3s, box-shadow .3s; }
a.xp-logo:hover { border-color: #c4c7cc; box-shadow: 0 0 0 4px #f3f4f6; }
.xp-logo img { width: 26px; height: 26px; object-fit: contain; }
.xp-item.open .xp-logo { border-color: #d4d6da; box-shadow: 0 0 0 4px #f3f4f6; }
.xp-tl-body { min-width: 0; }

/* header row = toggle */
.xp-toggle { appearance: none; display: grid; grid-template-columns: 1fr auto 28px; align-items: center; gap: 14px; width: calc(100% + 20px); margin: -2px -10px 0; padding: 6px 10px;
  border: 0; border-radius: 14px; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: background .25s; }
@media (hover: hover) { .xp-toggle:hover { background: #f7f7f8; } }
.xp-toggle:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.xp-head-t b { display: block; font-size: 16px; font-weight: 500; letter-spacing: -.01em; }
.xp-head-t span { font-size: 13px; color: var(--muted); }
.xp-period { display: inline-flex; align-items: center; gap: 6px; font: 500 12px "Geist Mono", monospace; color: var(--muted); white-space: nowrap; }
.xp-period.now { color: var(--ok); }
.xp-period i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.xp-chev { position: relative; justify-self: center; width: 28px; height: 28px; border-radius: 50%; background: #f3f4f6; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.xp-chev::before { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border: solid var(--fg); border-width: 0 1.7px 1.7px 0; transform: translate(-50%, -70%) rotate(45deg); }
.xp-item.open .xp-chev { transform: rotate(180deg); }

/* details drawer */
.xp-drawer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.2,.8,.2,1); }
.xp-item.open .xp-drawer { grid-template-rows: 1fr; }
.xp-drawer > div { min-height: 0; overflow: hidden; }
.xp-drawer-in { padding: 12px 0 18px; opacity: 0; transform: translateY(-6px); transition: opacity .3s, transform .45s cubic-bezier(.2,.8,.2,1); }
.xp-item.open .xp-drawer-in { opacity: 1; transform: none; transition-delay: .08s; }
.xp-hl { list-style: none; display: grid; gap: 7px; }
.xp-hl li { position: relative; padding-left: 16px; font-size: 14px; line-height: 1.55; color: var(--text); }
.xp-hl li::before { content: ""; position: absolute; left: 2px; top: .66em; width: 5px; height: 5px; border-radius: 50%; background: #c9ccd1; }
.xp-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 16px; }
.xp-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border-radius: 999px; background: #f3f4f6; font-size: 11.5px; font-weight: 500; }
.xp-chip img { width: 13px; height: 13px; object-fit: contain; }

/* case study card */
.xp-cs { appearance: none; display: grid; grid-template-columns: 112px 1fr 40px; align-items: center; gap: 16px; width: 100%; margin-top: 16px; padding: 8px 14px 8px 8px;
  border: 1px solid var(--line); border-radius: 16px; background: #fff; font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: border-color .25s, box-shadow .35s, transform .35s cubic-bezier(.2,.8,.2,1); }
.xp-cs:hover { border-color: #d4d6da; box-shadow: 0 16px 36px -24px rgba(0,0,0,.35); transform: translateY(-2px); }
.xp-cs:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.xp-cs-thumb { display: block; aspect-ratio: 16/10; border-radius: 10px; overflow: hidden; background: #f3f4f6; }
.xp-cs-thumb > img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.xp-cs:hover .xp-cs-thumb > img { transform: scale(1.06); }
.xp-cs-logo { display: grid; place-items: center; width: 100%; height: 100%; }
.xp-cs-logo img { width: 34px; height: 34px; object-fit: contain; }
.xp-cs-t { min-width: 0; }
.xp-cs-t small { display: block; font: 500 11px "Geist Mono", monospace; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.xp-cs-t b { display: block; margin-top: 2px; font-size: 15px; font-weight: 500; letter-spacing: -.01em; }
.xp-cs-t span { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-cs-go { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--fg); color: #fff; font-size: 17px; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.xp-cs:hover .xp-cs-go { transform: translateX(3px); }

@media (max-width: 700px) {
  .xp-toggle { grid-template-columns: 1fr 28px; row-gap: 4px; }
  .xp-toggle .xp-period { grid-row: 2; grid-column: 1; }
  .xp-toggle .xp-chev { grid-row: 1 / span 2; grid-column: 2; }
  .xp-cs { grid-template-columns: 84px 1fr 34px; gap: 12px; }
  .xp-cs-go { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .xp-drawer, .xp-drawer-in, .xp-chev, .xp-cs { transition: none; }
}