/* Shared by every page under web/pages. The landing film has its own world of CSS and does not
   use this; these are the reading pages, and they deliberately look like /docs rather than like
   the film, because somebody who lands here from a search result is reading, not being sold to.
   Brand beige in light, brand dark in dark, serif body, one 720px column. */
  :root {
    --bg: #f7f6ef; --fg: #20231c; --muted: #6b6f63; --rule: #d9d7ca;
    --code-bg: #eeece1; --accent: #20231c;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #20231c; --fg: #f7f6ef; --muted: #a3a698; --rule: #3a3d34;
      --code-bg: #191c16; --accent: #f7f6ef;
    }
  }
  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0; background: var(--bg); color: var(--fg);
    font: 17px/1.65 ui-serif, Georgia, "Times New Roman", serif; padding: 0 24px 120px;
  }
  .wrap { max-width: 720px; margin: 0 auto; }
  header { padding: 72px 0 8px; }
  .eyebrow {
    font: 500 12px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 22px;
  }
  .eyebrow a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
  .eyebrow a:hover { color: var(--fg); border-bottom-color: currentColor; }
  h1 { font-size: clamp(30px, 5vw, 42px); line-height: 1.15; font-weight: 500; margin: 0 0 18px; letter-spacing: -.01em; }
  h2 {
    font: 500 13px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted);
    margin: 64px 0 18px; padding-top: 22px; border-top: 1px solid var(--rule);
  }
  h3 { font-size: 19px; font-weight: 600; margin: 32px 0 8px; }
  p { margin: 0 0 16px; }
  .lede { font-size: 20px; }
  .muted { color: var(--muted); }
  a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
  .scroll { overflow-x: auto; margin: 0 0 20px; }
  table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
  th, td { text-align: left; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
  td:last-child, th:last-child { padding-right: 0; }
  th { font: 600 12px/1.4 ui-sans-serif, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  ul { margin: 0 0 16px; padding-left: 20px; }
  li { margin-bottom: 8px; }
  .note { border-left: 2px solid var(--rule); padding: 2px 0 2px 18px; margin: 0 0 20px; color: var(--muted); font-size: 16px; }
  .cta {
    display: inline-block; margin: 8px 14px 8px 0; padding: 12px 22px; border-radius: 999px;
    background: var(--fg); color: var(--bg); text-decoration: none;
    font: 500 14px/1 ui-sans-serif, system-ui, sans-serif;
  }
  .cta.ghost { background: transparent; color: var(--fg); border: 1px solid var(--rule); }
  footer { margin-top: 80px; padding-top: 24px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 14.5px; }
  footer a { color: var(--muted); }
  footer nav a { margin-right: 18px; display: inline-block; margin-bottom: 8px; }
  @media (max-width: 560px) {
    body { padding: 0 18px 80px; font-size: 16px; }
    header { padding-top: 48px; }
  }