/* Letter to Logan Skin Clinic patients: shared by the popup and the standalone page. */
.letter { font-family: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif; font-size: 1.06rem; line-height: 1.75; color: var(--ink, #1d2338); }
.letter p { margin: 0 0 1.05em; }
.letter .update { font-family: var(--font, system-ui, sans-serif); font-size: .95rem; line-height: 1.55; background: var(--warm, #f7f2d9); border-left: 4px solid var(--leaf, var(--navy, #182153)); border-radius: 0 10px 10px 0; padding: .8rem 1rem; margin: 0 0 1.6rem; color: var(--ink, #1d2338); }
.letter .written { font-family: var(--font, system-ui, sans-serif); font-size: .9rem; letter-spacing: .02em; color: var(--muted, #565d78); margin: 0 0 1.3rem; }
.letter .salutation { font-weight: 600; }
.letter h2 { font-family: inherit; font-size: 1.35rem; line-height: 1.3; font-weight: 700; letter-spacing: 0; color: #a3231b; margin: 1.1em 0 .8em; }
.letter a { color: var(--link, #2f6fae); }
.letter .sign { font-family: "Snell Roundhand", "Segoe Script", "Brush Script MT", cursive; font-size: 2rem; line-height: 1.1; color: var(--navy, #182153); margin: .4rem 0 .3rem; }
.letter .credit { font-family: var(--font, system-ui, sans-serif); font-size: .95rem; line-height: 1.55; color: var(--muted, #565d78); }
@media (prefers-color-scheme: dark) { .letter h2 { color: #ff9a8f; } }

/* Popup */
html.letter-open { overflow: hidden; }
dialog.letter-dialog { border: 0; padding: 0; width: min(44rem, calc(100% - 1.5rem)); max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); border-radius: 12px; background: var(--bg, #fff); color: var(--ink, #1d2338); box-shadow: 0 30px 80px rgba(9, 13, 40, .45); overflow: hidden; }
dialog.letter-dialog[open] { display: flex; flex-direction: column; }
dialog.letter-dialog::backdrop { background: rgba(9, 13, 40, .6); }
@media (prefers-reduced-motion: no-preference) { dialog.letter-dialog[open] { animation: letter-in .18s ease-out; } @keyframes letter-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } }
.letter-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem .5rem .5rem 1.4rem; border-bottom: 1px solid var(--line, #e2e6f1); }
.letter-bar p { margin: 0; font-weight: 700; font-family: var(--font, system-ui, sans-serif); color: var(--navy, #182153); }
.letter-x { flex: none; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: transparent; color: var(--navy, #182153); font-size: 1.9rem; line-height: 1; cursor: pointer; }
.letter-x:hover { background: var(--soft, #f4f6fb); }
.letter-body { overflow-y: auto; padding: 1.4rem clamp(1.2rem, 4vw, 2.4rem) 1rem; -webkit-overflow-scrolling: touch; }
.letter-body:focus-visible { outline-offset: -3px; }
.letter-foot { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: flex-end; padding: .9rem 1.4rem; border-top: 1px solid var(--line, #e2e6f1); }
.letter-foot .btn { margin: 0; }
.letter-loading { font-family: var(--font, system-ui, sans-serif); color: var(--muted, #565d78); }
.letter-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }