#chapterList li::marker {
  content: '';
}
/*
 * The Civics Society Website styles
 * This stylesheet defines a classic, institutional aesthetic using a navy,
 * gold and neutral palette. It emphasises clarity, high contrast and
 * generous spacing to support the site’s serious and aspirational tone.
 */

/* CSS Custom Properties for easy theming */
:root {
  --color-primary: #0a2342; /* deep navy */
  --color-secondary: #c2a16d; /* muted gold */
  --color-light: #f7f7f7; /* very light off‑white */
  --color-dark: #021024; /* almost black navy */
  --color-text: #1f2937; /* dark grey for body text */
  /* Replace the former crimson palette with variations on our gold accent.
     These colours ensure a calm, dignified feel without aggressive tones. */
  --color-red-dark: var(--color-secondary); /* re‑purposed to use the muted gold */
  --color-red-light: #f8f5ef; /* a very light beige for subtle section backgrounds */

  /* Accent colour for highlighted words. Lighten the gold slightly so it stands out more */
  --color-accent: #b6955f;
  --color-white: #ffffff;
  --max-width: 1200px;
  --font-serif: 'Merriweather', serif;
  --font-sans: 'Open Sans', sans-serif;
  /* Serif alternative for display headings */
  --font-display: 'Merriweather', serif;
}

/* Global reset & typography */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background-color: var(--color-light);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  color: var(--color-primary);
  margin-top: 0;
}

img {
  max-width: 100%;
  height: auto;
}

/* Containers */
.container {
  width: 90%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 0.5rem;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.65rem 1.25rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  border-radius: 3px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-primary {
  background-color: var(--color-secondary);
  color: var(--color-dark);
}
.btn-primary:hover {
  background-color: #b18e5d;
}
.btn-secondary {
  background-color: transparent;
  color: var(--color-secondary);
  border: 2px solid var(--color-secondary);
}
.btn-secondary:hover {
  background-color: var(--color-secondary);
  color: var(--color-dark);
}

/* Accent button using crimson palette */
.btn-accent {
  background-color: var(--color-secondary);
  color: var(--color-dark);
  border: none;
}
.btn-accent:hover {
  background-color: #b18e5d;
  color: var(--color-dark);
}

/* Header */
.site-header {
  background-color: var(--color-primary);
  color: #fff;
  padding: 0.5rem 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.header-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo img {
  /* Increase the header logo to make the brand more prominent */
  height: 110px;
  width: auto;
}
.nav-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1.5rem;
}
.nav-menu a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.2s ease;
}
.nav-menu a:hover,
.nav-menu a.active {
  opacity: 0.75;
}
.header-actions .btn {
  margin-left: 1rem;
  font-size: 0.9rem;
}

/* Hero Section */
.hero {
  background-color: var(--color-primary);
  color: #fff;
  padding: 4rem 0 5rem;
  text-align: center;
  position: relative;
}
.hero h1 {
  font-size: 3.5rem;
  margin-bottom: 1.25rem;
  color: var(--color-white);
  line-height: 1.2;
}
.hero-logo-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero p {
  font-size: 1.3rem;
  max-width: 720px;
  margin: 0 auto 2.75rem;
  color: #e2e8f0;
}

/* Highlight specific words in headings */
.highlight {
  color: var(--color-accent);
  font-style: italic;
}
.hero-cta .btn {
  margin: 0 0.5rem;
}

/* Large logo in hero */
.hero-logo {
  /* Enlarge the hero logo and remove the decorative box for a cleaner look */
  width: 350px;
  height: auto;
  margin: 0 auto 2rem;
  /* No background, padding or border radius so the logo stands alone */
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Page Hero (for subpages) */
.page-hero {
  background-color: var(--color-primary);
  color: #fff;
  padding: 4.5rem 0;
  text-align: center;
}

/* Ensure headings and paragraphs in page hero sections remain visible against dark backgrounds */
.page-hero h1,
.page-hero p {
  color: #fff;
}
.page-hero h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}
.page-hero p {
  max-width: 800px;
  margin: 0 auto;
  color: #dbeafe;
}

