/* Campaign visual system: ivory editorial pages, navy emphasis, restrained blue accents.
   Loaded after the original layout so the established content and responsive behavior remain intact. */
:root {
  --paper: #f7f5ef;
  --ink: #102645;
  --ink-deep: #081e38;
  --surface: #ffffff;
  --surface-soft: #edf1f4;
  --muted: #526276;
  --card-radius: 24px;
  --soft-shadow: 0 12px 36px rgba(8, 30, 56, .06);
  --line: rgba(16, 38, 69, .16);
}

/* One quiet canvas ties the personal story, record, and participation sections together. */
body,
.intro-section,
.family-story,
.experience-section,
.teacher-section,
.leadership-path,
.believe-section,
.coco-section,
.endorsement-archive-page,
.endorsement-submission,
.endorsement-library,
.privacy-page {
  background: var(--paper);
  color: var(--ink);
}

.priorities-section,
.endorsement-section,
.join-section,
.site-footer,
.archive-header,
.archive-hero,
.archive-cta,
.archive-footer,
.privacy-header,
.privacy-footer { background: var(--ink-deep); }

.hero::before,
.believe-section::after,
.endorsement-section::before,
.endorsement-submission::before,
.endorsement-form::before,
.archive-cta::before { content: none; }

.hero::after { background: none; }
.archive-hero::after { height: 3px; background: #66a8ff; }
.archive-hero::before {
  background:
    linear-gradient(90deg, #081e38 0%, rgba(8,30,56,.98) 30%, rgba(8,30,56,.86) 49%, rgba(8,30,56,.28) 76%, rgba(8,30,56,.14) 100%),
    linear-gradient(0deg, rgba(8,30,56,.8), transparent 48%);
}

/* Preserve the requested gradient marquee as the single full-width color accent. */
.belief-band { background: linear-gradient(100deg, #0a3266 0%, #10458f 48%, #432a83 100%); }
.belief-band:hover .belief-track,
.belief-band:focus-within .belief-track { animation-play-state: paused; }

.manifesto-wrap .eyebrow,
.experience-heading .eyebrow,
.teacher-copy .eyebrow,
.believe-copy .eyebrow { color: var(--blue-deep); }
.priorities-heading .eyebrow { color: var(--yellow); }
.experience-heading > p:last-child,
.teacher-lede,
.video-note { color: var(--muted); }

/* Fewer competing glass effects. Consistent corners and modest shadows. */
.hero-signup {
  border-color: rgba(255,255,255,.24);
  border-radius: var(--card-radius);
  background: rgba(8,30,56,.88);
  box-shadow: 0 16px 48px rgba(0,0,0,.15);
}
.family-photo::before { background: rgba(11,60,140,.2); }
.priority-card { border-radius: var(--card-radius); box-shadow: none; }
.priority-card:hover { transform: none; border-color: rgba(255,255,255,.28); box-shadow: none; }
.experience-metric {
  min-height: 245px;
  justify-content: flex-start;
  padding-top: 36px;
  background: var(--surface);
  border-color: var(--line);
  border-radius: var(--card-radius);
  backdrop-filter: none;
}
.experience-metric .credential-number { color: var(--blue-deep); font-variant-numeric: tabular-nums; }
.experience-metric p { color: var(--muted); }
.experience-button { color: var(--ink); border-color: var(--ink); }
.experience-button:hover { background: var(--ink); color: white; }
.bio-panel {
  margin-top: 88px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.bio-panel::before {
  opacity: .55;
  background:
    radial-gradient(circle, rgba(4,105,199,.42) 0 3px, transparent 3.8px) 0 0 / 24px 24px,
    radial-gradient(circle, rgba(4,105,199,.22) 0 2px, transparent 2.8px) 8px 11px / 19px 19px,
    radial-gradient(circle, rgba(4,105,199,.12) 0 4px, transparent 4.8px) 4px 6px / 38px 38px;
}

/* Editorial story sections flow together instead of changing color at every chapter. */
.teacher-section { padding-top: 0; }
.teacher-grid { padding-top: clamp(72px, 8vw, 112px); border-top: 1px solid var(--line); }
.teacher-photo { --teacher-photo-radius: 24px; }
.teacher-photo::before { inset: -18px 18px auto -18px; aspect-ratio: 1047 / 1536; border-color: rgba(11,60,140,.2); background: rgba(11,60,140,.035); }
.teacher-photo img { box-shadow: var(--soft-shadow); }
.teacher-photo-caption {
  width: 100%;
  margin: 20px 0 0;
  padding: 0 0 0 16px;
  border: 0;
  border-left: 2px solid var(--blue);
  border-radius: 0;
  background: none;
  color: var(--muted);
  box-shadow: none;
  backdrop-filter: none;
  font-size: .82rem;
}
.teacher-values span { color: var(--ink); border-color: var(--line); background: transparent; border-radius: 8px; }
.teacher-copy .text-link { color: var(--blue-deep); border-color: var(--blue-deep); }
.teacher-copy .text-link span { color: var(--blue-deep); }
.leadership-path { padding-top: 0; }
.leadership-path > .shell { border-top: 1px solid var(--line); padding-top: clamp(72px, 8vw, 112px); }
.path-route { color: var(--blue); }
.path-step { background: var(--surface); box-shadow: none; backdrop-filter: none; border-radius: var(--card-radius); }
.path-route-point circle:last-child { fill: var(--surface-soft); }
.believe-section { border-top: 1px solid var(--line); }
.believe-form,
.endorsement-form {
  background: var(--surface);
  border-color: var(--line);
  border-radius: var(--card-radius);
  box-shadow: var(--soft-shadow);
  backdrop-filter: none;
}
.believe-copy blockquote { background: transparent; box-shadow: none; border-left-color: var(--blue); padding-block: 8px; }
.testimonial-carousel { border-radius: var(--card-radius); background: rgba(255,255,255,.035); box-shadow: none; backdrop-filter: none; }
.testimonial-attribution span { color: #bcc9d8; }
.testimonial-index { color: #aabdd2; }
.join-section { padding-top: 0; }
.join-grid { padding-top: clamp(72px, 8vw, 112px); border-top: 1px solid rgba(255,255,255,.2); }
.privacy-note { color: #aab9c9; }
.archive-footer { border-top: 1px solid rgba(255,255,255,.18); }
.endorsement-library { border-top: 1px solid var(--line); }
.endorsement-submission-intro h2 { font-size: clamp(2.75rem, 4.4vw, 4.5rem); line-height: 1.03; text-wrap: balance; }
.endorsement-entry-body::before { color: var(--blue); }
.endorsement-entry-number { color: #647c98; }
.coco-photo { border-radius: var(--card-radius); }

/* Make the existing carousel controls easier to hit, without enlarging the visible dots. */
.testimonial-dots { gap: 0; }
.testimonial-dot,
.testimonial-dot.is-active { position: relative; width: 34px; height: 44px; background: transparent; }
.testimonial-dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: #9daec1; transform: translate(-50%, -50%); transition: width 180ms ease, background 180ms ease; }
.testimonial-dot.is-active::after { width: 24px; border-radius: 4px; background: var(--yellow); }
a:focus-visible,
button:focus-visible { outline: 3px solid #5599ef; outline-offset: 4px; }
section[id], #full-bio { scroll-margin-top: 160px; }

@media (max-width: 1120px) {
  .site-nav { background: var(--ink-deep); }
}
@media (max-width: 850px) {
  .bio-panel { margin-top: 64px; }
  .experience-metric { min-height: 210px; }
  .path-steps::before { background: var(--blue); }
  .path-steps::after { border-color: var(--blue); }
  .archive-hero::before { background: linear-gradient(90deg, rgba(8,30,56,.96), rgba(8,30,56,.7)), linear-gradient(0deg, #081e38, transparent 70%); }
}
@media (max-width: 560px) {
  :root { --shell: calc(100% - 40px); }
  .archive-header-inner { gap: 14px; padding-block: 20px; }
  .archive-logo { flex: 0 1 170px; min-width: 125px; }
  .archive-header-actions { flex-direction: column; align-items: flex-end; gap: 5px; }
  .archive-header-actions .button { min-height: 40px; padding: 8px 10px; font-size: .72rem; white-space: nowrap; }
  .archive-header-actions .button span:first-child { max-width: none; }
  .archive-language-switcher { font-size: .75rem; }
  .archive-language-switcher button { min-width: 32px; min-height: 32px; }
  .testimonial-controls { flex-wrap: wrap; gap: 12px; padding-inline: 20px; }
  .testimonial-arrow { width: 44px; height: 44px; }
  .testimonial-dot, .testimonial-dot.is-active { width: 28px; }
  .experience-metric { min-height: 185px; padding: 24px 16px; }
  .teacher-photo::before { inset: -12px 12px auto -10px; }
  section[id], #full-bio { scroll-margin-top: 140px; }
}
@media (max-width: 380px) {
  .header-logo { left: 0; width: calc(100% - 64px); height: auto; aspect-ratio: 1190 / 582; transform: translateY(-50%); }
  .archive-header-inner { flex-direction: column; gap: 10px; }
  .archive-logo { flex: none; width: 180px; }
  .archive-header-actions { width: 100%; flex-direction: row; justify-content: space-between; align-items: center; }
}