/* =============================================================
   DuPage Sheriff's FOP Lodge 109 — Editorial Heritage
   Palette : slate ink + warm parchment + forest accent + bronze
   Type    : Fraunces (display serif) + Source Sans 3 (body)
   Visual identity intentionally distinct from sibling lodge sites.
   ============================================================= */

:root {
  --ink-950: #131B2C;
  --ink-900: #1E2A3F;
  --ink-800: #2A364D;
  --ink-700: #3A465E;
  --ink-600: #5C6470;
  --ink-500: #7C8492;

  --parchment:    #F8F2E4;     /* page background */
  --parchment-2:  #F1E9D5;     /* section alt */
  --paper:        #FFFFFF;
  --paper-tint:   #FDFAF1;

  --forest-700:   #2F4538;
  --forest-600:   #3D5947;     /* DuPage county nod */
  --forest-500:   #587A66;

  --bronze-700:   #8C6629;
  --bronze-600:   #A87C3F;     /* primary accent metal — bronze, NOT yellow gold */
  --bronze-500:   #C99B58;
  --bronze-200:   #E8D5A6;

  --crimson:      #9F2331;     /* used very sparingly */

  --border:       #DCD0B5;
  --border-2:     #ECE3CB;
  --rule:         #C8BC9D;     /* hairline rule */

  --shadow-sm:    0 1px 2px rgba(19,27,44,.06);
  --shadow-md:    0 8px 24px -10px rgba(19,27,44,.18);
  --shadow-lg:    0 30px 70px -22px rgba(19,27,44,.28);

  --radius:       2px;          /* sharp corners — editorial */
  --radius-card:  4px;
  --max-w:        1180px;
  --reading-w:    720px;
  --header-h:     78px;

  --t-fast:       .18s ease;
  --t-med:        .28s cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-800);
  background: var(--parchment);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Subtle paper grain — characteristic of the editorial design */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .35;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .12  0 0 0 0 .14  0 0 0 0 .18  0 0 0 .035 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

main, header, footer, section { position: relative; z-index: 1; }

img, svg { max-width: 100%; display: block; height: auto; }

a {
  color: var(--ink-900);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size var(--t-fast), color var(--t-fast);
}
a:hover { background-size: 100% 1px; color: var(--bronze-700); }
a:focus-visible {
  outline: 2px solid var(--bronze-600);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ---------- Typography ----------- */

h1, h2, h3, h4 {
  font-family: 'Fraunces', 'Source Serif 4', Georgia, 'Times New Roman', serif;
  color: var(--ink-900);
  font-weight: 600;
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0;
  margin: 0 0 .55em;
  line-height: 1.1;
  letter-spacing: -.012em;
}

h1 {
  font-size: clamp(2.6rem, 4vw + 1.4rem, 4.6rem);
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1;
  letter-spacing: -.022em;
}
h2 { font-size: clamp(1.85rem, 2vw + 1rem, 2.7rem); font-weight: 500; }
h3 { font-size: clamp(1.2rem, .6vw + 1rem, 1.45rem); font-weight: 600; }
h4 { font-size: 1.0rem; font-weight: 700; letter-spacing: .04em; }

p { margin: 0 0 1.1em; }

::selection { background: var(--bronze-200); color: var(--ink-950); }

/* ----------- Layout -------------------------------------- */

.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 28px;
}
.container--narrow { max-width: 860px; }
.container--reading { max-width: var(--reading-w); }

.section { padding: clamp(64px, 8vw, 120px) 0; }
.section--tight { padding: clamp(40px, 5vw, 76px) 0; }
.section--cream { background: var(--parchment-2); }
.section--paper { background: var(--paper-tint); }
.section--ink {
  background: var(--ink-900);
  color: rgba(255,255,255,.88);
}
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: #fff; }
.section--ink a { color: var(--bronze-500); }
.section--ink a:hover { color: var(--bronze-200); }

/* Section header — distinctive editorial style with numbered markers */

