@layer layout {
  header, footer {
    text-shadow: 0 0 10px oklch(var(--lch-white) / 80%), 0 0 20px oklch(var(--lch-white) / 60%);
  }

  header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: var(--z-nav);
  }

  footer {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: var(--z-nav);
  }

  .page-main {
    position: relative;
    z-index: var(--z-content);
    padding-block: var(--space-16);
    padding-inline: var(--space-4);
    text-align: left;
    min-block-size: 100vh;

    @media (min-width: 48rem) {
      padding-block: var(--space-16) var(--space-20);
      padding-inline: var(--space-8);
    }
  }

  .page-content {
    max-inline-size: var(--content-max);
    text-align: left;
  }

  .two-col {
    display: grid;
    gap: var(--space-8);

    @media (min-width: 48rem) {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-12);
    }
  }
}