article { line-height: 1.65; }
article video { width: 100%; height: auto; max-height: 36rem; background: #172327; }
article img { height: auto; }
article table { font-size: 0.91rem; }

/* Native video controls and ordinary figures keep media easy to maintain. */
article figure.annotated-figure { margin: 1.5rem 0; }
article figure.annotated-figure img { display: block; width: 100%; height: auto; }
article figure.annotated-figure figcaption { text-align: left; margin-top: 0.75rem; line-height: 1.6; }
article .research-video { margin: 1.5rem 0; }
article .research-video figcaption { margin-top: 0.6rem; }
article .research-video .video-download { margin-top: 0.5rem; font-size: 0.9rem; }
article .video-portrait video { display: block; max-width: 22rem; margin-inline: auto; }
article .media-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: start;
    margin-block: 1.5rem;
}
article .media-pair figure { margin: 0; min-width: 0; }
article .media-pair img { max-width: 100%; }

/* Preserve readable labels on narrow screens instead of shrinking the graph. */
article .mermaid-container {
    display: block;
    overflow-x: auto;
    margin-block: 1.25rem;
    padding-top: 2.25rem;
}
article .mermaid-container > pre.mermaid {
    min-width: 38rem;
    margin: 0;
    padding: 0;
}
/* Mermaid emits intrinsic dimensions; the extension otherwise stretches every
   SVG to the article width, enlarging tall graphs and shrinking wide ones. */
article .mermaid-container > pre.mermaid > svg {
    width: auto;
    height: auto;
    max-width: none !important;
}
article .mermaid-container > .mermaid-fullscreen-btn {
    top: 0 !important;
    right: 0 !important;
    width: auto;
    height: auto;
    min-height: 2rem;
    padding: 0.25rem 0.65rem;
    font: inherit;
    font-size: 0.875rem;
}
article .mermaid-fullscreen-btn:focus-visible {
    outline: 2px solid var(--color-brand-primary);
    outline-offset: 2px;
}
.mermaid-fullscreen-modal .mermaid-container-fullscreen {
    justify-content: flex-start;
}
.mermaid-fullscreen-modal pre.mermaid {
    min-width: 38rem;
}
.mermaid-fullscreen-modal .mermaid-container-fullscreen .mermaid svg {
    height: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}