.artwork-comparison{width:min(100%,420px);margin:0 auto 36px;color:var(--world-ink);--comparison-position:50%}
.comparison-stage{position:relative;width:min(100%,360px,46svh);aspect-ratio:1;margin-inline:auto;overflow:hidden;background:#fff;border:1px solid #dedede;touch-action:pan-y;user-select:none;cursor:ew-resize}
.comparison-layer{position:absolute;inset:0;background:#fff;pointer-events:none;overflow:hidden}
.comparison-layer img{display:block;position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}
.comparison-before{clip-path:inset(0 calc(100% - var(--comparison-position)) 0 0)}
/* Show the mark above the original portfolio caption, without altering the file. */
.comparison-layer.is-original-board img{inset:7% auto auto -7.5%;width:115%;height:auto;clip-path:inset(0 0 30% 0)}
.comparison-labels{position:absolute;inset:10px 10px auto;display:flex;justify-content:space-between;gap:12px;pointer-events:none}
.comparison-labels span{background:#fffffff2;color:#202124;padding:6px 9px;border:1px solid #dedede;border-radius:4px;font-size:10px;font-weight:600;line-height:1.2}
.comparison-divider{position:absolute;left:var(--comparison-position);top:0;bottom:0;width:2px;transform:translateX(-50%);background:#fff;box-shadow:0 0 0 1px #20212466;pointer-events:none}
.comparison-divider>span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;gap:6px;width:42px;height:42px;background:#fff;color:#202124;border:1px solid #d3d3d3;border-radius:50%;box-shadow:0 2px 8px #0002;font:24px/1 sans-serif}
.comparison-divider i{width:1px;height:16px;background:#b6b6b6}
.comparison-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.comparison-stage:focus-within{outline:2px solid var(--world-accent,#705418);outline-offset:4px}
.comparison-caption{text-align:center;font-size:12px;line-height:1.5;margin:16px 0 0}
.comparison-caption>span{display:block}
.comparison-hint{font-size:10px;color:var(--muted);margin-top:5px}
.comparison-sources{display:flex;justify-content:center;gap:20px;margin-top:10px}
.comparison-sources .comparison-source{font-size:10px;line-height:1.5;text-decoration:underline;text-underline-offset:3px}
.comparison-source:focus-visible{outline:2px solid var(--world-accent,#705418);outline-offset:4px}
@media(max-width:700px){.comparison-stage{width:min(100%,320px,42svh)}.comparison-labels{inset:8px 8px auto}.comparison-labels span{font-size:9px;padding:5px 7px}}