/* ==========================================================================
   Message page (/message/) — page-only rules on top of style.css §26.
   Enqueued from functions.php for page-message.php only.
   ========================================================================== */

/* Headline of the letter, under the hero's rule (the section is flush-top) */
.message-head__title { font-size: clamp(2rem, 1rem + 3.4vw, 4.25rem); }

/* Letter: portrait (cols 1–4, sticky) | text (cols 6–12) */
.message-letter {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-lg);
  align-items: start;
  margin-top: var(--space-2xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--border-mid);
}
.message-letter__portrait {
  grid-column: 1 / span 4;
  position: sticky;
  top: 120px;               /* clears the floating nav dock */
  margin: 0;
}
.message-letter__portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--surface-tint);
}
.message-letter__body { grid-column: 6 / span 7; max-width: 40em; }
.message-letter__body p {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 2.1;
  color: var(--ink-mid);
  word-break: auto-phrase;
}
.message-letter__body p + p { margin-top: var(--space-lg); }
.message-letter__body strong { color: var(--ink); font-weight: 700; }
.message-letter__body .message-letter__close {
  font-size: clamp(1.125rem, 0.9rem + 0.6vw, 1.5rem);
  font-weight: 700;
  line-height: 1.7;
  color: var(--ink);
}

/* Signature */
.message-letter__body .message-letter__sign {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-mid);
}
.message-letter__role { font-size: var(--t-sm); color: var(--ink-muted); }
.message-letter__name {
  font-size: clamp(1.5rem, 1rem + 1.2vw, 2.125rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

/* Profile: romanised name and title beside the heading */
.message-profile__role {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.8;
  color: var(--ink-muted);
  word-break: auto-phrase;
}
.message-profile__role span:first-child {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}

@media (max-width: 1024px) {
  .message-letter__portrait { grid-column: 1 / span 5; }
  .message-letter__body { grid-column: 7 / span 6; }
}
@media (max-width: 760px) {
  .message-letter { display: block; margin-top: var(--space-xl); padding-top: var(--space-xl); }
  .message-letter__portrait { position: static; max-width: 320px; margin-bottom: var(--space-xl); }
  .message-letter__body p { font-size: 1rem; line-height: 2; }
}