.viewer-about-button,
.viewer-close-button {
    justify-self: end;
    border: 0;
    border-radius: 999px;
    padding: 8px 14px;
    color: #fff;
    background: var(--accent-dark);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.viewer-about-button:hover,
.viewer-about-button:focus-visible,
.viewer-close-button:hover,
.viewer-close-button:focus-visible { background: var(--accent); }

.viewer-close-button {
    justify-self: start;
    text-decoration: none;
}

.about-dialog {
    width: min(560px, calc(100% - 32px));
    max-height: min(660px, calc(100% - 32px));
    padding: 0;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 24px 72px rgba(0, 0, 0, .28);
    color: var(--ink);
    background: var(--paper);
}

.about-dialog::backdrop { background: rgba(37, 32, 27, .56); }
.about-dialog__content { padding: clamp(24px, 5vw, 42px); }

.about-dialog h2 {
    margin: 0 0 18px;
    font-family: Georgia, "Times New Roman", serif;
    color: var(--accent-dark);
}

.about-dialog__text { margin: 0; line-height: 1.65; white-space: normal; }
.about-dialog__actions { display: flex; justify-content: end; margin-top: 28px; }

.about-dialog__actions button {
    min-width: 88px;
    border: 0;
    border-radius: 999px;
    padding: 10px 18px;
    color: #fff;
    background: var(--accent-dark);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.about-dialog__actions button:hover,
.about-dialog__actions button:focus-visible { background: var(--accent); }

@media (max-width: 720px) {
    .viewer-about-button,
    .viewer-close-button { padding: 7px 11px; font-size: .82rem; }
}