/* ==========================================================================
   TUOIL — about
   Text on the left, a cut-out photograph band on the right.
   ========================================================================== */

.s-about {
  padding-block: var(--section-pad);
  background: var(--c-cream);
  /* the picture runs past its column and off the page, see below */
  overflow: hidden;
}

.s-about__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--sp-7);
  align-items: center;
}

/* Two lines. 22ch is the width that holds the break at
   "made / where" from 375 all the way up; balance keeps the two lines from
   coming out lopsided when the column is between sizes. */
.s-about__title {
  max-width: 22ch;
  text-wrap: balance;
}

.s-about__text {
  max-width: 54ch;
  margin-top: var(--sp-3);
  color: var(--c-ink);
}

.s-about__text p + p { margin-top: var(--sp-2); }

.s-about__link { margin-top: var(--sp-4); }

/* --- Band ---------------------------------------------------------------------
   Artwork, not a layout: the photograph comes already cut
   into four panels with the shape and the seams baked in, so the page only
   has to place it. A cut-out, so it carries an alpha channel -- WebP rather
   than PNG, which is why it is the one image on the site not a JPEG.

   It is more than three times as wide as it is tall, so at the width of its
   column it comes out much shorter than the text beside it. Instead it is set
   to the height of that text and let run on past the column; the section
   clips whatever reaches the edge of the page, the same way the IFEAT
   photograph is clipped on the left. The frame is a size container so the
   picture has a height to measure -- and so its own height stays out of the
   row's arithmetic, which would otherwise be circular.
   ------------------------------------------------------------------------- */
.s-about__frame {
  align-self: stretch;
  container-type: size;
}

.s-about__media {
  display: block;
  height: 100cqh;
  width: auto;
  max-width: none;
}

/* Stacks earlier than the rest of the page: between 1024 and 1200 the text
   column is under 420px, which is where the heading falls to three lines. */
@media (max-width: 1200px) {
  .s-about__inner { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }

  /* On its own row there is no text to match, so the picture goes back to
     filling the width at its own proportion. */
  .s-about__frame { container-type: normal; }
  .s-about__media { width: 100%; height: auto; }
}