/* ==========================================================
   رسائل إلى أماني — V9.7
   ورقٌ عاجيّ معلّق على جدار الليل
   ========================================================== */
.page-letters{--paper-1:#F8F0DC;--paper-2:#EFE2C2;--ink-t:#2B1F12;--ink-m:#6E5B3E}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.lt-hero{text-align:center;padding-block:76px 40px;display:flex;flex-direction:column;align-items:center}
.lt-hero .sx-lead{max-width:52ch;margin-inline:auto}
.lt-hero .sx-eyebrow::after{content:"";width:38px;height:1px;background:linear-gradient(270deg,transparent,var(--g2))}
.lt-cta{margin-top:26px}

/* الجدار */
.lt-wall-wrap{padding-block:30px 20px}
.lt-filters{display:flex;flex-wrap:wrap;gap:8px;margin:-6px 0 22px}
.lt-filters button{border:1px solid var(--line);background:rgba(255,240,210,.04);color:var(--cream);border-radius:30px;padding:7px 16px;font:inherit;font-size:.88rem;cursor:pointer;transition:.2s}
.lt-filters button:hover{border-color:rgba(228,189,115,.5)}
.lt-filters button.on{background:var(--g2);color:#24170A;border-color:var(--g2);font-weight:600}
.lt-filters b{font-weight:500;opacity:.7;margin-inline-start:4px;font-variant-numeric:tabular-nums}
.lt-wall{columns:3 300px;column-gap:22px;padding-top:14px}
.lt-card{break-inside:avoid;display:inline-block;width:100%;vertical-align:top;margin:0 0 26px;position:relative;padding:30px 26px 22px;color:var(--ink-t);border-radius:3px;
  background:
    linear-gradient(transparent 0 0),
    radial-gradient(120% 90% at 30% 0%,rgba(255,255,255,.55),transparent 60%),
    linear-gradient(170deg,var(--paper-1),var(--paper-2));
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 22px 40px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.3);
  transform:rotate(var(--r,0deg));transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s;opacity:0;animation:ltIn .7s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--d,0s)}
