/* Additions on top of the original design (original.css is untouched). */
.ar{font-family:var(--font-arabic,"Amiri"),serif;font-style:italic;direction:rtl;unicode-bidi:plaintext}
.ar-title{font-weight:700;line-height:1.5}
.ar-text{line-height:1.9;text-align:center;word-break:break-word}
.letter-para.ar{font-size:clamp(1.1rem,4.4vw,var(--letter-size,1.45rem));line-height:1.9;margin:0}
.letter-body-paragraphs{gap:clamp(14px,2.4vh,22px)!important}
.card-body .message-text.ar,.story-title.ar{text-align:center}
.photo-duo{display:flex;gap:10px;justify-content:center;align-items:flex-start;margin-bottom:12px;width:100%}
.photo-duo .story-image-frame{width:min(150px,38vw,22vh);height:min(190px,48vw,28vh);margin-bottom:0}
.photo-duo .story-image-frame:first-child{transform:rotate(-3deg)}
.photo-duo .story-image-frame:last-child{transform:rotate(3deg);margin-top:14px}
.story-image-frame img,.album-art img,.envelope-image{display:block}
.story-image{width:100%;height:100%;object-fit:cover}
.album-art{position:relative;overflow:hidden}
.album-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-balloon-img,.hero-cat-img{display:block}
.hero-cat-img{max-height:clamp(150px,30vw,230px);width:auto}
.play-btn[disabled]{opacity:.45}
.no-audio{font-family:var(--font-body);font-size:.8rem;color:var(--navy-text-muted);text-align:center;margin:6px 0}
.end-envelope{width:min(290px,70vw);margin:0 auto;position:relative;animation:envClose 1.4s cubic-bezier(.2,.8,.2,1) both}
.end-envelope img{width:100%;border-radius:10px;box-shadow:var(--shadow-paper)}
@keyframes envClose{0%{transform:translateY(-30px) scale(1.12) rotateX(35deg);opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}
.end-card{animation:endIn 1s .9s both}
@keyframes endIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.credit{font-family:var(--font-body);font-size:.7rem;opacity:.55;text-align:center;margin-top:14px}
@media (prefers-reduced-motion:reduce){.end-envelope,.end-card{animation:none}}

/* mobile: smaller envelope on the intro screen */
.envelope-image{width:min(270px,68vw);max-height:30vh;height:auto;object-fit:contain}
.intro-content{gap:12px}
.intro-heading{font-size:clamp(2.2rem,9vw,3rem)}
.intro-subtitle{font-size:clamp(1.8rem,7vw,2.4rem)}