/* ============================================================
   sections-b.css — styles for the 12 "B" section types ported
   from skp-3.0 templates_v1:
   contact_form, faq, gallery, video_embed_grid, featured_video,
   press_logos, article_list, filter_chips, fundraising_progress,
   donation_cta, donor_wall, scholarship_form.

   Depends on site.css tokens (--color-*, --font-*, --text-*,
   --space-section, --tracking-*, --motion-*, --ease-out, .wrap,
   .reveal). Design rules from skp-3.0 brief-template-v1.md +
   anti-patterns.md:
   - crisp edges: radius 0 everywhere except chips/pills (9999px)
   - borders are NEUTRAL hairlines, never brand-colored
   - overlays/tints use the SECONDARY color with alpha, never
     pure-black rgba
   - eyebrow = 32x1px primary tick + tracked uppercase label
   - shadows (rare): two-layer, neutral-900-tinted

   Shared primitives carry the `sb-` prefix (owned by this file);
   per-section classes are namespaced under each section root.
   ============================================================ */

/* ---- section roots: shared padding + surface --------------------------- */
.contact-form, .faq, .gallery, .video-grid, .featured-video,
.press-logos, .article-list, .filter-chips, .fundraising-progress,
.donation-cta, .donor-wall, .scholarship-form {
  --sb-rule: #E4E4E7;                /* neutral hairline (zinc-200) */
  --sb-placeholder: #E4E4E7;         /* image-loading stage */
  --sb-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  background: var(--color-neutral-50);
  padding: var(--space-section) 0;
}
/* lighter rhythm for the two strip-like sections */
.press-logos { padding: clamp(64px, 8vw, 96px) 0; }
.filter-chips { padding: clamp(48px, 6vw, 64px) 0 8px; }
@media (max-width: 640px) {
  .contact-form, .faq, .gallery, .video-grid, .featured-video,
  .article-list, .fundraising-progress, .donation-cta, .donor-wall,
  .scholarship-form { padding: var(--space-section-mobile) 0; }
}

/* ---- shared primitives (sb-*) ------------------------------------------- */
.sb-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.sb-eyebrow .tick { display: inline-block; width: 32px; height: 1px; background: var(--color-primary); flex: none; }
.sb-eyebrow span:not(.tick) {
  font: 500 var(--text-eyebrow)/1.4 var(--font-display);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--color-neutral-900); opacity: 0.55;
}
.sb-eyebrow.centered { justify-content: center; }

.sb-head {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-section-head); line-height: 1.02;
  letter-spacing: var(--tracking-display);
  color: var(--color-neutral-900);
  margin-bottom: 24px;
}
.sb-head.sm { font-size: clamp(36px, 4.5vw, 56px); }

.sb-intro {
  font-size: var(--text-body-lg); line-height: 1.65;
  color: var(--color-neutral-900); opacity: 0.7;
  max-width: 36rem; margin-bottom: 40px;
}

.sb-section-head { margin-bottom: clamp(48px, 5vw, 64px); max-width: 48rem; }
.sb-section-head .sb-head { margin-bottom: 0; }

/* primary CTA — mirrors .hero-cta in site.css (crisp, no radius) */
.sb-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--color-primary); color: var(--cta-text-on-primary);
  font: 600 16px/1 var(--font-display);
  padding: 16px 28px; border: 0; border-radius: 0;
  text-decoration: none; cursor: pointer;
  transition: opacity var(--motion-hover) var(--ease-out);
}
.sb-cta:hover { opacity: 0.9; }