.section__head {
  margin-bottom: clamp(36px, 4vw, 56px);
  position: relative;
}
.section__head--center { text-align: center; }
.section__head--center .section__rule { margin-left: auto; margin-right: auto; }

.section__num {
  font-family: 'Fraunces', serif;
  font-feature-settings: "tnum";
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--bronze-600);
  letter-spacing: .12em;
  display: inline-block;
  margin-bottom: 14px;
}
.section__num::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 1px;
  background: var(--bronze-600);
  vertical-align: middle;
  margin-right: 12px;
  transform: translateY(-2px);
}

.section__eyebrow {
  display: inline-block;
  font: 600 11px/1.4 'Source Sans 3', sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--forest-600);
  margin-bottom: 14px;
}

.section__rule {
  height: 1px;
  border: 0;
  background: linear-gradient(to right, var(--rule) 0, var(--rule) 60px, transparent 60px);
  margin: 28px 0 24px;
  width: 100%;
}

.section__lede {
  font-size: 1.18rem;
  line-height: 1.65;
  color: var(--ink-700);
  max-width: 60ch;
}

/* Skip link */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip:focus {
  left: 16px;
  top: 16px;
  background: var(--ink-900);
  color: #fff;
  padding: 10px 16px;
  z-index: 9999;
}

/* ----------- Topbar (thin info strip) -------------------- */

.topbar {
  background: var(--ink-950);
  color: #FFFFFF;
  font-size: 13.5px;
  border-bottom: 1px solid rgba(168,124,63,.35);
}
.topbar__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 10px 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
  justify-content: flex-end;
}
.topbar a {
  color: var(--bronze-500);
  font-weight: 600;
  background-image: linear-gradient(var(--bronze-500), var(--bronze-500));
  background-size: 100% 1px;     /* permanent underline so it reads as a link */
}
.topbar a:hover { color: var(--bronze-200); background-image: linear-gradient(var(--bronze-200), var(--bronze-200)); }
.topbar span { display: inline-flex; gap: 8px; align-items: center; }
.topbar svg { color: var(--bronze-500); flex-shrink: 0; }

/* ----------- Header / Nav -------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--parchment);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--t-med), border-color var(--t-med), background var(--t-med);
}
.site-header.is-scrolled {
  background: rgba(248,242,228,.95);
  backdrop-filter: saturate(180%) blur(10px);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.nav {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 28px;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: none !important;
}
.nav__brand:hover { background: none; }
.nav__brand-mark {
  width: 52px; height: 52px;
  /* The actual lodge badge is already a complete circular medallion;
     no extra ring/padding/background — show it as designed. */
}
.nav__brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.nav__brand-text > span {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.18rem;
  color: var(--ink-900);
  letter-spacing: -.005em;
}
.nav__brand-text > small {
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--forest-600);
  font-weight: 600;
  margin-top: 3px;
}

.nav__links {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0; padding: 0;
}
.nav__links a {
  display: inline-block;
  padding: 8px 14px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-800);
  background: none !important;
  position: relative;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 1.5px;
  background: var(--bronze-600);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-med);
}
.nav__links a:hover::after,
.nav__links a.is-active::after { transform: scaleX(1); }
.nav__links a.is-active { color: var(--ink-950); font-weight: 600; }

