body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #fafafa;
  color: #333;
  text-align: center;
}

/* Wider page so two columns fit */
.container {
  max-width: 1100px;   /* was 700px */
  margin: 0 auto;
  padding: 2rem;
}

/* Two-column layout */

/* Column sizing */
.left-col  { flex: 0 0 380px; max-width: 420px; }
.right-col { flex: 1 1 0;     text-align: left; }

/* Image tweaks when used in the left column */
.hero-image {
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin-bottom: 0;    /* remove extra gap under the hero in a side column */
}

/* Mobile: stack nicely */
@media (max-width: 820px) {
  .two-column { flex-wrap: wrap; }
  .left-col, .right-col { flex: 1 1 100%; max-width: 100%; }
}

.hero-image {
  width: 100%;
  max-width: 400px;
  border-radius: 12px;
  margin-bottom: 1.5rem;
}

h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.tribute {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.donate-button {
  background-color: #0070f3;
  color: white;
  text-decoration: none;
  padding: 1rem 2rem;
  border-radius: 8px;
  font-size: 1.2rem;
  transition: background-color 0.2s ease;
}

.donate-button:hover {
  background-color: #005bb5;
}
.subhead { margin-top: -0.25rem; color: #666; }
.quote { font-style: italic; margin: 0.5rem 0 1.5rem; }
.story { text-align: left; line-height: 1.6; margin: 0 auto 2rem; max-width: 680px; }
.sponsor { margin-top: 1.25rem; font-size: 0.95rem; color: #666; }

.two-column {
  display: flex;
  flex-wrap: nowrap;
  gap: 2.5rem;
  align-items: center;   /* was flex-start */
}

.left-col {
  flex: 1 1 300px;
  max-width: 400px;
}

.right-col {
  flex: 2 1 500px;
  text-align: left;
}

.hero-image {
  width: 100%;
  border-radius: 12px;
}

/* Typography + spacing */
h1 { font-size: 2.4rem; line-height: 1.15; margin: 0 0 .25rem; }
.subhead { margin: .1rem 0 .35rem; color:#666; font-size:1.05rem; }
.quote { font-style: italic; text-align: center; margin: .25rem 0 1.25rem; }

/* Two-column polish */
.container { max-width: 1100px; }
.two-column { gap: 2.5rem; align-items: flex-start; }

/* Left image column */
.left-col { flex: 0 0 380px; max-width: 420px; }
.hero-image { width: 100%; height: auto; border-radius: 12px; margin: 0; display:block; }

/* Right text column card */
.right-col {
  flex: 1 1 0;
  text-align: left;
  background: #ffffff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}

/* Story text */
.story { max-width: 64ch; margin: 0; line-height: 1.7; }
.story p { margin: 0 0 1rem; }

/* CTA and sponsor */
.donate-button { display:inline-block; margin-top: 1rem; }
.sponsor { margin-top: .75rem; color:#666; }

/* Mobile stack */
@media (max-width: 820px) {
  .two-column { flex-wrap: wrap; }
  .left-col, .right-col { flex: 1 1 100%; max-width: 100%; }
  .right-col { padding: 1.25rem 1rem; }
  h1 { font-size: 2rem; }
}

/* Vertical centering fix */
.two-column { align-items: stretch !important; }   /* let both columns be same height */
.left-col { display: flex; align-items: center; }  /* center the photo vertically */