@layer reset, layout, pages, components, utilities;

@layer reset {
  :root {
    interpolate-size: allow-keywords;
  }

  ::view-transition {
    pointer-events: none;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
    font: inherit;
    padding: 0;
  }


  html {
    hanging-punctuation: first last;
    font-family: system-ui, sans-serif;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    line-height: 1.4;
  }

  body {
    margin: 0;
    min-height: 100svh;
  }

  p,
  h1,
  h2,
  h3,
  h4,
  figure,
  blockquote,
  dl,
  dd {
    margin-block-end: 0;
  }

  nav * {
    margin: 0;
  }

  img,
  picture,
  svg,
  video {
    font-style: italic;
    background-repeat: no-repeat;
    background-size: cover;
    shape-margin: 1rem;
    vertical-align: middle;
    max-width: 100%;
    height: auto;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-wrap: balance;
  }

  p {
    text-wrap: pretty;
  }

  button {
    appearance: none;
    -webkit-appearance: none;
    border-radius: 0;
    text-align: inherit;
    background: none;
    box-shadow: none;
    padding: 0;
    cursor: pointer;
    border: none;
    color: inherit;
    font: inherit;
  }

  input {
    color: inherit;
    font: inherit;
  }

  ol,
  ul,
  menu {
    list-style: '';
  }

  a {
    color: inherit;
    text-decoration: inherit;
  }

  @media (prefers-reduced-motion: no-preference) {
    :has(:target) {
      scroll-behavior: smooth;
    }

    @view-transition {
      navigation: auto;
    }
  }
}