/* ------------------------------------------------------------------
   AI Safety Awareness Project — library workshops landing page
   ------------------------------------------------------------------ */

:root {
  /* the hero/map screen keeps the original warm paper + green world */
  --paper: #faf7f0;
  --paper-deep: #f1ebdd;
  --ink: #26221b;
  --ink-soft: #5c5546;
  --ink-faint: #8a8172;
  --accent: #2e8b62;        /* states with workshops — validated vs --paper */
  --accent-deep: #1f6b4a;   /* hover / focus fill */
  --neutral-state: #cbc6bb; /* states with no workshops yet */
  --neutral-hover: #b3ad9e;
  --marker: #ffd84d;        /* highlighter yellow */
  --rule: #e2dbca;

  /* Free Library of Philadelphia-inspired palette for everything below
     the map hero (the hero keeps the paper/green/yellow world above) */
  --fl-teal: #1b7fa5;
  --fl-olive: #778a12;
  --fl-orange: #d75f13;
  --fl-red: #c8102e;

  /* banner trio (chosen via the color-combination picker) */
  --band-violet: #6b4fa0;
  --band-coral: #e05c3a;
  --band-pine: #12897b;
  --fl-ink-soft: #4a4a4a;
  --fl-rule: #e3e3e3;

  --font-serif: "Lora", Georgia, "Times New Roman", serif;
  --font-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-deep); }

.wrap {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ------------------------------------------------------------------
   Floating nav (no header band — links sit over the hero, top right)
   ------------------------------------------------------------------ */

.floating-nav {
  /* top aligns the links with the hero kicker ("Nationwide Conversations…") */
  position: absolute;
  top: 2.75rem;
  /* align the nav's right edge with the .wrap content edge (max-width 76rem,
     1.5rem side padding) so the right margin mirrors the hero text's left */
  right: max(1.5rem, calc((100% - 76rem) / 2 + 1.5rem));
  z-index: 20;
  display: flex;
  gap: 3.4rem;
}

.floating-nav a {
  color: var(--accent-deep);
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--accent-deep) 45%, transparent);
  text-underline-offset: 4px;
}

.floating-nav a:hover {
  color: var(--accent);
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent);
}

/* ------------------------------------------------------------------
   Hero: text left, map right
   ------------------------------------------------------------------ */

.hero-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #e4ecf1; /* solid sky — chosen via the old design-exploration toolbar */
}

.hero {
  display: grid;
  grid-template-columns: minmax(20rem, 5fr) 7fr;
  gap: 3rem;
  /* map pins to the top of the hero, unaffected by how long the text runs */
  align-items: start;
  padding: 2.75rem 0 2.5rem;
}

.kicker {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 1rem;
}

.hero h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  line-height: 1.25;
  margin: 0 0 1.4rem;
  text-wrap: balance;
}

