/* Source Sans 3, Adobe's open-source variable typeface (SIL OFL 1.1).
   Keep the site's typography here; colors, imagery, and layout live in styles.css. */
@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/fonts/source-sans-3-roman.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}

:root {
  --sans: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --type-body: 18px;
  --type-h1: clamp(36px, calc(22px + 3.2vw), 62px);
  --type-h2: clamp(30px, calc(23px + 1.6vw), 44px);
  --type-h3: clamp(24px, calc(21px + .4vw), 27px);
}

body { font: 400 var(--type-body)/1.65 var(--sans); }
button, input, select, textarea { font: inherit; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: var(--type-h1); line-height: 1.12; letter-spacing: -.02em; }
h2 { font-size: var(--type-h2); line-height: 1.18; letter-spacing: -.015em; }
h3 { font-size: var(--type-h3); line-height: 1.25; letter-spacing: -.01em; font-weight: 600; }
strong, b { font-weight: 600; }
p { text-wrap: pretty; }
.copy > p, .legacy-bio > p, .faq p, .timeline p { max-width: 65ch; }
small, .small, .privacy-note { font-size: 15px; line-height: 1.55; }
.lead, .mission-line { font-size: 20px; line-height: 1.6; }
.eyebrow {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .01em;
  text-transform: none;
}

/* Shared navigation and controls: readable labels, restrained emphasis. */
.utility { font-size: 14px; line-height: 1.4; }
.brand-name { font-size: 13px; font-weight: 600; line-height: 1.35; }
.nav { font-size: 16px; font-weight: 600; line-height: 1.35; }
.menu-toggle { font-size: 16px; font-weight: 600; line-height: 1.35; }
.button, .text-link, .filter-button {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}
.button { max-width: 100%; text-align: center; }
.text-link { max-width: 100%; }
.search { font-size: 18px; line-height: 1.5; }
.breadcrumb, .back { font-size: 15px; line-height: 1.5; }
.result-count { font-size: 16px; }

/* Main headings use the same family and let the available width set the lines. */
.hero h1 { font-size: clamp(38px, calc(28px + 3vw), 72px); line-height: 1.08; }
.hero h1 em { font: inherit; }
.hero p { font-size: 20px; line-height: 1.55; }
.hero-bottom .wrap, .hero-bottom a { font-size: 14px; line-height: 1.45; }
.page-hero p { font-size: 20px; line-height: 1.6; }
.week-title { font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.week-item span { font-size: 15px; font-weight: 400; line-height: 1.4; }
.week-item strong { font-size: 22px; font-weight: 600; line-height: 1.4; }
.week-item a { font-size: 15px; line-height: 1.5; }
.photo-stack .photo-label { font-size: 25px; font-weight: 600; line-height: 1.25; }
.step-number { font-size: 30px; font-weight: 600; line-height: 1.2; }
.step h3 { font-size: 26px; }
.step .text-link { font-size: 16px; }
.pastor-signature { font-size: 26px; font-weight: 600; line-height: 1.3; }
.pastor-placeholder > span { font-size: 80px; font-weight: 600; line-height: 1.2; }

/* Cards and secondary pages share the same body size as the surrounding page. */
.event-card h3, .ministry-card h3, .info-block h3, .values h3,
.timeline h3, .recording h3, .visit-times h3, .giving-panel h3,
.contact-box h3 { font-size: var(--type-h3); }
.event-card p, .ministry-card p, .info-block p, .values p,
.recording p, .giving-panel p, .step p { font-size: var(--type-body); line-height: 1.65; }
.date-block span { font-size: 14px; font-weight: 600; line-height: 1.4; text-transform: uppercase; }
.date-block strong { font-size: 48px; font-weight: 600; line-height: 1.15; }
.event-card .eyebrow, .ministry-card .eyebrow, .recording .eyebrow { font-size: 14px; }
.event-card .event-time, .event-card .event-date { font-size: 16px; font-weight: 600; line-height: 1.5; }
.event-card .text-link, .ministry-card .text-link { font-size: 16px; }
.video-label { font-size: 14px; font-weight: 600; line-height: 1.4; gap: 12px; flex-wrap: wrap; }
.play { font-size: 24px; line-height: 1; }
.schedule-row strong { font-size: 18px; font-weight: 600; line-height: 1.4; }
.schedule-row span { font-size: 16px; line-height: 1.5; }
.schedule-row b { font-size: 22px; font-weight: 600; line-height: 1.2; }
.faq summary { font-size: 21px; font-weight: 600; line-height: 1.4; }
.faq summary:after { font-size: 29px; font-weight: 400; line-height: 1.4; }
.timeline .year { font-size: 28px; font-weight: 600; line-height: 1.25; }
.contact-link small, .event-meta small { font-size: 14px; line-height: 1.5; }
.contact-link strong { font-size: 20px; font-weight: 600; line-height: 1.4; }
.event-meta strong { font-weight: 600; }
.bootcamp-art strong { font-size: clamp(36px, 4.2vw, 58px); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.bootcamp-art span { font-size: 15px; font-weight: 600; line-height: 1.4; }
.mission-statement p { font-size: 20px; line-height: 1.65; }
.legacy-bio h2 { font-size: clamp(30px, calc(22px + 1.8vw), 42px); }
.legacy-role { font-size: 16px; line-height: 1.5; }
.legacy-subtitle { font-size: 25px; font-weight: 600; line-height: 1.35; }
.legacy-tribute p { font-size: clamp(24px, calc(20px + .8vw), 30px); font-weight: 600; line-height: 1.4; }

/* Footer text stays readable and long contact addresses wrap within their column. */
.footer { font-size: 16px; line-height: 1.65; }
.footer h3 { font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: 0; }
.footer-name { font-size: 28px; font-weight: 600; line-height: 1.2; }
.footer p { line-height: 1.65; }
.footer-grid > div { min-width: 0; }
.footer a { overflow-wrap: anywhere; }
.footer-bottom { font-size: 14px; line-height: 1.5; }
.carousel-toggle { font-size: 20px; line-height: 1; }
.carousel-count { font-size: 12px; line-height: 1.4; letter-spacing: 0; }

@media (max-width: 900px) {
  .nav, .nav > a:not(.button), .about-menu summary { font-size: 18px; }
  .nav .button { font-size: 18px; }
  .photo-stack .photo-label { font-size: 23px; }
  .week-item strong { font-size: 21px; }
}

@media (max-width: 650px) {
  :root { --type-body: 17px; }
  .utility { font-size: 12px; }
  .brand-name { font-size: 11px; }
  .header-inner { gap: 10px; }
  .brand { gap: 9px; }
  .brand-name { padding-left: 10px; }
  .menu-toggle { font-size: 15px; padding-inline: 10px; }
  .button { padding-inline: 16px; gap: 12px; }
  .hero .actions { flex-wrap: wrap; }
  .hero p, .page-hero p, .lead, .mission-line { font-size: 18px; }
  .hero .eyebrow { font-size: 14px; max-width: 32ch; }
  .hero-bottom .wrap, .hero-bottom a { font-size: 12px; }
  .week-title { font-size: 26px; }
  .week-item strong { font-size: 19px; }
  .step h3 { font-size: 24px; }
  .step .text-link { gap: 8px; }
  .date-block strong { font-size: 44px; }
  .schedule-row { gap: 12px; }
  .schedule-row b { font-size: 20px; }
  .faq summary { font-size: 19px; }
  .contact-link strong { font-size: 18px; }
  .mission-statement p { font-size: 18px; }
  .legacy-subtitle { font-size: 24px; }
}