@layer base {
  body {
    display: grid;
    grid-template-rows: auto auto 1fr auto var(--block-space);
  }

  .skip-to-main {
    color: var(--color-ink);
    font-size: 1rem;
    inset-block-start: -40px;
    inset-inline-end: 10px;
    padding: 10px;
    position: absolute;
    text-decoration: none;
    z-index: 100;

    &:focus {
      background-color: var(--color-body);
      border: 1px solid var(--color-theme);
      border-block-end: 10px solid var(--color-theme);
      border-radius: 1.5em;
      inset-block-start: 70px;
      padding: var(--block-space-one-and-a-half);
    }
  }

  :where(#main) {
    container-type: inline-size;
    font-size: var(--font-medium-responsive);
    inline-size: 67ch;
    margin-inline: auto;
    max-inline-size: 100vw;
    padding-block-end: clamp(var(--block-space), 5%, calc(var(--block-space) * 3));
    padding-inline: clamp(1rem, 5%, calc(var(--inline-space) * 3));
    text-align: center;

    @media print {
      font-size: 11pt;
      inline-size: unset;
      line-height: 1.3;
      margin: 0;
      orphans: 3;
      padding: 0;
      text-align: justify;
      text-justify: distribute;
      widows: 2;
    }
  }

  :where(#footer) {
    max-inline-size: 100vw;
    view-transition-name: footer;

    > nav {
      padding-inline: var(--inline-space);
      view-transition-name: footer-nav;
    }

    &:has(.footer-sticky) {
      inset-block-end: var(--inline-space-double);
      position: sticky;
    }
  }

  :where(#header) {
    max-inline-size: 100vw;
    view-transition-name: header;
    z-index: var(--z-header);

    > nav {
      view-transition-name: nav;
    }

    > * {
      align-items: center;
      display: flex;
      gap: 1ch;
      justify-content: center;
      padding: var(--block-space-half) var(--inline-space);

      & :has(.avatar-stack) {
        grid-template-columns: 25% 1fr 25%;
      }
    }

    .btn {
      flex-shrink: 0;
    }
  }

  :where(#toolbar) {
    display: flex;
    inset: 0 0 auto;
    justify-content: center;
    margin-block-end: var(--block-space);
    min-inline-size: 0;
    padding-inline: var(--inline-space);
    position: sticky;
    view-transition-name: toolbar;
    z-index: var(--z-toolbar);

    &:not(:has(> *)) {
      margin-block-end: 0;
    }
  }

  :is(#header, #footer, #toolbar) {
    @media print {
      display: none;
    }
  }
}