/* ============================================================
   letter.css — Letter pages 1 & 2
   ============================================================ */

.page--letter {
  background-color: var(--color-page-bg);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--letter-pad-top) var(--letter-pad-side) 60px;
  overflow-y: auto;
  text-align: center;
}

.letter-sheet {
  position: relative;
  width: 100%;
  max-width: var(--letter-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* (Border removed — now 4 pages, no second-sheet distinction needed) */

/* ── Body text ───────────────────────────────────────────── */
.letter-body {
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-style: normal;
  font-size: var(--size-letter);
  line-height: 1.85;
  color: var(--color-ink);
  text-align: center;
  width: 100%;
}

.letter-body p { margin-bottom: 1.6em; }
.letter-body p:last-child { margin-bottom: 0; }

.letter-body em { font-style: italic; }
.letter-body strong { font-weight: 700; font-style: normal; }

/* ── Section headings (page 2) ───────────────────────────── */
.letter-section-head {
  font-family: 'Special Elite', 'Courier New', monospace;
  font-style: normal;
  font-size: var(--size-letter);
  color: var(--color-ink);
  margin-bottom: 0.6em;
  display: block;
}

/* When used with always-underline, must be inline-block so SVG fits text */
.letter-section-head.always-underline {
  display: inline-block;
}

/* ── Nav / links ─────────────────────────────────────────── */
.letter-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 24px;
  padding-bottom: 8px;
  gap: 10px;
}

.letter-next {
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 17px;
  color: var(--color-ink);
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Arrow GIF inside the festival trigger link */
.festival-trigger .arrow-gif {
  height: 1.2em;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  mix-blend-mode: multiply;
}

/* Standalone large arrow (letter page 1 "next") */
.arrow-gif--large {
  height: 110px;
  margin-bottom: 0;
  vertical-align: bottom;
  mix-blend-mode: multiply;
}

.festival-trigger {
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 19px;
  color: var(--color-blue);
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .page--letter {
    padding: 32px 24px 32px;
  }
  .letter-body {
    font-size: 16px;
    line-height: 1.75;
  }
  .letter-section-head {
    font-size: 16px;
  }
  .arrow-gif--large {
    height: 80px;
  }
  .letter-nav {
    padding-top: 20px;
  }
}