/* The 1855 Leaves of Grass as a place: the window is the book. One face (Old Standard TT, a Scotch-modern like the book's own type).
   JS sets on .stage: --H (stage height), --W (width), --ph (a page's height), --lx/--ly (the light, in stage px). */

:root {
  --ground: #0c100b;
  --cream: #efe6cf;
  --cream-2: rgba(239, 230, 207, .66);
  --gold: #d9c07c;
  --serif: "Old Standard TT", "Libre Caslon Text", Georgia, serif;
}
* { box-sizing: border-box; }
html { background: var(--ground); }
body { margin: 0; background: var(--ground); color: var(--cream); font-family: var(--serif); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.skip { position: absolute; left: -999px; top: 46px; z-index: 50; background: var(--cream); color: var(--ground); padding: 8px 12px; font-size: 14px; }
.skip:focus { left: 12px; }

/* The track is as tall as the journey; the stage stays under the picker while the leaves lift away. */
.track { position: relative; }
.stage { position: sticky; top: 38px; height: var(--H, calc(100vh - 38px)); overflow: hidden; overflow: clip; }
.scene { position: absolute; inset: 0; will-change: transform; }
.scene.lifting { box-shadow: 0 22px 44px -10px rgba(0, 0, 0, .7); }
.scene.gone { visibility: hidden; }

/* ── 1 · The cover ─────────────────────────────────────────────────────────── */
.cover {
  --gw: min(84vw, 1240px, calc((var(--H, 767px) - 150px) * 3.2));
  background: #24302c url(/whitman/views/book/img/cloth-1855-green.webp) 0 0 / 242px 242px repeat;
  overflow: hidden;
}
/* the light on the cloth, and its falling away to the edges. One light, three parts (the cloth here, the rules' glint, the gilt's sheen),
   narrowed together at his word (2026-11-01, about 4:01 pm: "slightly too wide and diffused. Don't overcorrect, but let's find a middle
   ground"; his pick of three, about 4:18 pm: B, "is good"): reaching 210 px over the letters at his window where it reached 330, as bright
   at the spot; was cloth .62, rules .34, sheen .13 and .42 (tools/test_whitman_print.py holds them) */
.cover::before, .cover::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.cover::before {
  background: radial-gradient(circle calc(var(--W, 1500px) * .36) at var(--lx, 60%) var(--ly, 35%),
    rgba(255, 244, 214, .30), rgba(255, 244, 214, .13) 38%, rgba(255, 244, 214, 0) 72%);
  mix-blend-mode: soft-light;
}
.cover::after {
  background: radial-gradient(ellipse 80% 75% at 50% 46%, rgba(4, 8, 3, 0) 42%, rgba(4, 8, 3, .5) 100%);
}

/* Binding A's goldstamped triple-rule frame, catching the same light */
.rule {
  position: absolute; inset: var(--in); z-index: 1; border: var(--bw) solid transparent; pointer-events: none;
  background: radial-gradient(circle calc(var(--W, 1500px) * .21) at calc(var(--lx, 60%) - var(--in)) calc(var(--ly, 35%) - var(--in)),
    #f7e6ae 0%, #d2b067 22%, #9a7a40 55%, #6e5630 100%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
  opacity: .92;
}
.r1 { --in: 24px; --bw: 3px; }
.r2 { --in: 32px; --bw: 1px; }
.r3 { --in: 36px; --bw: 1px; }

/* the gilt title: the photographed gilt, dimmed at rest; a sheen masked by its own letters follows the light */
.gilt {
  position: absolute; z-index: 2; left: 50%; top: 45%; width: var(--gw); aspect-ratio: 2707 / 731;
  transform: translate(-50%, -50%);
}
.gilt img { display: block; width: 100%; height: auto; filter: brightness(.76) sepia(.28) saturate(1.35) drop-shadow(1px 1.5px .5px rgba(0, 0, 0, .6)); }
.sheen {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url(/whitman/views/book/img/gilt-1855-mask.webp) 0 0 / 100% 100% no-repeat;
  mask: url(/whitman/views/book/img/gilt-1855-mask.webp) 0 0 / 100% 100% no-repeat;
  background:
    radial-gradient(circle calc(var(--gw) * .095) at var(--gx, 60%) var(--gy, 40%), rgba(255, 252, 236, .95), rgba(255, 238, 186, .58) 45%, rgba(255, 226, 150, 0) 100%),
    radial-gradient(circle calc(var(--gw) * .23) at var(--gx, 60%) var(--gy, 40%), rgba(255, 226, 150, .42), rgba(255, 226, 150, .3) 30%, rgba(255, 226, 150, .1) 62%, rgba(255, 226, 150, 0) 100%);
  mix-blend-mode: screen;
}
.cover-foot { position: absolute; z-index: 2; left: 0; right: 0; bottom: 62px; text-align: center; padding: 0 60px; }
.note { max-width: 44em; margin: 0 auto 22px; font: italic 400 14px/1.55 var(--serif); color: rgba(239, 230, 207, .58); }
.open {
  display: inline-flex; flex-direction: column; align-items: center; gap: 12px; text-decoration: none;
  font: 400 11px/1 var(--serif); letter-spacing: .3em; text-transform: uppercase; color: rgba(239, 230, 207, .82); padding-left: .3em;
}
.open::after { content: ""; width: 1px; height: 36px; background: linear-gradient(rgba(239, 230, 207, .75), rgba(239, 230, 207, 0)); transform-origin: top; animation: fall 2.6s ease-in-out infinite; }
@keyframes fall { 0% { transform: scaleY(0); opacity: 0; } 30% { opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ── 2–4 · The openings: the real pages, at one scale, on the dark ──────────── */
.opening, .rooms {
  background: #24302c url(/whitman/views/book/img/cloth-1855-green.webp) 0 0 / 242px 242px repeat;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
}
/* the open book's cloth, in the shadow of the pages: lit faintly near them, dark at the window's edges */
.opening::before, .rooms::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 62% 72% at 50% 50%, rgba(7, 10, 6, .70), rgba(7, 10, 6, .80) 55%, rgba(7, 10, 6, .93) 100%);
}
.rooms::before { background: rgba(7, 10, 6, .86); }
.spread {
  grid-column: 2; grid-row: 1; position: relative; z-index: 1; margin: 0; display: flex;
  box-shadow: 0 34px 70px -24px rgba(0, 0, 0, .85), 0 0 0 1px rgba(0, 0, 0, .35);
  transform: translateX(var(--pan, 0px));
}
.spread img { display: block; height: var(--ph, 660px); width: auto; }
/* a lamp over the paper: warm where the light falls, falling off beyond */
.lamp {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(circle calc(var(--ph, 660px) * 1.05) at var(--sx, 30%) var(--sy, 20%),
    rgba(255, 247, 226, .5), rgba(255, 247, 226, 0) 46%, rgba(40, 30, 18, 0) 60%, rgba(40, 30, 18, .55) 100%);
}
.label {
  grid-column: 1; grid-row: 1; position: relative; z-index: 1; justify-self: end; align-self: end;
  width: min(250px, 100%); margin: 0 44px calc((var(--H, 767px) - var(--ph, 660px)) / 2 + 4px) 24px;
  font: italic 400 15px/1.55 var(--serif); color: var(--cream-2);
}
.label p { margin: 0; }
.kicker { margin: 0 0 10px !important; font: 400 11px/1.3 var(--serif) !important; font-style: normal !important; letter-spacing: .26em; text-transform: uppercase; color: var(--cream); opacity: .86; }

/* page 29: the light finds his name */
.spot { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: var(--spot, 0); }
.spot i {
  position: absolute; inset: -12%; display: block; mix-blend-mode: multiply;
  filter: blur(calc(var(--ph, 660px) * .028));
}
.spot i::before {
  /* the line on page 29, x 22–625 and y 255–290 of the page's 1035 × 1600, in the spread's box (the 12% margin added back) */
  content: ""; position: absolute; border-radius: 999px;
  left: calc(12% / 1.24 + 49.9% / 1.24); top: calc(12% / 1.24 + 14.6% / 1.24); width: calc(31.8% / 1.24); height: calc(5% / 1.24);
  box-shadow: 0 0 0 calc(var(--ph, 660px) * 1.4) rgba(30, 26, 18, .5);
}
.spot b {
  position: absolute; left: 49.9%; top: 14.6%; width: 31.8%; height: 5%; border-radius: 999px; mix-blend-mode: soft-light;
  background: radial-gradient(closest-side, rgba(255, 240, 200, .55), rgba(255, 240, 200, 0));
}

/* ── 5 · His rooms: the leaf after the book ──────────────────────────────────── */
.leaf {
  grid-column: 2; grid-row: 1; position: relative; z-index: 1;
  width: calc(var(--ph, 660px) * 1.3); height: var(--ph, 660px);
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr;
}
.head { grid-column: 1 / -1; padding: calc(var(--ph, 660px) * .045) 0 0; }
.line {
  margin: 0; font: 400 calc(var(--ph, 660px) * .064)/1.16 var(--serif); color: var(--cream); letter-spacing: -.004em;
  padding-left: 1.6em; text-indent: -1.6em; /* turned over, indented deep, as his page turns a long line */
  text-wrap: balance;
}
.cite { margin: 16px 0 0; font: italic 400 14px/1.4 var(--serif); color: var(--cream-2); }
.words { padding: 0 8% 0 0; display: flex; flex-direction: column; justify-content: flex-end; }
.toc { list-style: none; margin: 4px 0 0; padding: 0; }
.toc a {
  display: flex; align-items: center; gap: 14px; text-decoration: none; color: rgba(239, 230, 207, .9);
  font: 400 calc(var(--ph, 660px) * .0262)/1.86 var(--serif); transition: color .2s;
}
.toc a::before { content: ""; width: 14px; height: 1px; background: currentColor; opacity: 0; transform: scaleX(.2); transform-origin: left; transition: opacity .25s, transform .25s; }
.toc a[aria-current="true"], .toc a:hover, .toc a:focus-visible { color: var(--gold); outline: none; }
.toc a[aria-current="true"]::before { opacity: .8; transform: none; }
.thumb { display: none; }
.more { display: flex; gap: 22px; margin: 18px 0 2px; }
.more a { font: 400 11px/1 var(--serif); letter-spacing: .24em; text-transform: uppercase; text-decoration: none; color: var(--cream-2); }
.more a:hover, .more a:focus-visible { color: var(--cream); }
/* the whole first edition (his ask, 2026-11-01, about 11:23 pm): where the leaves end, under the line that names him, and quietly in the
   cover's note */
.whole { margin: 14px 0 0; }
.whole a { font: 400 11px/1 var(--serif); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: .5em; text-decoration-color: rgba(217, 192, 124, .45); }
.whole a:hover, .whole a:focus-visible { text-decoration-color: currentColor; }
.note .whole-q { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em;
  text-decoration-color: rgba(239, 230, 207, .35); white-space: nowrap; }
.note .whole-q:hover, .note .whole-q:focus-visible { color: var(--cream); text-decoration-color: currentColor; }
.plate { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 0 0 2px 6%; text-decoration: none; color: inherit; min-height: 0; }
.plate .frame { width: 100%; height: 68%; display: flex; align-items: flex-end; justify-content: center; min-height: 0; }
.plate img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; box-shadow: 0 24px 50px -22px rgba(0, 0, 0, .9); transition: opacity .35s ease; }
.plate img.fading { opacity: 0; }
.plate-cap { margin-top: 22px; font: italic 400 19px/1.3 var(--serif); color: var(--cream); text-align: center; }
.plate-sub { margin-top: 6px; font: 400 11px/1.3 var(--serif); letter-spacing: .22em; text-transform: uppercase; color: var(--cream-2); }
.plate:hover .plate-cap, .plate:focus-visible .plate-cap { color: var(--gold); }

.colophon { padding: 34px 24px 40px; text-align: center; font: italic 400 13px/1.5 var(--serif); color: rgba(239, 230, 207, .5); border-top: 1px solid rgba(239, 230, 207, .08); }
.colophon p { margin: 0 auto; max-width: 52em; }

/* a leaf uncovered lies in the lifted leaf's shadow until it is open; his line rises into place as the last page lifts */
.spread::after { content: ""; position: absolute; inset: 0; background: #050704; opacity: calc((1 - var(--u, 1)) * .45); pointer-events: none; }
.rooms .head { opacity: calc(.15 + .85 * var(--u, 1)); transform: translateY(calc((1 - var(--u, 1)) * 28px)); }

/* ── Narrow screens: a page at a time, the camera panning across the spread ── */
@media (max-width: 860px) {
  .r1 { --in: 10px; --bw: 2px; } .r2 { --in: 16px; } .r3 { --in: 19px; }
  .cover { --gw: 90vw; }
  .gilt { top: 42%; }
  .cover-foot { bottom: 40px; padding: 0 34px; }
  .note { font-size: 13px; margin-bottom: 18px; }
  .opening { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; align-items: stretch; }
  .spread { grid-column: 1; grid-row: 1; align-self: center; justify-self: start; margin-left: 20px; }
  .label { grid-column: 1; grid-row: 2; justify-self: stretch; width: auto; margin: 0 24px 30px; font-size: 14px; }
  .rooms { display: block; }
  .leaf { width: 100%; height: 100%; display: flex; flex-direction: column; padding: 22px 24px 0; }
  .head { padding: 0; }
  .words { padding: 0; flex: 1; min-height: 0; justify-content: flex-start; }
  .line { font-size: 25px; }
  .cite { margin-top: 10px; font-size: 13px; }
  .words .kicker { margin-top: 26px !important; }
  .toc a { font-size: 16px; line-height: 1.25; padding: 5px 0; gap: 14px; }
  .toc a::before { display: none; }
  .thumb { display: block; flex: none; width: 42px; height: 42px; background: #222 center / cover no-repeat; }
  .plate { display: none; }
  .more { margin-top: auto; padding-bottom: 26px; flex-wrap: wrap; gap: 14px 22px; }
}

/* ── Reduced motion: the leaves lie one after another, nothing lifts or sweeps ── */
@media (prefers-reduced-motion: reduce) {
  .track { height: auto !important; }
  .stage { position: relative; top: 0; height: auto; overflow: visible; }
  .scene { position: relative; height: var(--H, calc(100vh - 38px)); transform: none !important; visibility: visible !important; box-shadow: none !important; }
  .spread { transform: none; }
  .opening .spread { overflow-x: auto; max-width: 100vw; }
  .open::after { animation: none; transform: none; opacity: .7; }
  .plate img { transition: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 860px) {
  .opening .spread { max-width: calc(100vw - 20px); }   /* its margin-left counted: the page never wider than the screen */
}