/*
Theme Name:  FOCPL
Theme URI:   https://focplnc.org
Author:      Friends of Orange County Public Library
Description: Literal FOAL-inspired custom theme for focplnc.org. Code-first, ACF-powered, WP Local ready.
Version:     1.3.89
License:     GNU General Public License v2 or later
Text Domain: focpl
*/

/* ============================================================
   DESIGN TOKENS live in assets/css/tokens.css (enqueued before
   this file, and on their own in wp-admin and the login page).
   Do not add :root declarations here.
   ============================================================ */

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 1rem;
}
img { max-width: 100%; display: block; height: auto; }
a {
  color: var(--ocpl-blue);
  text-decoration: none;
  transition: color var(--transition), opacity var(--transition), background-color var(--transition);
}
a:hover { color: var(--ocpl-blue-mid); text-decoration: underline; }

/* Focus — visible only for keyboard navigation */
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--ocpl-blue); outline-offset: 3px; border-radius: var(--radius-sm); }

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.sr-only { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.ext-mark { font-size: 0.75em; margin-left: 3px; }

/* ============================================================
   LAYOUT
   ============================================================ */
.container, .container--mid {
  width: min(100%, var(--max));
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container--mid { width: min(100%, var(--max-mid)); }
.section, .home-section { padding: var(--section-pad) 0; }
.section--page { padding-top: 36px; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--heading);
  line-height: 1.2;
  margin: 0 0 16px;
  font-weight: 700;
  text-rendering: optimizeLegibility;
}
h1 { font-size: clamp(1.9rem, 5vw, 2.9rem);     color: var(--ocpl-blue-mid); }
h2 { font-size: clamp(1.45rem, 3.5vw, 2.1rem); color: var(--ocpl-blue); }
h3 { font-size: clamp(1.05rem, 2vw, 1.2rem);   color: var(--ocpl-blue); }
h4 { font-size: clamp(0.95rem, 1.5vw, 1.05rem); font-weight: 700; }
h5 { font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
p  { margin: 0 0 16px; line-height: 1.7; }

/* Use .h2--accent for orange h2s (pull quotes, callouts, campaign pages) */
.h2--accent { color: var(--ocpl-orange); }

.section-heading { text-align: center; margin-bottom: 40px; }
.section-heading h2 { margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.04em; }
.section-heading p  { max-width: 640px; margin: 0 auto; color: var(--text-mid); font-size: 0.97rem; font-style: italic; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
  padding: 0 24px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
  white-space: nowrap;
}
.btn:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.btn--filled {
  background: var(--ocpl-blue);
  border-color: var(--ocpl-blue);
  color: var(--white);
}
.btn--filled:hover {
  background: var(--ocpl-blue-dark);
  border-color: var(--ocpl-blue-dark);
  color: var(--white);
  text-decoration: none;
}
.btn--outline {
  background: transparent;
  color: var(--ocpl-blue);
  border-color: var(--ocpl-blue);
}
.btn--outline:hover {
  background: var(--ocpl-blue);
  color: var(--white);
  text-decoration: none;
}
.btn--action {
  background: var(--ocpl-orange);
  border-color: var(--ocpl-orange);
  color: var(--white);
}
.btn--action:hover {
  background: var(--ocpl-orange-dark);
  border-color: var(--ocpl-orange-dark);
  color: var(--white);
  text-decoration: none;
}
/* Destructive actions: "Stop sending", "Delete", "Remove volunteer".
   Outline by default — a filled red next to a filled blue reads as equal
   weight, and destruction should never look like the primary path. Add
   .btn--filled only on a confirmation step where the destructive action
   IS the primary. */
.btn--danger {
  background: transparent;
  color: var(--danger);
  border: 2px solid var(--danger-border);
}
.btn--danger:hover {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger-dark);
  text-decoration: none;
}
.btn--danger:focus-visible { box-shadow: 0 0 0 3px rgba(198,40,40,.35); }
.btn--danger.btn--filled { background: var(--danger); border-color: var(--danger); color: var(--white); }
.btn--danger.btn--filled:hover { background: var(--danger-dark); border-color: var(--danger-dark); }
.btn--text { padding-inline: 0; min-height: auto; font-size: 0.95rem; font-weight: 600; border: none; }

/* Touch targets: enlarge small tap controls on touch devices (WCAG 2.5.5)
   without making compact desktop controls chunky. */
@media (pointer: coarse) {
  .minutes-file__btn,
  .nl-years a,
  .ai-year-picker a,
  .arch-jump a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ============================================================
   WEATHER BANNER — only present during an NWS heat/cold alert
   ============================================================ */
.weather-banner {
  font-size: 0.85rem;
  line-height: 1.45;
}
.weather-banner--heat {
  background: #fdf3e3;
  color: #7a4a00;
  border-bottom: 1px solid #f0dcba;
}
.weather-banner--cold {
  background: var(--ocpl-blue-light);
  color: var(--ocpl-blue-dark);
  border-bottom: 1px solid #cfe4f0;
}
.weather-banner__inner {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 0;
}
.weather-banner__inner p { margin: 0; }
.weather-banner a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  white-space: nowrap;
}
.weather-banner a:hover { text-decoration: none; }

/* ============================================================
   UTILITY BAR
   ============================================================ */
.site-utility-bar {
  background: var(--ocpl-blue);
  font-size: 0.82rem;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.site-utility-bar__inner {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-utility-nav, .site-utility-nav ul {
  display: flex;
  align-items: center;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-utility-nav a,
.site-utility-bar__brandlink a {
  color: rgba(255,255,255,0.82);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color var(--transition);
  text-decoration: none;
}
.site-utility-nav a:hover,
.site-utility-bar__brandlink a:hover {
  color: var(--white);
  text-decoration: underline;
}

/* ============================================================
   SITE HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 3px solid var(--ocpl-blue);
  box-shadow: var(--shadow-nav);
}
.site-header__inner {
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  transition: min-height 0.3s ease;
}
.site-header.is-scrolled .site-header__inner {
  min-height: 80px;
}

/* Logo */
.site-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.site-logo:hover { text-decoration: none; opacity: .88; }
.site-logo__img {
  display: block;
  height: 76px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  transition: height 0.3s ease;
}
.site-header.is-scrolled .site-logo__img {
  height: 56px;
}
/* WP custom logo wrapper */
.site-logo .custom-logo-link img,
.site-logo .custom-logo-link {
  display: block;
  height: 84px;
  width: auto;
  max-width: 260px;
  transition: height 0.3s ease;
}
.site-header.is-scrolled .site-logo .custom-logo-link img,
.site-header.is-scrolled .site-logo .custom-logo-link {
  height: 64px;
}
/* Keep text fallback hidden — logo image handles branding */
.site-logo__text { display: none; }

/* Primary nav */
.site-nav .menu, .site-nav ul {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav li { position: relative; }
.site-nav > ul > li > a {
  display: block;
  padding: 8px 14px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ocpl-blue);
  text-decoration: none;
  border-radius: var(--radius);
  transition: background-color var(--transition), color var(--transition), box-shadow var(--transition);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.site-nav > ul > li > a:hover,
.site-nav > ul > li.current-menu-item > a {
  color: var(--ocpl-blue);
  background: var(--ocpl-blue-pale);
  text-decoration: none;
  box-shadow: inset 0 -3px 0 var(--ocpl-orange-hover);
}

/* Dropdown */
.site-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  width: max-content;
  max-width: 320px;
  display: none;
  flex-direction: column;
  gap: 1px;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--ocpl-blue);
  padding: 8px;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow);
  z-index: 10;
}
.site-nav .sub-menu a {
  display: block;
  padding: 8px 12px;
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  text-align: left;
  white-space: nowrap;
  transition: background-color var(--transition), color var(--transition);
}
.site-nav .sub-menu a:hover {
  background: var(--ocpl-blue-pale);
  color: var(--ocpl-blue);
  text-decoration: none;
}
.site-nav li:hover > .sub-menu,
.site-nav li:focus-within > .sub-menu { display: flex; }
/* Right-edge items get their panel right-aligned instead (set by main.js
   when a left-anchored panel would run past the viewport) */
.site-nav .sub-menu--flip { left: auto; right: 0; }

/* Grouped sections inside a dropdown: a .nav-group item renders as a
   heading and its children flow inline in the same panel (no flyout) */
.site-nav .sub-menu li.nav-group { margin-top: 6px; border-top: 1px solid var(--border); padding-top: 4px; }
.site-nav .sub-menu li.nav-group:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.site-nav .nav-group__label { display: block; padding: 6px 12px 2px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-light);
  /* the panel centres each item as a box, but a group's <li> is as wide as its children,
     so the label text has to centre itself to sit over the centred links */
  text-align: center; }
.site-nav .sub-menu .sub-menu {
  position: static;
  display: flex;
  min-width: 0;
  width: auto;
  max-width: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
.mobile-nav .nav-group__label { display: block; padding: 8px 14px 2px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-light); }
.mobile-nav .sub-menu .sub-menu { margin: 0 0 4px 12px; }

/* Hamburger */
.nav-toggle {
  display: none;
  border: 1px solid var(--border);
  background: none;
  padding: 8px;
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px;
  background: var(--heading); margin: 4px 0;
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition), background-color var(--transition);
}

/* Mobile nav */
.mobile-nav {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(92vw, 340px);
  background: var(--white);
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  padding: 24px;
  overflow: auto;
  box-shadow: var(--shadow-lg);
  border-left: 3px solid var(--ocpl-blue);
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav ul { list-style: none; padding: 0; margin: 40px 0 0; }
.mobile-nav li + li { margin-top: 2px; }
.mobile-nav a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition);
}
.mobile-nav a:hover {
  background: var(--ocpl-blue-pale);
  color: var(--ocpl-blue);
  text-decoration: none;
}
.mobile-nav .sub-menu { margin: 4px 0 4px 16px; }
.mobile-nav .sub-menu a { font-size: 0.88rem; color: var(--text-mid); }
.mobile-nav__close {
  display: block;
  margin-left: auto;
  border: 1px solid var(--border);
  background: none;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: var(--radius);
  color: var(--text);
  transition: background-color var(--transition);
}
.mobile-nav__close:hover { background: var(--light-gray); }
.mobile-nav__cta { display: grid; gap: 10px; margin-top: 24px; }
/* .mobile-nav a (0,1,1) outranks .btn--filled (0,1,0), which had been painting the
   drawer's "Join the Friends" button dark-on-blue. Restore the button's own colours. */
.mobile-nav__cta .btn--filled { color: var(--white); }
.mobile-nav__cta .btn--filled:hover { color: var(--white); }
.mobile-nav__cta .btn--outline { color: var(--ocpl-blue); }

/* ============================================================
   HERO
   ============================================================ */
/* Hero styles → see HERO — glassmorphic split layout section below */

/* ============================================================
   INTRO
   ============================================================ */
.home-section--intro {
  background: var(--white);
  position: relative;
  z-index: 2;
}
.home-section__copy {
  font-size: 1.05rem;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  color: var(--text-mid);
  line-height: 1.75;
}

/* ============================================================
   PROGRAMS
   ============================================================ */
.home-section--programs { background: var(--ocpl-blue); border: none; padding-bottom: 100px; }

.program-grid {
  display: grid;
  /* Four cards → a clean 2×2; three columns left an orphan on row two. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}
.program-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
  display: flex;
  flex-direction: column;
}
.program-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
  border-color: var(--mid-gray);
}
.program-card__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  flex-shrink: 0;
}
.program-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Legacy — direct img child (fallback for old markup) */
.program-card > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.program-card__body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.program-card__body h3 {
  color: var(--ocpl-blue);
  font-size: 1rem;
  margin-bottom: 6px;
  font-weight: 700;
}
/* When on dark blue programs section, headings stay white */
.home-section--programs .section-heading h2 { color: var(--white); }
.home-section--programs .section-heading p  { color: var(--text-on-dark-muted); }
.program-card__body p { color: var(--text-mid); font-size: 0.9rem; margin-bottom: 12px; }
/* The stretch that pins "Learn more" to the card foot lives on the last
   paragraph only, so two-paragraph descriptions stack naturally. */
.program-card__body p:last-of-type { flex: 1; }
.program-card__link {
  font-weight: 700;
  font-size: 0.87rem;
  color: var(--ocpl-blue);
  text-decoration: underline;
  margin-top: auto;
}
.program-card__link:hover { color: var(--ocpl-orange); }
.program-card__body a {
  font-weight: 700;
  font-size: 0.87rem;
  color: var(--ocpl-blue);
  text-decoration: underline;
}
.program-card__body a:hover { color: var(--ocpl-orange); }
.program-card--simple { box-shadow: none; }

/* ============================================================
   GET INVOLVED
   ============================================================ */
.home-section--actions {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.action-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.action-pill {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 28px;
  border-radius: 100px;
  background: var(--white);
  border: 2px solid var(--ocpl-blue);
  color: var(--ocpl-blue);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.action-pill:hover {
  background: var(--ocpl-blue);
  border-color: var(--ocpl-blue);
  color: var(--white);
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,86,133,0.25);
}
.home-intro__note {
  margin-top: 10px;
  font-size: .9rem;
  font-style: italic;
  color: var(--text-mid);
  text-align: center;
}
.home-actions__note {
  text-align: center;
  margin: 18px 0 0;
  color: var(--text-mid);
  font-size: 0.92rem;
}

/* ============================================================
   HOMEPAGE — ADVOCACY BAND (June 2026)
   ============================================================ */
.home-advocacy {
  background: linear-gradient(135deg, var(--ocpl-blue-dark), var(--ocpl-blue));
  color: var(--text-on-dark);
  text-align: center;
}
.home-advocacy__eyebrow {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-on-dark-muted);
  margin: 0 0 10px;
}
.home-advocacy h2 {
  color: var(--white);
  margin: 0 0 14px;
}
.home-advocacy__lead {
  max-width: 680px;
  margin: 0 auto 30px;
  line-height: 1.65;
}
.home-advocacy__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 48px;
  justify-content: center;
  margin-bottom: 32px;
}
.home-advocacy__num {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.3rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1.1;
}
.home-advocacy__label {
  display: block;
  font-size: .85rem;
  color: var(--text-on-dark-muted);
  margin: 6px auto 0;
  max-width: 190px;
}
.home-advocacy__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.home-advocacy .btn--outline {
  border-color: var(--text-on-dark-subtle);
  color: var(--white);
}
.home-advocacy .btn--outline:hover {
  background: rgba(255,255,255,.12);
  border-color: var(--white);
}

/* ============================================================
   IMPACT STATS
   ============================================================ */

/* ── Category grouping ── */
.impact-category { margin-bottom: 48px; }
.impact-category:last-child { margin-bottom: 0; }

.impact-category__heading {
  font-family: var(--font-heading);
  font-size: .8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ocpl-green);
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.15);
  display: flex;
  align-items: center;
  gap: 10px;
}
.impact-category__heading::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--ocpl-green);
  flex-shrink: 0;
}

/* ── Grid ── */
.impact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

/* ── Card ── */
.impact-card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg);
  padding: 22px 18px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  transition: background var(--transition), transform var(--transition);
}
.impact-card:hover {
  background: rgba(255,255,255,.12);
  transform: translateY(-2px);
}

/* ── Icon ── */
.impact-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 4px;
}
.impact-card__icon svg { width: 26px; height: 26px; display: block; }

.impact-card__icon--money     { background: rgba(180,205,149,.2); color: var(--ocpl-green); }
.impact-card__icon--people    { background: rgba(0,124,193,.25);  color: #7dd3f5; }
.impact-card__icon--reading   { background: rgba(255,255,255,.12); color: rgba(255,255,255,.8); }
.impact-card__icon--author    { background: rgba(181,96,22,.25);  color: #f5a675; }
.impact-card__icon--programs  { background: rgba(180,205,149,.2); color: var(--ocpl-green); }
.impact-card__icon--volunteers{ background: rgba(181,96,22,.25);  color: #f5a675; }
.impact-card__icon--books     { background: rgba(0,124,193,.25);  color: #7dd3f5; }
.impact-card__icon--number    { background: rgba(255,255,255,.1); color: rgba(255,255,255,.7); }
.impact-card__icon--other     { background: rgba(255,255,255,.1); color: rgba(255,255,255,.7); }

/* ── Number ── */
.impact-card__number {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1;
}

/* ── Label ── */
.impact-card h4 {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ocpl-green);
  margin: 0;
  line-height: 1.3;
}

/* ── Description ── */
.impact-card p {
  font-size: .8rem;
  color: var(--text-on-dark-muted); /* was rgba(255,255,255,.6) — under AA at .8rem */
  margin: 0;
  line-height: 1.45;
}

/* ============================================================
   QUOTE
   ============================================================ */
.home-section--quote {
  background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
/* Staff-voice band: pale and restrained so the dark impact and advocacy
   sections around it keep their emphasis. */
/* Slightly tighter than the default section padding: the fixed-height
   slider already carries air for its tallest quote, and the band below
   is white now, so the seam does the separating. */
.home-staff-quotes {
  background: var(--ocpl-blue-pale);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: clamp(40px, 5.5vw, 64px) 0;
}
.home-staff-quotes__eyebrow {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .78rem;
  font-weight: 700;
  color: var(--ocpl-orange-dark, #b8541a);
  margin: 0 0 8px;
}
.home-staff-quotes__heading {
  text-align: center;
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  margin: 0 0 28px;
  color: var(--ocpl-blue-dark, var(--ocpl-blue-dark));
}
.home-quote {
  text-align: center;
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2.5vw, 1.55rem);
  color: var(--ocpl-blue);
  line-height: 1.6;
  font-style: italic;
}
.home-quote p { color: inherit; margin-bottom: 0; }
.home-quote cite {
  display: block;
  margin-top: 18px;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  color: var(--text-mid);
  font-style: normal;
}

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero {
  padding: 48px 0 28px;
  background: var(--ocpl-blue);
  border-bottom: 4px solid var(--ocpl-green);
}
.page-hero__inner { text-align: center; }
.page-hero__eyebrow {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ocpl-green);
  font-size: 0.75rem;
  margin-bottom: 12px;
  display: block;
  /* No opacity: it blended the green toward the blue and dropped the small
     uppercase eyebrow below WCAG AA (~3.97:1). Full-strength green clears it. */
}
.page-hero__inner h1 {
  color: var(--white);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
}
.page-hero__intro a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.page-hero__intro a:hover { text-decoration: none; color: var(--white); }
.page-hero__intro {
  max-width: 640px;
  margin: 0 auto;
  color: var(--text-on-dark-muted);
  font-size: 1rem;
}

/* ============================================================
   PROSE / PAGE CONTENT
   ============================================================ */
.prose { color: var(--text); }
.prose--page h2, .prose--page h3, .prose--page h4 { margin-top: 32px; color: var(--ocpl-blue); }
.prose--page ul, .prose--page ol { padding-left: 24px; margin: 0 0 18px; }
.prose--page li + li { margin-top: 6px; }

/* Single post layout */
.post-thumbnail { margin-bottom: 24px; }
.post-thumbnail img { width: 100%; height: auto; display: block; }
.post-footer { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 16px; }
.btn--dark { display: inline-flex; align-items: center; gap: 6px; padding: 0 20px; min-height: 40px; border-radius: var(--radius); background: var(--heading); color: var(--white); font-weight: 700; font-size: 0.88rem; text-decoration: none; transition: background-color var(--transition); }
.btn--dark:hover { background: var(--ocpl-blue); color: var(--white); text-decoration: none; }

/* ============================================================
   BOARD PAGE
   ============================================================ */
.board-section--officers {
  background: var(--ocpl-blue-pale);
  border-bottom: 1px solid var(--ocpl-blue-light);
}
.board-section--members { background: var(--white); }

.board-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;
}
.board-grid--officers {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  max-width: 980px;
  margin: 0 auto;
}
.board-grid--members {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

/* Board card */
.board-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.board-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
  border-color: var(--mid-gray);
}
.board-card--officer {
  border-top: 3px solid var(--ocpl-blue);
  box-shadow: var(--shadow-sm);
}
.board-card--officer:hover { border-top-color: var(--ocpl-orange); }

/* Photo */
.board-card__photo-wrap { position: relative; }
.board-card__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: opacity var(--transition);
}
.board-card:hover .board-card__photo { opacity: 0.92; }
.board-card__photo--fallback {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ocpl-blue-pale);
  color: var(--ocpl-blue);
  font-family: var(--font-heading);
  font-size: clamp(3rem, 8vw, 4.5rem);
  font-weight: 700;
}
.board-card__role-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: var(--ocpl-blue);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border-radius: 999px;
}

/* Card body */
.board-card__body { padding: 18px 20px 22px; }
.board-card__name {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--heading);
}
.board-card__role {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ocpl-blue);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 10px;
  font-family: var(--font-heading);
}
.board-card__email {
  display: block;
  font-size: 0.84rem;
  color: var(--ocpl-blue);
  margin-bottom: 12px;
  word-break: break-word;
  text-decoration: none;
}
.board-card__email:hover { color: var(--ocpl-blue); text-decoration: underline; }
.board-card__bio {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 0.88rem;
  color: var(--text-mid);
  line-height: 1.6;
}
.board-card__bio p:last-child { margin-bottom: 0; }

/* Board CTA */
.board-cta { background: var(--ocpl-blue); }
.board-cta__inner { text-align: center; }
.board-cta__inner h2 { color: var(--white); margin-bottom: 12px; }
.board-cta__inner > p {
  color: var(--text-on-dark-muted);
  max-width: 560px;
  margin: 0 auto 28px;
}
.board-cta__actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  margin-top: 0;
  background: var(--ocpl-blue);
  border-top: 4px solid var(--ocpl-green);
}
.site-footer__tagline {
  padding: 52px 0 40px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.site-footer__tagline-lead {
  margin: 0 0 8px;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 800;
  color: var(--text-on-dark);
}
.site-footer__tagline-rest {
  margin: 0 auto;
  max-width: 640px;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
}
.site-footer__main { padding: 48px 0 36px; }
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.1fr;
  gap: 40px;
}
.site-footer h3 {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: var(--fs-xs);
  color: var(--ocpl-green);
  margin-bottom: 16px;
  font-weight: 700;
}
.site-footer__name { font-weight: 700; color: var(--white); margin-bottom: 8px; font-size: 1rem; font-family: var(--font-heading); }
.site-footer p { color: var(--text-on-dark-muted); font-size: 0.9rem; }
.site-footer__links ul { list-style: none; margin: 0; padding: 0; }
.site-footer__links li + li { margin-top: 8px; }
.site-footer__links a {
  color: var(--text-on-dark-muted);
  font-size: 0.9rem;
  text-decoration: none;
  transition: color var(--transition);
}
.site-footer__links a:hover { color: var(--white); text-decoration: underline; }
.site-footer__buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.footer-social { display: flex; gap: 8px; margin-top: 18px; }
.footer-social a {
  width: 36px; height: 36px;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-on-dark-muted);
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
  text-decoration: none;
}
.footer-social a:hover {
  background: var(--ocpl-orange);
  border-color: var(--ocpl-orange);
  color: var(--white);
}
.footer-social svg { width: 16px; height: 16px; fill: currentColor; }
.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 16px 0 24px;
  color: var(--text-on-dark-muted); /* was --subtle (~2.9:1, failed AA) */
  font-size: 0.84rem;
}
/* Address + connect column */
.site-footer__address {
  color: var(--text-on-dark-muted);
  font-size: 0.9rem;
  margin-bottom: 8px;
}
.site-footer__connect a {
  color: var(--text-on-dark-muted);
  text-decoration: none;
  transition: color var(--transition);
}
.site-footer__connect a:hover { color: var(--white); text-decoration: underline; }

/* ── Buttons on dark backgrounds (board CTA + footer) ─────── */
.board-cta .btn--filled,
.site-footer__buttons .btn--filled {
  background: var(--ocpl-orange);
  border-color: var(--ocpl-orange);
  color: var(--white);
}
.board-cta .btn--filled:hover,
.site-footer__buttons .btn--filled:hover {
  background: var(--ocpl-orange-dark);
  border-color: var(--ocpl-orange-dark);
}
.board-cta .btn--outline,
.site-footer__buttons .btn--outline {
  border-color: rgba(255,255,255,0.5);
  color: var(--white);
}
.board-cta .btn--outline:hover,
.site-footer__buttons .btn--outline:hover {
  background: rgba(255,255,255,0.12);
  border-color: var(--white);
}
.site-footer__buttons .btn--text { color: var(--text-on-dark-muted); }
.site-footer__buttons .btn--text:hover { color: var(--white); }


/* ============================================================
   SUBTLE WAVE DECORATIONS
   2 tones per section, one peak + one valley per wave,
   sitting in the bottom (or top) half of the section only.
   ============================================================ */
.section-waves {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  /* Height = 50% of section — waves never exceed the midpoint */
  height: 50%;
  overflow: hidden;
  line-height: 0;
  z-index: 1;
  pointer-events: none;
}
.section-waves--top {
  bottom: auto;
  top: 0;
}
.section-waves svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.section-waves--top svg {
  top: 0;
  bottom: auto;
}

/* Sections that carry waves need relative positioning.
   Content always sits above (z-index: 2). */
.home-hero { position: relative; }
.home-section--intro    { position: relative; }
.home-section--programs { position: relative; }
/* Same treatment as the advocacy band ("When It Counted"): the deep
   gradient marks both proof sections, distinct from the flat navy of
   the support band above. No wave divider on this register. */
.home-section--impact   { position: relative; background: linear-gradient(135deg, var(--ocpl-blue-dark), var(--ocpl-blue)); }
.home-section--impact .section-heading h2 { color: var(--white); }
.home-section--impact .section-heading p  { color: rgba(255,255,255,.7); }
/* Outline buttons default to blue-on-transparent, which vanishes on this
   section's blue field. Same white-outline treatment the advocacy band uses. */
.home-section--impact .btn--outline {
  border-color: var(--text-on-dark-subtle);
  color: var(--white);
}
.home-section--impact .btn--outline:hover {
  background: rgba(255,255,255,.12);
  border-color: var(--white);
}

.home-hero__text,
.home-section--intro > *:not(.section-waves),
.home-section--programs > *:not(.section-waves),
.home-section--impact > *:not(.section-waves) {
  position: relative;
  z-index: 2;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .site-nav { display: none; }
  .nav-toggle { display: block; }
  .program-grid,
  .impact-grid,
  .event-listing,
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  body { font-size: 15px; }
  .site-utility-bar__inner { flex-direction: column; padding: 8px 0; }
  .site-header__inner { min-height: 68px; padding: 12px 0; }
  .site-logo__img { height: 48px; }
  .program-grid,
  .impact-grid,
  .event-listing,
  .site-footer__grid { grid-template-columns: 1fr; }
  .board-grid--officers,
  .board-grid--members { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .board-grid--officers,
  .board-grid--members { grid-template-columns: 1fr; }
}

/* ============================================================
   BOOK SALES PAGE
   ============================================================ */

/* ── Section backgrounds ── */
.booksale-section--overview   { background: var(--white); }
.booksale-section--donations  { background: var(--off-white); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.booksale-section--contact    { background: var(--ocpl-blue); }

/* ── Overview grid: 2×2 cards ── */
.booksale-overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.booksale-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow var(--transition), transform var(--transition);
}
.booksale-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.booksale-card--featured { border-top: 4px solid var(--ocpl-blue); }
.booksale-card--member   { border-top: 4px solid var(--ocpl-orange); }
.booksale-card--ongoing  { border-top: 4px solid var(--ocpl-green-dark); }
.booksale-card--volunteer { border-top: 4px solid var(--ocpl-blue-mid); }

.booksale-card__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.booksale-card--featured  .booksale-card__icon { background: var(--ocpl-blue-pale);    color: var(--ocpl-blue); }
.booksale-card--member    .booksale-card__icon { background: var(--ocpl-orange-light);  color: var(--ocpl-orange); }
.booksale-card--ongoing   .booksale-card__icon { background: #eef5e6;                   color: var(--ocpl-green-dark); }
.booksale-card--volunteer .booksale-card__icon { background: #e6f2fa;                   color: var(--ocpl-blue-mid); }
.booksale-card__icon svg { width: 36px; height: 36px; }

.booksale-card h2 {
  font-size: 1.15rem;
  margin: 0;
  color: var(--heading);
}
.booksale-card p { color: var(--text-mid); font-size: 0.95rem; margin: 0; }
.booksale-card p + p { margin-top: 8px; }
.booksale-card .btn { align-self: flex-start; margin-top: auto; padding-top: 0; }
.booksale-directions {
  background: var(--ocpl-blue-pale);
  border-left: 3px solid var(--ocpl-blue);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 10px 14px;
  font-size: 0.9rem !important;
  color: var(--ocpl-blue) !important;
}

/* ── Donation infographic ── */
.donation-infographic {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.donation-col {
  padding: 36px 32px;
}
.donation-col--accept  { background: var(--success-soft); }
.donation-col--decline { background: var(--danger-soft); }

.donation-col__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid currentColor;
}
.donation-col--accept  .donation-col__header { color: var(--success); border-color: var(--success-border); }
.donation-col--decline .donation-col__header { color: var(--danger); border-color: var(--danger-border); }

.donation-col__icon { flex-shrink: 0; }
.donation-col__icon svg { width: 32px; height: 32px; display: block; }
.donation-col--accept  .donation-col__icon { color: var(--success); }
.donation-col--decline .donation-col__icon { color: var(--danger); }

.donation-col h3 {
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0;
  font-family: var(--font-heading);
}
.donation-col--accept  h3 { color: var(--success); }
.donation-col--decline h3 { color: var(--danger); }

.donation-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.donation-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.93rem;
  color: var(--text);
  line-height: 1.5;
}
.donation-list__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}
.donation-list--accept  .donation-list__dot { background: var(--success); }
.donation-list--decline .donation-list__dot { background: var(--danger); }

.donation-note {
  margin-top: 20px;
  padding: 12px 16px;
  background: rgba(198,40,40,0.06);
  border-radius: var(--radius);
  font-size: 0.86rem;
  color: var(--danger);
  line-height: 1.55;
}

.donation-divider {
  width: 1px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--border);
  position: relative;
  padding: 24px 0;
}
.donation-divider__line { flex: 1; width: 1px; background: var(--border); }
.donation-divider__label {
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  writing-mode: vertical-rl;
  padding: 10px 0;
  background: var(--off-white);
  z-index: 1;
}

/* ── Contact CTA ── */
.booksale-contact {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-lg);
  padding: 40px;
}
.booksale-contact__icon {
  width: 64px;
  height: 64px;
  background: rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ocpl-green);
}
.booksale-contact__icon svg { width: 36px; height: 36px; }
.booksale-contact__body h2 { color: var(--white); margin-bottom: 10px; font-size: 1.5rem; }
.booksale-contact__body p  { color: rgba(255,255,255,0.7); font-size: 0.95rem; margin-bottom: 6px; }
.booksale-contact__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem !important;
  color: var(--white) !important;
  margin-top: 16px !important;
  margin-bottom: 2px !important;
}
.booksale-contact__role {
  font-size: 0.82rem !important;
  color: var(--ocpl-green) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin-bottom: 20px !important;
}
.booksale-section--contact .btn--filled {
  background: var(--ocpl-orange);
}
.booksale-section--contact .btn--filled:hover { background: var(--ocpl-orange-dark); }

/* ── Responsive ── */
@media (max-width: 860px) {
  .booksale-overview { grid-template-columns: 1fr; }
  .donation-infographic {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .donation-divider {
    width: 100%;
    height: 1px;
    flex-direction: row;
    padding: 0 24px;
  }
  .donation-divider__line { flex: 1; height: 1px; width: auto; }
  .donation-divider__label { writing-mode: horizontal-tb; padding: 0 12px; }
  .booksale-contact { flex-direction: column; gap: 20px; padding: 28px; }
}

@media (max-width: 600px) {
  .booksale-overview { grid-template-columns: 1fr; }
  .booksale-card { padding: 24px 20px; }
  .donation-col { padding: 24px 20px; }
}

/* Donation infographic additions */
.donation-note--accept {
  background: rgba(46,125,50,0.06);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 0.86rem !important;
  color: var(--success) !important;
  margin-top: 20px;
  line-height: 1.55;
}
.donation-rehome {
  margin-top: 20px;
  padding: 14px 16px;
  background: rgba(198,40,40,0.04);
  border-radius: var(--radius);
  border: 1px dashed rgba(198,40,40,0.2);
}
.donation-rehome__label {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: var(--danger) !important;
  margin: 0 0 8px !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.donation-rehome__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.donation-rehome__list li {
  font-size: 0.85rem;
  color: var(--text-mid);
  padding-left: 14px;
  position: relative;
  line-height: 1.45;
}
.donation-rehome__list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--danger);
  font-size: 0.78rem;
}
.donation-rehome__note {
  margin: 10px 0 0;
  font-size: 0.82rem;
  color: var(--text-mid);
}

/* ── Upcoming sale details (event description shown in place) ── */
.booksale-upcoming__details {
  margin: -6px 0 16px;
  padding: 14px 18px;
  background: var(--ocpl-blue-pale);
  border-left: 3px solid var(--ocpl-blue);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.booksale-upcoming__details p {
  margin: 0 0 8px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-dark);
}
.booksale-upcoming__details p:last-child { margin-bottom: 0; }
.booksale-upcoming__join {
  margin: 4px 0 0;
  font-size: 0.92rem;
  color: var(--text-mid);
}
.booksale-upcoming__join a { color: var(--ocpl-blue); font-weight: 600; }

/* Financials endmatter: quiet off-white per the sources/method pattern. */
.fin-legal-section { background: var(--off-white); border-top: 1px solid var(--border); }

/* ── Good to know at the sale ── */
.booksale-gtk {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 980px) { .booksale-gtk { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .booksale-gtk { grid-template-columns: 1fr; } }
.booksale-gtk__item {
  background: var(--white);
  border: 1px solid var(--border, #d8dee6);
  border-radius: var(--radius);
  padding: 20px 18px;
}
.booksale-gtk__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  margin-bottom: 10px;
  background: var(--ocpl-blue-pale);
  color: var(--ocpl-blue);
}
.booksale-gtk__item h3 { margin: 0 0 6px; font-size: 1rem; }
.booksale-gtk__item p { margin: 0; font-size: 0.88rem; line-height: 1.6; color: var(--text-mid); }

/* ── Donation drop-off status ── */
.booksale-intake {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 720px;
  margin: 0 auto 28px;
  padding: 16px 18px;
  border-radius: var(--radius);
}
.booksale-intake--open {
  background: #eef7ee;
  border: 1px solid #cfe6cf;
}
.booksale-intake--paused {
  background: #fdf6ec;
  border: 1px solid #f0dcbd;
}
.booksale-intake__icon { flex-shrink: 0; margin-top: 2px; }
.booksale-intake--open .booksale-intake__icon { color: var(--success); }
.booksale-intake--paused .booksale-intake__icon { color: var(--ocpl-orange); }
.booksale-intake__status {
  margin: 0 0 4px;
  font-weight: 700;
  font-size: 0.98rem;
}
.booksale-intake--open .booksale-intake__status { color: var(--success); }
.booksale-intake--paused .booksale-intake__status { color: var(--ocpl-orange); }
.booksale-intake__body p:not(.booksale-intake__status) {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-dark);
}

/* ============================================================
   BOARD MEETING MINUTES PAGE
   ============================================================ */
.minutes-section { background: var(--white); }

/* ── Empty state ── */
.minutes-empty {
  text-align: center;
  padding: 64px 20px;
  color: var(--text-mid);
}
.minutes-empty svg { width: 52px; height: 52px; margin: 0 auto 16px; color: var(--mid-gray); }
.minutes-empty p { margin: 0 0 6px; font-size: 1rem; }

/* ── Year groups ── */
.minutes-list { display: flex; flex-direction: column; gap: 40px; }

.minutes-year__heading {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 1.3rem;
  color: var(--ocpl-blue);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ocpl-blue-light);
  font-family: var(--font-heading);
  font-weight: 700;
}
.minutes-year__count {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Archive navigation: jump-nav + collapsible year groups ── */
.arch-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px;
  margin-bottom: 12px;
}
@media (max-width: 600px) {
  /* narrow screens: single scrolling row, like the other year pickers */
  .arch-jump {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
    margin-bottom: 6px;
    scrollbar-width: thin;
  }
}
.arch-jump a {
  flex: 0 0 auto;
  padding: 5px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ocpl-blue);
  text-decoration: none;
  background: var(--white);
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.arch-jump a:hover { background: var(--ocpl-blue); border-color: var(--ocpl-blue); color: var(--white); }

