.tool-cover{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:#e9edf2;border-radius:16px;isolation:isolate}.tool-cover>img{display:block;width:100%;height:100%;object-fit:cover}.tool-cover-motion{position:absolute;inset:0;background-size:cover;background-position:center;pointer-events:none}.tool-cover-label{white-space:nowrap;position:absolute;left:8px;bottom:8px;padding:4px 7px;border-radius:6px;background:#142437df;color:white;font:11px/1.4 system-ui}.tool-cover-toggle{position:absolute;right:8px;bottom:8px;min-width:44px;min-height:44px;border:1px solid #ccd8e4;border-radius:50%;background:#ffffffed;color:#142437;cursor:pointer}.tool-cover-toggle:focus-visible{outline:3px solid #1e69df;outline-offset:-3px}.tool-cover-fallback{position:absolute;inset:0;place-content:center;text-align:center;color:#374d64;background:#edf2f7;padding:20px}.tool-cover-fallback:not([hidden]){display:grid}.tool-cover [hidden]{display:none!important}@media(prefers-reduced-motion:reduce){.tool-cover-motion,.tool-cover-toggle{display:none}}@media(max-width:600px){.tool-cover-label{font-size:10px;max-width:calc(100% - 65px)}}
/* Reserve the initial route area so async catalog loading cannot move a visible footer. */
#main:empty{min-height:100vh;min-height:100svh}

/* Readable copy outside upgraded photographic cover artwork. */
.tool-cover .tool-cover-label{display:none}.photo-cover-copy{font:14px/1.6 system-ui;margin:10px 0;color:#324d3c}.photo-cover-copy strong{font-weight:600}.photo-cover-copy p{font-size:14px;line-height:1.6;margin:6px 0}.photo-cover-copy .photo-cover-origin{color:#5d6d64}

/* Put the tool identity and purpose before the compact illustration disclosure. */
[data-media-tool] .photo-cover-copy{margin:6px 0 10px;overflow-wrap:anywhere}[data-media-tool] .photo-cover-purpose{margin:0 0 5px}[data-media-tool] .photo-cover-copy strong{display:block;font-size:14px;font-weight:500}[data-media-tool] .photo-cover-provenance{font-size:14px;color:#5d6d64;margin-top:5px}[data-media-tool] .photo-cover-provenance summary{cursor:pointer}[data-media-tool] .photo-cover-provenance p{margin:5px 0}[data-media-tool]>.tool-cover+h3{margin-top:10px;margin-bottom:4px;overflow-wrap:anywhere}

.photo-cover-card > :not(.tool-cover){margin-left:8px;margin-right:8px}

.photo-cover-panel-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;font-size:14px;line-height:1.4;text-align:center;margin:4px 0 8px}.photo-cover-panel-legend span{overflow-wrap:anywhere}
/* Keep the touch control outside photographic comparison artwork. */
@media(max-width:600px){.tool-cover{aspect-ratio:auto;padding-bottom:48px}.tool-cover>img{height:auto;aspect-ratio:16/9}.tool-cover>.tool-cover-motion{bottom:48px}.tool-cover>.tool-cover-toggle{right:8px;bottom:2px;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;line-height:1;border-radius:10px}.tool-cover>.tool-cover-fallback{bottom:48px}} 
/* Let each catalog card keep its own content height. */
[data-media-tool]{align-self:start}

@media (max-width:600px){[data-media-tool]{grid-column:1 / -1;}}
/* Reserve a separate control row at every viewport width. */
.tool-cover{aspect-ratio:auto;padding-bottom:48px}.tool-cover>img{height:auto;aspect-ratio:16/9}.tool-cover>.tool-cover-motion{bottom:48px}.tool-cover>.tool-cover-toggle{right:8px;bottom:2px;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;line-height:1;border-radius:10px}.tool-cover>.tool-cover-fallback{bottom:48px}

/* Keep media controls stationary while a pointer enters the card. */
.photo-cover-card:hover{transform:none}