/* ================================ THE ESSAY PAGES ================================
   Science, the Roadmap, Writing, Get started and Contact (founder's visual review, 2026-09-22):
   the opening and the movements stand in ONE centred column at 50rem (800px) - since 2026-10-02 the
   document measure of every reading page (styles.css), set by this page family. The opening keeps
   the stage's hour, sun and bee; only its grid changes. The Roadmap's opening keeps its print
   beside the words (no .mv--essay-open there) and widens only its movements. */

/* the movements: the document column, wider */
.page-essay .mv--doc .col { max-width: 50rem; }
.page-essay .mv--doc .col--wide { max-width: 52rem; }

/* the opening: one column, centred on the page like the movements below it, the same width */
.page-essay .mv--essay-open { grid-template-columns: minmax(0, 1fr); justify-items: center; column-gap: 0; }
.page-essay .mv--essay-open .col { width: 100%; max-width: 50rem; }
.page-essay .mv--essay-open .col > .lede { max-width: none; }
.page-essay .mv--essay-open .col > .lede + p, .page-essay .mv--essay-open .col > p { max-width: none; }
.page-essay .mv--essay-open .col > p + p { margin-top: 22px; }
.page-essay .mv--essay-open .col > h1 + p { margin-top: 28px; }
.page-essay .mv--essay-open .col > .form { margin-top: 36px; }
.page-essay .mv--essay-open .col > .form + .fine { margin-top: 14px; max-width: var(--w-form); } /* the note keeps its form's width (2026-09-30) */
@media (min-width: 881px) { html.page-essay:not(.motion.sdt) .mv--essay-open .hero__perch { left: calc(50% + 25rem + 24px); right: auto; } } /* the still page's bee stands just beyond the column's right edge at every wide width (the stage's 18vw fell inside the wider column at 1024); phones keep styles.css's scoped perch beside the folio */
/* phones and tablets (2026-09-30, the UI launch pass): the wider essay column is a desktop measure. Below 881px
   it ran the full 720px of a tablet (about 95 characters a line); here the essays take the site's one reading
   region, like every other reading page */
@media (max-width: 880px) {
  .page-essay .mv--doc .col, .page-essay .mv--doc .col--wide, .page-essay .mv--essay-open .col { max-width: var(--region); }
}