@import url("paintings.css");
.writing-grid { padding-bottom: 48px; }
.writing-card { cursor: pointer; }
.writing-card__cover { display: grid; width: 100%; height: 100%; aspect-ratio: 1; place-items: center; overflow: hidden; background: #efede7; }
.writing-card__cover img { width: auto; height: auto; max-width: 82%; max-height: 78%; object-fit: contain; mix-blend-mode: multiply; }
.writing-card__glyph { font: clamp(84px, 14vw, 180px)/1 Helvetica, Arial, sans-serif; }
.writing-card__description { display: -webkit-box; margin: 11px 0 0; overflow: hidden; color: var(--muted); font: 13px/1.45 Arial, sans-serif; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.writing-dialog__work { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 360px); gap: 30px; min-height: 100dvh; max-width: 1400px; padding: 80px 32px 48px; margin: 0 auto; }
.writing-dialog__visual { display: grid; place-items: center; }.writing-dialog__visual img { width: 100%; max-height: calc(100dvh - 130px); object-fit: contain; mix-blend-mode: multiply; }.writing-dialog__copy { align-self: center; max-width: 440px; }.writing-dialog__copy h2, .writing-reader__poem h2 { margin: 0 0 28px; font: 46px/.92 Helvetica, Arial, sans-serif; letter-spacing: -.05em; }.writing-dialog__copy p { color: var(--muted); font: 16px/1.55 Arial, sans-serif; }
.writing-reader { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); gap: 42px; max-width: 1280px; padding: 80px 32px 50px; margin: 0 auto; }.writing-reader__poem { max-width: 680px; }.writing-reader__poem p { margin: 0; font: 19px/1.5 Helvetica, Arial, sans-serif; white-space: pre-wrap; }.writing-annotation { padding: 1px 2px; border: 0; border-radius: 0; color: inherit; background: #ffe500; cursor: pointer; font: inherit; text-decoration: none; }.writing-annotation:hover, .writing-annotation:focus-visible, .writing-annotation:active, .writing-annotation.is-selected { color: #fff; background: #ff327d; outline: 0; }.writing-reader__notes { position: sticky; top: 30px; align-self: start; min-height: 160px; padding: 23px; border: 1px solid #d8d4cc; background: #efede7; }.writing-reader__notes h3 { margin: 0 0 15px; font: 11px/1 Helvetica, Arial, sans-serif; letter-spacing: .09em; text-transform: uppercase; }.writing-reader__notes blockquote { margin: 0 0 14px; color: #625e57; font: italic 15px/1.4 Helvetica, Arial, sans-serif; }.writing-reader__notes p { margin: 0; font: 14px/1.5 Helvetica, Arial, sans-serif; white-space: pre-line; }.writing-reader__notes.is-empty p { color: var(--muted); }
@media (max-width: 800px) { .writing-dialog__work, .writing-reader { display: block; padding: 76px 20px 36px; }.writing-dialog__copy { margin-top: 28px; }.writing-reader__notes { position: static; margin-top: 34px; }.writing-reader__poem p { font-size: 17px; } }