@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

:root {
  --bs-primary: #d34522;
  --site-left-margin: max(1rem, calc((100vw - 64.375rem) / 2));
  --bs-primary-rgb: 211, 69, 34;
  --bs-body-font-family: 'Roboto', Arial, sans-serif;
  --bs-body-color: #040404;
  --bs-body-line-height: 1.485;
  --site-accent: #e7672b;
  --site-light: #f6f5f2;
  --site-soft: #f5f5f5;
  --site-border: #d9d9d9;
  --site-muted: #979797;
  --site-dark: #656565;
  --site-black: #000;
  --site-section-space: clamp(4.5rem, 8vw, 7.75rem);
}

html,
body {
  min-height: 100vh;
}

body {
  display: flex;
  flex-direction: column;
  background: var(--site-light);
}

#site_main {
  flex: 1 0 auto;
  background-color: var(--site-light);
}

#site_footer {
  margin-top: auto;
}


.donate-intro {
  text-align: left;
}

.donate-intro__heading {
  font-size: clamp(1.75rem, 4vw, 1.5rem);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: -1rem;
  color: var(--bs-primary);
  font-family: var(--bs-body-font-family);
}

.donate-intro__lead {
  font-size: 1.125rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.donor-contact {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.donor-contact ul {
  white-space: nowrap;
}

.donor-contact__photo {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: cover;
  object-position: top;
  border-radius: 50%;
  flex-shrink: 0;
}

#trustee-form {
  width: 600px;
  margin-inline: auto;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

/* Inline content links — orange + underline. Scoped to prose elements so
   nav links, action cards, buttons-as-links, etc. keep their own styling. */
p a, li a, dd a {
  color: var(--bs-primary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

p a:hover, p a:focus-visible,
li a:hover, li a:focus-visible,
dd a:hover, dd a:focus-visible {
  color: var(--site-accent);
}

.site-container {
  width: min(100% - 2rem, 64.375rem);
  margin-inline: auto;
}

.body-content {
  padding: calc(var(--site-section-space) / 2) 0;
  text-align: center;
}

.section-space {
  padding: var(--site-section-space) 0;
}

.section-heading {
  max-width: 51.9375rem;
}

.section-heading--light {
  max-width: 58.75rem;
}

h2,
.section-title,
.display-title,
.issue-title,
.future-card__title,
.story-row__name,
.action-card__title,
.hero-donor__title,
.hero-donor__panel-title,
/* Heading scale — Bootstrap RFS pattern: calc(base + Nvw) below 1200px,
   locked at the max above. Use semantic h1–h6 elements; apply .h1/.h2/.h3
   etc. as a visual override when the desired size differs from the
   semantic level (e.g. <h2 class="h3"> for an h2 sized like an h3). */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  line-height: 1.15;
  color: var(--bs-primary);
}

h2,
.subpage-subheading {
  color:var(--bs-body-color)
}

h1, .h1 { font-size: calc(1.9375rem + 2.92vw); }  /* max 4.125rem (66px), ~31px floor */
h2, .h2 { font-size: calc(2.25rem + 1.17vw);  }   /* max 3.125rem (50px) */
h3, .h3 { font-size: calc(1.625rem + 0.75vw); }   /* max 2.1875rem (35px) */
h4, .h4 { font-size: calc(1.25rem + 0.42vw);  }   /* max 1.5625rem (25px) */
h5, .h5 { font-size: calc(1.125rem + 0.17vw); }   /* max 1.25rem (20px) */
h6, .h6 { font-size: 1rem; }

@media (min-width: 1200px) {
  h1, .h1 { font-size: 4.125rem; }
  h2, .h2 { font-size: 3.125rem; }
  h3, .h3 { font-size: 2.1875rem; }
  h4, .h4 { font-size: 1.5625rem; }
  h5, .h5 { font-size: 1.25rem; }
}

/* Headings that follow prose content get extra top margin so the section
   break is visible without needing wrapper divs around heading + body. */
* + h2, * + .h2,
* + h3, * + .h3,
* + h4, * + .h4 {
  margin-top: 2.5rem;
}

.future-section__question {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
}

.section-title,
.display-title {
  margin: 0 0 1.5rem;
  line-height: 1.06;
}

.display-title {
  color: #fff;
}

.display-title--accent {
  color: var(--bs-primary);
}

.section-copy {
  font-size: clamp(1.0625rem, 1.65vw, 1.25rem);
  line-height: 1.485;
}

.section-copy--wide {
  max-width: 51.6875rem;
  margin-inline: auto;
}

.btn {
  border-radius: 0;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.2;
  padding: 1.15rem 1.5rem;
  text-transform: uppercase;
}

.btn:hover,
.btn:focus-visible {
  box-shadow: none;
}

/* Bootstrap's compiled CSS hardcodes blue hex values in component-level variables.
   Override them here so btn-primary and btn-outline-primary use the brand orange. */
.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: #b93818;
  --bs-btn-hover-border-color: #b93818;
  --bs-btn-active-bg: #b93818;
  --bs-btn-active-border-color: #b93818;
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

/* btn-outline-light hover: orange text on white (differs from Bootstrap's default black) */
.btn-outline-light:hover,
.btn-outline-light:focus-visible {
  color: var(--bs-primary);
}

.site-header {
  background: var(--site-light);
  border-bottom: 0;
}

.site-header-shell {
  padding-inline: clamp(1rem, 3.4vw, 5.625rem);
}

.site-header-bar {
  min-height: 6.875rem;
  gap: 1rem;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.site-brand-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.site-back-link {
  font-size: 0.8125rem;
  color: var(--site-muted);
  text-decoration: none;
}

.site-back-link:hover {
  color: var(--bs-primary);
  text-decoration: underline;
}

.site-logo {
  width: auto;
  height: clamp(1.55rem, 2.55vw, 2.307rem);
  max-width: min(100%, 22.076rem);
}

.site-donate-button {
  min-width: 15rem;
}

.site-donate-button--sm {
  min-width: 0;
  font-size: 0.9375rem;
  padding: 0.65rem 1.1rem;
}

.hero-donor {
  position: relative;
  padding-bottom: clamp(4rem, 8vw, 6rem);
}

.hero-donor__backdrop {
  min-height: clamp(33rem, 58vw, 51.625rem);
  background: url('../images/capital-campaign-hero-bg.webp') center center / cover no-repeat;
}

.hero-donor__headline-wrap {
  position: relative;
  min-height: inherit;
  padding-top: clamp(8rem, 14vw, 14rem);
}

.hero-donor__headline-box {
  position: relative;
  max-width: 38.25rem;
  margin-left: clamp(0rem, 5vw, 5.5625rem);
  color: #fff;
}

.hero-donor__headline-box::before {
  content: '';
  position: absolute;
  inset: -1rem -2.25rem -2rem -100vw;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-left: 0;
}

.hero-donor__title {
  position: relative;
  margin: 0 0 1.75rem;
  color: #fff;
  line-height: 1.03;
}

.hero-donor__eyebrow {
  position: relative;
  color: var(--bs-primary);
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
}

.hero-donor__panel-wrap {
  margin-top: clamp(-11.25rem, -9vw, -8rem);
}

.hero-donor__panel {
  background: var(--site-light);
  padding: clamp(2rem, 4vw, 4.25rem) clamp(1.5rem, 5vw, 5.75rem) clamp(2.25rem, 4vw, 4rem);
}

.hero-donor__panel-title {
  margin: 0 0 1.125rem;
  text-align: center;
}

.hero-donor__panel-copy {
  max-width: 48.5625rem;
  margin: 0 auto;
  font-size: clamp(1.0625rem, 1.65vw, 1.25rem);
  text-align: center;
}

.hero-donor__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem 1.5rem;
  margin-top: 2.5rem;
}

/* Match widths so the Donate Now container equals the Explore Ways to Give button */
.hero-donor__actions .btn {
  width: 20rem;
  max-width: 100%;
}

.intro-section {
  overflow: hidden;
  background: var(--site-light);
  padding-top: clamp(2rem, 5vw, 4rem);
}

.intro-art {
  position: relative;
  height: clamp(16rem, 24.5vw, 22rem);
  margin-bottom: clamp(4rem, 6.2vw, 5.5625rem);
}

/* Heading must sit above the decorative art blocks that overlap it slightly.
   Max-width keeps text clear of the right-bottom block. The mid-screen value
   is intentionally narrower because the right-bottom block scales by vw and
   encroaches further into the centered text area as the viewport narrows. */
.intro-section .section-heading {
  position: relative;
  z-index: 1;
  max-width: clamp(20rem, 50vw, 54rem);
  margin-inline: auto;
}

.intro-art__block {
  position: absolute;
  overflow: hidden;
  background: var(--site-border);
}

.intro-art__block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Scale corner blocks ~17% larger from their pinned anchor */
.intro-art__block--left-top,
.intro-art__block--left-bottom {
  transform: scale(1.17);
  transform-origin: top left;
}

.intro-art__block--right-top,
.intro-art__block--right-bottom {
  transform: scale(1.17);
  transform-origin: top right;
}

.intro-art__block--center {
  transform: scale(1.17);
  transform-origin: top center;
}

/* Center: 520×340 at 1440px design — centered, full container height */
.intro-art__block--center {
  top: 0;
  left: 50%;
  width: clamp(20rem, 36.1vw, 32.5rem);
  height: 100%;
  transform: translateX(-50%);
}

/* Left-upper: 282×204 at 1440px — pinned to left viewport edge, top=61px */
.intro-art__block--left-top {
  left: calc(-1 * var(--site-left-margin));
  top: clamp(1.5rem, 4.24vw, 3.8125rem);
  width: clamp(8rem, 19.58vw, 17.625rem);
  height: clamp(6rem, 14.17vw, 12.75rem);
}

/* Left-lower: 119×151 at 1440px — pinned to left viewport edge, top=322px */
.intro-art__block--left-bottom {
  left: calc(-1 * var(--site-left-margin));
  top: clamp(12rem, 22.36vw, 20.125rem);
  width: clamp(3.5rem, 8.26vw, 7.4375rem);
  height: clamp(5rem, 10.49vw, 9.4375rem);
}

/* Right-upper: enlarged ~25% from original 119×151 design */
.intro-art__block--right-top {
  right: calc(-1 * var(--site-left-margin));
  top: clamp(1.5rem, 4.24vw, 3.8125rem);
  width: clamp(4.5rem, 10.3vw, 9.3125rem);
  height: clamp(6rem, 13.1vw, 11.8125rem);
}

/* Right-lower: 282×204 at 1440px — anchor pushed down to clear the
   larger right-top block above (right-top scaled visual bottom ≈ 17.6rem
   at desktop max, so right-bottom top ≥ 18rem keeps a clear gap). */
.intro-art__block--right-bottom {
  right: calc(-1 * var(--site-left-margin));
  top: clamp(10.5rem, 21vw, 18.5rem);
  width: clamp(8rem, 19.58vw, 17.625rem);
  height: clamp(6rem, 14.17vw, 12.75rem);
}

.issue-section {
  padding-bottom: var(--site-section-space);
}

.issue-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 26.25rem);
  align-items: center;
  gap: 2.5rem 5rem;
  padding: 3rem 0;
  border-top: 1px solid #cfcfcf;
}

.issue-row:first-of-type {
  border-top: 0;
}

.issue-row--last {
  padding-bottom: 0;
}

.issue-row__copy {
  max-width: 33.0625rem;
}

.issue-title {
  margin: 0 0 1.5rem;
  line-height: 1.25;
}

.issue-art-circle {
  width: min(100%, 26.25rem);
  aspect-ratio: 1;
  justify-self: end;
  overflow: hidden;
  background: var(--site-border);
}

.issue-art-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.future-section {
  background: linear-gradient(90deg, var(--site-accent) 0%, var(--bs-primary) 100%);
}

.future-section__lead {
  margin: 0 0 1rem;
  font-size: clamp(1.5rem, 2.7vw, 2.1875rem);
  line-height: 1.485;
}

.future-section__link {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.future-section__link:hover,
.future-section__link:focus-visible {
  color: var(--site-light);
}

.future-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.875rem 2rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
}

.future-card {
  background: var(--site-soft);
  border: 1px solid var(--site-light);
  padding: 3.1875rem 2.875rem 2.125rem;
  color: #000;
}

.future-card__media {
  height: clamp(12rem, 18vw, 16.8125rem);
  margin-bottom: 2rem;
  overflow: hidden;
  background: var(--site-border);
}

.future-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.future-card__title {
  margin: 0 0 0.75rem;
  color: #000;
  line-height: 1.485;
}

.future-card__copy {
  font-size: clamp(1rem, 1.45vw, 1.25rem);
  line-height: 1.485;
}

.future-section__cta {
  margin-top: clamp(3rem, 6vw, 4.5rem);
}

.future-section__question {
  margin: 0 0 0.5rem;
  font-size: clamp(2rem, 3vw, 2.1875rem);
  line-height: 1.485;
}

.stories-section {
  background: var(--site-light);
}

.stories-section .section-heading {
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}

.story-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 32.1875rem);
  align-items: stretch;
  gap: 0;
  margin-bottom: 1.875rem;
  border-bottom: 0.375rem solid var(--bs-primary);
}

