/* ============================================
   模块① 信 —— 自己的样式（跟 base.css 分开）
   全屏沉浸页：没有导航头。
   调大小 / 间距 / 倾斜角度只改这里。
   ============================================ */

.letter {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; flex-direction: column;
  gap: clamp(24px, 4vw, 48px);
  padding: clamp(24px, 4vw, 64px) clamp(20px, 4vw, 56px);
  cursor: pointer;
  /* 透一点点星空，又保证字清晰 */
  background: rgb(5 7 11 / 40%);
  animation: letter-in 1.1s var(--ease) both;
}
@keyframes letter-in { from { opacity: 0; } to { opacity: 1; } }
.letter:focus-visible { outline: 1px solid var(--signal); outline-offset: -6px; }

/* —— 顶部横贯大照片 —— */
.letter-hero {
  flex: none;
  height: clamp(200px, 32vh, 340px);
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--smoked-shadow);
}
.letter-hero img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* —— 中段：左照片 / 右话 —— */
.letter-body {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}

/* 左边一叠照片：竖着排，交替倾斜，像随手摆在桌上的照片 */
.letter-photos {
  display: flex; flex-direction: column;
  align-items: center; gap: 20px;
}
.letter-photo {
  width: min(320px, 100%);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  box-shadow: 0 18px 44px rgb(0 0 0 / 45%);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
/* 交替倾斜，做出「被叠起来」的手感（数量不限，自动循环） */
.letter-photo:nth-child(3n+1) { transform: rotate(-2.6deg); }
.letter-photo:nth-child(3n+2) { transform: rotate(2.2deg); }
.letter-photo:nth-child(3n)   { transform: rotate(-1deg); }
.letter-photo:hover {
  transform: rotate(0deg) scale(1.04);
  box-shadow: 0 26px 60px rgb(0 0 0 / 55%);
  z-index: 2;
}
.letter-photo img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.letter-photo figcaption {
  padding: 10px 14px 12px;
  font-family: var(--font-serif);
  font-size: 14px; color: var(--muted);
  letter-spacing: .03em;
}
.letter-photo--empty {
  width: min(320px, 100%); aspect-ratio: 4/3;
  display: grid; place-items: center;
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
  color: var(--dim); font-size: 14px; letter-spacing: .12em;
}

/* —— 右边：话 + 装饰 —— */
.letter-words {
  display: flex; flex-direction: column; gap: 24px;
}
.letter-msg {
  font-family: var(--font-serif);
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 2.05;
  color: var(--text);
  letter-spacing: .02em;
  white-space: pre-line;   /* 换行保留，写多段直接回车 */
}
.letter-empty {
  font-family: var(--font-serif);
  font-size: 15px; color: var(--dim);
}
.letter-dec { max-width: 180px; }
.letter-dec img { display: block; width: 100%; border-radius: 12px; opacity: .9; }

/* —— 底部提示 —— */
.letter-next {
  flex: none;
  display: flex; justify-content: center;
  padding-top: 4px;
}
.letter-next span {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .3em; text-indent: .3em;
  color: var(--dim);
  animation: letter-breathe 2.8s ease-in-out infinite;
}
@keyframes letter-breathe {
  0%, 100% { opacity: .45; }
  50% { opacity: 1; }
}

/* —— 窄屏：上下堆 —— */
@media (max-width: 720px) {
  .letter-body { grid-template-columns: 1fr; }
  .letter-hero { height: 30vh; }
}

@media (prefers-reduced-motion: reduce) {
  .letter, .letter-next span { animation: none; }
  .letter-photo { transition: none; }
}