/* The sea at Paumanok (Whitman, as printed; sketched as sketches/2026-10-31-whitman/envs/1860-sea): the shore by night. The sky behind
   the words, the sea in front of them: the lines rise out of the sea as you scroll. The picker's strip holds the top 38 px (print.css;
   the veil below is dark to 38 px for it). */
:root{
  --sky0:#03050b; --sky1:#070a15; --sky2:#0e1120; --hz-c:#1b1c27;
  --ink:#e8e4d9; --soft:rgba(232,228,217,.56); --song:#f1deaa;
  --paper:#f2eee4; --pink:#26221c; --psoft:#6d665a;
  --hz:66%;                      /* the horizon, from the top of the window */
  --colx:clamp(22px, 12vw, 200px);
  --serif:"Old Standard TT", "Libre Caslon Text", Georgia, serif;
  --sans:"Libre Franklin", "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box}
html{background:var(--sky0)}
body{margin:0; color:var(--ink); font-family:var(--serif); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
a{color:inherit}

/* the sky: night, with the first gray of daybreak laid over it at the poem's end (script sets --dawn) */
.sky{position:fixed; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(to bottom, var(--sky0) 0, var(--sky1) 28%, var(--sky2) 48%, #151826 58%, var(--hz-c) var(--hz), var(--hz-c) 100%)}
.dawn{position:absolute; inset:0; opacity:var(--dawn, 0);
  background:linear-gradient(to bottom, #0d1322 0, #1f2638 30%, #3c3f50 50%, #6b6470 60%, #8d7f80 var(--hz), #8d7f80 100%)}
#stars{position:absolute; left:0; top:0; width:100%; height:var(--hz)}
.moon{position:absolute; left:76%; top:var(--my, 40%); width:var(--mw, 104px); height:var(--mw, 104px); transform:translate(-50%, -50%); mix-blend-mode:screen}
.moon::before{content:""; position:absolute; left:50%; top:50%; width:520%; height:520%; transform:translate(-50%, -50%); border-radius:50%;
  background:radial-gradient(closest-side, rgba(186,138,72,.26), rgba(150,108,58,.12) 38%, rgba(120,86,48,.04) 70%, transparent 100%)}
.moon img{position:relative; display:block; width:100%; height:100%; filter:blur(.35px); mix-blend-mode:screen}

/* the poem: one column, in the sky, to the left of the moon */
main{position:relative}
.poem{position:relative; z-index:1; margin:0 0 0 var(--colx); padding:118px 24px 0 0; max-width:760px}
.head h1{margin:0; font:400 clamp(22px, 2.1vw, 31px)/1.2 var(--serif); letter-spacing:.14em}
.src{margin:.9em 0 0; max-width:34em; font:italic 15px/1.5 var(--serif); color:var(--soft)}
.verse{margin:0; font-size:clamp(18px, 1.5vw, 23px); line-height:1.6; text-shadow:0 0 3px var(--sky0), 0 0 14px var(--sky0)}
.verse .l{display:block; padding-left:2.4em; text-indent:-2.4em}
.smc{text-transform:uppercase; font-size:.8em; letter-spacing:.04em}
.st{position:relative; margin:0 0 2.3em}
.st[data-n]::before{content:attr(data-n); position:absolute; right:100%; top:.42em; margin-right:1.4em; font:13px/1 var(--serif); color:var(--soft)}
.bird .verse{font-style:italic; color:var(--song)}
.proem{margin-top:3.4em}
.rem{margin:3.4em 0 2em; font:400 16px/1 var(--serif); letter-spacing:.32em; color:var(--soft)}
.sea-word{margin-top:4em}
.st.last{margin-bottom:0; padding-bottom:58vh}

/* the sea: drawn in front of the words, so they rise out of it; a haze where it meets the sky */
.sea{position:fixed; left:0; right:0; bottom:0; top:var(--hz); z-index:2; pointer-events:none}
.haze{position:absolute; left:0; right:0; bottom:100%; height:92px;
  background:linear-gradient(to bottom, rgba(27,28,39,0) 0, rgba(27,28,39,.35) 35%, rgba(27,28,39,.78) 70%, var(--hz-c) 100%)}
.dawn-haze{opacity:var(--dawn, 0); background:linear-gradient(to bottom, rgba(141,127,128,0) 0, rgba(141,127,128,.35) 35%, rgba(141,127,128,.78) 70%, #8d7f80 100%)}
#sea{position:absolute; inset:0; width:100%; height:100%; display:block}
.veil{position:fixed; left:0; right:0; top:0; height:150px; z-index:2; pointer-events:none;
  background:linear-gradient(to bottom, var(--sky0) 0, var(--sky0) 38px, rgba(3,5,11,.85) 70px, rgba(3,5,11,.4) 110px, rgba(3,5,11,0) 150px)}

/* daybreak: the page comes up out of the sea on the paper of the 1860 (heavy, white) */
.him{position:relative; z-index:3; color:var(--pink); padding-top:280px;
  background:linear-gradient(to bottom, rgba(242,238,228,0) 0, rgba(242,238,228,.1) 60px, rgba(242,238,228,.32) 120px, rgba(242,238,228,.62) 180px, rgba(242,238,228,.88) 235px, var(--paper) 280px, var(--paper) 100%)}
.spread{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); align-items:center; gap:3vw; max-width:1180px; margin:0 auto; padding:0 32px}
.portrait{margin:0; display:flex; justify-content:center}
.portrait img{display:block; height:min(74vh, 640px); width:auto; max-width:100%;
  -webkit-mask-image:linear-gradient(to bottom, #000 0, #000 82%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 0, #000 82%, transparent 100%)}
.name h2{margin:0; font:400 clamp(42px, 5vw, 76px)/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(--psoft)}
.rooms{max-width:1400px; margin:6vh auto 0; padding:0 32px}
.rooms h3{margin:0 0 22px; font:600 11px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--psoft); text-align:center}
/* his rooms in one row at a desk, as many as his record holds (the comp's nine) */
.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:#ddd8cc}
.rooms span{display:block; margin-top:10px; font:14px/1.3 var(--serif); text-align:center}
.rooms a:hover span{text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
footer{max-width:720px; margin:10vh auto 0; padding:0 28px 72px; font:14px/1.6 var(--serif); color:var(--psoft); text-align:center}
footer p{margin:0 0 .8em}
footer a{color:var(--pink)}

@media (max-width:760px){
  :root{--hz:70%; --colx:22px}
  .poem{padding-top:96px}
  .verse .l{padding-left:1.6em; text-indent:-1.6em}
  .st[data-n]::before{position:static; display:block; margin:0 0 .5em}
  .moon{left:86%}
  .spread{grid-template-columns:1fr; gap:14px; padding:0 22px}
  .portrait img{height:auto; width:min(100%, 400px)}
  .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:220px}
}