/* ─────────────────────────────────────────────────────────────
   Letter — a handwritten-feeling note on warm paper.
   Shared component: used on /creators and /adventure-calls.
   Load after /assets/stylesheets/styles.css.

   <article class="letter">
     <p>…</p>
     <div class="letter-sign">
       <img class="letter-signature" …>
       <div class="letter-bylines">
         <div class="letter-byline"><img class="letter-portrait" …><p>…</p></div>
       </div>
     </div>
   </article>
   ───────────────────────────────────────────────────────────── */

.letter {
    --letter-paper: #fbf8f1;
    --letter-ink: var(--primary-color);
    --letter-ink-strong: var(--color-grey-dark);
    --letter-ink-soft: var(--color-grey);
    --letter-line: rgba(var(--rgb-grey-dark), 0.12);

    position: relative;
    max-width: 24em;
    padding: 1.4em 1.3em 1.2em;
    background: var(--letter-paper);
    border-radius: 0.25em;
    box-shadow:
        0 0 0 1px rgba(var(--rgb-black), 0.06),
        0 0.2em 3.2em -1.2em rgba(var(--rgb-black), 0.18),
        0 0.6em 2.4em -1.6em rgba(var(--rgb-black), 0.3);
    transform: rotate(-0.6deg);
    color: var(--letter-ink);
    font-family: var(--font-family-serif);
    font-style: italic;
    line-height: 1.55;
}

/* breathing room for whatever follows the card */
.letter + * { margin-top: 1.6em; }

.letter > p {
    margin: 0;
    font-size: 0.86em;
}

.letter > p + p { margin-top: 0.8em; }

.letter > p strong { font-style: normal; }

/* emphasis inside an italic letter reads upright */
.letter > p i,
.letter > p em { font-style: normal; }

.letter-sign {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5em;
    margin-top: 1.1em;
}

.letter img.letter-signature {
    display: block;
    width: min(5.5em, 40%);
    height: auto;
    max-height: none;
    margin: -0.2em 0 -0.4em -0.2em;
}

.letter-bylines {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6em 1.4em;
}

.letter-byline {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-style: normal;
}

.letter-byline p {
    margin: 0;
    font-family: var(--font-family);
    font-size: 0.55em;
    line-height: 1.35;
    color: var(--letter-ink-soft);
}

.letter-byline strong { color: var(--letter-ink-strong); }

.letter-byline a {
    color: var(--letter-ink-strong);
    font-weight: 400;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.letter img.letter-portrait {
    flex: none;
    width: 2.4em;
    height: 2.4em;
    max-height: none;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 15%;   /* tall illustrated portraits: keep the face */
    background: var(--color-grey-lighter);
    box-shadow: 0 0 0 2px var(--color-white), 0 0 0 3px var(--letter-line);
}

@media (prefers-reduced-motion: reduce) {
    .letter { transform: none; }
}