/* /letters/ archive + single dispatch templates */

.cl-root, .cld-root {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
  font-family: "Roboto", system-ui, sans-serif;
  color: #283430;
}
.cl-hero, .cld-header {
  text-align: center;
  padding: 10vh 24px 6vh;
  border-bottom: 1px solid #C6D0CD;
  margin-bottom: 48px;
}
.cl-hero-glyph, .cld-ogham {
  font-family: "Noto Sans Ogham", "Segoe UI Historic", serif;
  font-size: 2.6rem;
  color: #A98841;
  line-height: 1;
  margin-bottom: 12px;
}
.cl-hero-eyebrow, .cld-eyebrow {
  font-family: "Roboto Slab", Georgia, serif;
  font-style: italic;
  color: #6E7B78;
  letter-spacing: 0.1em;
  font-size: 0.82rem;
  margin: 0 0 10px;
}
.cl-hero-eyebrow em { color: #A98841; }
.cl-hero-title, .cld-title {
  font-family: "Cinzel", Georgia, serif;
  color: #0F1815;
  font-size: clamp(2rem, 5vw, 3.4rem);
  letter-spacing: 0.08em;
  margin: 0 0 18px !important;
}
.cl-hero-lede {
  font-family: "Roboto Slab", Georgia, serif;
  color: #283430;
  max-width: 560px;
  margin: 0 auto;
  font-size: 1.05rem;
}

/* Letter list */
.cl-list { margin: 0 auto 10vh; }
.cl-letter {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 36px;
  padding: 32px 0;
  border-bottom: 1px solid #DEE5E3;
}
.cl-letter:last-child { border-bottom: 0; }
.cl-letter-mark {
  text-align: center;
  padding-top: 8px;
}
.cl-letter-ogham {
  font-family: "Noto Sans Ogham", "Segoe UI Historic", serif;
  color: #A98841;
  font-size: 2rem;
  line-height: 1;
}
.cl-letter-chapter {
  font-family: "Cinzel", Georgia, serif;
  letter-spacing: 0.16em;
  color: #6E7B78;
  font-size: 0.78rem;
  text-transform: uppercase;
  margin-top: 8px;
}
.cl-letter-date {
  font-family: "Cinzel", Georgia, serif;
  color: #A98841;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  text-transform: uppercase;
}
.cl-letter-title {
  font-family: "Roboto Slab", Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  margin: 4px 0 6px;
}
.cl-letter-title a { color: #0F1815; text-decoration: none; }
.cl-letter-title a:hover { color: #0F4C5C; }
.cl-letter-campaign {
  color: #6E7B78;
  font-size: 0.86rem;
  margin: 0 0 14px;
  font-style: italic;
}
.cl-letter-campaign em { color: #A98841; font-style: italic; }
.cl-letter-excerpt {
  font-family: "Roboto Slab", Georgia, serif;
  color: #283430;
  font-size: 0.98rem;
  line-height: 1.6;
}
.cl-letter-excerpt p { margin: 0 0 0.6em; }
.cl-letter-read {
  color: #0F4C5C;
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  text-decoration: none;
}
.cl-letter-read:hover { color: #0A3B48; }
.cl-empty { text-align: center; padding: 8vh 0; color: #6E7B78; }

/* Single dispatch */
.cld-letter { max-width: 680px; margin: 0 auto; }
.cld-date {
  display: inline-block;
  font-family: "Cinzel", Georgia, serif;
  letter-spacing: 0.18em;
  color: #A98841;
  font-size: 0.82rem;
  text-transform: uppercase;
}
.cld-body {
  font-family: "Roboto Slab", Georgia, serif;
  font-size: 1.08rem;
  line-height: 1.8;
  color: #283430;
  margin-bottom: 40px;
}
.cld-body p { margin: 0 0 1.2em; }
.cld-body p:first-letter {
  font-family: "Cinzel", Georgia, serif;
  font-size: 3.4rem;
  float: left;
  line-height: 1;
  padding: 4px 10px 0 0;
  color: #A98841;
}
.cld-footer {
  text-align: center;
  padding: 4vh 0 8vh;
  border-top: 1px solid #DEE5E3;
  color: #6E7B78;
}

@media (max-width: 720px) {
  .cl-letter { grid-template-columns: 1fr; gap: 14px; text-align: left; }
  .cl-letter-mark { text-align: left; padding-top: 0; display: flex; gap: 14px; align-items: baseline; }
  .cld-body p:first-letter { font-size: 2.6rem; }
}