details.minutes-year > summary.minutes-year__heading {
  cursor: pointer;
  list-style: none;
  outline-offset: 3px;
}
details.minutes-year > summary::-webkit-details-marker { display: none; }
details.minutes-year > summary::after {
  content: "";
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  margin: 0 4px 4px 0;
  border-right: 2px solid var(--ocpl-blue-mid);
  border-bottom: 2px solid var(--ocpl-blue-mid);
  transform: rotate(45deg);
  transition: transform var(--transition);
}
details.minutes-year[open] > summary::after { transform: rotate(-135deg); }
.minutes-year__count { margin-left: auto; } /* push count + chevron to the right */

/* ── File rows ── */
.minutes-files {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.minutes-file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-radius: var(--radius-md);
  background: var(--white);
  border: 1px solid var(--border);
  transition: background var(--transition), border-color var(--transition);
}
.minutes-file:hover {
  background: var(--ocpl-blue-pale);
  border-color: var(--ocpl-blue-light);
}
.minutes-file--draft { opacity: 0.75; }
.minutes-file--draft:hover { opacity: 1; }

.minutes-file__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.minutes-file__icon svg { width: 100%; height: 100%; display: block; }
.minutes-file__icon--doc { color: var(--ocpl-blue-mid); }
.minutes-file__icon--pdf { color: var(--ocpl-orange); }

.minutes-file__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.minutes-file__name {
  font-size: 0.94rem;
  color: var(--text);
  font-weight: 600;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.minutes-file__figs {
  font-size: 0.8rem;
  color: var(--text-light);
  font-weight: 500;
}
.minutes-draft-badge {
  font-size: var(--fs-xs);
  font-weight: 700;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ocpl-orange);
  background: var(--ocpl-orange-light);
  border: 1px solid rgba(181,96,22,0.2);
  padding: 2px 8px;
  border-radius: 999px;
}

.minutes-file__actions { display: flex; gap: 8px; flex-shrink: 0; }
.minutes-file__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  border-radius: var(--radius);
  font-size: 0.8rem;
  font-weight: 700;
  font-family: var(--font-heading);
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--ocpl-blue);
}
.minutes-file__btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.minutes-file__btn:hover {
  background: var(--ocpl-blue);
  border-color: var(--ocpl-blue);
  color: var(--white);
  text-decoration: none;
}

/* ── Single readable transcript view (/minutes/?read=ID) ── */
.minutes-back a { font-weight: 600; color: var(--ocpl-blue); text-decoration: none; font-size: 0.9rem; }
.minutes-back a:hover { text-decoration: underline; }
.minutes-read__note {
  background: var(--ocpl-blue-light);
  border-left: 3px solid var(--ocpl-blue-mid);
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 0.85rem;
  color: var(--text-mid);
  margin: 16px 0;
}
.minutes-read {
  margin: 20px 0 0;
  padding: 30px 36px;
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--text);
  word-break: break-word;
}
.minutes-read p { margin: 0 0 0.85em; }
.minutes-read p:last-child { margin-bottom: 0; }

/* ── Structured transcript pieces ── */
.mr-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 16px 0 2px;
}
.mr-meta__label {
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-light);
}
.mr-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: var(--font-heading);
  border: 1px solid;
}
.mr-chip--bal { color: var(--success-dark); background: var(--success-soft); border-color: var(--success-border); }
.mr-chip--mem { color: var(--ocpl-blue);   background: var(--ocpl-blue-light); border-color: #cfe6f3; }

.minutes-read .mr-h,
.minutes-read h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ocpl-blue);
  margin: 1.7em 0 0.5em;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.minutes-read .mr-h:first-child,
.minutes-read h3:first-child { margin-top: 0; }
.mr-h__by {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-mid);
}
.minutes-read .mr-sub,
.minutes-read h4,
.minutes-read h5 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ocpl-blue-dark);
  margin: 1.25em 0 0.3em;
}

/* ── Rich (docx-sourced) transcript content ── */
.minutes-read ul,
.minutes-read ol { margin: 0 0 0.85em; padding-left: 1.5em; }
.minutes-read li { margin: 0.25em 0; }
.minutes-read li ul,
.minutes-read li ol { margin: 0.25em 0 0; }
.minutes-read table { border-collapse: collapse; margin: 0 0 1em; max-width: 100%; }
.minutes-read td,
.minutes-read th { border: 1px solid var(--border); padding: 6px 12px; text-align: left; vertical-align: top; }
.minutes-read th { background: var(--ocpl-blue-pale); font-weight: 700; }
.minutes-read a { color: var(--ocpl-blue); }
.mr-junk { color: var(--text-light); font-size: 0.9rem; }
.mr-ledger {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  max-width: 440px;
  padding: 5px 0;
  border-bottom: 1px dotted var(--border);
}
.mr-ledger__label { color: var(--text-mid); }
.mr-ledger__val { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.minutes-read__note--ocr {
  background: var(--ocpl-orange-light);
  border-left-color: var(--ocpl-orange);
  color: var(--ocpl-orange-dark);
}

.minutes-admin-link {
  margin-top: 36px;
  font-size: 0.85rem;
  color: var(--text-light);
}
.minutes-admin-link a { color: var(--ocpl-blue); font-weight: 600; }

@media (max-width: 600px) {
  .minutes-file { flex-wrap: wrap; gap: 8px; }
  .minutes-file__name { white-space: normal; }
  .minutes-file__actions { width: 100%; }
  .minutes-file__btn { width: 100%; justify-content: center; }
}

/* ============================================================
   VOLUNTEER PAGE
   ============================================================ */

/* ── Section backgrounds ── */
.vol-section--why      { background: var(--white); }
.vol-section--signups  { background: var(--ocpl-blue-pale); border-top: 1px solid var(--ocpl-blue-light); border-bottom: 1px solid var(--ocpl-blue-light); }
.vol-section--benefits { background: var(--white); border-top: 1px solid var(--border); }
.vol-section--cta      { background: var(--ocpl-blue); }

/* ── Role cards ── */
.vol-roles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.vol-role-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--ocpl-blue);
  border-radius: var(--radius-md);
  padding: 24px 22px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow var(--transition), transform var(--transition);
}
.vol-role-card:nth-child(2) { border-top-color: var(--ocpl-orange); }
.vol-role-card:nth-child(3) { border-top-color: var(--ocpl-green-dark); }
.vol-role-card:nth-child(4) { border-top-color: var(--ocpl-blue-mid); }
.vol-role-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }

.vol-role-card__icon {
  width: 48px; height: 48px;
  background: var(--ocpl-blue-pale);
  color: var(--ocpl-blue);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.vol-role-card:nth-child(2) .vol-role-card__icon { background: var(--ocpl-orange-light); color: var(--ocpl-orange); }
.vol-role-card:nth-child(3) .vol-role-card__icon { background: #eef5e6; color: var(--ocpl-green-dark); }
.vol-role-card:nth-child(4) .vol-role-card__icon { background: #e6f2fa; color: var(--ocpl-blue-mid); }
.vol-role-card__icon svg { width: 28px; height: 28px; }

.vol-role-card h3 { font-size: 1rem; margin: 0; color: var(--heading); }
.vol-role-card > p { font-size: .9rem; color: var(--text-mid); margin: 0; line-height: 1.55; }

.vol-role-card__list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.vol-role-card__list li {
  font-size: .83rem;
  color: var(--text-mid);
  padding-left: 14px;
  position: relative;
}
.vol-role-card__list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--ocpl-blue);
  font-size: .75rem;
}
.vol-role-card:nth-child(2) .vol-role-card__list li::before { color: var(--ocpl-orange); }
.vol-role-card:nth-child(3) .vol-role-card__list li::before { color: var(--ocpl-green-dark); }
.vol-role-card:nth-child(4) .vol-role-card__list li::before { color: var(--ocpl-blue-mid); }

/* ── Sign-up section ── */
.vol-event-block { margin-bottom: 40px; }
.vol-event-block:last-child { margin-bottom: 0; }

.vol-no-events {
  text-align: center;
  padding: 56px 20px;
  color: var(--text-mid);
}
.vol-no-events svg { width: 48px; height: 48px; margin: 0 auto 16px; color: var(--mid-gray); }
.vol-no-events p { margin: 0 0 8px; font-size: 1rem; }
.vol-no-events__sub { font-size: .9rem; color: var(--text-light); }

/* ── Perks ── */
.vol-perks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.vol-perk {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 22px;
}
.vol-perk__icon {
  width: 40px; height: 40px;
  background: var(--ocpl-blue-pale);
  color: var(--ocpl-blue);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vol-perk__icon svg { width: 20px; height: 20px; }
.vol-perk strong { display: block; font-size: .95rem; margin-bottom: 4px; color: var(--heading); }
.vol-perk p { font-size: .88rem; color: var(--text-mid); margin: 0; line-height: 1.5; }

/* ── CTA ── */
.vol-cta {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius-lg);
  padding: 36px;
}
.vol-cta__icon {
  width: 60px; height: 60px;
  background: rgba(255,255,255,.12);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ocpl-green);
}
.vol-cta__icon svg { width: 32px; height: 32px; }
.vol-cta__body h2 { color: var(--white); margin-bottom: 10px; font-size: 1.5rem; }
.vol-cta__body p  { color: var(--text-on-dark-muted); margin-bottom: 20px; font-size: .95rem; }
.vol-section--cta .btn--filled { background: var(--ocpl-orange); }
.vol-section--cta .btn--filled:hover { background: var(--ocpl-orange-dark); color: var(--white); }

/* ── Responsive ── */
@media (max-width: 980px) {
  .vol-roles { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .vol-roles { grid-template-columns: 1fr; }
  .vol-perks { grid-template-columns: 1fr; }
  .vol-cta { flex-direction: column; gap: 20px; padding: 24px; }
}

/* ============================================================
   HERO SLIDER
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   HERO — glassmorphic split layout
   Full-bleed image behind everything; glass text card on left
   ══════════════════════════════════════════════════════════ */
.home-hero {
  position: relative;
  height: 560px;
  overflow: hidden;
  background: var(--ocpl-blue);
  display: flex;
  align-items: center;        /* vertically center the text card */
}

/* ── Image panel: fills right side of the inner container ── */
.home-hero__media {
  position: absolute;
  /* Start from the right edge of the text panel, stretch to section right edge */
  left: 420px;
  top: 0;
  right: 0;
  bottom: 0;
  /* On wide screens, left edge stays relative to the container */
  max-width: calc(1220px - 420px);
  z-index: 0;
}
/* Beyond container max-width, media fills from container right edge to viewport right */
@media (min-width: 1220px) {
  .home-hero__media {
    left: calc(50% - 1220px / 2 + 420px);
    max-width: none;
  }
}

/* ── Single image fills panel — cover so no letterboxing ── */
.home-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;  /* favour top of photo */
  display: block;
}

/* ── No-image plain background ── */
.home-hero__no-image {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #003a5c 0%, var(--ocpl-blue) 60%, var(--ocpl-blue-mid) 100%);
}

/* ── Slider ── */
.hero-slider {
  position: absolute;
  inset: 0;
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero-slide--active { opacity: 1; }
.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
/* Wide/short images: fit by width instead of cropping */
.hero-slide--wide img {
  object-fit: contain;
  object-position: center center;
}

/* ── Inner container caps content width ── */
.home-hero__inner {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  min-height: inherit;
  position: relative;
  z-index: 2;
}

/* ── Glass text card ── */
.home-hero__text {
  position: relative;
  z-index: 2;
  padding: 48px 32px 48px 24px;
  width: 420px;
  flex-shrink: 0;
}

.home-hero__text-inner {
  /* The dark overlay carries the legibility; the blur only softens what
     shows through. 10px reads the same as the old 20px+saturate behind
     this overlay and costs half the per-frame resampling while the hero
     is in view — the old value made the whole page stutter on scroll. */
  background: rgba(4, 28, 54, 0.68);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.13);
  border-left: 3px solid var(--ocpl-orange);
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
  padding: 36px 36px 40px;
  width: 100%;
}

/* Green eyebrow label */
.home-hero__text-inner::before {
  content: 'Friends of Orange County Public Library';
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ocpl-green);
  margin-bottom: 16px;
}

/* ── Typography ── */
/* .hero-heading = non-first slides render as h2 (one h1 per page) */
.home-hero h1,
.home-hero .hero-heading {
  color: var(--white);
  font-family: var(--font-heading);
  /* Max stepped down from 2.75rem: the text card is a fixed ~300px inner
     width while this scales with the viewport, so on large screens a single
     long word ("MEMBERSHIP", 10 extra-bold caps) grew wider than the card
     and the overflow:hidden below cropped it mid-letter. 2.4rem keeps the
     longest current word inside the card with margin. */
  font-size: clamp(1.6rem, 2.5vw, 2.4rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  /* last resort for a future even-longer word: break it visibly rather
     than crop it invisibly */
  overflow-wrap: break-word;
  line-height: 1.12;
  margin: 0 0 14px;
  text-shadow: 0 2px 14px rgba(0,0,0,.5);
  display: -webkit-box;
  /* 6, same reasoning as the subtitle below: never truncate curated copy
     mid-word. The default title takes 3 lines in this card; 6 is purely a
     guard against a runaway future slide title. */
  -webkit-line-clamp: 6;
  line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-hero__sub {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.82);
  line-height: 1.72;
  margin: 0 0 28px;
  display: -webkit-box;
  /* 5, not 3: the default tagline needs 4 lines at this card width and the
     campaign-slide subtitles up to 5. Clamping curated copy mid-sentence
     ("...who use it every…") is worse than a slightly taller card; the clamp
     stays only as a guard against a runaway future drive description. */
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Buttons ── */
.home-hero .btn--filled {
  background: var(--ocpl-orange);
  color: var(--white);
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(181,96,22,.4);
  transition: background .2s, box-shadow .2s, transform .15s;
}
.home-hero .btn--filled:hover {
  background: var(--ocpl-orange-dark);
  color: var(--white);
  box-shadow: 0 4px 18px rgba(181,96,22,.55);
  transform: translateY(-1px);
}
.home-hero .btn--outline {
  border: 1.5px solid rgba(255,255,255,.5);
  color: var(--white);
  border-radius: 6px;
  background: rgba(255,255,255,.09);
  backdrop-filter: blur(6px);
  transition: background .2s, border-color .2s, transform .15s;
}
.home-hero .btn--outline:hover {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.9);
  color: var(--white);
  transform: translateY(-1px);
}

/* ── Prev / Next — bottom-right corner of the hero ── */
.hero-slider__btn {
  position: absolute;
  /* 34px, up from 20: at 20 the controls hugged the image's bottom edge,
     and on bright-bottomed photos (the lawn slide) read as sitting on the
     boundary. Same inset on every slide; the geometry never varied, only
     how close the edge looked. */
  bottom: 34px;
  z-index: 3;
  background: rgba(4,28,54,.5);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--white);
  transition: background .2s, border-color .2s, transform .15s;
  backdrop-filter: blur(8px);
  top: auto;
  transform: none;
}
.hero-slider__btn:hover {
  background: rgba(4,28,54,.8);
  border-color: rgba(255,255,255,.7);
  transform: scale(1.08);
}
.hero-slider__btn svg { width: 16px; height: 16px; }
.hero-slider__btn--prev { right: 66px; }
.hero-slider__btn--next { right: 20px; }

/* ── Dots ── */
.hero-slider__dots {
  position: absolute;
  bottom: 50px;   /* centers the 6px dots on the 38px buttons at bottom:34 */
  right: 114px;
  left: auto;
  transform: none;
  z-index: 3;
  display: flex;
  gap: 6px;
  align-items: center;
}
.hero-slider__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background .2s, width .25s;
}
.hero-slider__dot--active {
  background: var(--white);
  width: 20px;
  border-radius: 3px;
}

/* ── Pause indicator ── */
.home-hero--paused .hero-slider__btn--next::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ocpl-green);
}

/* ── Responsive: tablet ── */
@media (max-width: 860px) {
  .home-hero {
    height: auto;
  }
  .home-hero__inner {
    flex-direction: column;
    align-items: stretch;
    max-width: 100%;
  }
  /* On mobile the TEXT leads: the message and its buttons come before
     the photo strip, so the ask is visible without scrolling past art. */
  .home-hero__media {
    position: relative;
    left: auto;
    top: auto;
    right: auto;
    bottom: auto;
    max-width: 100%;
    height: 280px;
    flex-shrink: 0;
    order: 1;
  }
  .home-hero__text {
    width: 100%;
    padding: 0;
    order: -1;
    background: var(--ocpl-blue);
  }
  .home-hero__text-inner {
    border-radius: 0;
    border-left: none;
    border-top: 3px solid var(--ocpl-orange);
    border-right: none;
    border-bottom: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: transparent;
    box-shadow: none;
    padding: 32px 24px 48px;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
  }
  .home-hero__text-inner::before { text-align: center; }
  .home-hero h1, .home-hero .hero-heading { font-size: clamp(1.6rem, 5vw, 2.2rem); }
  .home-hero__actions { justify-content: center; }
  .hero-slider__btn--prev { right: 58px; bottom: 12px; }
  .hero-slider__btn--next { right: 12px; bottom: 12px; }
  .hero-slider__dots { bottom: 18px; right: 106px; }
}

@media (max-width: 480px) {
  .home-hero__media { height: 220px; }
  .home-hero__text-inner { padding: 28px 16px 44px; }
}

/* ============================================================
   JOIN PAGE
   ============================================================ */
.join-section--why   { background: var(--white); border-bottom: 1px solid var(--border); }
.join-section--form  { background: var(--off-white); }
.join-section--existing { background: var(--white); border-top: 1px solid var(--border); padding: 28px 0; }

.join-proof {
  text-align: center;
  font-size: 1.02rem;
  color: var(--text);
  max-width: 640px;
  margin: 0 auto 32px;
  line-height: 1.6;
}
.join-proof a { color: var(--ocpl-blue); font-weight: 600; }
.join-renew-note {
  text-align: center;
  font-size: .9rem;
  color: var(--text-mid);
  background: var(--ocpl-blue-pale);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 16px;
  max-width: 640px;
  margin: 0 auto 24px;
}

.join-benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.join-benefit {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.join-benefit__icon {
  width: 38px; height: 38px;
  background: var(--ocpl-blue-pale);
  color: var(--ocpl-blue);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.join-benefit__icon svg { width: 20px; height: 20px; }
.join-benefit strong { display: block; font-size: .9rem; margin-bottom: 3px; color: var(--heading); }
.join-benefit p { font-size: .83rem; color: var(--text-mid); margin: 0; line-height: 1.45; }

.join-existing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: .95rem;
  color: var(--text-mid);
}

.join-plugin-notice {
  background: var(--ocpl-blue-pale);
  border: 1px solid var(--ocpl-blue-light);
  border-left: 4px solid var(--ocpl-blue);
  border-radius: var(--radius-md);
  padding: 24px;
  font-size: .95rem;
}

/* ── Member Account / Login page ── */
.member-login-wrap {
  max-width: 440px;
  margin: 0 auto;
}
.member-login-intro {
  color: var(--text-mid);
  margin-bottom: 20px;
}
.member-login-wrap .login-form { margin: 0; }
.member-login-wrap .login-form label {
  font-weight: 600;
  font-size: .9rem;
  display: block;
  margin-bottom: 14px;
}
.member-login-wrap .login-form input[type=text],
.member-login-wrap .login-form input[type=password] {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  font-size: .95rem;
  margin-top: 4px;
  box-sizing: border-box;
}
.member-login-wrap .login-form input[type=text]:focus,
.member-login-wrap .login-form input[type=password]:focus {
  border-color: var(--ocpl-blue);
  outline: none;
}
.member-login-wrap .login-form input[type=submit] {
  background: var(--ocpl-blue);
  color: var(--white);
  border: none;
  padding: 10px 28px;
  border-radius: 5px;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 8px;
  transition: background .2s;
}
.member-login-wrap .login-form input[type=submit]:hover { background: var(--ocpl-blue-mid); }
.member-login-links {
  margin-top: 16px;
  font-size: .88rem;
  color: var(--text-mid);
  display: flex;
  gap: 10px;
  align-items: center;
}
.member-login-links a { color: var(--ocpl-blue); }
.member-login-links__sep { color: var(--mid-gray); }

/* ── Header member indicator ── */
.site-utility-nav__member {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
}
.site-utility-nav__member-badge {
  font-size: var(--fs-xs);
  font-weight: 700;
  background: var(--ocpl-green);
  color: #2d4a1a;
  padding: 1px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

@media (max-width: 900px) {
  .join-benefits { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .join-benefits { grid-template-columns: 1fr; }
  .join-existing { flex-direction: column; text-align: center; gap: 10px; }
}

/* ============================================================
   DONATE PAGE
   ============================================================ */
.donate-section--impact  { background: var(--ocpl-blue); }
.donate-section--form    { background: var(--off-white); }
.donate-section--other   { background: var(--white); border-top: 1px solid var(--border); }
.donate-section--tax     { background: var(--off-white); border-top: 1px solid var(--border); padding: 20px 0; }

/* ── Impact strip ── */
.donate-impact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}
.donate-impact__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 32px;
  flex: 1;
  min-width: 160px;
}
.donate-impact__amount {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 800;
  color: var(--ocpl-green);
  line-height: 1;
  margin-bottom: 6px;
}
.donate-impact__note {
  font-size: .82rem;
  color: rgba(255, 255, 255, 0.82);   /* ~5.7:1 on --ocpl-blue */
  text-align: center;
  margin: 14px auto 0;
  max-width: 640px;
  line-height: 1.5;
}
.donate-impact__label {
  font-size: .83rem;
  color: rgba(255,255,255,.75);
  line-height: 1.4;
  max-width: 140px;
}
.donate-impact__divider {
  width: 1px;
  height: 48px;
  background: rgba(255,255,255,.2);
  flex-shrink: 0;
}

/* ── Other ways to give ── */
.donate-section--other h2 {
  text-align: center;
  margin-bottom: 24px;
  color: var(--ocpl-blue);
}
.donate-other-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.donate-other-card {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.donate-other-card h3 { font-size: 1rem; margin: 0; color: var(--heading); }
.donate-other-card p  { font-size: .88rem; color: var(--text-mid); margin: 0; line-height: 1.55; flex: 1; }
.donate-other-card .btn { align-self: flex-start; margin-top: auto; }

/* ── Tax note ── */
.donate-tax-note {
  text-align: center;
  font-size: .85rem;
  color: var(--text-light);
  margin: 0;
  line-height: 1.6;
}
.donate-tax-note a { color: var(--ocpl-blue); }

@media (max-width: 700px) {
  .donate-impact { flex-direction: column; }
  .donate-impact__divider { width: 48px; height: 1px; }
  .donate-other-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   BOARD PORTAL styles live in assets/css/admin.css (enqueued on
   the Board Portal template and in wp-admin, after this file).
   ============================================================ */
/* ============================================================
   LIBRARY EVENTS (volunteer page — pulled from OCPL calendar)
   ============================================================ */
.vol-library-events {
  background: var(--ocpl-blue);
  border-top: 4px solid var(--ocpl-green);
}
.vol-library-events .section-heading h2,
.vol-library-events .section-heading__eyebrow { color: var(--white); }
.vol-library-events .section-heading__eyebrow {
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ocpl-green);
  display: block;
  margin-bottom: 4px;
}
.vol-library-events .section-heading p { color: rgba(255,255,255,.7); }

.lib-events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 28px;
}

.lib-event-card {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-md);
  text-decoration: none;
  overflow: hidden;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.lib-event-card:hover {
  background: rgba(255,255,255,.14);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,.2);
  text-decoration: none;
}

/* ── Event image ── */
.lib-event-card__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(0,0,0,.2);
}
.lib-event-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.lib-event-card:hover .lib-event-card__img img { transform: scale(1.04); }

/* ── Card body ── */
.lib-event-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 14px 16px 16px;
  min-width: 0;
}

/* ── Age group tags ── */
.lib-event-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}
.lib-event-card__tag {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--tag-color, var(--ocpl-green));
  color: var(--white);
  line-height: 1.6;
}

.lib-event-card__title {
  font-family: var(--font-heading);
  font-size: .9rem;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 7px;
  line-height: 1.35;
}
.lib-event-card__date,
.lib-event-card__location {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .76rem;
  color: rgba(255,255,255,.65);
  margin: 0 0 3px;
  line-height: 1.4;
}
.lib-event-card__date svg,
.lib-event-card__location svg { flex-shrink: 0; color: var(--ocpl-green); }

.lib-event-card__desc {
  font-size: .78rem;
  color: rgba(255,255,255,.55);
  margin: 7px 0 0;
  line-height: 1.5;
  flex: 1;
}

/* ── Footer: program type + registration badge ── */
.lib-event-card__footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.lib-event-card__type {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.45);
  font-style: italic;
}
.lib-event-card__reg {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ocpl-green);
  margin-left: auto;
}

.lib-events-more {
  text-align: center;
  margin-top: 28px;
}
.lib-events-more .btn--outline {
  border-color: rgba(255,255,255,.4);
  color: var(--white);
}
.lib-events-more .btn--outline:hover {
  background: rgba(255,255,255,.1);
  border-color: var(--white);
}

.lib-events-unavailable {
  color: rgba(255,255,255,.6);
  text-align: center;
  padding: 24px 0;
  font-size: .9rem;
}
.lib-events-unavailable a { color: var(--ocpl-green); }

/* ── Light background variant (used outside dark sections) ── */
.lib-events-light .lib-events-grid { margin-top: 0; }

.lib-events-light .lib-event-card {
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.lib-events-light .lib-event-card:hover {
  background: var(--white);
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
.lib-events-light .lib-event-card__img { background: var(--off-white); }
.lib-events-light .lib-event-card__title { color: var(--ocpl-blue); }
.lib-events-light .lib-event-card__date,
.lib-events-light .lib-event-card__location { color: var(--muted); }
.lib-events-light .lib-event-card__date svg,
.lib-events-light .lib-event-card__location svg { color: var(--ocpl-blue); }
.lib-events-light .lib-event-card__desc { color: var(--muted); }
.lib-events-light .lib-event-card__footer { border-top-color: var(--border); }
.lib-events-light .lib-event-card__type { color: var(--muted); }
.lib-events-light .lib-event-card__reg { color: var(--ocpl-blue); }
.lib-events-light .lib-events-more .btn--outline {
  border-color: var(--ocpl-blue);
  color: var(--ocpl-blue);
}
.lib-events-light .lib-events-more .btn--outline:hover {
  background: var(--off-white);
  border-color: var(--ocpl-orange);
  color: var(--ocpl-orange);
}
.lib-events-light .lib-events-unavailable { color: var(--muted); }
.lib-events-light .lib-events-unavailable a { color: var(--ocpl-blue); }

/* ============================================================
   ABOUT PAGE
   ============================================================ */

/* Two-column layout: sidebar board list | content */
.about-page { background: var(--off-white); }

.about-layout {
  display: grid;
  /* named areas: board left on desktop, BELOW the intro on mobile
     (the mobile breakpoint swaps the areas, not the DOM) */
  grid-template-areas: "sidebar content";
  grid-template-columns: 300px 1fr;
  gap: 48px;
  align-items: start;
}
.about-sidebar { grid-area: sidebar; }
.about-content { grid-area: content; }

/* ── Left sidebar: board card ── */
.about-sidebar { position: sticky; top: 24px; }

/* ── What we do, in three parts ── */
.about-wwd {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 26px 0 30px;
}
.about-wwd__item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 18px 16px;
}
.about-wwd__icon { color: var(--ocpl-blue); margin-bottom: 8px; }
.about-wwd__item h3 { font-size: .98rem; margin: 0 0 6px; }
.about-wwd__item p { font-size: .86rem; color: var(--text-mid); line-height: 1.55; margin: 0; }
@media (max-width: 700px) { .about-wwd { grid-template-columns: 1fr; } }

/* ── Closing invitation ── */
.about-closing {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.about-closing h3 { font-size: 1.15rem; margin: 0 0 6px; }
.about-closing p { font-size: .92rem; color: var(--text-mid); margin: 0 0 16px; }
.about-closing__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.about-board-card {
  background: var(--ocpl-blue);
  border-radius: var(--radius-lg);
  padding: 28px 24px 24px;
  color: var(--white);
}

.about-board-card__title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--white);
  line-height: 1.25;
  margin: 0 0 4px;
}
.about-board-card__year {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ocpl-green);
  margin-top: 4px;
}

.about-board-card__group { margin-top: 20px; }

.about-board-card__group-label {
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  /* --ocpl-orange is ~1.6:1 against the card's blue — unreadable on dark.
     Use the card's on-dark accent (same as the year badge), which passes AA. */
  color: var(--ocpl-green);
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.about-board-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.about-board-card__member {
  display: flex;
  align-items: center;
  gap: 10px;
}

.about-board-card__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 1.5px solid rgba(255,255,255,0.2);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-board-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-board-card__avatar span {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--white);
  line-height: 1;
}

.about-board-card__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.about-board-card__info strong {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.about-board-card__info span {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.6);
  line-height: 1.3;
}

.about-board-card__link {
  display: inline-block;
  margin-top: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ocpl-green);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color var(--transition);
}
.about-board-card__link:hover {
  color: var(--white);
  text-decoration: none;
}

/* ── Right: mission + resources ── */
.about-content { padding-top: 4px; }

.about-content__mission {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  margin-bottom: 20px;
  border: 1px solid var(--border);
}

.about-lead {
  font-size: 1.08rem;
  font-weight: 500;
  color: var(--ocpl-blue);
  line-height: 1.7;
  margin-bottom: 18px;
}
.about-content__mission p {
  line-height: 1.75;
  color: var(--text);
  margin-bottom: 14px;
}
.about-content__mission p:last-child { margin-bottom: 0; }
.about-mission-statement {
  font-weight: 700;
  color: var(--ocpl-blue) !important;
  font-style: italic;
  border-left: 3px solid var(--ocpl-orange);
  padding-left: 16px;
  margin: 20px 0 !important;
}

.about-content__resources {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 28px 40px;
  border: 1px solid var(--border);
}
.about-content__resources h3 {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin: 0 0 14px;
}
.about-content__resources ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.about-content__resources a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--ocpl-blue);
  text-decoration: none;
  padding: 7px 0;
  transition: color var(--transition), gap var(--transition);
}
.about-content__resources a:hover {
  color: var(--ocpl-orange);
  gap: 13px;
  text-decoration: none;
}
.about-content__resources svg { color: var(--ocpl-orange); flex-shrink: 0; }

/* ── Responsive ── */
@media (max-width: 860px) {
  .about-layout {
    /* single column: the introduction reads before the board roster */
    grid-template-areas: "content" "sidebar";
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .about-sidebar { position: static; }
  .about-board-card__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
  }
  .about-content__mission,
  .about-content__resources { padding: 24px; }
}
@media (max-width: 480px) {
  .about-board-card__list { grid-template-columns: 1fr; }
}



/* ============================================================
   SUPPORT PAGE
   ============================================================ */
.support-page { background: var(--off-white); }

.support-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.support-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--transition), transform var(--transition);
}
.support-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.10);
  transform: translateY(-3px);
  text-decoration: none;
}

.support-card__icon {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.support-card__icon--blue   { background: var(--ocpl-blue-light);   color: var(--ocpl-blue); }
.support-card__icon--orange { background: var(--ocpl-orange-light); color: var(--ocpl-orange); }
.support-card__icon--green  { background: var(--success-soft); color: var(--success); }
.support-card__icon--purple { background: var(--accent-purple-soft); color: var(--accent-purple); }

.support-card h2 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ocpl-blue);
  margin: 0 0 10px;
}

.support-card p {
  font-size: 0.93rem;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 0 20px;
  flex: 1;
}

.support-card__cta {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ocpl-orange);
  letter-spacing: 0.02em;
  transition: gap var(--transition);
  margin-top: auto;
}
.support-card:hover .support-card__cta {
  text-decoration: underline;
}

.support-footer {
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  padding-top: 8px;
}
.support-footer a { color: var(--ocpl-blue); font-weight: 600; }

/* Why-we-back-it prose on the Your Library hub: quiet, below the cards,
   set off with a rule rather than a box so it reads as context, not
   another card competing for a click. */
.hub-story {
  max-width: 62ch;
  margin: 40px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.hub-story h2 {
  font-size: 1.15rem;
  margin: 0 0 14px;
}
.hub-story p {
  font-size: .95rem;
  line-height: 1.7;
  color: var(--text);
  margin: 0 0 14px;
}
.hub-story p:last-child { margin-bottom: 0; }
.hub-story a { color: var(--ocpl-blue); font-weight: 600; }

@media (max-width: 600px) {
  .support-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   EVENTS PAGE
   ============================================================ */
.events-section { background: var(--white); }
.events-section--past { background: var(--off-white); }

/* ── Event card (full listing) ── */
/* Book-sale detail: the day strip and the volunteer schedule. */
.sale-days {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 4px;
}
.sale-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 64px;
  padding: 8px 10px;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--ocpl-blue);
  border-radius: 8px;
}
.sale-days--vertical { flex-direction: column; align-items: stretch; gap: 0; }
.sale-day-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.sale-day-row:last-child { border-bottom: 0; }
.sale-day-row .sale-day { flex: 0 0 64px; }
.sale-day-row__text { margin: 0; font-size: .95rem; line-height: 1.6; }
.sale-day__weekday { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ocpl-blue); }
.sale-day__num     { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; line-height: 1.15; color: var(--heading); }
.sale-day__month   { font-size: var(--fs-xs); color: var(--text-mid); }
.event-vol {
  margin-top: 28px;
  padding: 22px 24px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.event-vol__heading { font-size: 1.25rem; margin: 0 0 4px; }
.event-vol__intro   { margin: 0 0 14px; color: var(--text-mid); font-size: .92rem; }
.event-vol__date    { font-size: .95rem; margin: 14px 0 6px; }
.event-vol__shifts  { list-style: none; margin: 0; padding: 0; }
.event-vol__shift {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: .92rem;
}
.event-vol__shift:last-child { border-bottom: 0; }
.event-vol__time  { min-width: 150px; color: var(--text-mid); font-variant-numeric: tabular-nums; }
.event-vol__role  { font-weight: 600; color: var(--heading); flex: 1; }
.event-vol__slots { color: var(--success, var(--success)); font-weight: 600; font-size: .85rem; }
.event-vol__slots--full { color: var(--text-mid); font-weight: 500; }
.event-vol__cta   { margin-top: 16px; }

.events-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.events-list--past { opacity: 0.7; }

.event-card-full {
  display: flex;
  gap: 20px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  transition: box-shadow var(--transition);
}
.event-card-full:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.event-card-full--past {
  background: transparent;
  box-shadow: none;
}
.event-card-full--past:hover { box-shadow: none; }

.event-card-full__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-width: 48px;
  padding-top: 2px;
}
.event-card-full__month {
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ocpl-orange);
  line-height: 1;
}
.event-card-full__day {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--ocpl-blue);
  line-height: 1;
  margin-top: 2px;
}

.event-card-full__body { flex: 1; min-width: 0; }

.event-card-full__header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.event-card-full__title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ocpl-blue);
  margin: 0;
  flex: 1;
}
.event-card-full__title a {
  color: inherit;
  text-decoration: none;
}
.event-card-full__title a:hover { color: var(--ocpl-orange); text-decoration: underline; }

.event-badge {
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.event-badge--cancelled { background: var(--danger-soft); color: var(--danger); }
.event-badge--postponed { background: var(--ocpl-orange-light); color: var(--ocpl-orange); }

/* Campaigns: empty state + past-campaigns section */
.campaigns-empty { text-align: center; padding: 48px 0; }
.campaigns-empty p { font-size: 1.1rem; color: var(--text-light); }
.campaigns-empty__actions { margin-top: 24px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.campaigns-past { background: var(--ocpl-blue-pale); }
.campaigns-past__heading { margin-bottom: 28px; }
.drive-card__view-results { margin-top: 12px; }

/* Dollar-stretch: empty state */
.dsc-empty { color: var(--text-light); font-style: italic; }

.event-card-full__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 10px;
}
.event-card-full__meta span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.event-card-full__meta svg { color: var(--ocpl-blue); flex-shrink: 0; }

.event-card-full__desc {
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.65;
  margin-bottom: 10px;
}
.event-card-full__ctas {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.event-card-full__cta {
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--ocpl-orange);
  text-decoration: none;
}
.event-card-full__cta:hover { text-decoration: underline; }
.event-card-full__cta--details {
  color: var(--ocpl-blue);
  font-weight: 400;
}

/* Event image thumbnail — left side of card */
.event-card-full__thumb {
  flex-shrink: 0;
  width: 220px;
  min-height: 140px;
  align-self: stretch;
  border-radius: calc(var(--radius-md) - 4px);
  overflow: hidden;
  order: -1;
}
.event-card-full__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.event-card-full__thumb a {
  display: block;
  height: 100%;
}

/* Badge row — allows badge + type pill side by side */
.event-card-full__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* Event type pill */
.event-type-pill {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--ocpl-blue-light);
  color: var(--ocpl-blue);
  white-space: nowrap;
}

