/* The About page (Wave 4). The page loads /assets/site.css first and this file second, so a rule here wins a tie
   with a shared rule at every width, phones included.

   Almost everything on the page comes from the shared file: the hero (.ihero), the homepage's "Where it started"
   section (.origin, .story, .collage), the "On the mat" band (.split, .flow, and .phcap for the photo with its label), the homepage's "Who I am"
   section (.who-grid, .who-list, .fam), the story card and the italic line under it (.story, .after-line--left), the
   homepage's Metamodel section (.mm, .roads, .mm2, .praise), the table of rows (.rowtable), the quote cards
   (.quotes), the wall (.wall, .wcard), the homepage's closer, the extra photo strips for tablets and phones (.strip
   with .m-only or .p-only), and .keep2, which keeps a band two columns wide on tablets.

   This file only holds what the shared file has no piece for. Each block says why it is here.

   Four colors only: Deep Slate Olive, Naples Yellow, Peach Red, Neutral Gray, and transparency of them. */

/* a chip over a headline inside one of the homepage's own section layouts (the homepage sets this space with a style
   attribute on each chip) */
.ab-chip{margin-bottom:22px}

/* ---------- 2. Where it started: a photo between two paragraphs of the story card, on phones only ----------
   With three paragraphs the card is taller than a phone screen. The photo is a portrait of him. */
.story .mph{margin:18px 0}
.story .mph + p{margin-top:16px}

/* ---------- 5 and 6. a photo that fills its side of a .split ----------
   The shared .split centers a photo of a set shape beside the words. .ab-fill makes the photo as tall as the words
   beside it (the story card and its line, the table of four layers). (On tablets the frame has a limit on how tall
   it may get for its width: see the 600px rule below.) */
.ab-fill{align-self:stretch;display:flex;margin:0}
.ab-fill .frame{flex:1;width:100%;aspect-ratio:auto;min-height:280px}
.ab-paid{margin-top:0}
.ab-layers{margin-top:64px}

/* ---------- 7. Praise: a wide photo among the three cards ----------
   From 1180 wide down the three cards stand one under the other, and from the photo over them to the next photo of
   him is more than a screen. From 1181 up, where the cards are side by side, it isn't drawn. On phones a second
   figure in the page (marked .p-only) stands in the same place, so each screen gets a photo that is sharp at its
   size. */
.ab-praise-ph{display:none}

/* ---------- 9. Proof ----------
   The six cards stand in the copy deck's order: the video card in the first column, two cards under a photo in the
   second, three cards in the third. */
.ab-wall-h{max-width:860px;margin-inline:auto}
/* the photo over the middle column's two cards: 16 to 9 where the wall is one column (see the 761px rule below for
   the widths where it stands in a column) */
.ab-wall-top{--ar:16/9}
/* From 1180 wide down the wall is two columns and its third column becomes a row of two. Three cards in that row
   leave an empty cell, so a photo fills it there. From 1181 up it isn't drawn. (The Programs page has the same.) */
.ab-wall-fill{display:none}

