:root{
  --cream:#f6f8f8;
  --smooth:all .5s cubic-bezier(.16,1,.3,1);
}
#letters{padding:100px 5% 110px;}
#letters .container{max-width:1180px;margin:0 auto;}
#letters .about-top{max-width:720px;margin-bottom:46px;}
#letters .eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:14px;font-weight:700;letter-spacing:1px;
  color:var(--secondary);text-transform:uppercase;margin-bottom:14px;
}
#letters .eyebrow::before{content:"";width:28px;height:2px;background:var(--secondary);display:inline-block;}
#letters .section-title{font-size:clamp(26px,3.6vw,38px);font-weight:900;color:var(--primary);margin-bottom:14px;position:relative;display:inline-block;}
#letters .section-title::after{content:"";position:absolute;bottom:-8px;right:0;width:80px;height:3px;background:var(--secondary);}
#letters .section-sub{font-size:15.5px;line-height:1.9;color:var(--text-muted);max-width:640px;font-weight:600;}

.letters-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;}
.letter-card{
  display:flex;gap:20px;align-items:center;text-align:right;width:100%;
  background:#fff;border-radius:22px;padding:18px;border:1px solid rgba(11,94,101,.08);cursor:pointer;font-family:inherit;
  box-shadow:0 10px 26px rgba(11,94,101,.06);transition:var(--smooth);
}
.letter-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(11,94,101,.12);border-color:rgba(212,175,55,.3);}
.letter-frame{
  flex-shrink:0;width:100px;aspect-ratio:3/4;border-radius:12px;overflow:hidden;
  box-shadow:0 8px 20px rgba(7,61,66,.18);border:4px solid #fff;position:relative;
}
.letter-frame img{width:100%;height:100%;object-fit:cover;object-position:top;}
.letter-frame::after{
  content:"\1F50D";position:absolute;inset:0;background:rgba(7,61,66,.5);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:16px;opacity:0;transition:.3s;
}
.letter-card:hover .letter-frame::after{opacity:1;}
.letter-info h4{font-size:15.5px;margin-bottom:7px;color:var(--primary);font-weight:800;}
.letter-info p{font-size:12.8px;color:var(--text-muted);line-height:1.8;font-weight:600;}

@media(max-width:700px){
  .letters-grid{grid-template-columns:1fr;}
  .letter-card{flex-direction:column;text-align:center;}
}

#img-modal{position:fixed;inset:0;z-index:8000;display:none;align-items:center;justify-content:center;padding:30px;}
#img-modal.open{display:flex;}
#img-modal .pdf-modal-backdrop{position:absolute;inset:0;background:rgba(7,61,66,.82);backdrop-filter:blur(4px);opacity:0;transition:opacity .35s;}
#img-modal.show .pdf-modal-backdrop{opacity:1;}
.img-modal-box{
  position:relative;max-width:min(600px,90vw);max-height:90vh;
  opacity:0;transform:scale(.94);transition:opacity .4s ease, transform .4s cubic-bezier(.16,1,.3,1);
}
#img-modal.show .img-modal-box{opacity:1;transform:scale(1);}
.img-modal-box img{width:100%;height:100%;max-height:90vh;object-fit:contain;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.4);}
.img-close-btn{
  position:absolute;top:-18px;left:-18px;width:36px;height:36px;border-radius:12px;
  background:var(--secondary);color:#fff;border:1px solid transparent;font-size:15px;cursor:pointer;transition:.25s;
}
.img-close-btn:hover{background:var(--secondary-light);transform:rotate(90deg);}