.fd { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.fd-head { text-align: center; max-width: 700px; margin: 32px auto 38px; }
.fd-head p { color: var(--ln-mute); font-size: 17px; }
.fd-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; background: #EFE9E6; border-radius: 26px; padding: 40px 34px; }
.fd-note { padding: 30px 24px 24px; border-radius: 3px; box-shadow: 0 12px 22px rgba(46,34,39,.12); position: relative; display: flex; flex-direction: column; }
.fd-note::before { content: ""; position: absolute; top: -12px; left: 50%; margin-left: -34px; width: 68px; height: 24px; background: rgba(255,255,255,.65); transform: rotate(-3deg); }
.fd-note--rose { background: #F9D7DF; transform: rotate(-1.6deg); }
.fd-note--cream { background: #FFF6DE; transform: rotate(1deg); }
.fd-note--sage { background: #DDEEDF; transform: rotate(-.6deg); }
.fd-note h2 { font-size: 22px; }
.fd-note p { font-size: 15px; flex: 1; }
.fd-note a { font-weight: 800; color: var(--ln-plum); }
.fd-letter { max-width: 760px; margin: 46px auto 0; background: #fff; border: 1px solid var(--ln-line); border-radius: 18px; padding: 34px 38px; background-image: repeating-linear-gradient(180deg, transparent 0 33px, #F1E6E9 33px 34px); }
.fd-letter h2 { font-size: 24px; }
.fd-letter__to { font-weight: 700; }
.fd-letter__to a { font-family: var(--ln-serif); font-weight: 400; font-size: 19px; word-break: break-all; }
.fd-letter__line { font-size: 17px; line-height: 34px; margin: 0; }
.fd-letter__line span { color: var(--ln-rose-deep); border-bottom: 1.5px dashed var(--ln-dust); font-style: italic; }
.fd-letter__small { font-size: 13.5px; color: var(--ln-mute); margin-top: 18px; }
@media (max-width: 860px) {
  .fd { padding: 0 16px; }
  .fd-board { grid-template-columns: 1fr; padding: 30px 18px; gap: 30px; }
  .fd-note { transform: none !important; }
  .fd-letter { padding: 26px 20px; }
}