/* ===================== responsive ===================== */
@media (max-width:1180px){
  .ab-wall-fill{display:block}
}
@media (min-width:761px){
  /* The wall in columns. The middle column is as tall as the tallest column, and the photo over its two cards takes
     the height that is left, so the column ends level with its neighbour (the video card's height changes with the
     width, and a photo of one set shape left the column up to 290px short). The photo is never lower than 16 to 9
     and never taller than a square. (100cqw is the column's own width. A browser that doesn't know the unit skips
     those lines and the photo keeps its own shape.) */
  .wall > .wall__col:nth-child(2){align-self:stretch;container-type:inline-size}
  .ab-wall-top{flex:1 1 auto;display:flex}
  .ab-wall-top{flex:1 1 56.25cqw;min-height:56.25cqw;max-height:100cqw}
  .ab-wall-top .frame{flex:1;width:100%;aspect-ratio:auto;min-height:0}
}
@media (min-width:761px) and (max-width:1180px){
  /* The third column as a row of two: the two cells of a row are the same height, and the photo in the last cell is
     as tall as the card beside it. */
  .wall > .wall__col:nth-child(3){align-items:stretch}
  .ab-wall-fill{display:flex}
  .ab-wall-fill .frame{flex:1;width:100%;aspect-ratio:auto;min-height:200px}
}
@media (min-width:600px) and (max-width:1180px){
  /* the wide photo among the praise cards */
  .ab-praise-ph{display:block}
}
@media (min-width:900px) and (max-width:1180px){
  /* "Where it started" on a narrow desktop screen. With three paragraphs the story card is far taller than the
     collage beside it there. The story column gets more of the width, and the collage keeps the proportions it has
     on a wide screen at any column width (the shared file gives it one fixed height and fixed places for two of its
     three pictures). */
  .origin{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:60px}
  .origin .collage{height:auto;aspect-ratio:549/760}
  .origin .collage .p16{top:30.3%}
  .origin .collage .pbook{top:63.2%}
  /* the two labels stay on one line (at 900 wide the academy picture is narrower than its label) */
  .origin .collage figcaption .chip{white-space:nowrap;max-width:none}
}
@media (min-width:900px) and (max-width:1180px) and (min-height:560px){
  /* ...and the collage stays on screen while the story card scrolls beside it, the way the homepage's "Who I am"
     photo does. Its width is kept to what fits under the header on a short screen, so it's never cut off at the
     bottom while it stays there. */
  .origin .collage{position:sticky;top:calc(var(--nav-h) + 28px);width:min(100%, calc((var(--vh) - var(--nav-h) - 56px) / 1.37));justify-self:end}
}
@media (max-width:899px){
  .ab-layers{margin-top:44px}
}
@media (min-width:600px) and (max-width:760px){
  /* The wall is one column here, and its photos take the column's whole width. Without this their width came from
     each picture's own size hint (as in "Where it started" above), so on a screen with 2.5 or more device pixels per
     CSS pixel they were drawn about a third narrower than the cards. On other screens nothing changes. */
  .wall .mph{align-self:stretch}
}
@media (min-width:600px) and (max-width:899px){
  /* tablets, "Where it started": the "Me at 16" photo and the row of two pictures under the story card take the
     column's whole width. Without this their width came from each picture's own size hint (the sizes list in the
     page), so on a screen with 2.5 or more device pixels per CSS pixel, which is what the Fold has, they were drawn
     about a quarter narrower than the column and stopped short of its right edge. On other screens nothing changes. */
  .origin .collage .p16,.origin .collage__row{align-self:stretch}
  /* tablets: the Metamodel's words and its three cards stay side by side, as on a desktop screen (the shared rule
     puts the cards under the words from 899 wide down, which makes this band more than a screen with no photo). */
  .ab-mm{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:36px;align-items:start}
  /* in that narrower column the chip's words run to two lines, so it is a rounded box there, as it is on phones */
  .ab-mm .chip{border-radius:16px;line-height:1.3}
  /* tablets: the table of four layers takes the whole width. The photo that stood beside it is left out, and a wide
     strip of the same photo (a lighter file, cut for that shape) stands over the table in its place. */
  .ab-layers .ab-fill{display:none}
}
@media (min-width:600px) and (max-width:899px){
  /* Tablets: the photo that fills its side is never thinner than 3 wide to 5 tall. On a narrow tablet the words
     beside it run long and the frame was three times as tall as it was wide, with his ears cut off. The figure is
     made a size container so the frame can be told how tall it may get for its own width: 100cqw is the figure's
     width. (A browser that doesn't know the unit skips the line and the frame fills the whole height, as before.)
     The Programs page has the same rule for the photo under its video card. */
  .ab-fill{container-type:inline-size}
  .ab-fill .frame{max-height:calc(100cqw * 5 / 3)}
}
@media (min-width:600px) and (max-width:819px) and (min-height:660px){
  /* Up to 819 wide that limit leaves room under the photo (from about 820 the frame fills its space again). There
     the photo stays on screen while the words beside it scroll, the way the homepage's "Who I am" photo does. */
  .ab-fill .frame{position:sticky;top:calc(var(--nav-h) + 24px)}
}
@media (max-width:599px){
  /* phones: the photo is a plain picture again, and it comes before the words it stood beside */
  .ab-fill{display:block;order:-1}
  .ab-fill .frame{aspect-ratio:var(--ar, 16/10);min-height:0}
}