.lt-card:hover{transform:rotate(0deg) translateY(-4px);box-shadow:0 30px 60px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.3)}
@keyframes ltIn{from{opacity:0;transform:translateY(18px) rotate(var(--r,0deg))}to{opacity:1;transform:rotate(var(--r,0deg))}}
.lt-card::before{content:"";position:absolute;top:-9px;left:50%;width:72px;height:20px;transform:translateX(-50%) rotate(-2deg);
  background:linear-gradient(90deg,rgba(228,189,115,.55),rgba(247,220,156,.75),rgba(228,189,115,.55));opacity:.85;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.lt-card.pinned{background:radial-gradient(120% 90% at 30% 0%,rgba(255,255,255,.6),transparent 60%),linear-gradient(170deg,#FBF3DE,#EBD9AE)}
.lt-card.pinned::after{content:"✦";position:absolute;top:12px;inset-inline-end:14px;color:#A57A24;font-size:.9rem}
.lt-card h3{font-family:var(--ruq);font-weight:700;font-size:1.45rem;color:#7A5410;margin-bottom:8px}
.lt-card p{font-family:'Amiri',serif;font-size:1.12rem;line-height:2;white-space:pre-line;overflow-wrap:anywhere}
.lt-card p.clip{display:-webkit-box;-webkit-line-clamp:9;-webkit-box-orient:vertical;overflow:hidden}
.lt-card .lt-readmore{background:none;border:0;padding:0;margin-top:6px;color:#8A6519;font:inherit;font-size:.86rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.lt-card footer{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-top:16px;padding-top:12px;border-top:1px dashed rgba(110,91,62,.35)}
.lt-card footer b{display:block;font-family:'Amiri',serif;font-size:1.05rem;color:var(--ink-t)}
.lt-card footer span{font-size:.78rem;color:var(--ink-m)}
.lt-card time{font-size:.75rem;color:var(--ink-m);white-space:nowrap}
.lt-more{display:block;margin:6px auto 0}

/* ورقة الكتابة */
.lt-write{padding-block:50px 110px;display:grid;place-items:center}
.lt-paper{width:min(680px,100%);color:var(--ink-t);padding:42px 40px 30px;border-radius:4px;position:relative;
  background:
    repeating-linear-gradient(180deg,transparent 0 37px,rgba(110,91,62,.16) 37px 38px),
    radial-gradient(120% 80% at 20% 0%,rgba(255,255,255,.6),transparent 60%),
    linear-gradient(170deg,var(--paper-1),var(--paper-2));
  box-shadow:0 40px 90px rgba(0,0,0,.55),0 3px 8px rgba(0,0,0,.3)}
.lt-paper::before{content:"";position:absolute;inset-block:0;inset-inline-start:56px;width:1px;background:rgba(170,60,40,.25)}
.lt-salute{font-family:var(--ruq);font-weight:700;font-size:2.1rem;color:#7A5410;margin-bottom:6px;padding-inline-start:28px}
.lt-paper .field{margin-bottom:14px}
.lt-paper label{color:var(--ink-m);font-size:.85rem}
.lt-paper label em{font-style:normal;opacity:.75}
.lt-paper textarea{width:100%;min-height:290px;resize:vertical;border:0;background:transparent;font-family:'Amiri',serif;font-size:1.22rem;line-height:38px;color:var(--ink-t);padding:0 28px 0 0;outline:none}
[dir=ltr] .lt-paper textarea{padding:0 0 0 28px}
.lt-paper textarea::placeholder{color:rgba(110,91,62,.6)}
.lt-paper textarea:focus-visible{box-shadow:none}
.lt-body-field{position:relative}
.lt-left{position:absolute;bottom:-20px;inset-inline-end:0;font-size:.75rem;color:var(--ink-m);font-variant-numeric:tabular-nums}
.lt-sign{display:grid;grid-template-columns:1.3fr 1fr;gap:14px;margin-top:28px}
.lt-paper input,.lt-paper select{width:100%;background:rgba(255,255,255,.45);border:1px solid rgba(110,91,62,.3);border-radius:6px;padding:10px 12px;font:inherit;color:var(--ink-t)}
.lt-paper input:focus,.lt-paper select:focus{outline:2px solid #B88A2E;outline-offset:1px}
.lt-paper .err{display:block;color:#A3301E;font-size:.8rem;min-height:1em}
.lt-send{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}
.lt-send .form-hint{margin:0;color:var(--ink-m);font-size:.8rem;max-width:38ch}
.lt-msg{margin-top:10px;color:#A3301E;font-size:.9rem;min-height:1.2em}
.lt-paper.sending{animation:ltFold .9s cubic-bezier(.6,0,.4,1) forwards}
@keyframes ltFold{40%{transform:scale(.92) rotate(-2deg)}100%{transform:translateY(-120px) scale(.3) rotate(-8deg);opacity:0}}

.lt-sent{text-align:center;max-width:46ch;animation:ltIn .8s ease forwards}
.lt-sent h2{font-family:var(--ruq);font-weight:700;font-size:2.3rem;color:var(--g1);margin:22px 0 8px}
.lt-sent p{font-family:'Amiri',serif;font-size:1.15rem;line-height:1.9;margin-bottom:22px;opacity:.9}
.lt-envelope{position:relative;width:150px;height:100px;margin:0 auto;border-radius:4px;background:linear-gradient(170deg,var(--paper-1),var(--paper-2));box-shadow:0 20px 40px rgba(0,0,0,.5);overflow:hidden}
.lt-flap{position:absolute;inset:0 0 auto;height:62px;background:linear-gradient(170deg,#E8D7AD,#D9C28E);clip-path:polygon(0 0,100% 0,50% 100%)}
.lt-seal{position:absolute;left:50%;top:44px;width:30px;height:30px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle at 35% 30%,#E9B4A4,#9A2E1E 60%,#6B1C10);box-shadow:0 2px 6px rgba(0,0,0,.35)}

@media (max-width:760px){
  .lt-hero{padding-block:44px 24px}
  .lt-paper{padding:32px 20px 24px}
  .lt-paper::before{inset-inline-start:30px}
  .lt-salute{padding-inline-start:18px;font-size:1.8rem}
  .lt-paper textarea{padding-inline-start:18px;padding-inline-end:0;font-size:1.12rem}
  .lt-sign{grid-template-columns:1fr}
  .lt-wall{columns:1}
}
@media (prefers-reduced-motion:reduce){.lt-card,.lt-sent{animation:none;opacity:1}.lt-paper.sending{animation:none}}