/* Cancelled event — muted appearance */
.event-card-full--cancelled {
  opacity: 0.6;
}
.event-card-full--cancelled .event-card-full__date {
  background: var(--light-gray);
}
.event-card-full--cancelled .event-card-full__date span {
  color: var(--text-light);
}

/* Featured events — slight highlight */
.events-list--featured .event-card-full--featured {
  border-left: 4px solid var(--ocpl-orange);
}

.events-empty {
  background: var(--off-white);
  border-radius: var(--radius-md);
  padding: 32px;
  text-align: center;
  color: var(--muted);
  max-width: 520px;
}
.events-empty__note { color: var(--text-light); }

/* ── Volunteer CTA band ── */
.events-volunteer-cta { background: var(--ocpl-blue); }
.events-volunteer-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}
.events-volunteer-cta__text h2 { color: var(--white); margin: 0 0 8px; font-size: 1.3rem; }
.events-volunteer-cta__text p  { color: rgba(255,255,255,.78); margin: 0; font-size: 0.95rem; max-width: 560px; }
.events-volunteer-cta__actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.events-volunteer-cta .btn--filled  { background: var(--ocpl-orange); color: var(--white); }
.events-volunteer-cta .btn--outline { border-color: rgba(255,255,255,.5); color: var(--white); }
.events-volunteer-cta .btn--outline:hover { background: rgba(255,255,255,.12); border-color: var(--white); }

/* ── Event detail view ── */
.event-detail { background: var(--white); }

.event-detail__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.875rem;
  color: var(--ocpl-blue);
  text-decoration: none;
  margin-bottom: 28px;
}
.event-detail__back:hover { text-decoration: underline; }

.event-detail__image {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 32px;
  max-height: 420px;
}
.event-detail__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.event-detail__body { max-width: 720px; }

.event-detail__badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.event-detail__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}
.event-detail__meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  color: var(--muted);
}
.event-detail__meta-row svg { flex-shrink: 0; color: var(--muted); }
.event-detail__meta-row a { color: var(--ocpl-blue); }

.event-detail__description {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 32px;
}
.event-detail__description p { margin: 0 0 1em; }
.event-detail__description p:last-child { margin-bottom: 0; }

.event-detail__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Library events embed on events page ── */
.events-library { background: var(--ocpl-blue); }
.events-library .section-heading h2,
.events-library .section-heading__eyebrow { color: var(--white); }
.events-library .section-heading p { color: rgba(255,255,255,.7); }


/* ============================================================
   LIBRARY EVENTS PAGE
   ============================================================ */
.lib-events-page { background: var(--white); }

.lib-events-page .container {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 40px;
  align-items: start;
}

.lib-events-page__body { min-width: 0; }

.lib-events-page__footer {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.65;
}
.lib-events-page__footer a { color: var(--ocpl-blue); }

/* ── Sidebar cards ── */
.lib-events-page__sidebar {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lib-events-coming-up { margin-bottom: 20px; text-align: center; }
.lib-events-coming-up h2 { margin-bottom: 8px; }
.lib-events-coming-up p { max-width: 62ch; margin-left: auto; margin-right: auto; color: var(--text-mid); }
.lib-events-updated { font-size: .78rem; color: var(--text-light); margin-top: 6px; }

.lib-events-sidebar-card {
  background: var(--ocpl-blue);
  border-radius: var(--radius-md);
  padding: 22px 20px;
  color: var(--white);
}
.lib-events-sidebar-card--secondary {
  background: var(--off-white);
  border: 1px solid var(--border);
  color: var(--text);
}
.lib-events-sidebar-card--plain {
  background: transparent;
  border: 1px solid var(--border);
  padding: 18px 20px;
  color: var(--text);
}

.lib-events-sidebar-card h3 {
  font-size: 0.88rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: inherit;
}
.lib-events-sidebar-card--secondary h3,
.lib-events-sidebar-card--plain h3 { color: var(--ocpl-blue); }

.lib-events-sidebar-card p {
  font-size: 0.82rem;
  line-height: 1.6;
  margin: 0 0 14px;
  color: rgba(255,255,255,.8);
}
.lib-events-sidebar-card--secondary p,
.lib-events-sidebar-card--plain p { color: var(--muted); }

.lib-events-sidebar-card .btn {
  display: block;
  text-align: center;
  margin-bottom: 8px;
  font-size: 0.83rem;
}
.lib-events-sidebar-card .btn:last-of-type { margin-bottom: 0; }
.lib-events-sidebar-card .btn--filled  { background: var(--ocpl-orange); }
.lib-events-sidebar-card .btn--outline { border-color: rgba(255,255,255,.4); color: var(--white); }
.lib-events-sidebar-card--secondary .btn--outline,
.lib-events-sidebar-card--plain .btn--outline {
  border-color: var(--ocpl-blue);
  color: var(--ocpl-blue);
}
.lib-events-sidebar-link {
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--ocpl-orange);
  text-decoration: none;
}
.lib-events-sidebar-link:hover { text-decoration: underline; }

/* ── Responsive ── */
@media (max-width: 860px) {
  .events-volunteer-cta__inner { align-items: flex-start; text-align: left; }
  .lib-events-page .container { grid-template-columns: 1fr; }
  .lib-events-page__sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
  .lib-events-sidebar-card { flex: 1; min-width: 200px; }
}
@media (max-width: 600px) {
  .event-card-full { flex-direction: column; gap: 12px; }
  .event-card-full__thumb { width: 100%; min-height: 180px; border-radius: var(--radius-md) var(--radius-md) 0 0; }
  .event-card-full__date { flex-direction: row; align-items: baseline; gap: 6px; }
  .event-card-full__day { font-size: 1.3rem; }
  .lib-events-sidebar-card { min-width: 100%; }
}
/* Quote slider */
.home-quote-slider { position: relative; }

/* Prev/next under the quote. The first click also stops the auto-advance
   (see the inline script), so these double as the "pause" control. */
.home-quote-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 22px;
}
.home-quote-nav__btn {
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--ocpl-blue);
  border-radius: 50%;
  background: none;
  color: var(--ocpl-blue);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.home-quote-nav__btn:hover,
.home-quote-nav__btn:focus-visible {
  background: var(--ocpl-blue);
  color: var(--white);
}
.home-quote-nav__count {
  min-width: 58px;
  text-align: center;
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-mid);
}
/* All slides share one grid cell, so the container is always as tall as
   the TALLEST quote and the section never resizes as shorter quotes
   display. The old absolute/relative swap sized it to the active slide. */
.home-quote-slider { display: grid; align-items: center; }
.home-quote--slide {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity .8s ease;
  pointer-events: none;
}
.home-quote--slide.home-quote--active {
  opacity: 1;
  pointer-events: auto;
}
/* Per-slide hero text panels */
.hero-slide-text {
  display: none;
}
.hero-slide-text--active {
  display: block;
  animation: fadeInText .5s ease;
}
@keyframes fadeInText {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   FUNDED PROJECTS PAGE
   ============================================================ */

/* Stats band */
.fp-stats-band {
  background: var(--ocpl-blue);
  padding: 36px 20px;
}
.fp-stats-row {
  display: flex;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}
.fp-stat {
  text-align: center;
  color: var(--white);
}
.fp-stat__val {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ocpl-green);
}
.fp-stat__label {
  display: block;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255,255,255,.75);
  margin-top: 6px;
}

/* Category filter bar */
.fp-filter-wrap {
  background: var(--ocpl-blue-pale);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
  position: sticky;
  top: 0;
  z-index: 20;
}
.fp-filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.fp-filter-pill {
  display: inline-block;
  padding: 5px 16px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-mid);
  background: var(--white);
  border: 1.5px solid var(--border);
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.fp-filter-pill:hover,
.fp-filter-pill--active {
  background: var(--ocpl-blue);
  border-color: var(--ocpl-blue);
  color: var(--white);
  text-decoration: none;
}

/* Year groups */
.fp-section {
  padding-top: 48px;
  padding-bottom: 64px;
}
.fp-year-block {
  margin-bottom: 56px;
}
.fp-year-header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ocpl-blue);
}
.fp-year-title {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  color: var(--ocpl-blue);
  margin: 0;
}
.fp-year-total {
  font-size: .85rem;
  font-weight: 600;
  color: var(--ocpl-orange);
  background: var(--ocpl-orange-light);
  padding: 3px 10px;
  border-radius: 999px;
}

/* Project cards grid */
.fp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 20px;
}
.fp-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition), transform var(--transition);
}
.fp-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.fp-card--featured {
  border-color: var(--ocpl-orange);
  border-width: 2px;
}
.fp-card__featured-badge {
  background: var(--ocpl-orange);
  color: var(--white);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: 5px 14px;
  font-family: var(--font-heading);
}
.fp-card__body {
  padding: 20px;
  flex: 1;
}
.fp-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.fp-card__cat {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--ocpl-blue-light);
  color: var(--ocpl-blue);
  font-family: var(--font-heading);
}
/* Per-category badge colors (light tint + AA-dark text) */
.fp-card__cat--summer-reading { background: #fbeee2; color: var(--ocpl-orange-dark); }
.fp-card__cat--children       { background: #eaf3e0; color: #3f6b1e; }
.fp-card__cat--adult-programs { background: #e3f0f7; color: var(--ocpl-blue); }
.fp-card__cat--teen-programs  { background: #ece7f6; color: #4527a0; }
.fp-card__cat--technology     { background: #e0f0ee; color: #00695c; }
.fp-card__cat--collection     { background: #fbeede; color: #8a4700; }
.fp-card__cat--facilities     { background: #eceff1; color: #455a64; }
.fp-card__cat--staff          { background: #fbe4ee; color: #a01050; }
.fp-card__cat--community      { background: #e6f2e7; color: var(--success-dark); }
.fp-card__cat--general        { background: var(--light-gray); color: #5b6672; }

/* Funding-by-program-area bars */
.fp-catbars-section { padding-top: clamp(24px, 4vw, 40px); }
.fp-catbars-title { font-family: var(--font-heading); font-size: 1.15rem; color: var(--ocpl-blue); margin: 0 0 8px; }
.fp-catbars-intro { margin: 0 0 18px; font-size: .95rem; line-height: 1.6; color: var(--text-mid); max-width: 640px; }
.fp-catbars { display: flex; flex-direction: column; gap: 9px; }
.fp-catbar { display: grid; grid-template-columns: minmax(120px, 190px) 1fr auto; align-items: center; gap: 14px; text-decoration: none; padding: 3px 0; }
.fp-catbar:hover { text-decoration: none; }
.fp-catbar:hover .fp-catbar__label { color: var(--ocpl-blue); }
.fp-catbar__label { font-size: .9rem; font-weight: 600; color: var(--text); }
.fp-catbar__track { height: 12px; background: var(--off-white); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.fp-catbar__fill { display: block; height: 100%; border-radius: 999px; min-width: 6px; transition: width var(--transition); }
.fp-catbar__amt { font-size: .85rem; font-weight: 700; color: var(--ocpl-green-dark); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fp-catbars-note { margin: 18px 0 0; font-size: .85rem; line-height: 1.55; color: var(--text-mid); }
@media (max-width: 600px) {
  .fp-catbar { grid-template-columns: 1fr auto; }
  .fp-catbar__track { grid-column: 1 / -1; order: 3; }
}

/* Listing card titles link to the single-project page */
.fp-card__title a { color: inherit; text-decoration: none; }
.fp-card__title a:hover { color: var(--ocpl-blue-mid); text-decoration: underline; }

/* ── Single funded project (/projects/<slug>/) ── */
.sp-back { margin: 0 0 18px; }
.sp-back a { font-weight: 600; color: var(--ocpl-blue); text-decoration: none; font-size: .9rem; }
.sp-back a:hover { text-decoration: underline; }
.sp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 22px; }
.sp-meta__item { font-size: .85rem; color: var(--text-mid); }
.sp-meta__amount { font-size: .85rem; font-weight: 700; color: var(--ocpl-green-dark); background: #eef5e8; padding: 3px 10px; border-radius: var(--radius); }
.sp-featured { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ocpl-orange); background: var(--ocpl-orange-light); padding: 3px 10px; border-radius: 999px; }
.sp-photo { margin: 0 0 24px; }
.sp-photo img { width: 100%; height: auto; border-radius: var(--radius-lg); display: block; }
.sp-lead { font-size: 1.08rem; line-height: 1.75; color: var(--text); }
.sp-lead p { margin: 0 0 1em; }
.sp-content { margin-top: 8px; line-height: 1.75; color: var(--text); }
.sp-content p { margin: 0 0 1em; }
.sp-impact { margin-top: 28px; background: var(--success-soft); border: 1px solid var(--success-border); border-left: 4px solid var(--success); border-radius: var(--radius-md); padding: 20px 24px; }
.sp-impact__title { display: flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-size: 1rem; color: var(--success-dark); margin: 0 0 8px; }
.sp-impact p { margin: 0; line-height: 1.7; color: var(--text); }
.sp-more__title { font-family: var(--font-heading); font-size: 1.2rem; color: var(--ocpl-blue); margin: 0 0 18px; text-align: center; }
.sp-more__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.sp-more__card { display: flex; flex-direction: column; gap: 8px; background: var(--white); border: 1px solid var(--border); border-top: 3px solid var(--ocpl-blue); border-radius: var(--radius-md); padding: 16px 18px; text-decoration: none; transition: box-shadow var(--transition), transform var(--transition); }
.sp-more__card:hover { text-decoration: none; box-shadow: 0 6px 18px rgba(0,0,0,.08); transform: translateY(-2px); }
.sp-more__card .fp-card__cat { align-self: flex-start; }
.sp-more__name { font-family: var(--font-heading); font-weight: 700; color: var(--ocpl-blue); line-height: 1.35; }
.sp-more__foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; font-size: .82rem; color: var(--text-mid); }
.sp-more__amt { font-weight: 700; color: var(--ocpl-green-dark); }

/* ── Business sponsorship: tier cards ── */
.sponsor-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 20px; }
.sponsor-tier {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 4px solid var(--ocpl-blue-mid);
  border-radius: var(--radius-md);
  padding: 26px 24px;
}
.sponsor-tier--top { border-top-color: var(--ocpl-orange); box-shadow: 0 8px 24px rgba(0,0,0,.07); }
.sponsor-tier__name { font-family: var(--font-heading); font-size: .85rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--text-mid); }
.sponsor-tier__amount { font-family: var(--font-heading); font-size: 2rem; font-weight: 800; color: var(--ocpl-blue); margin: 4px 0 14px; }
.sponsor-tier__per { font-size: .9rem; font-weight: 600; color: var(--text-light); }
.sponsor-tier__benefits { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sponsor-tier__benefits li { position: relative; padding-left: 22px; font-size: .92rem; line-height: 1.5; color: var(--text); }
.sponsor-tier__benefits li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 12px; height: 7px;
  border-left: 2px solid var(--success); border-bottom: 2px solid var(--success); transform: rotate(-45deg);
}
.sponsor-tier__prev { font-style: italic; color: var(--text-mid); }
.sponsor-tier__prev::before { display: none; }
.sponsor-tier__blurb { font-size: .92rem; line-height: 1.6; color: var(--text-mid); margin: 0 0 20px; }
/* The tier button is stretched to the card, which at the 3-column desktop width
   leaves ~158px of room inside .btn's 24px padding. .btn is nowrap, so a label
   any longer than that spilled out past both borders (justify-content: center
   splits the overflow). Tighter padding plus wrapping keeps a long or edited
   label inside the button instead of over it. */
.sponsor-tier .btn {
  margin-top: auto;
  text-align: center;
  white-space: normal;
  padding: 11px 16px;
  line-height: 1.35;
}
.sponsor-tiers__note { max-width: 680px; margin: 22px auto 0; text-align: center; font-size: .85rem; color: var(--text-mid); line-height: 1.6; }

/* ── Business sponsorship: narrative sections ── */
.sponsor-lead { max-width: 720px; margin: 0 auto; }
.sponsor-lead h2 { color: var(--ocpl-blue); margin: 0 0 14px; }
.sponsor-lead p { line-height: 1.75; }
.sponsor-lead__close { max-width: 720px; margin: 26px auto 0; text-align: center; font-weight: 600; color: var(--ocpl-blue-dark); }
.sponsor-pullquote {
  font-family: var(--font-heading);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ocpl-blue) !important;
  border-left: 3px solid var(--ocpl-orange);
  padding-left: 18px;
  margin: 24px 0 0 !important;
}

/* Season results band. Mirrors .donate-impact, tuned for a light background. */
.sponsor-facts { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.sponsor-facts__item { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; min-width: 170px; padding: 14px 28px; }
.sponsor-facts__num { font-family: var(--font-heading); font-size: 2.1rem; font-weight: 800; line-height: 1.1; color: var(--ocpl-blue); }
.sponsor-facts__label { margin-top: 8px; max-width: 180px; font-size: .85rem; line-height: 1.45; color: var(--text-mid); }
.sponsor-facts__divider { width: 1px; height: 56px; flex-shrink: 0; background: var(--border); }
.sponsor-facts__source { max-width: 640px; margin: 16px auto 0; text-align: center; font-size: .82rem; color: var(--text-light); }

/* Level comparison. The cards carry the pitch; this answers "what do I get?" */
.sponsor-compare__heading { text-align: center; font-size: 1.05rem; color: var(--ocpl-blue); margin: 40px 0 16px; }
.sponsor-compare-wrap { overflow-x: auto; }
.sponsor-compare { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .9rem; }
.sponsor-compare th,
.sponsor-compare td { padding: 11px 14px; text-align: center; border-bottom: 1px solid var(--border); }
.sponsor-compare thead th {
  font-family: var(--font-heading); font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-mid); border-bottom: 2px solid var(--border); vertical-align: bottom;
}
.sponsor-compare thead th span { display: block; margin-top: 3px; font-size: .95rem; color: var(--ocpl-blue); text-transform: none; letter-spacing: 0; }
.sponsor-compare tbody tr:last-child th,
.sponsor-compare tbody tr:last-child td { border-bottom: 0; }
.sponsor-compare__rowhead { text-align: left; font-weight: 500; color: var(--text); }
.sponsor-compare__yes { color: var(--success); font-weight: 800; }
.sponsor-compare__no { color: var(--text-light); }

/* "Support something specific" card */
.sponsor-specific {
  max-width: 720px; margin: 0 auto; text-align: center;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 34px 40px;
}
.sponsor-specific h2 { color: var(--ocpl-blue); margin: 0 0 12px; }
.sponsor-specific p { color: var(--text-mid); line-height: 1.7; margin: 0 0 14px; }
.sponsor-specific__line { font-weight: 700; color: var(--ocpl-blue-dark) !important; margin-bottom: 22px !important; }

@media (max-width: 600px) {
  .sponsor-facts__divider { display: none; }
  .sponsor-facts__item { flex-basis: 100%; padding: 12px 0; }
  .sponsor-specific { padding: 26px 22px; }
  .sponsor-pullquote { font-size: 1.05rem; padding-left: 14px; }
}
.sponsor-contact { text-align: center; max-width: 620px; margin: 0 auto; }
.sponsor-contact h2 { color: var(--ocpl-blue); margin: 0 0 10px; }
.sponsor-contact p { color: var(--text-mid); line-height: 1.7; margin: 0 0 18px; }

/* ── Sponsor logo strip (members page, homepage, sponsorship page) ── */
.sponsor-strip { text-align: center; }
.sponsor-strip__heading { font-family: var(--font-heading); font-size: 1.15rem; color: var(--ocpl-blue); margin: 0 0 20px; }
.sponsor-strip__logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px 40px; }
.sponsor-strip__item { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; text-decoration: none; }
/* Logos fit a 200×72 box: wide wordmarks are capped by the width, square
   badges and tall marks get the full height (at 56px a square logo's
   wordmark was unreadable; tested 2026-08 with ten mixed-shape logos). */
.sponsor-strip__item img { max-height: 72px; max-width: 200px; width: auto; height: auto; display: block; }
.sponsor-strip__name {
  font-family: var(--font-heading); font-weight: 700; color: var(--ocpl-blue-dark);
  background: var(--off-white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 18px;
}
.sponsor-strip__more { margin: 18px 0 0; font-size: .9rem; }
.sponsor-strip__more a { color: var(--ocpl-blue); font-weight: 600; text-decoration: none; }
.sponsor-strip__more a:hover { text-decoration: underline; }
.fp-card__date {
  font-size: .78rem;
  color: var(--text-mid);
}
.fp-card__amount {
  font-size: .78rem;
  font-weight: 700;
  color: var(--ocpl-green-dark);
  background: #eef5e8;
  padding: 2px 8px;
  border-radius: var(--radius);
  margin-left: auto;
}
.fp-card__title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ocpl-blue);
  margin: 0 0 8px;
  line-height: 1.3;
}
.fp-card__desc {
  font-size: .9rem;
  color: var(--text-mid);
  line-height: 1.6;
  margin: 0 0 12px;
}
.fp-card__impact {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: .82rem;
  color: var(--ocpl-green-dark);
  background: #eef5e8;
  border-radius: var(--radius-md);
  padding: 8px 12px;
  margin-top: 12px;
}
.fp-card__impact svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--ocpl-green-dark);
}
.fp-card__thumb {
  height: 180px;
  overflow: hidden;
}
.fp-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* CTA band at bottom — matches volunteer/board page pattern */
.fp-cta-band {
  background: var(--ocpl-blue);
  padding: 56px 20px;
  text-align: center;
}
.fp-cta-band h2 {
  color: var(--white);
  margin-bottom: 12px;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.fp-cta-band p {
  color: rgba(255,255,255,.85);
  font-size: 1.05rem;
  margin-bottom: 28px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.fp-cta-band__buttons {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
/* White/outline-white btn variants for dark backgrounds */
.btn--white {
  background: var(--white);
  color: var(--ocpl-blue);
  border-color: var(--white);
}
.btn--white:hover {
  background: var(--ocpl-blue-light);
  color: var(--ocpl-blue);
  text-decoration: none;
}
.btn--outline-white {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,.6);
}
.btn--outline-white:hover {
  background: rgba(255,255,255,.15);
  border-color: var(--white);
  color: var(--white);
  text-decoration: none;
}

@media (max-width: 640px) {
  .fp-stats-row  { gap: 28px; }
  .fp-stat__val  { font-size: 1.7rem; }
  .fp-grid       { grid-template-columns: 1fr; }
  .fp-year-title { font-size: 1.3rem; }
}

/* ============================================================
   HOMEPAGE — FUNDED PROJECTS STRIP
   ============================================================ */
.home-fp-strip {
  background: var(--ocpl-blue-pale);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.fp-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 0;
}
.fp-strip-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow var(--transition), transform var(--transition);
}
.fp-strip-card:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.fp-strip-card__amount {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ocpl-orange);
  line-height: 1;
}
.fp-strip-card__title {
  font-family: var(--font-heading);
  font-size: .95rem;
  font-weight: 700;
  color: var(--ocpl-blue);
  margin: 0;
  line-height: 1.35;
  flex: 1;
}
.fp-strip-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.fp-strip-card__cat {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-mid);
  font-family: var(--font-heading);
}
.fp-strip-card__year {
  font-size: .78rem;
  color: var(--text-mid);
  background: var(--ocpl-blue-light);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}

@media (max-width: 900px) {
  .fp-strip-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .fp-strip-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   HOMEPAGE — EVENTS (image left / info right)
   ============================================================ */
.hp-event-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.hp-event-card {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}
.hp-event-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.hp-event-card__img-wrap {
  display: block;
  overflow: hidden;
  flex-shrink: 0;
}
.hp-event-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.hp-event-card:hover .hp-event-card__img-wrap img {
  transform: scale(1.04);
}
.hp-event-card__img-wrap--placeholder {
  background: var(--ocpl-blue-light);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  color: var(--ocpl-blue);
}
.hp-event-card__img-wrap--placeholder svg {
  width: 80px;
  height: 60px;
}
.hp-event-card__body {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hp-event-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: .8rem;
  color: var(--text-mid);
}
.hp-event-badge {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--ocpl-orange-light);
  color: var(--ocpl-orange);
  font-family: var(--font-heading);
}
.hp-event-date,
.hp-event-time,
.hp-event-location {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-mid);
}
.hp-event-date svg,
.hp-event-time svg,
.hp-event-location svg {
  flex-shrink: 0;
  color: var(--ocpl-blue);
}
.hp-event-card__title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 4px 0 0;
  line-height: 1.3;
}
.hp-event-card__title a {
  color: var(--ocpl-blue);
  text-decoration: none;
}
.hp-event-card__title a:hover {
  color: var(--ocpl-orange);
  text-decoration: underline;
}
.hp-event-card__desc {
  font-size: .9rem;
  color: var(--text-mid);
  line-height: 1.55;
  margin: 0;
  flex: 1;
}
.btn--sm {
  padding: 6px 16px;
  font-size: .82rem;
  min-height: auto;
  margin-top: 4px;
  align-self: flex-start;
}

@media (max-width: 700px) {
  .hp-event-card {
    grid-template-columns: 1fr;
  }
  .hp-event-card__img-wrap {
    height: 180px;
  }
}

/* ============================================================
   IMPACT SECTION — AGGREGATE STATS ROW
   ============================================================ */
.impact-agg-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 48px;
}
.impact-agg-card {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: background var(--transition), transform var(--transition);
}
.impact-agg-card:hover {
  background: rgba(255,255,255,.16);
  transform: translateY(-2px);
}
/* Subtle accent line at top per type */
.impact-agg-card--members  { border-top: 3px solid var(--ocpl-green); }
.impact-agg-card--years    { border-top: 3px solid var(--chart-2); }
.impact-agg-card--projects { border-top: 3px solid var(--ocpl-orange); }
.impact-agg-card--invested { border-top: 3px solid var(--chart-5); }

.impact-agg-card__val {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1;
  margin-bottom: 8px;
}
.impact-agg-card__label {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgba(255,255,255,.75);
  font-family: var(--font-heading);
  font-weight: 600;
}

@media (max-width: 500px) {
  .impact-agg-row { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   INTRO — QUICK LINK CIRCLES
   ============================================================ */
.intro-quick-links {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 36px;
}
.iql {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ocpl-blue);
}
.iql__circle {
  /* Matches the quick-link band on the OCPL library site: a large colored
     disc in a thick white ring, white outline icon inside. The five inline
     background colors are sampled from that band and all clear the 3:1
     non-text floor for the white glyph (worst is the olive at 3.05:1). */
  width: 116px;
  height: 116px;
  border-radius: 50%;
  border: 6px solid var(--white);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  transition: transform var(--transition), box-shadow var(--transition);
}
.iql__circle svg {
  width: 52px;
  height: 52px;
}
.iql:hover .iql__circle {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,.2);
}
.iql__label {
  font-size: .95rem;
  color: var(--ocpl-navy, var(--ocpl-navy));
  font-weight: 600;
  font-family: var(--font-heading);
  text-align: center;
  color: var(--ocpl-blue);
  letter-spacing: .02em;
}
.iql:hover .iql__label {
  color: var(--ocpl-orange);
  text-decoration: none;
}
@media (max-width: 480px) {
  .intro-quick-links { gap: 20px; }
  .iql__circle { width: 72px; height: 72px; border-width: 4px; }
  .iql__circle svg { width: 32px; height: 32px; }
}

/* ── Donate form section header ─────────────────────────────── */
.donate-form-header {
  text-align: center;
  margin-bottom: 28px;
}
.donate-form-header h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--ocpl-blue);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.donate-form-header p {
  font-size: .88rem;
  color: var(--text-mid);
  margin: 0;
}

/* ============================================================
   MEMBERS PAGE
   ============================================================ */

/* ── Intro section ── */
.members-section--intro { background: var(--white); border-bottom: 1px solid var(--border); }

.members-thanks {
  display: flex;
  align-items: flex-start;
  gap: 28px;
}
.members-thanks__icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  background: var(--ocpl-blue-pale);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ocpl-blue-mid);
}
.members-thanks__lead {
  font-size: 1.08rem;
  color: var(--ocpl-blue);
  font-style: italic;
  line-height: 1.65;
  margin-bottom: 12px;
}
.members-thanks__body p:last-child { margin-bottom: 0; }
/* The lead is set in italic; the paragraphs under it are body copy, and at
   four of them the block needs a little more air between lines. */
.members-thanks__body p { line-height: 1.65; }

/* ── Members photo ──
   Featured image closing the thank-you block. The source is a wide panorama,
   so a fixed aspect-ratio crop keeps it from becoming a letterbox strip on
   desktop or a sliver on mobile. */
.members-photo {
  margin: 32px 0 0;
}
.members-photo__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2.4 / 1;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.members-photo__caption {
  margin-top: 10px;
  font-size: .83rem;
  color: var(--text-mid);
  line-height: 1.5;
}
@media (max-width: 640px) {
  /* Taller crop on phones — 2.4:1 leaves almost nothing of the room. */
  .members-photo__img { aspect-ratio: 3 / 2; }
}

/* Per-page variants of the same figure (focpl_page_photo).
   The members photo is a wide panorama; these are ordinary camera shots, so
   they get a shallower crop that keeps more of the frame. */
.about-photo { margin: 0 0 26px; }
.about-photo .members-photo__img { aspect-ratio: 16 / 10; }

.adopt-hero__photo { margin: 30px auto 0; max-width: 620px; }
.adopt-hero__photo .members-photo__img { aspect-ratio: 4 / 3; }

/* ── What membership includes ──
   Reuses .join-benefits from the join page via focpl_membership_benefits(),
   so only the surrounding section needs styling here. */
.members-section--benefits {
  background: var(--white);
  border-top: 1px solid var(--border);
}
.members-benefits__heading {
  font-size: 1.15rem;
  margin: 0 0 22px;
  text-align: center;
}

/* ── Level sections ── */
.members-section { background: var(--white); }

/* ── Donor boards ──
   Each membership level is a carved board: gold hand-lettered title, the
   level's terms beneath it, and the members' names on small brass plates.
   Replaces the old level-header + three-column text list.

   The wood is three layers of stretched fractal noise, no images. The trick
   is a lopsided baseFrequency (x then y): 0.06 0.0035 varies fast across
   the width and slowly down the height, so the streaks run VERTICALLY,
   like standing planks — deliberate; swap the two numbers for cross-grain.
   Even repeating-linear-gradient stripes were the first attempt and read
   as corrugated metal.

   GRAIN reads the dark end of the noise field and SHEEN the light end of the
   same field (same seed and frequency), so the pale and dark sides of each
   streak line up. PORES is a tighter field for surface texture.

   Contrast, measured against every stop of every gradient rather than an
   average, since text can land anywhere on the surface behind it:
     plate/plaque engraving (#38290e on brass)  worst pair 5.15:1 — AA
     board description (#dcc79c on walnut)      6.84:1 vs the lightest base
       stop; the sheen highlights lighten patches locally, so the natural
       #c9ab76 (5.16 base, ~3.75 on the brightest rendered patch) was
       lifted to keep every patch above 4.5.
   (The title and terms sit on the brass plaque, not the walnut — their
   measurement is the plate-engraving pair above.)
   ── */
.members-board {
  position: relative;
  /* padding clears the 16px bevelled frame */
  padding: 42px 36px 36px;
  border: 1px solid #14060a;
  border-radius: 6px;
  background:
    radial-gradient(115% 85% at 50% 6%, rgba(255,178,158,.055), rgba(0,0,0,0) 66%),
    url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27400%27%20height%3D%27600%27%3E%3Cfilter%20id%3D%27p%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.42%200.012%27%20numOctaves%3D%273%27%20seed%3D%274%27%20stitchTiles%3D%27stitch%27%20result%3D%27n%27%2F%3E%3CfeColorMatrix%20in%3D%27n%27%20type%3D%27matrix%27%20values%3D%270%200%200%200%200.05%200%200%200%200%200.012%200%200%200%200%200.02%200.75%200%200%200%20-0.5%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27400%27%20height%3D%27600%27%20filter%3D%27url%28%23p%29%27%2F%3E%3C%2Fsvg%3E"),
    url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271400%27%20height%3D%271600%27%3E%3Cfilter%20id%3D%27s%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.06%200.0035%27%20numOctaves%3D%275%27%20seed%3D%2711%27%20stitchTiles%3D%27stitch%27%20result%3D%27n%27%2F%3E%3CfeColorMatrix%20in%3D%27n%27%20type%3D%27matrix%27%20values%3D%270%200%200%200%200.6%200%200%200%200%200.29%200%200%200%200%200.3%201.3%200%200%200%20-0.92%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%271400%27%20height%3D%271600%27%20filter%3D%27url%28%23s%29%27%2F%3E%3C%2Fsvg%3E"),
    url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271400%27%20height%3D%271600%27%3E%3Cfilter%20id%3D%27g%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.06%200.0035%27%20numOctaves%3D%275%27%20seed%3D%2711%27%20stitchTiles%3D%27stitch%27%20result%3D%27n%27%2F%3E%3CfeColorMatrix%20in%3D%27n%27%20type%3D%27matrix%27%20values%3D%270%200%200%200%200.075%200%200%200%200%200.018%200%200%200%200%200.028%201.3%200%200%200%20-0.52%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%271400%27%20height%3D%271600%27%20filter%3D%27url%28%23g%29%27%2F%3E%3C%2Fsvg%3E"),
    url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271400%27%20height%3D%27900%27%3E%3Cfilter%20id%3D%27d%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.0022%200.004%27%20numOctaves%3D%273%27%20seed%3D%2723%27%20stitchTiles%3D%27stitch%27%20result%3D%27n%27%2F%3E%3CfeColorMatrix%20in%3D%27n%27%20type%3D%27matrix%27%20values%3D%270%200%200%200%200.3%200%200%200%200%200.09%200%200%200%200%200.1%200.3%200%200%200%20-0.14%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%271400%27%20height%3D%27900%27%20filter%3D%27url%28%23d%29%27%2F%3E%3C%2Fsvg%3E"),
    linear-gradient(176deg,#68222d 0%,#571b26 40%,#45151e 74%,#341016 100%);
  /* grain and sheen share a tile so their light and dark sides register;
     depth is a slower field on its own rhythm */
  background-size: auto, 400px 600px, 1400px 1600px, 1400px 1600px, 1400px 900px, auto;
  box-shadow:
    /* the frame: a darker band, painted over a 1px chamfer highlight */
    inset 0 0 0 16px rgba(0,0,0,.34),
    inset 0 0 0 17px rgba(255,186,158,.13),
    inset 0 0 26px rgba(0,0,0,.34),
    inset 0 2px 0 rgba(255,186,158,.14),
    0 6px 16px rgba(0,0,0,.32);
}
/* routed edge just inside the frame */
.members-board::before {
  content: '';
  position: absolute;
  inset: 17px;
  border-radius: 3px;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.30);
  pointer-events: none;
}

/* ── the header plaque ──
   Replaces the gold script title. Deliberately a LARGER VERSION OF THE NAME
   PLATES below, not a different object: same brass gradient, same border,
   same bevel, same engraved dark ink, scaled up. Anything it does that the
   plates don't is a bug.
   Contrast is the plates' own measurement: ink #38290e against every brass
   stop, worst pair 5.15:1, so the small terms line clears AA too. */
.members-board__plaque {
  margin: 0 auto 26px;
  max-width: 620px;
  padding: 18px 30px 15px;
  background: linear-gradient(122deg,#e4cf98 0%,#c6a455 40%,#d8c084 58%,#bb9840 100%);
  border: 1px solid rgba(62,44,12,.65);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 3px rgba(0,0,0,.5);
}

.members-board__title {
  margin: 0 0 4px;
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.25rem, 3.4vw, 1.85rem);
  line-height: 1.25;
  letter-spacing: .06em;
  color: #38290e;
  /* same engraving as the plates: a light edge below the letterform */
  text-shadow: 0 1px 0 rgba(255,255,255,.38);
}
.members-board__terms {
  margin: 0;
  text-align: center;
  font-size: .76rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #38290e;
  text-shadow: 0 1px 0 rgba(255,255,255,.3);
}
.members-board__desc {
  margin: 0 auto 20px;
  max-width: 46ch;
  text-align: center;
  font-size: .86rem;
  line-height: 1.5;
  color: #dcc79c;
}

