:root {
  --sf-header-height: 118px;
  --sf-navy: #10283d;
  --sf-gold: #b18a4a;
  --sf-gold-soft: #d9c49d;
  --sf-cream: #f1ebe1;
  --sf-ivory: #fbfaf6;
  --sf-white: #ffffff;
  --sf-font-body: "EB Garamond", Garamond, Georgia, serif;
  --sf-font-display: "Playfair Display", Georgia, serif;
  --sf-font-accent: "The Seasons", "Playfair Display", Georgia, serif;
}

.site-header {
  z-index: 1000 !important;
  overflow: visible !important;
  background: rgba(251, 250, 246, .97) !important;
  border-bottom-color: rgba(177, 138, 74, .28) !important;
}

.header-inner {
  min-height: var(--sf-header-height) !important;
  padding-top: 10px !important;
  padding-bottom: 8px !important;
  gap: 42px !important;
}

/* The header uses a wide frame, keeping the identity balanced on large displays. */
@media (min-width: 981px) {
  .site-header .header-inner {
    width: min(1720px, calc(100% - 80px)) !important;
    max-width: 1720px !important;
    margin-inline: auto !important;
  }
}

.brand {
  width: auto !important;
  max-width: 305px !important;
  margin: 0 auto 0 0 !important;
  flex: 0 0 auto !important;
}

.brand a {
  gap: 0 !important;
}

.site-header .brand-logo {
  width: 310px !important;
  height: 100px !important;
  object-fit: contain !important;
  object-position: left center !important;
}

.site-logo {
  width: 310px !important;
}

.site-logo img {
  display: block;
  width: 100% !important;
  height: auto !important;
}

.site-header .desktop-nav {
  gap: 27px !important;
  flex: 0 0 auto;
}

/* Keep the full opening composition balanced within an ordinary desktop or laptop viewport. */
.home .hero {
  padding-top: clamp(32px, 4.5vh, 54px) !important;
  padding-bottom: clamp(40px, 5.5vh, 66px) !important;
}

.home .hero-grid {
  width: min(1280px, calc(100% - 72px)) !important;
  grid-template-columns: minmax(0, 1.18fr) minmax(390px, .82fr) !important;
  gap: clamp(42px, 5vw, 68px) !important;
}

.home .hero h1 {
  max-width: 760px !important;
  font-size: clamp(3.35rem, 4.5vw, 4.5rem) !important;
  line-height: .96 !important;
}

.home .hero-visual {
  min-height: clamp(410px, 51vh, 500px) !important;
}

