/* ============ START OF RESUME ============ */
/* The resume page alone, so the rest of the site never loads it. It sits on
   case-study.css, as every document page here does: the blueprint sheet
   behind it comes from .case, the section heads are .case-block__title with
   their accent rule and copy link, the prose and the lists are the case
   studies' own, and the badges are the Career Journey's. This file only lays
   them out the way a profile on Zeke is: one narrow column, who first, then
   each part under its heading. */
.resume {
  padding: calc(var(--header-h) + var(--space-48)) var(--gutter) var(--space-64);
}

.resume__column {
  /* The one column every two-column part shares — the name of a skill, what a contact line is — so their values all start
     on the same line. Wide enough for Information Architecture. */
  --label: 13rem;
  max-width: 44rem;
  margin: 0 auto;
}

.resume-nowrap {
  white-space: nowrap;
}

/* The ↗ of a link that leaves the site, in the quieter grey. The link itself
   is the site's .link-underline. */
.resume-ext {
  margin-left: .375rem;
  color: var(--c-muted);
}

/* ---- Who ----
   The photo as tall as everything beside it: the name, the line under it and
   the LinkedIn button, so the two read as one block. Worked out from the same
   tokens those are set in, so it stays matched if they change — a line of the
   name, the gap, a line of the role, the gap, and the button, which is its
   padding, its label's line and its border. */
.resume-head {
  --name: var(--fs-4xl);
  --role: var(--fs-base);
  --photo: calc(var(--name) * var(--lh-heading) + var(--space-4) + var(--role) * var(--lh-body) +
      var(--space-12) + 2 * var(--space-8) + var(--fs-xs) + 2px);
  display: grid;
  grid-template-columns: var(--photo) 1fr;
  grid-template-areas:
    "photo text"
    "photo link";
  column-gap: var(--space-24);
  align-items: start;
  margin-bottom: var(--space-24);
}

.resume-head__text {
  grid-area: text;
}

/* Ringed in the glass edge with the rim's light on it, as the site's other
   framed things are. */
.resume-head__photo {
  grid-area: photo;
  width: var(--photo);
  height: var(--photo);
  border-radius: var(--radius-circle);
  box-shadow: 0 0 0 1px var(--glass-edge-strong), 0 0 0 .3125rem rgba(255, 255, 255, .03), var(--shadow-lift);
}

.resume-head__name {
  font-size: var(--name);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: var(--c-white);
}

.resume-head__role {
  margin-top: var(--space-4);
  font-size: var(--role);
  line-height: var(--lh-body);
  color: var(--c-muted);
}

/* LinkedIn as the site's own secondary button: the one way in to the person,
   given a shape of its own rather than a line of grey type. A size under the site's small button, as an aside
   to the name rather than a call to action beside Work With Me. */
.resume-head__link {
  grid-area: link;
  justify-self: start;
  margin-top: var(--space-12);
}

.resume-head__link.btn--sm {
  padding: var(--space-8) .875rem;
  font-size: var(--fs-xs);
}

/* ---- The parts ----
   .case-block spaces them; the column is narrower than a case study's, so the
   heads come down a step to keep the same weight against the text. */
.resume .case-block__title {
  font-size: var(--fs-3xl);
}

/* ---- A role or a school ----
   Hung on a hairline down the left, the timeline the Career Journey draws, with
   the stretch beside the title in the accent — the mark a case study puts on
   its subsections. */
.resume-entry {
  position: relative;
  padding-left: var(--space-24);
  border-left: 1px solid var(--c-hairline);
}

.resume-entry + .resume-entry {
  margin-top: var(--space-48);
}

.resume-entry__title {
  position: relative;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--c-white);
}

.resume-entry__title::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--space-24) - 1.5px);
  width: 2px;
  background: var(--c-blue);
}

/* The timeline in blue: each entry's stretch of the hairline draws down from
   its top as the entry arrives (its reveal, initReveal in main.js), so the
   line is lit down to wherever the reader has got to. Once, on arrival — it
   used to track the scroll itself (a scroll-driven animation), which this
   generation of Chrome recalculated on every frame of every scroll, and on
   this page that was a third of the frames stuttering. */
@media (prefers-reduced-motion: no-preference) {
  .resume-entry::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1px;
    width: 1px;
    background: var(--c-blue);
    transform-origin: top;
    transform: scaleY(0);
  }

  .resume-entry.is-visible::after {
    transform: none;
    transition: transform 1.1s var(--ease-soft) calc(var(--reveal-delay, 0s) + .25s);
  }
}

/* The dates, and what kind of role it was or what the school gave, as the
   Career Journey's badges: salaried work in blue, the rest in the outline. */