/* ── brass name plates ── */
.members-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* auto-fill sizes columns to the board, so no per-breakpoint column counts */
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 9px;
}
.members-grid__name {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid rgba(62,44,12,.65);
  border-radius: 2px;
  background: linear-gradient(122deg,#e4cf98 0%,#c6a455 40%,#d8c084 58%,#bb9840 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 3px rgba(0,0,0,.5);
  font-family: var(--font-serif);
  /* the names are the page's primary content — sized up from .82rem */
  font-size: clamp(.86rem, 1vw, .95rem);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.3;
  color: #38290e;
  text-shadow: 0 1px 0 rgba(255,255,255,.38);
  overflow-wrap: break-word;
}

/* ── Recognition policy + board tools ── */
.members-policy { font-size: .84rem; color: var(--text-mid); line-height: 1.65; margin: 0 0 16px; }
.members-policy a { color: var(--ocpl-blue); }
.members-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.members-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.members-jump a {
  font-size: .8rem; font-weight: 600; color: var(--ocpl-blue);
  padding: 5px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-pill);
  text-decoration: none; transition: border-color var(--transition-fast);
}
.members-jump a:hover { border-color: var(--ocpl-blue); }
.members-find {
  margin-left: auto; padding: 8px 14px; border: 1.5px solid var(--border);
  border-radius: var(--radius); font-size: .88rem; min-width: 200px;
}
.members-find:focus-visible { outline: 2px solid var(--ocpl-blue); outline-offset: 1px; }

/* Phones: one plate per row makes each board a scroll marathon; hold two
   columns down to very narrow screens. */
@media (max-width: 600px) {
  .members-board { padding: 32px 20px 24px; }
  .members-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .members-grid__name { padding: 7px 6px; }
}
@media (max-width: 350px) {
  .members-grid { grid-template-columns: 1fr; }
}

/* A wall of dark boards prints as a wall of toner. */
@media print {
  .members-board {
    background: none;
    border: 1px solid var(--border);
    box-shadow: none;
    padding: 10px 0 0;
  }
  .members-board::before { display: none; }
  .members-board__plaque {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-bottom: 12px;
  }
  .members-board__title {
    color: #000;
    text-shadow: none;
    font-size: 1.3rem;
  }
  .members-board__terms,
  .members-board__desc { color: #333; text-shadow: none; }
  .members-grid__name {
    background: none;
    border: 1px solid var(--border);
    box-shadow: none;
    text-shadow: none;
    color: #000;
    min-height: 0;
    padding: 5px 9px;
  }
}

/* Forced colors: the whole thing would flatten into one block otherwise. */
@media (forced-colors: active) {
  .members-board { background: none; border: 1px solid CanvasText; }
  .members-board::before { display: none; }
  .members-board__plaque {
    background: none;
    border: 1px solid CanvasText;
    box-shadow: none;
  }
  .members-board__title {
    color: CanvasText;
    text-shadow: none;
  }
  .members-board__terms,
  .members-board__desc { color: CanvasText; text-shadow: none; }
  .members-grid__name {
    background: none;
    border: 1px solid CanvasText;
    color: CanvasText;
    text-shadow: none;
  }
}

/* ── Empty state ── */
.members-empty {
  text-align: center;
  padding: 64px 20px;
  color: var(--text-mid);
}
.members-empty svg {
  width: 52px;
  height: 52px;
  margin: 0 auto 20px;
  color: var(--mid-gray);
  display: block;
}
.members-empty p { margin: 0 0 24px; font-size: 1rem; }

/* ── Join CTA ── */
.members-cta { background: var(--ocpl-blue); }
.members-cta__inner {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}
.members-cta__inner h2 { color: var(--white); margin-bottom: 12px; }
.members-cta__inner > p {
  color: rgba(255,255,255,0.75);
  margin-bottom: 28px;
}
.members-cta__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.members-cta__back { margin-top: 20px; font-size: .88rem; }
.members-cta__back a { color: rgba(255,255,255,0.7); text-decoration: none; }
.members-cta__back a:hover { color: var(--white); text-decoration: underline; }
.members-cta .btn--filled {
  background: var(--ocpl-orange);
  color: var(--white);
}
.members-cta .btn--filled:hover { background: var(--ocpl-orange-dark); }
.members-cta .btn--outline {
  border-color: rgba(255,255,255,0.5);
  color: var(--white);
}
.members-cta .btn--outline:hover {
  background: rgba(255,255,255,0.15);
  border-color: var(--white);
  color: var(--white);
  text-decoration: none;
}

/* ── Responsive ── */
@media (max-width: 560px) {
  /* The plaque grid sizes itself via auto-fill, so the old columns: 2 / 1
     breakpoints are gone. Below ~530px one plaque per row is inevitable
     anyway; just tighten it up so it does not look like a stack of buttons. */
  .members-grid { gap: 10px; }
  .members-grid__name { min-height: 50px; font-size: 0.9rem; }
  .members-thanks { flex-direction: column; gap: 16px; }
  .members-thanks__icon { width: 48px; height: 48px; }
  .members-level-header { flex-direction: column; gap: 10px; }
}

/* ════════════════════════════════════════════════════════════
   CAMPAIGNS / DRIVES  (page-campaigns.php)
   ════════════════════════════════════════════════════════════ */

/* ── Suppress default .section spacing inside campaign detail ─ */
.drive-progress-section.section,
.drive-story-section.section,
.drive-tiers-section.section,
.drive-activity-section.section,
.drive-faq-section.section,
.drive-sponsors-section.section {
  padding-top: 32px;
  padding-bottom: 32px;
}

/* ── Section headings inside drive detail ─────────────────── */
.drive-progress-section h2,
.drive-story-section h2,
.drive-tiers-section h2,
.drive-tiers-section .section-heading__title,
.drive-activity-section h2,
.drive-faq-section h2,
.drive-sponsors-section h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ocpl-blue);
  margin: 0 0 16px;
}

/* ── Listing page ─────────────────────────────────────────── */

.drive-listing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
  margin-bottom: 48px;
}

.drive-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s, transform .2s;
}
.drive-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.12); transform: translateY(-2px); }
.drive-card--featured { border-color: var(--ocpl-blue); box-shadow: 0 4px 16px rgba(0,86,133,.15); }
.drive-card--ended { opacity: .75; }

.drive-card__img-wrap { position: relative; height: 180px; overflow: hidden; background: var(--ocpl-blue); display: block; }
.drive-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.drive-card__img-placeholder { width: 100%; height: 100%; }

.drive-card__badge {
  position: absolute;
  top: 10px; left: 10px;
  background: var(--ocpl-blue);
  color: var(--white);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
}
.drive-card--featured .drive-card__badge { background: var(--highlight-fill); color: var(--heading); }

.drive-card__body { padding: 18px 20px 14px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.drive-card__type { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-light); }
.drive-card__title { font-size: 1.1rem; font-weight: 700; color: var(--heading); line-height: 1.3; margin: 0; }
.drive-card__desc { font-size: .88rem; color: var(--text); line-height: 1.5; flex: 1; }

/* track = .drive-card__progress, fill = .drive-card__progress-bar (inline width%) */
.drive-card__progress {
  height: 6px;
  background: #dce9f5;
  border-radius: 3px;
  overflow: hidden;
  margin: 8px 0 5px;
}
.drive-card__progress-bar {
  height: 100%;
  background: var(--ocpl-blue);
  border-radius: 3px;
}
.drive-card__progress-meta { font-size: .78rem; color: var(--text); margin-bottom: 4px; }

.drive-card__footer {
  padding: 10px 16px;
  border-top: 1px solid var(--light-gray);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .8rem;
  color: var(--text-light);
  gap: 8px;
}
.drive-card__raised { font-weight: 700; color: var(--ocpl-blue); }
.drive-card__date { font-size: .8rem; color: var(--text-light); }

.drives-ended-section h2 {
  font-size: 1.3rem;
  color: var(--text);
  margin-bottom: 20px;
  padding-top: 20px;
  border-top: 2px solid var(--light-gray);
}

/* ── Detail page wrapper ──────────────────────────────────── */
.drive-detail { max-width: 860px; margin: 0 auto; padding: 0 20px 60px; }

/* ── Hero image (rendered as div with background-image) ───── */
.drive-hero-img {
  width: 100%;
  height: 320px;
  background-size: cover;
  background-position: center;
  display: block;
}

/* ── Progress card ────────────────────────────────────────── */
.drive-progress-section { margin-bottom: 0; }
.drive-progress-card {
  background: #f4f8fc;
  border: 1px solid var(--ocpl-blue-light);
  border-radius: 10px;
  padding: 20px 24px;
}

.drive-match-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--highlight-soft);
  border: 1px solid var(--highlight-border);
  color: var(--highlight-text);
  font-size: .82rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 14px;
  max-width: 100%;
  white-space: normal;
  line-height: 1.4;
}
.drive-match-badge svg { flex-shrink: 0; width: 14px; height: 14px; }

.drive-progress { margin-bottom: 14px; }
.drive-progress__bar-wrap {
  height: 14px;
  background: #dce9f5;
  border-radius: 7px;
  overflow: hidden;
  margin-bottom: 10px;
}
.drive-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--ocpl-blue), #0079c2);
  border-radius: 7px;
  transition: width .5s ease;
}
.drive-progress__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}
.drive-progress__raised { font-size: .95rem; color: var(--text); }
.drive-progress__raised strong { color: var(--ocpl-blue); font-size: 1.15rem; }
.drive-progress__goal { font-size: .88rem; color: var(--text-mid); }
.drive-progress__goal strong { color: var(--ocpl-blue); }
.drive-progress__simple { font-size: .95rem; color: var(--text); margin: 6px 0 0; }
.drive-progress__simple strong { color: var(--ocpl-blue); }
.drive-progress__note { font-size: .84rem; color: var(--text-mid); margin: 10px 0 0; line-height: 1.55; }
.drive-progress__note a { color: var(--ocpl-blue); }

/* ── Meta row (date, location, etc.) ─────────────────────── */
.drive-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--ocpl-blue-light);
}
.drive-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .88rem;
  color: var(--text);
}
.drive-meta-item svg { color: var(--ocpl-blue); flex-shrink: 0; }
.drive-meta-item a { color: var(--ocpl-blue); text-decoration: none; }
.drive-meta-item a:hover { text-decoration: underline; }

/* ── CTA row ──────────────────────────────────────────────── */
.drive-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin: 16px 0 4px;
}
/* Third action as a text link (renewal), quieter than the two buttons. */
.drive-cta-row__link { font-weight: 600; color: var(--ocpl-blue); text-decoration: none; }
.drive-cta-row__link:hover, .drive-cta-row__link:focus-visible { text-decoration: underline; text-underline-offset: 2px; }

/* ── Story section ────────────────────────────────────────── */
.drive-story-content { font-size: .97rem; line-height: 1.75; color: var(--text); }
.drive-story-content p { margin-bottom: 1em; }

/* ── Tiers ────────────────────────────────────────────────── */
/* The one band break on the drive detail page: white tier cards on pale. */
.drive-tiers-section { background: var(--ocpl-blue-pale); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.drive-tiers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 240px));
  gap: 16px;
  justify-content: center;
}
.drive-tier-card {
  background: var(--white);
  border: 2px solid var(--ocpl-blue-light);
  border-radius: 10px;
  padding: 20px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: border-color .2s, box-shadow .2s;
}
.drive-tier-card:hover { border-color: var(--ocpl-blue); box-shadow: 0 4px 14px rgba(0,86,133,.12); }
.drive-tier-card__amount {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--ocpl-blue);
  line-height: 1.1;
}
.drive-tier-card__label {
  font-size: .95rem;
  font-weight: 700;
  color: var(--heading);
}
.drive-tier-card__desc { font-size: .82rem; color: var(--text-mid); line-height: 1.5; margin-bottom: 4px; }
.drive-tier-card__per { font-size: .8rem; font-weight: 400; color: var(--text-mid); }
.drive-tier-card__btn { margin-top: auto; }
.drive-tiers-note {
  max-width: 640px;
  margin: 20px auto 0;
  text-align: center;
  font-size: .88rem;
  color: var(--text);
  line-height: 1.6;
}
.drive-tiers-note a { color: var(--ocpl-blue); }

/* ── Recent activity ──────────────────────────────────────── */
.drive-activity-feed { display: flex; flex-direction: column; gap: 10px; }
.drive-activity-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: #f9fafb;
  border-radius: 8px;
  border-left: 3px solid var(--ocpl-blue);
  font-size: .9rem;
}
.drive-activity-item__icon {
  width: 34px; height: 34px;
  background: var(--ocpl-blue);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--white);
}
.drive-activity-item__text { flex: 1; font-size: .9rem; color: var(--text); line-height: 1.45; }
.drive-activity-item__text strong { color: var(--heading); }
.drive-activity-item__time { display: block; font-size: .76rem; color: var(--text-light); margin-top: 2px; }

/* ── FAQ ──────────────────────────────────────────────────── */
.drive-faq-list { display: flex; flex-direction: column; gap: 8px; }
.drive-faq-item {
  border: 1px solid #e0e8f0;
  border-radius: 8px;
  overflow: hidden;
}
.drive-faq-item__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 16px;
  cursor: pointer;
  font-size: .95rem;
  font-weight: 600;
  color: var(--heading);
  background: #f8fafc;
  user-select: none;
  gap: 12px;
  list-style: none;
}
.drive-faq-item__q:hover { background: #eef4f9; color: var(--ocpl-blue); }
.drive-faq-item__icon {
  font-size: 1.2rem;
  line-height: 1;
  color: var(--ocpl-blue);
  flex-shrink: 0;
  font-weight: 400;
  transition: transform .2s;
}
.drive-faq-item__a {
  padding: 0 16px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, padding .3s ease;
  font-size: .9rem;
  color: var(--text);
  line-height: 1.65;
}
.drive-faq-item--open .drive-faq-item__a {
  max-height: 800px;
  padding: 12px 16px 16px;
}

/* ── Sponsors ─────────────────────────────────────────────── */
.drive-sponsors-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}
.drive-sponsor-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--text);
  text-align: center;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  transition: box-shadow .2s;
  min-width: 100px;
}
.drive-sponsor-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.drive-sponsor-card img { max-width: 100px; max-height: 60px; object-fit: contain; }
.drive-sponsor-card__name { font-size: .82rem; font-weight: 600; color: var(--text); }
.drive-sponsor-card__tier { font-size: var(--fs-xs); color: var(--text-light); text-transform: uppercase; letter-spacing: .05em; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 700px) {
  .drive-listing-grid { grid-template-columns: 1fr; }
  .drive-hero-img { height: 220px; }
  .drive-progress__meta { flex-direction: column; gap: 4px; }
  .drive-cta-row { flex-direction: column; }
  .drive-cta-btn { text-align: center; }
  .drive-tiers-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .drive-tiers-grid { grid-template-columns: 1fr; }
  .drive-sponsors-row { justify-content: center; }
}

/* ════════════════════════════════════════════════════════════
   DATA VISUALIZATION PAGE  (page-data-viz.php)
   ════════════════════════════════════════════════════════════ */

/* ── Layout ────────────────────────────────────────────────── */
.dv-page .section { padding-top: 48px; padding-bottom: 48px; }
.dv-kpi-section   { background: var(--ocpl-blue-pale); }
.dv-ranks-section { background: var(--white); }
.dv-peer-section  { background: var(--ocpl-blue-pale); }
.dv-insights-section { background: var(--white); }
.dv-source-section   { background: var(--ocpl-blue-pale); border-top: 1px solid var(--border); }

.dv-section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ocpl-blue-dark);
  margin: 0 0 6px;
}
.dv-section-sub {
  color: var(--text);
  font-size: .95rem;
  margin: 0 0 28px;
}
.dv-population-note {
  margin-top: 20px;
  text-align: center;
  font-size: .88rem;
  color: var(--text-mid);
}

/* ── KPI Cards ─────────────────────────────────────────────── */
.dv-kpi-grid {
  display: grid;
  /* one row of four on desktop — auto-fit wrapped these 3+1 */
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.dv-kpi-card {
  background: var(--white);
  border-radius: 10px;
  padding: 24px 20px 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,.07);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-top: 4px solid transparent;
}
.dv-kpi-card--strength   { border-top-color: var(--success); }
.dv-kpi-card--mid        { border-top-color: var(--warning); }
.dv-kpi-card--opportunity { border-top-color: var(--danger); }

.dv-kpi-card__badge {
  display: flex;
  align-items: baseline;
  gap: 3px;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 12px;
  font-weight: 700;
}
.dv-kpi-card__badge--strength   { background: var(--success-soft); color: var(--success-dark); }
.dv-kpi-card__badge--mid        { background: var(--warning-soft); color: var(--warning-dark); }
.dv-kpi-card__badge--opportunity { background: var(--danger-soft); color: var(--danger-dark); }

.dv-kpi-card__rank { font-size: 1.1rem; }
.dv-kpi-card__of   { font-size: .78rem; opacity: .8; }

.dv-kpi-card__value {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--ocpl-blue-dark);
  line-height: 1;
  margin-bottom: 8px;
}
.dv-kpi-card__label {
  font-size: .88rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.dv-kpi-card__note {
  font-size: .78rem;
  color: var(--text-mid);
}

/* ── Rank Bars ─────────────────────────────────────────────── */
.dv-rank-bars { display: flex; flex-direction: column; gap: 28px; }

.dv-rank-row { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: center; }

.dv-rank-row__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: right;
}
.dv-rank-row__metric { font-size: .95rem; font-weight: 600; color: var(--ocpl-blue-dark); }
.dv-rank-row__val { font-size: .88rem; color: var(--text); }
.dv-rank-row__val em { font-style: normal; font-weight: 700; color: var(--ocpl-blue); }

.dv-rank-bar-wrap { flex: 1; }

.dv-rank-bar {
  position: relative;
  height: 16px;
  margin-bottom: 4px;
}
.dv-rank-bar__track {
  position: absolute;
  inset: 4px 0;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, #c04a20, #e0a030 40%, #1a8a4f);
}
.dv-rank-bar__marker {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.dv-rank-bar__marker::before {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  background: var(--ocpl-blue);
  border: 2px solid var(--white);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.dv-rank-bar__tip {
  margin-top: 4px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ocpl-blue);
  white-space: nowrap;
  background: var(--white);
  padding: 1px 5px;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.dv-rank-bar__ends {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--text-mid);
  margin-top: 18px;
}

/* ── Peer Chart ────────────────────────────────────────────── */
.dv-chart-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.dv-chart-tab {
  padding: 7px 18px;
  border-radius: 20px;
  border: 2px solid var(--mid-gray);
  background: transparent;
  color: var(--ocpl-blue);
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.dv-chart-tab:hover           { background: var(--ocpl-blue-light); }
.dv-chart-tab--active         { background: var(--ocpl-blue); color: var(--white); border-color: var(--ocpl-blue); }

.dv-chart-wrap {
  background: var(--white);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  height: 380px;
}
.dv-chart-note {
  font-size: .8rem;
  color: var(--text-mid);
  margin-top: 10px;
  text-align: right;
}

/* ── Insights ──────────────────────────────────────────────── */
.dv-insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.dv-insight {
  border-radius: 8px;
  padding: 24px 22px;
  border-left: 5px solid transparent;
}
.dv-insight--strength   { background: var(--success-soft); border-left-color: var(--success); }
.dv-insight--opportunity { background: var(--ocpl-orange-light); border-left-color: var(--ocpl-orange); }

.dv-insight__icon {
  font-size: 1.1rem;
  margin-bottom: 8px;
}
.dv-insight--strength   .dv-insight__icon { color: var(--success); }
.dv-insight--opportunity .dv-insight__icon { color: var(--ocpl-orange); }

.dv-insight__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ocpl-blue-dark);
  margin: 0 0 8px;
}
.dv-insight p { font-size: .9rem; color: var(--text); margin: 0; line-height: 1.6; }
.dv-insight--context { background: var(--ocpl-blue-light); border-left-color: var(--ocpl-blue); }
.dv-insight--context .dv-insight__icon { color: var(--ocpl-blue); }
.dv-insight--context a { color: var(--ocpl-blue); font-weight: 600; }

/* ============================================================
   HOMEPAGE — NEWSLETTER SIGNUP + SUBSCRIBE FORM
   ============================================================ */
.home-subscribe {
  background: var(--ocpl-blue-pale);
  border-top: 1px solid var(--border);
}
.home-subscribe__inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 32px;
  align-items: center;
}
.home-subscribe__text h2 { margin: 0 0 8px; }
.home-subscribe__text p  { margin: 0; color: var(--text-mid); }
/* With Matthew Cordell's drawing: art beside the signup on desktop
   (heading + form stack in the second column); on narrow screens the
   heading and form come first and the drawing signs off beneath. */
.home-subscribe__inner--art { grid-template-columns: 300px 1fr; gap: 40px; }
.home-subscribe__stack { display: grid; gap: 18px; }
.home-subscribe__art { margin: 0; }
.home-subscribe__art img { display: block; width: 100%; height: auto; }
.home-subscribe__art figcaption { margin: 8px 0 0; font-size: var(--fs-xs); color: var(--text-mid); text-align: center; }

/* Sign-off band: the wide Cordell illustration closing Join, Donate,
   Volunteer, and the 404 page (parts/signoff-art.php). */
.page-signoff { padding: var(--space-8) 0 var(--space-2); }
.page-signoff__art { margin: 0 auto; max-width: 640px; }
.page-signoff__art img { display: block; width: 100%; height: auto; }
.page-signoff__art figcaption { margin: 10px 0 0; font-size: var(--fs-xs); color: var(--text-mid); text-align: center; }

.focpl-sub-hp { position: absolute; left: -9999px; top: -9999px; }
/* Events hub: the email-list prompt beneath the cards. */
.hub-subscribe {
  max-width: 540px;
  margin: 40px auto 0;
  text-align: center;
}
.hub-subscribe__lead { margin: 0 0 14px; color: var(--text-mid); }
.hub-subscribe__lead strong { color: var(--heading); }

.focpl-sub-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.focpl-sub-fields input {
  flex: 1 1 160px;
  min-height: 44px;
  padding: 9px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  background: var(--white);
}
.focpl-sub-fields input:focus { outline: none; border-color: var(--ocpl-blue); box-shadow: var(--focus-ring); }
.focpl-sub-msg { margin: 8px 0 0; font-size: .9rem; color: var(--danger); min-height: 1.2em; }
.focpl-sub-msg--ok { color: var(--success-dark); }
.focpl-sub-fine { margin: 6px 0 0; font-size: .78rem; color: var(--text-light); }

@media (max-width: 700px) {
  .home-subscribe__inner { grid-template-columns: 1fr; gap: 18px; }
  .home-subscribe__inner--art { gap: 28px; }
  .home-subscribe__art { order: 2; width: 220px; margin: 0 auto; }
}

/* ============================================================
   OUR HISTORY TIMELINE (page-timeline.php)
   ============================================================ */
.tlp-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 34px;
}
.tlp-filter-rows { display: flex; flex-direction: column; gap: 8px; }
.tlp-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tlp-filters-label {
  font-family: var(--font-heading);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-light);
  min-width: 52px;
}
.tlp-chip {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--text-mid);
  font-family: var(--font-heading);
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.tlp-chip:hover { border-color: var(--ocpl-blue); color: var(--ocpl-blue); }
.tlp-chip--active { background: var(--ocpl-blue); border-color: var(--ocpl-blue); color: var(--white); }
.tlp-eras { display: flex; gap: 10px; font-family: var(--font-heading); font-weight: 700; font-size: .85rem; }
.tlp-eras a { color: var(--ocpl-blue); text-decoration: none; }
.tlp-eras a:hover { text-decoration: underline; }
.tlp-era-link--empty { display: none; }

.tlp-view { display: flex; border: 1.5px solid var(--ocpl-blue); border-radius: 999px; overflow: hidden; }
.tlp-view__btn {
  padding: 6px 16px;
  border: 0;
  background: var(--white);
  color: var(--ocpl-blue);
  font-family: var(--font-heading);
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.tlp-view__btn:not(.tlp-view__btn--active):hover { background: var(--surface-2); }
.tlp-view__btn--active { background: var(--ocpl-blue); color: var(--white); }

.tlp-about {
  max-width: 720px;
  margin: 0 0 30px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--white);
}
.tlp-about summary {
  padding: 10px 16px;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .9rem;
  color: var(--ocpl-blue);
}
.tlp-about[open] summary { border-bottom: 1px solid var(--border); }
.tlp-about__body { padding: 14px 18px 4px; font-size: .95rem; color: var(--text-mid); }
.tlp-about__body p { margin: 0 0 12px; }

.tlp-search input {
  width: 100%;
  max-width: 340px;
  padding: 8px 14px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  color: var(--text);
  font-size: .9rem;
}
.tlp-search input:focus { outline: 2px solid var(--ocpl-blue); outline-offset: 1px; border-color: var(--ocpl-blue); }

.tlp-status {
  margin: 0 0 14px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .85rem;
  color: var(--text-light);
}
.tlp-empty { text-align: center; padding: 26px 0 10px; color: var(--text-mid); }
.tlp-empty p { margin: 0 0 12px; }
.tlp-empty__reset {
  padding: 8px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--ocpl-blue);
  background: var(--white);
  color: var(--ocpl-blue);
  font-family: var(--font-heading);
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.tlp-empty__reset:hover { background: var(--ocpl-blue); color: var(--white); }

.tlp-tag {
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-mid);
  font-family: var(--font-heading);
  font-size: .68rem;
  font-weight: 700;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.tlp-tag:hover { border-color: var(--ocpl-blue); color: var(--ocpl-blue); }

.tlp-event--key .tlp-event__dot { box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--ocpl-blue); }

.tlp-src { margin-top: 10px; }
.tlp-src summary {
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-light);
}
.tlp-src summary:hover { color: var(--ocpl-blue); }
.tlp-src .tlp-event__source { margin-top: 6px; }

.tlp-places__body { padding: 12px 14px 14px; display: grid; gap: 8px; }
.tlp-places__hint { margin: 0 4px 4px; font-size: .85rem; color: var(--text-light); }
.tlp-places__group {
  margin: 10px 4px 0;
  font-family: var(--font-heading);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-light);
}
.tlp-places__group:first-of-type { margin-top: 2px; }
.tlp-place {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.tlp-place:hover { border-color: var(--ocpl-blue); }
.tlp-place--active { border-color: var(--ocpl-blue); background: var(--surface-2); }
.tlp-place__head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.tlp-place__name { font-family: var(--font-heading); font-weight: 700; color: var(--ocpl-blue); }
.tlp-place__era { font-size: .8rem; font-weight: 700; color: var(--text-light); }
.tlp-place__count { font-size: .75rem; color: var(--text-light); margin-left: auto; }
.tlp-place__arc { display: block; margin-top: 3px; font-size: .88rem; line-height: 1.5; color: var(--text-mid); }

.tlp-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--ocpl-blue);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  transition: background-color var(--transition-fast);
}
.tlp-top:hover { background: var(--ocpl-blue-dark); }
.tlp-top:focus-visible { outline: 3px solid var(--ocpl-blue-dark); outline-offset: 2px; }

/* Print: a clean linear document of whatever view and filters are active. */
@media print {
  .site-header, .site-footer, .tlp-controls-section, .tlp-status, .tlp-empty,
  .members-cta, .tlp-about summary, .tlp-top { display: none !important; }
  .tlp-page { padding-top: 0; }
  .tlp-event, .tlp-event--right {
    width: 100% !important;
    margin-left: 0 !important;
    padding: 0 0 16px 0 !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .tlp-event__card { break-inside: avoid; }
  .tlp-event__dot, .tlp-line::before { display: none !important; }
  .tlp-event--hidden { display: none !important; }
  .tlp-dec-hidden { display: block !important; }
  .tlp-era-marker { position: static; }
  .tlp-tag { border: none; background: none; padding: 0 6px 0 0; }
  .tlp-event__source a::after { content: " (" attr(href) ")"; font-size: .85em; }
}

.tlp-line { position: relative; padding: 8px 0 20px; }
.tlp-line::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  margin-left: -1.5px;
  background: linear-gradient(var(--ocpl-blue-light), var(--ocpl-blue));
  border-radius: 2px;
}
.tlp-era-marker {
  position: sticky;
  top: 74px;
  text-align: center;
  margin: 26px 0 18px;
  z-index: 5;
}
.tlp-era-marker span {
  display: inline-block;
  background: var(--ocpl-blue);
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: .9rem;
  letter-spacing: .05em;
  padding: 5px 18px;
  border-radius: 999px;
}
.tlp-event {
  position: relative;
  width: 50%;
  padding: 0 40px 26px 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.tlp-event.tlp-in { opacity: 1; transform: none; }
.tlp-event--right { margin-left: 50%; padding: 0 0 26px 40px; }
.tlp-event--hidden { display: none; }
.tlp-event__dot {
  position: absolute;
  top: 6px;
  right: -8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid var(--white);
  box-shadow: 0 0 0 2px var(--ocpl-blue);
  background: var(--ocpl-blue);
  z-index: 1;
}
.tlp-event--right .tlp-event__dot { right: auto; left: -8px; }
.tlp-event__card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  box-shadow: var(--shadow-xs);
}
.tlp-event__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.tlp-event__year { font-family: var(--font-heading); font-weight: 800; font-size: 1.2rem; color: var(--ocpl-blue); }
.tlp-event__date { font-size: .82rem; color: var(--text-mid); }
.tlp-event__title { font-size: 1.05rem; color: var(--heading); margin: 0 0 6px; }
.tlp-event__body { font-size: .92rem; line-height: 1.6; color: var(--text); margin: 0; }
.tlp-event__source { font-size: .75rem; color: var(--text-light); margin: 10px 0 0; }

.tlp-cat {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 2px 9px;
  border-radius: 999px;
  margin-left: auto;
}
.tlp-cat--community-context,   .tlp-chip--community-context.tlp-chip--active   { background: var(--ocpl-blue-light);   color: var(--ocpl-blue-dark); }
.tlp-cat--fundraising, .tlp-chip--fundraising.tlp-chip--active { background: var(--success-soft);      color: var(--success-dark); }
.tlp-cat--projects,    .tlp-chip--projects.tlp-chip--active    { background: var(--ocpl-orange-light); color: var(--ocpl-orange-dark); }
.tlp-cat--programs   { background: var(--ocpl-blue-pale);   color: var(--ocpl-blue); }
.tlp-cat--advocacy   { background: var(--danger-soft);      color: var(--danger-dark); }
.tlp-cat--library    { background: var(--light-gray);       color: var(--text); }
.tlp-dot--community-context   { background: var(--ocpl-blue);       box-shadow: 0 0 0 2px var(--ocpl-blue); }
.tlp-dot--fundraising { background: var(--ocpl-green-dark); box-shadow: 0 0 0 2px var(--ocpl-green-dark); }
.tlp-dot--projects    { background: var(--ocpl-orange);     box-shadow: 0 0 0 2px var(--ocpl-orange); }
.tlp-dot--programs    { background: var(--ocpl-blue-mid);   box-shadow: 0 0 0 2px var(--ocpl-blue-mid); }
.tlp-dot--advocacy    { background: var(--danger);          box-shadow: 0 0 0 2px var(--danger); }
.tlp-dot--library     { background: var(--text-mid);        box-shadow: 0 0 0 2px var(--text-mid); }
.tlp-cat--friends-ocpl,            .tlp-chip--friends-ocpl.tlp-chip--active            { background: var(--success-soft);    color: var(--success-dark); }
.tlp-cat--friends-southern-branch, .tlp-chip--friends-southern-branch.tlp-chip--active { background: var(--info-soft);       color: var(--info-dark); }
.tlp-cat--friends-joint,           .tlp-chip--friends-joint.tlp-chip--active           { background: var(--highlight-fill);  color: var(--heading); }
.tlp-dot--friends-ocpl            { background: var(--ocpl-green-dark); box-shadow: 0 0 0 2px var(--ocpl-green-dark); }
.tlp-dot--friends-southern-branch { background: var(--info);            box-shadow: 0 0 0 2px var(--info); }
.tlp-dot--friends-joint           { background: var(--heading);         box-shadow: 0 0 0 2px var(--heading); }
.tlp-event__photo { margin: 10px 0 12px; }
.tlp-event__photo img { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--border); }
.tlp-event__photo figcaption { font-size: .78rem; color: var(--text-mid); margin-top: 6px; line-height: 1.4; }

/* Controls band above the timeline; the closing capstone is now the
   navy members-cta section, so the old .tlp-cap card styles are gone. */
.tlp-controls-section {
  background: var(--ocpl-blue-pale);
  border-bottom: 1px solid var(--border);
  padding-top: 26px;
  padding-bottom: 22px;
}
.tlp-controls-section .tlp-controls { margin-bottom: 0; }

.tlp-note { text-align: center; font-size: .85rem; color: var(--text-mid); margin-top: 26px; }
.tlp-note a { color: var(--ocpl-blue); }

/* Summer Reading: ten-year trend (small multiples, one scale each) */
.sr-trend-section { background: var(--ocpl-blue-pale); }
.sr-trend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 760px) { .sr-trend-grid { grid-template-columns: 1fr; } }
.sr-trend { margin: 0; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 16px 10px; }
.sr-trend figcaption { font-family: var(--font-heading); font-weight: 700; color: var(--heading); font-size: .95rem; margin-bottom: 10px; }
.sr-trend__canvas { position: relative; height: 210px; }
.sr-trend__note { font-size: .82rem; color: var(--text-mid); margin: 14px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sr-trend__key { width: 26px; height: 12px; background: rgba(15,23,42,.055); border: 1px solid var(--border); border-radius: 2px; flex: none; }
.sr-trend__table { margin-top: 14px; }
.sr-trend__table summary { cursor: pointer; font-size: .85rem; font-weight: 700; color: var(--ocpl-blue-dark); }
.sr-trend__table[open] summary { margin-bottom: 10px; }

/* Summer Reading: season toggle + year-over-year change */
.sr-year-toggle { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 14px 0 4px; }
.sr-year-toggle__btn {
  padding: 7px 16px; border: 1px solid var(--ocpl-blue-light); border-radius: var(--radius-pill);
  background: var(--white); color: var(--ocpl-blue-dark); font-size: .85rem; font-weight: 700;
  text-decoration: none; transition: background-color var(--transition), color var(--transition);
}
.sr-year-toggle__btn:hover { background: var(--ocpl-blue-pale); text-decoration: none; }
.sr-year-toggle__btn.is-active { background: var(--ocpl-blue); border-color: var(--ocpl-blue); color: var(--white); }
.sr-year-toggle__note { font-size: .78rem; color: var(--text-light); text-align: center; margin: 6px 0 0; }
.sr-delta { font-size: .78rem; font-weight: 700; margin: 4px 0 0; }
.sr-delta--up { color: var(--success-dark); }
.sr-delta--down { color: #b0620a; }   /* amber, not alarm red: a dip is information, not failure */
.sr-delta__was { font-weight: 400; color: var(--text-light); }

/* Mobile decade collapse (built by page-timeline JS below 760px) */
.tlp-dec-hidden { display: none !important; }
.tlp-era-toggle { background: none; border: 0; font: inherit; font-weight: 700; color: var(--ocpl-blue-dark); cursor: pointer; padding: 4px 8px; }
.tlp-era-count { font-weight: 600; font-size: .8rem; color: var(--text-mid); }

/* Local history resources band */
.tlp-dig { background: var(--ocpl-blue-pale); padding: 56px 0; }
.tlp-dig__list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.tlp-dig__list li { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px 20px; }
.tlp-dig__list li > a { font-weight: 700; color: var(--heading); text-decoration: none; }
.tlp-dig__list li > a:hover { color: var(--ocpl-blue); }
.tlp-dig__list li p { font-size: .85rem; color: var(--text-mid); line-height: 1.55; margin: 6px 0 0; }

@media (max-width: 760px) {
  .tlp-line::before { left: 14px; }
  .tlp-event,
  .tlp-event--right { width: 100%; margin-left: 0; padding: 0 0 22px 44px; }
  .tlp-event__dot,
  .tlp-event--right .tlp-event__dot { left: 6px; right: auto; }
  .tlp-era-marker { text-align: left; padding-left: 44px; }
  .tlp-cap { padding-left: 0; text-align: center; }
  .tlp-cap .tlp-event__dot { left: 14px; margin-left: -8px; }
  .tlp-controls { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .tlp-event { opacity: 1; transform: none; transition: none; }
}

/* ── FY momentum strip ─────────────────────────────────────── */
.dv-mom-section { background: var(--success-soft); }
.dv-mom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.dv-mom-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 26px 22px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border-top: 4px solid var(--success);
}
.dv-mom-card__delta  { font-size: 2.4rem; font-weight: 800; color: var(--success); line-height: 1; }
.dv-mom-card__label  { font-size: 1rem; font-weight: 700; color: var(--ocpl-blue-dark); margin-top: 8px; }
.dv-mom-card__detail { font-size: .88rem; color: var(--text-mid); margin-top: 6px; }
.dv-mom-card__rank   { font-size: .85rem; color: var(--ocpl-blue); margin-top: 10px; }
.dv-mom-note {
  font-size: .92rem;
  color: var(--text);
  text-align: center;
  max-width: 640px;
  margin: 26px auto 0;
  line-height: 1.65;
}

/* ── Support section (impact cards after the data) ─────────── */
.dv-support-section { background: var(--ocpl-blue-pale); border-top: 1px solid var(--border); }

/* ── Source note ───────────────────────────────────────────── */
.dv-source-note {
  font-size: .8rem;
  color: var(--text-mid);
  text-align: center;
  margin: 0;
  line-height: 1.7;
}

/* ── Jump menu ─────────────────────────────────────────────── */
.dv-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; margin-top: 22px; }
.dv-jump a {
  font-size: .8rem; font-weight: 600; color: var(--ocpl-blue);
  padding: 5px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-pill);
  text-decoration: none; transition: border-color var(--transition-fast);
}
.dv-jump a:hover { border-color: var(--ocpl-blue); }

