/* ==========================================================================
   about.css — per-block type and layout values for the About Me page
   Everything here mirrors the per-block values the original page emitted
   inline. Font sizes are in `em` against the 10px root (see base.css), so
   1.7em is 17px, 2.4em is 24px, 4.8em is 48px.

   One thing to hold on to: the vertical leadings are written as `1.5em`,
   `1.36em` and so on rather than as unitless numbers, and that is deliberate.
   An `em` line-height computes to a *length* on the container and then inherits
   that length, so a 0.8em label inside a 1.8em column still sits in a 27px line
   box. That is what keeps the hard-wrapped lists in this page on one rhythm,
   and it is what the original relied on.
   ========================================================================== */

/* --- intro: greeting beside the portrait -------------------------------- */

.block.bio-hero > .content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 60px;
}

.block.bio-hero .headline {
  font-size: 4.8em;
  line-height: 1.2;
  color: #333;
}

.block.bio-hero .headline strong {
  font-weight: var(--title-weight);
}

/* Two empty paragraphs in the original, at 2.4em / 1.2. */
.block.bio-hero .standfirst {
  margin-top: 2.4em;
  font-size: 2.4em;
  line-height: 1.2;
}

/* --- details: narrow label column + wide body column -------------------- */
/*
 * Same idea as .block.intro on the case pages, but over three columns instead
 * of four: the label takes one, the body takes the remaining two.
 */

.block.details > .content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.block.details .col-label {
  grid-column: 1 / 2;
  padding-right: 30px;
  font-size: var(--label-size, 4em);
  line-height: var(--label-leading, 1.14);
  font-weight: var(--label-weight, var(--title-weight));
  color: var(--label-ink, var(--numeral-color));
}

.block.details .col-body {
  grid-column: 2 / 4;
  font-size: var(--body-size, 1.8em);
  line-height: var(--body-leading, 1.36em);
}

/* --- a list of hard-wrapped lines --------------------------------------- */
/*
 * The contact / skills / tools column and the résumé columns are not prose:
 * every line is its own paragraph and consecutive lines are tight, with a
 * single blank line between groups. `.rich` in base.css is the wrong primitive
 * for that — it puts a gap between *every* pair of children.
 */

.line-list > * + * {
  margin-top: 0;
}

.line-list > .fact + .fact {
  margin-top: var(--rhythm, 1.5em);
}

/* A group that ended on a blank line in the original. */
.line-list > .fact.trailing-space {
  padding-bottom: var(--rhythm, 1.5em);
}

.line-list .fact-label {
  /* 0.8em of the column's own size; the line box is unchanged, see the note
     about `em` leadings at the top of this file. */
  font-size: 0.8em;
  font-weight: 600;
  color: var(--label-color);
  letter-spacing: normal;
}

/* --- the contact / skills / tools / languages column -------------------- */

.block.bio .col-label {
  --label-size: 1.8em;
  --label-leading: 1.5em;
  --label-weight: var(--body-weight);
  --label-ink: var(--color);
  --rhythm: 1.5em;
}

.block.bio .col-body {
  --body-size: 2em;
  --body-leading: 1.36em;
  --rhythm: 1.36em;
}

.block.bio .col-body a {
  text-decoration: none;
}

/* Two empty paragraphs sat above the resume link, and one below it. */
.block.bio .col-body .resume {
  margin-top: calc(var(--rhythm) * 2);
  padding-bottom: var(--rhythm);
  font-weight: 600;
}

/* --- "Experience & Education" / "Expertise" section labels -------------- */

.block.section-label {
  --label-leading: 1.14;
}

.block.section-label.wide-leading {
  --label-leading: 1.5em;
}

/* --- the résumé columns ------------------------------------------------- */

.block.resume > .content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/*
 * The type scale sits on `.entries`, not on `.col`, so that `.col-title`'s
 * 1.6em stays measured against the 10px root — 16px, the way the original had
 * it. Put the font-size on `.col` and the title inherits an 18px context and
 * renders at 28.8px instead. Same trap the case pages carry a note about.
 */
.block.resume .entries {
  font-size: var(--col-size, 1.8em);
  line-height: 1.5em;
}

.block.resume .col-title {
  margin-bottom: 30px;
  font-size: 1.6em;
  line-height: 1.1;
  font-weight: 600;
  color: var(--label-color);
}

/*
 * The first entry in the Experience and Courses columns was separated from the
 * next by two blank lines where every other entry uses one. Faithful to the
 * original; see README, Known artefacts.
 */
.block.resume .entry + .entry {
  margin-top: 1.5em;
}

.block.resume .entry.gap-wide + .entry {
  margin-top: 3em;
}

.block.resume .entry strong {
  font-weight: 600;
}

/* --- expertise --------------------------------------------------------- */

.block.expertise .col-body {
  --body-size: 1.7em;
  --body-leading: 1.59;
  --section-gap: 1;
}

/* --- explore my projects ----------------------------------------------- */

.block.header .headline {
  font-size: 4.8em;
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: var(--title-weight);
}

.block.header .headline a {
  color: var(--label-color);
}

/* --- responsive -------------------------------------------------------- */

@media (max-width: 768px) {
  /* Greeting above the portrait, and every label above its body. */
  .block.bio-hero > .content,
  .block.details > .content,
  .block.resume > .content {
    grid-template-columns: 1fr;
  }

  .block.details .col-label,
  .block.details .col-body {
    grid-column: 1;
    padding-right: 0;
  }

  .block.details .col-label {
    margin-bottom: 20px;
    font-size: clamp(1em, var(--label-size, 4em), 6vw);
  }

  .block.details .col-body {
    font-size: clamp(1em, var(--body-size, 1.8em), 4.8vw);
  }

  .block.bio-hero .headline {
    font-size: clamp(1em, 4.8em, 7vw);
  }

  .block.bio-hero .standfirst {
    font-size: clamp(1em, 2.4em, 5vw);
  }

  .block.resume .entries {
    font-size: clamp(1em, var(--col-size, 1.8em), 4.8vw);
  }

  .block.resume .col + .col {
    margin-top: 40px;
  }

  .block.header .headline {
    font-size: clamp(1em, 4.8em, 7vw);
  }
}

/* --- client logos ------------------------------------------------------- */
/*
 * The count and gaps live here rather than inline on the element: an inline
 * custom property beats a media query, so a grid whose columns are set in the
 * markup can never collapse on a phone.
 */
.block.logo-block .logo-grid {
  --columns: 5;
  --gap-x: 0px;
  --gap-y: 0px;
}

@media (max-width: 768px) {
  .block.logo-block .logo-grid {
    --columns: 2;
    --gap-x: 40px;
    --gap-y: 40px;
  }
}