html > body > #grid > main.landing {
  /** Required arguments with purportedly ridiculous defaults */
  --element-gap-inline: 200px;
  --element-gap-block: 200px;
  --element-gap-between-features-and-paragraph: 200px;
  --element-color-lead: red;
  --element-heading-font: italic 100px "Comic Sans MS", cursive;;
  --element-heading-font-size: 200px;
  --element-heading-text-overlay: red;
  --element-em-text-overlay: red;
  --element-details-summary-color-border: red;
  --element-details-summary-border-radius: 100px;
  --element-details-summary-padding: 100px;

  /** Optional arguments with sensible defaults */
  --element-details-summary-text-decoration: none;
  --element-details-summary-text-decoration-style: none;
  --element-details-summary-text-decoration-thickness: 0;
  --element-details-summary-text-underline-offset: 0;

  display: grid;
  grid-template-columns: subgrid;
  gap: var(--element-gap-block) var(--element-gap-inline);

  > header {
    container-type: inline-size;
    container-name: landing-title;
    display: flex;
    flex-direction: column;
    gap: var(--element-gap-block);

    > h1 {
      pointer-events: none;
      font: var(--element-heading-font);
      font-size: max(var(--element-heading-font-size), 4.5vw);
      margin-bottom: -.35ex;
      background: var(--element-heading-text-overlay);
      background-clip: text;
      color: transparent;
      text-decoration-thickness: 1px;
    }

    @container landing-title (min-width: 0) {
      > h1 {
        font-size: calc(100cqw / 7);
      }
    }
  }

  > h3 {
    font-size: x-large;
  }

  > header > h2,
  > h3 {
    color: var(--element-color-lead);
  }

  > h2 + h3 {
    margin-top: calc(var(--element-gap-block) * -1);
  }

  > article {
    --element-gap: var(--element-gap-block);
  }

  > details {
    > summary {
      padding: var(--element-details-summary-padding);
      margin-top: calc(var(--element-details-summary-padding) * -1 - 1px);
      margin-left: calc(var(--element-details-summary-padding) * -1 - 1px);
      border: 1px solid var(--element-details-summary-color-border);
      border-radius: var(--element-details-summary-border-radius);
      display: inline-block;
      text-decoration: var(--element-details-summary-text-decoration);
      text-decoration-style: var(--element-details-summary-text-decoration-style);
      text-decoration-thickness: var(--element-details-summary-text-decoration-thickness);
      text-underline-offset: var(--element-details-summary-text-underline-offset);
    }

    &[open] > summary {
      margin-bottom: var(--element-details-summary-padding);
    }
  }

  * em {
    font-weight: bold;
    font-style: italic;
    background: var(--element-em-text-overlay);
    background-clip: text;
    color: transparent;
  }
}