/* Reset & base */
*, *::before, *::after{ box-sizing: border-box; }
html, body{ overflow-x: hidden; max-width: 100vw; }
html{ scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h-mobile) + 12px); }
@media (min-width: 768px){
  html{ scroll-padding-top: calc(var(--header-h) + 16px); }
}

body{
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text);
  background-color: var(--bg);
  background-image:
    radial-gradient(rgba(42, 33, 26, 0.045) 1px, transparent 1px),
    radial-gradient(rgba(111, 74, 47, 0.035) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 1px;
  -webkit-font-smoothing: antialiased;
}

img, video, iframe, svg{ max-width: 100%; display: block; }
img{ height: auto; }

figure{ margin: 0; }
blockquote{ margin: 0; }

h1, h2, h3, h4, h5{
  font-family: var(--ff-display);
  font-weight: 500;
  line-height: 1.12;
  margin: 0;
  color: var(--text);
  letter-spacing: -0.01em;
}
h1{ font-size: var(--fs-h1); }
h2{ font-size: var(--fs-h2); }
h3{ font-size: var(--fs-h3); }

p{ margin: 0 0 1em; }

a{ color: var(--accent); text-decoration: none; transition: color var(--t-fast); }
a:hover{ color: var(--accent-ink); }

button{ font-family: inherit; cursor: pointer; }

ul{ margin: 0; padding: 0; list-style: none; }

[hidden]{ display: none !important; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}