.nav__toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  padding: 9px 11px;
  cursor: pointer;
  border-radius: 2px;
}
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  display: block;
  width: 22px;
  height: 1.8px;
  background: var(--ink-900);
  transition: transform var(--t-med), opacity var(--t-fast);
  position: relative;
}
.nav__toggle span::before { content: ""; position: absolute; top: -7px; left: 0; }
.nav__toggle span::after  { content: ""; position: absolute; top:  7px; left: 0; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after  { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1080px) {
  .nav__toggle { display: block; }
  .nav__links {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    background: var(--parchment);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    gap: 0;
    padding: 12px 20px 24px;
    box-shadow: var(--shadow-md);
    /* Hidden off-screen until toggle. Use 100vh shift (guaranteed > any menu
       height) instead of translateY(-110%), and clip away any overflow that
       might otherwise overlap the topbar at small heights. */
    transform: translateY(-100vh);
    visibility: hidden;
    transition: transform var(--t-med), visibility 0s var(--t-med);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .nav__links.is-open {
    transform: translateY(0);
    visibility: visible;
    transition: transform var(--t-med), visibility 0s 0s;
  }
  .nav__links a {
    display: block;
    padding: 13px 8px;
    border-bottom: 1px solid var(--border-2);
    font-size: 16px;
  }
  .nav__links a::after { display: none; }
  .topbar__inner {
    justify-content: center;
    gap: 14px;
    font-size: 14px;
    line-height: 1.5;
    padding: 12px 20px;
    text-align: center;
  }
}
@media (max-width: 480px) {
  /* Stack each line on phones so 13–14px characters never get squeezed. */
  .topbar__inner {
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
  }
}

/* ----------- Buttons ------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  font: 600 13px/1 'Source Sans 3', sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--ink-900);
  color: #fff;
  border: 1px solid var(--ink-900);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  background-image: none !important;
}
.btn:hover {
  background: var(--ink-950);
  border-color: var(--ink-950);
  color: #fff;
  transform: translateY(-1px);
}
.btn--bronze {
  background: var(--bronze-600);
  border-color: var(--bronze-600);
  color: #fff;
}
.btn--bronze:hover {
  background: var(--bronze-700);
  border-color: var(--bronze-700);
  color: #fff;
}
.btn--ghost {
  background: transparent;
  color: var(--ink-900);
  border: 1px solid var(--ink-900);
}
.btn--ghost:hover {
  background: var(--ink-900);
  color: #fff;
}
.btn--outline {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.55);
}
.btn--outline:hover {
  background: rgba(255,255,255,.1);
  border-color: #fff;
  color: #fff;
}
.btn--lg { padding: 16px 32px; font-size: 13.5px; }
.btn--sm { padding: 8px 14px; font-size: 11.5px; letter-spacing: .1em; }

/* ----------- Flag banner strip --------------------------- */
/*
  Decorative wide banner above the hero on key pages.
  Photo: stars + stripes macro (Tim Mossholder via Unsplash, Unsplash License).
  Stored locally at /images/flag-banner.jpg.
*/
.flag-banner {
  position: relative;
  height: clamp(140px, 22vw, 240px);
  background: var(--ink-900) url('/images/flag-banner.jpg') center / cover no-repeat;
  border-top: 4px double var(--bronze-600);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
/* Bottom fade into parchment hero below */
.flag-banner::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 30%;
  background: linear-gradient(to bottom, transparent, var(--parchment));
  pointer-events: none;
}
/* Subtle vignette to deepen contrast at the edges */
.flag-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(19,27,44,.18) 100%);
  pointer-events: none;
}

/* ----------- Hero (asymmetric editorial split) ----------- */

.hero {
  position: relative;
  padding: clamp(60px, 10vw, 130px) 0 clamp(80px, 11vw, 150px);
  background: var(--parchment);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.hero::after {
  /* Editorial corner accent */
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 38%;
  height: 100%;
  background: linear-gradient(135deg, transparent 50%, rgba(168,124,63,.08) 50%);
  pointer-events: none;
}
.hero__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
  position: relative;
  z-index: 2;
}
.hero__eyebrow {
  display: inline-block;
  font: 600 11px/1 'Source Sans 3', sans-serif;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--bronze-600);
  margin-bottom: 22px;
  padding-left: 38px;
  position: relative;
}
.hero__eyebrow::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 28px; height: 1px;
  background: var(--bronze-600);
}
.hero__title {
  margin: 0 0 24px;
  color: var(--ink-950);
}
.hero__lede {
  font-size: 1.22rem;
  line-height: 1.55;
  color: var(--ink-700);
  max-width: 52ch;
  margin-bottom: 32px;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.hero__meta {
  border-left: 2px solid var(--bronze-600);
  padding: 8px 0 8px 24px;
  display: grid;
  gap: 22px;
}
.hero__meta dt {
  font: 600 10.5px/1 'Source Sans 3', sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--forest-600);
  margin-bottom: 6px;
}
.hero__meta dd {
  margin: 0;
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  color: var(--ink-900);
  line-height: 1.45;
}
.hero__title--small { font-size: clamp(2rem, 3vw + 1rem, 3rem); }

