*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  --Page-ink: #333333;
  --Page-paper: #ffffff;
  --Page-stone: #f4f2ef;
  --Page-navy: #1f2f57;
  --Page-hairline: #ddd7cf;
  --Page-amber: #d98324;

  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-bottom: 12vh;
  background: var(--Page-stone);
  color: var(--Page-ink);
  font-family: 'Montserrat', 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.7;
}

main {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  flex: 1;
}

section { flex: 1 1 auto; }

h1, h2, h3, h4 {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-weight: 600;
  color: var(--Page-navy);
  margin: 0 0 1rem;
  letter-spacing: 0.01em;
}

h1 {
  font-size: min(11vw, 4rem);
  line-height: 1.12;
  font-weight: 700;
}

h2 { font-size: min(8vw, 2.4rem); line-height: 1.2; }
h3 { font-size: 1.35rem; line-height: 1.3; }
h4 { font-size: 1.1rem; }

p { margin: 0 0 0.5rem; line-height: 1.5; }

a { color: var(--Page-navy); text-decoration: none; }
a:hover { color: var(--Page-amber); }

ul, ol { line-height: 1.6; }

img { max-width: 100%; height: auto; display: block; }

strong { font-weight: 500; color: var(--Page-navy); }

hr {
  border: 0;
  border-top: 1px solid var(--Page-hairline);
  margin: 1.5rem 0;
}

button { font-family: inherit; transition: all 0.2s ease; }
button:active { transform: scale(0.95); }

input:focus,
textarea:focus { outline: 2px solid var(--Page-amber); outline-offset: 2px; }

::selection { background: #f6e3c9; color: #1f2f57; }

@media (min-width: 768px) {
  body { font-size: 1.09375rem; padding-bottom: 8vh; }
}