/* About is the quietest page in the system: a compact masthead, one reading
   column, marginal notes, and a small number of lived artifacts. The shared
   case-page header and red close keep it connected without repeating the
   homepage's poster language. */

/* --------------------------------------------------------------- masthead */

body.about-page .about-hero {
  padding-top: clamp(58px, 6.5vw, 96px);
  padding-bottom: clamp(72px, 7.5vw, 112px);
  border-bottom: 1px solid var(--line);
  align-items: start;
}
body.about-page .about-rail {
  grid-column: 1 / span 2;
  grid-row: 1;
  padding-top: 8px;
  color: var(--olive);
}
body.about-page .about-rail p {
  margin: 0;
}
body.about-page .about-rail p + p {
  margin-top: 10px;
}
body.about-page .about-hero h1 {
  grid-column: 3 / span 7;
  grid-row: 1;
  margin: 0;
  font:
    clamp(45px, 4.5vw, 66px) / 0.98 "Archivo Black",
    Impact,
    sans-serif;
  letter-spacing: -0.06em;
  text-wrap: balance;
}
body.about-page .about-title-mark {
  color: var(--red);
}
body.about-page .about-intro {
  grid-column: 3 / span 7;
  grid-row: 2;
  /* 33em at 21px lands on the same right edge as the body's 37em at 19px, so
     the hero and the passages share both margins rather than just the left. */
  max-width: 33em;
  margin: clamp(34px, 3.5vw, 50px) 0 0;
  color: var(--ink-soft);
  font:
    400 clamp(18px, 1.45vw, 21px) / 1.66 "Libre Baskerville",
    Georgia,
    serif;
}
/* The olive is ground, not a second rectangle beside the print.
 *
 * Measured off the homepage, which is the composition this echoes: there the
 * block runs 557px against a 274px photograph, so the print is 49% of the
 * field, and the block bleeds off the right edge of the viewport. Here it was
 * 287px against a 262px print, 91%, stopping 57px short of the edge, so the
 * two read as competing shapes and the olive survived only as a sliver behind
 * the photo, taking the outlined square and the red bar with it.
 *
 * Widening to five columns and bleeding past the gutter puts the print back at
 * roughly half the field, with olive open to its left and below. */
/* A small olive plate offset behind the print, not a field beside it. It was
   287px against a 262px photograph, near enough the same width that the two
   read as competing rectangles. Two columns, dropped and pushed right, so it
   shows only as an edge under and beside the paper. */
