html, body {
  margin: 0;
  height: 100%;
  background: #F7F6F2;
  color: #2B2724;
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  line-height: 1.75;
}
#stage {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 6vh 6vw 4vh 5vw;
  text-align: left;
  font-size: clamp(16px, 1.5vw, 20px);
}
/* flex: none, not 1 — the wrap is only as tall as the poem, so the footer
   follows the last line instead of being pushed to the bottom of the stage */
#poem-wrap {
  flex: none;
  display: flex;
  min-height: 0;
}

.line { margin: 0; min-height: 1.75em; }
/* .line span { opacity: 0 } lives inline in index.html — see the note there */
.title { font-size: inherit; }   /* cancel the browser's h1 sizing */

/* footer appears with full poem fade in */
#footer {
  flex: none;
  margin-top: 5vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2em 4em;
  font-size: clamp(12px, 1.1vw, 16px);
}

#footer .left { flex: 1 1 28em; max-width: 44em; }
#footer .right { flex: 0 1 18em; min-width: 15em; }
#footer p { margin: 0 0 0.5em; }
#footer .wrenn {color: #66A6F2; font-style: italic; }
#footer label { display: block; margin-bottom: 5px; }
#footer .field {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #D8D2C7;
}
#footer .field:focus-within { border-bottom-color: #8C857A; }
#footer input {
  flex: 1;
  min-width: 0;
  padding: 7px 0;
  background: none;
  border: none;
  font-family: inherit;
  font-size: inherit;
  color: #2B2724;
}
#footer input::placeholder { color: #C4BDB1; }
#footer input:focus { outline: none; }
#footer .field button {
  padding: 0 2px 0 10px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: inherit;
  color: #B3ADA3;
  cursor: pointer;
}
#footer .field button:hover { color: #2B2724; }
#footer .field button:disabled { color: #D8D2C7; cursor: default; }

/* honeypot: stays in the DOM where bots will fill it, out of reach of people */
#footer input.nonce {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* min-height reserves the line, so the footer doesn't jump when the message lands */
#footer .signup-status {
  margin: 0.5em 0 0;
  min-height: 1.5em;
  font-style: italic;
  color: #B3ADA3;
  opacity: 0;
  transition: opacity 0.6s ease;
}
#footer .signup-status.on { opacity: 1; }

/* sits on the title's line: `top` matches #stage's padding-top, `right` its
   padding-right, and the line-height reproduces the title's line box, so the
   two strings share a centre line however the clamp resolves */
#skip {
  position: fixed;
  z-index: 10;
  top: 6vh;
  right: 6vw;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  line-height: calc(clamp(16px, 1.5vw, 20px) * 1.75);
  font-style: italic;
  color: #B3ADA3;
  cursor: pointer;
  transition: color 0.3s, opacity 0.6s;
}
#skip:hover { color: #6E675E; }

/* handles visibility of poem, skip button, and footer */
.show { opacity: 1; pointer-events: auto; }
.noshow { opacity: 0; pointer-events: none; }

/* ---------- small screens ---------- */
/* the desktop layout pins itself to the viewport, which works when the poem
   and footer fit. on a phone they don't, so here the page is allowed to be
   taller than the screen and scroll instead of clipping. */
@media (max-width: 640px) {
  html, body { height: auto; min-height: 100%; }

  #stage {
    position: static;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 2vh 7vw 3vh 7vw;
  }

  #poem-wrap { display: block; }

  #footer { margin-top: 2vh; gap: 1.3em; }
  #footer .left,
  #footer .right { flex: 1 1 100%; }

  /* the bio's hard breaks are phrased for a wide screen; on a phone each one
     wraps into fragments, so let the sentences flow on their own */
  #footer .bio br { display: none; }

  /* just "skip" here, so the title has the top line to itself */
  #skip { top: 2vh; right: 7vw; }
  #skip .tail { display: none; }
}