/* Sections */
section {
  padding: 3rem 0;
}

.who-we-are {
  /* Use a light neutral background to create rhythm between sections */
  background-color: var(--color-light);
  border-top: 4px solid var(--color-primary);
}
.who-we-are h2 {
  margin-bottom: 1rem;
}

.what-we-do {
  /* A soft neutral backdrop signals programmatic content */
  background-color: var(--color-light);
  border-top: 4px solid var(--color-secondary);
}
.what-we-do h2 {
  text-align: center;
  margin-bottom: 2rem;
}
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}
.info-card, .resource-card, .db-card, .founder-card {
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-top: 4px solid var(--color-secondary);
  border-radius: 4px;
  padding: 1.5rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.info-card .icon {
  font-size: 2rem;
  color: var(--color-secondary);
  margin-bottom: 1rem;
}
.info-card h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.signup-section {
  background-color: var(--color-light);
  border-top: 4px solid var(--color-secondary);
}
.signup-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
}
.signup-text {
  flex: 1 1 300px;
}
.signup-form {
  flex: 1 1 320px;
  background-color: var(--color-light);
  padding: 1.5rem;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
}
.signup-form .form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.signup-form .form-group {
  flex: 1 1 140px;
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}
.signup-form label {
  font-weight: 600;
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
  color: var(--color-primary);
}
.signup-form input[type="text"],
.signup-form input[type="email"] {
  padding: 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 3px;
  font-size: 0.9rem;
}
.checkbox-row {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}
.checkbox-row input {
  margin-right: 0.5rem;
}
.checkbox-label {
  font-size: 0.9rem;
}

/* Segmented Student / Mentor role toggle inside the sign‑up form */
.role-toggle {
  margin-bottom: 1.25rem;
}
.role-toggle-label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}
.role-toggle-buttons {
  display: inline-flex;
  border: 1px solid var(--color-secondary);
  border-radius: 999px;
  overflow: hidden;
  background-color: var(--color-white);
}
.role-option {
  border: none;
  background: transparent;
  padding: 0.5rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.role-option + .role-option {
  border-left: 1px solid var(--color-secondary);
}
.role-option.active {
  background-color: var(--color-secondary);
  color: var(--color-dark);
}
.role-option:hover:not(.active) {
  background-color: var(--color-red-light);
}
/* Ensure hidden field groups collapse despite flex display on .form-group/.form-row */
.signup-form [hidden] {
  display: none !important;
}

.chapter-section {
  background-color: var(--color-light);
  border-top: 4px solid var(--color-secondary);
}
.chapter-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 1rem;
}
.chapter-left {
  flex: 1 1 45%;
  min-width: 300px;
  max-width: 420px;
}
.chapter-map {
  flex: 1 1 55%;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.chapter-map svg {
  width: 100%;
  height: auto;
  max-width: 650px;
}

/* Default styling for paths in the interactive map. Once the SVG is injected,
   JavaScript will override the inline fill values. We set stroke and fill here
   for consistency and rely on JS to set active-state classes. */
.chapter-map svg path {
  stroke: var(--color-primary);
  stroke-width: 0.5;
  /* fill will be assigned via JS after the SVG loads */
}

/* Highlight states containing chapters */
.chapter-map svg path.active-state {
  fill: var(--color-accent) !important;
  stroke: var(--color-primary);
}
.chapter-map img,
/* Style the injected SVG map via its container */
.chapter-map #us-map svg {
  width: 100%;
  height: auto;
  max-width: 650px;
}
.chapter-map #us-map svg path {
  stroke: var(--color-primary);
  stroke-width: 0.5;
}
.chapter-map #us-map {
  /* Apply subtle tint and brightness adjustments to soften the map’s presence */
  filter: grayscale(100%) contrast(1.1) brightness(1.1);
}

.results-count {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--color-primary);
}

/* Style for reset button */
#resetFilters {
  margin-bottom: 1rem;
}

