/* The reading room and its papers (/reading-room; tools/site.py), in stanza.pictures's own manner (site.css's .legal: italic display
   headings, the reading face, the accent for links), with what a paper adds: its eyebrow and deck, its contents, figures, notes to its
   sources, the sources. From the comps, sketches/2026-10-16-reading-room/material/paper.css. Every class here begins rr-: the pages also
   carry moves.css, edit.css and the look, whose .lede, .eyebrow, .room, .meta, .pair, .c, .r and .t would reach a paper's own */
@font-face{font-family:"Stanza Fleurons 1766"; src:url("/m/fonts/room/fleurons-1766.woff2") format("woff2")}
@font-face{font-family:"Stanza Fleurons 1860"; src:url("/m/fonts/room/fleurons-1860.woff2") format("woff2")}
main.legal{max-width:40rem; margin:0 auto; padding:64px clamp(16px,4vw,24px) 80px}   /* 64px at every width: below 1067px wide the old clamp(26px,6vw,64px) set the title under the site's header (43px tall on a phone; 2026-11-01) */
.rr-eyebrow{margin:0 0 10px; font:500 11px/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--soft)}
.rr-eyebrow a{color:inherit}
.legal .rr-deck{font:400 clamp(1.2rem,2.4vw,1.45rem)/1.4 var(--display); margin:0 0 22px; color:var(--soft)}
.legal .rr-lede p{font-size:1.14rem; line-height:1.6}
.rr-toc{margin:26px 0 8px; padding:16px 0 4px; border-top:1px solid color-mix(in srgb,var(--ink) 16%,transparent)}
.legal .rr-toc h2{font:500 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--soft); margin:0 0 10px}
.rr-toc ol{margin:0; padding-left:1.4em}
.legal .rr-toc li{margin:0 0 4px; font-size:1rem}
.legal .rr-toc li.rr-plain{list-style:none}
.legal h2 .rr-n{font-style:normal}
.rr-paper sup{font-size:.68em; line-height:0; margin-left:1px}
.rr-paper sup a{text-decoration:none}
.rr-paper blockquote{margin:0 0 18px; padding:2px 0 2px 18px; border-left:2px solid color-mix(in srgb,var(--accent) 60%,transparent); font-style:italic;
  font-size:1.06rem; line-height:1.6}
