.app-header { position: absolute; z-index: 1; top: 0; right: 0; left: 0; }
.page-container { width: calc(100% - 4rem); max-width: 72rem; margin: 0 auto; }

.main-menu {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  padding-top: 1.5rem;
  color: var(--color-subtle);
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;

  a, button {
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
  }
}

.main-menu__sign-out { margin: 0; }

.placeholder, .auth-page {
  display: grid;
  min-height: 100vh;
  padding: 6rem 2rem 2rem;
  place-items: start center;
}

.placeholder {
  background: radial-gradient(circle at 88% 12%, var(--color-wash-green) 0, transparent 25rem), radial-gradient(circle at 10% 92%, var(--color-wash-gold) 0, transparent 28rem), var(--color-background);

  .placeholder__content { width: 100%; max-width: 72rem; }
  .placeholder__eyebrow {
    margin: 0 0 1.5rem;
    color: var(--color-subtle);
    font-family: var(--font-sans);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    a { color: inherit; text-decoration: none; }
  }
  h1 { font-size: clamp(2.5rem, 5vw, 4rem); letter-spacing: -.055em; line-height: .96; }
  .placeholder__body { max-width: 30rem; margin: 2rem 0 0; color: var(--color-muted); font-family: var(--font-sans); font-size: 1.05rem; line-height: 1.6; }
}

.button { display: inline-block; padding: .8rem 1rem; border: 1px solid var(--color-action); border-radius: .45rem; color: var(--color-action-text); background: var(--color-action); font-family: var(--font-sans); font-size: 1rem; text-decoration: none; cursor: pointer; }

@media (max-width: 40rem) {
  .placeholder, .auth-page { padding: 5rem 1rem 1rem; }
  .page-container { width: calc(100% - 2rem); }
  .main-menu { gap: 1rem; padding-top: 1rem; }
}