@layer page {
  .gate {
    min-block-size: 100dvh;
    display: grid;
    align-content: center;
    padding-block: var(--s4);
  }

  .gate__brand { align-self: center; }

  .gate form { --gap: var(--s2); }

  .gate__note { font-size: var(--text-sm); color: var(--fg-2); }
}

@layer page {
  .home {
    min-block-size: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s4);
    text-align: center;
  }

  .home__brand {
    font-size: var(--text-display);
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
    line-height: 1;
  }

  .home__link { font-size: var(--text-sm); color: var(--fg-2); &:hover { color: var(--fg); } }
}