/* Home intro: the first section under the hero. Reads every value from tokens.css.
   KOBU's layout (References/Website/Kobu): a large left-aligned statement, one photo set off
   to the right, and a short indented block under the statement. The one photo here is
   Spenser's portrait. Luke 9/30: the portrait's top lines up with the top of the statement's
   first line, and the bio (with its link) ends level with the bottom of the portrait. */

.intro {
  position: relative;
  padding: var(--space-section) var(--gutter);
  background: var(--paper);
  color: var(--ink);
}

.intro__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}

/* Eyebrow on its own row, so the statement's first line starts the row the portrait
   shares. The second sentence is set in stone, KOBU's two-tone headline turned around
   (ink leads, the gray follows). */
.intro__eyebrow { grid-column: 1 / span 7; grid-row: 1; margin-bottom: var(--space-eyebrow); }

/* A .statement (components.css): its box starts at the capitals, so the portrait meets the letters */
.intro__statement { grid-column: 1 / span 7; grid-row: 2; }

/* Portrait: right side, top level with the statement's capitals (.frame, components.css).
   No caption under it (Luke 9/30: tried a few, liked it better without). */
.intro__portrait {
  grid-column: 9 / span 4; grid-row: 2 / span 2;
  align-self: start;
  position: relative;
}
.intro__frame { aspect-ratio: 4 / 5; } /* a .frame (components.css) */

/* Bio: indented under the statement; its last line sits on the portrait's bottom edge */
/* (a .note, components.css: the hairline, the text and the link) */
.intro__bio {
  grid-column: 4 / span 4; grid-row: 3;
  align-self: end;
  margin-top: var(--space-tiles); /* the least room under the statement */
  text-box: trim-end cap alphabetic; /* ends on the link's baseline, not below its descenders */
}
.intro__bio p { hanging-punctuation: first; } /* it's Spenser's quote: the opening mark hangs so the words line up (Safari) */

/* Narrower desktop: the portrait and bio each take another column, so the bio still fits
   between the statement and the portrait's bottom edge */
@media (max-width: 1279px) {
  .intro__portrait { grid-column: 8 / span 5; }
  .intro__bio { grid-column: 3 / span 5; }
}

/* Tablet: statement wider, portrait and bio side by side below it */
@media (max-width: 989px) {
  .intro__eyebrow, .intro__statement { grid-column: 1 / span 10; }
  .intro__portrait { grid-column: 7 / span 6; grid-row: 3; margin-top: var(--space-head); }
  .intro__bio { grid-column: 1 / span 5; grid-row: 3; }
}

/* Phone: one column. The portrait keeps an offset (pulled to the right edge, narrower than
   the text) so the section still reads as a collage; the tile gap either side of it. */
@media (max-width: 600px) {
  .intro__grid { display: flex; flex-direction: column; }
  .intro__eyebrow { margin-bottom: var(--space-eyebrow-phone); }
  .intro__portrait { align-self: flex-end; width: calc((100% - 11 * var(--gutter)) / 12 * 10 + 9 * var(--gutter)); margin-top: var(--space-tiles); } /* columns 3-12 */
  .intro__bio { margin-top: var(--space-tiles); text-box: none; }
}