/* Under the grass (Whitman, as printed; sketched as sketches/2026-10-31-whitman/envs/1855-ferry): the ground under the grass. One column
   of his lines, the roots drawn behind it (script.js). The picker's strip holds the top 38 px (print.css). */
:root{
  --earth:#101911; --earth-deep:#0b120c;
  --cream:#ece4cf; --cream-soft:rgba(236,228,207,.74);
  --paper:#ece4d3; --ink:#241f18; --ink-soft:#6b6253;
  --colx:clamp(22px, 14vw, 230px);
  --serif:"Old Standard TT", "Libre Caslon Text", Georgia, serif;
  --sans:"Libre Franklin", "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box}
html{background:var(--earth)}
body{margin:0; color:var(--cream); font-family:var(--serif); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background:linear-gradient(to bottom, #142016 0, var(--earth) 900px, var(--earth-deep) 2400px, var(--earth-deep) 100%)}
a{color:inherit}

/* the surface: his field, the grass the roots below belong to */
.surface{position:relative; z-index:0; height:52vh; min-height:300px; max-height:600px; overflow:hidden; background:var(--earth)}
.surface img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 82%; will-change:transform;
  -webkit-mask-image:linear-gradient(to bottom, #000 0, #000 calc(100% - 130px), rgba(0,0,0,.82) calc(100% - 96px), rgba(0,0,0,.52) calc(100% - 64px), rgba(0,0,0,.22) calc(100% - 34px), rgba(0,0,0,.06) calc(100% - 12px), transparent 100%);
          mask-image:linear-gradient(to bottom, #000 0, #000 calc(100% - 130px), rgba(0,0,0,.82) calc(100% - 96px), rgba(0,0,0,.52) calc(100% - 64px), rgba(0,0,0,.22) calc(100% - 34px), rgba(0,0,0,.06) calc(100% - 12px), transparent 100%)}

/* the roots: one canvas fixed to the window, drawn in the page’s own coordinates; faint behind each line of words (script.js) */
#roots{position:fixed; left:0; top:0; width:100%; height:100vh; z-index:1; pointer-events:none}

main{position:relative; z-index:2}

/* his lines, set as the 1855 set them: flush left, a turned-over line hung deep */
.verse{margin:0; font-size:clamp(19px, 1.62vw, 25px); line-height:1.56; text-shadow:0 0 3px var(--earth), 0 0 12px var(--earth), 0 0 22px var(--earth)}
.verse .l{display:block; padding-left:2.6em; text-indent:-2.6em}
.verse.big{font-size:clamp(25px, 2.27vw, 36px); line-height:1.3; letter-spacing:-.003em}
.verse.big .l + .l{margin-top:.3em}
.sp{white-space:nowrap}
.src{margin:1.6em 0 0 0; max-width:36em; font:italic 15px/1.5 var(--serif); color:var(--cream-soft); text-shadow:0 0 8px var(--earth), 0 0 16px var(--earth)}

.opening{margin:0 0 0 var(--colx); padding:5.2vh 24px 0 0; max-width:1270px}
.passage{margin:0 0 0 var(--colx); padding:22vh 24px 0 0; max-width:900px}
.st{position:relative; margin:0 0 3.2em}
.st.turn{margin-top:7.5em}
.st[data-page]::before{content:attr(data-page); position:absolute; right:100%; top:.35em; margin-right:2.4em; font:15px/1 var(--serif);
  letter-spacing:.06em; color:var(--cream-soft)}
.st.last{margin-top:12em; padding-bottom:4vh}
.st.last .src{margin-top:1.2em}

/* where the roots end: the ground gives way to the paper of the 1855 frontispiece, and he stands on it */
.him{color:var(--ink); padding-top:300px;
  background:linear-gradient(to bottom, rgba(160,117,85,0) 0, rgba(160,117,85,.12) 40px, rgba(160,117,85,.25) 75px, rgba(205,180,146,.55) 150px, rgba(228,214,189,.82) 220px, rgba(236,228,211,.96) 270px, var(--paper) 300px, var(--paper) 100%)}
.spread{display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); align-items:center; gap:2vw; max-width:1240px; margin:0 auto; padding:0 32px}
.portrait{margin:0; display:flex; justify-content:center}
.portrait a{display:block; max-width:100%}
.portrait img{display:block; height:min(84vh, 780px); width:auto; max-width:100%; object-fit:contain;
  -webkit-mask-image:radial-gradient(closest-side, #000 72%, rgba(0,0,0,.6) 86%, transparent 100%);
          mask-image:radial-gradient(closest-side, #000 72%, rgba(0,0,0,.6) 86%, transparent 100%)}
.name h1{margin:0; font:400 clamp(44px, 5.2vw, 80px)/1 var(--serif); letter-spacing:-.01em}
.name .line{margin:.6em 0 0; font-size:clamp(19px, 1.6vw, 24px); line-height:1.35}
.name .cap{margin:2.2em 0 0; max-width:27em; font:italic 15px/1.55 var(--serif); color:var(--ink-soft)}

.rooms{max-width:1400px; margin:4vh auto 0; padding:0 32px}
.rooms h2{margin:0 0 22px; font:600 11px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); text-align:center}
/* his rooms in one row at a desk, as many as his record holds (the comp's nine), each its picture square */
.rooms ul{list-style:none; margin:0; padding:0; display:flex; gap:18px}
.rooms li{flex:1 1 0; min-width:0}
.rooms a{display:block; text-decoration:none}
.rooms img{display:block; width:100%; aspect-ratio:1; object-fit:cover; background:#d9d0bd}
.rooms span{display:block; margin-top:10px; font:14px/1.3 var(--serif); text-align:center; color:var(--ink)}
.rooms a:hover span{text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}

footer{max-width:720px; margin:11vh auto 0; padding:0 28px 72px; font:14px/1.6 var(--serif); color:var(--ink-soft); text-align:center}
footer p{margin:0 0 .8em}
footer a{color:var(--ink)}

/* the words are there at once, at full contrast; only the roots grow */
@media (prefers-reduced-motion: reduce){
  .surface img{will-change:auto}
}

@media (max-width:760px){
  :root{--colx:22px}
  .surface{height:44vh; min-height:240px}
  .opening{padding-top:4vh}
  .verse .l{padding-left:1.6em; text-indent:-1.6em}
  .st[data-page]::before{position:static; display:block; margin:0 0 .7em}
  .st.turn{margin-top:5em}
  .spread{grid-template-columns:1fr; gap:10px; padding:0 22px}
  .portrait img{height:auto; width:min(100%, 420px)}
  .name{text-align:left}
  .rooms{padding:0 22px}
  .rooms ul{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px 12px}
  .rooms span{font-size:13px}
  .him{padding-top:260px}
}