.resume-entry__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: var(--space-12);
}

/* Inline-block rather than the badge's own inline-flex: a date is two times
   and a dash, and a flex box trims the spaces round the dash away. */
.resume .jn-badge {
  display: inline-block;
  margin-top: 0;
}

.resume-entry .case-block__list {
  margin-block: var(--space-16) 0;
}

.resume-entry .case-block__item {
  margin-bottom: var(--space-8);
}

.resume-entry .case-block__item:last-child {
  margin-bottom: 0;
}

.resume-entry__note {
  margin-top: var(--space-16);
}

/* Where the work is written up on this site, in the case studies' link blue. */
.resume-entry__more {
  margin-top: var(--space-16);
  font-size: var(--fs-sm);
  color: var(--c-muted);
}

.resume-entry__more a {
  color: var(--c-blue);
  transition: color .3s var(--ease);
}

.resume-entry__more a:hover,
.resume-entry__more a:focus-visible {
  color: var(--c-white);
}

/* ---- Certificates: a sheet of small certificates ----
   Two to a row rather than a list, each a card of its own made up like the
   real thing: who gave it in the eyebrow's capitals, a guilloché seal in the
   corner, the name, a dotted line to sign along and the date under it, and
   its year set large behind the lot as a watermark. */
.resume-certs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16);
  margin: 0;
  padding: 0;
  list-style: none;
}

.resume-cert {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 11rem;
  padding: var(--space-24) var(--space-24) var(--space-16);
  overflow: hidden;
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-xl);
  background: var(--glass-card);
  box-shadow: var(--glass-rim);
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}

/* The inner frame a printed certificate has, a hairline in from the edge. */
.resume-cert::before {
  content: "";
  position: absolute;
  inset: .375rem;
  z-index: -1;
  border: 1px solid var(--c-hairline);
  border-radius: calc(var(--radius-xl) - .375rem);
  pointer-events: none;
}

/* The seal: fine rays turned around a ring, the engraver's rosette, in the
   corner. It turns a little when the card is pointed at. */
.resume-cert::after {
  content: "";
  position: absolute;
  top: var(--space-16);
  right: var(--space-16);
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-circle);
  background:
    radial-gradient(circle, var(--c-blue) 0 .2rem, transparent .25rem),
    radial-gradient(circle, transparent 0 .55rem, var(--c-blue) .6rem .65rem, transparent .7rem),
    repeating-conic-gradient(var(--c-blue) 0 4deg, transparent 4deg 12deg);
  -webkit-mask: radial-gradient(circle, #000 0 1.125rem, transparent 1.15rem);
  mask: radial-gradient(circle, #000 0 1.125rem, transparent 1.15rem);
  opacity: .55;
  transition: transform .9s var(--ease-soft), opacity .4s var(--ease);
}

.resume-cert:hover {
  border-color: var(--glass-edge-strong);
  box-shadow: var(--glass-rim-bright);
}

.resume-cert:hover::after {
  opacity: .9;
  transform: rotate(60deg);
}

.resume-cert__year {
  position: absolute;
  right: -.25rem;
  bottom: -1.5rem;
  z-index: -1;
  font-size: 5.5rem;
  font-weight: var(--fw-semibold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
  color: rgba(255, 255, 255, .035);
  pointer-events: none;
  user-select: none;
}

.resume-cert__issuer {
  padding-right: var(--space-48);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-blue);
}

.resume-cert__title {
  margin-top: var(--space-12);
  padding-right: var(--space-24);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--c-white);
}

/* The line to sign along, pushed to the foot so every card's date sits on
   the same line whatever the length of its name. */
.resume-cert__meta {
  margin-top: auto;
  padding-top: var(--space-24);
  font-size: var(--fs-sm);
  color: var(--c-muted);
  background: radial-gradient(circle, var(--c-line) .06rem, transparent .08rem) top left / .375rem 1px repeat-x;
  background-position: 0 var(--space-12);
}

/* Dealt out as the section arrives (initCascade), each a beat after the
   last and turning straight as it lands. Its own transitions are said again
   here, or the cascade's would take their place. */
@media (prefers-reduced-motion: no-preference) {
  .resume-certs.has-cascade > .resume-cert {
    transform: translateY(1.25rem) rotate(-1.5deg);
  }

  .resume-certs.has-cascade.is-in > .resume-cert {
    transform: none;
    transition:
      opacity .5s var(--ease-soft) calc(.15s + var(--i, 0) * 90ms),
      transform .7s var(--ease-soft) calc(.15s + var(--i, 0) * 90ms),
      border-color .4s var(--ease),
      box-shadow .4s var(--ease);
  }
}