.story-row__media {
  min-height: 24rem;
  background: var(--site-border);
}

.story-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-row__content {
  background: #fff;
  padding: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 4vw, 3rem);
}

.story-row__name {
  margin: 0;
  color: #000;
  line-height: 1.35;
}

.story-row__location {
  margin: 1rem 0 1.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.485;
}

.story-row--last {
  margin-bottom: 0;
}

.actions-section {
  background: var(--site-dark);
  padding-top: calc(var(--site-section-space) + 1.5rem);
  padding-bottom: calc(var(--site-section-space) + 1.5rem);
}

.actions-section__heading {
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}

.actions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.875rem 2.1875rem;
}

.action-card {
  display: flex;
  flex-direction: column;
  background: var(--site-light);
}

/* Text area: grows to fill the card height so buttons align across a row */
.action-card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 3rem 1.9375rem 2.5rem;
}

.action-card__title {
  margin: 0 0 1rem;
  line-height: 1.485;
}

.action-card__copy {
  margin: 0 0 2rem;
  font-size: clamp(1rem, 1.45vw, 1.25rem);
  line-height: 1.485;
}

/* mt-auto in HTML pushes button to bottom of body; keep width fit-content at desktop */
.action-card .btn {
  width: fit-content;
  max-width: 100%;
}

