.photo a, .diagram a, .flag-image-button { cursor: zoom-in; }
.flag-image-button { background: none; border: 0; padding: 0; display: flex; }
.flag-image-button:focus-visible, .hero-image-button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; box-shadow: 0 0 0 6px #243f40; }
.hero { position: relative; }
.hero-image-button { position: absolute; top: 1rem; right: 1rem; border: 1px solid #ffffff90; border-radius: .3rem; background: #183333d9; color: white; padding: .5rem .75rem; cursor: zoom-in; font: inherit; font-size: .8rem; }
#image-dialog { width: max-content; max-width: calc(100vw - 2rem); max-height: calc(100dvh - 2rem); padding: 1rem; margin: auto; border: 0; border-radius: .6rem; background: #fcfaf5; color: #243f40; box-sizing: border-box; overflow: auto; }
#image-dialog::backdrop { background: #102526cc; }
.image-dialog-header { display: flex; justify-content: flex-end; align-items: center; margin-bottom: .75rem; }
.close-image { flex: none; font: inherit; cursor: pointer; background: #243f40; color: white; border: 0; border-radius: .3rem; padding: .5rem .8rem; }
#image-dialog figure { margin: 0; }
#image-dialog img { display: block; width: auto; height: auto; max-width: min(1400px, calc(100vw - 4rem)); max-height: calc(100dvh - 11rem); object-fit: contain; margin: auto; }
#image-dialog figcaption { max-width: 75ch; margin: .75rem auto 0; font-size: .9rem; line-height: 1.5; text-align: center; }
@media print { #image-dialog, .hero-image-button { display: none !important; } }