.rr-paper figure{margin:24px 0 26px}
.rr-paper figure img{display:block; max-width:100%; height:auto}
.rr-paper figcaption{margin-top:8px; font-size:.92rem; line-height:1.45; color:var(--soft)}
.rr-paper figcaption b{font-weight:500; color:var(--ink)}
.rr-scan{background:#fff}
.rr-flowers{display:grid; grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); gap:14px 10px; align-items:end}
.rr-flowers span{display:flex; flex-direction:column; align-items:center; gap:6px; font:500 10px/1.3 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--soft); text-align:center}
.rr-paper .rr-flowers img{height:64px; width:auto}
.rr-pair{display:flex; gap:22px; align-items:center; flex-wrap:wrap}
.rr-paper .rr-pair img{height:120px; width:auto; background:#fff}
.rr-frame{display:grid; grid-template-columns:1em 14em 1em; grid-template-rows:1em 9em 1em; width:max-content; margin:0 auto; color:var(--ink);
  font:400 24px/1 "Stanza Fleurons 1766"}   /* in ems of the diamond's size: it sets half an em wide, 28 across and 18 down, all whole */
.rr-corner{text-align:center}
.rr-side{white-space:nowrap; overflow:hidden; text-align:center}
.rr-side.rr-left, .rr-side.rr-right{writing-mode:vertical-rl; text-orientation:sideways}   /* turned, as a compositor turned them: a private-use character would stand upright, a whole em apart */
.rr-side.rr-left, .rr-side.rr-bottom{transform:rotate(180deg)}
.rr-in{display:flex; flex-direction:column; justify-content:center; overflow:hidden; padding:.9em 1.2em; font:italic 400 .7em/1.55 var(--display); text-align:left}
.rr-in .rr-title{display:block; font-style:normal; text-align:center; margin-bottom:.36em; letter-spacing:.08em; font-variant-caps:all-small-caps}
.rr-in .rr-verse{display:block; padding-left:1.2em; text-indent:-1.2em}   /* a line too long for the measure hangs, as stanza sets it */
.rr-in .rr-flower{display:block; text-align:center; font:400 1.19em/1 "Stanza Fleurons 1766"; margin:0 0 .5em; color:var(--accent)}
.rr-sources ol{padding-left:1.4em}
.legal .rr-sources li{margin:0 0 10px; font-size:.95rem; line-height:1.5; overflow-wrap:anywhere}
.legal .rr-sources li:target{background:color-mix(in srgb,#e8c547 30%,transparent)}
.rr-foot{margin-top:44px; font:500 11px/1.5 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--soft)}
.rr-foot a{color:inherit}
.rr-held{margin:0 0 26px; padding:12px 14px; border:1px dashed color-mix(in srgb,var(--ink) 30%,transparent); border-radius:3px; color:var(--soft)}
/* the room: its shelves and the papers on them */
.legal .rr-line{font:400 clamp(1.25rem,2.6vw,1.6rem)/1.35 var(--display); margin:0 0 18px}
details.rr-what{margin:0 0 30px; color:var(--soft)}
details.rr-what summary{cursor:pointer; font:500 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; list-style:none}
details.rr-what summary::-webkit-details-marker{display:none}
details.rr-what summary::before{content:"☞ "; color:var(--accent)}
.legal details.rr-what p{margin:12px 0 0}
.legal .rr-shelf{margin:34px 0 0; padding-top:20px; border-top:1px solid color-mix(in srgb,var(--ink) 16%,transparent)}
.legal .rr-shelf > h2{font:500 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--soft); margin:0 0 8px}
.legal .rr-shelf > .rr-for{margin:0 0 16px; color:var(--soft); font-style:italic}
.rr-card{margin:0 0 18px; padding:18px 20px; background:color-mix(in srgb,var(--ink) 4%,var(--ground)); border-radius:2px}
.legal .rr-card h3{font:italic 400 1.55rem/1.2 var(--display); margin:0 0 6px}
.rr-card h3 a{color:var(--ink); text-decoration:none}
.rr-card h3 a:hover{text-decoration:underline; text-underline-offset:4px}
.legal .rr-card .rr-meta{margin:0 0 8px; font:500 11px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--soft)}
.legal .rr-card p{margin:0 0 8px}
.legal .rr-card .rr-soon{font:italic 400 1.05rem/1.4 var(--display); letter-spacing:0; text-transform:none}   /* a held paper's card: Coming soon, as written */
.legal .rr-to-come{color:var(--soft); font-style:italic}
@media (max-width:640px){ .rr-paper .rr-pair img{height:96px} .rr-frame{font-size:18px} .legal .rr-lede p{font-size:1.06rem} }
.legal .rr-by{margin:-2px 0 18px; font:500 12px/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink)}
.rr-page{border:1px solid color-mix(in srgb,var(--ink) 14%,transparent)}
.rr-row{display:flex; gap:10px; align-items:flex-end}
.rr-paper .rr-row img{flex:1 1 0; min-width:0}
.rr-paper figure img.rr-narrow{max-width:min(100%,19rem); margin:0 auto}
/* "Whitman's flowers" (2026-11-01): the four pages of 1860 side by side at one height, two by two on a phone, each row at one height (each
   column's share its page's width over its height, in thousandths: 580, 651 | 651, 631; a pair's share their sum); the nine set in Stanza Fleurons 1860, each over its name; and a poem inside
   his triple rule as dress.js draws it (whitman-triple: fine 3, gap 2, heavy 7, gap 2, fine 3), in the page's ink */
