/* ============================================
   RESUME
   ============================================ */

.resume-head {
  padding-top: calc(var(--nav-h) + clamp(3rem, 8vw, 7rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
  row-gap: 2rem;
  align-items: end;
}
.resume-head__title { grid-column: 1 / span 7; margin-left: -0.05em; }
.resume-head__desc  { grid-column: 8 / -1; max-width: 20em; padding-bottom: 0.6em; }

/* --------------------------------------------
   DOWNLOAD — one big row; on hover a red band
   fills in from the left, bleeding past the
   gutters to the screen edges
   -------------------------------------------- */
.download {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 1rem var(--gutter);
  padding-block: clamp(2rem, 5vw, 4rem);
  border-block: 1px solid var(--text-faint);
  isolation: isolate;
}
.download::before {
  content: '';
  position: absolute;
  inset: 0 calc(-1 * var(--gutter));
  z-index: -1;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s var(--ease-out);
}
.download:hover::before,
.download:focus-visible::before { transform: scaleX(1); }
.download:hover .download__meta,
.download:focus-visible .download__meta { color: var(--text); }

.download__meta  { grid-column: 1 / -1; }
.download__title { transition: transform 0.8s var(--ease-out); }
.download:hover .download__title,
.download:focus-visible .download__title { transform: translateX(clamp(0.5rem, 2vw, 1.5rem)); }

/* Down-arrow built from a square and a notch, kept to the site's square marks */
.download__mark {
  width: clamp(2.5rem, 5vw, 4.5rem);
  aspect-ratio: 1;
  background: var(--text);
  clip-path: polygon(30% 0, 70% 0, 70% 45%, 100% 45%, 50% 100%, 0 45%, 30% 45%);
  margin-bottom: 0.3em;
}

/* --------------------------------------------
   FACTS
   -------------------------------------------- */
.resume-facts {
  padding-block: clamp(3rem, 6vw, 5rem) var(--section);
  row-gap: clamp(3rem, 6vw, 5rem);
}
.resume-facts .facts { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.resume-facts__more { grid-column: 4 / -1; max-width: 22em; }

/* --------------------------------------------
   MOBILE
   -------------------------------------------- */
@media (max-width: 1000px) {
  .resume-facts .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .resume-head__title,
  .resume-head__desc,
  .resume-facts__more { grid-column: 1 / -1; }
  .resume-facts .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}