html.article-image-viewing{overflow:hidden}
/* Article image contract: shared by editor images, screenshots and illustrations. */
.reading-page .article-content figure{margin:36px 0 44px;padding:0;max-width:100%}
.reading-page .article-content figure img{display:block;width:100%;height:auto;max-width:100%;margin:0;border:0}
.reading-page .article-content figcaption{margin:14px 0 0;padding:0;border:0;font-size:14px;line-height:1.7;color:var(--muted);overflow-wrap:anywhere}
.article-image-open,.article-image-open img{cursor:url("icons/article-zoom-in.svg") 13 13,zoom-in}
.reading-page :is(.reading-cover,.article-content) .article-image-open{display:block;padding:clamp(3px,.45vw,6px);background:var(--color-primary);border:0;border-radius:8px;overflow:hidden}
.reading-page :is(.reading-cover,.article-content) .article-image-open img{border-radius:4px;margin:0}
.reading-cover>.article-image-open{display:block}
.article-image-viewer{position:fixed;inset:0;padding:0;margin:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;border:0;border-radius:0;background:transparent;color:white;box-shadow:none;overflow:hidden}
.article-image-viewer:not([open]){display:none}
.article-image-viewer::backdrop{background:#000d;backdrop-filter:blur(8px)}
.article-image-shell,.article-image-stage{width:100%;height:100%;background:transparent}
.article-image-shell:fullscreen{width:100vw;height:100vh;height:100dvh;background:#000e}
.article-image-stage{display:flex;align-items:center;justify-content:center;padding:32px;box-sizing:border-box}
.article-image-frame{position:relative;display:grid;grid-template-rows:64px minmax(0,1fr) 64px;line-height:0;width:min(1440px,100%);height:100%;max-width:100%;outline:none;background:#080808;border-radius:8px;overflow:hidden}
.article-image-frame>img{grid-row:2;display:block;width:100%;height:100%;min-height:0;max-width:100%;max-height:100%;object-fit:contain;padding:0 64px;box-sizing:border-box;margin:0;border:0;border-radius:0}
.article-image-viewer.is-expanded .article-image-stage,.article-image-shell:fullscreen .article-image-stage{padding:0}
.article-image-viewer.is-expanded .article-image-frame,.article-image-shell:fullscreen .article-image-frame{width:100%}
.article-image-viewer.is-expanded .article-image-frame>img,.article-image-shell:fullscreen .article-image-frame>img{max-width:100vw;max-height:100vh;max-height:100dvh;border-radius:0}
.article-image-actions{position:absolute;right:12px;top:12px;display:flex;gap:8px;opacity:0;pointer-events:none;transition:opacity .18s}
.article-image-actions form{margin:0}
.article-image-actions .btn{width:44px;height:44px;min-height:44px;padding:10px;display:flex;align-items:center;justify-content:center;background:var(--color-primary);color:var(--color-primary-content);border:0;border-radius:50%;box-shadow:0 2px 12px #0005}
.article-image-actions .btn:hover{background:color-mix(in srgb,var(--color-primary) 82%,white);color:var(--color-primary-content)}
.article-image-actions .btn:focus-visible{outline:2px solid white;outline-offset:3px}
.article-image-actions svg{width:22px;height:22px}
.article-image-source{grid-row:3;min-height:0;padding:16px 20px;background:#101010;color:white;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.article-image-source a{color:white;text-decoration:underline;text-underline-offset:3px}
.article-image-frame .article-image-source{opacity:1;pointer-events:auto;overflow-y:auto;box-sizing:border-box}
.article-image-title{position:absolute;top:10px;left:20px;right:128px;max-height:44px;overflow-y:auto;font-weight:600;font-size:16px;line-height:1.4;color:white}
.article-image-frame:hover :is(.article-image-actions,.article-image-source),.article-image-frame:has(:focus-visible) :is(.article-image-actions,.article-image-source){opacity:1;pointer-events:auto}
.article-image-status{position:absolute;left:20px;right:20px;bottom:16px;text-align:center;font-size:14px;line-height:1.5;color:white;pointer-events:none}
.article-image-status:empty{display:none}
@media(hover:none),(pointer:coarse){.article-image-actions,.article-image-source{opacity:1;pointer-events:auto}}
@media(max-width:767px){.article-image-stage{padding:12px}.article-image-frame{grid-template-rows:88px minmax(0,1fr) 64px}.article-image-frame>img{padding-inline:52px}.article-image-title{left:12px;right:116px;max-height:66px;font-size:14px}.article-image-actions{right:8px;top:8px;gap:6px}.article-image-source{padding:12px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.article-image-actions,.article-image-source{transition:none}}
.article-image-actions{z-index:2}
.article-image-source{z-index:1}
/* Gallery navigation follows article order and shares the hover/touch overlay. */
.article-image-nav.btn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;padding:10px;border:0;border-radius:50%;background:var(--color-primary);color:var(--color-primary-content);box-shadow:0 2px 12px #0005;opacity:0;pointer-events:none;transition:opacity .18s}
.article-image-previous{left:12px}
.article-image-next{right:12px}
.article-image-nav svg{width:22px;height:22px}
.article-image-nav.btn:hover{background:color-mix(in srgb,var(--color-primary) 82%,white);color:var(--color-primary-content)}
.article-image-nav.btn:focus-visible{outline:2px solid white;outline-offset:3px}
.article-image-frame:hover .article-image-nav,.article-image-frame:has(:focus-visible) .article-image-nav{opacity:1;pointer-events:auto}
.article-image-frame .article-image-nav:disabled{opacity:0;pointer-events:none}
.article-image-position{position:absolute;top:76px;left:76px;z-index:2;padding:7px 11px;border-radius:20px;background:#0009;color:white;font-size:12px;line-height:1.5;opacity:0;pointer-events:none;transition:opacity .18s}
.article-image-frame:hover .article-image-position,.article-image-frame:has(:focus-visible) .article-image-position{opacity:1}
@media(hover:none),(pointer:coarse){.article-image-frame .article-image-nav:not(:disabled),.article-image-position{opacity:1;pointer-events:auto}}
@media(max-width:767px){.article-image-nav.btn{top:calc(50% + 12px)}.article-image-previous{left:8px}.article-image-next{right:8px}.article-image-position{top:100px;left:60px}}
@media(prefers-reduced-motion:reduce){.article-image-nav.btn,.article-image-position{transition:none}}