/* =========================================================================
   about.css — the About Us page.

   THE PHOTO IS A COLUMN, NOT A BANNER. Full width above the writing it
   came out 900 across and 675 tall, so the whole first screen was a
   photograph and the text began below the fold. It now takes the LEFT
   column with the copy beside it, and the gutter between them is
   deliberately narrow -- the two belong together, and a wide gap read
   as two separate things sharing a page.

   IT IS STILL NOT CROPPED. 4:3 is what the camera gave and the frame
   wants all of it: sky, beach, both of them mid-jump. Narrowing the
   column shrinks it without cutting anything out.

   THE EDGE IS A BLOB. The wordmark is bubble lettering -- fat,
   rounded, hand-drawn shapes -- and the photo answers it with an
   organic radius rather than a box. No stroke and no panel behind
   it; the shape is enough, and anything more started to compete with
   the photograph.

   ON A PHONE the grid collapses and the photo leads, which is why it
   comes first in the markup. Capped there so it does not swallow a
   small screen.
   ========================================================================= */

.about-head {
  background: var(--blush);
  /* the sticky header sits above this, so it owes only the difference
     -- same reasoning as the home and library heroes */
  padding-top: clamp(34px, 30px + 0.5vw, 46px);
  padding-bottom: var(--pad-s);
  text-align: center;
}

.about-head h1 {
  font-size: var(--display-md);
  line-height: var(--lh-md);
}

/* -------------------------------------------------------------------------
   layout
   ------------------------------------------------------------------------- */

.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 2.75rem);
  /* the two columns are different heights, so centre them against
     each other rather than hanging both from the top */
  align-items: center;
}

@media (min-width: 880px) {
  .about__grid {
    /* Sized tracks rather than 1fr, and the whole grid centred.

       With the copy column set to 1fr it stretched to the full 88%
       while the text inside it stopped at its measure, so the pair
       sat left with a ragged gap of nothing on the right. Giving each
       track its own width and centring the grid keeps the photo and
       the writing together as one block in the middle of the page. */
    grid-template-columns:
      minmax(280px, 560px)
      clamp(2.5rem, 3.6vw, 3.5rem)
      minmax(0, 74ch);
    justify-content: center;
    gap: 0;
  }

  /* BOTH NEED grid-row: 1, not just a column.

     The figure comes first in the markup so phones open on it. Placing
     either item explicitly without naming a row lets auto-placement
     push the other into row TWO, which stacks them and leaves a column
     of dead space. Naming the row pins them side by side. */
  .about__photo { grid-column: 1; grid-row: 1; }
  .about__copy { grid-column: 3; grid-row: 1; }

}

/* -------------------------------------------------------------------------
   photo — the blob

   No stroke and no panel behind it: the shape is doing the work. The
   radii are percentages, and different on each axis, which is what
   stops it reading as a rounded rectangle and starts it reading as a
   drawn shape -- the same quality the bubble lettering has.

   PERCENTAGES, NOT PIXELS, SO IT SCALES. The photo keeps its 4:3 at
   every width, so a percentage radius keeps the identical silhouette
   from a 330px phone to a 400px column. Pixel radii would flatten out
   as the photo grew.

   NOTHING IMPORTANT IS IN THE CORNERS. Both of them are centred with
   sky above and sand below, so the shape eats only background.
   ------------------------------------------------------------------- */

.about__photo {
  margin: 0 auto;
  max-width: 520px;          /* phones: never the whole screen */
  width: 100%;
}

.about__photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 46% 54% 38% 62% / 42% 38% 62% 58%;

  /* No filter. The source file is already graded -- lifting it again
     in CSS would double the correction. */
}

@media (min-width: 880px) {
  .about__photo {
    max-width: none;         /* the column is the constraint up here */
  }
}

/* -------------------------------------------------------------------------
   the writing
   ------------------------------------------------------------------------- */

.about__copy { max-width: 74ch; }

/* paragraph spacing comes from .u-body + .u-body in site.css */

/* The closing line used to sit here as .about__kicker. It is now the
   heading of the closing CTA instead, so the rule is gone rather than
   left behind to rot. */

/* -------------------------------------------------------------------------
   phones — the stacked order

   THREE GAPS RAN INTO EACH OTHER HERE. 34px above "About us" against
   70 below it, then another 70 before the photo, and only 32 between
   the photo and the writing. So the heading sat pushed up against the
   top of its own band, and the photo sat nearer the heading than the
   text it belongs to -- 140px of blush and white between the two.

   The band is now symmetric about the heading: the same clamp above
   and below, so "About us" sits in the middle of it rather than at
   the top. And the photo takes the same 32px above it that the grid
   already puts below it, which is what centres it between the band
   and the writing instead of parking it under the heading.

   Both only apply while the layout is stacked. Above 880px the photo
   is a column beside the copy and this spacing is not in play.
   ------------------------------------------------------------------- */

@media (max-width: 879px) {
  /* matches .about-head's own padding-top, deliberately */
  .about-head { padding-bottom: clamp(34px, 30px + 0.5vw, 46px); }

  /* equal to the grid's row gap below the photo */
  .about { padding-top: 32px; }
}