/* ── Children's circulation callout ────────────────────────── */
.dv-juv-callout {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding: 14px 18px;
  background: var(--ocpl-orange-light); border: 1px solid color-mix(in srgb, var(--ocpl-orange) 30%, var(--white)); border-radius: var(--radius-md);
}
.dv-juv-callout__val { font-family: var(--font-heading); font-weight: 700; font-size: 1.4rem; color: var(--ocpl-orange); }
.dv-juv-callout__text { font-size: .88rem; color: var(--text-mid); }

.dv-donut-title { font-size: .85rem; font-weight: 700; color: var(--heading); margin: 0 0 10px; text-align: center; }

/* ── Peer chart toggle ─────────────────────────────────────── */
.dv-peer-toggle-row { text-align: center; margin: 16px 0 6px; }
.dv-ranks-toggle-row { text-align: center; margin: 20px 0 0; }

.dv-kpi-card__median { font-size: var(--fs-xs); color: var(--text-mid); margin-top: 4px; }

/* Five beyond-borrowing cards: one row on desktop, never 4+1 */
@media (min-width: 900px) {
  .dv-stat-grid.dv-stat-grid--five { grid-template-columns: repeat(5, 1fr); }
}

.dv-peer-line { text-align: center; font-size: .9rem; font-weight: 600; color: var(--heading); margin: 0 0 14px; }

/* Accessible table twin for the peer chart */
.dv-peer-table-details { margin-top: 14px; }
.dv-peer-table-details > summary { cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--ocpl-blue); }
.dv-peer-table-details table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: .85rem; }
.dv-peer-table-details th, .dv-peer-table-details td { padding: 6px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.dv-peer-table-details td { text-align: right; font-variant-numeric: tabular-nums; }
.dv-peer-table-details thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-mid); }

/* Phones: the label line already carries value, rank, and median — the
   range visualization is optional there. */
@media (max-width: 600px) {
  .dv-rank-bar-wrap { display: none; }
  .dv-rank-row { grid-template-columns: 1fr; }
}

.dv-rank-group-title {
  font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-mid); margin: 26px 0 14px;
}
.dv-rank-group-title:first-of-type { margin-top: 18px; }

/* Four data-anchored cards: a fixed 2x2, never a 3+1 wrap. Compound
   selector outranks the base .dv-impact-cards rule that follows it. */
.dv-impact-cards.dv-impact-cards--actions { grid-template-columns: repeat(2, 1fr); max-width: 860px; margin-left: auto; margin-right: auto; }
@media (max-width: 700px) { .dv-impact-cards.dv-impact-cards--actions { grid-template-columns: 1fr; } }

/* Inline SVG icons (Heroicons outline, same set as the theme) */
.dv-impact-card__icon svg { width: 30px; height: 30px; color: var(--ocpl-blue); }
.dv-stats-group__head svg { width: 20px; height: 20px; color: var(--ocpl-blue); flex: 0 0 auto; }

/* ── More than the numbers ─────────────────────────────────── */
.dv-story-section { background: var(--ocpl-navy); text-align: center; }
.dv-story-section .dv-section-title { color: var(--white); }
.dv-story-text { max-width: 640px; margin: 0 auto 24px; color: var(--text-on-dark-muted); font-size: .95rem; line-height: 1.7; }
.dv-story-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Friends section extras ────────────────────────────────── */
.dv-impact-cards--three { grid-template-columns: repeat(3, 1fr); max-width: 900px; margin-left: auto; margin-right: auto; }
@media (max-width: 780px) { .dv-impact-cards--three { grid-template-columns: 1fr; } }
.dv-support-secondary { text-align: center; font-size: .88rem; color: var(--text-mid); margin: 22px 0 0; }
.dv-support-secondary a { color: var(--ocpl-blue); }

/* ── Sources & methodology accordion ───────────────────────── */
.dv-methods { max-width: 760px; margin: 14px auto 0; }
.dv-methods > summary {
  cursor: pointer; text-align: center; font-size: .88rem; font-weight: 700; color: var(--ocpl-blue);
}
.dv-methods__body { margin-top: 14px; font-size: .84rem; color: var(--text-mid); line-height: 1.7; text-align: left; }
.dv-methods__body ul { margin: 10px 0 10px 20px; }
.dv-methods__body li { margin-bottom: 8px; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 700px) {
  .dv-rank-row          { grid-template-columns: 1fr; gap: 8px; }
  .dv-rank-row__label   { text-align: left; }
  .dv-kpi-grid          { grid-template-columns: 1fr 1fr; }
  .dv-chart-wrap        { height: 440px; }
}
@media (max-width: 480px) {
  .dv-kpi-grid          { grid-template-columns: 1fr; }
  .dv-chart-wrap        { height: 520px; }
}

/* ── Stats sections (collection + use) ─────────────────────── */
.dv-stats-section         { background: var(--white); }
.dv-stats-section--light  { background: var(--ocpl-blue-pale); }

.dv-stats-group {
  margin-bottom: 32px;
}
.dv-stats-group:last-child { margin-bottom: 0; }

.dv-stats-group__head {
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ocpl-blue);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.dv-stats-group__icon { font-size: 1rem; }

.dv-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}

.dv-stat-card {
  background: var(--white);
  border-radius: 8px;
  padding: 18px 16px 14px;
  box-shadow: 0 1px 6px rgba(0,0,0,.07);
  border-top: 3px solid var(--border);
  text-align: center;
}
.dv-stats-section--light .dv-stat-card { background: var(--white); }
.dv-stats-section .dv-stat-card        { background: var(--ocpl-blue-pale); }

.dv-stat-card--digital   { border-top-color: var(--ocpl-blue); }
.dv-stat-card--highlight { border-top-color: var(--success); }

.dv-stat-card__value {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--ocpl-blue-dark);
  line-height: 1;
  margin-bottom: 6px;
}
.dv-stat-card--digital   .dv-stat-card__value { color: var(--ocpl-blue); }
.dv-stat-card--highlight .dv-stat-card__value { color: var(--success-dark); }

.dv-stat-card__label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
}
.dv-stat-card__note {
  font-size: var(--fs-xs);
  color: var(--text-mid);
}

/* ── Donut charts ───────────────────────────────────────────── */
.dv-usage-donut-row {
  display: flex;
  gap: 40px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
}
.dv-donut-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.dv-donut-wrap canvas {
  display: block;
}
.dv-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: .82rem;
  color: var(--text);
}
.dv-donut-legend span {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: middle;
}
/* Swatches must mirror the canvas colors set in page-data-viz.php's
   donut datasets exactly — a legend in different colors than its chart
   is worse than no legend. */
.dv-donut-swatch--physical  { background: var(--ocpl-blue); }
.dv-donut-swatch--digital   { background: var(--ocpl-green); }
.dv-donut-swatch--children  { background: var(--ocpl-orange); }
.dv-donut-swatch--adult     { background: var(--chart-dim); }

@media (max-width: 600px) {
  .dv-stat-grid { grid-template-columns: 1fr 1fr; }
  .dv-usage-donut-row { gap: 24px; }
}
@media (max-width: 400px) {
  .dv-stat-grid { grid-template-columns: 1fr; }
}

/* ── Intro section ─────────────────────────────────────────── */
.dv-intro-section {
  background: var(--white);
  border-bottom: 1px solid var(--border);
}

.dv-intro-body {
  /* flush left so the text lines up with the section title above it;
     auto-centering left it looking indented under a full-width heading */
  max-width: 760px;
  margin: 0 0 40px;
  text-align: left;
}
.dv-intro-lead {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ocpl-blue-dark);
  line-height: 1.5;
  margin-bottom: 16px;
}
.dv-intro-body p {
  font-size: .975rem;
  color: var(--text);
  line-height: 1.75;
  margin-bottom: 14px;
}
.dv-intro-body p:last-child { margin-bottom: 0; }

.dv-impact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.dv-impact-card {
  background: var(--ocpl-blue-pale);
  border-radius: 10px;
  padding: 26px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow .15s;
}
.dv-impact-card:hover {
  box-shadow: 0 4px 16px rgba(0,86,133,.12);
}

.dv-impact-card__icon {
  font-size: 1.6rem;
  line-height: 1;
}
.dv-impact-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ocpl-blue-dark);
  margin: 0;
}
.dv-impact-card__text {
  font-size: .875rem;
  color: var(--text);
  line-height: 1.65;
  margin: 0;
  flex: 1;
}
.dv-impact-card__link {
  display: inline-block;
  margin-top: 4px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--ocpl-blue);
  text-decoration: none;
}
.dv-impact-card__link:hover {
  text-decoration: underline;
  color: var(--ocpl-blue-dark);
}

@media (max-width: 600px) {
  .dv-impact-cards { grid-template-columns: 1fr; }
  .dv-intro-lead   { font-size: 1.05rem; }
}

/* ── Closing pledge section ────────────────────────────────── */
.dv-pledge-section {
  background: var(--ocpl-blue-dark);
  color: var(--text-on-dark);
}

.dv-pledge-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.dv-pledge-eyebrow {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-on-dark-muted);
  margin: 0 0 10px;
}
.dv-pledge-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1.3;
  margin: 0 0 20px;
}
.dv-pledge-text p {
  font-size: .95rem;
  line-height: 1.8;
  color: var(--text-on-dark-muted);
  margin-bottom: 16px;
}
.dv-pledge-text p:last-child { margin-bottom: 0; }
.dv-pledge-text strong { color: var(--white); font-weight: 700; }

.dv-pledge-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 30px 28px 26px;
}
.dv-pledge-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.15);
}

.dv-pledge-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dv-pledge-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: .9rem;
  color: var(--text-on-dark-muted);
  line-height: 1.6;
}
.dv-pledge-list__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: var(--ocpl-blue);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  margin-top: 2px;
}

.dv-pledge-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.dv-pledge-section .btn--filled {
  background: var(--ocpl-orange);
  border-color: var(--ocpl-orange);
  color: var(--white);
}
.dv-pledge-section .btn--filled:hover {
  background: var(--ocpl-orange-dark);
  border-color: var(--ocpl-orange-dark);
}
.dv-pledge-section .btn--outline {
  border-color: rgba(255,255,255,.4);
  color: var(--white);
}
.dv-pledge-section .btn--outline:hover {
  border-color: var(--white);
  background: rgba(255,255,255,.08);
}

@media (max-width: 800px) {
  .dv-pledge-grid { grid-template-columns: 1fr; gap: 32px; }
}


/* ============================================================
   SUMMER READING PAGE  (page-summer-reading.php)
   ============================================================ */

/* ── Intro section ── */
.sr-intro { background: var(--white); }
.sr-intro__grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 56px;
  align-items: center;
}
.sr-intro__text h2 {
  color: var(--ocpl-blue);
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  margin: 0 0 16px;
}
.sr-intro__text p { margin: 0 0 14px; color: var(--text); line-height: 1.7; }
.sr-intro__text p:last-child { margin-bottom: 0; }

.sr-intro__highlight {
  background: var(--ocpl-blue);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  text-align: center;
}
.sr-intro__big-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.sr-intro__big-num {
  font-family: var(--font-heading);
  font-size: clamp(2.8rem, 6vw, 4rem);
  font-weight: 800;
  color: var(--ocpl-green);
  line-height: 1;
}
.sr-intro__big-label {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,.8);
  line-height: 1.4;
}
.sr-intro__note {
  font-size: 0.84rem;
  color: rgba(255,255,255,.6);
  line-height: 1.55;
  margin: 0;
}

/* ── Research section ── */
.sr-research { background: var(--off-white); }
.sr-research-grid {
  display: grid;
  /* Four research cards: a 2x2, not three columns with an orphan. */
  grid-template-columns: repeat(2, 1fr);
  max-width: 980px;
  margin: 0 auto;
  gap: 24px;
}
.sr-research-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 4px solid var(--ocpl-blue);
  border-radius: var(--radius-md);
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow var(--transition), transform var(--transition);
}
.sr-research-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.sr-research-card__stat {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  color: var(--ocpl-orange);
  line-height: 1;
}
.sr-research-card h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ocpl-blue);
  margin: 0;
  line-height: 1.3;
}
.sr-research-card p {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.65;
  margin: 0;
  flex: 1;
}
.sr-research-card cite {
  font-size: 0.75rem;
  color: var(--muted);
  font-style: italic;
  line-height: 1.4;
  margin-top: 4px;
}

/* ── Equity callout ── */
.sr-equity { background: var(--white); }
.sr-equity__inner {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 56px;
  align-items: center;
}
.sr-equity__text h2 {
  color: var(--ocpl-blue);
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  margin: 0 0 16px;
}
.sr-equity__text p { margin: 0 0 14px; color: var(--text); line-height: 1.7; }
.sr-equity__text p:last-child { margin-bottom: 0; }

.sr-equity__stat-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sr-equity__ratio {
  background: var(--ocpl-blue);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  text-align: center;
}
.sr-equity__ratio-num {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 800;
  color: var(--ocpl-green);
  line-height: 1;
  margin-bottom: 12px;
}
.sr-equity__ratio p {
  font-size: 0.9rem;
  color: rgba(255,255,255,.85);
  line-height: 1.6;
  margin: 0 0 10px;
}
.sr-equity__ratio cite {
  font-size: 0.75rem;
  color: rgba(255,255,255,.5);
  font-style: italic;
}

/* ── Live stats section (dark blue) ── */
.sr-stats-section {
  background: var(--ocpl-blue);
  position: relative;
}
.sr-stats-section .section-heading h2 { color: var(--white); }
.sr-stats-section .section-heading p  { color: rgba(255,255,255,.7); }

/* ── Pull quote ── */
.sr-quote-section { background: var(--off-white); }
.sr-blockquote {
  margin: 0;
  text-align: center;
  padding: 16px 0;
}
.sr-blockquote p {
  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(1.15rem, 2.5vw, 1.5rem);
  font-style: italic;
  color: var(--ocpl-blue);
  line-height: 1.65;
  margin: 0 0 20px;
}
.sr-blockquote cite {
  font-size: 0.88rem;
  color: var(--muted);
  font-style: normal;
}
.sr-blockquote cite em { font-style: italic; }

/* ── How your support helps ── */
.sr-support { background: var(--white); }
.sr-support-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.sr-support-card {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow var(--transition), transform var(--transition);
}
.sr-support-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.sr-support-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sr-support-card__icon svg { width: 26px; height: 26px; }
.sr-support-card__icon--members { background: rgba(0,86,133,.12); color: var(--ocpl-blue); }
.sr-support-card__icon--donate  { background: rgba(181,96,22,.12); color: var(--ocpl-orange); }
.sr-support-card__icon--booksale{ background: rgba(82,154,84,.12); color: var(--ocpl-green); }
.sr-support-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ocpl-blue);
  margin: 0;
}
.sr-support-card p {
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.65;
  margin: 0;
  flex: 1;
}
.sr-support-card__btn { margin-top: 4px; align-self: flex-start; }

/* ── CTA band ── */
.sr-cta { background: var(--ocpl-blue); }
.sr-cta__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.sr-cta__inner h2 {
  color: var(--white);
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
  margin: 0;
}
.sr-cta__inner p {
  color: rgba(255,255,255,.78);
  max-width: 540px;
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.6;
}
.sr-cta__actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.sr-cta .btn--filled  { background: var(--ocpl-orange); color: var(--white); }
.sr-cta .btn--outline { border-color: rgba(255,255,255,.5); color: var(--white); }
.sr-cta .btn--outline:hover { background: rgba(255,255,255,.12); border-color: var(--white); }

/* ── Research sources ── */
.sr-sources { background: var(--off-white); padding-top: 40px; padding-bottom: 48px; }
.sr-sources__heading {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 12px;
}
.sr-sources__list {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sr-sources__list li {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.55;
}
.sr-sources__list em { font-style: italic; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .sr-research-grid { grid-template-columns: repeat(2, 1fr); }
  .sr-support-grid  { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .sr-intro__grid   { grid-template-columns: 1fr; gap: 32px; }
  .sr-equity__inner { grid-template-columns: 1fr; gap: 32px; }
  .sr-research-grid { grid-template-columns: 1fr; }
  .sr-support-grid  { grid-template-columns: 1fr; }
}

/* ============================================================
   LIBRARY VALUE CALCULATOR  (page-library-value.php)
   ============================================================ */

.lvc-page .section { padding-top: 48px; padding-bottom: 48px; }

.lvc-section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ocpl-blue-dark);
  margin: 0 0 6px;
}
.lvc-section-sub {
  color: var(--text);
  font-size: .95rem;
  margin: 0 0 28px;
}

/* Hook */
.lvc-hook-section { background: var(--ocpl-blue-dark); }

.lvc-hook {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.lvc-hook__cost,
.lvc-hook__value {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.lvc-hook__label {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-on-dark-muted);
}
.lvc-hook__amount {
  font-size: 3.4rem;
  font-weight: 900;
  color: var(--white);
  line-height: 1;
}
.lvc-hook__amount--value { color: var(--success-on-dark); }
.lvc-hook__sub { font-size: .8rem; color: var(--text-on-dark-muted); }
.lvc-hook__divider {
  font-size: 1.4rem;
  font-weight: 700;
  color: rgba(255,255,255,.3);
  flex-shrink: 0;
}
.lvc-hook__body {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  font-size: .95rem;
  color: var(--text-on-dark-muted);
  line-height: 1.75;
}

/* Scenario layout: blue intro band + nav+panel + blue footer */
.lvc-scenarios-section { background: var(--white); }

.lvc-scenarios__intro {
  background: var(--ocpl-blue);
  padding: 52px 0;
  text-align: center;
}
.lvc-scenarios__intro h2 {
  color: var(--white);
  margin-bottom: 10px;
}
.lvc-scenarios__intro p {
  color: rgba(255,255,255,.75);
  font-size: 1rem;
  max-width: 600px;
  margin: 0 auto;
}

.lvc-scenarios__body { padding: 40px 0; }


.lvc-scenarios-layout {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 20px;
  align-items: start;
}
.lvc-scenario-nav {
  background: var(--ocpl-blue);
  border: 1px solid var(--ocpl-blue);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  padding: 8px 0;
  position: sticky;
  top: 20px;
}
.lvc-scenario-tab-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  font-size: .83rem;
  font-weight: 500;
  color: var(--text-on-dark-muted);
  text-align: left;
  cursor: pointer;
  white-space: normal;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.lvc-stab-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.45;
  transition: opacity var(--transition-fast);
}
.lvc-scenario-tab-btn:hover { background: rgba(255,255,255,.07); color: var(--text-on-dark); }
.lvc-scenario-tab-btn:hover .lvc-stab-icon,
.lvc-scenario-tab-btn--active .lvc-stab-icon { opacity: 0.9; }
.lvc-scenario-tab-btn:focus-visible { outline: 2px solid var(--ocpl-orange); outline-offset: -2px; }
.lvc-scenario-tab-btn--active {
  background: rgba(255,255,255,.1);
  border-left-color: var(--ocpl-orange);
  color: var(--text-on-dark);
}

/* Scenario panel */
.lvc-scenario-panel__inner {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  animation: lvFadeIn .2s ease;
}
@keyframes lvFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Panel head — full-width, matches lrc-persona-panel__head */
.lvc-scenario-panel__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: flex-start;
  padding: 24px 32px;
  border-bottom: 1px solid var(--border);
}
.lvc-scenario-panel__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  background: var(--ocpl-blue-pale);
  border-radius: var(--radius-md);
  color: var(--ocpl-blue);
}
.lvc-scenario-icon { width: 28px; height: 28px; }
.lvc-scenario-panel__eyebrow {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ocpl-blue);
  margin: 0 0 4px;
}
.lvc-scenario-panel__title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--ocpl-navy);
  margin: 0 0 6px;
  line-height: 1.3;
}
.lvc-scenario-panel__desc {
  font-size: .95rem;
  color: var(--text-mid);
  margin: 0;
  line-height: 1.7;
}

/* Panel body columns */
.lvc-scenario-panel__col {
  padding: 28px 40px;
}
.lvc-scenario-panel__col--left {
  border-right: 1px solid var(--border);
}
.lvc-scenario-panel__col-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-mid);
  margin-bottom: 16px;
}

/* Panel foot — matches lrc-persona-panel__foot */
.lvc-scenario-panel__foot {
  padding: 20px 32px;
  background: var(--ocpl-blue-pale);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.lvc-scenario-panel__foot p {
  font-size: .85rem;
  color: var(--text-mid);
  margin: 0;
  flex: 1;
}

.lvc-scenario-panel__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

.lvc-scenario-panel__total {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--ocpl-blue-dark);
  border-radius: 10px;
  padding: 22px 20px 18px;
  text-align: center;
  gap: 4px;
}
.lvc-scenario-panel__total-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-on-dark-muted);
}
.lvc-scenario-panel__total-val {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--success-on-dark);
  line-height: 1;
}
.lvc-scenario-panel__total-mult {
  font-size: .8rem;
  color: var(--text-on-dark-muted);
}

.lvc-scenario-breakdown {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lvc-scenario-breakdown li {
  display: grid;
  grid-template-columns: 1fr 52px 1fr 60px;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
}
.lvc-sb-label { color: var(--text); font-weight: 500; }
.lvc-sb-qty   { color: var(--text-mid); font-size: .8rem; text-align: right; }
.lvc-sb-bar-wrap { background: var(--border); border-radius: 3px; height: 8px; overflow: hidden; }
.lvc-sb-bar      { height: 100%; background: var(--ocpl-blue); border-radius: 3px; display: block; }
.lvc-sb-val      { color: var(--ocpl-blue); font-weight: 700; text-align: right; }

.lvc-scenario-panel__use-btn { white-space: nowrap; }

/* Custom calculator */
.lvc-calc-section { background: var(--ocpl-blue-pale); }

.lvc-calc-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 32px;
  align-items: start;
  /* Always two columns at ≥640px — breakpoint is below container width */
}

.lvc-left-col { display: flex; flex-direction: column; gap: 16px; }
.lvc-sliders  { display: flex; flex-direction: column; gap: 28px; }

.lvc-sliders-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.lvc-loaded-note {
  font-size: .82rem;
  font-weight: 600;
  color: var(--ocpl-blue);
}
.lvc-loaded-note:empty { visibility: hidden; }
.lvc-clear-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: .78rem;
  color: var(--text-mid);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.lvc-clear-btn:hover {
  border-color: var(--ocpl-blue);
  color: var(--ocpl-blue);
}

.lvc-slider-group {
  background: var(--white);
  border-radius: 10px;
  padding: 22px 22px 18px;
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.lvc-slider-group__title {
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ocpl-blue);
  margin: 0 0 16px;
  display: flex;
  gap: 7px;
  align-items: center;
}
.lvc-slider-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--light-gray);
}
.lvc-slider-row:first-of-type { border-top: none; }
.lvc-slider-row__label {
  font-size: .88rem;
  font-weight: 500;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lvc-slider-row__hint {
  font-size: var(--fs-xs);
  color: var(--text-mid);
  font-weight: 400;
}
.lvc-slider-row__control {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lvc-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 5px;
  border-radius: 3px;
  background: var(--border);
  outline: none;
  cursor: pointer;
}
.lvc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ocpl-blue);
  border: 2px solid var(--white);
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  cursor: pointer;
}
.lvc-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ocpl-blue);
  border: 2px solid var(--white);
  cursor: pointer;
}
.lvc-slider-row__num {
  width: 64px;
  text-align: right;
  font-size: .9rem;
  font-weight: 700;
  color: var(--ocpl-blue);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 6px;
  background: var(--white);
}
.lvc-slider-row__num:focus-visible { outline: 2px solid var(--ocpl-blue); outline-offset: 1px; }
.lvc-slider-row__subtotal {
  grid-column: 2;
  text-align: right;
  font-size: .75rem;
  font-weight: 600;
  color: var(--ocpl-blue);
  min-height: 1em;
}
.lvc-slider-row__subtotal:empty { display: none; }

/* Results panel */
.lvc-results {
  position: sticky;
  top: 24px;
  background: var(--ocpl-blue-dark);
  border-radius: 12px;
  overflow: hidden;
  /* In WP admin with toolbar, top adds 32px automatically via admin-bar class */
  .admin-bar & { top: 56px; }
}
.lvc-results__inner { padding: 28px 24px; }
.lvc-results__eyebrow {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-on-dark-muted);
  margin: 0 0 6px;
}
.lvc-results__total {
  font-size: 2.8rem;
  font-weight: 900;
  color: var(--success-on-dark);
  line-height: 1;
  margin-bottom: 8px;
}
.lvc-results__multiplier {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 20px;
  min-height: 28px;
}
.lvc-results__mult-num  { font-size: 1.6rem; font-weight: 800; color: var(--white); white-space: nowrap; }
.lvc-results__mult-label { font-size: .8rem; color: var(--text-on-dark-muted); }

.lvc-breakdown-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 16px;
}
.lvc-breakdown-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .82rem;
}
.lvc-bd-label { color: var(--text-on-dark-muted); }
.lvc-bd-val   { color: var(--success-on-dark); font-weight: 700; flex-shrink: 0; margin-left: 8px; }
.lvc-results__prompt {
  font-size: .88rem;
  color: var(--text-on-dark-muted);
  text-align: center;
  padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,.1);
}
.lvc-results__cost {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 14px;
  margin-bottom: 16px;
}
.lvc-results__cost-label { font-size: .8rem; color: var(--text-on-dark-muted); }
.lvc-results__cost-val   { font-size: 1rem; font-weight: 700; color: var(--white); }

.lvc-results__cta {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lvc-results__cta-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0;
}
.lvc-results__cta-btns .btn {
  flex: 1 1 auto;
  text-align: center;
  white-space: nowrap;
}
.lvc-results__cta p {
  font-size: .82rem;
  color: var(--text-on-dark-muted);
  margin: 0;
  line-height: 1.6;
}
.lvc-results .btn--filled {
  background: var(--ocpl-orange);
  border-color: var(--ocpl-orange);
  color: var(--white);
  text-align: center;
}
.lvc-results .btn--outline {
  border-color: rgba(255,255,255,.35);
  color: var(--white);
  text-align: center;
}
.lvc-results .btn--outline:hover {
  border-color: var(--white);
  background: rgba(255,255,255,.08);
}

/* Mode toggle */
.lvc-mode-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 12px 16px;
  background: var(--white);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.lvc-mode-toggle__label {
  font-size: .85rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.lvc-mode-toggle__btns {
  display: flex;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid var(--mid-gray);
}
.lvc-mode-btn {
  padding: 5px 16px;
  background: transparent;
  border: none;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ocpl-blue);
  cursor: pointer;
  transition: background .15s, color .15s;
  line-height: 1.4;
}
.lvc-mode-btn + .lvc-mode-btn {
  border-left: 2px solid var(--mid-gray);
}
.lvc-mode-btn--active {
  background: var(--ocpl-blue);
  color: var(--white);
}
.lvc-mode-toggle__note {
  font-size: .8rem;
  color: var(--text-mid);
  flex: 1;
  min-width: 200px;
}
.lvc-mode-toggle__note strong { color: var(--ocpl-blue); }

/* Methodology */
.lvc-methodology-section { background: var(--white); }
.lvc-methodology {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.lvc-methodology__toggle {
  display: block;
  padding: 14px 18px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ocpl-blue);
  cursor: pointer;
  list-style: none;
  background: var(--ocpl-blue-pale);
}
.lvc-methodology__toggle::-webkit-details-marker { display: none; }
.lvc-methodology__toggle::before { content: "+ "; }
details[open] .lvc-methodology__toggle::before { content: "- "; }
.lvc-methodology__teaser {
  display: block;
  margin-top: 6px;
  font-size: .8rem;
  font-weight: 400;
  color: var(--text-mid);
  line-height: 1.6;
}
.lvc-methodology__subhead {
  font-size: .95rem;
  font-weight: 700;
  color: var(--ocpl-blue-dark);
  margin: 20px 0 10px;
}
.lvc-methodology__dates {
  font-size: .78rem;
  color: var(--text-mid);
  border-top: 1px solid var(--light-gray);
  padding-top: 12px;
}

/* Compact total pinned to the viewport bottom on small screens */
.lvc-mobile-total { display: none; }
@media (max-width: 900px) {
  .lvc-mobile-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    bottom: 12px;
    z-index: 5;
    margin-top: 16px;
    background: var(--ocpl-blue-dark);
    color: var(--white);
    padding: 10px 18px;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    font-size: .88rem;
  }
  .lvc-mobile-total strong { font-size: 1.2rem; }
}
.lvc-methodology__body {
  padding: 20px 18px;
  font-size: .88rem;
  color: var(--text);
  line-height: 1.7;
}
.lvc-methodology__body p { margin-bottom: 14px; }
.lvc-method-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 14px;
  font-size: .84rem;
}
.lvc-method-table th,
.lvc-method-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--light-gray);
}
.lvc-method-table th { background: var(--ocpl-blue-pale); font-weight: 600; color: var(--ocpl-blue-dark); }
.lvc-method-table td:nth-child(2) { font-weight: 700; color: var(--ocpl-blue); white-space: nowrap; }

/* Responsive */
@media (max-width: 700px) {
  .lvc-scenarios-layout { grid-template-columns: 1fr; gap: 12px; }
  .lvc-scenario-nav {
    position: static;
    display: flex;
    overflow-x: auto;
    overflow-y: visible;
    padding: 6px 8px;
    gap: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .lvc-scenario-tab-btn {
    border-left: none;
    border-bottom: 2px solid transparent;
    padding: 8px 12px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .lvc-scenario-tab-btn--active {
    border-left-color: transparent;
    border-bottom-color: var(--ocpl-orange);
  }
}
@media (max-width: 640px) {
  .lvc-calc-layout  { grid-template-columns: 1fr; }
  .lvc-results      { position: static; }
  .lvc-left-col     { order: 1; }
  .lvc-results      { order: 2; }
  .lvc-scenario-panel__head { grid-template-columns: 1fr; padding: 24px; }
  .lvc-scenario-panel__body { grid-template-columns: 1fr; }
  .lvc-scenario-panel__col--left { border-right: none; border-bottom: 1px solid var(--border); }
  .lvc-scenario-panel__col { padding: 20px 24px; }
  .lvc-scenario-panel__foot { padding: 16px 24px; }
  .lvc-scenario-panel__total {
    flex-direction: row;
    gap: 16px;
    padding: 16px;
    min-width: unset;
  }
}
@media (max-width: 640px) {
  .lvc-scenario-breakdown li { grid-template-columns: 1fr 1fr; }
  .lvc-sb-bar-wrap, .lvc-sb-qty { display: none; }
  .lvc-slider-row { grid-template-columns: 1fr; }
  .lvc-hook__amount { font-size: 2.6rem; }
}

/* ============================================================
   DOLLAR STRETCH CALCULATOR  (.dsc-*)
   ============================================================ */

.dsc-section { background: var(--off-white); }

/* Amount picker */
.dsc-picker { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.dsc-picker__label { font-size: .9rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mid); margin-bottom: 14px; }
.dsc-picker__btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 20px; }
.dsc-amt-btn {
  padding: 10px 20px;
  border: 2px solid var(--border);
  border-radius: 6px;
  background: var(--white);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.dsc-amt-btn:hover { border-color: var(--ocpl-blue); color: var(--ocpl-blue); }
.dsc-amt-btn--active { border-color: var(--ocpl-blue); background: var(--ocpl-blue); color: var(--white); }
.dsc-picker__custom { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: center; }
.dsc-picker__custom-label { font-size: .9rem; color: var(--text-mid); }
.dsc-picker__custom-wrap { position: relative; }
.dsc-picker__dollar {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  font-weight: 700; color: var(--text-mid); pointer-events: none;
}
.dsc-picker__input {
  padding: 8px 10px 8px 22px;
  border: 2px solid var(--border);
  border-radius: 6px;
  font-size: 1rem;
  width: 120px;
  transition: border-color .2s;
}
.dsc-picker__input:focus { outline: none; border-color: var(--ocpl-blue); }

/* Impact display */
.dsc-display {
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(0,0,0,.06);
  padding: 32px 40px 28px;
  max-width: 780px;
  margin: 0 auto 48px;
}
.dsc-display__heading {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  margin-bottom: 28px;
  font-size: 1.15rem; color: var(--text-mid);
}
.dsc-display__amt { font-size: 2rem; font-weight: 800; color: var(--ocpl-blue); }
.dsc-items { display: flex; flex-direction: column; gap: 18px; }
.dsc-item { display: flex; align-items: flex-start; gap: 16px; }
.dsc-item__icon { font-size: 1.8rem; line-height: 1; flex-shrink: 0; width: 40px; text-align: center; }
.dsc-item__body { flex: 1; }
.dsc-item__headline { font-size: 1.05rem; font-weight: 700; color: var(--heading); margin-bottom: 4px; }
.dsc-item__desc { font-size: .9rem; color: var(--text-mid); line-height: 1.6; margin: 0; }
.dsc-disclaimer {
  margin-top: 24px; font-size: .8rem; color: var(--text-light);
  border-top: 1px solid var(--border); padding-top: 16px; line-height: 1.6;
}

/* Comparison cards */
.dsc-compare { max-width: 860px; margin: 0 auto 48px; }
.dsc-compare__heading { text-align: center; margin-bottom: 24px; font-size: 1.3rem; }
.dsc-compare__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dsc-compare__card {
  background: var(--white);
  border-radius: 10px;
  border: 1px solid var(--border);
  padding: 24px 20px;
  text-align: center;
}
.dsc-compare__card--highlight {
  border-color: var(--ocpl-blue);
  background: var(--ocpl-blue-light);
}
.dsc-compare__icon { font-size: 2rem; margin-bottom: 8px; }
.dsc-compare__cost { font-size: 1.4rem; font-weight: 800; color: var(--heading); }
.dsc-compare__thing { font-size: .85rem; color: var(--text-mid); margin-bottom: 12px; }
.dsc-compare__vs {
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ocpl-orange); margin-bottom: 10px;
}
.dsc-compare__impact { font-size: .88rem; color: var(--text); line-height: 1.6; }

/* CTA */
.dsc-cta { text-align: center; max-width: 600px; margin: 0 auto; }
.dsc-cta h2 { margin-bottom: 12px; }
.dsc-cta p  { color: var(--text-mid); margin-bottom: 28px; }
.dsc-cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 640px) {
  .dsc-display { padding: 24px 20px 20px; }
  .dsc-compare__grid { grid-template-columns: 1fr; }
  .dsc-display__heading { font-size: 1rem; }
  .dsc-display__amt { font-size: 1.7rem; }
}

/* ============================================================
   PATRON STORIES / TESTIMONIALS  (.pt-*)
   ============================================================ */

/* Hero quote */
.pt-hero-quote { background: var(--ocpl-blue); color: var(--white); }
.pt-hero-quote__inner { position: relative; padding: 16px 0 8px; }
.pt-hero-quote__mark {
  width: 64px; height: 48px; color: rgba(255,255,255,.25);
  display: block; margin-bottom: 20px;
}
.pt-hero-quote__text {
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 400; font-style: italic;
  line-height: 1.65; color: var(--white);
  margin: 0 0 16px; border: none; padding: 0;
}
.pt-hero-quote__source {
  display: block; font-size: .9rem; font-style: normal;
  color: rgba(255,255,255,.7); font-weight: 600;
}
.pt-hero-quote__source::before { content: '— '; }