/* form fields — neutral hairline border, focus = border darkens (no ring) */
.sb-field { display: block; }
.sb-field .field-label {
  display: block; margin-bottom: 8px;
  font: 500 var(--text-eyebrow)/1.4 var(--font-display);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--color-neutral-900); opacity: 0.6;
}
.sb-field .field-optional { text-transform: lowercase; letter-spacing: normal; }
.sb-field input, .sb-field textarea, .sb-field select {
  width: 100%; padding: 12px 16px;
  font: 400 var(--text-body)/1.5 var(--font-body);
  background: #FFFFFF; color: var(--color-neutral-900);
  border: 1px solid var(--sb-rule); border-radius: 0;
  appearance: none; -webkit-appearance: none;
}
.sb-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230F0F0F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 40px;
}
.sb-field textarea { resize: vertical; }
.sb-field input:focus, .sb-field textarea:focus, .sb-field select:focus {
  outline: none; border-color: var(--color-neutral-900);
}
.sb-field .field-hint {
  display: block; margin-top: 6px; font-size: 12px;
  color: var(--color-neutral-900); opacity: 0.5;
}

/* video frame + poster→iframe swap (video_embed_grid, featured_video) */
.sb-video-frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: #0A0A0F;
}
.sb-video-poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; padding: 0; border: 0; border-radius: 0;
  background: transparent; cursor: pointer;
}
.sb-video-poster img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--motion-reveal) var(--ease-out);
}
.sb-video-poster:hover img { transform: scale(1.02); }
.sb-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 9999px; /* circle glyph — pill exception */
  background: var(--color-primary); color: var(--cta-text-on-primary);
  transition: transform var(--motion-hover) var(--ease-out);
}
.sb-play.lg { width: 80px; height: 80px; }
.sb-video-poster:hover .sb-play { transform: translate(-50%, -50%) scale(1.1); }
.sb-video-embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ============================================================
   contact_form — asymmetric form-left (7) / info-right (5)
   ============================================================ */
.contact-form .cf-grid { display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 1024px) {
  .contact-form .cf-grid { grid-template-columns: 7fr 5fr; gap: 80px; }
}
.contact-form .cf-form { display: flex; flex-direction: column; gap: 20px; max-width: 36rem; }
.contact-form .cf-row-2 { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 768px) { .contact-form .cf-row-2 { grid-template-columns: 1fr 1fr; } }
.contact-form .sb-cta { align-self: flex-start; margin-top: 16px; }
.contact-form .cf-info { list-style: none; display: flex; flex-direction: column; gap: 20px; }
.contact-form .cf-info-label {
  font: 700 var(--text-eyebrow)/1.4 var(--font-display);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--color-neutral-900); opacity: 0.55; margin-bottom: 4px;
}
.contact-form .cf-info-value {
  font-size: var(--text-body); color: var(--color-neutral-900); text-decoration: none;
}
.contact-form a.cf-info-value:hover { text-decoration: underline; }
.contact-form .cf-map {
  margin-top: 32px; aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--sb-placeholder);
}
.contact-form .cf-map iframe { width: 100%; height: 100%; border: 0; }

/* ============================================================
   faq — heading-left (4) / accordion-right (8), native <details>
   ============================================================ */
.faq .faq-grid { display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 1024px) {
  .faq .faq-grid { grid-template-columns: 4fr 8fr; gap: 80px; }
}
.faq .faq-head-col .sb-head { margin-bottom: 0; }
.faq .faq-head-col .sb-intro { margin: 24px 0 0; }
.faq .faq-items { border-top: 1px solid var(--sb-rule); }
.faq .faq-item { border-bottom: 1px solid var(--sb-rule); }
.faq .faq-item summary {
  display: flex; align-items: flex-start; gap: 24px;
  padding: 24px 0; cursor: pointer; list-style: none;
}
.faq .faq-item summary::-webkit-details-marker { display: none; }
@media (min-width: 768px) { .faq .faq-item summary { padding: 28px 0; } }
.faq .faq-cat {
  display: none;
  font: 500 10px/1.4 var(--sb-mono);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-neutral-900); opacity: 0.45;
  min-width: 60px; padding-top: 6px;
}
@media (min-width: 768px) { .faq .faq-cat { display: inline-block; } }
.faq .faq-q {
  flex: 1;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(18px, 1.4vw, 22px); line-height: 1.35;
  color: var(--color-neutral-900); opacity: 0.9;
  transition: opacity var(--motion-hover) var(--ease-out);
}
.faq .faq-item summary:hover .faq-q, .faq .faq-item[open] .faq-q { opacity: 1; }
.faq .faq-chevron {
  flex: none; margin-top: 4px;
  color: var(--color-neutral-900); opacity: 0.55;
  transition: transform var(--motion-hover) var(--ease-out);
}
.faq .faq-item[open] .faq-chevron { transform: rotate(180deg); }
.faq .faq-answer { padding: 0 0 28px; max-width: 42rem; }
.faq .faq-answer p {
  font-size: var(--text-body-lg); line-height: 1.65;
  color: var(--color-neutral-900); opacity: 0.72;
}
.faq .faq-answer p + p { margin-top: 16px; }
@media (min-width: 768px) { .faq .faq-answer.has-cat { padding-left: 84px; } }

