/* ==========================================================================
   TUOIL — cover
   An inner page's first screen: the heading and the
   introduction on the left, a photograph on the right running off the page.

   The photograph's left edge is one slant, at the blunt angle the inner pages
   use for their points. Its lower right corner is cut away by a notch of
   cream that ends on a point, and the company's line stands in that notch.
   The notch is measured from the page edge by the same bleed the photograph
   runs out on, so the line inside it keeps to the container's right edge.
   ========================================================================== */

.s-cover {
  --bleed: max(var(--container-pad),
               calc((100vw - var(--container-max)) / 2 + var(--container-pad)));
  padding-top: 120px;   /* the height of the fixed header's plate */
  padding-bottom: 6rem;
  overflow: hidden;
  background: var(--c-cream);
}

.s-cover__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  column-gap: clamp(24px, 3vw, 56px);
  min-height: clamp(560px, 46vw, 740px);
}

/* A first screen with a single paragraph under the heading: the picture
   comes down to what the text needs rather than standing far taller. */
.s-cover--short .s-cover__inner { min-height: clamp(440px, 36vw, 580px); }

/* --- Photograph -------------------------------------------------------------- */
.s-cover__media {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  align-self: stretch;
  container-type: size;
  margin-right: calc(-1 * var(--bleed));
  /* The slant leaves the top left corner free, where the text beside it is
     shortest, so the photograph starts a little inside the text column. */
  margin-left: calc(-1 * clamp(0px, 4vw, 72px));
}

.s-cover__frame {
  position: absolute;
  inset: 0;
  /* the slant: 0.4 across for every 1 down, as on the other inner pages */
  --lean: 40cqh;
  /* the notch: how far in its point sits, and how high it opens */
  --notch: calc(var(--bleed) + 12rem);
  --notch-top: 52%;
  --notch-point: 64%;
  clip-path: polygon(
    0 0,
    100% 0,
    100% var(--notch-top),
    calc(100% - var(--notch)) var(--notch-point),
    calc(100% - var(--notch) - var(--lean) * 0.36) 100%,
    var(--lean) 100%);
}

.s-cover__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The company's line, in the notch: a short olive rule over spaced capitals.
   It shares the photograph's cell, so it lines up with the container edge. */
.s-cover__motto {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  justify-self: end;
  position: relative;
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: 0.12em;
  line-height: 1.9;
  text-transform: uppercase;
  color: var(--c-muted);
}

.s-cover__motto::before {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  margin-bottom: var(--sp-2);
  background: var(--c-base-glow);
}

.s-cover__motto span { display: block; }

/* --- Text -------------------------------------------------------------------- */
.s-cover__body {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  padding-block: var(--sp-5);
}

.s-cover__title {
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
}

/* The first word stands on its own, at display size. */
.s-cover__title-lead {
  display: block;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

.s-cover__text {
  max-width: 58ch;
  margin-top: var(--sp-4);
  color: var(--c-ink);
}

.s-cover__text strong { font-weight: var(--fw-semibold); }

/* Narrower, the slant and the notch would meet at the foot of the picture
   and leave it standing on a point; a steeper slant keeps a foot under it. */
@media (max-width: 1200px) {
  .s-cover__frame { --lean: 28cqh; }
}

@media (max-width: 1100px) {
  .s-cover__frame { --lean: 20cqh; }
}

@media (max-width: 1024px) {
  .s-cover__inner {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  /* Stacked, the photograph goes first at a declared height, keeps its slant
     and loses the notch: the line moves under the text and lies flat. */
  .s-cover__media {
    grid-column: 1;
    grid-row: 1;
    height: clamp(260px, 58vw, 520px);
    margin-left: 0;
  }

  .s-cover__frame {
    --lean: 30cqh;
    clip-path: polygon(0 0, 100% 0, 100% 100%, var(--lean) 100%);
  }

  .s-cover__body {
    grid-column: 1;
    grid-row: 2;
    padding-block: var(--sp-5) 0;
  }

  .s-cover__motto {
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.5em;
    margin: var(--sp-4) 0 0;
    padding: 2px 0 2px var(--sp-3);
    border-left: 1px solid var(--c-border-strong);
  }

  .s-cover__motto::before { display: none; }
  .s-cover__motto span { display: inline; }
}

@media (max-width: 768px) {
  .s-cover { padding-top: 104px; padding-bottom: var(--sp-6); }
}