/* The first Leaves of Grass, every page (/edition/1891; tools/whitman_1891.py). On The Book's paper and in its face (Old Standard
   TT, a Scotch-style roman like the 1855's), the words set as his pages set them: his long lines hung, the four-dot pauses, the initials,
   the head "Leaves of Grass." and its short rule, the page numbers in the margin. Sketched in sketches/2026-11-01-whitman-book-edition. */

body.ed-1891{--page:#e6dcc8; --book:"Old Standard TT","Libre Caslon Text",Georgia,serif; --rule-ink:color-mix(in srgb,var(--ink) 22%,transparent);
  background:var(--page); color:var(--ink)}
html:has(body.ed-1891){background:var(--page)}
.ed-1891 .writer-way{background:var(--page)}
.ed-1891 .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; margin:0; padding:0}
.ed-1891 #chapter{display:block; margin:0; padding:0; max-width:none}

/* ── the title spread: the frontispiece facing the 1855's own title page ─────────────────────────────────────────────────────── */
.ed-1891 .ed-title{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:100svh}
.ed-1891 .ed-title::after{content:""; position:absolute; left:50%; top:4svh; bottom:4svh; width:1px;
  background:linear-gradient(to bottom, transparent, var(--rule-ink) 10%, var(--rule-ink) 90%, transparent)}
.ed-1891 .ed-title .plate{margin:0; display:grid; place-items:center; overflow:hidden}
.ed-1891 .ed-title .plate img{height:100svh; width:auto; max-width:none; translate:-14% 0; filter:brightness(1.07) saturate(.9);
  --v:radial-gradient(ellipse 40% 35% at 64% 46%, #000 0 62%, rgba(0,0,0,.9) 68%, rgba(0,0,0,.72) 75%, rgba(0,0,0,.48) 82%, rgba(0,0,0,.24) 89%, rgba(0,0,0,.08) 95%, transparent 100%);
  -webkit-mask:var(--v); mask:var(--v)}
.ed-1891 .tp{position:relative; display:flex; flex-direction:column; align-items:center; padding:13svh 6% 0; font-family:var(--book); text-align:center}
.ed-1891 .tp p{margin:0}
.ed-1891 .tp-leaves{font:400 clamp(3.4rem,5.6vw,5.4rem)/1 var(--book); letter-spacing:.04em}
.ed-1891 .tp-of{margin:.6em 0 .5em !important; font:italic 400 clamp(1rem,1.3vw,1.25rem)/1 var(--book)}
.ed-1891 .tp-grass{font:400 clamp(4.6rem,8.2vw,8rem)/1 var(--book); letter-spacing:.2em; margin-right:-.2em !important}
.ed-1891 .tp-mark{margin:9svh 0 0 !important}
.ed-1891 :is(.tp-mark, .ed-rule) span{display:inline-block; position:relative; width:5.6rem; height:0; border-top:1px solid var(--ink)}
.ed-1891 :is(.tp-mark, .ed-rule) span::after{content:"\25C6"; position:absolute; left:50%; top:-.56em; translate:-50% 0; padding:0 .3em;
  background:var(--page); font:400 .6rem/1 var(--book)}
.ed-1891 .tp-imprint{margin-top:11svh !important; font:700 clamp(.88rem,1vw,1rem)/1.7 var(--book); letter-spacing:.34em; margin-right:-.34em !important}
.ed-1891 .tp .pb{position:absolute; right:6%; bottom:3svh}
.ed-1891 .tp .pn{position:static}

/* ── what this is, and the twelve poems folded under ─────────────────────────────────────────────────────────────────────────── */
.ed-1891 .ed-intro{max-width:40rem; margin:0 auto; padding:9svh 24px 2rem; font-family:var(--book)}
.ed-1891 .ed-lede{margin:0 0 1.4rem; font:italic 400 clamp(1.1rem,1.4vw,1.28rem)/1.5 var(--book); text-align:center; text-wrap:balance}
.ed-1891 .ed-contents{margin:0 auto; max-width:34rem; font:400 1rem/1.45 var(--book)}
.ed-1891 .ed-contents summary{cursor:pointer; text-align:center; font:400 .74rem/1.4 var(--book); letter-spacing:.3em; text-transform:uppercase; color:var(--soft); list-style:none}
.ed-1891 .ed-contents summary::-webkit-details-marker{display:none}
.ed-1891 .ed-contents summary::after{content:" ▾"; letter-spacing:0}
.ed-1891 .ed-contents[open] summary::after{content:" ▴"}
.ed-1891 .ed-contents-note{margin:1rem 0 .8rem; font:italic 400 .92rem/1.45 var(--book); color:var(--soft); text-align:center}
.ed-1891 .ed-contents ol{margin:0; padding:0; list-style:none}
.ed-1891 .ed-contents li a{display:flex; gap:1rem; justify-content:space-between; padding:.28rem 0; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--rule-ink)}
.ed-1891 .ed-contents li a:hover .first, .ed-1891 .ed-contents li a:focus-visible .first{text-decoration:underline; text-underline-offset:.2em}
.ed-1891 .ed-contents .at{color:var(--soft); font-variant-numeric:oldstyle-nums}

