/* ============================================================
   Resume — the CV as a page, not a download.

   Restored from the original resume.css (it was never linked from
   resume.html, which is why the logos were missing and the company/
   university names were rendering at heading size — see the fixes
   at the bottom). Two columns on desktop — the section name sits in
   a left rail so the reading column stays a single measure — and one
   column once that rail no longer fits. Everything is scoped under
   .hm-cv. Colors are repointed to the homepage's own tokens.
   ============================================================ */
.hm-cv {
  background: var(--hm-bg);
  color: var(--hm-ink);
  --cv-gut: clamp(20px, 5vw, 56px);
  --cv-rail: clamp(140px, 15vw, 210px);
  --hm-ink: var(--ink);
  --hm-dark: var(--ink);
  --hm-gray: var(--muted);
  --hm-gray-2: var(--muted);
  --hm-gray-3: var(--muted);
  --hm-line: var(--line);
  --hm-line-soft: var(--line);
  --hm-accent: var(--accent);
  --hm-accent-ink: var(--accent);
  --hm-blue: var(--accent);
  --hm-card: var(--card);
  --hm-bg: var(--paper);
  --hm-ease: cubic-bezier(.22, 1, .36, 1);
  --hm-spring: cubic-bezier(.34, 1.56, .64, 1);
}

.hm-cv__inner {
  max-width: 1180px;
  margin-inline: auto;
  padding: clamp(6px, 1.6vh, 20px) var(--cv-gut) clamp(70px, 12vh, 140px);
}

/* ---------- masthead ---------- */
.cv-hero {
  padding: clamp(28px, 6vh, 72px) 0 clamp(26px, 4vh, 44px);
  border-bottom: 1px solid var(--hm-line-soft);
}
.cv-hero__name {
  margin: 0;
  line-height: 1.02;
  letter-spacing: -.045em;
  color: var(--hm-ink);
}
.cv-hero__role {
  margin: clamp(12px, 2vh, 18px) 0 0;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--hm-accent-ink);
}
/* the contact line reads as one run of text divided by hairline pips,
   not as four separate chips */
.cv-hero__meta {
  list-style: none;
  margin: clamp(16px, 2.6vh, 24px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  letter-spacing: -.015em;
  color: var(--hm-gray-3);
}
.cv-hero__meta li { display: flex; align-items: center; gap: 14px; }
.cv-hero__meta li + li::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--hm-line);
  flex: none;
}
.cv-hero__meta a {
  color: var(--hm-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--hm-line);
  padding-bottom: 1px;
  transition: color .22s var(--hm-ease), border-color .22s var(--hm-ease);
}
.cv-hero__meta a:hover { color: var(--hm-accent-ink); border-color: var(--hm-accent); }

/* ---------- a section: name in the rail, content in the column ---------- */
.cv-sec {
  display: grid;
  grid-template-columns: minmax(0, var(--cv-rail)) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 48px);
  padding: clamp(30px, 5vh, 54px) 0;
  border-bottom: 1px solid var(--hm-line-soft);
}
/* the last section's own bottom rule sat right on top of the site footer's
   own top rule — two hairlines back to back read as one thick, odd one */
.hm-cv .cv-sec:last-child { border-bottom: 0; }
.cv-sec__name {
  margin: 0;
  text-transform: none;
  font-size: clamp(15px, 1.25vw, 17px) !important;
  font-weight: 500 !important;
  letter-spacing: -.01em;
  color: var(--hm-dark);
  /* the label rides along with the entries it heads on a long section */
  position: sticky;
  top: clamp(88px, 12vh, 110px);
  align-self: start;
}
.cv-sec__body { max-width: 68ch; }

.cv-lede {
  margin: 0;
  line-height: 1.62;
  letter-spacing: -.015em;
  color: var(--hm-gray-3);
}

/* ---------- the mark beside each item ----------
   One box, whatever is in it: a client's logo, an award badge, or — where
   there is no artwork yet — a monogram in the same frame, so a row without
   a logo still reads as a row rather than as a gap. */
.cv-logo {
  display: block;
  flex: none;
  width: var(--cv-mark, 46px);
  height: var(--cv-mark, 46px);
  /* no frame and no fill: every mark is a transparent PNG/WebP, so it sits
     straight on the paper the way the client logos do on the About page.
     A white box behind them read as a sticker on a cream sheet. */
  object-fit: contain;
  object-position: left center;
  /* the marks are a supporting detail, not the point — they come up to full
     strength when the eye is actually on that row */
  opacity: .86;
  transition: opacity .25s var(--hm-ease);
}
/* a wordmark is wider than it is tall — held to a square it shrinks to a
   sliver, so it gets the room it needs and keeps the shared height */
.cv-logo--wide { width: auto; max-width: calc(var(--cv-mark, 46px) * 2.5); }
.cv-logo--badge { width: calc(var(--cv-mark, 46px) * .82); height: calc(var(--cv-mark, 46px) * .82); }
.cv-job:hover .cv-logo,
.cv-rows li:hover .cv-logo { opacity: 1; }

/* ---------- one job / one degree ---------- */
.cv-job + .cv-job { margin-top: clamp(26px, 4vh, 40px); }
/* the mark is absolutely placed rather than a grid cell: an entry is one to
   four blocks tall depending on its bullets, and a column that has to span a
   variable number of rows fights every one of those cases */