@media (max-width: 880px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__meta { border-left: 0; border-top: 2px solid var(--bronze-600); padding: 18px 0 0; }
}

/* ----------- Drop cap (editorial flourish) --------------- */

.dropcap::first-letter {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 1;
  font-size: 4.4em;
  line-height: 0.85;
  float: left;
  margin: 6px 12px -2px 0;
  color: var(--bronze-600);
}

/* ----------- Editorial cards / mission grid -------------- */

.colset {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 4vw, 56px);
}
.colset--two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 880px) { .colset, .colset--two { grid-template-columns: 1fr; } }

.colset__item {
  border-top: 2px solid var(--ink-900);
  padding-top: 22px;
}
.colset__item h3 {
  margin: 0 0 14px;
}
.colset__item .num {
  font: 600 13px/1 'Fraunces', serif;
  font-feature-settings: "tnum";
  color: var(--bronze-600);
  letter-spacing: .15em;
  display: block;
  margin-bottom: 10px;
}
.colset__item p {
  color: var(--ink-700);
  margin: 0;
}

/* ----------- Featured stats / facts ---------------------- */

.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.facts__item {
  padding: 28px 24px;
  border-right: 1px solid var(--rule);
  text-align: center;
}
.facts__item:last-child { border-right: 0; }
.facts__num {
  display: block;
  font-family: 'Fraunces', serif;
  font-size: clamp(2.2rem, 3vw + 1rem, 3.4rem);
  font-weight: 500;
  color: var(--ink-950);
  line-height: 1;
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
.facts__lbl {
  display: block;
  font: 600 10.5px/1.4 'Source Sans 3', sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--forest-600);
  margin-top: 12px;
}
@media (max-width: 720px) {
  .facts { grid-template-columns: repeat(2, 1fr); }
  .facts__item:nth-child(2) { border-right: 0; }
  .facts__item:nth-child(1), .facts__item:nth-child(2) { border-bottom: 1px solid var(--rule); }
}

/* ----------- Two-column editorial split (image+copy) ----- */

.split {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
.split--reverse { grid-template-columns: 1.15fr 1fr; }
.split--reverse .split__visual { order: 2; }
@media (max-width: 880px) { .split, .split--reverse { grid-template-columns: 1fr; } }

.split__visual {
  position: relative;
  aspect-ratio: 4 / 5;
  background: linear-gradient(160deg, var(--ink-900), var(--ink-700));
  border: 1px solid var(--ink-800);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.split__visual::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(201,155,88,.4);
  pointer-events: none;
}
.split__crest {
  text-align: center;
  color: #fff;
  padding: 24px;
}
.split__crest .num {
  font-family: 'Fraunces', serif;
  font-size: clamp(5rem, 10vw, 8rem);
  font-weight: 500;
  color: var(--bronze-500);
  line-height: 0.95;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1;
}
.split__crest .lbl {
  display: block;
  font: 600 11px/1.4 'Source Sans 3', sans-serif;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  margin-top: 18px;
}
.split__crest .star {
  margin: 0 auto 16px;
  display: block;
  color: var(--bronze-500);
  width: 64px; height: 64px;
}

.split__copy h2 { margin-top: 0; }

/* ----------- Charity / cause cards ----------------------- */

.causes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 880px) { .causes { grid-template-columns: 1fr; } }
.cause {
  background: var(--paper);
  border: 1px solid var(--border);
  padding: 30px 28px;
  position: relative;
  transition: transform var(--t-med), box-shadow var(--t-med);
}
.cause::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 36px; height: 3px;
  background: var(--bronze-600);
}
.cause:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.cause__icon {
  width: 40px; height: 40px;
  color: var(--forest-600);
  margin-bottom: 18px;
}
.cause__icon svg { width: 100%; height: 100%; }
.cause h3 { margin: 0 0 10px; font-size: 1.18rem; }
.cause p { color: var(--ink-700); margin: 0; font-size: 0.97rem; }

