.scard-item{display:flex;flex-direction:column;}

.letter{
  --overlap:44px;
  --paper:#FFFDF7; --paper-2:#F6F1E3; --l-ink:#0A1B44; --l-muted:#4A5B82;
  position:relative;z-index:1;width:min(92%,1040px);margin:0 auto;
  display:grid;grid-template-rows:0fr auto;
  visibility:hidden;
  transition:grid-template-rows .9s cubic-bezier(.3,.7,.2,1),margin-top .9s cubic-bezier(.3,.7,.2,1),visibility 0s .9s;
}
.letter.open{grid-template-rows:1fr auto;margin-top:calc(var(--overlap) * -1);visibility:visible;transition-delay:0s;}

.letter-clip{overflow:hidden;min-height:0;}
.letter-paper{
  padding:calc(var(--overlap) + 30px) clamp(22px,4vw,56px) 34px;
  background:linear-gradient(var(--paper),var(--paper-2));
  color:var(--l-ink);
  box-shadow:inset 0 16px 20px -16px rgba(0,0,0,.35);
}

/* The rolled edge at the bottom of the paper */
.letter-roll{
  height:0;opacity:0;margin-inline:-10px;border-radius:14px;
  background:linear-gradient(#CFC7B0 0,#FFFEF8 30%,#EFE8D6 58%,#B4AB93 100%);
  box-shadow:0 12px 20px -8px rgba(0,0,0,.4);
  transition:height .9s cubic-bezier(.3,.7,.2,1),opacity .4s;
}
.letter.open .letter-roll{height:28px;opacity:1;}

/* Content of the letter */
.letter-title{margin:0 0 10px;font:600 clamp(22px,2.2vw,28px)/1.2 var(--font-display);letter-spacing:-0.02em;color:var(--l-ink);}
.letter-lead{max-width:62ch;color:var(--l-muted);}
.letter-list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px;}
.letter-list a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 18px;border:1px solid rgba(10,27,68,.14);border-radius:12px;background:rgba(255,255,255,.75);text-decoration:none;color:var(--l-ink);font:500 16px/1.35 var(--font-display);transition:border-color .18s,transform .18s;}
.letter-list a:hover{border-color:#0F62E6;transform:translateX(3px);}
.letter-list small{flex-shrink:0;font:400 14px/1 var(--font-body);color:var(--l-muted);}
.letter-sign{margin-top:24px;font-style:italic;color:var(--l-muted);}

@media (max-width:820px){
  .letter{width:94%;}
  .letter-paper{padding-inline:20px;}
}
@media (prefers-reduced-motion: reduce){
  .letter,.letter-roll{transition:none;}
}