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

  html {
    scrollbar-gutter: stable;
    overscroll-behavior: none;
    font-size: 16px;
  }

  @media (max-width: 568px) {
    html {
      font-size: 0.7rem;
    }
  }

  html,
  body {
    height: 100%;
  }

  body {
    margin: 0;
    font-family: "EB Garamond", serif;
    font-size: 1.6rem;
    color: var(--ink);
    background: var(--black);
    min-height: 100vh;
    min-height: 100svh;
    overflow-x: hidden;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  body.reduce-motion {
    filter: none;
  }

  main {
    position: relative;
    z-index: 2;
    opacity: 1;
  }

  hr {
    width: clamp(320px, 60%, var(--page-max-width));
    border: 12px groove var(--ink-light);
    border-radius: 24px;
    opacity: 0.5;
    margin: 64px auto;
  }
}