/* Resume.
   Deliberately borrows the landing page's voice rather than inventing one: the
   name uses .hero__name, the contact row uses .hero__links, and section
   headings echo .work-item__tag. Nothing here overrides a token. */

.resume-header {
  padding-top: var(--sp-32);
  padding-bottom: var(--sp-12);
}

.resume-header__back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: var(--sp-12);
  transition: color 0.2s ease;
}

.resume-header__back:hover {
  color: var(--color-text-primary);
}

/* The PDF sets the contact line in the black band under the name. On the web the
   page already has a header, so the line just sits under the title. */
/* base.css sets a { color: inherit; text-decoration: none }, and case-study.css
   (which owns .cs-link) is not loaded on this page, so links need their own
   treatment here or they render as plain text. */
.resume-link {
  /* .hero__links a carries identical declarations but sits in a flex row, so it
     is blockified and the rule hangs below the full line box. Inline links only
     get the glyph box, which put the rule 6px higher. inline-block plus the body
     line-height reproduces the landing page's gap exactly. */
  display: inline-block;
  line-height: 1.65;
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-strong);
  padding-bottom: 2px;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.resume-link:hover {
  color: var(--accent-ai);
  border-color: var(--accent-ai);
}

/* Laid out the same way as .hero__links on the landing page: a flex row spaced
   by a gap, with no separator characters. */
.resume-header__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-6);
  margin-top: var(--sp-6);
  font-size: var(--fs-body-sm);
}

/* Not a link, so it carries no rule and steps back a shade to say so. */
.resume-header__place {
  color: var(--color-text-secondary);
}

.resume-section {
  padding-top: var(--sp-12);
  border-top: 1px solid var(--color-border);
}

.resume-section + .resume-section {
  margin-top: var(--sp-12);
}

/* For a section that follows a run of roles. Those roles already carry internal
   rules, so another one sitting in the middle of the section gap reads as
   clutter; the space alone separates them. */
.resume-section--plain {
  border-top: 0;
}

/* Same treatment as .work-item__tag, so a section label reads the same here as
   it does on the landing page. */
.resume-section__label {
  font-size: var(--fs-footnote);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: var(--sp-6);
}

.resume-summary {
  font-size: var(--fs-body-lg);
  color: var(--color-text-secondary);
  max-width: 68ch;
  line-height: 1.7;
}

/* Skills read as a list of terms, not prose, so they get their own rhythm
   rather than being crammed into a paragraph with middots. */
.resume-skills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.resume-skills li {
  font-size: var(--fs-body-sm);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--sp-2) var(--sp-4);
}

/* The AI pipeline line is a different kind of statement from the skill terms
   above it, so it gets its own ground rather than trailing after them as loose
   prose. Hugs its content and centres, so it reads as a deliberate object. */
.resume-callout {
  margin-top: var(--sp-8);
  padding: var(--sp-4) var(--sp-6);
  background: var(--color-bg-hover);
  border-radius: var(--radius-lg);
  font-size: var(--fs-body-sm);
  color: var(--color-text-secondary);
}

.resume-callout strong {
  color: var(--color-text-primary);
}

/* One role. The date sits in its own column on wide screens so the eye can scan
   the timeline down the left without reading every title. */
.resume-role {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: var(--sp-8);
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-8);
}

/* Symmetry only holds if the last thing in a role stops adding its own margin,
   otherwise a role ending in a paragraph sits further from the rule than one
   ending in a list. */
.resume-role > div > *:last-child {
  margin-bottom: 0;
}

.resume-role + .resume-role {
  border-top: 1px solid var(--color-border);
}

.resume-role__dates {
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
  padding-top: 0.35em;
}

.resume-role__title {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-2);
}

.resume-role__org {
  color: var(--color-text-secondary);
  font-family: var(--font-sans);
  font-weight: 400;
}

.resume-role__lede {
  color: var(--color-text-secondary);
  max-width: 68ch;
  margin-bottom: var(--sp-4);
}

.resume-role__points {
  margin: 0;
  padding-left: 1.1em;
  color: var(--color-text-secondary);
  max-width: 68ch;
}

.resume-role__points li + li {
  margin-top: var(--sp-3);
}

.resume-role__points strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

.resume-awards {
  margin: 0;
  padding-left: 1.1em;
  color: var(--color-text-secondary);
  max-width: 68ch;
}

.resume-awards li + li {
  margin-top: var(--sp-3);
}

/* One level in from an award, with a rule doing the indenting so the
   relationship is visible rather than implied by whitespace. */
.resume-awards__patents {
  list-style: none;
  margin: var(--sp-3) 0 0;
  padding-left: var(--sp-4);
  border-left: 1px solid var(--color-border);
  font-size: var(--fs-body-sm);
}

.resume-awards__patents li + li {
  margin-top: var(--sp-2);
}

main > .resume-section:last-of-type {
  padding-bottom: var(--sp-32);
}

@media (max-width: 760px) {
  .resume-header {
    padding-top: var(--sp-24);
  }

  /* The date column stops earning its width once the text track gets narrow. */
  .resume-role {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }

  .resume-role__dates {
    padding-top: 0;
  }
}