.cv-job { position: relative; padding-left: calc(var(--cv-mark, 46px) + 18px); }
.cv-job > .cv-logo { position: absolute; left: 0; top: 0; }

.cv-job::before,
.cv-rows li::before {
  content: "";
  position: absolute;
  inset: -12px -18px;
  border-radius: 14px;
  background: transparent;
  transition: background .3s var(--hm-ease);
  pointer-events: none;
  z-index: -1;
}
.cv-rows li { position: relative; }
.cv-rows li::before { inset: -2px -18px; }
.cv-job:hover::before,
.cv-rows li:hover::before { background: var(--hm-soft, rgba(120, 120, 130, .06)); }

/* Role and employer read as ONE line — "what I did @ where" — with the
   dates and the place stepped down beneath. The size is set explicitly
   (not the site's blanket h3 size) because this line is a job title, not
   a page heading. */
.cv-job__role {
  margin: 0;
  font-size: clamp(18px, 1.7vw, 22px) !important;
  font-weight: 500 !important;
  letter-spacing: -.03em;
  line-height: 1.2;
  color: var(--hm-ink);
}
.cv-job__at {
  display: inline !important;
  color: var(--hm-accent);
  font-size: var(--text-small) !important;
  font-weight: 400 !important;
  padding: 0 .42em;
}
/* smaller than the role — the homepage's own base text size, not the job
   title's — and left as an ordinary inline span so it keeps running on the
   same line as the role for as long as it actually fits, only wrapping to
   its own line when the name is too long for the room available */
.cv-job__co {
  /* portfolio.css's fallback carries a bare ".cv-job__role span{display:block}"
     rule (from the old stacked-lines layout) that would otherwise still
     force this onto its own line regardless of how much room is left */
  display: inline !important;
  font-size: var(--text-small) !important;
  font-weight: 400 !important;
  margin-top: 0 !important;
  color: var(--hm-dark);
}
.cv-job__meta {
  margin: 7px 0 0;
  letter-spacing: -.01em;
  color: var(--hm-gray);
  font-variant-numeric: tabular-nums;
}
.cv-job__meta span::before {
  content: "";
  display: inline-block;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--hm-line);
  vertical-align: middle;
  margin: 0 9px 2px;
}
.cv-job__when {
  margin: 4px 0 0;
  letter-spacing: -.01em;
  color: var(--hm-gray);
  font-variant-numeric: tabular-nums;
}
/* Education puts its dates on the SIDE, level with the degree, the way the
   award and certificate rows carry their years */
.cv-job--row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(14px, 2vw, 28px);
  align-items: baseline;
}
.cv-job--row .cv-job__role { grid-column: 1; grid-row: 1; }
.cv-job--row .cv-job__when { grid-column: 2; grid-row: 1; margin: 0; text-align: right; }
.cv-job--row .cv-job__meta { grid-column: 1; grid-row: 2; }

.cv-list {
  margin: clamp(10px, 1.6vh, 14px) 0 0;
  padding: 0;
  list-style: none;
}
.cv-list li {
  position: relative;
  padding-left: 20px;
  margin-top: 8px;
  line-height: 1.6;
  letter-spacing: -.015em;
  color: var(--hm-gray-3);
}
.cv-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .72em;
  width: 10px; height: 1.4px;
  border-radius: 1px;
  background: var(--hm-accent);
  opacity: .8;
}

/* ---------- skills ---------- */
.cv-skills { margin: 0; }
.cv-skills dt {
  font-weight: 500 !important;
  letter-spacing: -.01em;
  color: var(--hm-ink);
}
.cv-skills dd {
  margin: 6px 0 0;
  line-height: 1.6;
  letter-spacing: -.015em;
  color: var(--hm-gray-3);
}
.cv-skills dd + dt { margin-top: clamp(16px, 2.4vh, 22px); }

/* ---------- awards / publications / certifications ---------- */
.cv-rows { list-style: none; margin: 0; padding: 0; }
.cv-rows li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 12px 0;
  line-height: 1.5;
  letter-spacing: -.015em;
  color: var(--hm-gray-3);
}
.cv-rows li + li { border-top: 1px solid var(--hm-line-soft); }
.cv-rows .cv-logo { align-self: center; margin-right: 2px; }
.cv-rows b { font-weight: 500 !important; color: var(--hm-ink); }
.cv-year {
  margin-left: auto;
  flex: none;
  color: var(--hm-gray);
  font-variant-numeric: tabular-nums;
}

/* ---------- narrow ---------- */
@media (max-width: 860px) {
  .cv-sec {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(12px, 2vh, 18px);
  }
  /* stuck to the top of a one-column layout the label would sit over the
     entries it heads, so it goes back into the flow */
  .cv-sec__name { position: static; }
  .cv-year { margin-left: 0; }
  .hm-cv { --cv-mark: 38px; }
  /* a degree title and its date will not both fit on one line here */
  .cv-job--row { grid-template-columns: minmax(0, 1fr); }
  .cv-job--row .cv-job__when { grid-column: 1; grid-row: 3; text-align: left; margin-top: 4px; }
  .cv-job--row .cv-job__meta { grid-row: 2; }
}
@media print {
  .cv-job:hover::before, .cv-rows li:hover::before { background: transparent; }
}