/* Whitman, as Printed: the project's frame (tools/asprinted.py). The as-printed family, quiet: the 1855's green cloth for the header and
   the foot, two gilt rules where Binding A's frame has its ruled border, the paper and ink of the 1855 edition page, and one face, Old
   Standard TT (SIL OFL), a Scotch-style roman near the 1855's own type. Every color is from the record: site/asprinted/README.md. */

/* the colors on this frame's own elements alone: a moved page keeps its own (its stylesheets set the same names on :root) */
body.wap, .wap-top, .wap-foot, .wap-bar{
  --cloth:#23302b;         /* the 1855's green cloth: the median of the Boston Public Library copy's cloth, cloth-1855-green.webp */
  --gilt:#d9c07c;           /* its gilt, as the 1855 book place sets it on the cloth (site/whitman-print/book-1855/style.css) */
  --gilt-ink:#9a7a3e;       /* the gilt on paper, deepened so a hairline holds on the cream */
  --cream:#efe6cf;
  --page:#e6dcc8; --ink:#241d16; --soft:#5f5547; --accent:#8a2f22;   /* the 1855 edition page's own (tools/site.py) */
  --book:"Old Standard TT","Libre Caslon Text",Georgia,serif;
  --gutter:32px;
}
html:has(body.wap){background:#e6dcc8}
body.wap{margin:0; background:var(--page); color:var(--ink); font-family:var(--book); -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; min-height:100svh; display:flex; flex-direction:column}
body.wap > main{flex:1 0 auto}   /* a short page's foot at the window's foot */
.wap a{color:inherit}
:is(.wap, .wap-framed) > .skip{position:absolute; left:-999px; top:8px; z-index:2147483600; background:#efe6cf; color:#241d16; padding:8px 12px;
  font:400 1rem/1.2 "Old Standard TT",Georgia,serif}
:is(.wap, .wap-framed) > .skip:focus{left:12px}
/* on a moved page, the frame keeps its own type and measure whatever the page's stylesheets say of header, footer, nav and lists */
:is(.wap-top, .wap-foot, .wap-bar), :is(.wap-top, .wap-foot, .wap-bar) *{box-sizing:border-box}
:is(.wap-top, .wap-foot, .wap-bar){display:block; width:auto; max-width:none; margin:0; font-family:var(--book); line-height:normal; text-align:left;
  letter-spacing:normal; text-transform:none}
.wap-top li, .wap-top ul{margin:0; padding:0; list-style:none}
/* a place of The Books: its picker sits beneath this header, held at the window's top as the page scrolls, where it was fixed */
.wap-framed .wp{position:sticky; top:0; background:#18211d}   /* a shade under the cloth, so the picker reads as the header's second row */
html.wp-on body.wap-framed{padding-top:0 !important}
body.wap-framed{margin:0}   /* the frame to the window's edge on a page without stanza's site.css (the 1891–92), as on the rest */

/* ── the header: the name and the six sections, on the cloth, two gilt rules at its foot ─────────────────────────────────────── */
.wap-top{position:relative; background:var(--cloth); color:var(--cream)}
.wap-top::after, .wap-foot::before{content:""; position:absolute; left:0; right:0; height:2px;
  border-top:1px solid var(--gilt); border-bottom:1px solid var(--gilt); opacity:.5; pointer-events:none}
.wap-top::after{bottom:5px}
.wap-top .in{max-width:1240px; margin:0 auto; padding:0 var(--gutter) 6px; min-height:70px; display:flex; align-items:center;
  justify-content:space-between; gap:24px}
.wap-top .wap-name{font:400 1.4rem/1 var(--book); color:var(--gilt); text-decoration:none; letter-spacing:.01em; white-space:nowrap; border:0}
.wap-nav{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px 28px; margin:0; padding:0; list-style:none;
  font:400 .98rem/1 var(--book); letter-spacing:.015em}
.wap-nav a{display:inline-block; padding:7px 0 6px; color:rgba(239,230,207,.8); text-decoration:none; border-bottom:1px solid transparent}
.wap-nav a[href]:hover{color:var(--cream); border-bottom-color:rgba(217,192,124,.55)}
.wap-nav a[aria-current="page"]{color:var(--gilt); border-bottom-color:var(--gilt)}
.wap-nav a:not([href]){cursor:default}

/* ── the foot: made with stanza, how to cite, corrections, the date; the cloth again, its rules at the top ─────────────────────── */
.wap-foot{position:relative; background:var(--cloth); color:rgba(239,230,207,.82); font:400 .95rem/1.5 var(--book)}
.wap-foot::before{top:5px}
.wap-foot .in{max-width:1240px; margin:0 auto; padding:30px var(--gutter) 34px; display:flex; flex-wrap:wrap; align-items:baseline;
  gap:10px 30px}
.wap-foot .made{margin:0 auto 0 0; color:var(--gilt)}
.wap-foot .made a{color:var(--gilt); text-decoration:none; border-bottom:1px solid rgba(217,192,124,.5)}
.wap-foot p{margin:0}
.wap-foot a{color:inherit; text-decoration:none; border-bottom:1px solid rgba(239,230,207,.35)}
.wap-foot details{flex-basis:auto}
.wap-foot details[open]{flex-basis:100%; order:9}
.wap-foot summary, .wap-bar summary{cursor:pointer; list-style:none}
.wap-foot summary::-webkit-details-marker, .wap-bar summary::-webkit-details-marker{display:none}
.wap-foot summary{border-bottom:1px solid rgba(239,230,207,.35); display:inline}
.wap-foot details[open] summary{color:var(--gilt)}
/* the frame's own summaries, apart from a Concordance's folds (.ed-words summary, both editions: italic, a ▾, hidden once open) */
.wap-framed :is(.wap-bar, .wap-foot) summary{padding:0; font:inherit}
.wap-framed :is(.wap-bar, .wap-foot) summary::after{content:none}
.wap-framed .wap-foot summary{color:inherit}
.wap-framed .wap-bar details[open] summary{display:revert}
.wap-framed .wap-foot details[open] summary{display:inline}
.wap-foot .cite{margin:12px 0 0; max-width:40rem; color:var(--cream); font-size:1rem}
.ed-1855 .wap-foot .in, .ed-1891 .wap-foot .in{padding-bottom:104px}   /* clear of the edition's own tools, held at the window's foot */

/* ── the hub ──────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.wap-hub{padding:84px var(--gutter) 0}
/* the epigraph, set as the 1891–92 sets it: the title in capitals, the long lines hung */
.wap-epi{margin:0 auto; width:fit-content; max-width:100%}
.wap-epi h2{margin:0 0 1.25em; text-align:center; font:400 .82rem/1 var(--book); letter-spacing:.16em; color:var(--soft)}
.wap-epi blockquote{margin:0}
.wap-epi .l{display:block; padding-left:1.6em; text-indent:-1.6em; font:400 1.22rem/1.62 var(--book)}
.wap-epi figcaption{width:0; min-width:100%; margin:1.3em 0 0; text-align:right; font:400 .9rem/1.5 var(--book); color:var(--soft)}   /* never wider than the lines */
.wap-epi figcaption a{color:var(--soft); text-decoration:none; border-bottom:1px solid rgba(95,85,71,.4); white-space:nowrap}
/* the 1855 title page's short rule, between the epigraph and the note */
.wap-rule{display:block; width:5.6rem; height:0; margin:64px auto; border-top:1px solid var(--ink); opacity:.55}
.wap-note{max-width:34rem; margin:0 auto}
.wap-note p{margin:0; font:400 1.36rem/1.58 var(--book)}
/* a comp's marks, for his eye alone: gone in the build (step 2) */
.comp{display:block; margin:0 0 .9em; font:400 .74rem/1 var(--book); letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}

/* the six doors: three and three at a desk, gilt hairlines between, as a ruled contents */
.wap-doors{max-width:1176px; margin:88px auto 0; padding:0 0 96px; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  list-style:none; border-top:1px solid var(--gilt-ink)}
.wap-doors li{border-bottom:1px solid color-mix(in srgb, var(--gilt-ink) 55%, transparent)}
.wap-doors li:not(:nth-child(3n)){border-right:1px solid color-mix(in srgb, var(--gilt-ink) 55%, transparent)}
.door{display:block; height:100%; padding:30px 30px 36px; text-decoration:none; color:var(--ink)}
.door .nm{display:block; font:400 1.7rem/1.15 var(--book)}
.door .ln{display:block; margin-top:12px; font:400 1.02rem/1.5 var(--book); color:var(--soft)}
.door .st{display:block; margin-top:16px; font:400 .8rem/1 var(--book); letter-spacing:.12em; text-transform:uppercase; color:var(--gilt-ink)}
a.door[href]:hover{background:color-mix(in srgb, var(--cloth) 6%, transparent)}
a.door[href]:hover .nm{color:var(--cloth); text-decoration:underline; text-decoration-color:var(--gilt-ink); text-decoration-thickness:1px;
  text-underline-offset:.18em}
a.door:not([href]){cursor:default}
a.door:not([href]) .comp{margin:18px 0 0}

/* ── a section's front page, About, the corrections log ───────────────────────────────────────────────────────────────────────── */
.wap-main{display:block; max-width:46rem; margin:0 auto; padding:72px var(--gutter) 104px}
.wap-main.wap-hub{max-width:none; padding:84px var(--gutter) 0}
.wap-head h1{margin:0; font:400 2.6rem/1.1 var(--book)}
.wap-head .lede{margin:.8em 0 0; font:400 1.3rem/1.55 var(--book); color:var(--ink)}
/* The Edition's row of links under its opening sentence: Read, Concordance, Compare */
.wap-row{display:flex; flex-wrap:wrap; gap:6px 28px; margin:22px 0 0; font:400 1.05rem/1.5 var(--book)}
.wap-row .lab{font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gilt-ink); margin-right:.3em}
.wap-row a{color:var(--ink); text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--gilt-ink) 70%, transparent);
  text-decoration-thickness:1px; text-underline-offset:.2em}
