.letters-page{background:#fefdfb;min-height:calc(100vh - 200px);padding:80px 20px}.container{max-width:1400px;margin:0 auto;padding:0 20px}.letters-title{text-align:center;color:#333;letter-spacing:3px;margin:0 0 40px;font-family:Georgia,serif;font-size:48px;font-weight:700}.letters-intro{text-align:center;max-width:800px;margin:0 auto 60px}.intro-text{color:#666;margin:0;font-family:Georgia,serif;font-size:16px;line-height:1.6}.letters-gallery{grid-template-columns:repeat(4,1fr);gap:40px;margin-bottom:40px;display:grid}.letter-frame{cursor:pointer;aspect-ratio:3/4;transition:transform .3s,box-shadow .3s}.letter-frame:hover{transform:translateY(-8px);box-shadow:0 12px 32px #00000026}.frame-inner{box-sizing:border-box;background:#f9f7f3;border:12px solid #e8e0d0;border-radius:2px;justify-content:center;align-items:center;width:100%;height:100%;padding:8px;display:flex;overflow:hidden;box-shadow:0 4px 12px #0000001a,inset 0 1px #ffffff80}.letter-image{object-fit:contain;width:100%;height:100%;display:block}.letter-frame p{color:#666;text-align:center;margin-top:12px;font-family:Georgia,serif;font-size:14px}.modal-backdrop{z-index:1000;background:#000000e6;justify-content:center;align-items:center;padding:20px;animation:.3s fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{flex-direction:column;align-items:center;max-width:70vw;max-height:90vh;animation:.3s slideUp;display:flex;position:relative}@keyframes slideUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}.modal-image-wrapper{background:#f9f7f3;border:12px solid #e8e0d0;border-radius:2px;max-width:100%;max-height:80vh;margin-bottom:24px;padding:8px;overflow:hidden;box-shadow:0 8px 24px #0003,inset 0 1px #ffffff4d}.modal-image{object-fit:contain;width:100%;height:auto;max-height:80vh;display:block}.modal-caption{color:#fff;text-align:center;letter-spacing:1px;margin:0;font-family:Georgia,serif;font-size:18px}.modal-close{color:#fff;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;width:40px;height:40px;padding:0;font-size:40px;transition:transform .2s;display:flex;position:absolute;top:-40px;right:0}.modal-close:hover{transform:scale(1.2)}.modal-nav-button{color:#fff;cursor:pointer;z-index:10;background:#ffffff4d;border:none;border-radius:4px;justify-content:center;align-items:center;width:50px;height:50px;font-size:32px;transition:background-color .3s,transform .2s;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.modal-nav-button:hover{background:#ffffff80;transform:translateY(-50%)scale(1.1)}.modal-prev{left:20px}.modal-next{right:20px}@media (max-width:1200px){.letters-gallery{grid-template-columns:repeat(3,1fr);gap:30px}}@media (max-width:768px){.letters-page{padding:60px 20px}.letters-title{margin-bottom:30px;font-size:32px}.letters-intro{margin-bottom:40px}.intro-text{font-size:14px}.letters-gallery{grid-template-columns:repeat(2,1fr);gap:20px}.frame-inner{border:8px solid #e8e0d0;padding:6px}.modal-nav-button{width:40px;height:40px;font-size:24px}.modal-close{font-size:32px;top:-35px}.modal-image-wrapper{border:8px solid #e8e0d0;padding:6px}}@media (max-width:480px){.letters-page{padding:40px 15px}.letters-title{margin-bottom:25px;font-size:24px}.letters-intro{margin-bottom:30px}.intro-text{font-size:13px}.letters-gallery{grid-template-columns:1fr;gap:15px}.frame-inner{border:6px solid #e8e0d0;padding:4px}.modal-image-wrapper{border:6px solid #e8e0d0;max-height:60vh;padding:4px}.modal-caption{font-size:14px}.modal-nav-button{width:35px;height:35px;font-size:20px}.modal-prev{left:10px}.modal-next{right:10px}}