/* Page background: seamless, no card */
body {
  margin: 0;
  font-family: "Publico Headline", "Georgia", "Times New Roman", serif;
  background: #ffffff;  /* or just leave as default */
  color: #222222;
}

/* Main container: only width + centering, no box, no shadow */
.missive {
  max-width: 720px;
  margin: 2.5rem auto 3rem auto;
  padding: 0 1.25rem 3rem 1.25rem;
}

/* Image block above-article, stacked images */
.article-image-pair {
  width: 85%;
  margin: 0 auto 1rem auto;  /* center block, space below */
  text-align: center;        /* center inline content if needed */
}

.article-image-pair img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto 0.75rem auto;  /* center each image, space between */
}


/* If there is only one <img>, it will just take the full 85% width and be centered by the parent */


/* Header: Snell Roundhand (or closest available script) */
.missive-header h1 {
  font-family: "Snell Roundhand", "Apple Chancery", "Brush Script MT", cursive;
  font-size: 2.1rem;
  line-height: 1.2;
  text-align: center;
  margin: 0 0 1.5rem 0;
  color: #d00000; /* red header */
}

/* Sections and text, in Publico-like serif */
section {
  margin-bottom: 1.75rem;
}

/* Headlines: bolded and slightly larger than body */
h2 {
  font-family: "Publico Headline", "Georgia", "Times New Roman", serif;
  font-size: 1.35rem;
  line-height: 1.3;
  margin: 1.75rem 0 0.4rem 0;
  text-align: left;
  font-weight: 700;
}

/* Per-headline colors, as before */
.head-catless       { color: #c18ee8; }  /* lavender */
.head-preschool     { color: #ff9800; }  /* orange */
.head-kauai         { color: #607d8b; }  /* grayish blue */
.head-reunions      { color: #8b0000; }  /* dark red */
.head-folklife      { color: #2e7d32; }  /* green */
.head-lowercolumbia { color: #ff80ab; }  /* pink */
.head-tevan         { color: #ff9800; }  /* orange */
.head-disaster      { color: #2e7d32; }  /* green */

/* Body text */
p {
  font-family: "Publico Headline", "Georgia", "Times New Roman", serif;
  font-size: 1.15rem;  /* slightly larger than before */
  line-height: 1.5;
  margin: 0.25rem 0;
}

/* Divider and footer */
.missive-divider {
  border: 0;
  border-top: 1px solid #dddddd;
  margin: 2.5rem 0 1.5rem 0;
}

.missive-footer {
  text-align: center;
}

/* Card placeholders row */
.card-row {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 1.5rem 0 1rem 0;
}

.card-placeholder {
  width: 80px;
  height: 110px;
  border-radius: 6px;
  border: 2px dashed #bbbbbb;
  background: #fdf9f3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: #777777;
}

/* If you later have real images, replace each card-placeholder with:
   <img src="images/card1.jpg" alt="Holiday card 1" class="card-image">
   and then:
   .card-image { width: 80px; height: auto; border-radius: 6px; }
*/

/* Colored signoff */
.missive-signoff-colored {
  margin-top: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 1.2rem;
}

.word-and  { color: #000000; } /* black */
.word-happy{ color: #d00000; } /* red */
.word-new  { color: #2e7d32; } /* green */
.word-year { color: #1565c0; } /* blue */
.word-bang{ color: #ff9800; } /* orange */

/* Responsive tweaks */
@media (max-width: 600px) {
  .missive {
    margin: 1.5rem auto 2rem auto;
    padding: 0.75rem 0.9rem 2rem 0.9rem;
  }

  .missive-header h1 {
    font-size: 1.7rem;
  }

  h2 {
    font-size: 1.2rem;
  }

  p {
    font-size: 1.08rem;
  }

  .card-placeholder {
    width: 72px;
    height: 96px;
  }
}