/* The user's second-page poster reference; all overrides stay on #letter. */
#letter.letter-v5 { height: 100%; min-height: 620px; padding: 0; display: block; overflow: hidden; background: linear-gradient(#031d43, #103976 60%, #0d2e56); }
#letter.letter-v5 .letter-scene-v5 { position: absolute; top: 50%; left: 0; z-index: -1; width: 100%; height: auto; max-width: none; transform: translateY(-50%); mask-image: linear-gradient(transparent, #000 7%, #000 94%, transparent); }
#letter.letter-v5 > .slide-content { position: absolute; inset: 0; display: block; width: 100%; min-height: 0; margin: 0; }
#letter.letter-v5 .letter-caption { position: absolute; top: 7.1%; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 15px; color: #f5f7fb; font-family: var(--font-formal); font-size: clamp(16px, 4.2cqi, 23px); line-height: 1.7; letter-spacing: 4px; }
#letter.letter-v5 .letter-caption::before, #letter.letter-v5 .letter-caption::after { content: ""; width: 28px; height: 1px; background: linear-gradient(90deg, transparent, #d1e4ff); }
#letter.letter-v5 .letter-caption::after { transform: rotate(180deg); }
#letter.letter-v5 .letter-heading { position: absolute; top: 11.9%; left: 11%; width: 78%; height: 11.2%; max-width: none; margin: 0; }
#letter.letter-v5 .letter-heading img { width: 100%; height: 100%; object-fit: contain; }
#letter.letter-v5 .letter-title-flare { position: absolute; top: 23.5%; left: 14%; width: 72%; height: 1px; background: linear-gradient(90deg, transparent, #2375b85c, #c6edff, #2375b85c, transparent); }
#letter.letter-v5 .letter-title-flare::after { content: ""; position: absolute; left: 43%; width: 14%; height: 2px; background: linear-gradient(90deg, transparent, #edfaff, transparent); box-shadow: 0 0 15px 3px #5ec4ff6b; }
#letter.letter-v5 .letter-text { position: absolute; top: 28.7%; left: 11.5%; right: 11.5%; }
#letter.letter-v5 .salute { font-size: clamp(14px, 3.8cqi, 19px); line-height: 1.8; letter-spacing: .3px; color: #f5f7fb; margin: 0 0 clamp(18px, 3svh, 30px); }
#letter.letter-v5 .bodycopy { color: #f2f5fb; font-size: clamp(13px, 3.65cqi, 19px); line-height: 1.9; letter-spacing: .1px; text-align: justify; text-indent: 2em; margin: 0; }
#letter.letter-v5 .letter-details { margin-top: clamp(22px, 4.2svh, 40px); }
#letter.letter-v5 .signature { position: absolute; left: 8%; right: 8%; bottom: max(5%, calc(env(safe-area-inset-bottom) + 40px)); padding: 0; margin: 0; font-size: clamp(10px, 2.8cqi, 15px); line-height: 1.8; letter-spacing: .2px; text-align: right; color: #f1f5fc; }
@media (max-width: 350px) {
  #letter.letter-v5 .letter-text { left: 8%; right: 8%; }
  #letter.letter-v5 .salute { margin-bottom: 16px; font-size: 14px; }
  #letter.letter-v5 .bodycopy { font-size: 13px; line-height: 1.85; }
  #letter.letter-v5 .letter-details { margin-top: 22px; }
}
@media (max-height: 740px) {
  @container (min-width: 480px) {
    #letter.letter-v5 .letter-text { top: 28%; }
    #letter.letter-v5 .salute { font-size: 16px; margin-bottom: 16px; }
    #letter.letter-v5 .bodycopy { font-size: 16px; line-height: 1.85; }
    #letter.letter-v5 .letter-details { margin-top: 22px; }
  }
}