/* V2 homepage additions. site.css supplies the theme (Open Sans, Playfair Display headings,
   navy #0b2340, red #a8232f) and every shared section; this file only styles the split video hero,
   the request-help section, and small copy-level changes in existing sections. */

/* ------------------------------------------------------------------ shared bits */
.v2-text-link { display: inline-flex; align-items: center; gap: 6px; color: #a8232f; font-weight: 700; text-decoration: none; }
.v2-text-link:hover, .v2-text-link:focus { color: #7c1722; text-decoration: underline; }
.v2-play-glyph { width: 1em; height: 1em; fill: currentColor; flex-shrink: 0; }
.home-v2 a:focus-visible, .home-v2 button:focus-visible { outline: 3px solid #a8232f; outline-offset: 3px; }
.home-v2 .v2-quiet-focus:focus, .home-v2 .v2-quiet-focus:focus-visible { outline: none; }
/* Let the sponsor introduction use the section width, wrapping naturally on small screens. */
.home-v2 .sponsors-section .section-title p { max-width: none; }

/* ------------------------------------------------------------------ desktop contact bar */
.v2-contact-bar { display: flex; align-items: center; gap: 32px; min-height: 36px; }
.v2-contact-details { display: flex; flex: 1; align-items: center; justify-content: flex-start; gap: 32px; margin: 0; }
.v2-contact-details li, .v2-contact-details a { display: flex; align-items: center; gap: 7px; color: #fff; white-space: nowrap; }
.v2-contact-details .icon { flex-shrink: 0; width: 16px; height: 16px; }
.v2-contact-details a:hover { text-decoration: underline; text-underline-offset: 3px; }
.v2-contact-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.v2-contact-facebook { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; }
.v2-contact-facebook .icon { width: 16px; height: 16px; }
.v2-contact-facebook:hover { color: #fff; background: rgba(255, 255, 255, .15); }

/* ------------------------------------------------------------------ split hero */
.v2-split-hero { border-bottom: 1px solid #dce2e7; }
.v2-split-hero > .container { padding-top: 44px; padding-bottom: 36px; }
.v2-hero-grid { --v2-count: 6.6s; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; gap: 0 44px; }
/* The story wrapper is only a box on phones; elsewhere the grid places the copy and the poster directly. */
.v2-story { display: contents; }
.v2-hero-copy.hero-caption { max-width: none; padding: 0 0 8px; border-left: 0; background: transparent; box-shadow: none; border-radius: 0; }
.v2-hero-copy .hero-title { display: flex; align-items: flex-end; margin: 0 0 12px; font-family: 'Open Sans', sans-serif; font-size: clamp(32px, 3.05vw, 44px); line-height: 1.1; font-weight: 800; letter-spacing: -.01em; text-transform: none; color: #0b2340; }
.v2-hero-copy .hero-title, .v2-hero-copy .hero-subtitle, .v2-hero-copy .hero-description { box-sizing: content-box; }
.v2-hero-copy .hero-subtitle { margin: 0 !important; font-size: 15px; line-height: 1.4; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #a8232f; }
.v2-hero-copy .hero-description { margin: 18px 0 0 !important; max-width: 30em; font-size: 17px; line-height: 1.6; color: #444; }
.v2-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; }
.v2-hero-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 11px 22px; border-radius: 4px; font-size: 15px; font-weight: 700; line-height: 1.3; white-space: nowrap; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.v2-donate { background: #0b2340; border: 2px solid #0b2340; color: #fff; box-shadow: 0 3px 12px rgba(7, 26, 49, .18); }
.v2-donate:hover, .v2-donate:focus { background: #071a31; border-color: #071a31; color: #fff; }

/* Featured poster; the progress pill sits under it on every width. */
.v2-featured-video { min-width: 0; }
.v2-poster { position: relative; display: block; overflow: hidden; border-radius: 4px; background: #0b2340; box-shadow: 0 10px 30px rgba(7, 26, 49, .18); }
.v2-poster img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
/* Translucent navy play disc, on the poster and (smaller) on every tile. */
.v2-play, .v2-thumb-play { position: absolute; display: grid; place-items: center; border: 2px solid rgba(255, 255, 255, .85); border-radius: 50%; background: rgba(11, 35, 64, .5); color: #fff; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); transition: background-color .2s ease; }
.v2-play { left: 14px; bottom: 14px; width: 54px; height: 54px; }
.v2-play .v2-play-glyph { width: 24px; height: 24px; }
.v2-poster:hover .v2-play, .v2-poster:focus .v2-play, .v2-thumb:hover .v2-thumb-play, .v2-thumb:focus .v2-thumb-play { background: rgba(11, 35, 64, .8); }
.v2-duration { position: absolute; right: 12px; top: 12px; padding: 3px 8px; border-radius: 3px; background: rgba(7, 26, 49, .5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); font-size: 13px; font-weight: 700; line-height: 1.5; font-variant-numeric: tabular-nums; }
/* Five grey tracks on a quiet white pill, and one red runner that travels along them. The tracks never
   change. The runner fills over the slideshow interval with a soft start and finish; on a story change
   it glides to the new slot (its red drawing back into it as it moves) and counts again from there.
   Without JavaScript the server-rendered active segment is simply red. */
.v2-segments { position: relative; display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; padding: 7px 12px; border: 1px solid #dce2e7; border-radius: 999px; background: #fff; }
.v2-segment { display: block; width: 24px; height: 4px; border-radius: 2px; background: #cfd7de; }
.v2-segment.is-active { background: #a8232f; } /* the server-rendered marker, until the script hands over to the runner */
.v2-runner { position: absolute; left: 0; top: 0; border-radius: 2px; background: #e9c7cb; overflow: hidden; pointer-events: none; }
.v2-segments.has-runner .v2-runner { transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.v2-segments.has-runner .v2-runner.is-dragging { transition: none; }
.v2-runner::after { content: ""; position: absolute; inset: 0; width: 100%; background: #a8232f; transition: width .4s cubic-bezier(.2, .7, .2, 1); }
.v2-runner.is-crossing::after { width: var(--v2-fill, 100%); }
.v2-runner.is-resetting::after { width: 0; }
.v2-segments.is-counting .v2-runner::after { animation: v2-progress var(--v2-count, 6.6s) cubic-bezier(.45, 0, .55, 1) both; }
@keyframes v2-progress { from { width: 0; } to { width: 100%; } }
.v2-video-caption { display: flex; align-items: center; justify-content: flex-end; margin: 12px 0 0; }

/* Story chooser: a filmstrip of the five videos under the poster. */
.v2-stories { grid-column: 1 / -1; margin-top: 54px; padding-top: 16px; border-top: 1px solid #dce2e7; }
.v2-slider-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.v2-slider-heading h2 { margin: 0; font: 700 15px/1.3 'Open Sans', sans-serif; color: #0b2340; }
.v2-slider-controls { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.v2-slider-controls[hidden] { display: none; }
.home-v2 :is(.v2-slider-controls, .carousel-controls, .gallery-controls) button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid #c3cdd6; border-radius: 50%; background: #fff; color: #0b2340; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.home-v2 :is(.v2-slider-controls, .carousel-controls, .gallery-controls) button:is(:hover, :focus-visible) { background: #0b2340; border-color: #0b2340; color: #fff; }
.home-v2 :is(.v2-slider-controls, .carousel-controls, .gallery-controls) svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.home-v2 .carousel-controls { position: static; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 12px; }
.home-v2 .gallery-controls button[aria-disabled="true"] { background: #fff; border-color: #c3cdd6; color: #0b2340; }
.v2-slider-controls .v2-pause { position: relative; margin-left: 6px; }
.v2-slider-controls .v2-pause::before { content: ""; position: absolute; left: -7px; top: 8px; bottom: 8px; width: 1px; background: #c3cdd6; }
.home-v2 :is(.v2-pause, .carousel-pause) .icon-play, .home-v2 :is(.v2-pause, .carousel-pause)[data-paused="true"] .icon-pause { display: none; }
.home-v2 :is(.v2-pause, .carousel-pause)[data-paused="true"] .icon-play { display: block; fill: currentColor; stroke: none; }
#v2-position { min-width: 40px; text-align: center; font-size: 13px; font-weight: 700; color: #0b2340; font-variant-numeric: tabular-nums; }
.v2-thumbnails { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.v2-thumbnails li { min-width: 0; }
.v2-thumb { display: flex; flex-direction: column; gap: 8px; color: #0b2340; text-decoration: none; }
.v2-thumb:hover, .v2-thumb:focus { color: #0b2340; text-decoration: none; }
.v2-thumb:focus:not(:focus-visible) { outline: none; }
.v2-thumb:focus-visible { outline-offset: 4px; }
.v2-thumb-image { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: #0b2340; box-shadow: 0 0 0 1px rgba(11, 35, 64, .08); transition: box-shadow .2s ease; }
.v2-thumb-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Desktop hover preview, on tiles and on the poster: the silent clip sits over the still and fades in once it is actually playing. */
.v2-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.v2-preview.is-playing { opacity: 1; }
.v2-thumb:hover .v2-thumb-image { box-shadow: 0 0 0 2px #0b2340; }
.v2-thumb-time { position: absolute; right: 6px; top: 6px; padding: 1px 6px; border-radius: 2px; background: rgba(7, 26, 49, .85); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.5; font-variant-numeric: tabular-nums; }
.v2-thumb-play { left: 8px; bottom: 8px; width: 32px; height: 32px; border-width: 1.5px; }
.v2-thumb-play .v2-play-glyph { width: 15px; height: 15px; }
/* The featured tile wears a 3px red ring held off the image by a 2px white gap, so it reads as a frame rather than an outline. */
.v2-thumb.is-selected .v2-thumb-image, .v2-thumb.is-selected:hover .v2-thumb-image { box-shadow: 0 0 0 2px #fff, 0 0 0 5px #a8232f; }
.v2-thumb-text { display: block; min-width: 0; }
.v2-thumb-label, .v2-thumb-title { display: block; font-size: 14px; line-height: 1.35; font-weight: 600; }
.v2-thumb-label { display: none; }
.v2-thumb-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.7em; }
.v2-thumb.is-selected .v2-thumb-label, .v2-thumb.is-selected .v2-thumb-title { color: #a8232f; }

/* Transitions: the old poster fades out over the new one; copy slides in from the direction of travel. */
.v2-poster img.v2-poster-ghost { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: opacity .45s ease; pointer-events: none; }
.v2-poster img.v2-poster-ghost.is-leaving { opacity: 0; }
.v2-poster img.is-entering-next { animation: v2-enter-next .5s ease both; }
.v2-poster img.is-entering-prev { animation: v2-enter-prev .5s ease both; }
.v2-hero-copy.is-leaving { opacity: 0; transform: translateX(-10px); transition: opacity .16s ease, transform .16s ease; }
.v2-hero-copy.is-entering-next { animation: v2-copy-next .42s cubic-bezier(.2,.7,.2,1) both; }
.v2-hero-copy.is-entering-prev { animation: v2-copy-prev .42s cubic-bezier(.2,.7,.2,1) both; }
@keyframes v2-enter-next { from { transform: scale(1.04) translateX(12px); } to { transform: none; } }
@keyframes v2-enter-prev { from { transform: scale(1.04) translateX(-12px); } to { transform: none; } }
@keyframes v2-copy-next { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes v2-copy-prev { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ about and how we help */
.v2-about-link { margin-top: 18px !important; font-size: 15px; }
.v2-mission > .container { padding-top: 52px; padding-bottom: 48px; }
.v2-mission-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 28px; }
.v2-mission-heading h3 { margin-bottom: 0; }
.v2-mission-heading p { max-width: 44em; margin: 0; font-size: 15px; line-height: 1.7; }
.v2-mission .mission-list .icon-box { align-items: flex-start; padding: 18px 18px 20px; }
.v2-mission .mission-list h4 { font-family: 'Open Sans', sans-serif; font-size: 14px; letter-spacing: .04em; }
.v2-mission .mission-list p { margin: 8px 0 0; font-size: 14px; line-height: 1.65; color: #555; }
.v2-mission-note { margin: 24px 0 0; font-size: 15px; }

/* ------------------------------------------------------------------ request help and volunteer */
.v2-help-section { border-top: 1px solid #e3e7eb; border-bottom: 1px solid #e3e7eb; }
.v2-help-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 56px; }
.v2-help-col { min-width: 0; }
.v2-help-col h2 { font-size: 30px; line-height: 1.25; }
.v2-help-col > p { font-size: 15px; line-height: 1.75; max-width: 36em; }
.v2-help-actions { margin: 22px 0 18px !important; }
.v2-contact-list { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.v2-contact-list li { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 8px; }
.v2-contact-list .icon { width: 17px; height: 17px; flex-shrink: 0; margin-top: 4px; }
.v2-contact-body { flex: 1 1 auto; min-width: 0; line-height: 1.6; }
.v2-contact-list a { color: #0b2340; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.v2-contact-list a:hover, .v2-contact-list a:focus { color: #a8232f; }
.v2-contact-note { color: #666; font-size: 14px; }
.v2-help-watch { margin: 0 !important; font-size: 15px; }

/* ------------------------------------------------------------------ fundraisers */
.home-v2 .board-bio, .home-v2 .biography-dialog .dialog-content { border-left: 0; }
.v2-campaign { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 36px; padding: 24px 28px; border: 1px solid #cfd7de; border-radius: 4px; background: #fff; }
.v2-campaign-body { min-width: 0; }
.v2-campaign h3 { margin: 4px 0 8px; font-size: 24px; color: #0b2340; }
.v2-campaign p { margin-bottom: 0; }
.v2-campaign .fund-donate { align-self: center; flex-shrink: 0; }
.v2-fund-status { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #a8232f; }
.v2-fund-date { margin-left: 8px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #555; }
.v2-archive-title { margin: 0 0 16px; font: 700 14px/1.4 'Open Sans', sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #0b2340; }
.fundraisers-section .fund-card .fund-text { margin-top: 0; }

/* ------------------------------------------------------------------ maintained impact totals */
.v2-impact-band > .container { padding-top: 44px; padding-bottom: 36px; }
.v2-impact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.v2-impact-stat { display: grid; grid-template-rows: 40px auto auto; gap: 6px; padding: 0 20px; text-align: center; }
.v2-impact-stat + .v2-impact-stat { border-left: 1px solid rgba(255, 255, 255, .18); }
.v2-impact-stat dt, .v2-impact-stat dd { display: contents; }
.v2-impact-stat .icon { grid-row: 1; width: 36px; height: 36px; margin: 0 auto; color: #fff; opacity: .85; }
.v2-impact-stat dt > span { grid-row: 3; font: 700 13px/1.5 'Playfair Display', serif; letter-spacing: .14em; text-transform: uppercase; }
.v2-impact-value { grid-row: 2; color: #fff; font: 400 44px/1.2 'Playfair Display', serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 767px) {
  .v2-impact-band > .container { padding-top: 16px; padding-bottom: 16px; }
  .v2-impact-grid { grid-template-columns: 1fr; }
  .v2-impact-stat { padding: 22px 0; }
  .v2-impact-stat + .v2-impact-stat { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .18); }
  .v2-impact-value { font-size: 38px; }
}

/* ------------------------------------------------------------------ video dialog */
.v2-video-dialog { width: min(1040px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; border-radius: 6px; overflow: auto; color: #0b2340; background: #fff; box-shadow: 0 20px 80px rgba(0, 0, 0, .5); }
.v2-video-dialog::backdrop { background: rgba(7, 26, 49, .88); }
.v2-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px 14px 24px; }
.v2-dialog-heading h2 { margin: 0; font: 700 20px/1.35 'Open Sans', sans-serif; color: #0b2340; }
.v2-close { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 4px; background: #edf2f6; color: #0b2340; cursor: pointer; }
.v2-close:hover, .v2-close:focus { background: #0b2340; color: #fff; }
.v2-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.v2-video-stage { aspect-ratio: 16 / 9; background: #0b2340; }
.v2-video-stage iframe { display: block; width: 100%; height: 100%; border: 0; }
.v2-dialog-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 24px; }
.v2-dialog-fallback { margin: 0; font-size: 14px; color: #666; }
.v2-dialog-fallback a { color: #0b2340; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.v2-dialog-fallback a:hover, .v2-dialog-fallback a:focus { color: #a8232f; }

/* ------------------------------------------------------------------ responsive */
@media (min-width: 992px) {
  /* Desktop: copy left spanning both rows; poster right with the progress pill centred 12px under it
     (owner, 2026-10-18: above it was disorienting). */
  .v2-hero-copy.hero-caption { grid-column: 1; grid-row: 1 / 3; }
  .v2-featured-video { grid-column: 2; grid-row: 1; }
  .v2-video-caption { grid-column: 2; grid-row: 2; justify-content: center; margin: 12px 0 0; }
  .v2-stories { grid-row: 3; }
  .v2-segments { gap: 6px; }
  .v2-segment { width: 32px; height: 6px; border-radius: 3px; }
}
@media (max-width: 1199px) and (min-width: 992px) {
  .v2-hero-grid { gap: 32px; }
  .v2-hero-copy .hero-title { font-size: 36px; }
  .v2-hero-copy .hero-description { font-size: 16px; }
  .v2-thumb-title { font-size: 13px; }
}
@media (max-width: 991px) {
  .v2-split-hero > .container { padding-top: 32px; }
  .v2-hero-grid { grid-template-columns: 1fr; gap: 28px; min-height: 0; }
  .v2-video-caption { margin-top: -16px; } /* 12px under the poster despite the 28px grid gap */
  .v2-stories { margin-top: 10px; }
  .v2-hero-copy.hero-caption { padding: 8px 0; }
  .v2-hero-copy .hero-title { max-width: 11em; font-size: 38px; }
  .v2-hero-copy .hero-description { max-width: 40em; }
  .v2-thumbnails { gap: 12px; }
  .v2-thumb-title { font-size: 13px; }
  .v2-help-grid { gap: 36px 32px; }
  .v2-mission-heading { display: block; }
  .v2-mission-heading h3 { margin-bottom: 14px; }
}
@media (max-width: 767px) {
  .v2-split-hero > .container { padding-top: 26px; padding-bottom: 28px; }
  /* Phones: one white story card (heading, poster, copy, Donate) that swipes sideways as a piece, the
     progress pill under it, then the tile row. The red subtitle is dropped to keep the stack short.
     The neighbouring story is an inert clone parked one card width plus the gutter to the side,
     inside the section's clipped overflow. */
  .v2-split-hero { overflow-x: hidden; overflow-x: clip; }
  .v2-hero-grid { position: relative; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .v2-story { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 14px 14px 16px; border: 1px solid #dce2e7; border-radius: 8px; background: #fff; touch-action: pan-y; }
  .v2-story > .v2-hero-copy.hero-caption, .v2-story > .v2-featured-video { display: contents; }
  .v2-hero-body { order: 1; } /* heading, poster, then copy and Donate */
  .v2-story .v2-poster { box-shadow: none; }
  .v2-story.v2-ghost { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; }
  .v2-story.is-grabbed, .v2-story.is-sliding, .v2-story.v2-ghost { will-change: transform; }
  .v2-hero-grid .is-sliding { transition: transform .34s cubic-bezier(.22, .61, .36, 1); }
  .v2-hero-copy .hero-title { max-width: none; margin-bottom: 0; font-size: clamp(28px, 8.4vw, 33px); }
  .v2-hero-copy .hero-subtitle { display: none; }
  .v2-hero-copy .hero-description { margin-top: 0 !important; font-size: 16px; }
  .v2-hero-actions { margin-top: 18px; gap: 10px; }
  .v2-hero-actions .btn { flex: 1 1 auto; padding: 11px 14px; }
  .v2-hero-actions .v2-donate { width: 100%; }
  .v2-play { left: 12px; bottom: 12px; width: 50px; height: 50px; }
  .v2-play .v2-play-glyph { width: 22px; height: 22px; }
  .v2-video-caption { justify-content: center; margin: 0; }
  .v2-segment { width: 20px; }
  .v2-stories { min-width: 0; margin-top: 0; padding-top: 16px; }
  .v2-slider-heading { margin-bottom: 10px; }
  .v2-slider-heading h2 { font-size: 14px; }
  /* Phones keep the previous/next arrows beside the pause button (owner, 2026-10-18); swipe still works too. */
  .home-v2 :is(.v2-slider-controls, .carousel-controls, .gallery-controls) button { width: 40px; height: 40px; }
  #v2-position { min-width: 36px; }
  /* The same tile row, scrolling sideways and snapping, with the next tile peeking in. The 16px gap
     keeps the previous tile fully off screen once the featured one is scrolled into place. */
  .v2-thumbnails { display: flex; gap: 16px; margin: 0 -15px; padding: 6px 15px 7px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: 15px; scrollbar-width: none; }
  .v2-thumbnails::-webkit-scrollbar { display: none; }
  .v2-thumbnails li { flex: 0 0 148px; scroll-snap-align: start; }
  .v2-thumb-play { left: 6px; bottom: 6px; width: 28px; height: 28px; }
  .v2-thumb-play .v2-play-glyph { width: 13px; height: 13px; }
  .v2-thumb-title { display: none; }
  .v2-thumb-label { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 13px; }
  .v2-mission > .container { padding-top: 40px; padding-bottom: 40px; }
  .v2-mission-note { font-size: 14px; }
  .v2-help-grid { grid-template-columns: 1fr; gap: 36px; }
  .v2-help-col h2 { font-size: 26px; }
  .v2-help-actions .btn { width: 100%; }
  .v2-campaign { flex-direction: column; align-items: flex-start; padding: 20px; margin-bottom: 28px; }
  .v2-campaign .fund-donate { align-self: stretch; }
  .v2-campaign h3 { font-size: 22px; }
  .v2-fund-date { display: block; margin: 4px 0 0; }
  .v2-video-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); }
  .v2-dialog-heading { padding: 12px 12px 10px 16px; }
  .v2-dialog-heading h2 { font-size: 17px; }
  .v2-dialog-footer { padding: 12px 16px 16px; }
  .v2-dialog-footer .fund-donate { flex: 1 1 auto; text-align: center; }
}
@media (max-width: 359px) {
  .v2-hero-actions .btn { width: 100%; }
  .v2-thumbnails li { flex-basis: 136px; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-poster-ghost, .v2-poster img.is-entering-next, .v2-poster img.is-entering-prev, .v2-hero-copy.is-entering-next, .v2-hero-copy.is-entering-prev { animation: none; transition: none; }
  .v2-play, .v2-thumb, .v2-thumb-play, .v2-preview, .v2-hero-actions .btn, .v2-slider-controls button, .v2-hero-grid .is-sliding, .v2-runner, .v2-runner::after { transition: none; }
}