:root {
  --slate: #4b5967;
  --ink: #333;
  --accent: #e39a52;
  --accent-ink: #fff;
  --footer: #4a4a4a;
  --paper: #fff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

a { color: #1f5f8b; }

/* Header: logo left, menu right; menu wraps under the logo on phones. */
.site-header {
  background: var(--slate);
  padding: 12px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
}
.site-header img { height: 52px; width: auto; display: block; }
.site-header nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.site-header nav a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.site-header nav a:hover, .site-header nav a[aria-current] { text-decoration: underline; }

.hero {
  height: 240px;
  background: center / cover no-repeat;
}
.hero-home { height: 300px; display: grid; place-items: center; }
.hero-home img { width: min(560px, 80%); height: auto; }
/* Page title over the banner photo, as on the Duda Governing Documents page. */
.hero-title { height: 370px; display: grid; place-items: center; align-content: center; padding: 0 16px; text-align: center; }
.hero-title h1 { color: #fff; font: 700 clamp(36px, 5vw, 75px)/1.2 Roboto, system-ui, sans-serif; margin: 0; }
.hero-title h1::after { content: ""; display: block; width: 65px; margin: 18px auto 0; border-top: 2px solid #d8720b; }

main { max-width: 820px; margin: 0 auto; padding: 32px 16px 48px; }
h1 { font-size: 28px; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 16px; }
h2 { font-size: 20px; letter-spacing: .04em; text-transform: uppercase; margin: 32px 0 8px; color: var(--slate); }
ul.plain { list-style: none; padding: 0; margin: 0; }

/* Orange document buttons, as on the old site. */
.buttons { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 24px 0; }
.buttons a {
  display: block;
  padding: 12px 16px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border-radius: 3px;
}
.buttons a:hover { filter: brightness(.92); }
/* Duda layout: a 960px column, buttons filling its left half, grey rules between groups. */
main.wide { max-width: 992px; padding-top: 25px; }
.buttons.stack { grid-template-columns: minmax(0, 476px); gap: 10px; margin: 0; }
.buttons.stack a {
  padding: 10px 12px;
  background: #e7a065;
  border-radius: 0;
  font: 700 16px/23px Roboto, system-ui, sans-serif;
  text-transform: uppercase;
}
hr { border: 0; border-top: 1px solid #808080; margin: 40px 0 44px; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 24px 0; }
.gallery img { width: 100%; height: auto; display: block; }

.map img { width: 100%; height: auto; }

.site-footer {
  background: var(--footer);
  color: #fff;
  padding: 32px 16px 16px;
}
.site-footer .cols { max-width: 820px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 24px 64px; align-items: flex-start; }
.site-footer h2 { color: #fff; margin: 0 0 8px; font-size: 16px; }
.site-footer a { color: #fff; }
.site-footer ul { list-style: none; margin: 0; padding: 0; font-size: 14px; text-transform: uppercase; }
.site-footer img { height: 48px; width: auto; }
.site-footer small { display: block; max-width: 820px; margin: 24px auto 0; color: #ccc; }