:root {
  --color-ink: #0f172a;
  --color-text: #334155;
  --color-muted: #64748b;
  --color-border: #e2e8f0;
  --color-surface: #ffffff;
  --color-surface-muted: #f1f5f9;
  --radius-small: 0.5rem;
  --radius-medium: 0.75rem;
  --radius-large: 1rem;
  --shadow-card: 0 1px 2px rgb(15 23 42 / 0.06), 0 8px 24px rgb(15 23 42 / 0.06);
  --content-width: 72rem;
  --page-gutter: 1rem;

  @media (min-width: 768px) {
    --page-gutter: 1.5rem;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-padding-block-start: calc(var(--statesboro-header-height, 7rem) + var(--wp-admin--admin-bar--height, 0px) + 1rem);
  scroll-padding-block-end: calc(7rem + env(safe-area-inset-bottom, 0px));

  @media (min-width: 992px) {
    scroll-padding-block-end: 1rem;
  }
}

body {
  margin: 0;
}

img,
video {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

button,
input,
select,
textarea {
  max-inline-size: 100%;
  font: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

.wrapper,
.site-main,
.error-404 {
  inline-size: min(calc(100% - var(--page-gutter) * 2), var(--content-width));
  margin-inline: auto;
}

.post-list {
  & .post-list__items {
    display: grid;
    gap: 2rem;
  }

  & .post-list__pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}

.design-reference {
  & > * + * {
    margin-block-start: 1.5rem;
  }

  & .design-reference-form {
    display: grid;
    gap: 1rem;

    & label {
      display: grid;
      gap: 0.375rem;
    }
  }

  & .design-reference-media > div {
    display: grid;
    min-block-size: 16rem;
    place-items: center;
    border: 1px solid var(--color-border);
  }
}