/* the hub note's sources, on Methods */
.wap-note .src{margin:.7em 0 0; font:400 .82rem/1 var(--book); letter-spacing:.12em; text-transform:uppercase}
.wap-note .src a{color:var(--soft); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--soft) 40%, transparent)}
.wap-list{margin:48px 0 0; padding:0; list-style:none; border-top:1px solid var(--gilt-ink)}
.wap-list li{padding:26px 0 28px; border-bottom:1px solid color-mix(in srgb, var(--gilt-ink) 55%, transparent)}
.wap-list h2{margin:0; font:400 1.55rem/1.2 var(--book)}
.wap-list h2 a, .wap-list .places a, .wap-list .go a, .wap-prose a, .wap-sec a, .wap-head a, .wap-log a{color:var(--ink); text-decoration:underline;
  text-decoration-color:color-mix(in srgb, var(--gilt-ink) 70%, transparent); text-decoration-thickness:1px; text-underline-offset:.2em}
.wap-list h2 a{text-decoration:none}
.wap-list h2 a:hover{text-decoration:underline}
.wap-list p{margin:.6em 0 0; font:400 1.05rem/1.55 var(--book); color:var(--soft)}
.wap-list .places{font-size:1.15rem; line-height:1.8; color:var(--soft)}
.wap-list .go{font-size:1rem}
.wap-list .st{font:400 .8rem/1 var(--book); letter-spacing:.12em; text-transform:uppercase; color:var(--gilt-ink); margin-top:14px}
.wap-sec{margin:44px 0 0}
.wap-sec h2, .wap-prose h2{margin:0; font:400 1.4rem/1.2 var(--book)}
.wap-prose h2{margin-top:44px}
.wap-sec p, .wap-prose p{margin:.75em 0 0; font:400 1.1rem/1.62 var(--book)}
.wap-prose{margin-top:8px}
.cite-block{padding:14px 18px; background:var(--cream); border:1px solid color-mix(in srgb, var(--ink) 14%, transparent)}
.wap-log{margin:44px 0 0; padding:0; list-style:none}
.wap-log li{padding:18px 0; border-top:1px solid color-mix(in srgb, var(--gilt-ink) 55%, transparent)}
.wap-log .when{font-size:.92rem; color:var(--soft)}
.wap-none{margin:44px 0 0; font:italic 400 1.1rem/1.5 var(--book); color:var(--soft)}
.wap-prose .comp{margin-top:6px}