/* ── the words, as the 1855 sets them ───────────────────────────────────────────────────────────────────────────────────────── */
.ed-1891 .ed-text{padding:6svh 24px 6svh}
.ed-1891 .ed-col{position:relative; max-width:44rem; margin:0 auto; font-family:var(--book); font-size:clamp(1.02rem,1.12vw,1.13rem); line-height:1.62}
.ed-1891 .lg{margin:0 0 1.05em}
.ed-1891 .l{display:block; padding-left:2.6em; text-indent:-2.6em; border-radius:2px}   /* a turnover hangs, as his pages hang it */
.ed-1891 .lg.has-init .l{padding-left:0; text-indent:0}
.ed-1891 .init{float:left; font-size:3.25em; line-height:.8; margin:.07em .1em -.1em 0; text-indent:0}
.ed-1891 .caps{letter-spacing:.03em}
.ed-1891 .pp{margin:0 0 .2em; text-indent:1.5em; text-align:justify; hyphens:auto; -webkit-hyphens:auto; hyphenate-limit-chars:7 3 3}
.ed-1891 .pp:has(.init){text-indent:0}
.ed-1891 .pp .init{font-size:3.6em}
.ed-1891 :is(.l, .sg).lit{background:color-mix(in srgb,#f0c75e 34%,transparent)}
.ed-1891 .ed-head{margin:3.4em 0 .5em; text-align:center; font:700 clamp(1.7rem,2.6vw,2.3rem)/1.1 var(--book); letter-spacing:.17em; margin-right:-.17em}
.ed-1891 .ed-rule{margin:0 0 2.6em; text-align:center; line-height:0}
.ed-1891 .ed-rule.double{margin:2.4em 0 2.6em}
.ed-1891 .ed-rule.double span{width:9rem; height:3px; border-bottom:1px solid var(--ink)}
.ed-1891 .ed-rule.double span::after{content:none}
.ed-1891 .ed-copyright{max-width:30rem; margin:0 auto; padding:2rem 24px 0; text-align:center; font:400 .82rem/1.5 var(--book); color:var(--soft)}

/* the 1855's page numbers: in the margin where its page begins; in a paragraph, a hairline at the word too */
.ed-1891 .pn{position:absolute; left:-4.6rem; width:3.4rem; text-align:right; margin-top:.28em; font:400 .74rem/1 var(--book); letter-spacing:.05em;
  color:var(--soft); text-decoration:none; text-indent:0}
.ed-1891 .pn:hover, .ed-1891 .pn:focus-visible{color:var(--accent); text-decoration:underline; text-underline-offset:.2em}
.ed-1891 .pp .pb::before{content:""; display:inline-block; width:1px; height:.95em; margin:0 .32em; vertical-align:-.12em; background:color-mix(in srgb,var(--ink) 45%,transparent)}
.ed-1891 .pp > .pb:first-child::before{display:none}
.ed-1891 .ed-head .pn{margin-top:.6em}

/* a door to his room, and a note on a line: quiet, in the margin at a desk, beneath the line on a phone */
.ed-1891 :is(.ed-door, .ed-note){float:right; clear:right; width:15.5rem; margin:.2em -19rem 0 0; font:italic 400 .9rem/1.45 var(--book); color:var(--soft); text-indent:0}
.ed-1891 :is(.ed-door, .ed-note) p{margin:0 0 .35em}
.ed-1891 .ed-door a{color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em; text-decoration-color:color-mix(in srgb,currentColor 45%,transparent)}
.ed-1891 :is(.ed-door, .ed-note)::before{content:""; display:block; width:1.6rem; border-top:1px solid var(--accent); margin-bottom:.55em}
.ed-1891 .ed-listen{appearance:none; border:0; background:none; padding:0; font:normal 400 .86rem/1.3 var(--book); color:var(--ink); cursor:pointer;
  text-decoration:underline; text-underline-offset:.2em; text-decoration-color:color-mix(in srgb,currentColor 40%,transparent)}
.ed-1891 .ed-listen .ic{display:inline-block; width:1em; color:var(--accent)}
.ed-1891 .ed-listen .len{color:var(--soft)}
.ed-1891 .ed-door .by{font-size:.8rem}

/* "See it printed", beside the line under the pointer, at a desk: in the left margin at the line's start, where the page numbers stand
   (the right margin holds the doors and notes). Its box reaches the column's edge and is about a line tall, so the pointer reaches it
   without leaving the column; its words end where a page's number ends. On the line that carries a number it stands just left of the
   number's digits, never over them (the pointer crosses the number, inside the line, on the way). Hidden, it can't be clicked. */
.ed-1891 .ed-see{position:absolute; z-index:4; left:-9.2rem; width:8rem; padding:.36em 1.2rem .36em 0; margin-top:-.1em; border:0; background:none;
  text-align:right; text-indent:0; white-space:nowrap; cursor:pointer; user-select:none; -webkit-user-select:none;
  font:italic 400 .8rem/1.3 var(--book); color:var(--accent); opacity:0; pointer-events:none; transition:opacity .12s}
.ed-1891 .ed-see.on, .ed-1891 .ed-see:focus-visible{opacity:1; pointer-events:auto}
.ed-1891 .ed-see:hover, .ed-1891 .ed-see:focus-visible{text-decoration:underline; text-underline-offset:.2em}
.ed-1891 .ed-see.past-pn{left:-11.8rem; width:7.6rem; padding-right:.8rem}

.ed-1891 .ed-colophon{padding:2rem 24px 12svh}
.ed-1891 .ed-colophon .ed-col{max-width:34rem; font:400 .9rem/1.6 var(--book); color:var(--soft); border-top:1px solid var(--rule-ink); padding-top:1.4rem}

/* ── the page as printed: a viewer, zoomable, the reader's line lit ──────────────────────────────────────────────────────────── */
.ed-viewer{width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:#191613; color:#efe8da}
.ed-viewer::backdrop{background:rgba(0,0,0,.6)}
.ed-viewer[open]{display:flex; flex-direction:column}
.ev-bar{display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; align-items:center; justify-content:space-between; padding:10px 16px; font:400 .9rem/1.3 "Libre Franklin",system-ui,sans-serif}
.ev-bar p{margin:0}
.ev-cap{font-family:"Old Standard TT",Georgia,serif; font-style:italic; font-size:1rem}
.ev-tools{display:flex; gap:.4rem; align-items:center}
.ev-tools :is(button, a){appearance:none; border:1px solid rgba(239,232,218,.3); background:none; color:inherit; font:inherit; padding:5px 10px; border-radius:3px; cursor:pointer; text-decoration:none}
.ev-tools :is(button, a):hover, .ev-tools :is(button, a):focus-visible{border-color:rgba(239,232,218,.8)}
.ev-tools button[disabled]{opacity:.3; cursor:default}
.ev-scroll{flex:1; overflow:auto; overscroll-behavior:contain}
.ev-page{position:relative; margin:0 auto; cursor:zoom-in}
.ev-page.z{cursor:zoom-out}
.ev-page img{display:block; width:100%; height:auto}
.ev-lit{position:absolute; inset:0; pointer-events:none}
.ev-lit i{position:absolute; background:rgba(240,199,94,.32); outline:1.5px solid rgba(138,47,34,.6); border-radius:2px; mix-blend-mode:multiply}

/* ── the ways to read (ways.js): a switch in the corner beside Search; C, the page beside (beside.js) ───────────────────────────── */
.ed-ways{display:flex; margin:0; background:var(--page); border:1px solid var(--rule-ink); border-radius:999px; padding:2px;
  box-shadow:0 1px 4px rgba(36,29,22,.1)}
.ed-ways[hidden]{display:none}
.ed-ways button{font:400 .8rem/1 var(--book); color:var(--soft); background:none; border:0; border-radius:999px; padding:.5em .85em; cursor:pointer}
.ed-ways button:hover{color:var(--ink)}
.ed-ways button[aria-pressed="true"]{color:var(--page); background:var(--ink)}
.ed-side, .ed-strip{display:none}
@media (min-width:1001px){
  .ed-way-c .ed-text{display:grid; grid-template-columns:minmax(0,46vw) minmax(0,1fr); padding:0 0 6svh}
  .ed-way-c .ed-side{position:sticky; top:0; height:100svh; box-sizing:border-box; display:flex; flex-direction:column; align-items:center;
    justify-content:center; padding:2.4svh 2vw 1.6svh; border-right:1px solid var(--rule-ink); background:color-mix(in srgb, #2a2118 4%, var(--page))}
  .ed-way-c .es-page{position:relative; display:block; aspect-ratio:var(--ar, .633); width:min(100%, calc((100svh - 6.5rem) * var(--ar, .633)));
    padding:0; border:0; background:none; cursor:zoom-in}
  .ed-way-c .es-page img{display:block; width:100%; height:100%; box-shadow:0 1px 4px rgba(0,0,0,.25)}
  .ed-way-c .es-lit{position:absolute; inset:0; pointer-events:none}
  .ed-way-c .es-lit i{position:absolute; background:rgba(240,199,94,.32); outline:1.5px solid rgba(138,47,34,.6); border-radius:2px; mix-blend-mode:multiply}
  .ed-way-c .es-pick{position:absolute; top:1.1rem; right:1.2rem; z-index:2; display:flex; margin:0; padding:2px; background:var(--page);
    border:1px solid var(--rule-ink); border-radius:999px; box-shadow:0 1px 4px rgba(36,29,22,.1)}
  .ed-way-c .es-pick button{font:400 .78rem/1 var(--book); color:var(--soft); background:none; border:0; border-radius:999px; padding:.48em .8em; cursor:pointer}
  .ed-way-c .es-pick button:hover{color:var(--ink)}
  .ed-way-c .es-pick button[aria-pressed="true"]{color:var(--page); background:var(--ink)}
  .ed-way-c .es-cap{margin:.7rem 0 0; font:italic 400 .84rem/1.3 var(--book); color:var(--soft)}
  .ed-way-c .ed-text > .ed-col{max-width:40rem; margin:0; padding:8svh 3vw 0 6.4rem}
  .ed-way-c .ed-text :is(.ed-door, .ed-note){float:none; width:auto; max-width:32rem; margin:.5em 0 1.1em 2.6em}
  .ed-way-c .ed-see{display:none}
}
@media (max-width:1000px){
  .ed-way-c .ed-strip{display:block; position:relative; width:100%; height:64px; margin:.3em 0 .9em; padding:0; cursor:zoom-in;
    border:1px solid var(--rule-ink); border-radius:2px; background:color-mix(in srgb, #2a2118 6%, var(--page)) no-repeat;
    background-size:100% auto; background-position:0 var(--y, 8%)}
  .ed-way-c .ed-strip span{position:absolute; right:6px; bottom:5px; padding:2px 7px; border-radius:2px; background:rgba(25,22,19,.82);
    color:#efe8da; font:italic 400 .78rem/1.3 var(--book)}
}

/* ── A, it keeps turning (turning.js): the edition's column a reader over the window, cut into pages by the browser's columns ──── */
.ea-bar{display:none}
.ed-way-a .ed-text{position:fixed; inset:0; z-index:20; overflow:hidden; padding:0; background:var(--page)}
.ed-way-a .ed-text > .ed-col{position:absolute; top:4.4rem; bottom:4.6rem; left:50%; margin:0 0 0 calc(var(--ea-w) / -2); max-width:none;
  width:var(--ea-w); height:auto; columns:var(--ea-cw) auto; column-gap:var(--ea-gap); column-fill:auto; will-change:transform}
.ed-way-a .ed-text .pb, .ed-way-a .ed-see, .ed-way-a .ed-strip, .ed-way-a .ed-side{display:none}
.ed-way-a .ed-text > .ed-col > .ea-out{display:none}   /* a run of whole poems at a time (turning.js): the rest out of the layout */
.ed-way-a .ed-text :is(.ed-door, .ed-note){float:none; width:auto; margin:.4em 0 .9em 2.6em; break-inside:avoid}
.ed-way-a .ed-text .lg{break-inside:auto}
.ed-way-a .ed-text .l{break-inside:avoid}
.ed-way-a .ed-text .ed-head{break-after:avoid}
.ed-way-a .ea-bar{display:block}
.ed-way-a .ea-mask{position:absolute; top:0; bottom:0; left:0; z-index:2; width:calc((100% - var(--ea-w)) / 2 - 1px); background:var(--page);
  pointer-events:none}   /* the pages before and after the spread kept out of sight */
.ed-way-a .ea-mask.r{left:auto; right:0}
.ed-way-a :is(.ea-head, .ea-nav){z-index:3}
/* the turn, drawn over the text by copies of it, each seen through one page's window: nothing crosses the gutter */
.ea-stage{display:none}
/* laid out once and kept so, unseen between turns: a turn only shows it (display:none would lay out the copies again at every turn).
   Hidden by a clip to nothing, never by its visibility or its opacity: visibility is inherited, so every element of the copies (56,000
   at a desk) was styled again at each turn, 31 to 38 ms at a desk and 40 to 54 ms in WebKit as an iPhone 13; and WebKit spends about
   47 ms on any change of the stage's opacity. A clip costs neither. Shown above the margins' masks and unclipped, so a leaf lifted
   toward the reader may reach past the page as a real one does; the head and the arrows stay over it. */
.ed-way-a .ea-stage{display:block; clip-path:inset(0 0 100% 0); position:absolute; top:4.4rem; bottom:4.6rem; left:0; right:0; z-index:2;
  pointer-events:none; perspective:2400px; contain:size layout style}
.ed-way-a .ea-stage.on{clip-path:none}
.ed-way-a .ea-stage .ea-win{position:absolute; top:0; bottom:0; overflow:hidden; background:var(--page)}
.ed-way-a .ea-stage .ea-in{position:absolute; inset:0}
.ed-way-a .ea-stage .ed-col{position:absolute; top:0; bottom:0; height:auto; margin:0; max-width:none; width:var(--ea-w);
  columns:var(--ea-cw) auto; column-gap:var(--ea-gap); column-fill:auto}
/* the leaf: strips hinged one on the next from the spine out, each with its two faces, the back beneath (turning.js → the bend) */
.ed-way-a .ea-stage .ea-leaf{position:absolute; inset:0; transform-style:preserve-3d}
.ed-way-a .ea-stage .ea-strip{position:absolute; top:0; bottom:0; transform-style:preserve-3d}
.ed-way-a .ea-stage .ea-face{position:absolute; top:0; bottom:0; -webkit-backface-visibility:hidden; backface-visibility:hidden}
.ed-way-a .ea-stage .ea-back{transform:rotateY(180deg)}
/* the shade: two ramps a face, dark at one side and clear at the other, each as dark as the bend at its hinge, so the shade of one strip
   runs on into the next without a band */
.ed-way-a .ea-stage .ea-ramp{position:absolute; inset:0; opacity:0; background:linear-gradient(to right, rgb(36,29,22), rgba(36,29,22,0))}
.ed-way-a .ea-stage .ea-ramp.r{background:linear-gradient(to left, rgb(36,29,22), rgba(36,29,22,0))}
.ed-way-a .ea-stage .ea-drop{position:absolute; top:0; bottom:0; opacity:0; background:linear-gradient(to right, rgba(36,29,22,.4), transparent 45%)}
.ed-way-a .ea-stage .ea-drop[data-side="l"]{background:linear-gradient(to left, rgba(36,29,22,.4), transparent 45%)}
@media (max-width:700px){ .ed-way-a .ea-stage{top:3.6rem; bottom:4.2rem} }
.ed-way-a .ea-head{position:absolute; top:1.5rem; left:50%; width:var(--ea-w, 90vw); translate:-50% 0; margin:0; display:flex; justify-content:space-between;
  align-items:baseline; font:400 .72rem/1 var(--book); letter-spacing:.42em; text-transform:uppercase; color:var(--ink)}
.ed-way-a .ea-folio{min-width:3em; letter-spacing:.05em; font-size:.8rem}
.ed-way-a .ea-folio:last-child{text-align:right}
.ed-way-a .ea-nav{position:absolute; left:50%; bottom:1.1rem; translate:-50% 0; margin:0; display:flex; align-items:center; gap:.4rem;
  font:italic 400 .82rem/1 var(--book); color:var(--soft)}
.ed-way-a .ea-nav button{border:1px solid var(--rule-ink); background:var(--page); border-radius:999px; width:2.4rem; height:2.4rem; cursor:pointer;
  font:400 1.1rem/1 var(--book); color:var(--ink)}
.ed-way-a .ea-nav button:disabled{opacity:.35; cursor:default}
.ed-way-a .ea-count{min-width:6em; text-align:center}
@media (min-width:1001px){ .ed-way-a .ed-text::after{content:""; position:absolute; top:4.4rem; bottom:4.6rem; left:50%; width:1px;
  background:var(--rule-ink); pointer-events:none} }
@media (max-width:700px){
  .ed-way-a .ed-text > .ed-col{top:3.6rem; bottom:4.2rem}
  .ed-way-a .ea-head{top:1.25rem; left:16px; translate:none; width:auto; justify-content:flex-start; gap:1.1em}
  .ed-way-a .ea-head .ea-folio:last-child, .ed-way-a .ea-rh{display:none}   /* the folio alone; the arrows beside it */
  .ed-way-a .ea-nav{top:.5rem; bottom:auto; left:auto; right:10px; translate:none}
}

/* ── search (search.js): one quiet control in the corner, the same in every way of reading; its panel above it; the step between
   matches beside it once a search has found any ─────────────────────────────────────────────────────────────────────────────── */
.ed-tools{position:fixed; z-index:30; right:max(16px, env(safe-area-inset-right)); bottom:max(16px, env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:8px; margin:0}
.ed-tools[hidden], .ed-step[hidden], .ed-find[hidden]{display:none}
.ed-tool-find{font:400 .84rem/1 var(--book); letter-spacing:.02em; color:var(--ink); background:var(--page); border:1px solid var(--rule-ink);
  border-radius:999px; padding:.6em 1.1em; cursor:pointer; box-shadow:0 1px 4px rgba(36,29,22,.1)}
.ed-tool-find:hover, .ed-tool-find[aria-expanded="true"]{border-color:var(--ink)}
/* the page's end clear of the controls: room beneath its foot for their row, so its last lines scroll above them (the 1855's 93e9a366,
   carried here at Verso's word, 2026-11-02) */
body.ed-1891:has(> .ed-tools:not([hidden])){padding-bottom:calc(max(16px, env(safe-area-inset-bottom)) + 3.5rem)}
.ed-step{display:flex; align-items:center; margin:0; background:var(--page); border:1px solid var(--rule-ink); border-radius:999px;
  box-shadow:0 1px 4px rgba(36,29,22,.1); font:italic 400 .8rem/1 var(--book); color:var(--soft)}
.ed-step button{border:0; background:none; padding:.55em .75em; font:400 1rem/1 var(--book); color:var(--ink); cursor:pointer}
.ed-step button:hover{color:var(--accent)}
.ed-step .es-n{min-width:4.4em; text-align:center}
.ed-find{position:fixed; z-index:31; right:max(16px, env(safe-area-inset-right)); bottom:calc(max(16px, env(safe-area-inset-bottom)) + 3.2rem);
  width:min(30rem, calc(100vw - 32px)); max-height:min(70svh, 36rem); display:flex; flex-direction:column; box-sizing:border-box;
  padding:14px 14px 6px; background:var(--page); border:1px solid var(--rule-ink); border-radius:6px; box-shadow:0 14px 36px -14px rgba(36,29,22,.4)}
.ef-label{margin:0 0 7px; font:400 .68rem/1.4 var(--book); letter-spacing:.26em; text-transform:uppercase; color:var(--soft)}
.ed-find input{box-sizing:border-box; width:100%; padding:.5em .65em; font:400 1.05rem/1.3 var(--book); color:var(--ink);
  background:color-mix(in srgb, #fff 45%, var(--page)); border:1px solid var(--rule-ink); border-radius:4px}
.ed-find input:focus{outline:2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset:1px}
.ef-status{margin:.65em 0 .35em; font:italic 400 .86rem/1.3 var(--book); color:var(--soft)}
.ef-list{list-style:none; margin:0; padding:0; overflow:auto; overscroll-behavior:contain}
.ef-hit{display:grid; grid-template-columns:3.4em minmax(0,1fr); gap:.15em .6em; width:100%; padding:.5em .35em; text-align:left; cursor:pointer;
  border:0; border-top:1px solid var(--rule-ink); background:none; font:400 .93rem/1.42 var(--book); color:var(--ink)}
.ef-hit:hover, .ef-hit:focus-visible, .ef-hit.at{background:color-mix(in srgb, var(--accent) 8%, transparent)}
.ef-hit:focus-visible{outline:2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset:-2px}
.ef-p{padding-top:.18em; font-size:.78rem; color:var(--soft); white-space:nowrap}
.ef-line mark{background:rgba(240,199,94,.5); color:inherit; border-radius:2px; box-shadow:0 0 0 1px rgba(138,47,34,.25)}
.ef-note{grid-column:2; font:italic 400 .8rem/1.3 var(--book); color:var(--accent)}
.ef-more{padding:.6em .35em; border-top:1px solid var(--rule-ink); font:italic 400 .8rem/1.3 var(--book); color:var(--soft)}
@media (max-width:700px){
  /* the ways and the tools need about 476 px and an iPhone 13 has 370: two rows, the ways above, each label on one line (Search had sat
     over "Turning"; Verso, 2026-11-02, as the 1855's 75d1dd03). The rows' empty space lets a touch through to the words beneath. */
  .ed-tools{left:10px; right:10px; bottom:max(10px, env(safe-area-inset-bottom)); flex-wrap:wrap; justify-content:flex-end; row-gap:8px;
    pointer-events:none}
  .ed-tools > *{pointer-events:auto}
  .ed-tools :is(button, a){white-space:nowrap}
  /* the 1891 has no Concordance yet, so its one row just fits (350 of 370 px) and the page's words showed in the gap between "Turning"
     and Search: the ways always on a row of their own */
  .ed-tools:has(> .ed-ways:not([hidden])){row-gap:0}
  .ed-tools:has(> .ed-ways:not([hidden]))::before{content:""; flex-basis:100%; height:0; order:1}
  .ed-tools > .ed-ways{order:0}
  .ed-tools:has(> .ed-ways:not([hidden])) > :not(.ed-ways){order:2; margin-top:8px}
  .ed-find{left:8px; right:8px; width:auto; bottom:calc(max(10px, env(safe-area-inset-bottom)) + 3rem); max-height:60svh}
  .ed-tools:has(> .ed-ways:not([hidden])) + .ed-find{bottom:calc(max(10px, env(safe-area-inset-bottom)) + 5.25rem)}   /* above both rows */
  /* on a phone, room for two rows (the 1855's a72e4c01: at the very end they sat 3 px over its foot) */
  body.ed-1891:has(> .ed-tools:not([hidden])){padding-bottom:calc(max(10px, env(safe-area-inset-bottom)) + 5.5rem)}
}

/* ── a narrower desk: the doors and notes beneath their lines once the right margin can't hold them (19rem past a 44rem column);
   page numbers kept in the window, and See it printed left out where the left margin can't hold it (a page's number opens the page) */
@media (min-width:701px) and (max-width:1340px){
  .ed-1891 :is(.ed-door, .ed-note){float:none; width:auto; max-width:32rem; margin:.5em 0 1.1em 2.6em}
}
@media (min-width:701px) and (max-width:1000px){
  .ed-1891 .ed-text{padding-left:5.4rem}
}
@media (min-width:701px) and (max-width:940px){
  .ed-1891 .ed-see{display:none}
}

/* ── a phone ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width:700px){
  .ed-1891 .ed-col{font-size:1.02rem; line-height:1.55}
  .ed-1891 .ed-text{padding:4svh 16px 6svh 2.7rem}
  .ed-1891 .l{padding-left:1.5em; text-indent:-1.5em}
  .ed-1891 .pp{text-align:left; hyphens:manual}
  .ed-1891 .pn{left:-2.25rem; width:1.8rem; font-size:.68rem}
  .ed-1891 :is(.ed-door, .ed-note){float:none; width:auto; margin:.5em 0 1.1em 1.5em}
  .ed-1891 .ed-see{display:none}
  .ed-1891 .ed-title{grid-template-columns:1fr; grid-template-rows:auto 1fr}
  .ed-1891 .ed-title::after{display:none}
  .ed-1891 .ed-title .plate{padding-top:3svh}
  .ed-1891 .ed-title .plate img{width:min(80vw,330px); height:42svh; translate:-15% 0; object-fit:cover; object-position:50% 47%;
    --v:radial-gradient(ellipse 40% 48% at 65% 50%, #000 0 60%, rgba(0,0,0,.9) 67%, rgba(0,0,0,.72) 74%, rgba(0,0,0,.48) 82%, rgba(0,0,0,.24) 89%, rgba(0,0,0,.08) 95%, transparent 100%)}
  .ed-1891 .tp{padding:2.6svh 16px 5svh}
  .ed-1891 .tp-leaves{font-size:2.8rem}
  .ed-1891 .tp-grass{font-size:3.7rem; letter-spacing:.16em; margin-right:-.16em !important}
  .ed-1891 .tp-mark{margin-top:3.4svh !important}
  .ed-1891 .tp-imprint{margin-top:3.6svh !important; font-size:.8rem}
  .ev-cap{font-size:.92rem}
  .ev-tools{flex-wrap:wrap}
  .ev-tools .ev-lib{display:none}
}
.ed-1891 .l[tabindex="-1"]:focus, .ed-1891 .sg[tabindex="-1"]:focus{outline:none}   /* a line landed on is lit, not ringed */

/* ── the 1891–92's own (tools/whitman_1891.py): its title page set in type, its clusters and poems by title, sections by number, lines
   it indents, its notes. The rules above are the 1855's (site/whitman-1855/edition.css), copied ───────────────────────────────── */
.ed-1891 .ed-title-1891{display:block; min-height:0; padding:12svh 24px 6svh}
.ed-1891 .ed-title-1891::after{content:none}
.ed-1891 .ed-title-1891 .tp{max-width:34rem; margin:0 auto; padding:0; align-items:stretch; text-align:left}
.ed-1891 .sc{font-variant:small-caps; letter-spacing:.02em}
.ed-1891 .tp-91-leaves{font:400 clamp(2.8rem,5vw,4.4rem)/1 var(--book); letter-spacing:.06em; text-align:center; margin:0 0 7svh !important}
.ed-1891 .tp-91-incl{font:400 1.05rem/1.4 var(--book); margin:0 0 .3em !important}
.ed-1891 .tp-91-ann{font:400 1.05rem/1.55 var(--book); padding-left:1.3em; margin:0 0 6svh !important}
.ed-1891 .tp-91-verse{font:400 .98rem/1.5 var(--book); margin:0 0 1.2em !important}
.ed-1891 .tp-91-sig{font:italic 400 clamp(1.6rem,2.4vw,2.1rem)/1 var(--book); text-align:center; margin:0 0 9svh !important}
.ed-1891 .tp-91-imprint{font:400 .82rem/1.9 var(--book); letter-spacing:.14em; text-transform:uppercase; text-align:center}
.ed-1891 .ed-title-1891 .tp .pb{position:static; display:block; text-align:center; margin-top:2em}
.ed-1891 h3.ed-head{margin:2.8em 0 .9em; font:700 clamp(1rem,1.25vw,1.12rem)/1.3 var(--book); letter-spacing:.09em; margin-right:-.09em}
.ed-1891 h2.ed-head.ed-cluster{margin:4em 0 1.2em}
.ed-1891 :is(.ed-head, .ed-sub, .ed-fn) .l{display:inline; padding:0; text-indent:0}
.ed-1891 .ed-sec{margin:1.3em 0 .6em; text-align:center; font:400 .95em/1 var(--book)}
.ed-1891 .ed-sub{margin:-.3em 0 1.1em; text-align:center; font-style:italic}
.ed-1891 .l.ind{padding-left:4.4em}
.ed-1891 .l.first .caps{font-variant:small-caps; letter-spacing:.03em}
.ed-1891 .ed-fn{margin:.4em 0 1.2em 2.6em; font-size:.88em; line-height:1.5; color:var(--soft)}
.ed-1891 .ed-fn p{margin:0}
.ed-1891 .tp-91-front{margin-top:1.4em !important; text-align:center; font:400 .85rem/1.8 var(--book); color:var(--soft)}
.ed-1891 .tp-91-front .pb{position:static; display:inline; margin:0 .25em}
.ed-1891 .tp-91-front .pn{position:static}
.ed-1891 .ed-pbl{margin:0; height:0; line-height:0}