/* The cards provide their own spacing; avoid the generic section padding here. */
.home .facts {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

@media (min-width: 981px) and (max-height: 850px) {
  :root {
    --sf-header-height: 104px;
  }

  .site-header .brand-logo {
    width: 285px !important;
    height: 90px !important;
  }

  .header-inner {
    padding-top: 8px !important;
    padding-bottom: 6px !important;
  }

  .brand {
    max-width: 290px !important;
  }

  .home .hero {
    padding-top: 24px !important;
    padding-bottom: 34px !important;
  }

  .home .hero h1 {
    font-size: clamp(3rem, 4vw, 3.9rem) !important;
    line-height: .96 !important;
    margin-bottom: 1.1rem !important;
  }

  .home .hero-copy {
    font-size: 1.08rem !important;
    line-height: 1.55 !important;
  }

  .home .hero-visual {
    min-height: clamp(370px, 50vh, 440px) !important;
  }
}

.menu-toggle {
  display: grid !important;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(16, 40, 61, .55);
  background: transparent;
  color: var(--sf-navy);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.menu-toggle:hover,
.menu-toggle:focus-visible,
body.menu-open .menu-toggle {
  background: var(--sf-navy);
  border-color: var(--sf-navy);
  color: var(--sf-white);
}

.site-header .desktop-nav a {
  font-size: .94rem !important;
  line-height: 1.15;
  white-space: nowrap;
  color: var(--sf-navy) !important;
  font-family: var(--sf-font-body);
}

.site-header .desktop-nav .nav-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 88px;
  min-height: 46px;
  padding: .72rem 1rem !important;
  background: var(--sf-navy) !important;
  border-color: var(--sf-navy) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-align: center;
}

#sfDonateButton,
#sfDonateButton span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: .94rem !important;
  line-height: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.site-header .desktop-nav .nav-cta:hover,
.site-header .desktop-nav .nav-cta:focus-visible {
  background: var(--sf-gold) !important;
  color: var(--sf-navy) !important;
  -webkit-text-fill-color: var(--sf-navy) !important;
}

.site-header .desktop-nav .nav-cta:hover span,
.site-header .desktop-nav .nav-cta:focus-visible span {
  color: var(--sf-navy) !important;
  -webkit-text-fill-color: var(--sf-navy) !important;
}

.menu-toggle,
.mobile-menu summary {
  position: relative;
  z-index: 1002;
  flex: 0 0 46px;
  min-width: 46px;
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.menu-lines,
.menu-lines::before,
.menu-lines::after {
  display: block;
  width: 20px;
  height: 1px;
  background: currentColor;
  content: "";
  transition: transform .18s ease, opacity .18s ease;
}

.menu-lines {
  position: relative;
}

.menu-lines::before {
  position: absolute;
  top: -6px;
}

.menu-lines::after {
  position: absolute;
  top: 6px;
}

body.menu-open .menu-lines {
  background: transparent;
}

body.menu-open .menu-lines::before {
  transform: translateY(6px) rotate(45deg);
}

body.menu-open .menu-lines::after {
  transform: translateY(-6px) rotate(-45deg);
}

.mobile-menu-layer:not([hidden]) {
  display: block !important;
  position: fixed !important;
  top: var(--sf-header-height) !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 900 !important;
  width: 100% !important;
  height: calc(100dvh - var(--sf-header-height)) !important;
  overflow: hidden !important;
}

.mobile-menu-backdrop {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: rgba(7, 26, 41, .62) !important;
  cursor: pointer;
}

.mobile-nav-panel {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: min(570px, 94vw) !important;
  height: 100% !important;
  padding: 44px 42px 38px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  background:
    radial-gradient(circle at 100% 0, rgba(177,138,74,.13), transparent 29%),
    var(--sf-ivory) !important;
  border-left: 1px solid rgba(177, 138, 74, .28);
  box-shadow: -24px 0 60px rgba(7, 26, 41, .20);
  transform: translateX(102%);
  transition: transform .18s ease !important;
}

.mobile-nav-panel::before {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  right: -145px;
  top: -145px;
  border: 1px solid rgba(177, 138, 74, .35);
  border-radius: 50%;
  pointer-events: none;
}

body.menu-open {
  overflow: hidden !important;
}

body.menu-open .mobile-nav-panel {
  transform: translateX(0) !important;
}

.mobile-menu-heading {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 20px;
  align-items: end;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(177, 138, 74, .28);
}

.mobile-menu-heading::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 92px;
  height: 2px;
  background: var(--sf-gold);
}

.mobile-menu-heading .eyebrow {
  margin: 0 !important;
  color: var(--sf-gold);
  font-family: var(--sf-font-body);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.mobile-menu-heading p:last-child {
  margin: 0;
  color: var(--sf-navy);
  font-family: var(--sf-font-accent);
  font-size: clamp(1.55rem, 3vw, 2rem);
  line-height: 1.08;
}

.mobile-menu-links {
  position: relative;
  z-index: 1;
  display: block;
  padding: 14px 0 8px;
}

.drawer-link {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) 24px !important;
  gap: 14px !important;
  align-items: center !important;
  min-width: 0;
  padding: 16px 4px !important;
  border-bottom: 1px solid rgba(177, 138, 74, .28) !important;
  color: var(--sf-navy) !important;
  text-decoration: none !important;
  transition: color .18s ease, padding-left .18s ease, background .18s ease;
}

.drawer-link:hover,
.drawer-link:focus-visible {
  padding-left: 12px !important;
  background: rgba(241, 235, 225, .72);
  color: var(--sf-gold) !important;
}

.drawer-number {
  align-self: start;
  padding-top: 4px;
  color: var(--sf-gold);
  font-family: var(--sf-font-body) !important;
  font-size: .7rem !important;
  font-weight: 700;
  letter-spacing: .08em;
}

.drawer-copy {
  min-width: 0;
}

.drawer-copy strong {
  display: block;
  color: inherit;
  font-family: var(--sf-font-display);
  font-size: 1.26rem;
  font-weight: 600;
  line-height: 1.14;
}

.drawer-copy small {
  display: block;
  margin-top: 4px;
  color: rgba(16, 40, 61, .72);
  font-family: var(--sf-font-body);
  font-size: .88rem;
  line-height: 1.35;
}

.drawer-arrow {
  color: var(--sf-gold);
  font-size: 1rem;
  transition: transform .18s ease;
}

.drawer-link:hover .drawer-arrow {
  transform: translate(2px, -2px);
}

.drawer-mobile-only {
  display: none !important;
}

.drawer-support {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  margin-top: 24px;
  padding: 23px 24px;
  background: var(--sf-navy);
  color: rgba(255,255,255,.82);
  font-family: var(--sf-font-body);
}

.drawer-support span:first-child {
  display: block;
  margin-bottom: 5px;
  color: var(--sf-gold-soft);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.drawer-support p {
  margin: 0;
  font-size: .86rem;
  line-height: 1.38;
}

.drawer-support > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: .65rem .8rem;
  border: 1px solid var(--sf-gold);
  color: var(--sf-white) !important;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.mobile-menu-contact {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(177, 138, 74, .28);
}

.mobile-menu-contact p {
  margin: 0;
  color: rgba(16, 40, 61, .72);
  font-family: var(--sf-font-body);
  font-size: .9rem;
  line-height: 1.45;
}

.mobile-menu-contact strong {
  color: var(--sf-gold);
  font-size: .67rem;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.mobile-menu-contact a {
  color: var(--sf-navy) !important;
  font-weight: 600;
  text-decoration: none;
}

.mobile-menu {
  position: static !important;
}

.mobile-menu summary::-webkit-details-marker {
  display: none;
}

.mobile-menu[open] nav {
  position: fixed !important;
  top: var(--sf-header-height) !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 900 !important;
  width: 100% !important;
  max-width: none !important;
  padding: 30px max(24px, calc((100vw - 1140px) / 2)) !important;
  overflow-y: auto;
  background: var(--sf-ivory) !important;
  border: 0 !important;
  border-top: 1px solid rgba(177, 138, 74, .28) !important;
  box-shadow: 0 24px 60px rgba(16, 40, 61, .14) !important;
}

.mobile-menu[open] nav a {
  max-width: 520px;
  padding: 13px 0 !important;
}

@media (min-width: 783px) {
  body.admin-bar .site-header {
    top: 32px !important;
  }

  body.admin-bar .mobile-menu-layer:not([hidden]),
  body.admin-bar .mobile-menu[open] nav {
    top: calc(var(--sf-header-height) + 32px) !important;
    height: calc(100dvh - var(--sf-header-height) - 32px) !important;
  }
}

@media (min-width: 601px) and (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px !important;
  }

  body.admin-bar .mobile-menu-layer:not([hidden]),
  body.admin-bar .mobile-menu[open] nav {
    top: calc(var(--sf-header-height) + 46px) !important;
    height: calc(100dvh - var(--sf-header-height) - 46px) !important;
  }
}

@media (max-width: 980px) {
  .desktop-nav {
    display: none !important;
  }

  .menu-toggle {
    display: grid !important;
    place-items: center;
    width: 46px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--sf-navy);
    background: var(--sf-ivory);
    color: var(--sf-navy);
    cursor: pointer;
  }

  .header-inner {
    gap: 18px !important;
  }

  .home .hero-grid {
    grid-template-columns: 1fr !important;
  }

  .drawer-mobile-only {
    display: grid !important;
  }
}

@media (max-width: 720px) {
  :root {
    --sf-header-height: 90px;
  }

  .header-inner {
    gap: 10px !important;
    padding-top: 6px !important;
    padding-bottom: 4px !important;
  }

  .brand {
    max-width: calc(100vw - 82px) !important;
  }

  .site-header .brand-logo {
    width: 220px !important;
    height: 80px !important;
  }

  .home .hero {
    padding-top: 48px !important;
    padding-bottom: 72px !important;
  }

  .home .hero h1 {
    font-size: clamp(2.35rem, 11vw, 3.1rem) !important;
    line-height: 1 !important;
  }

  .home .hero-visual {
    min-height: clamp(340px, 105vw, 430px) !important;
  }

  .site-logo {
    width: min(220px, calc(100vw - 94px)) !important;
  }

  .mobile-nav-panel {
    width: 100% !important;
    padding: 28px 22px !important;
    border-left: 0 !important;
  }

  .mobile-menu-heading {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .drawer-link {
    grid-template-columns: 30px minmax(0, 1fr) 20px !important;
    padding: 14px 2px !important;
  }

  .drawer-copy strong {
    font-size: 1.16rem;
  }

  .drawer-support,
  .mobile-menu-contact {
    grid-template-columns: 1fr;
  }

  .drawer-support > a {
    justify-content: center;
    width: 100%;
  }

  .mobile-menu-backdrop {
    display: none !important;
  }

  .mobile-menu[open] nav {
    padding: 24px 20px !important;
  }
}

@media (max-width: 390px) {
  .site-header .brand-logo {
    width: 198px !important;
    height: 74px !important;
  }

  .site-logo {
    width: min(198px, calc(100vw - 88px)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav-panel {
    transition: none !important;
  }
}