/* The hand-written phrase with messy highlighter behind it */
.handwritten {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 1.28em;
  line-height: 1.05;
  white-space: nowrap;
  display: inline-block;
  transform: rotate(-2deg);
  transform-origin: left center;
  padding: 0.04em 0.18em 0.1em;
  /* messy highlighter scribble, stretched to the phrase */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 56' preserveAspectRatio='none'%3E%3Cpath d='M8 20 C 50 12, 130 10, 192 16 C 120 20, 40 26, 10 30 C 70 30, 150 26, 190 30 C 130 36, 50 40, 12 44' fill='none' stroke='%23ffd84d' stroke-width='15' stroke-linecap='round' opacity='0.72'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* messy pen scribbles under "you" for emphasis */
.scribble-under {
  position: relative;
}

.scribble-under::after {
  content: "";
  position: absolute;
  left: -0.12em;
  right: -0.12em;
  bottom: -0.10em;
  height: 0.34em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 28' preserveAspectRatio='none'%3E%3Cpath d='M5 7 C 32 3, 82 2, 115 5 C 84 9, 32 10, 9 13 C 38 13, 88 11, 113 13 C 86 18, 36 19, 11 22' fill='none' stroke='%2326221b' stroke-width='3' stroke-linecap='round' opacity='0.85'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.hero .sub {
  color: var(--ink-soft);
  max-width: 34rem;
  margin: 0 0 1.8rem;
}

/* rectangular, VPL-style solid button */
.btn {
  display: inline-block;
  background: var(--accent-deep);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  padding: 0.65rem 1.4rem;
  border-radius: 0;
}

.btn:hover { background: var(--accent); }

/* Larger variant for the main call to action */
.btn--hero {
  font-size: 1.45rem;
  padding: 1.05rem 2.4rem;
}

/* ------------------------------------------------------------------
   Map
   ------------------------------------------------------------------ */

.hero-map {
  position: relative;
  min-width: 0;
  /* nudge the whole map block up and to the right */
  margin-top: 0;
  margin-left: 1.25rem;
  margin-right: -1.25rem;
}

/* rough paintbrush circle behind the map */
.hero-map::before {
  content: "";
  position: absolute;
  /* overhang: top | right | bottom | left — grown toward the lower left so
     the circle takes in more of Alaska, while staying clear of the headline.
     The positive bottom value keeps the circle's arc above the legend row. */
  inset: -1.5rem -2rem 2.4rem -2rem;
  z-index: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 460' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='soft' x='-15%25' y='-15%25' width='130%25' height='130%25'%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M 468 50 C 386 12, 244 4, 148 54 C 66 96, 16 168, 24 252 C 30 336, 96 402, 196 424 C 296 444, 424 430, 502 376 C 564 332, 594 256, 578 178 C 564 104, 518 62, 456 54 Z' fill='%23ffffff' filter='url(%23soft)'/%3E%3Cpath d='M 468 50 C 386 12, 244 4, 148 54 C 66 96, 16 168, 24 252 C 30 336, 96 402, 196 424 C 296 444, 424 430, 502 376 C 564 332, 594 256, 578 178 C 564 104, 518 62, 456 54' fill='none' stroke='%23e07856' stroke-width='22' stroke-linecap='round' opacity='0.55'/%3E%3Cpath d='M 474 60 C 502 72, 528 96, 544 128' fill='none' stroke='%23e07856' stroke-width='20' stroke-linecap='round' opacity='0.4'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  pointer-events: none;
}

/* keep the map, note, legend and tooltip above the brush circle */
.hero-map > * {
  position: relative;
  z-index: 1;
}

.hand-note {
  z-index: 2; /* above the map SVG, which comes later in the DOM */
  font-family: var(--font-hand);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink-soft);
  transform: rotate(-3deg);
  margin: 0 0 0.2rem 8%;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.hand-note svg { flex: none; transform: translateY(0.5rem) rotate(12deg); }

/* CTA row: button plus a handwritten note whose arrow points at the button */
.cta-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.9rem;
}

.hand-note--cta {
  max-width: 11.5rem;
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.1;
  transform: rotate(-2deg);
  align-items: center;
}

.hand-note--cta svg { flex: none; transform: translateY(0.1rem); }

#us-map {
  display: block;
  width: 100%;
  height: auto;
}

/* Base fill: no workshops yet */
#us-map .state path,
#us-map circle.dc {
  fill: var(--neutral-state);
}

/* transitions switch on after the initial has-events paint, so the
   accent fill doesn't animate in on page load */
#us-map.ready .state path,
#us-map.ready circle.dc {
  transition: fill 0.12s ease;
}

/* Borders drawn in paper color = 2px-ish surface gaps between fills */
#us-map g.borders { stroke: var(--paper); stroke-width: 1; fill: none; }
#us-map circle.dc { stroke: var(--paper); stroke-width: 1; }
#us-map .separator1 { stroke: #cdc4ae; stroke-width: 2; }

/* States with scheduled workshops */
#us-map a.state-link.has-events path,
#us-map a.state-link.has-events circle {
  fill: var(--accent);
}

#us-map a.state-link { cursor: pointer; outline: none; }

#us-map a.state-link:hover path,
#us-map a.state-link:focus-visible path,
#us-map a.state-link:hover circle,
#us-map a.state-link:focus-visible circle {
  fill: var(--neutral-hover);
}

#us-map a.state-link.has-events:hover path,
#us-map a.state-link.has-events:focus-visible path,
#us-map a.state-link.has-events:hover circle,
#us-map a.state-link.has-events:focus-visible circle {
  fill: var(--accent-deep);
}

#us-map a.state-link:focus-visible path,
#us-map a.state-link:focus-visible circle {
  stroke: var(--ink);
  stroke-width: 1.5;
}