.action-card__media {
  flex-shrink: 0;
  height: 28.125rem;
  background: var(--site-border);
}

.action-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-footer {
  background: #000;
  color: #fff;
}

.site-footer-shell {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem 3rem;
  min-height: 15.75rem;
  padding: 3.5rem clamp(1rem, 4.2vw, 6.5625rem) 3.0625rem;
}

.site-footer-left {
  flex: 0 1 auto;
  min-width: 0;
}

.site-footer-tagline {
  color: var(--bs-primary);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.15;
}

.site-footer-campaign {
  margin-top: 0.35rem;
  font-size: 1.125rem;
  line-height: 1.2;
}

.site-footer-note {
  margin-top: 2.125rem;
  color: var(--site-muted);
  font-size: 0.9375rem;
  line-height: 1.2;
}

.site-footer-right {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  width: min(100%, 23.375rem);
  min-width: 0;
  margin-left: auto;
}

.site-footer-logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.site-footer-logo {
  width: min(100%, 22.076rem);
  aspect-ratio: 353.222 / 36.9107;
  height: auto;
}

.site-footer-contact {
  margin-top: 1.125rem;
  font-style: normal;
  color: #fff;
  font-size: 1.125rem;
  line-height: 1.735;
  text-align: right;
}

.site-footer-link:hover,
.site-footer-link:focus-visible {
  color: inherit;
}