/* Enhanced chapter list items */
.chapter-item {
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid #e5e7eb;
  transition: background-color 0.15s ease;
  list-style-type: none;
}
.chapter-item:last-child {
  border-bottom: none;
}
.chapter-item:hover {
  background-color: #f9fafb;
}
/* The top row of each chapter item aligns the name/campus with the year and chevron */
.chapter-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.chapter-info {
  display: flex;
  flex-direction: column;
}
.chapter-info strong {
  font-family: var(--font-display);
  color: var(--color-primary);
  font-size: 1.05rem;
  margin-bottom: 0.1rem;
}
.chapter-info span {
  font-size: 0.9rem;
  color: #475569;
}
.chapter-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: #64748b;
}
.chapter-meta .year {
  font-style: italic;
  color: var(--color-secondary);
}
.chapter-meta i {
  color: var(--color-secondary);
  transition: transform 0.2s ease;
}

/* Hidden description text for each chapter. Clicking a chapter reveals
   additional information about programming, mentorship and ways to get involved. */
.chapter-description {
  display: none;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.4;
  background-color: #f9fafb;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--color-secondary);
  border-radius: 0 0 4px 4px;
}
.chapter-description.open {
  display: block;
}
.chapter-section h2 {
  margin-bottom: 0.5rem;
}
.chapter-section p {
  margin-bottom: 1rem;
}
.chapter-search input {
  width: 100%;
  max-width: 400px;
  padding: 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 3px;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.chapter-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}
.chapter-filters input[type="text"],
.chapter-filters select {
  padding: 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 3px;
  font-size: 0.9rem;
  flex: 1 1 200px;
  max-width: 300px;
}
.chapter-filters select {
  background-color: #fff;
}
.chapter-list,
#chapterList {
  list-style: none;
  padding: 0;
  margin: 0;
  /* Restrict the height of the chapter list so the page remains balanced */
  max-height: 18rem;
  overflow-y: auto;
}
.start-chapter-link {
  color: var(--color-secondary);
  font-weight: 600;
  text-decoration: underline;
}

/* Social Section */
.social-section {
  background-color: var(--color-primary);
  padding: 1rem 0;
  text-align: center;
}
.social-wrapper {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}
.social-link {
  color: #fff;
  font-size: 1.2rem;
  transition: opacity 0.2s ease;
}
.social-link:hover {
  opacity: 0.75;
}

/* Footer social icons (replaces the separate social section on subpages) */
.footer-social {
  /* Use the same dark background as the footer so the icons appear at the very top of the dark box */
  background-color: var(--color-dark);
  padding: 0.5rem 0;
  margin-top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}

