/* Essays index — this page's own layout only.
   Tokens, type, the nav pill, the footer and the essay card come from
   /styles.css and /chrome.css; the cards are shared with the landing page's
   essays strip, which is why they are not here.

   Lives in its own .css file rather than an inline <style>, for the same
   reason the individual essays do: scripts/verify-language.sh scans inline
   HTML for voice-drift words and "text-transform" trips its /\btransform\b/
   rule. CSS files are not scanned, so the property keeps its real name here
   instead of being worked around in the markup. */

/* Note the body carries no `home` class: those rules pin the home page's
   hero to one screen, which is not what an index of essays wants. */

/* Column layout so the footer can hold the page's bottom corners even when
   the essays do not fill the screen — without it, a short index leaves the
   footer stranded halfway up. */
body {
  background: var(--fx-black);
  color: var(--fx-off-white);
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* styles.css dresses a bare `main` as the essay reading shell: 728px wide,
   hairline rules down both sides, canvas fill, full-viewport min-height.
   This page's main is a grid container, so unwind all of it. */
main.wrap {
  background: transparent;
  border: 0;
  max-width: 1200px;
  min-height: 0;
  flex: 1 0 auto;
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  /* clears the fixed pill, which is 50px tall at the viewport's edge inset */
  padding: calc(var(--fx-edge) * 2 + 50px + var(--s-16)) var(--fx-edge) var(--s-16);
}

/* ---------------------------------------------------------- footer */

/* The footer itself is chrome.css. What is local here is only the column
   layout's share of it — this page is a flex column so a short index still
   pushes the footer to the bottom corners. */

/* chrome.css hides the drawer's calls above 900px because the home page's
   rail is carrying them there. This page has no rail, so without this the
   desktop drawer would offer nav links and nothing to act on. */
.fx-actions { display: flex; }