@layer layout {
  .site-header,
  .site-layout {
    margin-inline: auto;
    max-width: 78rem;
    padding-inline: clamp(1rem, 4vw, 2rem);
  }

  .site-header,
  .site-layout > nav {
    padding-block: 0.75rem;
  }

  .site-layout > nav a {
    display: inline-flex;
    margin-inline-end: 1rem;
    align-items: center;
  }

  main {
    min-width: 0;
    padding-block: 2rem;
  }

  @media (min-width: 64rem) {
    .site-layout--with-council {
      align-items: start;
      display: grid;
      gap: 1.5rem;
      grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr) minmax(21rem, 24rem);
      max-width: 112rem;
    }

    .site-layout--with-council > nav {
      position: sticky;
      top: 1rem;
    }

    .site-layout--with-council > nav a {
      display: flex;
      margin-inline-end: 0;
    }
  }

  form,
  input,
  textarea,
  select {
    width: min(100%, 42rem);
  }

  .flash-region,
  .error-summary,
  .error-banner {
    border: 1px solid var(--border-default);
    margin-block-end: 1rem;
    padding: 0.75rem 1rem;
  }

  .flash-message,
  .error-summary p,
  .error-banner {
    margin: 0;
  }

  .flash-message--error,
  .flash-message--warning,
  .error-summary,
  .error-banner {
    border-color: var(--danger, #d99489);
  }

  .table-scroll {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  button,
  a {
    min-height: 44px;
  }

  @media (max-width: 20rem) {
    .site-header,
    .site-layout {
      padding-inline: 0.75rem;
    }
  }

  @media (max-width: 40rem) {
    .site-layout > nav {
      display: grid;
      gap: 0.25rem;
    }

    .site-layout > nav a {
      margin-inline-end: 0;
    }
  }
}