/* ============================================================
   gallery — grid (square cells) or masonry (CSS columns)
   ============================================================ */
.gallery .gal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 768px) {
  .gallery .gal-grid { gap: 24px; }
  .gallery .gal-grid.cols-3, .gallery .gal-grid.cols-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .gallery .gal-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .gallery .gal-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
}
.gallery .gal-cell {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--sb-placeholder);
}
.gallery .gal-cell img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--motion-reveal) var(--ease-out);
}
.gallery .gal-cell:hover img { transform: scale(1.05); }
.gallery .gal-overlay-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 12px 16px; font-size: 12px; color: #FFFFFF;
  /* secondary-color scrim, never pure black (Brief B rule) */
  background: linear-gradient(0deg, rgba(var(--color-secondary-rgb), 0.9), transparent);
  opacity: 0; transition: opacity var(--motion-hover) var(--ease-out);
}
.gallery .gal-cell:hover .gal-overlay-caption { opacity: 1; }

.gallery .gal-masonry { columns: 1; column-gap: 16px; column-fill: balance; }
@media (min-width: 640px) { .gallery .gal-masonry { columns: 2; } }
@media (min-width: 768px) { .gallery .gal-masonry { column-gap: 24px; } }
@media (min-width: 1024px) {
  .gallery .gal-masonry.cols-3 { columns: 3; }
  .gallery .gal-masonry.cols-4 { columns: 4; }
}
.gallery .gal-fig {
  break-inside: avoid; margin-bottom: 16px; overflow: hidden;
  background: var(--sb-placeholder);
}
@media (min-width: 768px) { .gallery .gal-fig { margin-bottom: 24px; } }
.gallery .gal-fig img {
  width: 100%; height: auto; object-fit: cover;
  transition: transform var(--motion-reveal) var(--ease-out);
}
.gallery .gal-fig:hover img { transform: scale(1.03); }
.gallery .gal-caption {
  padding: 12px 16px; font-size: 12px;
  color: var(--color-neutral-900); opacity: 0.6;
}

/* ============================================================
   video_embed_grid — poster cards, mono duration badge
   ============================================================ */
.video-grid .vg-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 640px) { .video-grid .vg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .video-grid .vg-grid { gap: 32px; }
  .video-grid .vg-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
}
.video-grid .vg-duration {
  position: absolute; bottom: 12px; right: 12px;
  padding: 4px 8px; font: 400 11px/1 var(--sb-mono); color: #FFFFFF;
  /* secondary-tinted badge, not pure black */
  background: rgba(var(--color-secondary-rgb), 0.9);
}
.video-grid .vg-title {
  margin-top: 12px;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-body); line-height: 1.35;
  color: var(--color-neutral-900);
}

/* ============================================================
   featured_video — sticky copy (4) / big embed (8)
   ============================================================ */