.rr-leaves{display:flex; gap:10px; align-items:flex-end}
.rr-two{display:grid; gap:10px; align-items:end}
.rr-two:first-child{flex:1231 1 0; grid-template-columns:580fr 651fr}
.rr-two:last-child{flex:1282 1 0; grid-template-columns:651fr 631fr}
.rr-nine{display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-end; gap:22px 30px}
.rr-nine span{display:flex; flex-direction:column; align-items:center; gap:8px; font:500 10px/1.3 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--soft); text-align:center}
.rr-nine i{font:normal 400 46px/1.15 "Stanza Fleurons 1860"; letter-spacing:0; color:var(--ink); white-space:nowrap}
.rr-triple{max-width:29rem; margin:0 auto; border:2px solid var(--ink); padding:1.4px; color:var(--ink)}
.rr-triple > div{border:5px solid var(--ink); padding:1.4px}
.rr-triple > div > div{border:2px solid var(--ink); padding:1.7em 1.8em 1.5em; font:400 1.02rem/1.6 var(--display)}
.rr-triple span{display:block}
.rr-triple .rr-title{text-align:center; font-size:1.5em; line-height:1.2; margin:0 0 .45em}
.rr-triple .rr-w{text-align:center; font:400 1.4em/1 "Stanza Fleurons 1860"; margin:0 0 1em}
.rr-triple .rr-end{margin:.9em 0 0}
.rr-triple .rr-verse{padding-left:1.2em; text-indent:-1.2em}   /* a line too long for the measure hangs, as stanza sets it */
.rr-triple .rr-sc{display:inline; font-variant-caps:small-caps}
@media (max-width:640px){ .rr-leaves{flex-direction:column; align-items:stretch} .rr-two:first-child, .rr-two:last-child{flex:none} .rr-nine i{font-size:38px} .rr-triple > div > div{padding:1.3em 1.1em 1.2em; font-size:.95rem} }
.rr-paper .rr-leaves img{width:100%}
/* "Whitman's flowers", the sun (2026-11-01, the pilot of a process shown, not told): side-on steps, each a drawing over its sentence, three
   across at the desk and one under another on a phone; the drawings in the page's ink, the stamp's face in the accent, nothing in them
   moving; picture rows for the cover, the mirror, the two sources and three drawings, and the sun at a poem's size (pixels kept) */
.rr-steps{list-style:none; margin:0 0 12px; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:14px 16px; counter-reset:rr-step}
.rr-steps li{counter-increment:rr-step}
.rr-steps svg{display:block; width:100%; height:auto; color:var(--ink); overflow:visible}
.legal .rr-steps p{margin:6px 0 0; font-size:.88rem; line-height:1.45; color:var(--ink)}
.legal .rr-steps p::before{content:counter(rr-step) ". "; color:var(--soft)}
.rr-steps .stamp{fill:currentColor; fill-opacity:.16; stroke:currentColor; stroke-width:1.3; stroke-linejoin:round}
.rr-steps .face{fill:none; stroke:var(--accent); stroke-width:3; stroke-linecap:butt}
.rr-steps .lifted{opacity:.35}
.rr-steps .board{fill:currentColor; fill-opacity:.07; stroke:currentColor; stroke-opacity:.35}
.rr-steps .cloth{fill:none; stroke:currentColor; stroke-width:3; stroke-linejoin:round}
.rr-steps .shade{fill:currentColor; fill-opacity:.3}
.rr-steps .arrow{fill:none; stroke:var(--soft); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.rr-steps .ink{fill:currentColor}
.rr-steps .paper{fill:none; stroke:currentColor; stroke-width:1.2}
.rr-steps .platen{fill:currentColor; fill-opacity:.08; stroke:currentColor; stroke-opacity:.5}
.rr-paper figure img.rr-step-photo{max-width:min(100%,24rem); margin:6px auto 0}
.rr-two-pics{display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:center}
.rr-two-pics svg{display:block; width:100%; height:auto}
.rr-three-pics{display:grid; grid-template-columns:1fr 1fr 1.03fr; gap:10px; align-items:center}
.rr-sources-row, .rr-drawings-row{display:grid; gap:12px; align-items:end}
.rr-sources-row{grid-template-columns:1fr 1fr; margin-bottom:14px}
.rr-drawings-row{grid-template-columns:repeat(3,1fr)}
.rr-cell span{display:block; margin-top:6px; font:500 10px/1.3 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--soft); text-align:center}
.rr-pixels img{image-rendering:pixelated; width:100%; height:auto; background:#f1f1f1}
@media (max-width:640px){ .rr-steps{grid-template-columns:1fr} .rr-steps svg{max-width:22rem} .rr-three-pics{grid-template-columns:1fr 1fr} .rr-three-pics img:last-child{grid-column:1 / -1; max-width:70%; margin:0 auto} .rr-drawings-row{grid-template-columns:1fr 1fr} }
/* the sun at a poem's size (his ask, 9:30 am: the real thing first, then a magnifier, each square one pixel): the line's end with each sun
   as stanza sets it (1.4 of the words), boxed in the accent; below, the boxed sun enlarged from an ordinary screen and a sharp one */
.rr-actual{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:0 0 16px}
.rr-poem-end{display:flex; flex-direction:column; align-items:center; gap:10px; padding:14px 8px 10px; background:color-mix(in srgb,var(--ink) 3%,var(--ground))}
.rr-poem-end .rr-verse{font:400 1rem/1.5 var(--display); text-align:center}
.rr-paper .rr-poem-end img.rr-sun-at-size{display:block; height:1.4em; width:auto; max-width:none; outline:1px solid var(--accent); outline-offset:5px; margin:4px 0}
.rr-poem-end .rr-label, .rr-mag-label{font:500 10px/1.3 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--soft); text-align:center}
.rr-mag{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:0 0 12px}
.rr-mag-label{grid-column:1 / -1; text-align:left}
.rr-paper .rr-mag img{width:100%; max-width:288px; height:auto; margin:0 auto; border:1px solid var(--accent)}
@media (max-width:640px){ .rr-actual, .rr-mag{gap:10px} .rr-poem-end .rr-verse{font-size:.86rem} }
/* the three suns and the held sun at a poem's size, set in the face itself (Stanza Fleurons 1860, U+EB0A, EB0B, EB08) */
.rr-cell .rr-glyph{display:block; margin:0; font:400 clamp(58px,9vw,100px)/1.15 "Stanza Fleurons 1860"; letter-spacing:0; text-transform:none; text-align:center; color:var(--ink); white-space:nowrap}
.rr-poem-end .rr-sun-glyph{display:block; font:400 1.4em/1 "Stanza Fleurons 1860"; color:var(--ink); outline:1px solid var(--accent); outline-offset:5px; margin:4px 0}

