@font-face {
  font-family: "EB Garamond";
  src: url("assets/fonts/eb-garamond.ttf") format("truetype");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "EB Garamond";
  src: url("assets/fonts/eb-garamond-italic.ttf") format("truetype");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}

:root {
  --ink: #30312f;
  --muted: #858681;
  --line: #e8e8e4;
  --paper: #fefefd;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "EB Garamond", Garamond, Georgia, serif;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 960px;
  min-height: 70vh;
  margin: 105px auto 110px;
  padding: 0 36px;
}

h1, h2, h3 {
  font-family: inherit;
  font-weight: 400;
}

a { color: inherit; text-underline-offset: 4px; }
a:focus-visible { outline: 2px solid #687465; outline-offset: 6px; }

@media (max-width: 600px) {
  main { margin: 60px auto 70px; padding: 0 24px; }
}

header {
  min-height: 78px;
  padding: 28px 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.wordmark {
  font-size: 16px;
  letter-spacing: 1.5px;
  text-decoration: none;
  color: #646762;
}

nav { display: flex; gap: 30px; margin-left: auto; font-size: 18px; }
nav a { color: #747670; text-decoration: none; }
nav a:hover, nav a[aria-current="page"] { color: var(--ink); }
nav a:hover { text-decoration: underline; }

h1 {
  font-family: "EB Garamond", Garamond, Georgia, serif;
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin: 0;
}

.skip { position: absolute; top: -80px; left: 20px; padding: 12px; background: var(--paper); }
.skip:focus { top: 10px; }

@media (max-width: 600px) {
  header { padding: 24px; }
  nav { gap: 22px; }
  .wordmark { font-size: 14px; letter-spacing: 1px; }
  h1 { font-size: 35px; }
}

button, input, textarea, select { font: inherit; }