@layer components {
  /* Mobile-first shell for the public guest pages. */
  .guest-shell {
    display: grid;
    grid-template-rows: 1fr auto;
    min-block-size: 100dvh;
    padding-block: max(var(--space-l), env(safe-area-inset-top)) max(var(--space-s), env(safe-area-inset-bottom));
    background:
      radial-gradient(50rem 28rem at 50% -8%, color-mix(in oklab, var(--color-highlight) 16%, transparent), transparent 70%),
      var(--color-bg);
  }

  .guest-shell__footer {
    justify-content: center;
    padding-block-start: var(--space-l);
    color: var(--color-text-muted);
    font-size: var(--step--1);

    & a { color: inherit; }
  }

  .guest-event__header {
    display: grid;
    justify-items: center;
    gap: var(--space-2xs);
    padding-block: var(--space-m) var(--space-2xs);
    text-align: center;

    & h1 {
      font-size: var(--step-4);
      font-weight: 440;
    }
  }

  .guest-event__welcome {
    color: var(--color-text-muted);
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-style: italic;
    text-align: center;

    & p { margin-inline: auto; }
    & p + p { margin-block-start: var(--space-2xs); }
  }

  .guest-event__notice {
    align-items: center;
    text-align: center;

    & p { color: var(--color-text-muted); }
  }
}