/* The long private letter lives in real text over a quiet Image 2.5 paper texture. */
.letter-modal {padding:14px;background:rgba(116,150,174,.47);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);}
.letter-modal .letter-sheet {
  position:relative;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;
  width:min(700px,100%);height:min(900px,94svh);max-height:94svh;overflow:hidden;
  padding:clamp(20px,4vw,36px) clamp(21px,5vw,48px) clamp(16px,3vw,28px);
  border:1px solid rgba(255,255,255,.9);border-radius:clamp(22px,4vw,32px);
  background:#fffefa url('ceremony/letter-stationery.webp') center / cover no-repeat;
  box-shadow:0 32px 90px rgba(49,78,108,.28),inset 0 1px 0 rgba(255,255,255,.9);
  color:#405566;
}
.letter-modal .letter-top {margin:0 0 25px;color:#6d8493;letter-spacing:.1em;gap:12px;}
.letter-modal .letter-top .btn-ghost {min-height:42px;white-space:nowrap;background:rgba(255,255,255,.55);
  border:1px solid rgba(112,149,176,.28);padding:9px 15px;}
.letter-page-head {padding-bottom:19px;border-bottom:1px solid rgba(103,146,176,.21);}
.letter-chapter-no {font-size:11px;letter-spacing:.24em;color:#7e9aaa;}
.letter-page-head h3 {font-family:'Songti SC','STSong','SimSun',serif!important;font-size:clamp(25px,5vw,36px)!important;
  line-height:1.2!important;font-weight:500!important;letter-spacing:.09em!important;color:#405f74!important;
  text-transform:none!important;margin:11px 0 7px!important;}
.letter-chapter-title {font-family:'Songti SC','STSong','SimSun',serif;font-size:14px;color:#7c9aae;
  letter-spacing:.18em;margin:0;}
.letter-modal .letter-body {
  min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:rgba(110,162,197,.42) transparent;
  scrollbar-width:thin;touch-action:pan-y;padding:25px 6px 21px 1px;outline:none;
  font-family:'Songti SC','STSong','Noto Serif CJK SC','SimSun',serif;
}
.letter-modal .letter-body:focus-visible {outline:2px solid rgba(116,168,199,.58);outline-offset:-2px;border-radius:8px;}
.letter-modal .letter-body.turning {animation:letter-page-turn .42s cubic-bezier(.2,.65,.2,1) both;}
.letter-modal .letter-body p {max-width:60ch;margin:0 0 .93em;color:#405566;
  font-family:inherit;font-size:clamp(16px,2.3vw,18px);font-weight:400;
  line-height:1.92;letter-spacing:.025em;overflow-wrap:anywhere;}
.letter-modal .letter-body .letter-salutation {font-size:19px;margin-bottom:1.25em;color:#315a75;}
.letter-modal .letter-body .letter-ellipsis {text-align:center;letter-spacing:.6em;margin:1.7em auto;}
.letter-modal .letter-body .letter-emphasis {font-size:clamp(17px,2.6vw,20px);line-height:1.85;
  font-weight:600;color:#4f88af;margin:1.2em 0;text-shadow:0 1px 0 #fff;}
.letter-modal .letter-body .letter-signature {text-align:right;margin:2.4em 0 .25em;color:#496e88;}
.letter-modal .letter-body .letter-date {text-align:right;font-size:14px;color:#7793a3;}
.letter-nav {display:flex;align-items:center;gap:14px;padding-top:15px;border-top:1px solid rgba(103,146,176,.21);}
.letter-page-button {display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;
  padding:10px 15px;border:1px solid rgba(130,171,197,.32);border-radius:999px;
  background:rgba(255,255,255,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 #fff9;color:#4d7690;font:500 13px var(--sans);letter-spacing:.07em;cursor:pointer;
  transition:background .2s,transform .2s,border-color .2s;}
.letter-page-button:not(:disabled):hover {background:rgba(229,245,255,.92);transform:translateY(-2px);border-color:rgba(100,160,200,.55);}
.letter-page-button:focus-visible {outline:2px solid #5089ad;outline-offset:3px;}
.letter-page-button:disabled {opacity:.35;cursor:default;}
.letter-progress {display:block;flex:1;height:2px;border-radius:2px;background:rgba(105,151,180,.2);overflow:hidden;}
.letter-progress span {display:block;height:100%;width:11.111%;border-radius:2px;background:linear-gradient(90deg,#97c7e6,#c5a76c);
  transition:width .45s cubic-bezier(.2,.65,.2,1);}
@keyframes letter-page-turn {from{opacity:.1;transform:translateX(10px);}to{opacity:1;transform:none;}}
@media(max-width:767px) {
  .letter-modal {padding:8px;}
  .letter-modal .letter-sheet {width:100%;height:calc(100svh - 16px);max-height:calc(100svh - 16px);
    border-radius:24px;padding:22px 21px 18px;background-position:center;}
  .letter-modal .letter-top {margin-bottom:18px;font-size:10px;}
  .letter-page-head {padding-bottom:14px;}
  .letter-modal .letter-body {padding-top:18px;}
  .letter-modal .letter-body p {font-size:16px;line-height:1.88;margin-bottom:.88em;}
  .letter-nav {gap:9px;padding-top:12px;}
  .letter-page-button {padding:9px 11px;font-size:12px;min-height:44px;}
}
@media(prefers-reduced-motion:reduce) {
  .letter-modal .letter-body.turning {animation:none;}
  .letter-progress span,.letter-page-button {transition:none;}
}