:root {
  --navy: #13284b;
  --gold: #b8955a;
  --cream: #f8f6f0;
  --sand: #efe9dc;
  --ink: #2b2b2b;
  --muted: #5d6168;
  --line: #e3dccb;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 18px/1.6 Georgia, "Times New Roman", serif;
}

.hero { max-width: 544px; margin: 0 auto; padding: 40px 24px 0; }
.hero img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 2px 14px rgba(19, 40, 75, .14);
}

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }

.eyebrow {
  color: var(--gold);
  font: 600 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .28em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 14px;
}

.rule { width: 56px; height: 2px; background: var(--gold); margin: 0 auto 28px; border: 0; }

.mission { max-width: 1040px; margin: 0 auto; text-align: center; padding: 56px 24px 40px; border-bottom: 1px solid var(--line); }
.mission .statement {
  font-style: italic;
  font-size: 26px;
  line-height: 1.45;
  color: var(--navy);
  max-width: 820px;
  margin: 0 auto;
}

section { padding: 56px 0; }

h1, h2 { color: var(--navy); font-size: 30px; text-align: center; margin: 0 0 12px; font-weight: 600; }

.about p { max-width: 760px; margin: 0 auto 18px; }

.work { background: var(--sand); }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 8px; }
.card { background: #fff; border-top: 4px solid var(--gold); padding: 26px 28px; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); }
.card h3 { margin: 0 0 8px; color: var(--navy); font-size: 21px; }
.card p { margin: 0; color: var(--muted); font-size: 17px; }

.members ul { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.members li { background: #fff; border: 1px solid var(--line); text-align: center; padding: 22px 12px; }
.members .county { display: block; color: var(--navy); font-size: 20px; font-weight: 600; }
.members .org { display: block; color: var(--muted); font-size: 14px; line-height: 1.35; margin-top: 4px; }

.contact { text-align: center; background: var(--navy); color: #fff; }
.contact h2 { color: #fff; }
.contact p { margin: 0 auto 6px; max-width: 640px; }
.contact a { color: #e6c98f; }

footer { padding: 32px 0 40px; text-align: center; }
footer .notice { color: var(--muted); font-size: 13px; line-height: 1.5; max-width: 900px; margin: 0 auto; }

@media (max-width: 760px) {
  body { font-size: 17px; }
  .hero { padding: 16px 16px 0; }
  .wrap { padding: 0 16px; }
  .mission { padding: 40px 16px 32px; }
  .mission .statement { font-size: 21px; }
  section { padding: 44px 0; }
  .grid { grid-template-columns: 1fr; }
  .members ul { grid-template-columns: 1fr 1fr; }
}