.featured-video .fv-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
@media (min-width: 1024px) {
  .featured-video .fv-grid { grid-template-columns: 4fr 8fr; gap: 64px; }
  .featured-video .fv-copy { position: sticky; top: 128px; }
}
.featured-video .fv-copy .sb-head { margin-bottom: 0; font-size: clamp(36px, 4vw, 52px); }
.featured-video .fv-copy .sb-intro { margin: 20px 0 0; font-size: var(--text-body); }

/* ============================================================
   press_logos — monochrome strip, contrast on hover (AP #9)
   ============================================================ */
.press-logos .sb-eyebrow { margin-bottom: 40px; }
.press-logos .pl-list {
  list-style: none; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  column-gap: 40px; row-gap: 24px;
}
@media (min-width: 768px) { .press-logos .pl-list { column-gap: 56px; } }
.press-logos .pl-logo {
  height: 32px; width: auto; object-fit: contain;
  filter: grayscale(1); opacity: 0.4;
  transition: filter var(--motion-hover) var(--ease-out),
              opacity var(--motion-hover) var(--ease-out);
}
@media (min-width: 768px) { .press-logos .pl-logo { height: 40px; } }
.press-logos a:hover .pl-logo, .press-logos .pl-logo:hover {
  filter: grayscale(0); opacity: 1;
}

/* ============================================================
   article_list — editorial (hero + rows) or 3-up grid
   ============================================================ */
.article-list a { text-decoration: none; }
.article-list .al-meta {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
  font: 500 var(--text-eyebrow)/1.4 var(--font-display);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--color-neutral-900); opacity: 0.55;
}
.article-list .al-cat { color: var(--color-primary); opacity: 1; }

.article-list .al-hero {
  display: grid; grid-template-columns: 1fr; gap: 32px;
  margin-bottom: clamp(64px, 7vw, 80px);
}
@media (min-width: 1024px) { .article-list .al-hero { grid-template-columns: 7fr 5fr; gap: 48px; } }
.article-list .al-hero-media {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--sb-placeholder);
}
.article-list .al-hero-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--motion-reveal) var(--ease-out);
}
.article-list .al-hero:hover .al-hero-media img { transform: scale(1.02); }
.article-list .al-hero-copy { display: flex; flex-direction: column; justify-content: center; }
.article-list .al-hero-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 3vw, 44px); line-height: 1.05;
  letter-spacing: var(--tracking-display);
  color: var(--color-neutral-900); margin-bottom: 20px;
}
.article-list .al-hero-excerpt {
  font-size: var(--text-body-lg); line-height: 1.65;
  color: var(--color-neutral-900); opacity: 0.7;
}
.article-list .al-author {
  margin-top: 24px; font-size: 14px;
  color: var(--color-neutral-900); opacity: 0.55;
}

.article-list .al-rows { list-style: none; border-top: 1px solid var(--sb-rule); }
.article-list .al-rows li { border-bottom: 1px solid var(--sb-rule); }
.article-list .al-row {
  display: grid; grid-template-columns: 1fr; gap: 6px;
  padding: 20px 0; align-items: center;
}
@media (min-width: 768px) {
  .article-list .al-row { grid-template-columns: 140px 1fr auto; gap: 16px; padding: 24px 0; }
}
.article-list .al-row-cat {
  font: 500 10px/1.4 var(--font-display);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-primary); opacity: 0.85;
}
.article-list .al-row-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(17px, 1.3vw, 22px); line-height: 1.35;
  color: var(--color-neutral-900);
  transition: opacity var(--motion-hover) var(--ease-out);
}
.article-list .al-row:hover .al-row-title { opacity: 0.75; }
.article-list .al-row-date {
  font: 400 12px/1.4 var(--sb-mono); text-align: left;
  color: var(--color-neutral-900); opacity: 0.5;
}
@media (min-width: 768px) { .article-list .al-row-date { text-align: right; } }