/* How Whitman made his books (2026-11-01, stanza-paper-2): a drawing to scale, two lines one above the other, a tall page and a
   narrow one held to a reading width */
.rr-scale{display:block; width:100%; max-width:34rem; height:auto; color:var(--ink)}
.rr-stack{display:grid; gap:8px}
.rr-paper figure img.rr-tall{max-width:min(100%,30rem); margin:0 auto}
.rr-paper figure img.rr-narrow{max-width:min(100%,22rem); margin:10px auto 0}

/* How Blake made a page (2026-11-01, stanza-blake): a still beside its side-on drawing, the drawing's parts named (the copper, the
   varnish, the acid, the ink, the paper, the press); and the slider, two pictures of one thing, the first wiped across the second by
   the reader's hand (wipe.js), side by side where the script doesn't run */
.rr-blake-step{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:18px}
.rr-blake-step img{max-width:20rem; justify-self:center}
.rr-blake-two{grid-template-columns:minmax(0,.9fr) minmax(0,1fr); align-items:end}
.rr-side{display:block; width:100%; height:auto; color:var(--ink); overflow:visible}
.rr-side .cu{fill:currentColor; fill-opacity:.16; stroke:currentColor; stroke-width:1.2; stroke-linejoin:round}
.rr-side .vn{fill:var(--accent)}
.rr-side .acid{fill:var(--accent); fill-opacity:.1}
.rr-side .was{fill:none; stroke:currentColor; stroke-opacity:.5; stroke-dasharray:3 3}
.rr-side .lead{fill:none; stroke:var(--soft); stroke-width:1}
.rr-side .lb{font:500 10px/1 var(--mono); letter-spacing:.06em; fill:var(--soft)}
.rr-side .board{fill:currentColor; fill-opacity:.07; stroke:currentColor; stroke-opacity:.35}
.rr-side .ink{fill:currentColor}
.rr-side .paper{fill:none; stroke:currentColor; stroke-width:1.2}
.rr-side .roller{fill:currentColor; fill-opacity:.08; stroke:currentColor; stroke-opacity:.6}
.rr-side .arrow{fill:none; stroke:var(--soft); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.rr-wipe{display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:34rem; margin:0 auto}
.rr-wipe.on{display:block}
.rr-wipe-field{position:relative; display:grid}
.rr-wipe-field img{grid-area:1/1; width:100%; height:auto}
.rr-wipe-field img:first-child{z-index:1; clip-path:inset(0 calc(100% - var(--at,50%)) 0 0)}
.rr-wipe-field::after{content:""; position:absolute; z-index:2; top:0; bottom:0; left:var(--at,50%); width:1px; background:var(--ground); box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 25%,transparent); pointer-events:none}
.rr-wipe input[type=range]{display:block; width:100%; margin:12px 0 4px; accent-color:var(--accent)}
.rr-wipe-labels{display:flex; justify-content:space-between; gap:12px; font:500 10px/1.3 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--soft)}
@media (max-width:640px){ .rr-blake-step{grid-template-columns:1fr} .rr-blake-two{grid-template-columns:1fr 1fr} }
/* Whitman's Spellings (2026-11-01, stanza-paper-4): each card a figure holding .rr-w, the word as printed in 1855 over a dictionary of
   the day, each picture a link to its page and labelled under it; the caption the card's words, its first bold the word, in the ink.
   The pictures are set at 0.6 of their pixels (their width and height), never wider than the measure. The chart: one series, the ink */