/* ── the Edition's bar: the two versions, how to cite, corrections────────────────────────────────────────────────────────────── */
.wap-bar{position:relative; z-index:35; border-bottom:1px solid color-mix(in srgb, var(--ink) 14%, transparent); background:var(--page)}
.wap-bar .in{max-width:1240px; margin:0 auto; padding:13px var(--gutter) 12px; display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:8px 24px; font:400 1rem/1.4 var(--book)}
.wap-bar p{margin:0}
.wap-bar .vs{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 16px}
.wap-bar .v{color:var(--ink); text-decoration:none; padding-bottom:3px; border-bottom:1px solid transparent}   /* its own color: a page without stanza's site.css (the 1891–92) showed the browser's blue */
.wap-bar .v[aria-current="page"]{border-bottom-color:var(--gilt-ink)}
.wap-bar .v.later{color:var(--soft)}
.wap-bar .v.later em{font-size:.86em; letter-spacing:.02em}
.wap-bar .tools{position:static; z-index:auto; display:flex; gap:22px; align-items:baseline}   /* in the bar: stanza's edit.css, on the 1855, fixes any .tools at the window's foot */
.wap-bar .tools a, .wap-bar summary{color:var(--soft); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--soft) 40%, transparent)}
.wap-bar details{position:relative}
.wap-bar details[open] summary{color:var(--ink)}
.wap-bar .cite{position:absolute; right:0; top:calc(100% + 12px); width:min(31rem, calc(100vw - 2 * var(--gutter))); margin:0; padding:16px 18px;
  background:var(--cream); border:1px solid color-mix(in srgb, var(--ink) 18%, transparent); box-shadow:0 10px 28px -12px rgba(36,29,22,.35);
  font:400 .98rem/1.5 var(--book); color:var(--ink)}

