/* Mondrian B217 annotation: same card and lightbox pattern as sitewide details. */
html:root { scroll-behavior: smooth !important; }
.mondrian-annotated { margin: 2.25rem 0 2.75rem; }
.mondrian-annotated-intro { max-width: 65ch; }
.mondrian-annotated-map { position: relative; max-width: 760px; margin: 1.2rem 0 .5rem; border: 1px solid #d5d3cc; background: #f6f4ef; }
.mondrian-annotated-map img { display: block; width: 100%; height: auto; }
.postcontent a.mondrian-annotated-spot { position: absolute; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; transform: translate(-50%,-50%); border: 2px solid #fff; border-radius: 50%; background: #171717; color: #fff !important; font: 700 1rem/1 Arial,sans-serif; text-decoration: none !important; box-shadow: 0 1px 7px #0009; }
.postcontent a.mondrian-annotated-spot:hover, .postcontent a.mondrian-annotated-spot:focus-visible { background: #fff; color: #111 !important; text-decoration: none !important; outline: 3px solid #1357a2; outline-offset: 2px; }
.mondrian-annotated-map-caption { margin: .35rem 0 1.4rem; font-size: .9rem; color: #545454; }
.mondrian-annotated .series-top-ten { padding-top: 10px; }
.mondrian-annotated .series-explained-card { scroll-margin-top: 120px; }
.mondrian-annotated .series-explained-card:target { outline: 3px solid #1357a2; outline-offset: 2px; }
.mondrian-annotated .series-explained-card .grid-inner img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.mondrian-annotated .series-explained-card .grid-item { display: block; }
@media (max-width: 700px) { .postcontent a.mondrian-annotated-spot { width: 2.15rem; height: 2.15rem; } }
@media (prefers-reduced-motion: reduce) { html:root { scroll-behavior: auto !important; } }