@layer base {
  body {
    display: grid;
    grid-template-rows: auto 1fr auto 9em;

    &.public {
      grid-template-rows: auto 1fr auto;
    }
  }

  :where(#main) {
    inline-size: 100dvw;
    margin-inline: auto;
    max-inline-size: 100dvw;
    padding-inline: clamp(var(--inline-space), 3cqmin, 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: 100dvw;

    > nav {
      padding-inline: var(--inline-space);
    }
  }

  :where(#header) {
    max-inline-size: 100dvw;
    view-transition-name: header;

    > nav {
      view-transition-name: nav;

      header {
        h1 {
          font-weight: 800;
          margin-block-start: 0.2em;
          text-align: center;

          a:not([class]) {
            background-color: transparent;
            font-weight: inherit;
            text-decoration: underline;
          }
        }

        a:not([class]) {
          background-color: var(--color-ink-lightest);
          border-radius: 2em;
          color: var(--color-ink);
          font-weight: 500;
          padding: 0.2em 0.8em;
          text-decoration: none;

          @media (hover: hover) {
            &:hover {
              background-color: var(--color-ink-lighter);
              text-decoration: none;
            }
          }
        }
      }
    }

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

    .btn {
      flex-shrink: 0;
    }
  }

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

  .skip-navigation {
    --left-offset: -999em;

    inset-block-start: 4rem;
    inset-inline-start: var(--left-offset);
    position: absolute;
    white-space: nowrap;
    z-index: 11;

    &:focus {
      --left-offset: var(--inline-space);
    }
  }
}