/* ----------- Pull quote --------------------------------- */

.pullquote {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.5rem, 2vw + 1rem, 2.1rem);
  font-weight: 400;
  line-height: 1.35;
  color: var(--ink-900);
  border-left: 3px solid var(--bronze-600);
  padding: 14px 0 14px 28px;
  margin: 36px 0;
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 80;
}
.pullquote cite {
  display: block;
  margin-top: 14px;
  font-family: 'Source Sans 3', sans-serif;
  font-style: normal;
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--forest-600);
}

/* ----------- Article / prose styling -------------------- */

.prose { font-size: 1.05rem; line-height: 1.78; }
.prose p { color: var(--ink-800); }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; font-size: 1.25rem; }
.prose ul, .prose ol { padding-left: 1.4em; margin: 0 0 1.2em; }
.prose li { margin-bottom: .35em; }
.prose a { background-image: linear-gradient(var(--bronze-600), var(--bronze-600)); background-size: 100% 1px; }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2.4em 0; }

/* ----------- CTA strip ---------------------------------- */

.cta-strip {
  background: var(--ink-950);
  color: rgba(255,255,255,.92);
  padding: clamp(56px, 7vw, 88px) 0;
  border-top: 4px double var(--bronze-600);
  position: relative;
}
.cta-strip__inner {
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 36px;
  align-items: center;
}
.cta-strip h2 { color: #fff; margin: 0 0 14px; font-size: clamp(1.6rem, 2vw + 1rem, 2.2rem); }
.cta-strip p { margin: 0; color: rgba(255,255,255,.78); font-size: 1.05rem; }
.cta-strip__buttons { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 720px) {
  .cta-strip__inner { grid-template-columns: 1fr; }
}

/* ----------- Forms (contact, dues etc) ------------------ */

.form-card {
  background: var(--paper);
  border: 1px solid var(--border);
  padding: clamp(28px, 4vw, 44px);
  max-width: 640px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.form-grid--single { grid-template-columns: 1fr; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }

.field { display: block; }
.field label {
  display: block;
  font: 600 11px/1.4 'Source Sans 3', sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-700);
  margin-bottom: 8px;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  font: 400 16px/1.5 'Source Sans 3', sans-serif;
  color: var(--ink-900);
  background: var(--paper-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: 0;
  border-color: var(--bronze-600);
  background: var(--paper);
  box-shadow: 0 0 0 3px rgba(168,124,63,.18);
}
.field--error input, .field--error textarea {
  border-color: var(--crimson);
  background: #FBF1F1;
}
.field__error {
  margin-top: 6px;
  font-size: 13px;
  color: var(--crimson);
  font-weight: 600;
}
.field__hint {
  margin-top: 6px;
  font-size: 13px;
  color: var(--ink-600);
}
/* Hide honeypot */
.field--hp { position: absolute; left: -9999px; visibility: hidden; }

.form-actions { margin-top: 22px; display: flex; gap: 12px; align-items: center; }
.form-msg {
  margin-top: 16px;
  padding: 12px 16px;
  border-left: 3px solid var(--crimson);
  background: #FBF1F1;
  color: var(--crimson);
  font-size: 14.5px;
  font-weight: 500;
}
.form-msg--ok {
  border-color: var(--forest-600);
  background: #EEF3EB;
  color: var(--forest-700);
}
.form-success {
  text-align: center;
  padding: 36px 20px;
}
.form-success svg {
  width: 56px; height: 56px;
  color: var(--forest-600);
  margin: 0 auto 18px;
  stroke-width: 1.5;
}
.form-success h3 { margin: 0 0 8px; }
.form-success p { color: var(--ink-700); margin: 0; }

/* ----------- Definition list / info rows ---------------- */

.deflist {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 14px 32px;
  margin: 0 0 28px;
  border-top: 1px solid var(--rule);
}
.deflist > dt, .deflist > dd {
  border-bottom: 1px solid var(--rule);
  padding: 18px 0;
  margin: 0;
}
.deflist > dt {
  font: 600 11.5px/1.45 'Source Sans 3', sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--forest-600);
}
.deflist > dd {
  font-family: 'Fraunces', serif;
  font-size: 1.1rem;
  color: var(--ink-900);
}
@media (max-width: 600px) {
  .deflist { grid-template-columns: 1fr; gap: 0; }
  .deflist > dt { padding-bottom: 0; border-bottom: 0; }
  .deflist > dd { padding-top: 6px; }
}

/* ----------- Event cards (date plate + body) ------------ */

.event-list {
  display: grid;
  gap: 24px;
}
.event-card {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 28px;
  align-items: stretch;
  background: var(--paper);
  border: 1px solid var(--border);
  padding: 24px;
  transition: box-shadow var(--t-med), transform var(--t-med);
}
.event-card:hover { box-shadow: var(--shadow-md); }

.event-plate {
  background: var(--ink-900);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 8px;
  position: relative;
  border: 1px solid var(--ink-800);
}
.event-plate::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(201,155,88,.45);
}
.event-plate__month {
  font: 700 11px/1 'Source Sans 3', sans-serif;
  letter-spacing: .2em;
  color: var(--bronze-500);
}
.event-plate__day {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 3rem;
  line-height: 1;
  margin: 6px 0 4px;
  color: #fff;
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
.event-plate__weekday {
  font: 600 10px/1 'Source Sans 3', sans-serif;
  letter-spacing: .22em;
  color: rgba(255,255,255,.7);
}
.event-plate__bridge {
  font-size: 11.5px;
  margin-top: 8px;
  color: rgba(255,255,255,.62);
}

.event-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.event-card__when {
  font: 600 11px/1.4 'Source Sans 3', sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--forest-600);
  margin: 0 0 4px;
}
.event-card__title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.4rem;
  margin: 0;
  color: var(--ink-900);
}
.event-card__desc { color: var(--ink-700); margin: 4px 0 0; }
.event-card__flyer {
  margin-top: 14px;
  display: inline-block;
  background-image: none !important;
}
.event-card__flyer img {
  max-width: 320px;
  border: 1px solid var(--border);
}
@media (max-width: 600px) {
  .event-card { grid-template-columns: 100px 1fr; gap: 18px; padding: 18px; }
  .event-plate__day { font-size: 2.4rem; }
}

