/* Experience cards */
.md-typeset .role-list{display:grid;gap:.8rem}
.md-typeset .role-card{
  --role-indent:1.2rem;
  padding:.75rem .9rem;font-size:.65rem;line-height:1.35;
  border:1px solid var(--md-default-fg-color--lightest);
  border-radius:.6rem;background:var(--md-default-bg-color)
}
.md-typeset .role-card p{margin:.12rem 0}
.md-typeset .role-card>p:first-of-type{font:700 1.25em/1.25 inherit;margin:0 0 .3rem}
.md-typeset .role-card small{color:var(--md-default-fg-color--lighter)}
.md-typeset .role-card .role-sep,
.md-typeset .role-card>hr{border:0;height:1px;background:var(--md-default-fg-color--lightest);margin:.6rem 0 .5rem var(--role-indent)}
.md-typeset .role-card>:not(p:first-of-type),.md-typeset .role-card>hr~*{margin-left:var(--role-indent)}
.md-typeset .role-card ul{margin:.3rem 0 0 1.1rem}
.md-typeset .role-card ul.role-bullets{margin:0;padding-left:1.1rem}
.md-typeset .role-card p+ul.role-bullets{margin-top:.08rem}
.md-typeset .role-card p+p{margin-top:.1rem}
@media (max-width:680px){.md-typeset .role-card{--role-indent:.8rem}}

/* Project figures (frameless, auto-columns) */
.md-typeset figure.project{
  display:grid;grid-template-columns:1fr;gap:.75rem;
  max-width:900px;margin:.6rem auto 1.2rem;
  padding:0;border:0;border-radius:0;background:transparent;box-shadow:none
}
.md-typeset figure.project>img,
.md-typeset figure.project>video{
  display:block;width:100%;height:auto;
  border:0;outline:0;border-radius:0;box-shadow:none;background:transparent
}
.md-typeset figure.project>figcaption{
  grid-column:1/-1;text-align:center;font-size:.9rem;line-height:1.25;
  color:var(--md-default-fg-color--lighter);padding:.2rem .25rem .4rem
}
/* Grow columns as media count increases */
@media (min-width:680px){
  .md-typeset figure.project:has(> :is(img,video):nth-of-type(2)){grid-template-columns:repeat(2,1fr)}
}
@media (min-width:860px){
  .md-typeset figure.project:has(> :is(img,video):nth-of-type(3)){grid-template-columns:repeat(3,1fr)}
}
@media (min-width:900px){
  .md-typeset figure.project:has(> :is(img,video):nth-of-type(4)){grid-template-columns:repeat(4,1fr)}
}


.md-typeset figure.project{ row-gap:.35rem }            /* tighter gap above caption */
.md-typeset figure.project>figcaption{
  font-size:.72rem; line-height:1.2;
  padding:.15rem 0 0;                                   /* no bottom padding */
}



.year-pill{
  display:inline-block;margin-left:.5rem;padding:.15rem .5rem;
  font:600 .72rem/1 var(--md-text-font, system-ui);
  color:var(--md-default-fg-color--lighter);
  border:1px solid var(--md-default-fg-color--lighter);
  border-radius:999px; vertical-align:middle;
}


/* Works for h2/h3; add others if needed */
.md-typeset h2.has-year,
.md-typeset h3.has-year{ display:flex; align-items:baseline; gap:.5rem }

.md-typeset h2.has-year::after,
.md-typeset h3.has-year::after{
  content: attr(data-year);
  display:inline-block;
  padding:.15rem .5rem;
  font:600 .72rem/1 var(--md-text-font, system-ui);
  color:var(--md-default-fg-color--lighter);
  border:1px solid var(--md-default-fg-color--lighter);
  border-radius:999px;
}

.lead{font-size:0.8rem;color:var(--md-default-fg-color);margin:.2rem 0 1rem}


/* Compact, quiet captions */
.md-typeset figure.project{ row-gap:.2rem }  /* pull caption closer */


/* Small, not narrow */
.md-typeset figure.project > figcaption{
  font-style:normal;font-weight:400;
  font-size:clamp(.58rem,.20vw + .54rem,.72rem);
  line-height:1.15;
  color:color-mix(in srgb,var(--md-default-fg-color) 45%,transparent);
  max-width: none;          /* was 50–70ch — remove the cap */
  width: 100%;              /* span full figure width */
  margin:.08rem 0 0;        /* keep close to media */
  padding:0 .25rem;         /* tiny side breathing room */
  text-align:center;
  text-wrap:balance;
}