/* Persona cards */
.pt-personas { background: var(--off-white); }
.pt-persona-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.pt-persona-card {
  background: var(--white);
  border-radius: 10px;
  padding: 24px 22px;
  border: 1px solid var(--border);
}
.pt-persona-card__icon {
  width: 48px; height: 48px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.pt-persona-card__icon svg { width: 24px; height: 24px; }
.pt-persona-card__icon--blue   { background: var(--ocpl-blue-light); color: var(--ocpl-blue); }
.pt-persona-card__icon--green  { background: var(--success-soft); color: var(--success); }
.pt-persona-card__icon--orange { background: var(--ocpl-orange-light); color: var(--ocpl-orange); }
.pt-persona-card__icon--purple { background: var(--accent-purple-soft); color: var(--accent-purple); }
.pt-persona-card h3 { font-size: 1rem; margin: 0 0 8px; }
.pt-persona-card p  { font-size: .9rem; color: var(--text-mid); line-height: 1.65; margin: 0 0 14px; }
.pt-persona-card__stat {
  font-size: .8rem; font-weight: 700;
  color: var(--ocpl-blue);
  border-top: 1px solid var(--border);
  padding-top: 10px; margin-top: auto;
}

/* Quote grid */
.pt-quotes-section { background: var(--white); }
.pt-quote-grid {
  columns: 3;
  column-gap: 20px;
}
.pt-quote-card {
  break-inside: avoid;
  background: var(--off-white);
  border-radius: 10px;
  padding: 24px 22px;
  margin-bottom: 20px;
  border-left: 3px solid var(--ocpl-blue);
}
.pt-quote-card--lg { background: var(--ocpl-blue-light); }
.pt-quote-card__mark { width: 24px; height: 18px; color: var(--ocpl-blue); opacity: .4; display: block; margin-bottom: 10px; }
.pt-quote-card blockquote {
  font-style: italic; font-size: .95rem;
  color: var(--text); line-height: 1.7;
  margin: 0 0 10px; border: none; padding: 0;
}
.pt-quote-card cite {
  font-size: .82rem; color: var(--text-mid);
  font-style: normal; font-weight: 600;
}
.pt-quote-card cite::before { content: '— '; }

/* Share CTA */
.pt-share-cta { background: var(--off-white); }
.pt-share-cta__inner {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 40px;
  display: flex;
  align-items: center;
  gap: 40px;
}
.pt-share-cta__text { flex: 1; }
.pt-share-cta__text h2 { margin: 0 0 10px; }
.pt-share-cta__text p  { color: var(--text-mid); margin: 0; }
.pt-share-cta__actions { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }

@media (max-width: 900px) {
  .pt-persona-grid { grid-template-columns: repeat(2, 1fr); }
  .pt-quote-grid   { columns: 2; }
}
@media (max-width: 640px) {
  .pt-persona-grid  { grid-template-columns: 1fr; }
  .pt-quote-grid    { columns: 1; }
  .pt-share-cta__inner { flex-direction: column; gap: 24px; padding: 28px 20px; }
  .pt-share-cta__actions { flex-direction: row; flex-wrap: wrap; justify-content: center; }
}

/* ============================================================
   FUNDING GAP  (.fg-*)
   ============================================================ */

/* Context section */
.fg-context { background: var(--white); }
.fg-context__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.fg-context__text h2 { margin-top: 0; }
.fg-context__text p  { color: var(--text-mid); line-height: 1.75; }
.fg-context__callout { display: flex; flex-direction: column; gap: 16px; }
.fg-callout-box {
  background: var(--ocpl-blue);
  color: var(--white);
  border-radius: 10px;
  padding: 24px 28px;
  text-align: center;
}
.fg-callout-box--muted { background: var(--off-white); color: var(--text); }
.fg-callout-box__num {
  font-size: 3rem; font-weight: 800; line-height: 1;
  margin-bottom: 8px;
}
.fg-callout-box__label { font-size: .9rem; line-height: 1.55; }

/* ── Who pays for libraries ── */
.fg-whopays { background: var(--off-white); }
.fg-whopays-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.fg-whopays-card {
  background: var(--white);
  border-radius: 10px;
  border: 1px solid var(--border);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fg-whopays-card__header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.fg-whopays-card__icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.fg-whopays-card__icon--local   { background: var(--ocpl-blue-light); }
.fg-whopays-card__icon--state   { background: #e8f4fb; }
.fg-whopays-card__icon--federal { background: var(--success-soft); }
.fg-whopays-card__header h3 { font-size: 1rem; margin: 0 0 2px; }
.fg-whopays-card__role {
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-light);
}
.fg-whopays-card > p {
  font-size: .88rem; color: var(--text-mid);
  line-height: 1.75; margin: 0; flex: 1;
}
.fg-whopays-card__why {
  font-size: .82rem; font-style: italic;
  color: var(--ocpl-blue);
  border-top: 1px solid var(--border);
  padding-top: 12px;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .fg-whopays-grid { grid-template-columns: 1fr; }
}

/* ── FY24 funding source breakdown ── */
.fg-sources-section { background: var(--off-white); }
.fg-funding-breakdown {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 48px;
  align-items: flex-start;
  margin-bottom: 24px;
}
.fg-breakdown-chart { display: flex; justify-content: center; align-items: flex-start; padding-top: 8px; }
.fg-breakdown-bars { display: flex; flex-direction: column; gap: 20px; }

/* Source bars */
.fg-source-bar { margin-bottom: 0; }
.fg-source-bar__header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.fg-source-bar__label { font-size: .9rem; font-weight: 600; color: var(--heading); }
.fg-source-bar__pct { font-size: 1.1rem; font-weight: 800; }
.fg-source-bar__pct--local   { color: var(--ocpl-blue); }
.fg-source-bar__pct--state   { color: var(--ocpl-blue); }   /* numbers stay dark; the bar carries the hue */
.fg-source-bar__pct--federal { color: var(--text-mid); }
.fg-source-bar__pct--friends { color: var(--success); }
.fg-source-bar__track {
  height: 10px; background: var(--light-gray); border-radius: 99px;
  margin-bottom: 8px; overflow: hidden;
}
.fg-source-bar__fill {
  height: 100%; border-radius: 99px;
  transition: width .8s cubic-bezier(.4,0,.2,1);
}
.fg-source-bar__fill--local   { background: var(--ocpl-blue); }
.fg-source-bar__fill--state   { background: var(--chart-2); }
.fg-source-bar__fill--federal { background: var(--mid-gray); }
.fg-source-bar__fill--friends { background: var(--chart-3); }
.fg-source-bar__note { font-size: .84rem; color: var(--text-mid); line-height: 1.65; margin: 0; }
.fg-source-bar--highlight .fg-source-bar__label { color: var(--success); }

/* Breakdown callout */
.fg-breakdown-callout {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--highlight-soft);
  border: 1px solid var(--highlight-border);
  border-left: 4px solid var(--highlight-fill);
  border-radius: 8px;
  padding: 16px 20px;
}
.fg-breakdown-callout__icon { font-size: 1.3rem; flex-shrink: 0; }
.fg-breakdown-callout__text { font-size: .9rem; color: var(--text); line-height: 1.7; }
.fg-breakdown-callout__text strong { color: var(--highlight-text); }

/* ── OCLC research section ── */
.fg-oclc-section { background: var(--white); }
.fg-oclc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 28px;
}
.fg-oclc-card {
  background: var(--off-white);
  border-radius: 10px;
  padding: 24px 22px;
  border: 1px solid var(--border);
}
.fg-oclc-card--featured {
  background: var(--ocpl-blue);
  color: var(--white);
  border-color: var(--ocpl-blue);
  grid-column: span 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.fg-oclc-card__stat {
  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 12px;
  color: var(--white);
}
.fg-oclc-card--featured h3 { color: var(--white); font-size: 1rem; font-weight: 700; margin: 0 0 10px; line-height: 1.4; }
.fg-oclc-card.fg-oclc-card--featured p  { color: var(--white); font-size: .88rem; line-height: 1.75; margin: 0; }
.fg-oclc-card__icon { font-size: 1.6rem; margin-bottom: 10px; display: block; }
.fg-oclc-card h3 { font-size: .95rem; margin: 0 0 8px; }
.fg-oclc-card p  { font-size: .88rem; color: var(--text-mid); line-height: 1.7; margin: 0; }

.fg-oclc-takeaway {
  background: var(--ocpl-blue-light);
  border-left: 4px solid var(--ocpl-blue);
  border-radius: 0 8px 8px 0;
  padding: 20px 24px;
}
.fg-oclc-takeaway__label {
  font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ocpl-blue); margin-bottom: 8px;
}
.fg-oclc-takeaway p { font-size: .92rem; color: var(--text); line-height: 1.75; margin: 0; }

@media (max-width: 900px) {
  .fg-funding-breakdown { grid-template-columns: 1fr; }
  .fg-breakdown-chart   { display: none; }
  .fg-oclc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .fg-oclc-grid { grid-template-columns: 1fr; }
}

/* Bar chart section */
.fg-chart-section { background: var(--off-white); }
.fg-chart-wrap {
  background: var(--white);
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  position: relative;
}
.fg-chart-wrap--sm {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  min-height: 260px;
}
.fg-chart-wrap--sm canvas {
  width: 100% !important;
  height: 260px !important;
}
/* INDY award callout: poster photo beside a short claim. */
.fg-award {
  display: flex;
  align-items: center;
  gap: 32px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 32px;
}
.fg-award__photo {
  flex: 0 0 200px;
  margin: 0;
}
.fg-award__photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(10, 35, 66, .18);
}
.fg-award__photo figcaption {
  margin-top: 8px;
  font-size: .78rem;
  color: var(--text-mid);
  text-align: center;
}
.fg-award__body h2 {
  font-size: 1.5rem;
  margin: 0 0 10px;
}
.fg-award__body p { margin: 0; line-height: 1.7; }
@media (max-width: 640px) {
  .fg-award { flex-direction: column; padding: 24px 20px; }
  .fg-award__photo { flex-basis: auto; max-width: 220px; }
  .fg-award__body { text-align: center; }
}

/* Three headline figures replacing the old five-bar comparison chart. */
.fg-compare-copy {
  max-width: 64ch;
  margin: 0 auto 28px;
}
.fg-compare-copy p { font-size: 1.02rem; line-height: 1.75; margin: 0; }
.fg-avg-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 26px;
}
@media (max-width: 700px) { .fg-avg-tiles { grid-template-columns: 1fr; } }
.fg-avg-tile {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 22px 18px 18px;
  text-align: center;
}
.fg-avg-tile--oc { border-color: var(--ocpl-blue); border-width: 2px; }
.fg-avg-tile__val {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 800;
  color: var(--ocpl-blue);
  line-height: 1.1;
}
.fg-avg-tile__label { margin-top: 6px; font-weight: 700; font-size: .95rem; color: var(--heading); }
.fg-avg-tile__sub   { margin-top: 2px; font-size: .8rem; color: var(--text-mid); }
.fg-chart-details { margin-top: 14px; }
.fg-chart-details > .fg-more__toggle { font-size: .95rem; }
.fg-chart-details .fg-more__body { margin-top: 14px; }

.fg-state-chart-wrap {
  background: var(--white);
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  /* overflow-x stays as a phone fallback only: the responsive canvas fits
     any width above the inner min-width, so no scrollbar appears on a
     laptop. Below it, panning beats 5px bars. */
  overflow-x: auto;
  overflow-y: hidden;
}
.fg-state-chart-box {
  position: relative;
  height: 300px;
  min-width: 640px;
}
.fg-chart-legend {
  display: flex; gap: 24px; flex-wrap: wrap;
  justify-content: center; margin-bottom: 12px;
}
.fg-legend-item { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--text-mid); }
.fg-legend-swatch { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; }
.fg-chart-note { font-size: .78rem; color: var(--text-light); text-align: center; max-width: 680px; margin: 0 auto; line-height: 1.65; }

/* Gap means section */
.fg-gap-means { background: var(--white); }
/* The Friends'-role block breaks the page's longest white run as a pale
   feature band; its inline styles already set blue-dark headings. */
.fg-gap-means.fg-friends-light { background: var(--ocpl-blue-pale); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.fg-gap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.fg-gap-card {
  background: var(--off-white);
  border-radius: 10px;
  padding: 24px 22px;
  border: 1px solid var(--border);
}
.fg-gap-card__icon { font-size: 2rem; margin-bottom: 10px; display: block; }
.fg-gap-card h3 { font-size: 1rem; margin: 0 0 8px; }
.fg-gap-card p  { font-size: .9rem; color: var(--text-mid); line-height: 1.65; margin: 0; }

/* FOCPL contribution */
.fg-focpl-contribution { background: var(--ocpl-blue); color: var(--white); }
.fg-focpl-contribution h2 { color: var(--white); text-align: center; margin-bottom: 32px; }
.fg-contribution-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 36px;
}
.fg-contribution-item { text-align: center; }
.fg-contribution-item__icon { font-size: 2rem; margin-bottom: 10px; display: block; }
.fg-contribution-item h3 { color: var(--white); font-size: 1rem; margin: 0 0 8px; }
.fg-contribution-item p  { color: rgba(255,255,255,.8); font-size: .9rem; line-height: 1.65; margin: 0; }
.fg-contribution-cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 36px;
}

/* Sources */
.fg-sources { background: var(--off-white); }
.fg-sources__heading { font-size: 1rem; font-weight: 700; color: var(--heading); margin-bottom: 12px; }
.fg-sources__text { font-size: .83rem; color: var(--text-mid); line-height: 1.75; }

@media (max-width: 960px) {
  .fg-gap-grid          { grid-template-columns: repeat(2, 1fr); }
  .fg-contribution-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .fg-context__grid     { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .fg-gap-grid          { grid-template-columns: 1fr; }
  .fg-contribution-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   WHERE THE MONEY GOES  (.wmg-*)
   ============================================================ */

/* Promise section */
.wmg-promise { background: var(--off-white); }
.wmg-promise__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.wmg-promise__item {
  background: var(--white);
  border-radius: 10px;
  padding: 24px 22px;
  border: 1px solid var(--border);
  text-align: center;
}
.wmg-promise__icon {
  width: 48px; height: 48px;
  background: var(--ocpl-blue-light);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  color: var(--ocpl-blue);
}
.wmg-promise__icon svg { width: 22px; height: 22px; }
.wmg-promise__item h3 { font-size: 1rem; margin: 0 0 8px; }
.wmg-promise__item p  { font-size: .9rem; color: var(--text-mid); line-height: 1.65; margin: 0; }

/* Flow diagram */
.wmg-flow-section { background: var(--white); }
.wmg-flow {
  display: grid;
  grid-template-columns: 200px 1fr 180px 1fr 220px;
  align-items: center;
  gap: 0;
  margin-bottom: 20px;
  min-height: 380px;
}
.wmg-col { display: flex; flex-direction: column; gap: 12px; }
.wmg-col__label {
  font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--text-mid);
  text-align: center; margin-bottom: 4px;
}

/* Flow nodes */
.wmg-node {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .15s, opacity .2s;
  outline: none;
}
.wmg-node:hover,
.wmg-node:focus { border-color: var(--ocpl-blue); box-shadow: 0 0 0 3px var(--ocpl-blue-light); transform: translateY(-2px); }
.wmg-node--active { border-color: var(--ocpl-blue) !important; background: var(--ocpl-blue-light); box-shadow: 0 2px 12px rgba(0,86,133,.15); opacity: 1 !important; }
.wmg-node--dim { opacity: .4; }
.wmg-node__icon { font-size: 1.4rem; flex-shrink: 0; }
.wmg-node__name { font-size: .88rem; font-weight: 700; color: var(--heading); line-height: 1.3; }
.wmg-node__pct  { font-size: .78rem; color: var(--text-mid); }
.wmg-node--source { border-left: 3px solid var(--ocpl-blue); }
.wmg-node--program { border-left: 3px solid var(--ocpl-green-dark); }

/* SVG connector columns */
.wmg-connectors { position: relative; align-self: stretch; }
.wmg-connectors svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.wmg-connectors path { fill: none; stroke: var(--border); stroke-width: 2; transition: stroke .2s, stroke-width .2s; }
.wmg-connectors path.is-active { stroke: var(--ocpl-blue); stroke-width: 2.5; }

/* Inline SVG icons (replaced the emoji) */
.wmg-node__icon svg { width: 24px; height: 24px; display: block; }
.wmg-node--source  .wmg-node__icon { color: var(--ocpl-blue); }
.wmg-node--program .wmg-node__icon { color: var(--ocpl-green-dark); }
.wmg-info-panel__icon svg { width: 28px; height: 28px; display: block; color: var(--ocpl-blue); }
.wmg-program-card__icon svg { width: 28px; height: 28px; display: block; }
.wmg-program-card--summer      .wmg-program-card__icon { color: var(--ocpl-orange); }
.wmg-program-card--collections .wmg-program-card__icon { color: var(--ocpl-blue); }
.wmg-program-card--childrens   .wmg-program-card__icon { color: var(--ocpl-blue-mid); }
.wmg-program-card--tech        .wmg-program-card__icon { color: var(--ocpl-green-dark); }
.wmg-program-card--community   .wmg-program-card__icon { color: var(--ocpl-navy); }

/* Hub */
.wmg-col--hub { align-items: center; justify-content: center; }
.wmg-hub {
  background: var(--ocpl-blue);
  color: var(--white);
  border-radius: 14px;
  padding: 28px 20px;
  text-align: center;
  box-shadow: 0 4px 24px rgba(0,86,133,.25);
  min-width: 140px;
}
.wmg-hub__logo { width: 40px; height: 40px; margin: 0 auto 10px; }
.wmg-hub__logo svg { width: 40px; height: 40px; color: rgba(255,255,255,.9); }
.wmg-hub__name { font-size: 1.2rem; font-weight: 800; letter-spacing: .02em; }
.wmg-hub__sub  { font-size: var(--fs-xs); color: rgba(255,255,255,.75); line-height: 1.4; margin-top: 4px; }

/* Info panel */
.wmg-info-panel {
  background: var(--ocpl-blue-light);
  border: 1px solid var(--ocpl-blue);
  border-radius: 10px;
  padding: 20px 24px;
  max-width: 700px;
  margin: 0 auto 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s, transform .25s;
  pointer-events: none;
  min-height: 80px;
}
.wmg-info-panel--visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.wmg-info-panel__inner { display: flex; align-items: flex-start; gap: 16px; }
.wmg-info-panel__icon { font-size: 1.8rem; flex-shrink: 0; }
.wmg-info-panel__text strong { display: block; font-size: 1rem; margin-bottom: 4px; color: var(--ocpl-blue); }
.wmg-info-panel__text p { font-size: .9rem; color: var(--text); line-height: 1.65; margin: 0; }

/* Donut charts */
.wmg-charts-section { background: var(--off-white); }
.wmg-charts {
  display: flex;
  gap: 48px;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}
.wmg-chart-block { text-align: center; }
.wmg-donut-wrap { display: inline-block; margin-bottom: 16px; }
.wmg-chart-block__title { font-size: 1rem; font-weight: 700; margin-bottom: 14px; }
.wmg-legend { list-style: none; padding: 0; margin: 0; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.wmg-legend li { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--text); }
.wmg-legend__dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.wmg-legend em { color: var(--text-mid); font-style: normal; }

/* Program cards */
.wmg-programs { background: var(--white); }
.wmg-programs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.wmg-program-card {
  border-radius: 10px;
  border: 1px solid var(--border);
  padding: 22px;
  background: var(--off-white);
}
.wmg-program-card--summer   { border-top: 3px solid var(--ocpl-orange); }
.wmg-program-card--collections { border-top: 3px solid var(--ocpl-blue); }
.wmg-program-card--childrens   { border-top: 3px solid var(--ocpl-blue-mid); }
.wmg-program-card--tech        { border-top: 3px solid var(--ocpl-green-dark); }
.wmg-program-card--community   { border-top: 3px solid var(--ocpl-navy); }
.wmg-program-card__header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.wmg-program-card__icon { font-size: 1.8rem; flex-shrink: 0; }
.wmg-program-card__header h3 { font-size: .95rem; margin: 0 0 2px; }
.wmg-program-card__pct { font-size: .78rem; font-weight: 700; color: var(--text-mid); }
.wmg-program-card p { font-size: .88rem; color: var(--text-mid); line-height: 1.7; margin: 0 0 12px; }
.wmg-program-card__stat {
  font-size: .8rem; font-weight: 700; color: var(--ocpl-blue);
  border-top: 1px solid var(--border); padding-top: 10px;
}

/* Accountability */
.wmg-accountability { background: var(--off-white); }
.wmg-accountability__inner {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 40px;
  text-align: center;
}
.wmg-accountability__inner h2 { margin-top: 0; }
.wmg-accountability__inner p  { color: var(--text-mid); max-width: 580px; margin: 0 auto 14px; line-height: 1.75; }
.wmg-accountability__actions  { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }

/* Disclaimer */
.wmg-disclaimer-section { background: var(--off-white); padding-top: 0; }
.wmg-disclaimer { font-size: .78rem; color: var(--text-mid); line-height: 1.75; text-align: center; }

/* Denominator note under the flow diagram */
.wmg-flow-note {
  max-width: 720px;
  margin: 18px auto 0;
  text-align: center;
  font-size: .86rem;
  color: var(--text-mid);
  line-height: 1.6;
}

/* Year at a glance: four plain figures where two donuts used to repeat
   the flow diagram */
.wmg-glance-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 860px) { .wmg-glance-row { grid-template-columns: 1fr 1fr; } }
.wmg-glance {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px 18px;
  text-align: center;
}
.wmg-glance__val { display: block; font-size: 1.7rem; font-weight: 800; color: var(--ocpl-blue); line-height: 1.15; }
.wmg-glance__label { display: block; margin-top: 6px; font-size: .8rem; color: var(--text-mid); line-height: 1.4; }
.wmg-glance-cta { text-align: center; margin: 26px 0 0; }

/* Per-card link into the filtered Projects Funded view */
.wmg-program-card__link {
  display: inline-block;
  margin-top: 10px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--ocpl-blue);
  text-decoration: none;
}
.wmg-program-card__link:hover { text-decoration: underline; }

/* The quiet give line under the accountability evidence buttons */
.wmg-accountability__give { margin: 18px 0 0; font-size: .9rem; color: var(--text-mid); }
.wmg-accountability__give a { color: var(--ocpl-blue); font-weight: 600; }

/* About These Numbers accordion: same information the tiny disclaimer
   carried, at a readable size behind one click */
.wmg-about-numbers {
  max-width: 720px;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--off-white);
  padding: 14px 20px;
}
.wmg-about-numbers > summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ocpl-blue);
  font-size: .95rem;
}
.wmg-about-numbers__body { padding-top: 12px; font-size: .88rem; line-height: 1.65; color: var(--text-mid); }
.wmg-about-numbers__body ul { margin: 10px 0 12px 20px; padding: 0; }
.wmg-about-numbers__body li { margin-bottom: 8px; }
.wmg-about-numbers__body a { color: var(--ocpl-blue); }

/* Responsive */
@media (max-width: 900px) {
  .wmg-promise__grid  { grid-template-columns: 1fr; }
  .wmg-programs-grid  { grid-template-columns: repeat(2, 1fr); }
  /* The flow reflows as a stack in DOM order: raised, the hub, then used.
     Only the SVG connector ribbons are desktop-only; both sides share one
     total, so the stacked columns still read as a single flow. Nodes are
     focusable, so a tap fills the info panel the way hover does. */
  .wmg-flow { grid-template-columns: 1fr; min-height: 0; gap: 20px; }
  .wmg-connectors { display: none; }
  .wmg-hub { max-width: 260px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .wmg-programs-grid { grid-template-columns: 1fr; }
  .wmg-accountability__inner { padding: 28px 20px; }
}

/* ============================================================
   SUMMER READING  (.sr-*)
   ============================================================ */

/* Intro */
.sr-intro { background: var(--white); }
.sr-intro__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.sr-intro__text h2 { margin-top: 0; }
.sr-intro__text p  { color: var(--text-mid); line-height: 1.75; }
.sr-intro__highlight {
  background: var(--ocpl-blue);
  border-radius: 12px;
  padding: 32px 28px;
  text-align: center;
  color: var(--white);
}
.sr-intro__big-stat { margin-bottom: 16px; }
.sr-intro__big-num  { display: block; font-size: 4rem; font-weight: 800; line-height: 1; }
.sr-intro__big-label {
  display: block; font-size: .9rem;
  color: rgba(255,255,255,.85); line-height: 1.4; margin-top: 6px;
}
.sr-intro__note { font-size: .82rem; color: rgba(255,255,255,.7); line-height: 1.65; margin: 0; }

/* Research cards */
.sr-research { background: var(--off-white); }
.sr-research-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  max-width: 980px;
  margin: 0 auto;
  gap: 20px;
}
.sr-research-card {
  background: var(--white);
  border-radius: 10px;
  padding: 24px 22px;
  border: 1px solid var(--border);
}
.sr-research-card__stat {
  font-size: 1.6rem; font-weight: 800;
  color: var(--ocpl-blue); margin-bottom: 10px;
  line-height: 1;
}
.sr-research-card h3 { font-size: .95rem; margin: 0 0 8px; }
.sr-research-card p  { font-size: .88rem; color: var(--text-mid); line-height: 1.7; margin: 0 0 12px; }
.sr-research-card cite {
  font-size: .78rem; color: var(--text-light);
  font-style: italic; display: block;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

/* Equity */
.sr-equity { background: var(--white); }
.sr-equity__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.sr-equity__text h2 { margin-top: 0; }
.sr-equity__text p  { color: var(--text-mid); line-height: 1.75; }
.sr-equity__stat-block {
  background: var(--off-white);
  border-radius: 12px;
  padding: 32px 28px;
  text-align: center;
}
.sr-equity__ratio-num {
  display: block; font-size: 4.5rem;
  font-weight: 800; color: var(--ocpl-blue); line-height: 1;
  margin-bottom: 12px;
}
.sr-equity__ratio p { font-size: .9rem; color: var(--text-mid); line-height: 1.65; margin: 0 0 10px; }
.sr-equity__ratio cite {
  font-size: .78rem; color: var(--text-light); font-style: italic;
}

/* Stats section (reuses .impact-grid/.impact-card) */
.sr-stats-section { background: var(--ocpl-blue); }
.sr-stats-section .section-heading h2,
.sr-stats-section .section-heading p { color: rgba(255,255,255,.9); }

/* Blockquote pull */
.sr-quote-section { background: var(--off-white); }
.sr-blockquote {
  border: none; padding: 0; margin: 0;
  text-align: center;
}
.sr-blockquote p {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-style: italic;
  color: var(--text);
  line-height: 1.7;
  margin: 0 0 16px;
}
.sr-blockquote cite {
  font-size: .88rem; font-style: normal;
  color: var(--text-mid);
}

/* Support cards */
.sr-support { background: var(--white); }
.sr-support-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.sr-support-card {
  background: var(--off-white);
  border-radius: 10px;
  padding: 28px 22px;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.sr-support-card__icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.sr-support-card__icon--members { background: var(--ocpl-blue-light); color: var(--ocpl-blue); }
.sr-support-card__icon--donate  { background: var(--ocpl-orange-light); color: var(--ocpl-orange); }
.sr-support-card__icon--booksale { background: var(--success-soft); color: var(--success); }
.sr-support-card__icon svg { width: 24px; height: 24px; }
.sr-support-card h3 { font-size: 1rem; margin: 0 0 8px; }
.sr-support-card p  { font-size: .9rem; color: var(--text-mid); line-height: 1.65; margin: 0 0 20px; flex: 1; }
.sr-support-card__btn { align-self: flex-start; }

/* CTA */
.sr-cta { background: var(--ocpl-blue); }
.sr-cta__inner { text-align: center; }
.sr-cta__inner h2 { color: var(--white); margin-bottom: 12px; }
.sr-cta__inner p  { color: rgba(255,255,255,.85); margin-bottom: 28px; }
.sr-cta__actions  { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Sources */
.sr-sources { background: var(--white); }
.sr-sources__heading { font-size: 1rem; font-weight: 700; margin-bottom: 14px; }
.sr-sources__list { padding-left: 20px; }
.sr-sources__list li { font-size: .83rem; color: var(--text-mid); line-height: 1.75; margin-bottom: 8px; }

@media (max-width: 900px) {
  .sr-intro__grid   { grid-template-columns: 1fr; }
  .sr-research-grid { grid-template-columns: repeat(2, 1fr); }
  .sr-equity__inner { grid-template-columns: 1fr; }
  .sr-support-grid  { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sr-research-grid { grid-template-columns: 1fr; }
  .sr-intro__big-num { font-size: 3rem; }
}

/* ============================================================
   LIBRARY RESOURCES EXPLORER  (.lrc-*)
   ============================================================ */

.lrc-plugin-error { padding: 40px; color: var(--danger); }

/* ── Value section (dark hero) ── */
.lrc-value-section {
  background: var(--ocpl-navy);
  color: var(--white);
  padding: 60px 0;
}
.lrc-value-section .container { max-width: 1000px; }

.lrc-value-intro { text-align: center; margin-bottom: 48px; }
.lrc-value-intro h2 {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  color: var(--white);
  margin-bottom: 12px;
}
.lrc-value-intro p {
  color: var(--text-on-dark);
  font-size: 1.05rem;
  max-width: 720px;
  margin: 0 auto;
}

.lrc-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-bottom: 36px;
}
.lrc-stat { background: rgba(255,255,255,.06); padding: 28px 20px; text-align: center; }
.lrc-stat__num {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  color: var(--highlight-on-dark);
  line-height: 1;
}
.lrc-stat__label {
  font-size: .85rem;
  color: var(--text-on-dark-muted);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.lrc-value-subintro {
  margin: 0 auto;
  max-width: 760px;
  text-align: center;
  color: var(--text-on-dark);
  font-size: .98rem;
  line-height: 1.7;
}

/* ── Day strip ── */
.lrc-daystrip {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 48px 0;
}
.lrc-daystrip .container { max-width: 1000px; }
.lrc-daystrip h2 {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  color: var(--ocpl-navy);
  margin-bottom: 14px;
  text-align: center;
}
.lrc-daystrip p {
  max-width: 820px;
  margin: 0 auto;
  color: var(--text-mid);
  line-height: 1.85;
  font-size: 1.02rem;
  text-align: center;
}

/* ── Bridge paragraph ── */
/* Hero "get a card" link */
.lrc-card-link { font-size: .85rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ── Explorer section ── */
.lrc-explorer { padding: 32px 0 80px; }
.lrc-explorer .container { max-width: 1440px; }

.lrc-search-row {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.lrc-search-wrap { position: relative; flex: 1; min-width: 240px; }
.lrc-search-wrap svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-light);
  pointer-events: none;
}
.lrc-search {
  width: 100%;
  padding: 12px 16px 12px 42px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  outline: none;
  transition: border-color var(--transition-fast);
}
.lrc-search:focus,
.lrc-search:focus-visible { border-color: var(--ocpl-blue); }

.lrc-count { font-size: .9rem; color: var(--text-light); white-space: nowrap; }
.lrc-count strong { color: var(--ocpl-blue); }

/* Audience filter bar */
#lrc-audience-bar {
  display: none;
  margin-bottom: 16px;
  padding: 10px 16px;
  background: var(--ocpl-blue-light);
  border: 1.5px solid var(--ocpl-blue);
  border-radius: var(--radius);
  align-items: center;
  gap: 12px;
}
#lrc-audience-bar.is-visible { display: flex; }
.lrc-audience-label { font-size: .88rem; font-weight: 600; color: var(--ocpl-navy); flex: 1; }
.lrc-audience-clear {
  font-size: .8rem;
  font-weight: 700;
  color: var(--ocpl-blue);
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  padding: 0;
}
.lrc-audience-clear:focus-visible { outline: 2px solid var(--ocpl-blue); border-radius: 2px; }

/* Category filter pills */
.lrc-cats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
/* Explorer topic directory (initial, no-filter state). */
.lrc-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.lrc-topic-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 18px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; text-align: left; transition: border-color var(--transition), box-shadow var(--transition); }
.lrc-topic-tile:hover { border-color: var(--ocpl-blue); box-shadow: 0 2px 10px rgba(0, 86, 133, .10); }
.lrc-topic-tile__name { font-weight: 700; color: var(--ocpl-blue-dark); font-size: .95rem; }
.lrc-topic-tile__n { font-size: .78rem; color: var(--text-mid); }
.lrc-topic-tile--all { border-style: dashed; }
.lrc-topic-tile--all .lrc-topic-tile__name { color: var(--ocpl-blue); }

.lrc-cat-btn {
  padding: 6px 14px;
  border: 2px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--white);
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-mid);
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    color var(--transition-fast),
    background-color var(--transition-fast);
  white-space: nowrap;
}
.lrc-cat-btn:hover { border-color: var(--ocpl-blue); color: var(--ocpl-blue); }
.lrc-cat-btn.active { background: var(--ocpl-blue); border-color: var(--ocpl-blue); color: var(--white); }
.lrc-cat-btn.active:hover { background: var(--ocpl-blue-dark); border-color: var(--ocpl-blue-dark); }
.lrc-cat-btn:focus-visible { box-shadow: var(--focus-ring); outline: none; }

/* Resource grid. Flex instead of CSS grid so an incomplete final row
   centers rather than leaving a lone left-aligned card; max-width caps
   how far a short row's cards stretch. */
.lrc-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.lrc-grid > .lrc-card { flex: 1 1 320px; max-width: 420px; min-width: 0; }
.lrc-grid > .lrc-topics, .lrc-grid > .lrc-empty { flex: 1 1 100%; }

.lrc-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition), transform var(--transition-fast);
}
.lrc-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.lrc-card__head { padding: 18px 18px 14px; flex: 1; }
.lrc-card__name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1.3;
}
.lrc-card__cats { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.lrc-card__cat  { font-size: var(--fs-xs); font-weight: 700; padding: 2px 8px; border-radius: var(--radius-xl); }
.lrc-card__desc { font-size: .88rem; color: var(--text-mid); line-height: 1.55; }
.lrc-card__for  { margin-top: 10px; font-size: .8rem; color: var(--text-light); }
.lrc-card__for strong { color: var(--ocpl-blue); }
.lrc-card__value {
  display: inline-block;
  margin-top: 8px;
  margin-right: 6px;
  font-size: .78rem;
  font-weight: 700;
  color: #7c3aed;
  background: #f5f0ff;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}
/* NC LIVE trailing-12-month usage figure (cards over the display floor only) */
.lrc-card__usage {
  display: inline-block;
  margin-top: 8px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--success-dark);
  background: var(--success-soft);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}
/* Sourced usage line under the explorer intro */
.lrc-usage-note {
  text-align: center;
  max-width: 720px;
  margin: -8px auto 26px;
  font-size: .88rem;
  color: var(--text-light);
}
.lrc-usage-note a { color: inherit; text-decoration: underline; }
.lrc-card__foot { border-top: 1px solid var(--light-gray); padding: 0; }
.lrc-card__toggle {
  width: 100%;
  padding: 11px 18px;
  background: none;
  border: none;
  text-align: left;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ocpl-blue);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lrc-card__toggle:hover { background: var(--ocpl-blue-pale); }
.lrc-card__toggle:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.lrc-card__toggle svg { transition: transform var(--transition-fast); flex-shrink: 0; }
.lrc-card__toggle.open svg { transform: rotate(180deg); }
.lrc-card__ext {
  display: none;
  padding: 14px 18px;
  font-size: .85rem;
  color: var(--text-mid);
  line-height: 1.6;
  border-top: 1px solid var(--light-gray);
  background: var(--ocpl-blue-pale);
}
.lrc-card__ext.open { display: block; }

.lrc-access-btn {
  display: block;
  padding: 10px 18px;
  background: var(--ocpl-blue);
  color: var(--white);
  font-size: .82rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--transition-fast);
}
.lrc-access-btn:hover { background: var(--ocpl-blue-dark); color: var(--white); }

/* Secondary action, sitting above the access button: NC LIVE's own quick-start
   guide. Deliberately quieter than the primary, and it leaves the site, so it
   is marked as a PDF where that is what it opens. Its border-top is what
   separates the card body from this pair. */
.lrc-guide-link {
  display: block;
  padding: 8px 18px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  color: var(--ocpl-blue);
  font-size: .78rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--transition-fast);
}
.lrc-guide-link:hover { background: var(--ocpl-blue-pale); color: var(--ocpl-blue-dark); }

/* Access status, straight from NC LIVE's Free resource column. Absent when
   upstream doesn't say, so the card never guesses. */
.lrc-card__access {
  display: inline-block;
  margin-top: 8px;
  margin-right: 6px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--ocpl-blue-dark);
  background: var(--ocpl-blue-pale);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}
.lrc-card__access--free { color: var(--success-dark); background: var(--success-soft); }

/* Attribution, deliberately quieter than the access tag: it says where the
   resource comes from, not what it costs the reader. */
.lrc-card__prov {
  display: inline-block;
  margin-top: 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-light);
  letter-spacing: .01em;
}
.lrc-card__prov::before { content: '·'; margin-right: 6px; opacity: .6; }

/* The consortium explanation and the usage figures, stated once above the
   directory. Boxed and left-aligned: two centred paragraphs immediately above
   a search field read as a wall and get skipped. */
.lrc-about-nclive {
  max-width: 760px;
  margin: 0 auto 26px;
  padding: 16px 20px;
  background: var(--ocpl-blue-pale);
  border: 1px solid var(--ocpl-blue-light, var(--border));
  border-radius: var(--radius-md);
}
.lrc-about-nclive__head {
  font-size: var(--fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ocpl-blue-dark);
  margin-bottom: 8px;
}
.lrc-consortium,
.lrc-about-nclive .lrc-usage-note {
  margin: 0;
  text-align: left;
  font-size: .88rem;
  line-height: 1.65;
  color: var(--text-mid);
  max-width: none;
}
.lrc-about-nclive .lrc-usage-note { margin-top: 10px; }
.lrc-consortium strong { color: var(--heading); }

