:root {
  --burgundy: #5e2029;
  --olive: #25311b;
  --ivory: #f4ecd8;
  --paper: #fbf7ed;
  --muted-olive: #667054;
  --font-brandon: "Brandon Grotesque", "brandon-grotesque", "BrandonGrotesque", "Avenir Next", "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--olive);
  background: var(--paper);
  font-family: var(--font-brandon);
}
a { color: inherit; }
.site-header { padding: 32px clamp(22px, 6vw, 88px) 0; background: var(--olive); text-align: center; }
.page-logo { display: block; width: min(480px, 78vw); margin: 0 auto 26px; }
.page-logo img { display: block; width: 100%; height: auto; }
.site-nav { display: flex; justify-content: center; gap: clamp(22px, 4vw, 58px); flex-wrap: wrap; padding: 8px 0 28px; }
.site-nav a { color: var(--ivory); font-size: 13px; font-weight: 600; letter-spacing: .18em; text-decoration: none; text-transform: uppercase; transition: color 180ms ease, opacity 180ms ease; }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--ivory); opacity: .68; }
.header-rule { height: 7px; margin: 0; border: 0; background: var(--burgundy); }
.page-hero { padding: clamp(32px, 5vw, 56px) 22px clamp(40px, 6vw, 68px); text-align: center; }
.eyebrow { margin: 0 0 14px; color: var(--burgundy); font-size: 12px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
h1 { margin: 0; color: var(--olive); font-size: clamp(42px, 7vw, 82px); font-weight: 400; letter-spacing: .05em; text-transform: uppercase; }
.intro { width: min(680px, 100%); margin: 22px auto 0; color: var(--muted-olive); font-size: clamp(17px, 2vw, 21px); line-height: 1.65; }
.content-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; width: min(1120px, calc(100% - 44px)); margin: 0 auto 90px; }
.content-grid.registry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
.info-card { display: flex; min-height: 310px; padding: clamp(28px, 4vw, 44px); border: 1px solid rgba(37,49,27,.25); background: rgba(255,255,255,.38); flex-direction: column; text-align: center; box-shadow: 0 18px 44px rgba(37,49,27,.06); }
.card-kicker { margin: 0 0 15px; color: var(--burgundy); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
h2 { margin: 0 0 18px; font-size: clamp(24px, 2.6vw, 34px); font-weight: 400; letter-spacing: .04em; text-transform: uppercase; }
.info-card p { margin: 0 0 28px; color: var(--muted-olive); line-height: 1.65; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin: auto auto 0; padding: 13px 22px; border: 1px solid var(--burgundy); color: var(--burgundy); font-size: 11px; font-weight: 700; letter-spacing: .17em; text-decoration: none; text-transform: uppercase; transition: background 180ms ease, color 180ms ease; }
.button:hover, .button:focus-visible { background: var(--burgundy); color: var(--ivory); }
.site-footer { padding: 35px 22px; background: var(--olive); color: var(--ivory); text-align: center; }
.site-footer p { margin: 0; font-size: 12px; letter-spacing: .15em; text-transform: uppercase; }
.site-footer a { text-underline-offset: 4px; }

@media (max-width: 760px) {
  .site-header { padding-top: 24px; }
  .page-logo { margin-bottom: 17px; }
  .site-nav { gap: 15px 24px; padding-bottom: 22px; }
  .site-nav a { font-size: 11px; }
  .header-rule { height: 5px; }
  .content-grid, .content-grid.registry-grid { grid-template-columns: 1fr; }
  .info-card { min-height: 275px; }
}