@layer reset {
  *,*::before,*::after{box-sizing:border-box}
  /* Keeps anchor targets and focused elements clear of the sticky header. */
  html{scroll-behavior:smooth;scroll-padding-top:6rem}
  body,h1,h2,h3,p,figure,dl,dd{margin:0}
  img{display:block;max-width:100%;height:auto}
  button,input,textarea,select{font:inherit}
}

@layer base {
  body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    font-size:var(--text-base);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }

  a{color:inherit;text-decoration:none}
  h1,h2,h3{font-family:var(--font-display);font-weight:400;line-height:.98}
  h1{font-size:var(--text-2xl);letter-spacing:-.045em}
  h2{font-size:var(--text-xl);letter-spacing:-.03em}
  p{max-width:70ch}

  input,textarea,select{
    width:100%;border:1px solid var(--line);background:var(--surface);padding:.9rem;
    color:inherit;
    transition:border-color var(--motion-fast) var(--ease-standard);
  }
  input:focus,textarea:focus,select:focus{outline:0;border-color:var(--text)}

  /* One focus treatment for everything keyboard-reachable. Components that
     need their own (the artwork links) override it locally. */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible{
    outline:2px solid var(--text);
    outline-offset:3px;
  }
}