/* ----------- Past events / gallery ---------------------- */

.past-event {
  margin-bottom: 60px;
}
.past-event__head {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 18px;
  margin-bottom: 28px;
}
.past-event__head .when {
  font: 600 11px/1 'Source Sans 3', sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--forest-600);
  display: block;
  margin-bottom: 10px;
}
.past-event__head h3 {
  margin: 0;
  font-family: 'Fraunces', serif;
  font-size: clamp(1.5rem, 2vw + 1rem, 2rem);
  font-weight: 500;
}

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}
.gallery__item {
  display: block;
  background: var(--paper);
  border: 1px solid var(--border);
  padding: 8px;
  transition: transform var(--t-med);
  background-image: none !important;
}
.gallery__item:hover { transform: scale(1.02); }
.gallery__item img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}
.gallery__caption {
  display: block;
  font-size: 13px;
  color: var(--ink-700);
  padding: 10px 4px 4px;
  font-style: italic;
}
.gallery__loading,
.gallery__empty {
  color: var(--ink-600);
  font-style: italic;
  padding: 16px 0;
}

/* ----------- Board roster ------------------------------- */

.board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.board--narrow { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin: 0 auto; }
@media (max-width: 880px) { .board, .board--narrow { grid-template-columns: 1fr; max-width: none; } }
.board__card {
  background: var(--paper);
  border: 1px solid var(--border);
  padding: 32px 24px 26px;
  text-align: center;
  position: relative;
}
.board__shield {
  width: 56px; height: 56px;
  margin: 0 auto 16px;
  color: var(--bronze-600);
  display: grid; place-items: center;
  background: var(--parchment-2);
  border-radius: 50%;
  border: 1px solid var(--border);
}
.board__shield svg { width: 30px; height: 30px; }
.board__name {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.18rem;
  margin: 0 0 4px;
  color: var(--ink-900);
}
.board__title {
  font: 600 11px/1.4 'Source Sans 3', sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--forest-600);
  margin: 0 0 8px;
}
.board__email { font-size: 14px; margin: 4px 0 0; color: var(--ink-700); }

