/* site.css — the frame every page sits in.
 *
 * The pages were written phone-first and never given a desktop layout: a 544px
 * column floating in the middle of a 1440px window, with no header and no edges.
 * It does not read as a narrow design, it reads as a phone page someone opened on
 * the wrong device.
 *
 * Two different problems, two different answers:
 *
 *   * Prose (support, privacy, acknowledgements) does NOT want to be wider. 65-75
 *     characters is the measure that stays readable; stretching it to 1400px makes
 *     it worse, not better. What it wants is a *frame* — a header with the mark and
 *     the navigation, and a footer — so the column reads as part of a site rather
 *     than as something that failed to load.
 *
 *   * The front page does want the room: seven feature cards in one column is a
 *     long scroll on a screen with space for two.
 *
 * Loaded after each page's own <style> so these rules win where they overlap.
 */

:root {
  --page: 940px;       /* the widest anything gets */
  --measure: 40rem;    /* the reading column */
  --gutter: 24px;
}

/* ---- Header -------------------------------------------------------------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
}
/* The bar runs edge to edge, not in the 940px band.
 *
 * Capping it looked right on the machine it was built on and wrong on a wider
 * one, and that is not a matter of taste — it is arithmetic. A centred 940px
 * band leaves (window − 940) / 2 of empty space on each side, so on a 1280px
 * laptop the navigation ends 114px from the right edge and reads as "top
 * right", while on a 1920px monitor it ends 490px in and reads as "somewhere in
 * the middle". Same CSS, two different-looking headers, which is exactly what
 * was reported from two computers.
 *
 * Pinning the mark to the left edge and the navigation to the right edge is the
 * only arrangement whose *appearance* does not depend on how wide the window
 * is. The header no longer shares an edge with the text column below it, and
 * that is the trade: a bar that frames the window rather than the column.
 */
.site-head > div {
  max-width: none;
  margin: 0;
  /* The floor is the page gutter, not something smaller: on a phone the text
     column already fills the window, so a header inset of 16 against a body
     inset of 24 would put the mark 8px to the left of every line under it. */
  padding: 0 clamp(24px, 3.2vw, 44px);
  height: 58px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.site-head .mark {
  display: flex;
  align-items: center;
  gap: 9px;
  font: 700 13px/1 ui-monospace, Menlo, monospace;
  letter-spacing: .2em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.site-head .mark img { width: 22px; height: 22px; display: block; }
.site-head nav {
  margin-left: auto;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.site-head nav a {
  font-size: .86rem;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.site-head nav a:hover,
.site-head nav a[aria-current] { color: var(--text); }

@media (max-width: 640px) {
  .site-head > div { height: auto; padding: 12px var(--gutter); flex-wrap: wrap; gap: 10px; }
  .site-head nav { margin-left: 0; width: 100%; gap: 14px; }
  .site-head nav a { font-size: .8rem; }
}

/* ---- Page body ----------------------------------------------------------- */

/* Prose pages keep the reading measure; only the padding changes. */
body > main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 44px var(--gutter) 90px;
}

/* The front page opts into the full width. */
body > main.wide { max-width: var(--page); }

/* Inside a wide page, prose still gets a column — otherwise the line length is
   unreadable and every paragraph looks like a paragraph in a spreadsheet.
   `margin-inline: auto` is the part that was missing: without it the column sat
   hard against the left edge of a much wider container, so the page read as
   left-aligned with a hole on the right rather than as centred. Everything now
   shares one centre line, and the only thing that changes between sections is how
   far out from it they reach. */
.wide .column { max-width: 44rem; margin-inline: auto; }

/* ---- Footer -------------------------------------------------------------- */

body > main > footer,
body > footer {
  border-top: 1px solid var(--border);
  margin-top: 3rem;
  padding-top: 1.4rem;
  color: var(--faint);
  font-size: .82rem;
  line-height: 1.7;
}

/* ---- Desktop: the front page's feature grid ------------------------------ */

@media (min-width: 860px) {
  body > main { padding-top: 64px; }
  .wide .features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: start;
  }
  /* The hero reads better against air than against a wall of cards. Centred as a
     block, still left-aligned inside — centred *text* at this size reads as a
     poster, and the eye loses the start of each line. */
  .wide .hero { max-width: 44rem; margin-inline: auto; }
  .wide .hero h1 { font-size: 3.4rem; }

  /* Seven cards in two columns leaves one alone on the bottom left, which is the
     thing that makes an otherwise symmetric page look lopsided. An odd last child
     takes the full width instead — it reads as the closing line of the list rather
     than as a gap where a card should have been. */
  .wide .features > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (min-width: 1180px) {
  .wide .hero h1 { font-size: 4rem; }
}