/* Footer */
.site-footer {
  background-color: var(--color-dark);
  color: #cbd5e1;
  /* Remove top padding so the social icons bar sits at the very top of the footer */
  padding-top: 0;
  padding-bottom: 2rem;
  font-size: 0.9rem;
}
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}
.footer-col h4 {
  color: var(--color-secondary);
  margin-bottom: 0.5rem;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-col li {
  margin-bottom: 0.5rem;
}
.footer-col a {
  color: #cbd5e1;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.footer-col a:hover {
  opacity: 0.75;
}
.footer-bottom {
  text-align: center;
  padding: 1rem 0;
  border-top: 1px solid #1e293b;
  margin-top: 2rem;
  font-size: 0.8rem;
  color: #94a3b8;
}

/* In the footer, emphasise highlighted words (e.g. “free people”) using the
   muted gold accent instead of the rose accent used elsewhere. This helps
   anchor the tagline visually without introducing additional colours. */
.site-footer .highlight {
  color: var(--color-secondary);
  font-weight: 600;
}

/* Resources Page Styles */
.resources-intro {
  background-color: #fff;
  border-top: 4px solid var(--color-secondary);
}
.opportunity-db {
  background-color: var(--color-light);
}
.db-card {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  border-top-color: var(--color-red-dark);
  background-color: #fff;
}
.db-card h3 {
  margin-top: 0;
}
.db-card button[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
}

/* ===================== OPPORTUNITY TRACKER DASHBOARD ===================== */
.db-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 1.75rem;
}
.db-header h2 {
  margin-bottom: 0.5rem;
}
/* Tabs */
.jobs-tabs {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.jobs-tab {
  border: 1px solid var(--color-secondary);
  background: var(--color-white);
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.jobs-tab.active {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}
.jobs-tab .tab-count {
  opacity: 0.7;
  font-weight: 400;
}
/* Toolbar */
.jobs-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1rem;
}
.jobs-toolbar .jobs-search {
  flex: 1 1 260px;
}
.jobs-toolbar input[type="search"],
.jobs-toolbar select {
  padding: 0.55rem 0.7rem;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 0.9rem;
  font-family: inherit;
  background: var(--color-white);
}
.remote-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--color-primary);
  white-space: nowrap;
}
.jobs-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.jobs-updated {
  font-size: 0.8rem;
  color: #6b7280;
}
/* List + cards — a fixed-height box you scroll inside of */
.jobs-list {
  list-style: none;
  margin: 0;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 70vh;
  overflow-y: auto;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: var(--color-red-light);
  scrollbar-gutter: stable;
}
.job-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--color-white);
  border: 1px solid #e5e7eb;
  border-left: 5px solid var(--color-secondary);
  border-radius: 6px;
  padding: 1rem 1.25rem;
}
/* Colour-code each posting's edge by the kind of work (sector) */
.job-card.sector-ffrdc     { border-left-color: #1e3a5f; }
.job-card.sector-thinktank { border-left-color: #7a5c1e; }
.job-card.sector-nonprofit { border-left-color: #1f5236; }
.job-card.sector-federal   { border-left-color: #3b2f6b; }
.job-card.sector-state     { border-left-color: #7a2e2e; }
.job-main { flex: 1 1 320px; }
.job-headline {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}
.job-title {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
}
.job-title a { color: var(--color-primary); text-decoration: none; }
.job-title a:hover { text-decoration: underline; }
.job-sector {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
  background: #eef2f7;
  color: var(--color-primary);
  border: 1px solid #c2cdda;
}
.job-sector.sector-ffrdc      { background: #e7eef7; color: #1e3a5f; border-color: #93b1d4; }
.job-sector.sector-thinktank  { background: #f3ecdd; color: #7a5c1e; border-color: #cdb785; }
.job-sector.sector-nonprofit  { background: #e7f1ea; color: #1f5236; border-color: #9cc6ad; }
.job-sector.sector-federal    { background: #e9e6f3; color: #3b2f6b; border-color: #b7add9; }
.job-sector.sector-state      { background: #f6e8e8; color: #7a2e2e; border-color: #d9a8a8; }
.job-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-size: 0.85rem;
  color: #4b5563;
}
.job-sub i { color: var(--color-secondary); margin-right: 0.15rem; }
.job-remote {
  color: #1f5236;
  font-weight: 600;
}
/* Type (Internship/Fellowship) and clearance badges */
.job-pill {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.pill-type { background: #e7eef7; color: #1e3a5f; border-color: #93b1d4; }
.pill-clearance { background: #fbe7e7; color: #8a2b2b; border-color: #e3a3a3; }
/* Actions */
.job-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.btn-sm {
  padding: 0.4rem 0.85rem;
  font-size: 0.85rem;
}
.save-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--color-secondary);
  background: var(--color-white);
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.4rem 0.85rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.save-btn:hover { background: var(--color-red-light); }
.save-btn.is-saved {
  background: var(--color-secondary);
  color: var(--color-dark);
}
.status-select {
  padding: 0.4rem 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 0.85rem;
  font-family: inherit;
  background: var(--color-white);
}
.remove-btn {
  border: 1px solid #e5e7eb;
  background: var(--color-white);
  color: #9ca3af;
  width: 2rem;
  height: 2rem;
  border-radius: 4px;
  cursor: pointer;
}
.remove-btn:hover { color: #b91c1c; border-color: #b91c1c; }
/* Tracker status chips */
.status-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.status-chip {
  border: 1px solid #d1d5db;
  background: var(--color-white);
  color: var(--color-primary);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
}
.status-chip span { opacity: 0.6; font-weight: 400; }
.status-chip.active {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}
.status-chip.active span { opacity: 0.8; }
.jobs-empty {
  text-align: center;
  color: #6b7280;
  padding: 2rem 1rem;
  background: var(--color-white);
  border: 1px dashed #d1d5db;
  border-radius: 6px;
}

.additional-resources {
  background-color: var(--color-red-light);
  border-top: 4px solid var(--color-secondary);
}
.additional-resources h2 {
  text-align: center;
  margin-bottom: 1.5rem;
}
.resource-card h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}
.resource-card p {
  margin-top: 0;
}

/* About Page Styles */
.about-hero {
  background-color: var(--color-primary);
  color: #fff;
}
.vision-section, .why-now-section, .founders-section, .leadership-section {
  border-top: 4px solid var(--color-secondary);
  background-color: #fff;
}

/* Alternate section backgrounds for About page */
.vision-section {
  background-color: var(--color-red-light);
}
.why-now-section {
  background-color: #fff;
}
.founders-section {
  background-color: var(--color-red-light);
}
.leadership-section {
  background-color: #fff;
}
.founders-intro {
  margin-bottom: 1rem;
}
.founders-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.founder-card {
  align-items: center;
  text-align: center;
}
.founder-photo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #e2e8f0;
  margin: 0 auto 0.75rem;
}
.leadership-section ul {
  padding-left: 1.2rem;
}
.leadership-section li {
  margin-bottom: 0.5rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .header-wrapper {
    flex-direction: column;
    align-items: flex-start;
  }
  .nav-menu ul {
    gap: 1rem;
  }
  .signup-wrapper {
    flex-direction: column;
  }
  .footer-grid {
    flex-direction: column;
    gap: 1rem;
  }

  /* Stack chapter map below list on small screens */
  .chapter-wrapper {
    flex-direction: column;
  }
  .chapter-left,
  .chapter-map {
    flex: 1 1 100%;
  }
  .chapter-map {
    max-width: none;
    padding-top: 1rem;
  }
}

/* Ensure chapter list items have no bullet markers regardless of list styles */
#chapterList li {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}

/* ------------------------------------------------------------------
 * Typography and general element adjustments
 *
 * Scale headings to produce stronger hierarchy and vary font sizes
 * across the page. The default browser sizes are overridden here to
 * create a more dramatic contrast between sections.
 */
h2 {
  font-size: 2rem;
  margin-bottom: 1.25rem;
}
h3 {
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
}

/* Hero tagline tweaks */
.hero-tagline {
  font-size: 1.3rem;
  max-width: 720px;
  margin: 0 auto 2.75rem;
  color: #e2e8f0;
}

/* Style the embedded SVG map within the chapter locator. The object
 * element will fill its container while respecting aspect ratio. */
.chapter-map object {
  width: 100%;
  height: auto;
  max-width: 500px;
}

/* Display information about hovered or selected states */
.map-info {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--color-primary);
  text-align: center;
}

/* Newsletter sign‑up section */
.newsletter-section {
  background-color: var(--color-light);
  border-top: 4px solid var(--color-secondary);
  text-align: center;
  padding: 3rem 0;
}
.newsletter-section h2 {
  margin-bottom: 0.5rem;
  color: var(--color-primary);
}
.newsletter-section p {
  margin-bottom: 1.5rem;
  color: var(--color-primary);
}
.newsletter-form {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.newsletter-form input[type="email"] {
  padding: 0.55rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 3px;
  font-size: 1rem;
  width: 260px;
}
.newsletter-form .btn {
  padding: 0.55rem 1.25rem;
}

/* Logo displayed in the footer. By using an image rather than a heading we mirror
   the appearance of other institutional sites and reinforce brand recognition at
   the bottom of the page. */
.site-footer .footer-logo {
  display: block;
  height: 80px;
  width: auto;
  margin-bottom: 0.75rem;
}