@layer base {
  body.page-body {
    /* Layout handled by layout.css (Grid) */
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    font-size-adjust: 0.52;
    font-optical-sizing: auto;
    font-size: var(--font-size-1);
    line-height: var(--font-lineheight-3);
    background: var(--bg-body);
    color: var(--color-text);
  }

  h1,
  .h1 {
    font-size: var(--font-size-4);
    line-height: var(--font-lineheight-1);
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  h2 {
    font-size: var(--font-size-3);
    line-height: var(--font-lineheight-1);
    font-weight: 700;
  }

  h3,
  .h3 {
    font-size: var(--font-size-2);
    line-height: var(--font-lineheight-2);
    font-weight: 700;
  }

  p {
    line-height: var(--font-lineheight-3);
  }

  a {
    color: var(--color-accent);
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }

  [x-cloak] {
    display: none !important;
  }


  .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;
  }

  @view-transition {
    navigation: auto;
  }

  .global-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--color-accent);
    z-index: var(--layer-critical);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    transform-origin: left;
    transform: scaleX(0);
  }

  .global-progress.htmx-request {
    opacity: 1;
    animation: progress-indeterminate 1s infinite linear;
  }

  @keyframes progress-indeterminate {
    0% {
      transform: scaleX(0) translateX(0);
    }
    50% {
      transform: scaleX(0.5) translateX(50%);
    }
    100% {
      transform: scaleX(0) translateX(200%);
    }
  }
}