@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/source-sans-3.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/source-sans-3-italic.woff2") format("woff2");
}

:root {
  --paper: #f7f3e8;
  --paper-deep: #efe9d8;
  --ink: #2c3a24;
  --green: #3b7d23;
  --green-deep: #2c5e1a;
  --orchid: #a3529a;
  --orchid-soft: #c887c1;
  --display: "Source Sans 3", "Segoe UI", "Avenir Next", system-ui, sans-serif;
  --body: "Source Sans 3", "Segoe UI", "Avenir Next", system-ui, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  /* subtle paper grain */
  background-image:
    radial-gradient(at 80% 0%, rgba(163, 82, 154, 0.10), transparent 50%),
    radial-gradient(at 0% 100%, rgba(59, 125, 35, 0.08), transparent 50%);
  background-repeat: no-repeat;
}

.wrap {
  max-width: 60rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ---------- header (recreates the bordered logo lockup) ---------- */
header {
  padding: 1.5rem 0 0.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0.45rem 0.5rem 0.45rem 0.9rem;
  background: #fff;
  border: 3px solid var(--green);
  border-radius: 3px;
  /* it's a link to the home page, but it should read as a logo */
  text-decoration: none;
  color: inherit;
}

.logo img { margin-left: -0.4rem; }

.logo img { height: 10rem; width: auto; display: block; }

.logo .name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--green);
  line-height: 1.3;
  letter-spacing: -0.005em;
}

/* ---------- nav ---------- */
.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.4rem;
  padding-bottom: 0.6rem;
}

.nav a {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--green);
  text-decoration: none;
  padding: 0.15rem 0;
  border-bottom: 2px solid transparent;
}

.nav a:hover,
.nav a:focus-visible {
  border-bottom-color: var(--orchid-soft);
}

/* current page — set by the build, so it can never drift out of sync */
.nav a[aria-current] {
  color: var(--orchid);
  border-bottom-color: var(--orchid);
}

/* ---------- hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 2.5rem 0 1.5rem;
}

.hero h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.4rem, 7vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--green);
  max-width: 12em;
  animation: rise 0.7s ease-out both;
}

.hero h1 em {
  font-style: italic;
  color: var(--orchid);
}

.hero p.lede {
  margin-top: 1.25rem;
  font-size: 1.15rem;
  max-width: 34em;
  animation: rise 0.7s ease-out 0.12s both;
}

.hero .bloom {
  width: clamp(7rem, 22vw, 13rem);
  animation: rise 0.9s ease-out 0.2s both;
}

.hero .bloom img { width: 100%; height: auto; display: block; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- sub-page heading ---------- */
.page-header {
  padding: 2.5rem 0 0.5rem;
}

.page-header h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--green);
  max-width: 20em;
}

.page-header p {
  margin-top: 1rem;
  font-size: 1.15rem;
  max-width: 34em;
}

.prose { padding: 1.5rem 0 3rem; max-width: 38em; }

.prose h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--green);
  margin: 2rem 0 0.6rem;
}

.prose h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--green);
  margin: 1.75rem 0 0.4rem;
}

.prose p { margin-bottom: 1rem; }

.prose ul { margin: 0 0 1rem 1.25rem; }

.prose li { margin-bottom: 0.4rem; }

.prose a { color: var(--orchid); text-decoration-thickness: 1px; text-underline-offset: 2px; }

.prose ol { margin: 0 0 1rem 1.25rem; }

/* contents list on long documents */
.contents {
  border-left: 3px solid var(--orchid-soft);
  padding: 0.25rem 0 0.25rem 1rem;
  margin: 0 0 2rem;
}

.contents h2 { font-size: 1.15rem; margin: 0 0 0.4rem; }

.contents ul { margin: 0 0 0 1.25rem; }

.footnote { font-size: 0.9rem; opacity: 0.8; }

/* ---------- content images ---------- */
/* full width of the page, unlike .prose which is capped for readability */
figure.banner { margin: 1.5rem 0 0; }

figure.banner a { display: block; }

figure.banner img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.6rem;
  background: var(--paper-deep);
}

figure.banner figcaption,
.photo-pair figcaption {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  opacity: 0.85;
}

.photo-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
  margin: 0 0 1rem;
}

.photo-pair figure { margin: 0; }

.photo-pair img {
  width: 100%;
  height: clamp(14rem, 30vw, 19rem);
  object-fit: cover;
  display: block;
  border-radius: 0.6rem;
  background: var(--paper-deep);
}

