/* Glyph engine figures (js/glyph.js). Size the figure with width (+ aspect-ratio); the image's own ratio is the default. */
.glyph{position:relative; display:block; width:100%; aspect-ratio:var(--glyph-ar, 4 / 5); overflow:hidden; contain:paint; margin:0}
.glyph > .glyph-cv{position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none}
.glyph > img{width:100%; height:100%; object-fit:contain}
.glyph-overlay{position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none; z-index:45}
.glyph-ch{transition:opacity .18s linear}
@media (prefers-reduced-motion:reduce){ .glyph-overlay{display:none !important} }