/* Profile list inside the shared section drawer. */
.project-index .section-drawer[data-section="experience"] {width:min(1040px,calc(100vw - 64px));background:var(--paper);}
[data-section="experience"] .drawer-toolbar {height:64px;padding:0 16px 0 28px;background:var(--surface);}
[data-section="experience"] #drawer-label {position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal;font:700 17px/1 Manrope,sans-serif;letter-spacing:-.02em;}
[data-section="experience"] .drawer-close {margin-left:auto;border:0;}
[data-section="experience"] .drawer-content {overflow-anchor:none;background-image:radial-gradient(circle,light-dark(#53634c38,#c1cdb638) 1px,transparent 1.2px);background-size:22px 22px;background-position:11px 11px;}
.experience {
  --exp-body:light-dark(#3f4641,#d3d8d1);--exp-divider:light-dark(#eef0e9,#343833);--exp-tile:light-dark(#e9ece5,#3a3f39);
  --exp-rail:light-dark(#e3e6df,#3d433c);--exp-dot:light-dark(#b9c0b7,#7d857d);--exp-bullet:light-dark(#9aa39c,#8a928b);--exp-dash:light-dark(#c4c9c1,#5a615a);
  --exp-shadow:light-dark(#29372918,#0006);
  container:experience / inline-size;font-family:'DM Sans',sans-serif;color:var(--ink);width:100%;
}
.experience[hidden],.experience [hidden] {display:none;}
.experience-inner {max-width:1100px;margin:0 auto;padding:48px 28px 72px;}
.experience-head {margin-bottom:32px;}
.experience .experience-title {max-width:none;margin:0;font:800 48px/1.13 Manrope,sans-serif;letter-spacing:-.05em;text-wrap:balance;}
.experience-title em {font-style:normal;font-weight:inherit;color:var(--accent);}
.experience-card {padding:8px 28px;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:0 10px 26px -14px var(--exp-shadow);}
.exp-company {display:flex;flex-direction:column;padding:26px 0;}
.exp-company + .exp-company {border-top:1px solid var(--exp-divider);}
.exp-row {display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;align-items:start;}
.exp-company-head {position:relative;}
/* Identity can be taller than its tile when text wraps. Bridge that gap without
   measuring on every expansion; the role rail still starts at the supplied -8px. */
.exp-company.is-multi .exp-company-head::after {content:'';position:absolute;left:23.25px;top:48px;bottom:0;width:1.5px;background:var(--exp-rail);}
.exp-logo {position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:var(--paper);border:1px solid var(--exp-tile);overflow:hidden;}
/* A light image backing preserves transparent black company marks in dark mode. */
.exp-logo img {display:block;width:66%;height:66%;object-fit:contain;background:#fff;border-radius:2px;}
.exp-logo.is-mono {background:var(--ink);color:var(--paper);border:0;font:700 15px Manrope,sans-serif;letter-spacing:-.02em;}
.exp-logo.is-break {background:none;border:1.5px dashed var(--exp-dash);}
.exp-logo.is-break::after {content:'';width:8px;height:8px;border:1.5px solid var(--exp-bullet);transform:rotate(45deg);}
.exp-id {display:flex;flex-direction:column;gap:3px;min-width:0;padding-top:2px;font-size:13px;color:var(--muted);overflow-wrap:anywhere;}
.exp-id h3 {margin:0;font:700 16px Manrope,sans-serif;letter-spacing:-.02em;color:var(--ink);}
.exp-sub {color:var(--exp-body);}
.exp-rail {position:relative;align-self:stretch;}
.exp-company.is-multi .exp-rail::before {content:'';position:absolute;left:50%;top:0;bottom:0;width:1.5px;margin-left:-.75px;background:var(--exp-rail);}
.exp-company.is-multi .exp-role.is-first .exp-rail::before {top:-8px;}
.exp-company.is-multi .exp-role.is-last .exp-rail::before {bottom:calc(100% - 27px);}
.exp-company.is-multi .exp-rail::after {content:'';position:absolute;left:50%;top:26px;width:10px;height:10px;margin-left:-5px;border:1.5px solid var(--exp-dot);border-radius:50%;background:var(--surface);}
.exp-body {display:flex;flex-direction:column;gap:12px;min-width:0;padding-top:14px;overflow-wrap:anywhere;}
.exp-company.is-multi .exp-body {padding-top:20px;}
.exp-role-head {display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--muted);}
.exp-role-head h4 {margin:0;font:600 15px/1.35 Manrope,sans-serif;letter-spacing:-.01em;color:var(--ink);}
.exp-desc {display:flex;flex-direction:column;gap:8px;max-width:68ch;}
.exp-description-text,.exp-more-content {display:flex;flex-direction:column;gap:8px;}
.exp-summary {margin:0;font-size:14px;line-height:1.6;color:var(--exp-body);text-wrap:pretty;}
/* Only truncate text when its role provides a way to reveal the remainder. */
.exp-desc.is-expandable .exp-summary {display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--clamp,3);overflow:hidden;}
.exp-desc.is-open .exp-summary {-webkit-line-clamp:unset;}
.exp-highlights {margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;}
.exp-highlights li {display:grid;grid-template-columns:14px minmax(0,1fr);gap:6px;font-size:14px;line-height:1.55;color:var(--exp-body);}
.exp-highlights li::before {content:'';margin-top:10px;width:5px;height:5px;border-radius:50%;background:var(--exp-bullet);}
.exp-note {margin:0;font-size:13px;line-height:1.5;color:var(--accent);}
.exp-text-btn {align-self:flex-start;display:flex;align-items:center;gap:8px;min-height:28px;margin-left:-6px;padding:0 6px;border:0;border-radius:8px;background:transparent;font:500 13px 'DM Sans',sans-serif;color:var(--ink);text-align:left;cursor:pointer;transition:background 200ms,color 200ms;}
.exp-text-btn:hover {background:var(--surface-hover);color:var(--ink);}
.exp-more {color:var(--muted);}
.exp-skills-btn::before {content:'';flex-shrink:0;width:8px;height:8px;border:1.5px solid var(--accent);transform:rotate(45deg);}
.exp-tags {display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 0;padding:0;list-style:none;}
.exp-tag {display:flex;align-items:center;min-height:26px;max-width:100%;padding:0 10px;border-radius:99px;background:var(--paper);border:1px solid var(--exp-tile);font-size:12px;color:var(--exp-body);}
.exp-projects {display:flex;flex-wrap:wrap;gap:12px;}
.exp-project {display:flex;flex-direction:column;gap:6px;width:132px;max-width:100%;color:var(--ink);text-decoration:none;}
.exp-thumb {display:grid;place-items:center;width:100%;aspect-ratio:3/2;border-radius:10px;border:1px solid var(--line);overflow:hidden;background:var(--surface-hover);color:var(--muted);font:700 18px Manrope,sans-serif;transition:transform 200ms,border-color 200ms;}
.exp-thumb img {display:block;width:100%;height:100%;object-fit:cover;}
a.exp-project:hover .exp-thumb,a.exp-project:focus-visible .exp-thumb {transform:translateY(-2px);border-color:var(--ink);}
.exp-project-name {display:flex;gap:4px;font-size:12px;font-weight:500;min-width:0;}
.exp-project-name > :first-child {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.exp-project-arrow {color:var(--muted);}
.experience :is(button,a):focus-visible {outline:2px solid var(--accent);outline-offset:2px;}
@container experience (width < 720px) {
  .experience-inner {padding:32px 16px 40px;}
  .experience-head {margin-bottom:28px;}
  .experience .experience-title {font-size:32px;}
  .experience-card {padding:4px 16px;}
  .exp-company {padding:20px 0;}
  .exp-row {grid-template-columns:40px minmax(0,1fr);gap:12px;}
  .exp-logo {width:40px;height:40px;}
  .exp-company.is-multi .exp-company-head::after {left:19.25px;top:40px;}
  .exp-project {width:120px;}
}
.oa-reduced-motion .experience :is(.exp-thumb,.exp-text-btn) {transition:none;}
.oa-reduced-motion .experience a.exp-project:is(:hover,:focus-visible) .exp-thumb {transform:none;}
@media(prefers-reduced-motion:reduce) {
  .experience :is(.exp-thumb,.exp-text-btn) {transition:none;}
  .experience a.exp-project:is(:hover,:focus-visible) .exp-thumb {transform:none;}
}
@media(max-width:700px) {
  .project-index .section-drawer[data-section="experience"] {top:8px;bottom:8px;width:calc(100vw - 16px);border-radius:12px;}
  [data-section="experience"] .drawer-toolbar {padding-left:20px;}
}