.article-list .al-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 768px) { .article-list .al-grid { grid-template-columns: repeat(3, 1fr); } }
.article-list .al-card { display: block; }
.article-list .al-card-media {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  margin-bottom: 20px; background: var(--sb-placeholder);
}
.article-list .al-card-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--motion-reveal) var(--ease-out);
}
.article-list .al-card:hover .al-card-media img { transform: scale(1.03); }
.article-list .al-card .al-meta { margin-bottom: 8px; }
.article-list .al-card-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 20px; line-height: 1.35; letter-spacing: -0.01em;
  color: var(--color-neutral-900);
}
.article-list .al-card-excerpt {
  margin-top: 12px; font-size: 14px; line-height: 1.6;
  color: var(--color-neutral-900); opacity: 0.65;
}

/* ============================================================
   filter_chips — pill chips (the one sanctioned 9999px shape)
   ============================================================ */
.filter-chips .fc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filter-chips .fc-eyebrow {
  margin-right: 8px;
  font: 500 10px/1.4 var(--font-display);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--color-neutral-900); opacity: 0.5;
}
.filter-chips .fc-chip {
  padding: 8px 16px; border-radius: 9999px; cursor: pointer;
  font: 600 12px/1 var(--font-display); letter-spacing: 0.04em;
  background: transparent; color: var(--color-neutral-900);
  border: 1px solid var(--sb-rule);
  transition: background var(--motion-hover) var(--ease-out),
              color var(--motion-hover) var(--ease-out),
              border-color var(--motion-hover) var(--ease-out);
}
.filter-chips .fc-chip:hover { border-color: var(--color-neutral-900); }
.filter-chips .fc-chip.active {
  background: var(--color-primary); color: var(--cta-text-on-primary);
  border-color: var(--color-primary);
}
.filter-chips .fc-clear {
  margin-left: 4px; padding: 0; border: 0; background: transparent; cursor: pointer;
  font: 400 12px/1.4 var(--font-body); text-decoration: underline;
  color: var(--color-neutral-900); opacity: 0.55;
}
.filter-chips .fc-clear:hover { opacity: 0.8; }

/* ============================================================
   fundraising_progress — big number + primary-filled bar
   ============================================================ */
