@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DM-Sans.ttf") format("truetype");
  font-weight: 100 1000;
  font-display: swap;
}
@font-face {
  font-family: Fraunces;
  src: url("../fonts/Fraunces.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --color-ink: #183d3d;
  --color-text: #394e4d;
  --color-paper: #faf9f5;
  --color-sand: #eeede5;
  --color-line: #d9ded6;
  --color-accent: #ae5335;
  --font-body: "DM Sans", Arial, sans-serif;
  --font-heading: Fraunces, Georgia, serif;
  --content-width: 77.5rem;
  --section-space: clamp(3rem, 8vw, 7rem);
}
* { box-sizing: border-box; }
html { scroll-padding-top: 2rem; }
body { margin: 0; background: var(--color-paper); color: var(--color-text); font: 1rem/1.7 var(--font-body); }
button, input, textarea, select { font: inherit; }
img { max-width: 100%; height: auto; }
a { color: var(--color-ink); text-underline-offset: .2em; }
h1, h2, h3 { color: var(--color-ink); font-family: var(--font-heading); font-weight: 450; line-height: 1.12; letter-spacing: -.045em; }
h1 { font-size: clamp(2.7rem, 7vw, 5.5rem); max-width: 14ch; margin-block: 1rem 2rem; }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 4px; }
[hidden] { display: none !important; }