.rr-paper figure:has(> .rr-w){margin:18px 0 22px; padding:16px 18px 14px; background:color-mix(in srgb,var(--ink) 4%,var(--ground)); border-radius:2px}
.rr-w{display:flex; flex-direction:column; align-items:flex-start; gap:12px}
.rr-w a.rr-w-pic{display:block; max-width:100%; color:inherit; text-decoration:none}
.rr-paper .rr-w img{display:block; max-width:100%; height:auto; background:#fff}
.rr-w a.rr-w-pic:hover img{outline:1px solid color-mix(in srgb,var(--ink) 30%,transparent); outline-offset:2px}
.rr-w .rr-from{display:block; margin-top:5px; font:500 10px/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--soft)}
.rr-w a.rr-w-pic:hover .rr-from{text-decoration:underline; text-underline-offset:3px}
.rr-paper figure:has(> .rr-w) figcaption{margin-top:12px; font-size:1rem; line-height:1.5; color:var(--ink)}
.rr-paper figure:has(> .rr-w) figcaption > b:first-child{font:italic 400 1.3rem/1.2 var(--display)}
.rr-chart{display:block; width:100%; height:auto; color:var(--ink); overflow:visible}
.rr-chart path{fill:currentColor}
.rr-chart .rr-chart-base{stroke:color-mix(in srgb,var(--ink) 30%,transparent); stroke-width:1}
.rr-chart .rr-chart-hit{fill:transparent}
.rr-chart g:hover path{fill:var(--accent)}
.rr-chart text{font:500 12px var(--mono); text-anchor:middle}
.rr-chart .rr-chart-v{fill:var(--ink)}
.rr-chart .rr-chart-e{fill:var(--soft); letter-spacing:.04em}
@media (max-width:640px){ .rr-paper figure:has(> .rr-w){padding:14px 12px 12px} .rr-chart text{font-size:19px} }

/* What a journal can't do (2026-11-01, stanza-paper-4): Carroll's two tails, the photographs side by side at one height, then the
   printed tail's shape as live text (tails.js), its range and number, and the reader's own lines */
.rr-tails-real{display:flex; gap:18px; align-items:flex-end; justify-content:center}
.rr-paper .rr-tails-real img{display:block; height:30rem; width:auto; max-width:100%; background:#fff}
.rr-tails-live{margin-top:22px; padding-top:16px; border-top:1px solid color-mix(in srgb,var(--ink) 14%,transparent)}
.rr-tail-stage{position:relative; width:min(100%,19rem); margin:0 auto; font-family:var(--display); color:var(--ink)}
.rr-tail-line{position:absolute; white-space:nowrap; line-height:1; transform-origin:0 0}
.rr-tails-ctl{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:18px 0 8px; font:500 11px/1.4 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--soft)}
.rr-tails-ctl input[type=range]{flex:1 1 12rem; min-height:24px; accent-color:var(--accent)}
.rr-tails-ctl input[type=number]{width:4.2em; min-height:28px; margin:0 4px; padding:2px 6px; font:500 13px/1 var(--mono); color:var(--ink); background:var(--ground); border:1px solid color-mix(in srgb,var(--ink) 30%,transparent)}
.rr-tails-own{display:grid; gap:8px; margin-top:12px}
.rr-tails-own label{font:500 11px/1.4 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--soft)}
.rr-tails-own textarea{font:400 1rem/1.4 var(--display); padding:8px 10px; color:var(--ink); background:var(--ground); border:1px solid color-mix(in srgb,var(--ink) 25%,transparent)}
.rr-tails-btn{justify-self:start; min-height:32px; padding:4px 12px; font:500 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink); background:none; border:1px solid color-mix(in srgb,var(--ink) 35%,transparent); cursor:pointer}
@media (max-width:640px){ .rr-paper .rr-tails-real img{height:19rem} .rr-tails-real{gap:10px} }
.rr-tails-real a{color:inherit; text-decoration:none}
.rr-tails-real .rr-from{display:block; margin-top:5px; font:500 10px/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--soft); text-align:center}