.fundraising-progress .fp-top {
  display: grid; grid-template-columns: 1fr; gap: 40px;
  align-items: end; margin-bottom: clamp(40px, 5vw, 56px);
}
@media (min-width: 1024px) { .fundraising-progress .fp-top { grid-template-columns: 7fr 5fr; gap: 64px; } }
.fundraising-progress .fp-copy .sb-intro { margin-bottom: 0; }
@media (min-width: 1024px) { .fundraising-progress .fp-figure { text-align: right; } }
.fundraising-progress .fp-raised {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(56px, 8vw, 112px); line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--color-neutral-900);
}
.fundraising-progress .fp-goal {
  margin-top: 12px;
  font: 400 14px/1.4 var(--sb-mono);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-neutral-900); opacity: 0.55;
}
.fundraising-progress .fp-bar {
  position: relative; height: 12px; width: 100%; overflow: hidden;
  background: var(--sb-placeholder); border: 1px solid var(--sb-rule);
}
.fundraising-progress .fp-fill {
  position: absolute; top: 0; bottom: 0; left: 0;
  background: var(--color-primary);
  transition: width var(--motion-reveal) var(--ease-out);
}
.fundraising-progress .fp-meta {
  margin-top: 16px; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 12px;
  font: 400 14px/1.4 var(--font-display);
  color: var(--color-neutral-900); opacity: 0.65;
}
.fundraising-progress .fp-contributors strong { font-weight: 700; }
.fundraising-progress .fp-deadline {
  font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

/* ============================================================
   donation_cta — centered give moment (source layout), preset pills
   ============================================================ */
.donation-cta .dc-inner { max-width: 48rem; margin: 0 auto; text-align: center; }
.donation-cta .sb-intro { margin-left: auto; margin-right: auto; }
.donation-cta .dc-form { display: flex; flex-direction: column; gap: 20px; align-items: center; }
.donation-cta .dc-amounts {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px;
}
@media (min-width: 768px) { .donation-cta .dc-amounts { gap: 12px; } }
.donation-cta .dc-amt {
  min-width: 88px; padding: 14px 20px; cursor: pointer;
  font: 600 16px/1 var(--font-display);
  background: #FFFFFF; color: var(--color-neutral-900);
  border: 1px solid var(--sb-rule); border-radius: 0; /* crisp, not pill */
  transition: background var(--motion-hover) var(--ease-out),
              color var(--motion-hover) var(--ease-out),
              border-color var(--motion-hover) var(--ease-out);
}
.donation-cta .dc-amt:hover { border-color: var(--color-neutral-900); }
.donation-cta .dc-amt.active {
  background: var(--color-primary); color: var(--cta-text-on-primary);
  border-color: var(--color-primary);
}
.donation-cta .dc-custom { position: relative; width: 100%; max-width: 24rem; }
.donation-cta .dc-dollar {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  font: 400 18px/1 var(--font-display);
  color: var(--color-neutral-900); opacity: 0.5;
}
.donation-cta .dc-custom input {
  width: 100%; padding: 12px 16px 12px 36px; text-align: center;
  font: 400 var(--text-body)/1.5 var(--font-body);
  background: #FFFFFF; color: var(--color-neutral-900);
  border: 1px solid var(--sb-rule); border-radius: 0;
}
.donation-cta .dc-custom input:focus { outline: none; border-color: var(--color-neutral-900); }
.donation-cta .sb-cta { margin-top: 8px; }

/* ============================================================
   donor_wall — tier headers + three-column name grid
   ============================================================ */
.donor-wall .dw-tier { margin-bottom: clamp(48px, 5vw, 64px); }
.donor-wall .dw-tier:last-child { margin-bottom: 0; }
.donor-wall .dw-tier-head {
  display: flex; align-items: baseline; gap: 16px;
  margin-bottom: 24px; padding-bottom: 12px;
  border-bottom: 1px solid var(--sb-rule);
}
.donor-wall .dw-tier-label {
  font-family: var(--font-display); font-weight: 700;
  font-size: 20px; letter-spacing: -0.01em;
  color: var(--color-neutral-900);
}
.donor-wall .dw-tier-min {
  font: 400 12px/1.4 var(--sb-mono);
  color: var(--color-neutral-900); opacity: 0.45;
}
.donor-wall .dw-names {
  list-style: none;
  display: grid; grid-template-columns: 1fr;
  column-gap: 32px; row-gap: 8px;
  font-size: var(--text-body); color: var(--color-neutral-900);
}
@media (min-width: 640px) { .donor-wall .dw-names { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .donor-wall .dw-names { grid-template-columns: repeat(3, 1fr); } }
.donor-wall .dw-names li { padding: 6px 0; }
.donor-wall .dw-note { opacity: 0.5; }

/* ============================================================
   scholarship_form — single narrow column, editorial restraint
   ============================================================ */
.scholarship-form .sf-inner { max-width: 48rem; margin: 0 auto; }
.scholarship-form .sf-deadline {
  font: 400 var(--text-eyebrow)/1.4 var(--sb-mono);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-neutral-900); opacity: 0.45;
}
.scholarship-form .sb-intro { margin-bottom: 48px; }
.scholarship-form .sf-form { display: flex; flex-direction: column; gap: 24px; }
.scholarship-form .sf-row-2 { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 768px) { .scholarship-form .sf-row-2 { grid-template-columns: 1fr 1fr; } }
.scholarship-form .sf-footer {
  padding-top: 8px; display: flex; flex-direction: column; gap: 16px;
}
.scholarship-form .sf-footer .sb-cta { align-self: flex-start; }
.scholarship-form .sf-privacy {
  max-width: 28rem; font-size: 12px; line-height: 1.6;
  color: var(--color-neutral-900); opacity: 0.5;
}