/* Counted coverage: what is actually inside, with its source and date. */
.lrc-card__coverage {
  margin: 10px 0 0;
  font-size: .8rem;
  line-height: 1.55;
  color: var(--text-mid);
}
/* Sits inline at the end of the coverage sentence: the live answer to
   "do you have my journal?", which no stored copy could stay current on. */
.lrc-card__jsearch {
  display: inline-block;
  margin-top: 2px;
  font-weight: 700;
  color: var(--ocpl-blue);
  text-decoration: underline;
  white-space: nowrap;
}
.lrc-card__jsearch:hover { color: var(--ocpl-blue-dark); }

.lrc-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-light);
  font-style: italic;
}
.lrc-empty__reset {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--ocpl-blue);
  text-decoration: underline;
  cursor: pointer;
}

/* ── Category badge colors ── */
.cat-books            { background: #ede9fe; color: #5b21b6; }
.cat-business         { background: #dbeafe; color: #1d4ed8; }
.cat-career           { background: #ccfbf1; color: #0f766e; }
.cat-current          { background: #fef3c7; color: #a85b04; }
.cat-data             { background: #f3e8ff; color: #7c3aed; }
.cat-education        { background: #dcfce7; color: #166534; }
.cat-nc               { background: #fee2e2; color: #b91c1c; }
.cat-genealogy        { background: #fef9c3; color: #92400e; }
.cat-government       { background: #e0e7ff; color: #3730a3; }
.cat-health           { background: #d1fae5; color: #065f46; }
.cat-history          { background: #fff7ed; color: #92400e; }
.cat-homework         { background: #fef9c3; color: #713f12; }
.cat-language         { background: #fce7f3; color: #be185d; }
.cat-magazines        { background: #f1f5f9; color: #475569; }
.cat-nursing          { background: #cffafe; color: #0e7490; }
.cat-philosophy       { background: #f5f3ff; color: #4c1d95; }
.cat-science          { background: #e0f2fe; color: #0369a1; }
.cat-social           { background: #ffedd5; color: #9a3412; }
.cat-library-services { background: #d1fae5; color: #065f46; }
.cat-programs         { background: #fce7f3; color: #be185d; }
.cat-regional         { background: #e0f2fe; color: #0369a1; }

/* ── Persona explorer ── */
.lrc-personas { background: var(--white); padding: 64px 0; border-top: 1px solid var(--border); }
.lrc-personas .container { max-width: 1440px; }
.lrc-personas__intro { text-align: center; margin-bottom: 32px; }
.lrc-personas__intro h2 {
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  color: var(--ocpl-navy);
  margin-bottom: 10px;
}
.lrc-personas__intro p { color: var(--text-mid); font-size: 1rem; max-width: 600px; margin: 0 auto; }

/* Side-by-side layout */
.lrc-personas-layout {
  display: grid;
  /* Wide nav: all twenty audiences visible at once in two columns, so the
     list never scrolls inside itself. The panel gives up width it no longer
     needs now that the cost column is retired. */
  grid-template-columns: 400px 1fr;
  gap: 24px;
  align-items: start;
}

/* About NC LIVE: a native disclosure, closed by default — the explainer
   is one click away instead of standing between the filters and the
   resources. The summary keeps the box's old head styling. */
.lrc-about-nclive > summary { cursor: pointer; list-style: none; user-select: none; }
.lrc-about-nclive > summary::-webkit-details-marker { display: none; }
.lrc-about-nclive > summary::after { content: ' B8'; opacity: .55; }
.lrc-about-nclive[open] > summary::after { content: ' BE'; }

/* Left nav */
.lrc-persona-nav {
  background: var(--ocpl-blue);
  border: 1px solid var(--ocpl-blue);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);

  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;

  /* Audience groups flow into two columns under the full-span intro. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  column-gap: 4px;
  padding-bottom: 10px;
}
.lrc-persona-nav__intro {
  grid-column: 1 / -1;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 14px 16px 2px;
  color: var(--text-on-dark);
}
.lrc-persona-group + .lrc-persona-group { border-top: 1px solid rgba(255,255,255,.08); }
.lrc-persona-group__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
  padding: 13px 16px 3px;
  color: var(--text-on-dark-muted);
}
.lrc-persona-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 7px 16px 7px 20px;
  border: none;
  border-left: 2px solid transparent;
  background: none;
  font-size: .8rem;
  font-weight: 400;
  color: var(--text-on-dark-muted);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  border-radius: 0;
}
/* Labels wrap rather than truncate. nowrap plus ellipsis cut "News & Current
   Events" to "News & Current Ev…" at desktop width, and the labels are
   editable, so any fixed width is a guess waiting to be wrong. Top alignment
   keeps the icon level with the first line of a two-line label. */
.lrc-persona-tab { align-items: flex-start; }
.lrc-persona-tab span {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.lrc-persona-tab .lrc-ptab-icon { margin-top: 2px; }
.lrc-ptab-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.45;
  transition: opacity var(--transition-fast);
}
.lrc-persona-tab:hover .lrc-ptab-icon,
.lrc-persona-tab.active .lrc-ptab-icon { opacity: 0.9; }
.lrc-persona-tab:hover { background: rgba(255,255,255,.07); color: var(--text-on-dark); }
.lrc-persona-tab:focus-visible { outline: 2px solid var(--ocpl-orange); outline-offset: -2px; }
.lrc-persona-tab.active {
  background: rgba(255,255,255,.1);
  border-left-color: var(--ocpl-orange);
  color: var(--text-on-dark);
  font-weight: 600;
}

/* Right panel */
.lrc-persona-panel {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.lrc-persona-panel__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: start;
  padding: 36px 40px 28px;
  background: var(--ocpl-blue-pale);
  border-bottom: 1px solid var(--border);
}
.lrc-persona-panel__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  background: var(--ocpl-blue-pale);
  border-radius: var(--radius-md);
  color: var(--ocpl-blue);
}
.lrc-panel-icon { width: 28px; height: 28px; }
/* An h3 since the panel title was dropped; the heading styles are reset so it
   still reads as an eyebrow rather than a section head. */
.lrc-persona-panel__eyebrow {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ocpl-blue);
  margin: 0 0 6px;
  line-height: 1.3;
  font-family: var(--font-heading);
}
/* The aspirational title above each panel was dropped (2026-08): the eyebrow
   already names the audience, and one factual intro reads better than a slogan
   followed by a paragraph. __story became __intro with it. */
.lrc-persona-panel__intro {
  font-size: 1.02rem;
  color: var(--text);
  line-height: 1.65;
  margin: 2px 0 0;
  max-width: 60ch;
}

.lrc-persona-savings__basis {
  font-size: .76rem;
  line-height: 1.55;
  color: var(--text-light);
  margin: 14px 0 0;
}

.lrc-persona-panel__body { display: grid; grid-template-columns: 1fr 1fr; }
/* No priced comparison to show, so the resources take the full width and the
   access facts sit under them instead of filling a half-width column. */
.lrc-persona-panel__body--single { grid-template-columns: 1fr; }
.lrc-persona-panel__body--single .lrc-persona-panel__col:first-child { border-right: none; }
.lrc-persona-panel__col { padding: 28px 40px; }
.lrc-persona-panel__col:first-child { border-right: 1px solid var(--border); }

.lrc-persona-access__head { margin-top: 26px; }
.lrc-persona-access {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* min() keeps the 300px floor from becoming an overflow: inside a mobile
     panel the column has ~287px of usable width, and a hard minmax(300px,1fr)
     pushed the whole panel 13px wide. */
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 10px 28px;
}
/* Label, access tag and note stack rather than compete for one line. The old
   row set the value `white-space: nowrap` opposite the label, so a 33-character
   value took 198px of a 290px cell and left "Home delivery for homebound
   patrons" wrapping to three lines inside the 78px that remained. Nothing here
   is nowrap, and the label gets the full width of its cell. */
.lrc-persona-access li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: .86rem;
}
.lrc-persona-access li:last-child { border-bottom: none; }
.lrc-persona-access__what { color: var(--text); font-weight: 600; line-height: 1.4; }
/* Same tag language as the resource cards above: blue for card-based access,
   green for genuinely free, neutral where a fee applies. */
.lrc-persona-access__how {
  display: inline-block;
  font-size: .76rem;
  font-weight: 700;
  color: var(--ocpl-blue-dark);
  background: var(--ocpl-blue-pale);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  overflow-wrap: anywhere;
}
.lrc-persona-access__how--free { color: var(--success-dark); background: var(--success-soft); }
.lrc-persona-access__how--fee  { color: var(--text-mid);     background: var(--light-gray); }
.lrc-persona-access__note { font-size: .76rem; line-height: 1.5; color: var(--text-light); }
.lrc-persona-panel__col-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--text-light);
  margin-bottom: 14px;
}

.lrc-persona-resources { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.lrc-persona-resources li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .88rem;
  color: var(--text);
  line-height: 1.4;
}
.lrc-persona-resources li::before {
  content: '→';
  color: var(--ocpl-blue);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.lrc-persona-resources .lrc-pr-name { font-weight: 600; }
.lrc-persona-resources .lrc-pr-why { color: var(--text-light); font-size: .82rem; display: block; }

.lrc-persona-savings { display: flex; flex-direction: column; gap: 16px; }
.lrc-persona-savings__item {
  background: var(--ocpl-blue-pale);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.lrc-persona-savings__label { font-size: .78rem; font-weight: 700; color: var(--ocpl-navy); margin-bottom: 2px; }
.lrc-persona-savings__val   { font-size: 1.1rem; font-weight: 800; color: var(--ocpl-blue); }
.lrc-persona-savings__note  { font-size: var(--fs-xs); color: var(--text-light); margin-top: 2px; }
/* Two of the three values in a priced panel are sentences, not figures. At
   1.1rem/800 they read as prices, so only a real figure keeps that size. */
.lrc-persona-savings__val--text {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  color: var(--ocpl-blue-dark);
  background: var(--white);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  margin-top: 2px;
}

.lrc-persona-panel__foot {
  padding: 20px 40px;
  background: var(--ocpl-blue-pale);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.lrc-persona-panel__foot p { font-size: .85rem; color: var(--text-mid); margin: 0; flex: 1; }
.lrc-persona-filter-btn {
  padding: 10px 22px;
  background: var(--ocpl-blue);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--transition-fast);
}
.lrc-persona-filter-btn:hover { background: var(--ocpl-blue-dark); }
.lrc-persona-filter-btn:focus-visible { box-shadow: var(--focus-ring); outline: none; }

@media (max-width: 860px) {
  .lrc-personas-layout { grid-template-columns: 1fr; gap: 16px; }
  .lrc-persona-nav__intro { display: none; }
  .lrc-persona-nav {
    position: static;
    max-height: none;
    display: flex;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }
  .lrc-persona-group + .lrc-persona-group { border-top: none; border-left: 1px solid var(--border); }
  .lrc-persona-group { flex-shrink: 0; }
  .lrc-persona-tab { border-left: none; border-bottom: 2px solid transparent; padding: 7px 12px; }
  .lrc-persona-tab.active {
    background: rgba(255,255,255,.1);
    border-left-color: transparent;
    border-bottom-color: var(--ocpl-orange);
  }
}

@media (max-width: 700px) {
  .lrc-persona-panel__head { grid-template-columns: 1fr; padding: 24px; }
  .lrc-persona-panel__icon { width: 44px; height: 44px; }
  .lrc-panel-icon { width: 22px; height: 22px; }
  .lrc-persona-panel__body { grid-template-columns: 1fr; }
  .lrc-persona-panel__col:first-child { border-right: none; border-bottom: 1px solid var(--border); }
  .lrc-persona-panel__col { padding: 20px 24px; }
  .lrc-persona-panel__foot { padding: 16px 24px; }
}

/* ── Closing CTA ── */
.lrc-how {
  background: var(--ocpl-blue-pale);
  border-top: 3px solid var(--ocpl-blue);
  padding: 56px 0;
}
.lrc-how .container { max-width: 840px; text-align: center; }
.lrc-how h2 { margin-bottom: 12px; color: var(--ocpl-navy); }
.lrc-how p  { color: var(--text-mid); margin-bottom: 24px; max-width: 720px; margin-left: auto; margin-right: auto; }
.lrc-how__actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.lrc-how .lrc-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
  text-align: left;
}
.lrc-step {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 20px;
  border: 1px solid var(--border);
}
.lrc-step__num  { font-size: 1.5rem; font-weight: 800; color: var(--ocpl-blue); }
.lrc-step__text { font-size: .9rem; color: var(--text-mid); margin-top: 6px; line-height: 1.5; }

@media (max-width: 680px) {
  .lrc-stats { grid-template-columns: 1fr 1fr; }
  .lrc-stats .lrc-stat:last-child { grid-column: 1 / -1; }
  .lrc-how .lrc-steps { grid-template-columns: 1fr; }
}



/* ── Why It Matters page ──────────────────────────────────── */
/* ============================================================
   SECTION HUB INTRO — picture + summary above the card grid
   ============================================================ */
.hub-intro-section { padding-bottom: 0; }
.hub-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 30px;
  align-items: center;
}
.hub-intro--text-only { grid-template-columns: 1fr; }

.hub-intro__media { margin: 0; }
.hub-intro__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
.hub-intro__media figcaption {
  margin-top: 8px;
  font-size: .78rem;
  color: var(--text-light);
  line-height: 1.45;
}
.hub-intro__body > :first-child { margin-top: 0; }
.hub-intro__body > :last-child  { margin-bottom: 0; }
.hub-intro__body p { font-size: 1.02rem; line-height: 1.7; color: var(--text); }

@media (max-width: 780px) {
  .hub-intro { grid-template-columns: 1fr; gap: 20px; }
  .hub-intro__media img { max-height: 240px; }
}

/* Matches .support-grid, so the four section hubs share one card size. */
.wim-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
@media (max-width: 700px) {
  .wim-grid { grid-template-columns: 1fr; }
}
.wim-card {
  display: flex;
  flex-direction: column;
  padding: 32px 28px;   /* same as .support-card */
  border-radius: var(--radius-lg, 12px);
  border: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  background: var(--white);
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  transition: box-shadow .2s, transform .2s;
}
.wim-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.1);
  transform: translateY(-2px);
}
.wim-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  flex-shrink: 0;
}
.wim-card--blue .wim-card__icon  { background: var(--ocpl-blue-light); color: var(--ocpl-blue); }
.wim-card--green .wim-card__icon { background: var(--success-soft); color: var(--success); }
.wim-card--gold .wim-card__icon  { background: var(--highlight-soft); color: var(--highlight-text); }
.wim-card--red .wim-card__icon   { background: var(--danger-soft); color: var(--danger); }
.wim-card__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 8px;
}
.wim-card--blue  .wim-card__label { color: var(--ocpl-blue); }
.wim-card--green .wim-card__label { color: var(--success); }
.wim-card--gold  .wim-card__label { color: var(--highlight-text); }
.wim-card--red   .wim-card__label { color: var(--danger); }
.wim-card__heading {
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 12px;
  line-height: 1.3;
}
.wim-card__desc {
  font-size: .9rem;
  color: var(--text-mid, #555);
  line-height: 1.65;
  flex: 1;
  margin-bottom: 24px;
}
.wim-card__cta {
  font-size: .85rem;
  font-weight: 700;
}
.wim-card--blue  .wim-card__cta { color: var(--ocpl-blue); }
.wim-card--green .wim-card__cta { color: var(--success); }
.wim-card--gold  .wim-card__cta { color: var(--highlight-text); }
.wim-card--red   .wim-card__cta { color: var(--danger); }

/* ── Why It Matters tabs (home page) ─────────────────────── */

/* Homepage band rhythm: navy hero / white intro / pale events / navy
   support / pale staff quotes / WHITE gateway / navy advocacy / pale
   subscribe. No two adjacent sections share a color, so each logical
   block reads as its own band. The gateway went white because it sat
   pale directly under the pale staff quotes and the two merged. */
.home-wim { background: var(--white); }

/* Namespaced: .wim-grid/.wim-card belong to the Why It Matters PAGE's
   colored cards. These homepage cards briefly reused the names and were
   silently restyling that page. */
.home-wim-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 28px;
}
@media (max-width: 860px) {
  .home-wim-grid { grid-template-columns: 1fr; }
}
.home-wim-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 10px);
  padding: 26px 26px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.home-wim-card__kicker {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ocpl-blue);
  margin: 0 0 8px;
}
.home-wim-card .wim-panel__cta { margin-top: auto; }


.wim-panel__heading {
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 12px;
  color: var(--heading);
}
.wim-panel__body {
  font-size: .95rem;
  line-height: 1.7;
  color: var(--text-mid);
  margin-bottom: 20px;
}
.wim-panel__cta { align-self: flex-start; }


/* ── Funding gap: expandable details ─────────────────────── */
.fg-more { margin-top: 12px; }
.fg-more__toggle {
  cursor: pointer;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ocpl-blue);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.fg-more__toggle::-webkit-details-marker { display: none; }
.fg-more__toggle::before {
  content: '▸';
  font-size: .75rem;
  transition: transform .2s;
}
details[open] > .fg-more__toggle::before { transform: rotate(90deg); }
.fg-more__body {
  margin-top: 10px;
  padding: 14px 16px;
  background: var(--ocpl-blue-pale, #eef4fb);
  border-left: 3px solid var(--ocpl-blue);
  border-radius: 0 6px 6px 0;
  font-size: .875rem;
  line-height: 1.65;
  color: var(--text-mid, #555);
}
.fg-more__body p { margin: 0 0 8px; }
.fg-more__body p:last-child { margin-bottom: 0; }
.fg-more--method .fg-more__toggle { color: var(--text-mid, #666); }
.fg-more--method .fg-more__body { background: var(--off-white); border-color: var(--border); }

/* ============================================================
   v1.3 POLISH LAYER — appended 2026-04
   Keeps all existing class names; refines rhythm, motion,
   focus, forms, contrast, and a few weak spots.
   ============================================================ */

/* (Font-stack hardening + polish tokens moved to assets/css/tokens.css.) */

/* Motion system — rules of use:
   --transition-fast (0.14s ease)       color/border/opacity feedback on small
                                        controls (links, pills, icons)
   --transition (0.2s ease-in-out)      hover states on buttons and cards
   --transition-slow (0.32s ease-in-out) panels, drawers, position changes
   --ease-out                           anything ENTERING (reveals) — fast
                                        start, gentle settle
   --ease-in-out                        anything MOVING while visible
   Durations never exceed 0.6s except the stat count-up (1.2s, data
   storytelling). Animate transform/opacity; color/border transitions are
   fine (tiny repaint areas); never animate width/height/margin (layout). */

/* ── Smoother default body rendering ────────────────────────── */
body {
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  text-rendering: optimizeLegibility;
}

/* Balance headline wrapping where supported */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* ── Selection ──────────────────────────────────────────────── */
::selection { background: var(--ocpl-orange-light); color: var(--ocpl-orange-dark); }

/* ── Links: underline-on-hover refinement with offset ───────── */
a {
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* ── Universal focus polish (keyboard only) ─────────────────── */
:focus-visible {
  outline: 3px solid var(--ocpl-blue);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.btn:focus-visible,
.action-pill:focus-visible,
.fp-filter-pill:focus-visible,
.bp-tab:focus-visible {
  outline-offset: 3px;
  box-shadow: var(--focus-ring);
}

/* ── Buttons: unify height + optical polish ─────────────────── */
.btn {
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transform: translateZ(0);
  will-change: transform;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); transition-duration: 0.05s; }
.btn--filled { box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 2px 6px rgba(10,35,66,.08); }
.btn--filled:hover { box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 6px 14px rgba(10,35,66,.14); }
.btn--action { box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 3px 10px rgba(181,96,22,.22); }
.btn--action:hover { box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 8px 18px rgba(181,96,22,.32); }

/* Disabled state (site-wide) */
.btn[disabled],
.btn[aria-disabled="true"],
button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* ── Global form element baseline (applies where page didn't
      already specify — theme previously only styled specific
      form containers). Safe: opt-in via .prose--page or any
      unspecified form element. ───────────────────────────────── */
input[type=text], input[type=email], input[type=tel],
input[type=number], input[type=url], input[type=search],
input[type=date], input[type=password], textarea, select {
  font: inherit;
  color: var(--text);
  accent-color: var(--ocpl-blue);
}
textarea { min-height: 96px; line-height: 1.55; }

input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none;
  border-color: var(--ocpl-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ocpl-blue) 22%, transparent);
}

/* Native checkbox/radio accent */
input[type=checkbox], input[type=radio] { accent-color: var(--ocpl-blue); }

/* ── Site header: subtle scroll lift ────────────────────────── */
.site-header {
  transition: box-shadow var(--transition), background var(--transition);
  backdrop-filter: saturate(1.4);
}
.site-header.is-scrolled { box-shadow: 0 4px 18px rgba(10,35,66,.10); }

/* ── Nav hover underline travels in ─────────────────────────── */
.site-nav > ul > li > a {
  position: relative;
  overflow: hidden;
}
.site-nav > ul > li > a::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 2px;
  background: var(--ocpl-orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s var(--ease-out);
}
.site-nav > ul > li > a:hover::after,
.site-nav > ul > li.current-menu-item > a::after { transform: scaleX(1); }
.site-nav > ul > li > a:hover,
.site-nav > ul > li.current-menu-item > a { box-shadow: none; }

/* ── Cards: unified hover motion ────────────────────────────── */
.program-card,
.board-card,
.booksale-card,
.vol-role-card,
.fp-card,
.drive-card,
.fp-strip-card,
.hp-event-card,
.adopt-card,
.donate-other-card {
  will-change: transform;
}
.program-card:hover,
.board-card:hover,
.booksale-card:hover,
.vol-role-card:hover,
.fp-card:hover,
.drive-card:hover,
.fp-strip-card:hover,
.hp-event-card:hover,
.adopt-card:hover {
  transition-timing-function: var(--ease-out);
}

/* ── Utility-bar contrast bump on small screens ─────────────── */
@media (max-width: 720px) {
  .site-utility-nav, .site-utility-nav ul { gap: 10px; }
  .site-utility-nav a,
  .site-utility-bar__brandlink a { font-size: var(--fs-xs); }
}

/* ── Mobile nav backdrop ────────────────────────────────────── */
.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10,35,66,.5);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  z-index: 150;
  transition: opacity 0.25s var(--ease-out);
}
.mobile-nav.is-open ~ .mobile-nav-backdrop,
.mobile-nav-backdrop.is-visible { opacity: 1; pointer-events: auto; }

/* ── Section headings: refined rhythm ───────────────────────── */
.section-heading { margin-bottom: 44px; }
.section-heading h2 { margin-bottom: 10px; }
.section-heading p { line-height: 1.65; }

/* ── Impact cards: softer hover ─────────────────────────────── */
.impact-card { transition: background 0.25s var(--ease-out), transform 0.25s var(--ease-out), border-color 0.25s var(--ease-out); }
.impact-card:hover { border-color: rgba(255,255,255,.22); }

/* ── Program card image zoom ────────────────────────────────── */
.program-card__img img {
  transition: transform 0.5s var(--ease-out);
}
.program-card:hover .program-card__img img { transform: scale(1.04); }

/* ── Board card photo: gentle tilt hint ─────────────────────── */
.board-card { transition: box-shadow 0.25s var(--ease-out), transform 0.25s var(--ease-out), border-color 0.25s var(--ease-out); }

/* ── Footer link underline polish ───────────────────────────── */
.site-footer__links a { text-underline-offset: 3px; }

/* ── Page hero: subtle bottom gradient for depth ────────────── */
.page-hero { position: relative; overflow: hidden; }
.page-hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 80px;
  background: linear-gradient(to top, rgba(0,0,0,.18), rgba(0,0,0,0));
  pointer-events: none;
}

/* ── Prose refinements ──────────────────────────────────────── */
.prose--page h2 { font-size: clamp(1.35rem, 2.8vw, 1.75rem); }
.prose--page h3 { font-size: clamp(1.05rem, 2vw, 1.25rem); }
.prose--page p  { line-height: 1.75; }
.prose--page a  { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ocpl-blue) 35%, transparent); }
.prose--page a:hover { text-decoration-color: currentColor; }
.prose--page blockquote {
  border-left: 3px solid var(--ocpl-orange);
  padding: 4px 0 4px 20px;
  margin: 24px 0;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--ocpl-blue);
  font-style: italic;
}
.prose--page code {
  background: var(--ocpl-blue-pale);
  color: var(--ocpl-blue-dark);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.9em;
}

/* (board-portal table zebra/hover moved to assets/css/admin.css) */

/* (board-portal active-nav refinement moved to assets/css/admin.css) */

/* ── Hero slider buttons: bigger hit area on touch ──────────── */
@media (hover: none) {
  .hero-slider__btn { width: 44px; height: 44px; }
}

/* ── Adopt-hero CTA: ensure sufficient weight ───────────────── */
.adopt-hero__cta { box-shadow: 0 4px 16px rgba(0,0,0,.15); }

/* ── Campaign progress bar shimmer (subtle, respects PRM) ───── */
.drive-progress__bar {
  background-size: 200% 100%;
  animation: fpShimmer 3.2s linear infinite;
}
@keyframes fpShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .drive-progress__bar { animation: none; }
}

/* ── FAQ chevron rotate on open ─────────────────────────────── */
.drive-faq-item--open .drive-faq-item__icon { transform: rotate(45deg); }


/* ── Utility: truncate ──────────────────────────────────────── */
.u-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.u-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Print: sensible defaults ───────────────────────────────── */
@media print {
  .site-header, .site-footer, .site-utility-bar,
  .mobile-nav, .nav-toggle, .hero-slider__btn,
  .hero-slider__dots, .bp-nav,
  .fp-filter-wrap, .adopt-share, .members-cta {
    display: none !important;
  }
  body { background: var(--white); color: #000; font-size: 11pt; }
  a { color: #000; text-decoration: underline; }
  .home-hero, .page-hero { background: var(--white) !important; color: #000 !important; }
  .home-hero h1, .home-hero .hero-heading, .page-hero__inner h1 { color: #000 !important; text-shadow: none !important; }
  .impact-card, .bp-card, .fp-card, .program-card { break-inside: avoid; }
}

/* ── Homepage restructure (2026-07 reviewed pass) ───────────── */
/* Larger body type in the introduction; the old size read as fine print. */
.prose--home p { font-size: 1.06rem; line-height: 1.75; }
.prose--home a { color: var(--ocpl-blue); font-weight: 600; }

/* Hero: textual slide position + explicit pause control */
.hero-slider__count {
  color: rgba(255,255,255,.85);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  margin-left: 10px;
  align-self: center;
}
.hero-slider__pause {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 10px;
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 999px;
  background: rgba(0,0,0,.25);
  color: var(--white);
  font-size: var(--fs-xs);
  cursor: pointer;
}
.hero-slider__pause:hover, .hero-slider__pause:focus-visible { background: rgba(0,0,0,.45); border-color: var(--white); }

/* Coming Up: at most two compact cards; a single card stays modest.
   Pale band so it separates from the white introduction above it. */
.home-section--events {
  background: var(--ocpl-blue-pale);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.home-section--events .section-heading { margin-bottom: 24px; }
.hp-event-list--single { max-width: 660px; margin: 0 auto; }
.hp-events-more { text-align: center; margin: 22px 0 0; font-size: .95rem; }
.hp-events-more a, .hp-events-none a { color: var(--ocpl-blue); font-weight: 600; }
.hp-events-none { text-align: center; color: var(--text-mid); max-width: 560px; margin: 0 auto; }

/* Support section: stat labels carry their timeframe; the note under
   them says where the numbers come from. */
.impact-agg-row--home { margin-top: 8px; margin-bottom: 20px; }
.impact-data-note {
  text-align: center;
  color: rgba(255,255,255,.65);
  font-size: .84rem;
  margin: 0 0 26px;
}
.impact-links { text-align: center; margin: 0 0 8px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.home-section--impact .impact-links .btn--outline { border-color: rgba(255,255,255,.55); color: var(--white); }
.home-section--impact .impact-links .btn--outline:hover { background: rgba(255,255,255,.15); border-color: var(--white); color: var(--white); }

/* (The "Why we need you" ask block was removed from the impact band;
   its home-ask styles went with it.) */

/* Gateway cards: arrow links instead of a row of four filled buttons */
.home-wim-card__link {
  display: inline-block;
  margin-top: 4px;
  color: var(--ocpl-blue);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
}
.home-wim-card__link:hover { text-decoration: underline; }

/* Advocacy: the one featured voice, folded under the campaign numbers */
.home-advocacy__quote {
  max-width: 640px;
  margin: 40px auto 0;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.25);
}
.home-advocacy__quote p {
  font-size: 1.15rem;
  line-height: 1.7;
  font-style: italic;
  color: rgba(255,255,255,.92);
  margin: 0 0 10px;
}
.home-advocacy__quote cite { font-style: normal; font-size: .9rem; color: rgba(255,255,255,.7); }
.home-advocacy__stories-link { margin: 14px 0 0; font-size: .95rem; }
.home-advocacy__stories-link a { color: var(--white); font-weight: 600; }

/* Newsletter: the form was visually small next to everything above it */
.home-subscribe .home-subscribe__text h2 { font-size: 1.7rem; }
.home-subscribe .home-subscribe__text p { font-size: 1.02rem; }
.home-subscribe .focpl-sub-fields input {
  min-height: 52px;
  font-size: 1.02rem;
  padding: 12px 16px;
}
.home-subscribe .focpl-sub-fields .btn { min-height: 52px; font-size: 1rem; }
.home-subscribe .focpl-sub-fine { font-size: .88rem; }

/* ── Motion: unify card entrance when becoming visible ──────── */
/* IntersectionObserver-driven for every browser (polish-v2.js adds
   .needs-io, then .is-revealed on intersection, with a settle failsafe).
   This used to be animation-timeline: view() in Chrome, but scroll-driven
   animations render at their START state (opacity 0) in full-page
   screenshot captures, which blanked whole homepage sections in shared
   images. Cards are visible by default; they only hide when the script
   opts them in, so no-JS and reduced-motion readers always see content. */
@media (prefers-reduced-motion: no-preference) {
  .fp-card.needs-io, .program-card.needs-io, .drive-card.needs-io,
  .adopt-card.needs-io, .board-card.needs-io {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  }
  .needs-io.is-revealed { opacity: 1; transform: none; }
}
@media print {
  .needs-io { opacity: 1 !important; transform: none !important; }
}

/* ── Inputs: one focus treatment everywhere ─────────────────── */
/* Communicates "you are here." Baseline for every text-entry control;
   page-specific rules that already match this can be retired over time. */
input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus,
input[type=number]:focus, input[type=date]:focus, input[type=search]:focus,
input[type=password]:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--ocpl-blue);
  box-shadow: var(--focus-ring);
}
input, select, textarea {
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* ── Form status: acknowledge success and error ─────────────── */
.focpl-contact__status.is-success {
  color: var(--success);
  font-weight: 600;
  animation: statusIn 0.35s var(--ease-out);
}
.focpl-contact__status.is-error {
  color: var(--danger);
  font-weight: 600;
  animation: statusNudge 0.3s ease-in-out;
}
@keyframes statusIn    { from { opacity: 0; transform: translateY(6px); } }
@keyframes statusNudge { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

/* ── Busy buttons: the Stripe hand-off has a pulse ──────────── */
/* "Money is in motion — don't click again." Spinner is currentColor,
   so it works on filled, outline, and action buttons alike. */
.btn.is-busy { pointer-events: none; opacity: .85; }
.btn.is-busy::after {
  content: ""; display: inline-block; margin-left: 8px;
  width: 0.9em; height: 0.9em; vertical-align: -0.12em;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  animation: btnSpin 0.7s linear infinite;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }

/* ── Card deckle: catalog-card rule line ────────────────────── */
/* ::before instead of border-top so the card's box size never changes;
   overflow:hidden on the cards clips it to the radius. */
.fp-card, .drive-card { position: relative; }
.fp-card::before, .drive-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--ocpl-blue-light);
  transition: background-color var(--transition-fast);
  z-index: 1;
}
.fp-card:hover::before, .drive-card:hover::before { background: var(--ocpl-blue); }

/* ── The date-due stamp ─────────────────────────────────────── */
/* Fires on success confirmations (donation, membership, naming,
   contact). A round rubber stamp — org name curved around the rim,
   label + date across the middle — drawn by focpl_stamp() in
   focpl-core as inline SVG; this wrapper supplies ink, tilt, and
   the thunk. */
.focpl-stamp {
  display: inline-block;
  width: clamp(112px, 15vw, 138px);
  margin: 6px 0;
  color: rgba(0, 63, 99, .78); /* the ink — SVG strokes/fills use currentColor */
  transform: rotate(-6deg);
  animation: stampIn 0.45s var(--ease-out) both;
}
.focpl-stamp svg {
  display: block; width: 100%; height: auto;
  font-family: var(--font-sans);
}
@keyframes stampIn {
  0%   { opacity: 0; transform: rotate(-11deg) scale(1.35); }
  60%  { opacity: 1; transform: rotate(-5deg) scale(0.97); }
  100% { opacity: 1; transform: rotate(-6deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .needs-io { opacity: 1 !important; transform: none !important; transition: none !important; }
  .focpl-contact__status.is-success,
  .focpl-contact__status.is-error,
  .focpl-stamp { animation: none; }
  .btn.is-busy::after { animation: none; border-right-color: currentColor; opacity: .4; }
}

/* ── High-contrast mode support ─────────────────────────────── */
@media (prefers-contrast: more) {
  /* (token overrides for this mode live in assets/css/tokens.css) */
  .btn--outline { border-width: 2.5px; }
  .program-card, .board-card, .fp-card, .drive-card { border-width: 1.5px; }
}

/* ============================================================
   SITE FOUNDATIONS: contact, search, 404
   ============================================================ */
.contact-page .container {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  align-items: start;
}
@media (max-width: 860px) {
  .contact-page .container { grid-template-columns: 1fr; }
}
.contact-page__form h2 { margin-bottom: 18px; }
.contact-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.contact-card h3 { font-size: 0.92rem; color: var(--ocpl-blue-dark); margin-bottom: 6px; }
.contact-card p { margin: 0; font-size: 0.9rem; line-height: 1.6; }
.contact-card--muted { background: var(--off-white); }

.focpl-contact { max-width: 640px; }
.focpl-contact label { display: block; font-weight: 700; font-size: 0.88rem; margin-bottom: 14px; }
.focpl-contact input[type="text"],
.focpl-contact input[type="email"],
.focpl-contact select,
.focpl-contact textarea {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  font-weight: 400;
  background: var(--white);
}
.focpl-contact textarea { resize: vertical; }
.focpl-contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .focpl-contact__row { grid-template-columns: 1fr; } }
.focpl-contact__hp { position: absolute !important; left: -9999px !important; }
.focpl-contact__status { margin-top: 12px; font-size: 0.9rem; color: var(--text-mid); min-height: 1.2em; }

.focpl-searchform { display: flex; flex-wrap: wrap; gap: 8px; max-width: 460px; }
/* Wraps the button below the field wherever the column is too narrow for
   both (the footer's Help & Info column) — the placeholder stays whole. */
.focpl-searchform label { flex: 1 1 160px; }
.focpl-searchform input[type="search"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  background: var(--white);
}
/* Site search where every visitor can find it: the footer's Help & Info
   column (dark footer needs a light-on-blue field) and the top of the
   mobile drawer (white panel, base styles apply). */
.site-footer__links .focpl-searchform { margin-top: 14px; }
.site-footer .focpl-searchform input[type="search"] {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--white);
}
.site-footer .focpl-searchform input[type="search"]::placeholder { color: rgba(255, 255, 255, 0.75); }
.mobile-nav .focpl-searchform { margin: 4px 0 16px; }
.focpl-search-again { margin-bottom: 22px; }
.focpl-search-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.focpl-search-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px;
  font-size: 0.85rem; color: var(--text-mid); text-decoration: none; background: var(--white);
}
.focpl-search-chip span { font-size: 0.78rem; color: var(--text-mid); font-variant-numeric: tabular-nums; }
.focpl-search-chip:hover { border-color: var(--ocpl-blue); color: var(--ocpl-blue); }
.focpl-search-chip.is-active { background: var(--ocpl-blue); border-color: var(--ocpl-blue); color: var(--white); }
.focpl-search-chip.is-active span { color: rgba(255, 255, 255, 0.8); }
.focpl-search-count { font-size: 0.88rem; color: var(--text-mid); margin-bottom: 18px; }
.focpl-search-result__meta { font-size: 0.8rem; color: var(--text-mid); margin-left: 10px; }
.focpl-search-result p mark { background: var(--highlight-fill); border-radius: 2px; padding: 0 2px; }
.focpl-search-popular { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.focpl-search-popular a {
  display: inline-block; padding: 7px 14px; border: 1px solid var(--border);
  border-radius: var(--radius); text-decoration: none; background: var(--white);
}
.focpl-search-popular a:hover { border-color: var(--ocpl-blue); }
.focpl-search-tools { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--light-gray); }
.focpl-search-tools h2 { font-size: 1.02rem; margin-bottom: 10px; }
.focpl-search-tools ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.focpl-search-tools li { font-size: 0.92rem; color: var(--text-mid); }

/* Pagination — paginate_links(type=list) on search results and archives.
   The wrapper ul and its children both carry .page-numbers, so children
   are addressed as ul.page-numbers > li > .page-numbers. */
ul.page-numbers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
ul.page-numbers li { margin: 0; }
ul.page-numbers > li > .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--text);
  text-decoration: none;
  font-size: 0.92rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
ul.page-numbers > li > a.page-numbers:hover {
  border-color: var(--ocpl-blue);
  color: var(--ocpl-blue);
}
ul.page-numbers > li > .page-numbers.current {
  background: var(--ocpl-blue);
  border-color: var(--ocpl-blue);
  color: var(--white);
  font-weight: 700;
}
ul.page-numbers > li > .page-numbers.dots {
  border: 0;
  background: none;
  min-width: 24px;
  padding: 0;
  color: var(--text-mid);
}
@media (max-width: 480px) {
  ul.page-numbers > li > .page-numbers { min-width: 36px; height: 36px; padding: 0 10px; }
}
.focpl-search-results { list-style: none; margin: 0; padding: 0; }
.focpl-search-result {
  border-bottom: 1px solid var(--light-gray);
  padding: 18px 0;
}
.focpl-search-result__type {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ocpl-blue);
  background: var(--ocpl-blue-pale);
  border-radius: 999px;
  padding: 2px 10px;
}
.focpl-search-result h2 { font-size: 1.08rem; margin: 8px 0 6px; }
.focpl-search-result p { margin: 0; font-size: 0.9rem; color: var(--text-mid); }

.notfound__search { margin-bottom: 34px; }
.notfound__search h2, .notfound__links h2 { font-size: 1.1rem; margin-bottom: 14px; }
.notfound__links ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.notfound__links a {
  display: block;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-weight: 700;
  color: var(--ocpl-blue);
  text-decoration: none;
}
.notfound__links a:hover { background: var(--ocpl-blue-pale); }


/* ── FAQ accordion (/faq/) ─────────────────────────────── */
.faq-group { margin-bottom: 28px; }
.faq-group h2 { font-size: 1.15rem; margin-bottom: 10px; }
.faq-item { border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); margin-bottom: 8px; }
.faq-item summary { cursor: pointer; font-weight: 700; padding: 13px 16px; list-style: none; position: relative; padding-right: 38px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--ocpl-blue); font-size: 1.2rem; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item div { padding: 0 16px 14px; line-height: 1.65; }
.faq-item div p { margin: 0 0 10px; }

/* ── Newsletter single: uniform logo masthead ──────────── */
.nl-logo-mast {
  text-align: center;
  margin: 0 0 26px;
}
.nl-logo-mast img {
  display: inline-block;
  max-width: 200px;
  height: auto;
}

/* ── Newsletter single: older/newer pager ──────────────── */
.nl-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 34px;
}
.nl-pager__link {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  padding: 14px 18px;
  text-decoration: none;
  transition: border-color var(--transition), background-color var(--transition);
}
.nl-pager__link:hover { border-color: var(--ocpl-blue); background: var(--ocpl-blue-pale); text-decoration: none; }
.nl-pager__link--newer { text-align: right; }
.nl-pager__dir {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-mid);
  margin-bottom: 4px;
}
.nl-pager__title {
  display: block;
  font-weight: 700;
  color: var(--ocpl-blue);
  font-size: 0.92rem;
  line-height: 1.4;
}
.nl-pager__date {
  display: block;
  font-size: 0.78rem;
  color: var(--text-light);
  margin-top: 3px;
}
@media (max-width: 600px) {
  .nl-pager { grid-template-columns: 1fr; }
  .nl-pager__link--newer { text-align: left; }
}

/* ── Newsletter singles: tame imported wordpress.com markup ──
   Jetpack tiled galleries carry inline fixed widths/heights and floats
   that only work with Jetpack's own CSS. Neutralize the inline sizing
   and let the images flow as a simple wrapping row; clear any floats
   (alignleft/alignright era) before the pager and footer. */
.single-focpl_newsletter .prose .tiled-gallery {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  width: auto !important;
  height: auto !important;
  margin: 18px 0;
}
.single-focpl_newsletter .prose .tiled-gallery .gallery-row,
.single-focpl_newsletter .prose .tiled-gallery .gallery-group {
  display: contents !important;
}
.single-focpl_newsletter .prose .tiled-gallery .tiled-gallery-item,
.single-focpl_newsletter .prose .tiled-gallery img {
  float: none !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  max-width: min(100%, 320px);
  margin: 0 !important;
  border-radius: var(--radius);
}
.single-focpl_newsletter .prose img.alignleft,
.single-focpl_newsletter .prose img.alignright {
  float: none;
  display: block;
  margin: 14px 0;
  max-width: min(100%, 420px);
}
.single-focpl_newsletter .prose::after {
  content: "";
  display: table;
  clear: both;
}
.nl-pager,
.single-focpl_newsletter .post-footer {
  clear: both;
}

/* ── Friends events: collapsible past-year groups ─────────── */
/* Past archive band: quiet off-white so a decade of history reads as a
   separate chapter from the upcoming list; white accordions sit on it. */
.events-past-section {
  background: var(--off-white);
  border-top: 1px solid var(--border);
}
.events-archive-tools { display: flex; gap: 10px; justify-content: flex-end; margin: 0 0 12px; }
.events-archive-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ocpl-blue);
  cursor: pointer;
}
.events-archive-toggle:hover { border-color: var(--ocpl-blue); background: var(--ocpl-blue-pale); }
.events-archive-note { margin: 16px 0 0; font-size: .8rem; color: var(--text-mid); text-align: center; }
details.events-year {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  margin-bottom: 10px;
}
details.events-year > summary.events-year__heading {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--ocpl-blue-dark);
}
details.events-year > summary::-webkit-details-marker { display: none; }
details.events-year > summary .events-year__count {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-mid);
}
details.events-year[open] > summary.events-year__heading {
  border-bottom: 1px solid var(--light-gray);
}
details.events-year .events-list {
  padding: 16px 18px;
}

