:root {
  --navy: #092447;
  --navy-deep: #061a36;
  --ink: #102947;
  --muted: #526173;
  --paper: #faf7f0;
  --white: #fffdf9;
  --stone: #e9e2d5;
  --gold: #bb8a30;
  --gold-light: #e5c580;
  --line: rgba(9, 36, 71, 0.17);
}

* { box-sizing: border-box; }

html {
  background: var(--navy-deep);
  scroll-behavior: smooth;
  overscroll-behavior-y: none;
}

body {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  flex-direction: column;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: "Inter", Arial, sans-serif;
  line-height: 1.6;
  overscroll-behavior-y: none;
}

main { flex: 1 0 auto; }
a { color: inherit; text-decoration: none; }
img { display: block; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: "Libre Baskerville", Georgia, serif; font-weight: 400; }
h2 { font-size: clamp(2.1rem, 3.5vw, 3.7rem); line-height: 1.2; }
h3 { font-size: 1.1rem; line-height: 1.4; }
section { padding: clamp(76px, 8vw, 122px) clamp(20px, 6vw, 96px); scroll-margin-top: 96px; }

.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  min-height: 88px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px clamp(20px, 5vw, 76px);
  border-bottom: 1px solid var(--line);
  background: rgba(250, 247, 240, 0.97);
  color: var(--navy);
}

.brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 12px; }
.brand-logo { width: 54px; height: 54px; object-fit: cover; }
.brand strong, .brand small { display: block; }
.brand strong { font-family: "Libre Baskerville", Georgia, serif; font-size: 0.96rem; line-height: 1.15; }
.brand small { margin-top: 2px; color: var(--muted); font-size: 0.65rem; }

.main-nav { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 1.7vw, 28px); font-size: 0.78rem; font-weight: 700; }
.main-nav a { white-space: nowrap; }
.main-nav a:hover, .main-nav a:focus-visible { color: #9a6c1f; }
.menu-toggle { display: none; width: 44px; height: 44px; flex: 0 0 44px; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--line); background: transparent; color: var(--navy); cursor: pointer; }
.menu-toggle:hover { background: var(--stone); }
.menu-toggle svg { width: 22px; height: 22px; }
.menu-toggle .icon-close { display: none; }
.header-action { flex: 0 0 auto; padding: 10px 17px; border: 1px solid var(--gold); color: var(--navy); font-size: 0.77rem; font-weight: 800; }
.header-action:hover { background: var(--gold); color: var(--white); }

.hero {
  position: relative;
  display: flex;
  min-height: min(760px, 82vh);
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  padding-top: 92px;
  padding-bottom: 110px;
  background: #e8dcc7;
}
.hero-image, .hero-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-image { z-index: -2; object-fit: cover; object-position: center; }
.hero-overlay { z-index: -1; background: linear-gradient(90deg, rgba(250, 247, 240, 0.94) 0%, rgba(250, 247, 240, 0.82) 32%, rgba(250, 247, 240, 0.27) 64%, rgba(250, 247, 240, 0.03) 100%); }
.hero-content { width: min(690px, 100%); }
.eyebrow, .section-kicker { margin-bottom: 20px; color: #946514; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.hero h1 { margin-bottom: 13px; color: var(--navy); font-size: 4.5rem; line-height: 1.05; white-space: nowrap; }
.hero-subtitle { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--gold); color: var(--navy); font-family: "Libre Baskerville", Georgia, serif; font-size: clamp(1rem, 1.65vw, 1.45rem); }
.hero-lede { max-width: 550px; color: #344657; font-size: clamp(1rem, 1.2vw, 1.16rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.button { display: inline-flex; min-height: 49px; align-items: center; justify-content: center; gap: 18px; padding: 12px 20px; border: 1px solid var(--navy); font-size: 0.8rem; font-weight: 800; }
.button span { font-size: 1.15rem; line-height: 1; }
.button.primary { background: var(--navy); color: var(--white); }
.button.primary:hover { background: #17416c; }
.button.secondary { background: rgba(250, 247, 240, 0.76); color: var(--navy); }
.button.secondary:hover { background: var(--white); }

.intro-section { background: var(--paper); }
.intro-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.8fr); gap: clamp(40px, 7vw, 110px); align-items: start; }
.intro-grid h2 { max-width: 710px; }
.copy-stack { padding-top: 8px; color: var(--muted); font-size: 1.02rem; }
.copy-stack p + p { margin-top: 22px; }