/* A certificate past its date: kept on the record but out of the way until
   asked for, and greyed when it is shown. The script lets the sheet grow and
   shrink around it. The greying is a filter, not opacity, so the cards'
   cascade in, which sets opacity, cannot undo it. Each card is a flex box,
   so the hidden attribute has to be said again here to win over it. */
.resume-cert[hidden],
.resume-certs__more[hidden] {
  display: none;
}

.resume-cert.is-expired {
  filter: grayscale(1) opacity(.5);
}

.resume-cert.is-expired::after {
  background:
    radial-gradient(circle, var(--c-muted) 0 .2rem, transparent .25rem),
    radial-gradient(circle, transparent 0 .55rem, var(--c-muted) .6rem .65rem, transparent .7rem),
    repeating-conic-gradient(var(--c-muted) 0 4deg, transparent 4deg 12deg);
}

/* The button's place: a row of its own under the cards, or, with an odd
   number showing, the empty place beside the last card, drawn as the outline
   of the card that is not there (initCertificates sets is-paired). */
.resume-certs__more {
  grid-column: 1 / -1;
  padding-top: var(--space-8);
}

.resume-certs__more.is-paired {
  grid-column: auto;
  display: grid;
  place-items: center;
  padding: var(--space-24);
  border: 1px dashed var(--glass-edge-strong);
  border-radius: var(--radius-xl);
}

/* ---- Tools ----
   Each tool its own entry, one under the next and ruled apart, the name over
   its badges so they have the full width to themselves rather than a narrow
   column beside a label. Figma, with the most, has its badges sorted into
   what they are for. */
.resume-tools {
  display: grid;
}

.resume-tool {
  padding: var(--space-16) 0 var(--space-24);
  border-top: 1px solid var(--c-hairline);
}

.resume-tool__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-4) var(--space-12);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--c-white);
}

/* What kind of tool it is, in the eyebrow's small capitals. */
.resume-tool__kind {
  font-size: var(--fs-3xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-blue);
}

.resume-tool__tags,
.resume-tool__groups dd {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.resume-tool__tags {
  margin-top: var(--space-12);
}

.resume-tool__groups {
  display: grid;
  gap: var(--space-12);
  margin: var(--space-16) 0 0;
}

.resume-tool__groups > div {
  display: grid;
  grid-template-columns: 11rem 1fr;
  align-items: start;
  gap: var(--space-16);
}

.resume-tool__groups dt {
  padding-top: .125rem;
  font-size: var(--fs-sm);
  color: var(--c-muted);
}

.resume-tool__groups dd {
  margin: 0;
}

/* ---- Skills, languages, contact: a label and what it is ---- */
.resume-rows {
  display: grid;
  gap: var(--space-16);
  margin: 0;
}

.resume-row {
  display: grid;
  grid-template-columns: var(--label) 1fr;
  align-items: center;
  gap: var(--space-16);
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
}

.resume-row dt {
  color: var(--c-muted);
}

.resume-row dd {
  margin: 0;
  color: var(--c-white);
}

/* Skills and languages: the things each is used for that roles ask for now,
   as the Career Journey's badges, rather than a self-rated level. They wrap,
   so the name sits level with the first row of them. */
.resume-rows--tags .resume-row {
  align-items: start;
}

.resume-rows--tags dt {
  padding-top: .125rem;
}

.resume-rows--tags dd {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

@media (max-width: 34rem) {
  .resume {
    padding-top: calc(var(--header-h) + var(--space-32));
  }

  .resume__column {
    --label: 8rem;
  }

  /* The name and the role wrap to two lines each here, so the button takes
     a row of its own underneath, and the photo matches the four lines. */
  .resume-head {
    --name: var(--fs-2xl);
    --role: var(--fs-sm);
    --photo: calc(2 * var(--name) * var(--lh-heading) + var(--space-4) + 2 * var(--role) * var(--lh-body));
    grid-template-areas:
      "photo text"
      "link link";
    column-gap: var(--space-16);
    align-items: center;
  }

  .resume .case-block__title {
    font-size: var(--fs-2xl);
  }

  .resume-entry {
    padding-left: var(--space-16);
  }

  .resume-entry__title::before {
    left: calc(-1 * var(--space-16) - 1.5px);
  }

  .resume-certs {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-12);
  }

  .resume-cert {
    min-height: 0;
  }

  .resume-tool__groups > div {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }

  /* No room for a label column beside the badges: the name goes over them,
     and they flow across the full width. */
  .resume-rows--tags .resume-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }

  .resume-rows--tags dt {
    padding-top: 0;
    color: var(--c-white);
  }
}

/* ============ END OF RESUME ============ */