:root {
  --ink: #24231f;
  --paper: #f5f0e8;
  --sand: #d5c6b2;
  --line: rgba(36, 35, 31, 0.16);
  --container: min(1360px, calc(100% - 80px));
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Alexandria", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }

a:focus-visible, button:focus-visible {
  outline: 2px solid #8a7258;
  outline-offset: 3px;
}

.container {
  width: var(--container);
  margin-inline: auto;
}

section {
  scroll-margin-top: 110px;
}

@media (max-width: 700px) {
  :root { --container: min(calc(100% - 40px), 1360px); }
  section { scroll-margin-top: 90px; }
}