/* Hallmark · macrostructure: bespoke · page: voice（社員の一言 / 代表あいさつ） */

.letter { padding-block: var(--space-3xl) var(--section-y); }
.letter__inner { display: grid; gap: var(--space-2xl); }
.letter__head { display: grid; gap: var(--space-lg); align-content: start; }
.letter__photo { overflow: hidden; aspect-ratio: 4 / 3; max-width: 360px; }
.letter__photo img { width: 100%; height: 100%; object-fit: cover; }
.letter__name { font-size: var(--text-sm); color: var(--color-muted); }
.letter__name b { display: block; font-family: var(--font-display); font-weight: 500; font-size: var(--text-2xl); color: var(--color-text); letter-spacing: 0.3em; }
.letter__hint { display: none; }

.letter__body { font-family: var(--font-display); font-size: 1.0625rem; line-height: 2.2; letter-spacing: 0.08em; color: var(--color-text); }
.letter__body p + p { margin-top: 1.4em; }
.letter__sign { text-align: right; color: var(--color-muted); }
.letter__sign span { color: var(--color-text); }

/* PCは縦書きの手紙として、右から左へ横スクロールで読む */
@media (min-width: 1024px) {
  .letter__inner { grid-template-columns: 300px minmax(0, 1fr); gap: var(--space-3xl); align-items: start; }
  .letter__head { position: sticky; top: 112px; }
  .letter__hint { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-xs); color: var(--color-muted); letter-spacing: 0.14em; }
  .letter__scroll {
    writing-mode: vertical-rl; height: calc(min(34em, 64vh) + 7rem);
    overflow-x: auto; overscroll-behavior-x: contain;
    padding: var(--space-2xl) var(--space-2xl) var(--space-lg);
    background: var(--color-white); border: var(--rule-hair) solid var(--color-line);
    scrollbar-width: thin; scrollbar-color: var(--color-line) transparent;
  }
  .letter__body { font-size: 1.125rem; line-height: 2.3; }
  .letter__body p + p { margin-top: 0; margin-right: 1.6em; }
  .letter__sign { text-align: end; margin-right: 3em !important; }
}

/* 語の途中で列が分かれないようにする */
.nobr { white-space: nowrap; }