/* Legend */
.map-legend {
  list-style: none;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  margin: 2.6rem 0 0;
  padding: 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.map-legend li { display: flex; align-items: center; gap: 0.5rem; }

/* Column holding the map unit (map + circle); the brush circle is drawn
   on .hero-map::before, so anything below the map must live outside
   .hero-map or it stretches the circle. */
.hero-map-col {
  min-width: 0;
  /* clear the floating nav links that sit over the map's top edge */
  margin-top: 3.4rem;
}

.swatch {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 3px;
  border: 1px solid var(--ink-soft);
  flex: none;
}

.swatch--active { background: var(--accent); }
.swatch--none { background: var(--neutral-state); }

/* Tooltip */
.map-tooltip {
  position: absolute;
  z-index: 10;
  max-width: 19rem;
  min-width: 13rem;
  background: #fffdf8;
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(38, 34, 27, 0.14);
  padding: 0.8rem 1rem 0.9rem;
  font-size: 0.9rem;
  pointer-events: auto;
}

.map-tooltip[hidden] { display: none; }

/* the transient hover preview always sits above pinned popups */
#map-tooltip { z-index: 12; }

.map-tooltip h3 {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  margin: 0 1.2rem 0.15rem 0; /* right gap keeps clear of the × button */
}

/* the state name is a link — show it */
.map-tooltip h3 a {
  color: var(--accent-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.map-tooltip h3 a:hover,
.map-tooltip h3 a:focus-visible {
  color: var(--accent);
}

.map-tooltip .tt-close {
  position: absolute;
  top: 0.35rem;
  right: 0.45rem;
  border: none;
  background: none;
  padding: 0.1rem 0.3rem;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--ink-faint);
  cursor: pointer;
}

.map-tooltip .tt-close:hover,
.map-tooltip .tt-close:focus-visible {
  color: var(--ink);
}

.map-tooltip .tt-systems {
  color: var(--ink-faint);
  font-size: 0.82rem;
  margin: 0 0 0.5rem;
}

.map-tooltip ul {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
}

.map-tooltip li { margin: 0.15rem 0; color: var(--ink-soft); }

.map-tooltip .tt-date {
  display: inline-block;
  min-width: 4.2em;
  font-weight: 600;
  color: var(--ink);
}

.map-tooltip .tt-empty { color: var(--ink-soft); margin: 0 0 0.5rem; }

.map-tooltip .tt-link {
  font-weight: 600;
  font-size: 0.88rem;
}

/* ------------------------------------------------------------------
   What to expect at an event
   ------------------------------------------------------------------ */

.expect-section {
  border-top: 1px solid var(--rule);
  padding: 3rem 0 3.5rem;
}

.expect-section h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  margin: 0 0 0.8rem;
}

.expect-intro {
  color: var(--ink-soft);
  margin: 0 0 2.2rem;
}

.expect-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 2rem;
}

/* photo slot: replace the placeholder tint with a real event photo via
   background-image (or swap the div for an <img>) when photos exist */
.expect-photo {
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30'%3E%3Cpath d='M0 24 L 10 14 L 17 20 L 27 9 L 40 22 L 40 30 L 0 30 Z' fill='%23cbc6bb'/%3E%3Ccircle cx='31' cy='7' r='3.5' fill='%23cbc6bb'/%3E%3C/svg%3E") center / 45% no-repeat,
    var(--paper-deep);
  margin-bottom: 0.9rem;
}

.expect-card p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.expect-card > p:last-child { margin-top: 0; }

/* ------------------------------------------------------------------
   List view (accessible alternative to the map)
   ------------------------------------------------------------------ */

.state-list-section {
  border-top: 1px solid var(--rule);
  padding: 2rem 0 3rem;
}

/* same section-title treatment as "What to expect at an event" */
.state-list-section h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  margin: 0 0 0.8rem;
}

.state-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1.2rem 2rem;
  margin-top: 1.4rem;
}

.state-list h3 { font-size: 1rem; margin: 0 0 0.2rem; }

.state-list p, .state-list ul {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.state-list ul { padding-left: 1.1rem; }

/* ------------------------------------------------------------------
   Simple content pages (e.g. get-involved.html)
   ------------------------------------------------------------------ */

.content-page {
  max-width: 44rem;
  padding-top: 3rem;
  padding-bottom: 4rem;
}

.content-page h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  line-height: 1.25;
  margin: 0 0 1rem;
  text-wrap: balance;
}

.content-page h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.35rem;
  margin: 2.2rem 0 0.6rem;
}

.content-page p { color: var(--ink-soft); }

.content-page .lede {
  font-size: 1.15rem;
  color: var(--ink);
}

.content-page .cta-block { margin-top: 2.5rem; }

/* subpages adopt the Free Library treatment (white ground, red links,
   teal action button); the homepage hero keeps the paper palette */