/* ----------- Empty state -------------------------------- */

.empty-state {
  background: var(--paper);
  border: 1px dashed var(--border);
  padding: 32px 24px;
  text-align: center;
  color: var(--ink-600);
}
.empty-state--err {
  border-color: var(--crimson);
  color: var(--crimson);
  background: #FBF1F1;
}

/* ----------- Reveal animation --------------------------- */

.js-ready .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
.js-ready .reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js-ready .reveal { opacity: 1; transform: none; transition: none; }
}

/* ----------- Footer ------------------------------------- */

.site-footer {
  background: var(--ink-950);
  color: rgba(255,255,255,.78);
  padding: 64px 0 0;
  border-top: 4px double var(--bronze-600);
}
.site-footer h4 {
  color: var(--bronze-500);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 18px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
}
.footer-grid p { color: rgba(255,255,255,.65); font-size: 0.95rem; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 9px; font-size: 0.95rem; }
.footer-grid a {
  color: rgba(255,255,255,.78);
  background-image: linear-gradient(var(--bronze-500), var(--bronze-500));
}
.footer-grid a:hover { color: var(--bronze-500); }

.footer-brand {
  display: flex; align-items: center; gap: 14px; margin-bottom: 16px;
}
.footer-brand img {
  width: 52px; height: 52px;
  /* Lodge badge stands on its own; no extra frame. */
}
.footer-brand strong {
  color: #fff;
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.1rem;
}
.footer-brand small {
  display: block;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bronze-500);
  margin-top: 3px;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 22px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: space-between;
  font-size: 12.5px;
  color: rgba(255,255,255,.55);
  letter-spacing: .04em;
}

@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ---- Exioite credit ---- */
.exioite-credit {
  background: var(--ink-950);
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 14px 0 18px;
  text-align: center;
}
.exioite-credit__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.5);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  background-image: none !important;
}
.exioite-credit__link:hover { color: var(--bronze-500); }
.exioite-credit__logo { height: 22px; width: auto; opacity: .85; }
.exioite-credit__sep { color: rgba(255,255,255,.25); }

/* ----------- Announcement banner section ---------------- */

.announce {
  background: var(--paper);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: clamp(36px, 4vw, 56px) 0;
}
.announce__inner {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 36px;
  align-items: center;
}
.announce__plate {
  background: var(--bronze-600);
  color: #fff;
  text-align: center;
  padding: 22px 14px;
  border: 1px solid var(--bronze-700);
}
.announce__plate-eyebrow {
  font: 700 10.5px/1 'Source Sans 3', sans-serif;
  letter-spacing: .26em;
  text-transform: uppercase;
  margin: 0 0 10px;
  color: rgba(255,255,255,.85);
}
.announce__title {
  font-family: 'Fraunces', serif;
  font-size: 1.55rem;
  font-weight: 500;
  margin: 0 0 10px;
  color: var(--ink-950);
}
.announce__body { margin: 0; color: var(--ink-700); }
.announce__photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 22px;
}
.announce__photos img {
  width: 100%; height: 200px; object-fit: cover;
  border: 1px solid var(--border);
}
@media (max-width: 720px) {
  .announce__inner { grid-template-columns: 1fr; }
}