/* The Exogenesis landing page, project 18x.

   The app has its own stylesheet and its own art direction; this is the page
   in front of it, and it is an ordinary page of this site: the tokens in
   tokens.css, the components in site.css, the 1120px column, and nothing
   here that is not layout for the four feature sections.

   No inline style anywhere, per the CSP. Nothing here is loaded by the app.
*/

/* -------------------------------------------------------------- the hero */

.xl__hero {
  display: grid;
  gap: var(--s-5);
  padding-block: var(--s-7) var(--s-6);
}

.xl__heroActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  margin: 0;
}

/* The quiet way into classic, which the contract asks the hero to carry
   beside the loud way into the app. */
.xl__quiet {
  color: var(--text-2);
  font-size: var(--t-sm);
  margin: 0;
}

/* ----------------------------------------------------------- the sections */

.xl__band {
  padding-block: var(--s-6);
  border-block-start: 1px solid var(--line);
}

.xl__band > h2 {
  margin-block: 0 var(--s-4);
}

.xl__prose > p {
  max-inline-size: 68ch;
}

.xl__prose > p + p {
  margin-block-start: var(--s-4);
}

/* One feature: a paragraph and the capture it is about. The capture leads on
   a narrow screen and sits beside the prose from 900px, alternating side so
   the page does not read as four identical rows. */
.xl__feature {
  display: grid;
  gap: var(--s-5);
  padding-block: var(--s-6);
  border-block-start: 1px solid var(--line);
  align-items: start;
}

.xl__feature > h2 {
  margin: 0;
}

.xl__feature p {
  max-inline-size: 62ch;
  margin-block: var(--s-3) 0;
}

/* The captures are 1920 by 1080 of a real session, so they carry their own
   aspect ratio and never shift the layout as they load. */
.xl__shot {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-1);
}

.xl__shot img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 9;
}

.xl__shotNote {
  color: var(--text-3);
  font-size: var(--t-xs);
  padding: var(--s-3) var(--s-4);
  margin: 0;
  border-block-start: 1px solid var(--line);
}

@media (min-width: 900px) {
  .xl__feature {
    grid-template-columns: 1fr 1fr;
    /* The heading takes its own height and the prose takes what is left, so
       the two stay together. Letting both rows share the height of the
       capture beside them is what pushed a heading and its own first
       sentence to opposite ends of the row. */
    grid-template-rows: min-content 1fr;
    gap: var(--s-4) var(--s-6);
    align-items: start;
  }

  .xl__feature > h2,
  .xl__feature > .xl__featureText {
    grid-column: 1;
  }

  .xl__feature > .xl__shot {
    grid-column: 2;
    grid-row: 1 / span 2;
    /* The capture is taller than the words beside it, so it centres against
       them rather than hanging off the top. */
    align-self: center;
  }

  /* Every other one turns around. */
  .xl__feature--flip > h2,
  .xl__feature--flip > .xl__featureText {
    grid-column: 2;
  }

  .xl__feature--flip > .xl__shot {
    grid-column: 1;
  }
}

/* --------------------------------------------------------- how it works */

.xl__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s-4);
}

@media (min-width: 720px) {
  .xl__steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.xl__step {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: var(--s-5);
}

.xl__step h3 {
  font-size: var(--t-lg);
  font-weight: var(--t-lg-weight);
  margin: 0 0 var(--s-2);
}

.xl__step p {
  margin: 0;
  color: var(--text-2);
}

/* ------------------------------------------------------ practical notes */

.xl__notes {
  margin: 0;
  display: grid;
  gap: var(--s-4);
  max-inline-size: 68ch;
}

.xl__notes > div {
  display: grid;
  gap: var(--s-1);
}

.xl__notes dt {
  font-weight: 600;
}

.xl__notes dd {
  margin: 0;
  color: var(--text-2);
}