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

:where(#main) {
  container-type: inline-size;
  inline-size: 100vw;
  margin-inline: auto;
  max-inline-size: 100vw;
  padding-block: 0 clamp(var(--block-space), 3cqmin, calc(var(--block-space) * 3));
  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: 100vw;

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

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

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

  > * {
    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;
  }
}