body.about-page .about-portrait-field {
  grid-column: 11 / -1;
  grid-row: 1 / span 2;
  position: relative;
  z-index: 0;
  align-self: start;
  justify-self: end;
  /* Two thirds of the print's width and dropped well below its top edge, so it
     reads as a plate deliberately set behind the paper. At 88% and an 8px
     clearance it read as a print that had failed to line up. */
  width: clamp(112px, 11vw, 170px);
  /* Tall: the plate now starts just above the print's top edge and runs past
     its base, so it reads as a panel the photograph is resting on rather than
     a block sitting beside it. */
  min-height: clamp(248px, 23.5vw, 356px);
  margin: -20px 0 0;
  background: var(--olive);
}
body.about-page .about-portrait-field::before {
  position: absolute;
  top: 10%;
  right: 10%;
  width: 48%;
  height: 58%;
  border: 1px solid var(--paper);
  content: "";
  transform: rotate(7deg);
}
body.about-page .about-portrait-field::after {
  position: absolute;
  right: 0;
  bottom: 11%;
  width: 79%;
  height: 13%;
  background: var(--red);
  content: "";
}
body.about-page .about-portrait {
  grid-column: 10 / -1;
  grid-row: 1 / span 2;
  position: relative;
  z-index: 1;
  align-self: start;
  justify-self: start;
  width: min(84%, 258px);
  margin: 0;
  padding: 8px;
  border: 1px solid rgba(24, 25, 23, 0.14);
  background: #f6f2e8;
  box-shadow: 4px 5px 0 rgba(24, 25, 23, 0.11);
  transform: rotate(0.5deg);
}
body.about-page .about-portrait img {
  display: block;
  width: 100%;
  height: auto;
}
body.about-page .about-portrait figcaption {
  padding: 7px 1px 1px;
  color: var(--olive);
  font: 10px/1.35 var(--font-mono);
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------- chapters */

body.about-page .about-content {
  padding-top: clamp(82px, 8vw, 122px);
  padding-bottom: clamp(96px, 10vw, 154px);
}
body.about-page .about-chapter,
body.about-page .about-useful,
body.about-page .about-personal {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
body.about-page .about-chapter {
  margin-top: clamp(82px, 8vw, 120px);
  align-items: start;
}
body.about-page .about-chapter-first {
  margin-top: 0;
}
body.about-page .about-chapter-label {
  grid-column: 1 / span 2;
  /* The rail ends where the copy begins, so without this an eyebrow long
     enough to fill it sits flush against the text column. */
  padding-right: clamp(24px, 2.2vw, 44px);
  margin: 0;
  padding-top: 8px;
  color: var(--olive);
}
body.about-page .about-chapter-first .about-chapter-label::before {
  display: block;
  width: 31px;
  margin-bottom: 16px;
  border-top: 2px solid var(--red);
  content: "";
}
body.about-page .about-chapter-copy {
  grid-column: 3 / span 7;
}
body.about-page .about-chapter-copy h2,
body.about-page .about-useful h2,
body.about-page .about-personal-copy h2 {
  margin: 0 0 29px;
  font:
    clamp(27px, 2.5vw, 35px) / 1.05 "Archivo Black",
    Impact,
    sans-serif;
  letter-spacing: -0.05em;
}
body.about-page .about-chapter-copy > p,
body.about-page .about-personal-copy > p {
  margin: 0 0 1.35em;
  color: var(--ink);
  font:
    400 clamp(17px, 1.3vw, 19px) / 1.7 "Libre Baskerville",
    Georgia,
    serif;
}
body.about-page .about-chapter-copy > p:last-child,
body.about-page .about-personal-copy > p:last-of-type {
  margin-bottom: 0;
}
body.about-page .about-chapter-copy a {
  color: var(--red-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
body.about-page .about-chapter-copy a:hover {
  color: var(--ink);
}
body.about-page .about-career-marker {
  display: block;
  margin-bottom: 8px;
  color: var(--olive);
}
/* Reads as an ordinary closing paragraph. The red rule and the lightened ink
   made it a pull-quote, which is the wrong weight for a plain statement of
   what he did. */
body.about-page .about-judgment {
  margin-top: 2em !important;
}

/* --------------------------------------------------------------- usefulness */

body.about-page .about-useful {
  margin-top: clamp(100px, 10vw, 152px);
  padding-top: 27px;
  border-top: 1px solid var(--ink);
}
body.about-page .about-useful-label {
  grid-column: 1 / span 2;
  /* The rail ends where the copy begins, so without this an eyebrow long
     enough to fill it sits flush against the text column. */
  padding-right: clamp(24px, 2.2vw, 44px);
  margin: 0;
  color: var(--olive);
}
body.about-page .about-useful h2 {
  grid-column: 3 / span 7;
  max-width: 19ch;
}
body.about-page .about-ledger {
  grid-column: 3 / span 9;
  margin-top: 24px;
  border-top: 1px solid var(--line);
}
body.about-page .about-ledger article {
  display: grid;
  grid-template-columns: minmax(160px, 0.34fr) minmax(0, 0.66fr);
  gap: 28px;
  padding: 23px 0 25px;
  border-bottom: 1px solid var(--line);
}
body.about-page .about-ledger article > .mono {
  margin: 2px 0 0;
  color: var(--olive);
}
body.about-page .about-ledger h3 {
  margin: 0 0 7px;
  font: 600 16px/1.35 var(--font-sans);
  letter-spacing: -0.02em;
}
body.about-page .about-ledger article div > p {
  max-width: 42em;
  margin: 0;
  color: var(--ink-soft);
  font:
    400 15px/1.6 "Libre Baskerville",
    Georgia,
    serif;
}

/* ------------------------------------------------------------- human coda */

body.about-page .about-personal {
  margin-top: clamp(108px, 11vw, 166px);
  padding-top: clamp(74px, 7vw, 106px);
  border-top: 1px solid var(--line);
  align-items: start;
}
body.about-page .about-personal-label {
  grid-column: 1 / span 2;
  /* The rail ends where the copy begins, so without this an eyebrow long
     enough to fill it sits flush against the text column. */
  padding-right: clamp(24px, 2.2vw, 44px);
  margin: 0;
  padding-top: 8px;
  color: var(--olive);
}
body.about-page .about-personal-copy {
  grid-column: 3 / span 7;
}
body.about-page .about-music-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  margin-top: 26px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--ink);
  font: var(--text-label) / 1.35 var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body.about-page .about-music-link:hover {
  color: var(--red-deep);
  border-color: var(--red-deep);
}

/* The brick-red close is shared site furniture. Its alignment follows the
   page's reading column without otherwise changing the component. */
body.about-page .next-case h2,
body.about-page .next-case .next-links {
  grid-column: 4 / span 9;
}

/* --------------------------------------------------------------- narrower */

@media (max-width: 1040px) {
  body.about-page .about-hero h1,
  body.about-page .about-intro {
    grid-column-start: 3;
  }
  /* The text has to stop before the field, or the field paints over it: it is
     a positioned element and the copy is not. */
  body.about-page .about-hero h1,
  body.about-page .about-intro {
    grid-column-end: span 7;
  }
  body.about-page .about-chapter-copy {
    grid-column: 3 / span 7;
  }
  /* Six pixels of clearance to the print at this width, which is the width of
     a space. Give it a real gap instead. */
  body.about-page .about-hero h1,
  body.about-page .about-intro {
    padding-right: 22px;
  }
  /* The copy runs to column 9 here, matching the passages, so the print has to
     start at 10 or the two collide. The plate's offsets are re-tuned because
     the print is width-capped on large screens and percentage-based below, so
     one set of numbers cannot serve both. */
  body.about-page .about-portrait {
    grid-column: 10 / -1;
  }
  body.about-page .about-portrait-field {
    grid-column: 11 / -1;
    width: clamp(88px, 13vw, 132px);
    min-height: clamp(196px, 27vw, 272px);
    margin-top: -18px;
  }
  body.about-page .about-useful h2,
  body.about-page .about-ledger {
    grid-column-start: 3;
  }
  body.about-page .about-useful h2 {
    grid-column-end: span 7;
  }
  body.about-page .about-ledger {
    grid-column-end: -1;
  }
}

@media (max-width: 760px) {
  body.about-page .about-rail,
  body.about-page .about-hero h1,
  body.about-page .about-intro,
  body.about-page .about-portrait-field,
  body.about-page .about-portrait,
  body.about-page .about-chapter-label,
  body.about-page .about-chapter-copy,
  body.about-page .about-useful-label,
  body.about-page .about-useful h2,
  body.about-page .about-ledger,
  body.about-page .about-personal-label,
  body.about-page .about-personal-copy,
  body.about-page .about-rail,
  body.about-page .about-hero h1,
  body.about-page .about-intro {
    grid-row: auto;
  }
  body.about-page .about-portrait-field,
  body.about-page .about-portrait {
    grid-row: 4;
  }
  body.about-page .about-rail {
    display: flex;
    gap: 20px;
    padding-top: 0;
  }
  body.about-page .about-rail p + p {
    margin-top: 0;
  }
  body.about-page .about-hero h1 {
    margin-top: 38px;
    font-size: clamp(42px, 11vw, 58px);
  }
  body.about-page .about-intro {
    margin-top: 29px;
  }
  body.about-page .about-portrait-field,
  body.about-page .about-portrait {
    grid-column: 1 / -1;
    justify-self: center;
  }
  body.about-page .about-portrait {
    width: min(64%, 250px);
    margin: 58px 0 0;
    transform: none;
  }
  /* Same rule as every other width: the plate is smaller than the print and
     offset behind it. At 60% of the full column it was 199px against a 192px
     photograph, so the two read as one shape again. */
  /* Centred like the print, then nudged so it still reads as a plate set
     behind it rather than a second rectangle beside it. */
  body.about-page .about-portrait-field {
    width: clamp(104px, 30vw, 140px);
    height: clamp(236px, 64vw, 290px);
    min-height: 0;
    margin: 58px 0 0;
    transform: translate(clamp(54px, 17vw, 76px), 34px);
  }
  body.about-page .about-chapter {
    margin-top: 78px;
  }
  body.about-page .about-chapter-first {
    margin-top: 0;
  }
  body.about-page .about-chapter-copy {
    margin-top: 26px;
  }
  body.about-page .about-chapter-copy h2,
  body.about-page .about-useful h2,
  body.about-page .about-personal-copy h2 {
    font-size: 30px;
  }
  body.about-page .about-useful {
    margin-top: 96px;
  }
  body.about-page .about-useful h2 {
    margin-top: 26px;
  }
  body.about-page .about-ledger {
    margin-top: 17px;
  }
  body.about-page .about-ledger article {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  body.about-page .about-personal {
    margin-top: 102px;
    padding-top: 72px;
  }
  body.about-page .about-personal-copy {
    margin-top: 26px;
  }
}

@media (max-width: 600px) {
  body.about-page .about-hero {
    padding-top: 49px;
    padding-bottom: 42px;
  }
  body.about-page .about-content {
    padding-top: 72px;
    padding-bottom: 94px;
  }
  body.about-page .about-intro,
  body.about-page .about-chapter-copy > p,
  body.about-page .about-personal-copy > p {
    font-size: 17px;
    line-height: 1.64;
  }
}

@media (prefers-reduced-motion: reduce) {
}


/* --------------------------------------------------------- photographs */

/* Two rules govern every photograph on this page.
 *
 * One: the copy never pays for an image. It keeps seven columns wherever it
 * sits and the image takes three that were empty anyway, so the measure is
 * identical in a section with a photograph and a section without one. Roughly
 * two thirds against one third.
 *
 * Two: a full-bleed photograph is capped in height. The reason a bleed makes
 * people stop reading is that it fills the viewport and the page looks
 * finished; at 40vh a slice of type is always on screen with it, so it reads
 * as a beat rather than an ending.
 */

/* Seven columns runs wider than the six this page used before, so every
   paragraph is capped rather than left to reach eighty characters. Applied to
   all sections, not just the ones carrying a photograph, so the measure and
   the left edge never change as you scroll. */
body.about-page .about-chapter-copy > p,
body.about-page .about-personal-copy > p {
  max-width: 37em;
}

body.about-page .about-aside {
  grid-column: 10 / -1;
  grid-row: 1;
  align-self: start;
  margin: 8px 0 0;
}
body.about-page .about-aside img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
/* Ziggy is the one portrait. A third of the width is where a vertical
   photograph wants to live, so it keeps its shape instead of being cropped
   into agreement with the others. */
body.about-page .about-aside-tall img {
  aspect-ratio: 3 / 4;
}
body.about-page .about-aside figcaption {
  margin-top: 10px;
  color: var(--olive);
  font: 10px/1.4 var(--font-mono);
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

body.about-page .about-band {
  grid-column: 1 / -1;
  margin: clamp(84px, 8.5vw, 130px) calc(max(var(--gutter), env(safe-area-inset-right)) * -1)
          clamp(84px, 8.5vw, 130px) calc(max(var(--gutter), env(safe-area-inset-left)) * -1);
}
body.about-page .about-band picture {
  display: block;
}
body.about-page .about-band img {
  display: block;
  width: 100%;
  height: clamp(220px, 40vh, 440px);
  object-fit: cover;
  /* The band uses a purpose-cut crop rather than the 4:3 original. Framing a
     3:1 strip out of a 4:3 photograph with object-position only works at one
     viewport width; every other width slid the bonsai out of frame.
     Horizontally it holds 37%, which is the centre of the bench: whenever the
     box is narrower than the source's 4:1 the sides are what get trimmed, and
     a centred crop walks off the left-hand trees. */
  /* 30% vertically, not centre. The band's height is set in vh, so on a short
     or tablet-height window the box gets *wider* than the source's 4:1 and
     cover starts trimming top and bottom instead of the sides. Centred, that
     takes the maple's crown. Biased up, the window keeps it. */
  object-position: 37% 30%;
}
/* Grid items do not collapse margins, so the band's bottom margin and the
   next section's top margin were stacking: 103 + 97 = 200px of paper between
   the caption and the label. The band already sets the interval. */
body.about-page .about-band + .about-chapter,
body.about-page .about-band + .about-useful,
body.about-page .about-band + .about-personal {
  margin-top: 0;
}
body.about-page .about-band figcaption {
  margin-top: 10px;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  color: var(--olive);
  font: 10px/1.4 var(--font-mono);
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

@media (max-width: 1040px) {
  body.about-page .about-chapter-copy,
  body.about-page .about-personal-copy {
    grid-column: 3 / span 7;
  }
  body.about-page .about-aside {
    grid-column: 9 / -1;
  }
}

@media (max-width: 760px) {
  /* No room for a spread: the image sits above its section and the copy runs
     full width. */
  body.about-page .about-aside {
    grid-column: 1 / -1;
    grid-row: auto;
    max-width: 300px;
    margin: 0 0 26px;
  }
  /* Every section, not only the ones carrying a photograph, or the two
     without one stay indented while the rest go full width. The hero belongs
     here too: the 1040 rules start it at column 3 and nothing below was
     putting it back. */
  /* The section labels were still on the two-column rail here, 58px wide, so
     "05 / No job title required" broke over four lines and sat hard against
     the photograph beneath it. On a phone the rail is not a column any more;
     the label is a line of type with the section under it. */
  body.about-page .about-chapter-label,
  body.about-page .about-useful-label,
  body.about-page .about-personal-label {
    grid-column: 1 / -1;
    margin-bottom: 24px;
    padding-top: 0;
    padding-right: 0;
  }
  body.about-page .about-rail,
  body.about-page .about-hero h1,
  body.about-page .about-intro,
  body.about-page .about-chapter-copy,
  body.about-page .about-personal-copy,
  body.about-page .about-useful h2,
  body.about-page .about-ledger {
    grid-column: 1 / -1;
  }
  body.about-page .about-hero h1,
  body.about-page .about-intro {
    padding-right: 0;
  }
  body.about-page .about-band img {
    height: clamp(190px, 32vh, 300px);
  }
}