:root {
  --pine: #1F3D2C;
  --linen: #EFE7D4;
  --brass: #A8884E;
  --rust: #B5562F;
  --ink: #1A1A1A;
  --mute: #6B6862;
  --line: #D8D2C4;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--linen);
  color: var(--ink);
  font-family: 'Inter','Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; height: auto; }
p { margin: 0; }
a { color: inherit; }

header.page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 96px 28px 64px;
}
.kicker {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: var(--brass);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin: 0 0 28px;
}
h1 {
  font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  font-weight: 500;
  font-size: clamp(44px, 7vw, 84px);
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--pine);
  margin: 0 0 28px;
  max-width: 18ch;
}
.lede {
  font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 24px);
  line-height: 1.45;
  color: var(--pine);
  max-width: 56ch;
}

main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 28px 80px;
  display: grid;
  gap: 20px;
}

.card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--line);
  padding: 48px 40px 40px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.card.secondary { background: transparent; padding: 32px 40px 28px; }
.card.secondary h2 { font-size: clamp(24px, 3vw, 32px); }
.card.secondary .card-desc { font-size: 17px; }
.card:hover, .card:focus-visible {
  border-color: var(--pine);
  transform: translateY(-2px);
  outline: none;
}
.card-eyebrow {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 18px;
}
.card h2 {
  font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  font-weight: 500;
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.1;
  color: var(--pine);
  margin: 0 0 18px;
  letter-spacing: 0.005em;
}
.card-desc {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
  max-width: 56ch;
  margin: 0 0 32px;
}
.card-open {
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--pine);
  font-weight: 500;
}

footer.page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 28px 80px;
  border-top: 1px solid var(--line);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
}

@media (max-width: 560px) {
  header.page { padding: 56px 22px 32px; }
  main { padding: 0 22px 56px; }
  footer.page { padding: 24px 22px 56px; }
  .card { padding: 32px 22px 24px; }
}