@layer {
  body address {
    font-style: normal;
  }

  img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 1;
  }

  h1,
  h2 {
    margin-block-start: 0;
  }

  :is(ul, ol, dl, p) {
    margin-block: 0;
  }

  :is(ul, ol):not(:is(ul, ol) :is(ul, ol)) {
    padding-inline-start: 1em;
  }
}

@layer {
  body {
    --c-primary-hue: 204;
    --c-secondary-hue: 312;

    --c-bg: light-dark(#fff, hsl(var(--c-primary-hue), 40%, 15%));
    --c-bg-header: light-dark(
      hsl(var(--c-primary-hue), 40%, 98%),
      hsl(var(--c-primary-hue), 40%, 12%)
    );
    --c-text: light-dark(
      hsl(var(--c-primary-hue), 30%, 20%),
      hsl(var(--c-primary-hue), 30%, 80%)
    );
    --c-text-light: light-dark(
      hsl(var(--c-primary-hue), 50%, 40%),
      hsl(var(--c-primary-hue), 50%, 70%)
    );
    --c-links: light-dark(
      hsl(var(--c-secondary-hue), 30%, 25%),
      hsl(var(--c-secondary-hue), 30%, 75%)
    );
    --c-headings: light-dark(
      hsl(var(--c-primary-hue), 80%, 20%),
      hsl(var(--c-primary-hue), 80%, 90%)
    );

    font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
      Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
    font-size: 0.925em;
    line-height: 1.75;
    margin: 0;
    color: var(--c-text);
    background: var(--c-bg);
  }

  a {
    color: var(--c-links);
    text-underline-offset: 0.3em;

    &:focus-visible {
      outline: 0.125em solid currentColor;
      outline-offset: 0.1em;
    }
  }

  section {
    --spacing-block: clamp(2em, 4vi, 4em);

    padding: var(--spacing-block);
  }

  section:nth-child(1) {
    background: var(--c-bg-header);
    container: section / inline-size;
  }

  section:nth-child(2) {
    container: container / inline-size;
  }

  h1,
  h2 {
    color: var(--c-headings);
  }

  h1 {
    font-size: clamp(1.4em, 3vi, 2em);
    line-height: 1.25;

    span {
      display: block;
      font-size: 0.75em;
      font-weight: 500;
      color: var(--c-text-light);
    }
  }

  h2 {
    font-size: clamp(1.2em, 3vi, 1.6em);
    margin-block-end: 0.5em;
  }

  h2:not(:first-child) {
    margin-block-start: 1em;
  }

  img {
    border-radius: 0.3125em;
    max-inline-size: 18em;
  }

  b,
  dt {
    font-weight: 600;
    color: var(--c-text-light);
  }

  @container section (inline-size < 18em) {
    dd + dt {
      margin-block-start: 1em;
    }
  }

  @container section (inline-size >= 18em) {
    dl {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 0.5em 1em;
    }
  }

  dd {
    margin-inline-start: 0;
  }

  .Divider {
    border-block-end: 0.0625em solid
      light-dark(rgb(0 0 0 / 10%), rgb(255 255 255 / 10%));
    padding-block: 2em;
  }

  .Timeline {
    display: grid;

    @container container (inline-size >= 36em) {
      grid-template-columns: auto 1fr;
      column-gap: 1em;
    }

    h2 {
      grid-column: 1 / -1;
    }

    ol,
    li {
      display: grid;
      grid-template-columns: subgrid;
      grid-column: 1 / -1;
    }

    ol {
      padding-inline-start: 0;
      margin-block-start: 0;
      list-style: none;
    }

    li + li {
      margin-block-start: 1em;
    }

    p {
      margin-block: 0;
    }
  }

  @media (width < 42em), print and (width < 42em) {
    header {
      display: flex;
      flex-direction: row-reverse;
      justify-content: start;
      align-items: center;
      column-gap: 2em;
      flex-wrap: wrap;
    }

    img {
      inline-size: 38.2%;
      min-inline-size: 12em;
    }
  }

  @media (width >= 42em), print and (width >= 42em) {
    main {
      min-block-size: 100dvb;
      display: grid;
      grid-template-columns: 38.2% 61.8%;
    }

    section:nth-child(1) {
      display: flex;
      justify-content: end;
      align-items: start;

      div {
        max-inline-size: 18em;
        block-size: 100%;
        display: flex;
        flex-direction: column;
      }

      footer {
        margin-block-start: auto;
      }
    }
  }
}

@layer {
  .u-hiddenVisually {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    clip-path: inset(100%);
    clip: rect(0 0 0 0);
    overflow: hidden;
  }
}

@media print {
  body {
    font-size: 0.925em;
  }
}

@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
}