@layer base {
  :root {
    --header-height: calc((var(--block-space) * 2) + (var(--text-small) * var(--line-height-small)));
    --footer-height: calc((var(--block-space) * 2) + (var(--text-small) * var(--line-height-small)));
  }

  body {
    margin: 0;
    min-height: 100dvh;
  }

  header {
    block-size: var(--header-height);
    display: flex;
    justify-content: center;
    padding: var(--block-space);
  }

  footer {
    block-size: var(--footer-height);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--block-space);
  }

  .island {
    h1 {
      padding-bottom: var(--block-space);
    }
  }

  main {
    &:has(.island) {
      display: grid;
      min-height: calc(100dvh - var(--header-height) - var(--footer-height));
      /* Off-center island */
      padding-bottom: calc(var(--header-height) * 3);
      place-items: center;
    }

    &:has(.editor) {
      display: flex;
      flex-direction: column;
      align-items: center;
      height: calc(100dvh - var(--header-height) - var(--footer-height));
    }
  }

  nav {
    display: flex;
  }
}