body.fl-page { background: #fff; }
body.fl-page .content-page p { color: var(--fl-ink-soft); }
body.fl-page .content-page a { color: var(--fl-red); }
body.fl-page .btn,
body.fl-page .content-page a.btn { background: var(--band-pine); color: #fff; }
body.fl-page .btn:hover,
body.fl-page .content-page a.btn:hover { background: #17a390; }

/* Get Involved: three audience columns, colored like the homepage banner */
.gi-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 3px; /* white seams, matching the homepage blocks */
  max-width: 90rem; /* keep the columns from growing endlessly wide */
  margin: 0 auto;
}

.gi-col {
  padding: 0 0 2.6rem;
  color: #fff;
}

.gi-col--violet { background: var(--band-violet); }
.gi-col--coral  { background: var(--band-coral); }
.gi-col--pine   { background: var(--band-pine); }

/* uniform photo height so the three headings align */
.gi-col .section-photo {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.gi-col h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1.3;
  margin: 1.4rem 2rem 0.6rem;
}

.gi-col p {
  margin: 0 2rem;
  font-size: 0.97rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.94);
}

.gi-col a { color: #fff; }

@media (max-width: 54rem) {
  .gi-columns { grid-template-columns: 1fr; row-gap: 3px; }
}

/* ------------------------------------------------------------------
   Prose screens on the homepage (Why libraries?, About us)
   ------------------------------------------------------------------ */

.about-section,
.why-section {
  border-top: 1px solid var(--rule);
  padding: 3rem 0 3.5rem;
}

.about-section h2,
.why-section h2,
.resources-section h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  margin: 0 0 0.8rem;
}

/* section photos */
.section-photo {
  display: block;
  width: 100%;
  height: auto;
}

/* photo with a source-credit box pinned to its lower-right corner */
.photo-frame { position: relative; }

.expect-photo { position: relative; }

.expect-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-credit {
  position: absolute;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.65rem;
  line-height: 1.5;
  padding: 0.1rem 0.5rem;
  text-decoration: none;
  white-space: nowrap;
}

.photo-credit:hover { text-decoration: underline; }

/* credit boxes stay white even where section links are recolored */
.below-hero .section-block a.photo-credit { color: #fff; }

/* the workshops list uses the same green links as the hero */
.below-hero .state-list-section a { color: var(--accent-deep); }
.below-hero .state-list-section a:hover { color: var(--accent); }

/* buttons inside the below-hero zone take the FL teal */
.below-hero .btn,
.below-hero .section-block a.btn { background: var(--band-pine); color: #fff; }
.below-hero .btn:hover,
.below-hero .section-block a.btn:hover { background: #17a390; }

.resources-cta { margin-top: 1.4rem; }

/* real photos in the section cards (placeholders, assigned by position) */
.expect-card:nth-child(1) .expect-photo { background: url("../assets/bg-people.jpg") center / cover no-repeat; }
.expect-card:nth-child(2) .expect-photo { background: url("../assets/bg-people-2.jpg") center / cover no-repeat; }
.expect-card:nth-child(3) .expect-photo { background: url("../assets/bg-people-3.jpg") center / cover no-repeat; }
.expect-card:nth-child(4) .expect-photo { background: url("../assets/bg-people.jpg") 30% / cover no-repeat; }

/* title + image column beside the prose (Why libraries?) */
.media-split {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 2rem 3rem;
  align-items: start;
}

.media-col h2 { margin: 0 0 1.2rem; }

.media-split .prose-col {
  max-width: none;
  margin: 0;
}

/* centered reading column inside a full-width color block */
.prose-col {
  max-width: 46rem;
  margin: 0 auto;
}

.prose-col p { margin: 0 0 0.8rem; }

.prose-col ul {
  margin: 0 0 0.8rem;
  padding-left: 1.4rem;
}

.prose-col li { margin-bottom: 0.25rem; }


/* ------------------------------------------------------------------
   Below-hero zone: Free Library-inspired treatment. White ground,
   crimson links, flat color-block band. The map hero above keeps the
   paper/green/yellow look.
   ------------------------------------------------------------------ */

.below-hero { background: #fff; }

.below-hero a { color: var(--fl-red); }

/* --- sections: neutral grounds with colored title bars; the band and
   "Why libraries?" are the only full-saturation moments --- */

.section-block {
  border-top: 1px solid var(--fl-rule);
  padding: 3rem 0 3.5rem;
  color: #2b2b2b;
}

.section--teal,
.section--olive { background: #fff; }

.state-list-section.section--olive,
.resources-section.section--olive { background: #f4f4f4; } /* grey wells */
.section--orange { background: var(--band-coral); }         /* the crescendo */

.below-hero .section-block a { color: var(--fl-red); }

.below-hero .section-block p,
.below-hero .section-block ul {
  color: #4a4a4a;
}

/* NYPL-style colored overline bar on each section title */
.section-block h2::before {
  content: "";
  display: block;
  width: 3.2rem;
  height: 6px;
  margin-bottom: 0.6rem;
  background: var(--band-violet);
}

.state-list-section h2::before,
.resources-section h2::before { background: var(--band-pine); }

.why-section h2::before { background: #fff; }

/* the crescendo block keeps white-on-orange */
.why-section {
  color: #fff;
  border-top: none;
}

.below-hero .why-section p,
.below-hero .why-section ul {
  color: rgba(255, 255, 255, 0.92);
}

.below-hero .why-section a { color: #fff; }


/* --- Attend / Host / Learn color-block band --- */

.pathways {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.pathway {
  padding: 2.4rem 2.8rem 2.6rem;
  color: #fff;
}

.pathway--attend { background: var(--band-violet); }
.pathway--host   { background: var(--band-coral); }
.pathway--learn  { background: var(--band-pine); }

.pathway h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  margin: 0 0 0.5rem;
}

.pathway p {
  margin: 0 0 1rem;
  font-size: 0.97rem;
  line-height: 1.5;
}

.below-hero .pathway a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.below-hero .pathway a::before { content: "\203A\00a0"; /* › */ }

/* --- Free Library-style cards: square corners, neutral greys, red chips --- */

.below-hero .expect-photo {
  border-radius: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30'%3E%3Cpath d='M0 24 L 10 14 L 17 20 L 27 9 L 40 22 L 40 30 L 0 30 Z' fill='%23c6c6c6'/%3E%3Ccircle cx='31' cy='7' r='3.5' fill='%23c6c6c6'/%3E%3C/svg%3E") center / 45% no-repeat,
    #e9e9e9;
}

/* card title, styled as the red chip (chip and title are one element) */
.below-hero .expect-tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--fl-red);
  padding: 0.26rem 0.65rem;
  margin: 0 0 0.45rem;
}

/* ------------------------------------------------------------------
   State events modal (stand-in for the per-state pages)
   ------------------------------------------------------------------ */

.state-modal {
  border: none;
  border-radius: 10px;
  box-shadow: 0 14px 44px rgba(38, 34, 27, 0.35);
  background: #fffdf8;
  color: var(--ink);
  padding: 1.4rem 1.6rem 1.5rem;
  width: min(26rem, calc(100vw - 2rem));
}

.state-modal::backdrop { background: rgba(38, 34, 27, 0.45); }

.state-modal h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.45rem;
  margin: 0 1.6rem 0.1rem 0;
}

.modal-close {
  position: absolute;
  top: 0.6rem;
  right: 0.7rem;
  border: none;
  background: none;
  padding: 0.1rem 0.3rem;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink-faint);
  cursor: pointer;
}

.modal-close:hover,
.modal-close:focus-visible { color: var(--ink); }

.modal-systems {
  color: var(--ink-faint);
  font-size: 0.85rem;
  margin: 0 0 0.4rem;
}

.modal-events {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
}

.modal-events li {
  display: grid;
  gap: 0.05rem;
  padding: 0.6rem 0;
  border-bottom: 1px dashed var(--rule);
}

.modal-events li:last-child { border-bottom: none; padding-bottom: 0; }

.ev-date {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent-deep);
}

.ev-title { font-weight: 600; }

.ev-place {
  font-size: 0.9rem;
  color: var(--ink-soft);
}

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

/* dark charcoal close, Free Library-style */
.site-footer {
  background: #3f3f41;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
}

.site-footer a { color: inherit; }

/* ------------------------------------------------------------------
   Small screens: stack, map below text
   ------------------------------------------------------------------ */

@media (max-width: 54rem) {
  .cta-row { flex-wrap: wrap; }

  .hero {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-top: 2.5rem;
  }

  .handwritten { white-space: normal; }

  .pathways { grid-template-columns: 1fr; }

  /* media splits stack on small screens */
  .media-split { grid-template-columns: 1fr; }

  /* on small screens the nav flows in the page instead of floating */
  .floating-nav {
    position: static;
    justify-content: center;
    gap: 1.8rem;
    padding: 1.1rem 1rem 0;
  }
}