/* About: written by tools/build-pages.py. Reads every value from tokens.css; the page head,
   note, frame, the "Selected works" head and the tiles come from components.css, the closing
   block from cta.css. Nothing here sets type: every style is one the site already has.

   Luke 10/12 (third version): the home intro's layout. At left the page head (eyebrow "About",
   the title under it, as on the portfolio and contact) and Spenser's words under it in a note,
   at right his portrait (on the sofa with his dog); then a little of the work, then the
   contact block. Static: no scroll reveals (Luke 9/30). */

.about {
  /* No bottom padding: the closing follows (css/cta.css .cta--page brings the space) */
  padding: calc(var(--header-height, 88px) + var(--space-page-top)) var(--gutter) 0;
  background: var(--paper);
  color: var(--ink);
}

/* ---------- Intro: the head and his words at left, the photo at right ---------- */
/* The photo's top level with the eyebrow's capitals; the text straight under the title, at
   the page head's own gap. */

.about__intro {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
  grid-template-rows: auto 1fr; /* the photo's extra height goes under the text */
  container-type: inline-size; /* its width, so the photo's crop can stop at square */
}
.about__head { grid-column: 1 / span 8; grid-row: 1; }
.about__head .page-head__statement { grid-column: 1 / -1; } /* all eight columns, so the stone line runs on one */
.about__text { grid-column: 1 / span 6; grid-row: 2; align-self: start; max-width: var(--measure); }
/* On the home portrait's four columns (9-12; Luke 10/12: the five it had took too much room
   beside a short bio), at 4:5. Very short screens crop it toward square, never past. */
.about__photo { grid-column: 9 / -1; grid-row: 1 / span 2; }
.about__photo .frame {
  width: 100%; aspect-ratio: 4 / 5;
  max-height: max(calc(100svh - var(--header-height, 88px) - var(--space-page-top) - var(--gutter)), calc((100cqi - 11 * var(--gutter)) / 12 * 4 + 3 * var(--gutter)));
}

/* ---------- A little of the work, then the closing ---------- */

.about__work { margin-top: var(--space-head); }

/* ---------- Tablet: the desktop's two sides, the words on seven columns, the photo on five
   (KOBU keeps its intro side by side on a tablet; stacked, the photo ran the full width and
   most of a screen tall) ---------- */
@media (max-width: 989px) {
  .about__head, .about__text { grid-column: 1 / span 7; }
  .about__text { max-width: none; padding-right: max(0px, calc(100% - var(--measure))); } /* its rule runs its columns; the text keeps the measure */
  .about__photo { grid-column: 8 / -1; }
  .about__photo .frame { max-height: none; }
}

/* ---------- Phone: the head, the photo, then the text ---------- */
@media (max-width: 600px) {
  .about__intro { grid-template-rows: none; }
  .about__head, .about__photo, .about__text { grid-row: auto; grid-column: 1 / -1; }
  .about__text { margin-top: var(--space-tiles); }
}