.mission-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 410px); gap: clamp(32px, 7vw, 100px); align-items: end; background: var(--navy); color: var(--white); }
.mission-band h2 { max-width: 850px; color: var(--white); }
.mission-band .eyebrow { color: var(--gold-light); }
.mission-band p:not(.eyebrow) { color: #d4dce3; }

.focus-section { background: var(--white); }
.section-heading { max-width: 810px; margin-bottom: clamp(40px, 5vw, 68px); }
.section-heading > p:not(.section-kicker) { max-width: 670px; color: var(--muted); }
.focus-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.focus-grid article { min-height: 228px; padding: 26px 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.focus-grid span, .principles-grid span { display: block; margin-bottom: 38px; color: #9a6c1f; font-size: 0.8rem; font-weight: 800; }
.focus-grid h3, .principles-grid h3 { font-family: "Libre Baskerville", Georgia, serif; font-size: 1.15rem; font-weight: 400; }
.focus-grid p, .principles-grid p { color: var(--muted); font-size: 0.91rem; }

.principles-section { background: #eee9df; }
.principles-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.principles-grid article { min-height: 235px; padding: 27px 23px; border-bottom: 1px solid var(--line); }
.principles-grid article + article { border-left: 1px solid var(--line); }

.members-section { background: var(--paper); }
.members-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 20px; }
.member-card { min-width: 0; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.member-photo { width: 100%; aspect-ratio: 4 / 5; margin-bottom: 16px; overflow: hidden; background: var(--stone); }
.member-photo img { width: 100%; height: 100%; object-fit: cover; }
.member-card h3 { margin-bottom: 5px; font-size: 0.97rem; overflow-wrap: anywhere; }
.member-card p { color: var(--muted); }
.member-role { min-height: 2.5em; margin-bottom: 0; font-size: 0.78rem; }

.events-section { background: var(--white); }
.events-list { border-top: 1px solid var(--line); }
.event-item { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 34px; align-items: center; padding: 30px 0; border-bottom: 1px solid var(--line); }
.event-item time { display: flex; min-height: 95px; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--gold); color: var(--navy); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; }
.event-item time span { font-family: "Libre Baskerville", Georgia, serif; font-size: 2.3rem; font-weight: 400; line-height: 1.1; }
.event-status { display: block; margin-bottom: 8px; color: #946514; font-size: 0.69rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.event-item h3 { margin-bottom: 7px; font-family: "Libre Baskerville", Georgia, serif; font-size: clamp(1.25rem, 2vw, 1.7rem); font-weight: 400; }
.event-item p { margin-bottom: 0; color: var(--muted); font-size: 0.92rem; }

.anchor-target { display: block; position: relative; top: -88px; visibility: hidden; }
.contact-section { background: var(--navy); color: var(--white); }
.contact-section .eyebrow { color: var(--gold-light); }
.contact-section h2, .contact-section p { max-width: 790px; }
.contact-section p { color: #d4dce3; font-size: 1.02rem; }
.contact-section .button.primary { margin-top: 16px; border-color: var(--gold-light); background: transparent; color: var(--white); overflow-wrap: anywhere; }
.contact-section .button.primary:hover { background: var(--gold); color: var(--navy); }

.site-footer { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 30px clamp(20px, 6vw, 96px) calc(30px + env(safe-area-inset-bottom)); background: var(--navy-deep); color: #c6d1dd; font-size: 0.82rem; }
.site-footer strong { color: var(--white); font-family: "Libre Baskerville", Georgia, serif; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

@media (max-width: 1100px) {
  body { padding-top: 72px; }
  .site-header { position: fixed; right: 0; left: 0; height: 72px; min-height: 72px; flex-wrap: nowrap; gap: 12px; padding: 9px 24px; box-shadow: 0 2px 12px rgba(6, 26, 54, 0.08); }
  .menu-toggle { order: 3; display: inline-flex; }
  .menu-toggle[aria-expanded="true"] .icon-menu { display: none; }
  .menu-toggle[aria-expanded="true"] .icon-close { display: block; }
  .main-nav { position: absolute; top: 100%; right: 0; left: 0; display: none; width: auto; max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; margin: 0; padding: 8px 24px 18px; overflow-y: auto; border-bottom: 1px solid var(--line); background: var(--paper); box-shadow: 0 12px 24px rgba(6, 26, 54, 0.12); font-size: 0.88rem; }
  .menu-toggle[aria-expanded="true"] + .main-nav { display: flex; }
  .main-nav a { display: block; width: 100%; padding: 12px 6px; border-bottom: 1px solid var(--line); }
  .main-nav a:last-child { border-bottom: 0; }
  .header-action { order: 2; margin-left: auto; }
  .hero { min-height: 690px; }
  .members-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .principles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .principles-grid article:nth-child(3) { border-left: 0; }
}

@media (max-width: 760px) {
  .site-header { padding: 9px 18px; }
  .brand-logo { width: 44px; height: 44px; }
  .header-action { display: none; }
  .main-nav { padding-right: 18px; padding-left: 18px; }
  .hero { min-height: 690px; align-items: end; padding: 80px 20px 72px; }
  .hero-image { object-position: 68% center; }
  .hero-overlay { background: linear-gradient(0deg, rgba(250, 247, 240, 0.98) 0%, rgba(250, 247, 240, 0.86) 45%, rgba(250, 247, 240, 0.15) 100%); }
  .hero-content { max-width: 550px; }
  .hero h1 { font-size: clamp(2.45rem, 9vw, 4rem); white-space: normal; overflow-wrap: anywhere; }
  .hero-subtitle { max-width: 420px; }
  .intro-grid, .mission-band { grid-template-columns: 1fr; }
  .focus-grid, .members-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .principles-grid { grid-template-columns: 1fr; }
  .principles-grid article { min-height: auto; }
  .principles-grid article + article { border-left: 0; }
  .principles-grid span, .focus-grid span { margin-bottom: 22px; }
  .site-footer { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 480px) {
  section { padding: 70px 18px; }
  .hero { min-height: 675px; padding-bottom: 62px; }
  .hero h1 { font-size: 2.38rem; }
  .hero-actions { flex-direction: column; }
  .hero-actions .button { width: 100%; justify-content: space-between; }
  .focus-grid { grid-template-columns: 1fr; }
  .focus-grid article { min-height: auto; }
  .members-grid { gap: 25px 12px; }
  .member-card h3 { font-size: 0.84rem; }
  .member-role { font-size: 0.71rem; }
  .event-item { grid-template-columns: 72px minmax(0, 1fr); gap: 17px; }
  .event-item time { min-height: 74px; }
  .event-item time span { font-size: 1.7rem; }
  .contact-section .button { width: 100%; }
}

@media (max-width: 350px) {
  .hero h1 { font-size: 2rem; }
  .members-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}