/* the enlargement (app/src/viewer.js), written by tools/site.py from app/src/moves.css: edit it there */
/* the picture, enlarged (viewer.js): a click opens it whole, a click on it closes it (his word, 2026-10-10) */
/* the magnifier only where a click opens it (viewer.js names the page's way: Whitman's views had shown it on pictures nothing opened) */
html[data-enlarges="all"] body:not(.editing) #chapter img[data-n]:not(a img), a[data-enlarge], a[data-enlarge] img{cursor:zoom-in}
.vw{position:fixed; inset:0; z-index:2147483600; display:grid; place-items:center; background:rgba(14,14,13,.95); cursor:zoom-out}   /* over every page's own bar (Whitman, as printed's stands at 2147483000): a dialog, the page beneath inert */
.vw[hidden]{display:none}
.vw-img{display:block; object-fit:contain; box-shadow:0 12px 50px rgba(0,0,0,.45)}   /* sized by viewer.js, from the picture's proportions */
.vw button{position:absolute; border:0; background:none; color:rgba(255,255,255,.72); font:300 1.7rem/1 Georgia, serif; padding:14px 18px; cursor:pointer}
.vw button:hover{color:#fff}
.vw-prev{left:6px; top:50%; translate:0 -50%} .vw-next{right:6px; top:50%; translate:0 -50%} .vw-close{top:6px; right:8px; font-size:2rem !important}
.vw-count{position:absolute; bottom:14px; left:0; right:0; margin:0; text-align:center; font:500 .62rem/1 ui-monospace, Menlo, monospace;
  letter-spacing:.2em; color:rgba(255,255,255,.5); pointer-events:none}
@media (max-width:700px){ .vw-prev, .vw-next{display:none} .vw-img{max-width:100vw} }
/* a stack's strip, beneath the picture enlarged: which of them it is, and each to click */
.vw-strip{position:absolute; left:50%; bottom:36px; translate:-50% 0; display:flex; align-items:center; gap:6px; padding:6px; border-radius:8px;
  background:rgba(255,255,255,.07); max-width:92vw; overflow-x:auto; cursor:default}
.vw-strip[hidden]{display:none}
/* a film enlarged: YouTube's player at the film's own proportions, in place of its still */
.vw-film{display:block; width:min(92vw, calc(84svh * 16 / 9)); height:auto; aspect-ratio:16 / 9; border:0; background:#000; cursor:auto}
.vw-img[hidden], .vw-film[hidden]{display:none}
.vw .vw-strip button{position:static; flex:none; width:46px; height:46px; padding:0; border-radius:3px; overflow:hidden; opacity:.5; translate:none}
.vw .vw-strip button[aria-current]{opacity:1; outline:2px solid rgba(255,255,255,.85); outline-offset:1px}
.vw-strip img{display:block; width:100%; height:100%; max-width:none; object-fit:cover}
.vw-strip .lab{padding:0 8px 0 4px; font:500 .62rem/1 ui-monospace, Menlo, monospace; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.6); white-space:nowrap}
.vw button:focus:not(:focus-visible){outline:none}
.vw-img{transition:filter .25s ease} .vw-img.rough{filter:blur(6px)}   /* the stand-in, softened until the sharp copy lands */
/* looked into closer (viewer.js → closer): a click on the picture goes in and comes out, beside it closes; looked into, the picture is
   placed by the script, and the caption keeps its place beneath on the enlargement's own ground, which the picture passes under */
.vw.closer{cursor:default; touch-action:none; -webkit-user-select:none; user-select:none}
.vw.closer .vw-img{cursor:zoom-in; -webkit-user-drag:none}
.vw.zoomed .vw-img{position:absolute; margin:0 !important; max-width:none; max-height:none; box-shadow:none; cursor:zoom-out}
.vw-foot{position:absolute; left:0; right:0; bottom:0; background:rgba(14,14,13,.95)}
.vw.zoomed .vw-prev, .vw.zoomed .vw-next{display:none}
.vw.closer .vw-close{top:10px; right:10px; padding:6px 13px 9px; border-radius:999px; background:rgba(14,14,13,.72)}   /* over a pale page (a phone's, at rest too), still seen */
@media (prefers-reduced-motion:reduce){ .vw-img{transition:none} }
/* the caption beneath it, in the page's reading face, the person's own words; who made it under that, in small capitals */
.vw-cap{position:absolute; margin:0; font:400 .98rem/1.45 var(--text, Georgia, serif); color:rgba(255,255,255,.88); text-wrap:pretty; pointer-events:none}
.vw-cap[hidden]{display:none}
.vw-cap .t, .vw-cap .by{display:block; max-width:42rem}
.vw-cap .by{margin-top:8px; font:500 .62rem/1.2 ui-monospace, Menlo, monospace; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.62)}
.vw-cap .t:empty, .vw-cap .by:empty{display:none}
.vw-cap .t:empty + .by{margin-top:0}
.vw [hidden]{display:none!important}   /* where no room's [hidden] rule is (viewer.css alone) */