/* ---------- interactive map (work in progress) ---------- */
.map-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--green);
  margin: 2.5rem 0 0.5rem;
}

.map-note { max-width: 38em; margin-bottom: 0.5rem; }

/* Shape the container to the aerial photo so there is no dead space beside it.
   Two classes because leaflet.css loads after this file and would otherwise win. */
.leaflet-map.leaflet-container {
  aspect-ratio: 4451 / 3630;
  width: 100%;
  margin: 1.5rem 0 0;
  border-radius: 0.6rem;
  background: var(--paper-deep);
}

.leaflet-map {
  aspect-ratio: 4451 / 3630;
  margin: 1.5rem 0 0;
  border-radius: 0.6rem;
  background: var(--paper-deep);
}

.leaflet-tooltip.lbl {
  background: rgba(255, 255, 255, 0.9);
  border: 0;
  box-shadow: none;
  font-size: 0.78rem;
  padding: 1px 5px;
  color: var(--ink);
}

/* ---------- session card ---------- */
.session {
  background: var(--green);
  color: var(--paper);
  border-radius: 1rem;
  padding: 1.75rem 1.5rem;
  margin: 1.5rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.25rem;
  animation: rise 0.7s ease-out 0.25s both;
}

.session div span {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 0.25rem;
}

.session div strong {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.2;
}

.session div small {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.9rem;
}

/* ---------- what to expect ---------- */
section.about { padding: 3rem 0 1rem; }

section.about h2,
section.contact h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.9rem;
  color: var(--green);
  margin-bottom: 1rem;
}

.points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.points article {
  border-top: 3px solid var(--orchid-soft);
  padding-top: 0.85rem;
}

.points h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--green);
  margin-bottom: 0.35rem;
}

/* ---------- contact ---------- */
section.contact {
  padding: 3rem 0 4rem;
  text-align: center;
}

section.contact p { max-width: 36em; margin: 0 auto 1.5rem; }

.btn {
  display: inline-block;
  font-family: var(--body);
  font-weight: 700;
  font-size: 1.1rem;
  color: #fff;
  background: var(--orchid);
  padding: 0.9rem 1.9rem;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease;
}

.btn:hover, .btn:focus-visible {
  background: var(--green);
  transform: translateY(-2px);
}

.email-plain {
  display: block;
  margin-top: 0.85rem;
  font-size: 0.95rem;
  color: var(--ink);
  opacity: 0.75;
}

/* ---------- gallery ---------- */
.gallery {
  margin-top: 1.5rem;
}

.slides {
  display: flex;
  gap: 0.85rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  padding: 0.25rem 0 1rem;
}

.slides figure {
  flex: 0 0 auto;
  width: clamp(15rem, 70vw, 18rem);
  scroll-snap-align: start;
  margin: 0;
  background: #fff;
  border-radius: 0.6rem;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(44, 58, 36, 0.06), 0 6px 18px rgba(44, 58, 36, 0.08);
}

.slides img {
  width: 100%;
  height: clamp(13rem, 28vw, 17rem);
  object-fit: cover;
  display: block;
  background: var(--paper-deep);
}

.slides figcaption {
  padding: 0.65rem 0.9rem 0.85rem;
  font-size: 0.95rem;
  color: var(--ink);
}

/* ---------- elsewhere links (Sarah's app, Facebook, other groups) ---------- */
.elsewhere {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.25rem;
  padding: 2.5rem 0 0;
  border-top: 1px solid var(--paper-deep);
  margin-top: 2rem;
}

.elsewhere h2 {
  grid-column: 1 / -1;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--green);
}

.elsewhere a {
  font-family: var(--display);
  font-weight: 700;
  color: var(--orchid);
  text-decoration: none;
}

.elsewhere a:hover, .elsewhere a:focus-visible { text-decoration: underline; }

.elsewhere p { font-size: 0.95rem; margin-top: 0.15rem; }

/* ---------- footer ---------- */
footer {
  border-top: 1px solid var(--paper-deep);
  padding: 1.5rem 0 2.5rem;
  margin-top: 2.5rem;
  font-size: 0.9rem;
  opacity: 0.8;
  text-align: center;
}

footer a { color: inherit; }

/* ---------- mobile ---------- */
@media (max-width: 38rem) {
  .hero {
    grid-template-columns: 1fr;
    text-align: left;
    padding-top: 1.5rem;
  }
  .hero .bloom { display: none; }

  .logo img { height: 7rem; }
  .logo .name { font-size: 1.15rem; }
}