/* ── a phone ──────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width:760px){
  :root{--gutter:18px}
  .wap-top .in{flex-direction:column; justify-content:center; gap:10px; padding:16px var(--gutter) 20px; min-height:0}
  .wap-name{font-size:1.32rem}
  .wap-nav{justify-content:center; gap:2px 20px; max-width:22rem; font-size:.95rem}   /* three and three */
  .wap-hub{padding-top:52px}
  .wap-main{padding:48px var(--gutter) 72px}
  .wap-main.wap-hub{padding:52px var(--gutter) 0}
  .wap-head h1{font-size:2.1rem}
  .wap-head .lede{font-size:1.15rem}
  .wap-epi .l{font-size:1.05rem; line-height:1.55}
  .wap-rule{margin:44px auto}
  .wap-note p{font-size:1.18rem}
  .wap-doors{grid-template-columns:minmax(0, 1fr); margin-top:56px; padding-bottom:64px}
  .wap-doors li:not(:nth-child(3n)){border-right:0}
  .door{padding:24px 2px 26px}
  .door .nm{font-size:1.5rem}
  /* the bar in two rows: the versions, then how to cite and corrections */
  .wap-bar .in{flex-direction:column; align-items:flex-start; gap:6px; padding:11px var(--gutter) 11px; font-size:.86rem}
  .wap-bar .vs{flex-wrap:nowrap; gap:0 10px; white-space:nowrap}
  .wap-bar .tools{gap:18px}
  .wap-bar details{position:static}
  .wap-bar .cite{left:var(--gutter); right:var(--gutter); top:calc(100% + 8px); width:auto}
  .ed-1855 .wap-foot .in, .ed-1891 .wap-foot .in{padding-bottom:120px}
  .wap-foot .in{flex-direction:column; gap:12px; padding:30px var(--gutter) 40px}
}
@media (min-width:761px) and (max-width:1060px){
  .wap-doors{grid-template-columns:repeat(2, minmax(0, 1fr)); margin-left:calc(-1 * var(--gutter)); margin-right:calc(-1 * var(--gutter))}
  .wap-doors li:not(:nth-child(3n)){border-right:0}
  .wap-doors li:nth-child(odd){border-right:1px solid color-mix(in srgb, var(--gilt-ink) 55%, transparent)}
}