/* Shared styling for the static sub-pages (about / how-to-help /
   first-event). Mirrors the design tokens, fonts, header and nav of the
   current index.html so the look is consistent across the site.
   No underlines, gradients or shadows; content matches the map box width. */

/* ── Design tokens (kept in sync with index.html) ──────────────── */
:root {
  --blue:        #1b485e;   /* primary blue */
  --blue-dark:   #1b485e;   /* primary blue, darker shade */
  --sky-blue:    #609cb9;   /* accent */
  --light-blue:  #bfdbfe;   /* very light blue — accent on dark bg */
  --parchment:   #eee4d3;   /* off-white — page background */
  --border-grey: #e2e8f0;   /* light blue-grey — borders */
  --ink:         #0f172a;   /* near-black slate — body text */
  --ink-lt:      #334155;   /* mid slate — secondary text */
  --nav-h:       52px;
}

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

body {
  font-family: 'EB Garamond', Georgia, serif;
  background: var(--parchment);
  color: var(--ink);
  min-height: 100vh;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
}

/* ── Header ────────────────────────────────────────────────────── */
header { text-align: center; padding: 1rem 1rem 0.8rem; }
.site-title {
  font-family: 'Cormorant Unicase', serif;
  font-size: clamp(2rem, 5.5vw, 3.8rem);
  color: var(--blue-dark);
  letter-spacing: 0.03em;
  line-height: 1.15;
}
.site-title a { color: inherit; text-decoration: none; }
.site-title a:hover { color: var(--sky-blue); }

/* ── Navigation ────────────────────────────────────────────────── */
nav { background: var(--blue); position: sticky; top: 0; z-index: 1000; }
nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 900px;
  margin: 0 auto;
}
nav li { display: flex; }
nav a {
  font-family: 'Cormorant Unicase', serif;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  color: var(--light-blue);
  text-decoration: none;
  padding: 0 1.6rem;
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  border-right: 1px solid rgba(191,219,254,0.30);
  transition: background 0.2s, color 0.2s;
  text-align: center;
}
nav li:first-child a { border-left: 1px solid rgba(191,219,254,0.30); }
nav a:hover,
nav a[aria-current="page"] { background: rgba(191,219,254,0.20); color: #fff; }

/* ── Main / article ────────────────────────────────────────────── */
/* max-width matches index.html's <main> (the map box width). */
main { max-width: 1280px; margin: 0 auto; padding: 1.5rem 1.2rem 3rem; }

article h1 {
  font-family: 'Cormorant Unicase', serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--blue-dark);
  letter-spacing: 0.04em;
  margin-bottom: 1.2rem;
}
article h2 {
  font-family: 'Cormorant Unicase', serif;
  font-size: 1.4rem;
  color: var(--blue-dark);
  letter-spacing: 0.06em;
  margin-top: 1.9rem;
  margin-bottom: 0.6rem;
}
article h3 {
  font-family: 'Cormorant Unicase', serif;
  font-size: 1.12rem;
  color: var(--blue-dark);
  letter-spacing: 0.04em;
  margin-top: 1.4rem;
  margin-bottom: 0.4rem;
}
article p {
  font-size: 1.06rem;
  line-height: 1.8;
  color: var(--ink-lt);
  margin-bottom: 1rem;
}
article ul, article ol {
  font-size: 1.06rem;
  line-height: 1.7;
  color: var(--ink-lt);
  margin: 0 0 1rem 1.4rem;
}
article a { color: var(--blue); }
article a:hover { color: var(--sky-blue); }

@media (max-width: 700px) {
  nav a { padding: 0 0.8rem; font-size: 0.78rem; }
  main { padding: 1.2rem 1rem 2.5rem; }
}