/* ═══════════════════════════════════════════════════════════════════
   Document pages: /legal, /terms, and the 404.
   Shared by all three, loaded after shared/ephemeris.css.

   Deliberately the plainest styling on the site. These are the pages
   where a reader is checking something specific, usually because they
   are about to spend money or because something has gone wrong, and
   decoration would only slow that down.
   ═══════════════════════════════════════════════════════════════════ */

body {
  margin:0; background:var(--parchment); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; transition:background .35s, color .35s;
}

.doc-head { padding-bottom:0; }
.doc-head .display-h2 { max-width:24rem; margin-inline:auto; }

/* Left-aligned, at a reading measure. Centred body text is fine for a
   sales page and miserable for a policy. */
.doc {
  max-width:calc(var(--measure) + 6rem);
  margin-inline:auto; text-align:left;
  padding-top:clamp(1.6rem, 4vw, 2.4rem);
}

.doc h2 {
  margin:2.4rem 0 .7rem; font-family:var(--sub);
  font-size:var(--sent-md); letter-spacing:.02em; color:var(--ink);
}
.doc h2:first-of-type { margin-top:1.2rem; }

.doc p { margin:0 0 1rem; line-height:1.68; }
.doc strong { font-weight:600; }

.doc ul { margin:0 0 1.2rem; padding-left:1.1rem; }
.doc li { margin-bottom:.5rem; line-height:1.62; }

.doc a {
  color:var(--ink); text-decoration:underline;
  text-underline-offset:.18em; text-decoration-thickness:1px;
}
.doc a:hover { color:var(--violet); }

.doc-updated {
  font-family:var(--sub); font-size:var(--caps-xs);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-bottom:2rem;
}

.doc-lead { font-size:var(--step-1); line-height:1.4; margin-bottom:1.4rem; }

.doc-links { list-style:none; padding-left:0; }
.doc-links li { margin-bottom:.6rem; }
.doc-links a { text-decoration-thickness:1px; }

/* A note addressed to Michelle rather than to a reader. It ships visible
   on purpose: a hidden comment gets missed, and both of these pages need
   a lawyer's eye before they are relied on. Delete the block once that
   has happened. */
.doc-note {
  margin:2.6rem 0 0; padding:1rem 1.1rem;
  border:1px dashed color-mix(in srgb, var(--stone) 55%, transparent);
  border-radius:4px;
  background:color-mix(in srgb, var(--lilac) 12%, transparent);
}
.doc-note p { margin:0; font-size:.9rem; line-height:1.6; color:var(--muted); }

/* ── Responsive chrome ────────────────────────────────────────
   The topbar's mobile behaviour lives in each page's own stylesheet
   rather than in shared/ephemeris.css, so a page built on the shared
   chrome without these rules keeps a full desktop nav at 390px and
   pushes the document sideways by 342px. Copied verbatim from the
   pages this chrome came from, so all three behave identically. */
@media (max-width:900px) {
  .foot-inner { grid-template-columns:1fr 1fr; }
}
@media (max-width:760px) {
  .menu-toggle { display:block; }
  .topbar-inner { flex-wrap:wrap; }
  .topbar nav {
    display:none; flex-basis:100%; flex-direction:column;
    align-items:flex-start; gap:.9rem; padding-top:1.1rem; margin-left:0;
  }
  .topbar.is-open nav { display:flex; }
  .seal { width:150px; height:150px; right:-1rem; bottom:-1rem; }
  .foot-inner { grid-template-columns:1fr; }
}