@media (max-width: 991.98px) {
  .hero-donor__headline-box {
    margin-left: 1rem;
  }

  .hero-donor__headline-box::before {
    inset: -0.875rem -1.25rem -1.5rem -100vw;
  }

  .issue-row,
  .story-row,
  .actions-grid,
  .future-grid {
    grid-template-columns: 1fr;
  }

  .issue-art-circle,
  .story-row__media,
  .action-card__media {
    justify-self: stretch;
  }

  .issue-art-circle {
    width: 100%;
  }

  .issue-row__copy {
    max-width: none;
  }

  .issue-row {
    gap: 2rem;
  }

  .story-row__media {
    min-height: 20rem;
  }

  .story-row__content {
    padding: 2rem 1.5rem;
  }

  .action-card__body {
    padding-bottom: 2rem;
  }

  .future-card {
    padding: 2rem 1.5rem;
  }
}

@media (max-width: 767.98px) {
  .site-container {
    width: min(100% - 1.5rem, 64.375rem);
  }

  .site-header-bar {
    min-height: 5.25rem;
  }

  .site-donate-button {
    min-width: 0;
    padding: 0.9rem 1rem;
    font-size: 0.95rem;
  }

  .hero-donor__backdrop {
    background-position: 72% center;
  }

  .hero-donor__headline-wrap {
    padding-top: 8.5rem;
  }

  .hero-donor__headline-box {
    max-width: 20rem;
    margin-left: 0.25rem;
  }

  .hero-donor__headline-box::before {
    inset: -0.75rem -1rem -1.125rem -100vw;
  }

  .hero-donor__panel-wrap {
    margin-top: -3rem;
  }

  .hero-donor__panel {
    padding: 1.75rem 1rem;
  }

  .hero-donor__actions {
    flex-direction: column;
  }

  .hero-donor__actions .btn,
  .action-card .btn {
    width: 100%;
  }

  .intro-art {
    height: 12rem;
  }

  .intro-art__block--center {
    width: 55%;
  }

  /* Left-upper and right-lower are the wider blocks */
  .intro-art__block--left-top,
  .intro-art__block--right-bottom {
    width: 20vw;
    height: 6rem;
  }

  /* Left-lower and right-upper are the narrow blocks */
  .intro-art__block--left-bottom,
  .intro-art__block--right-top {
    width: 9vw;
    height: 5rem;
  }

  /* Recalculate top positions at 12rem container height */
  .intro-art__block--left-top,
  .intro-art__block--right-top {
    top: 1.25rem;
  }

  .intro-art__block--left-bottom {
    top: 10rem;
  }

  .intro-art__block--right-bottom {
    top: 7.5rem;
  }

  .issue-row {
    padding: 2.25rem 0;
  }

  .issue-art-circle {
    width: min(100%, 19rem);
    margin-inline: auto;
  }

  .future-section__lead {
    font-size: 1.5rem;
  }

  .future-card__media,
  .action-card__media {
    height: 15rem;
  }

  .story-row__media {
    min-height: 15rem;
  }

  .site-footer-shell {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    min-height: 0;
    padding: 2.5rem 1rem;
    text-align: center;
  }

  .site-footer-left {
    width: 100%;
  }

  .site-footer-right {
    align-items: center;
    width: 100%;
    margin-left: 0;
  }

  .site-footer-contact {
    text-align: center;
  }
}