/* ============================================================
   EDITORIAL LAYER — "civic editorial" pilot (Our Impact, 2026-08)
   ------------------------------------------------------------
   Left-aligned opener, a divided evidence row, sourcing styled as
   a feature (.src), index rows instead of a card grid, and one
   closing ask. Rules of the pattern:
     · a card is an independently actionable object — none here;
     · hover means clickable — only the index rows respond; the
       evidence figures, notes and headings never lift or tint;
     · one motif: the 2px blue editorial rule (opener, evidence
       row, source notes, captions, closing action). No wave;
     · serif is a voice — the H1, the closing heading, and quoted
       archive material. Everything else is Open Sans, sentence
       case;
     · sizes sit on the small-text ramp; nothing under --fs-xs, and
       muted text on any tinted surface is --text-mid.
   Consumers: page-our-impact.php and the page-ed-*.php hub versions,
   all rendered by inc/editorial.php.
   STATUS (2026-08-18): RETAINED AS AN ASSET, NOT IN USE. The board kept
   the existing hub pages after the comparison; the editorial pages sit
   as drafts on dev. Do not purge this block as dead CSS — it is the
   pattern's only home. To use it: publish a page on one of the
   editorial templates (or write a new one on focpl_ed_render()).
   ============================================================ */
.ed-page { padding: 36px 0 var(--section-pad); text-align: left; }

/* ── 1. Opener: asymmetric, closed by the rule ─────────────── */
.ed-opener {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  align-items: end;
  padding-bottom: 22px;
  border-bottom: 2px solid var(--ocpl-blue);
}
.ed-eyebrow {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ocpl-orange);
}
.ed-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.2vw, 1.94rem);   /* ≤ 31px */
  line-height: 1.22;
  letter-spacing: -.015em;
  text-transform: none;
  color: var(--ocpl-blue-dark);
}
.ed-lede {
  margin: var(--space-4) 0 0;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--text-mid);
  max-width: 34em;
}
.ed-opener__aside {
  padding-left: 20px;
  border-left: 1px solid var(--border);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-mid);
}
.ed-opener__aside-label {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-mid);
}
.ed-opener__aside-list { list-style: none; margin: 0; padding: 0; }
.ed-opener__aside-list li { padding: 3px 0; }

/* ── 2. Evidence row: divided, not carded. Nothing here is a link,
       so nothing here has a hover, a shadow, or a lift. ────────── */
.ed-evidence { margin-top: 40px; }
.ed-evidence__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--ocpl-blue);
}
.ed-evidence__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ed-evidence__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ed-evidence__row--1 { grid-template-columns: minmax(0, 1fr); }
.ed-evidence__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 20px 22px 18px;
  border-left: 1px solid var(--border);
}
.ed-evidence__item:first-child { border-left: 0; padding-left: 0; }
.ed-evidence__num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.7rem, 2.6vw, 2.06rem);   /* ≈ 33px at desktop */
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ocpl-blue);
  font-variant-numeric: tabular-nums;
}
.ed-evidence__num small {
  font-size: .5em;
  font-weight: 700;
  letter-spacing: 0;
  vertical-align: super;
  margin-right: .06em;
}
.ed-evidence__label { font-size: var(--fs-sm); line-height: 1.4; color: var(--text-mid); }
.ed-evidence__period {
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-light);          /* on white only — 4.6:1 */
}

/* ── 3. Source notes and provenance ─────────────────────────── */
.ed-sources { margin-top: 14px; }
.src {
  display: flex;
  gap: 11px;
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-mid);
}
.src::before { content: ""; flex: none; width: 2px; background: var(--ocpl-blue); border-radius: 1px; }
.src b { color: var(--text); font-weight: 700; }
.src__list { list-style: none; margin: 0; padding: 0; max-width: 72em; }   /* one source per line, not one long paragraph */
.src__list li { padding: 1px 0; }
.src a { color: var(--ocpl-blue); text-decoration: underline; text-underline-offset: 2px; }
.src--block {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px 15px;
}
.src + .src, .src + .ed-details { margin-top: var(--space-3); }

/* Provenance tags — the status families, one meaning each. */
.ed-tag {
  display: inline-block;
  vertical-align: middle;
  margin-left: 2px;
  padding: 1px 7px;
  border: 1px solid;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}
.ed-tag--ok     { background: var(--success-soft); border-color: var(--success-border); color: var(--success-dark); }
.ed-tag--review { background: var(--warning-soft); border-color: var(--warning-border); color: var(--warning-dark); }
.ed-tag--none   { background: var(--light-gray);   border-color: var(--border);         color: var(--text-mid); }

/* Methodology disclosure — no JS; the caret is CSS. */
.ed-details {
  margin-top: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
}
.ed-details > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;                  /* tap target */
  padding: 10px 15px;
  list-style: none;
  cursor: pointer;
  border-radius: var(--radius);
  background: var(--off-white);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ocpl-blue);
}
.ed-details > summary::-webkit-details-marker { display: none; }
.ed-details > summary::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin: 0 4px 0 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--transition-fast);
}
.ed-details[open] > summary { border-radius: var(--radius) var(--radius) 0 0; border-bottom: 1px solid var(--border); }
.ed-details[open] > summary::before { transform: translateY(-2px) rotate(45deg); }
.ed-details > summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ed-details__body { padding: 16px 18px 18px; }
.ed-details__body p { margin: 0 0 var(--space-3); font-size: var(--fs-md); line-height: 1.6; color: var(--text); max-width: 44em; }
.ed-details__body p:last-child { margin-bottom: 0; }
.ed-details__body .src--block { margin-top: var(--space-4); max-width: none; }

/* Year-by-year provenance table: gaps are shown, never filled. */
.ed-prov-scroll { overflow-x: auto; margin: var(--space-4) 0; }
.ed-prov { width: 100%; max-width: 44em; border-collapse: collapse; font-size: var(--fs-sm); color: var(--text); }   /* a reading measure, not a full-bleed grid */
.ed-prov caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 8px;
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-mid);
}
.ed-prov th, .ed-prov td {
  padding: 7px 14px 7px 0;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.ed-prov thead th {
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-mid);
  border-bottom: 2px solid var(--ocpl-blue);
}
.ed-prov tbody th { width: 4em; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.ed-prov__val { display: inline-block; min-width: 4.5em; font-variant-numeric: tabular-nums; }
.ed-prov__val--none { color: var(--text-mid); }

/* ── Photograph with a real caption, or the archive line ───── */
.ed-photo { margin: 40px 0 0; max-width: 44em; }   /* the story column, like the archive block — not a hero */
.ed-photo__img { display: block; width: 100%; height: auto; max-height: 460px; object-fit: cover; }
.ed-caption {
  margin-top: 10px;
  padding-left: 10px;
  border-left: 2px solid var(--ocpl-blue);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-mid);
  max-width: 44em;
}
.ed-archive {
  margin: 40px 0 0;
  padding: 22px 26px;
  max-width: 44em;
  background: var(--ocpl-blue-pale);
  border-left: 3px solid var(--ocpl-blue);
}
.ed-archive__slug {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-mid);
}
.ed-archive__body p { margin: 0; font-family: var(--font-serif); font-size: 1.05rem; line-height: 1.6; color: var(--ocpl-blue-dark); }
.ed-archive__body p + p { margin-top: 10px; }
.ed-archive__body .ed-archive__cite { font-family: var(--font-heading); font-size: var(--fs-xs); font-weight: 600; color: var(--text-mid); }
.ed-archive__body a { color: var(--ocpl-blue); text-decoration: underline; text-underline-offset: 2px; }

/* ── 4. Index rows: the row IS the link, so hover lives here ── */
.ed-index { margin-top: 48px; }
.ed-index__row {
  display: grid;
  grid-template-columns: 38px 1fr 150px;
  gap: 20px;
  align-items: baseline;
  padding: 17px 0;
  border-top: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--transition-fast);
}
.ed-index__row:last-child { border-bottom: 1px solid var(--border); }
.ed-index__row:hover,
.ed-index__row:focus-visible { background: var(--ocpl-blue-pale); color: inherit; text-decoration: none; }
.ed-index__row:hover .ed-index__title,
.ed-index__row:focus-visible .ed-index__title { text-decoration: underline; text-underline-offset: 2px; }
.ed-index__row:hover .ed-index__ord,
.ed-index__row:focus-visible .ed-index__ord { color: var(--ocpl-orange-dark); }   /* --ocpl-orange is 4.2:1 on the tint */
.ed-index__ord {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-xs);
  color: var(--ocpl-orange);
  font-variant-numeric: tabular-nums;
}
.ed-index__body { display: block; min-width: 0; }
.ed-index__title { display: block; font-family: var(--font-heading); font-weight: 700; font-size: .97rem; line-height: 1.3; color: var(--ocpl-blue); }
.ed-index__desc { display: block; margin-top: 4px; font-size: var(--fs-sm); line-height: 1.55; color: var(--text-mid); max-width: 44em; }
.ed-index__meta {
  display: block;
  text-align: right;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--text-mid);              /* not --text-light: the row tints on hover */
  font-variant-numeric: tabular-nums;
}
.ed-index__meta-lead { display: block; font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-sm); }
.ed-index__meta-sub  { display: block; }

/* ── 5. Closing action: one ask ─────────────────────────────── */
.ed-close {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px 40px;
  align-items: center;
  margin-top: 48px;
  padding-top: 26px;
  border-top: 2px solid var(--ocpl-blue);
}
.ed-close__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.15rem, 2vw, 1.3rem);     /* ≈ 21px */
  line-height: 1.35;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--ocpl-blue-dark);
}
.ed-close__text { margin: 8px 0 0; font-size: var(--fs-md); line-height: 1.6; color: var(--text-mid); max-width: 44em; }
.ed-close .btn { justify-self: start; }             /* natural width when the grid stacks; never a full-width bar */
/* Closing ask as a form (the events hub's email list): the form takes the right column. */
.ed-close--form { grid-template-columns: minmax(0, 1fr) minmax(300px, 480px); align-items: start; }
.ed-close__form { text-align: left; }
.ed-close__form .focpl-sub-fine { font-size: var(--fs-xs); color: var(--text-mid); }

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .ed-opener { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .ed-opener__aside { padding-left: 0; border-left: 0; }
  .ed-evidence__row,
  .ed-evidence__row--3,
  .ed-evidence__row--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ed-evidence__item { border-left: 0; border-top: 1px solid var(--border); padding: 18px 16px 16px 0; }
  .ed-evidence__item:nth-child(-n+2) { border-top: 0; }
  .ed-evidence__item:nth-child(2n) { border-left: 1px solid var(--border); padding-left: 16px; padding-right: 0; }
  .ed-index__row { grid-template-columns: 38px 1fr; gap: 16px 20px; }
  .ed-index__meta { grid-column: 2; text-align: left; margin-top: -8px; }
  .ed-close, .ed-close--form { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 480px) {
  .ed-evidence__row,
  .ed-evidence__row--3,
  .ed-evidence__row--4,
  .ed-evidence__row--2 { grid-template-columns: minmax(0, 1fr); }
  .ed-evidence__item,
  .ed-evidence__item:nth-child(2n) { border-left: 0; padding-left: 0; padding-right: 0; }
  .ed-evidence__item:nth-child(-n+2) { border-top: 1px solid var(--border); }
  .ed-evidence__item:first-child { border-top: 0; }
  .ed-archive { padding: 18px 18px; }
  /* provenance table: value above its tag, so three columns fit without sideways scroll */
  .ed-prov th, .ed-prov td { white-space: normal; padding-right: 10px; vertical-align: top; }
  .ed-prov__val { display: block; min-width: 0; }
  .ed-tag { margin-left: 0; }
}

/* ── Homepage composition (page-ed-home.php) ────────────────────
   The same partials, in a homepage order: hero + campaign aside,
   a "now" strip, then headed blocks that reuse the evidence row
   and index rows. Serif only on the hero H1 and quoted material. */
.edh-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 32px 48px;
  align-items: center;
  padding-bottom: 28px;
  border-bottom: 2px solid var(--ocpl-blue);
}
.edh-hero--text { grid-template-columns: minmax(0, 1fr); }
.edh-hero__title { font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.12; letter-spacing: -.02em; max-width: 13em; }
.edh-hero .ed-lede { font-size: 1.05rem; max-width: 32em; }
.edh-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 24px; }
.edh-textlink {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--ocpl-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.edh-textlink:hover { color: var(--ocpl-blue-dark); }
.edh-hero__photo { margin: 0; max-width: none; }
.edh-hero__photo .ed-photo__img { aspect-ratio: 4 / 3; max-height: 440px; object-fit: cover; }
.edh-campaign {
  margin-top: 28px;
  padding: 14px 18px 16px;
  max-width: 34em;
  background: var(--off-white);
  border-left: 3px solid var(--ocpl-orange);
}
.edh-campaign__kicker { margin: 0 0 4px; font-family: var(--font-heading); font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--ocpl-orange-dark); }
.edh-campaign__title  { margin: 0 0 4px; font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; color: var(--ocpl-blue-dark); }
.edh-campaign p       { margin: 0; font-size: var(--fs-md); line-height: 1.55; color: var(--text-mid); }
.edh-campaign .edh-textlink { display: inline-block; margin-top: 8px; font-size: var(--fs-sm); }

/* "Now": three live cells, each a link, so each may respond to hover. */
.edh-now { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--border); }
.edh-now--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.edh-now--1 { grid-template-columns: minmax(0, 1fr); }
.edh-now__cell {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
  padding: 18px 22px;
  border-left: 1px solid var(--border);
  color: inherit; text-decoration: none;
  transition: background-color var(--transition-fast);
}
.edh-now__cell:first-child { border-left: 0; padding-left: 0; }
.edh-now__cell:hover, .edh-now__cell:focus-visible { background: var(--ocpl-blue-pale); color: inherit; text-decoration: none; }
.edh-now__cell:hover .edh-now__lead, .edh-now__cell:focus-visible .edh-now__lead { text-decoration: underline; text-underline-offset: 2px; }
/* On the live front page: "This Summer" after Our Impact — the season story under a centred heading. */
.home-section--summer { background: var(--white); border-top: 1px solid var(--border); }
.home-section--summer .section-heading { margin-bottom: 28px; }
.home-section--summer .edh-story { margin-top: 0; max-width: 1040px; margin-inline: auto; }
.home-section--summer .edh-story__title { font-size: 1.3rem; }
/* Support + impact merged into one section (the wave that separated them is gone). */
.home-section--possible { padding-bottom: 56px; }
.home-section--possible .program-grid { margin-bottom: 4px; }
/* One voice from inside the library, in place of the old carousel: a pull quote on the dark band.
   The first sentence carries the weight; the rest of the quote reads smaller under it. */
.hp-pull { max-width: 760px; margin: 28px auto 0; padding: 0 0 0 22px; border-left: 3px solid var(--ocpl-green); text-align: left; }
.hp-pull__quote { margin: 0; }
.hp-pull__quote p { margin: 0; font-family: var(--font-serif); line-height: 1.6; color: var(--white); }
.hp-pull__quote p.hp-pull__lead { font-size: clamp(1.1rem, 1.7vw, 1.3rem); }
.hp-pull__quote p.hp-pull__rest { margin-top: 6px; font-size: 0.95rem; color: var(--text-on-dark); }
.hp-pull__by   { margin: 10px 0 0; font-family: var(--font-heading); font-size: var(--fs-sm); font-weight: 600; color: var(--text-on-dark-muted); }
.hp-pull__more { margin: 6px 0 0; font-size: var(--fs-sm); }
.hp-pull__more a { color: var(--white); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.hp-impact-intro { max-width: 760px; margin: 30px auto 16px; text-align: center; font-size: 1rem; line-height: 1.6; color: var(--text-on-dark); }

/* ============================================================
   LIBRARY PROGRAMS IN NUMBERS (page-programs-in-numbers.php) and the
   three-card teaser on page-library-events.php. Moved here from the
   events template's inline <style> when the page was split (2026-08-19).
   ============================================================ */
.ev-stats { background: var(--off-white); }
.ev-stat-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:16px; margin:18px 0 26px; }
.ev-stat-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px 20px; text-align:center; }
.ev-stat-card__num { font-size:1.5rem; font-weight:800; color:var(--ocpl-blue); font-family:var(--font-heading); }
.ev-stat-card__label { font-size:var(--fs-sm); color:var(--text-mid); margin-top:4px; }
.ev-stats-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:20px; }
.ev-break { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px 20px; }
.ev-break h3 { margin:0 0 12px; font-size:.98rem; color:var(--ocpl-blue-dark); }
.ev-bar-row { display:grid; grid-template-columns:110px 1fr 44px; align-items:center; gap:8px; margin-bottom:8px; font-size:var(--fs-sm); }
.ev-bar-row__label { color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ev-bar-row__track { background:var(--surface-2); border-radius:999px; height:12px; overflow:hidden; }
.ev-bar-row__fill { background:var(--ocpl-blue); height:100%; border-radius:999px; }
.ev-bar-row__n { text-align:right; color:var(--text-mid); font-variant-numeric:tabular-nums; }
.ev-years { display:flex; gap:10px; align-items:flex-end; margin-top:8px; height:110px; overflow-x:auto; }
.ev-year { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:4px; }
.ev-year__bar { width:100%; max-width:64px; background:var(--ocpl-blue); border-radius:4px 4px 0 0; }
.ev-year--partial .ev-year__bar { background:var(--ocpl-blue-mid); opacity:.55; }
.ev-year__n { font-size:var(--fs-xs); color:var(--text-mid); font-variant-numeric:tabular-nums; }
.ev-year__label { font-size:var(--fs-sm); font-weight:700; color:var(--text); }
.ev-stats__note { font-size:var(--fs-sm); color:var(--text-light); margin-top:18px; }
.ev-bar--summer { background:var(--ocpl-green-dark); }
.ev-swatch { display:inline-block; width:10px; height:10px; border-radius:2px; vertical-align:baseline; margin-right:4px; }
.ev-swatch--summer { background:var(--ocpl-green-dark); }
.ev-heat { display:grid; grid-template-columns:74px repeat(7, 1fr); gap:4px; font-size:var(--fs-xs); }
.ev-heat__col { text-align:center; color:var(--text-mid); font-weight:700; }
.ev-heat__rowlabel { color:var(--text-mid); font-weight:700; align-self:center; }
.ev-heat__cell { border-radius:4px; min-height:30px; display:flex; align-items:center; justify-content:center; background:var(--surface-2); font-variant-numeric:tabular-nums; }
.ev-browse__filters { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:14px; }
.ev-browse__filters select, .ev-browse__filters input[type="search"] { padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius); background:var(--white); font-size:var(--fs-md); }
.ev-browse__filters input[type="search"] { min-width:220px; flex:1; max-width:320px; }
.ev-browse__count { font-size:var(--fs-sm); color:var(--text-mid); margin:0 0 10px; }
.ev-browse__table-wrap { overflow-x:auto; }
.ev-browse__table { width:100%; border-collapse:collapse; font-size:var(--fs-sm); background:var(--white); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; min-width:720px; }
.ev-browse__table th, .ev-browse__table td { padding:8px 12px; text-align:left; border-bottom:1px solid var(--light-gray); }
.ev-browse__table thead th { background:var(--ocpl-blue-pale); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.05em; color:var(--text-mid); }
.ev-browse__date { white-space:nowrap; color:var(--text-mid); }
.ev-browse__aud { font-size:var(--fs-sm); color:var(--text-mid); }
.ev-browse__pager { display:flex; gap:14px; align-items:center; justify-content:center; margin-top:18px; }
/* Teaser on the events page: three cards and a single line to the full page. */
.ev-stats--teaser .ev-stat-cards { margin-bottom: 16px; }
.ev-stats__more { text-align: center; font-size: var(--fs-md); color: var(--text-mid); margin: 0; }
.ev-stats__more a { color: var(--ocpl-blue); font-weight: 600; }

/* Coming Up: a lone event card takes the column, not a narrow box in a wide band. */
.hp-event-list--single { max-width: none; }
/* Community Stories: the staff quotes' own page (they used to rotate only on the homepage). */
.staff-notes { background: var(--off-white); border-top: 1px solid var(--border); }
.staff-notes__eyebrow { margin: 0 0 8px; font-family: var(--font-heading); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ocpl-orange-dark); }
.staff-notes__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.staff-notes__item { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px 16px; }
.staff-notes__quote { margin: 0; }
.staff-notes__quote p { margin: 0; font-family: var(--font-serif); font-size: 1rem; line-height: 1.6; color: var(--ocpl-blue-dark); }
.staff-notes__by { margin: 8px 0 0; font-size: var(--fs-sm); color: var(--text-mid); }
/* Under the hero: every active campaign, one cell each ("Right now"). */
.home-section--campaigns { padding: 26px 0 30px; background: var(--white); border-bottom: 1px solid var(--border); }
.hp-campaigns__label { margin: 0 0 6px; text-align: center; font-family: var(--font-heading); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ocpl-orange-dark); }
.hp-campaigns { border-top: 2px solid var(--ocpl-blue); text-align: left; }
.hp-campaigns .edh-now__cell { padding-top: 16px; padding-bottom: 16px; }
.home-section--campaigns .hp-tools-more { margin-top: 16px; }
/* Under Our Impact (dark band): the record is open — four live cells, on-dark colours. */
.hp-record { margin: 4px auto 0; border-top: 2px solid rgba(255,255,255,.55); border-bottom: 1px solid rgba(255,255,255,.22); text-align: left; }
.hp-record .edh-now__cell { padding-top: 16px; padding-bottom: 16px; border-left-color: rgba(255,255,255,.22); }
.hp-record .edh-now__kicker { color: var(--text-on-dark-muted); }
.hp-record .edh-now__lead   { color: var(--white); font-size: 1rem; }
.hp-record .edh-now__sub    { color: var(--text-on-dark-muted); }
.hp-record .edh-now__cell:hover, .hp-record .edh-now__cell:focus-visible { background: rgba(255,255,255,.10); }
.hp-record .edh-now__cell:hover .edh-now__lead { text-decoration-color: var(--white); }
@media (max-width: 820px) {
  .hp-record .edh-now__cell { border-top-color: rgba(255,255,255,.22); }
  .hp-record.edh-now--4 .edh-now__cell:nth-child(even) { border-left-color: rgba(255,255,255,.22); }
}
/* Advocacy band: the comparison behind the campaign, and where the figures live. */
.home-advocacy__sblogo-wrap { margin: 34px auto 0; text-align: center; }
.home-advocacy__sblogo {
  display: inline-block;
  background: var(--white);
  border-radius: 12px;
  padding: 10px 18px;
  max-height: 92px;
  max-width: min(320px, 80%);
  width: auto;
  height: auto;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.home-advocacy__history { max-width: 680px; margin: 30px auto 0; font-size: 1rem; line-height: 1.6; color: var(--text-on-dark); }
.home-advocacy__sblogo-wrap + .home-advocacy__history { margin-top: 16px; }
.home-advocacy__invite { max-width: 680px; margin: 18px auto 0; font-size: 1rem; line-height: 1.6; color: var(--text-on-dark); }
.home-advocacy__actions--follow { margin-top: 20px; }
.home-advocacy__actions--follow + .home-advocacy__source { margin-top: 22px; }
.home-advocacy__source  { max-width: 680px; margin: 10px auto 26px; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-on-dark-muted); }
/* Intro quick links: a live fact under a label. */
.iql__sub { display: block; margin-top: -6px; font-size: var(--fs-xs); font-weight: 400; color: var(--text-mid); text-align: center; }
/* Under the Make the Most cards: the other tools built here, less front and centre. */
.edh-now--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hp-tools { margin-top: 28px; border-top: 2px solid var(--ocpl-blue); text-align: left; }
.hp-tools .edh-now__cell { padding-top: 16px; padding-bottom: 16px; }
.hp-tools .edh-now__lead { font-size: 1rem; }
.hp-tools-more { text-align: center; margin: 22px 0 0; font-size: .95rem; }
.hp-tools-more a { color: var(--ocpl-blue); font-weight: 600; }
/* On the live front page the strip sits under the "Coming Up" cards: a rule above, quiet spacing. */
.hp-now { margin-top: 28px; border-top: 2px solid var(--ocpl-blue); text-align: left; }
.hp-now .edh-now__cell { padding-top: 16px; padding-bottom: 16px; }
.hp-now .edh-now__cell:hover, .hp-now .edh-now__cell:focus-visible { background: var(--white); }   /* the section is already blue-pale */
.edh-now__kicker { font-family: var(--font-heading); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-mid); }
.edh-now__lead   { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; line-height: 1.3; color: var(--ocpl-blue); }
.edh-now__sub    { font-size: var(--fs-sm); line-height: 1.45; color: var(--text-mid); }
.edh-now__note   { font-size: var(--fs-xs); line-height: 1.45; color: var(--text-mid); }

/* Headed blocks */
.edh-block { margin-top: 56px; }
.edh-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 36em);
  gap: 12px 40px;
  align-items: end;
  padding-top: 20px;
  border-top: 2px solid var(--ocpl-blue);
  margin-bottom: 6px;
}
.edh-head--plain { border-top: 0; padding-top: 0; }   /* the evidence row brings its own rule */
.edh-h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--ocpl-blue-dark);
}
.edh-intro { margin: 0; font-size: var(--fs-md); line-height: 1.6; color: var(--text-mid); max-width: 44em; }
.edh-block .ed-index { margin-top: 12px; }
.edh-block--evidence .ed-evidence { margin-top: 18px; }
.edh-links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 14px 0 0; }

/* One specific story (this season's Summer Reading) */
.edh-story { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 24px 40px; align-items: start; margin-top: 18px; }
.edh-story--text { grid-template-columns: minmax(0, 1fr); }
.edh-story__photo { margin: 0; }
.edh-story__photo img { display: block; width: 100%; height: auto; }
.edh-story__photo .ed-caption { margin-top: 10px; }
.edh-story__kicker { margin: 0 0 6px; font-family: var(--font-heading); font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--ocpl-orange); }
.edh-story__title  { margin: 0 0 10px; font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; line-height: 1.3; letter-spacing: -.01em; color: var(--ocpl-blue-dark); }
.edh-story__text   { margin: 0; font-size: var(--fs-md); line-height: 1.65; color: var(--text); max-width: 44em; }
.edh-story .ed-evidence--compact { margin-top: 18px; }
.ed-evidence--compact .ed-evidence__row { border-top-width: 1px; border-top-color: var(--border); }
.ed-evidence--compact .ed-evidence__item { padding: 12px 16px 10px; gap: 3px; }
.ed-evidence--compact .ed-evidence__num  { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
/* Four compact facts in a story column: two by two, not three-and-one. */
.ed-evidence--compact .ed-evidence__row--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ed-evidence--compact .ed-evidence__row--4 .ed-evidence__item:nth-child(n+3) { border-top: 1px solid var(--border); }
.ed-evidence--compact .ed-evidence__row--4 .ed-evidence__item:nth-child(odd) { border-left: 0; padding-left: 0; }
.ed-evidence--compact .ed-evidence__row--4 .ed-evidence__item:nth-child(even) { padding-left: 16px; }
.ed-evidence__note { font-size: var(--fs-xs); line-height: 1.4; font-weight: 600; color: var(--success); }   /* a prior-year comparison */
.ed-evidence__note--down { color: var(--text-mid); font-weight: 400; }
.edh-story__note { margin: 12px 0 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--text-mid); max-width: 44em; }
.edh-story .edh-textlink { display: inline-block; margin-top: 16px; }

/* Who we are */
.edh-who p:not(.edh-links) { margin: 16px 0 0; font-size: 1rem; line-height: 1.7; color: var(--text); max-width: 44em; }

/* A neighbour's story: quoted material, so serif */
.edh-voice { margin-top: 18px; max-width: 44em; padding: 22px 26px; background: var(--ocpl-blue-pale); border-left: 3px solid var(--ocpl-blue); }
.edh-voice blockquote { margin: 0; padding: 0; border: 0; font-family: var(--font-serif); font-size: 1.1rem; line-height: 1.6; font-style: normal; color: var(--ocpl-blue-dark); }
.edh-voice cite { display: block; margin-top: 10px; font-style: normal; font-family: var(--font-heading); font-size: var(--fs-sm); font-weight: 600; color: var(--text-mid); }
.edh-voice .edh-links { margin-top: 12px; }
.edh .ed-close { margin-top: 56px; }

@media (max-width: 820px) {
  .edh-hero { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .edh-hero__photo { order: -1; }              /* the picture leads on a phone */
  .edh-now, .edh-now--2 { grid-template-columns: minmax(0, 1fr); }
  .edh-now--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* four cells: two by two on a tablet */
  .edh-now__cell { border-left: 0; border-top: 1px solid var(--border); padding-left: 0; padding-right: 0; }
  .edh-now__cell:first-child { border-top: 0; }
  .edh-now--4 .edh-now__cell:nth-child(2) { border-top: 0; }
  .edh-now--4 .edh-now__cell:nth-child(even) { border-left: 1px solid var(--border); padding-left: 16px; }
  .edh-now--4 .edh-now__cell:nth-child(odd) { padding-right: 16px; }
  .edh-head { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .edh-story, .edh-story--text { grid-template-columns: minmax(0, 1fr); }
  .edh-block { margin-top: 44px; }
}
@media (max-width: 480px) {
  .edh-now--4 { grid-template-columns: minmax(0, 1fr); }               /* four cells: one by one on a phone */
  .edh-now--4 .edh-now__cell:nth-child(n) { border-left: 0; padding-left: 0; padding-right: 0; border-top: 1px solid var(--border); }
  .edh-now--4 .edh-now__cell:first-child { border-top: 0; }
}

/* ── Print: the page is evidence, so it prints as evidence ─── */
@media print {
  .ed-page { padding: 0; }
  .ed-page, .ed-page * { color: #000 !important; }
  .ed-close { display: none; }                          /* the ask has no place on paper */
  .ed-index__row, .src--block, .ed-details > summary, .ed-tag, .ed-archive { background: transparent !important; }
  .ed-details > summary::before { display: none; }
  .ed-details > summary { min-height: 0; padding-left: 0; }
  .ed-details { border: 0; }
  .ed-details__body { padding: 8px 0 0; }
  .ed-details::details-content { content-visibility: visible; display: block; }   /* expands the disclosure */
  .ed-evidence__row, .ed-index__row, .ed-archive, .ed-prov tr { break-inside: avoid; }
}