/* ---------- experience (accordion) ---------- */
.job{border-top:1px solid var(--line)}
.job:first-of-type{border-top:none}

/* clickable header */
.job-head{
  display:grid;grid-template-columns:230px 1fr auto;gap:34px;align-items:start;
  width:100%;padding:28px 0;
  background:none;border:none;cursor:pointer;
  text-align:left;color:inherit;font:inherit;
}
.job:first-of-type .job-head{padding-top:0}
.job-head:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

.job-when{font-family:var(--mono);font-size:.78rem;color:var(--ink-3);padding-top:5px}
.job-when .dot{color:var(--accent)}

.job-id{display:flex;flex-direction:column}
.job-name{font-size:1.25rem;font-weight:700;letter-spacing:-.01em;transition:color .2s}
.job-head:hover .job-name{color:var(--accent)}
.job .role{color:var(--accent);font-size:.92rem;font-weight:600;margin-top:6px}
.job .proj{font-family:var(--mono);font-size:.76rem;color:var(--ink-3);margin-top:6px}

/* +/- toggle indicator */
.job-toggle{
  position:relative;width:18px;height:18px;margin-top:4px;flex-shrink:0;
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.job-toggle::before,.job-toggle::after{
  content:"";position:absolute;background:var(--accent);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.job-toggle::before{top:50%;left:0;width:100%;height:2px;transform:translateY(-50%)}
.job-toggle::after{left:50%;top:0;width:2px;height:100%;transform:translateX(-50%)}
.job.open .job-toggle{transform:rotate(180deg)}
.job.open .job-toggle::after{transform:translateX(-50%) scaleY(0)}

/* collapsible body — animated via grid-template-rows 0fr -> 1fr */
.job-body{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1);
}
.job.open .job-body{grid-template-rows:1fr}
.job-body-inner{overflow:hidden;padding-left:264px}

.job ul{list-style:none;padding:4px 0 22px}
.job li{
  color:var(--ink-2);font-size:.93rem;padding-left:20px;position:relative;margin-bottom:9px;
}
.job li::before{content:"—";position:absolute;left:0;color:var(--accent)}

@media(max-width:820px){
  .job-head{grid-template-columns:1fr auto;gap:6px 18px}
  .job-when{grid-column:1/-1;padding-top:0}
  .job-body-inner{padding-left:0}
}