/* ============================================================
   Long-form pages: accessibility, and terms and privacy (one page).
   One set of rules so these pages read alike and are fixed in one place.
   Each page used to carry its own copy of a .legal block in an inline
   <style>, which is how they drifted apart.

   Why it looks like this (Tyler, 2026-10-08, "spacing and text are off"):
   - the date sat jammed against a 58px uppercase title, so the header is
     now one grouped block with its own rhythm and a rule under it;
   - section headings were Anton uppercase, as loud as the page title, so
     they are now sentence-case Inter: still clearly headings, but they
     no longer compete with the H1;
   - the gap between sections was about 3x the gap inside one, so each
     heading now sits close to the text it introduces;
   - body copy was --txt-dim grey at full column width; it is now --txt
     (14.5:1 on sand) at about 68 characters a line.
   ============================================================ */

.longform {
  /* 680px of text at any screen width; padding sits outside it. */
  max-width: calc(680px + 2 * var(--pad-x));
  margin: 0 auto;
  padding: calc(var(--nav-h) + 56px) var(--pad-x) 96px;
  color: var(--txt);
}

/* Header block: date, title, intro, then a hairline to close it off. */
.longform-head {
  padding-bottom: 28px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--sand-dim);
}
.longform-meta {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--txt-dim);            /* 5.5:1 on sand */
  margin-bottom: 14px;
}
/* Each date stays whole, so a long meta line breaks at the separator. */
.longform-meta span { white-space: nowrap; }
.longform h1 {
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  line-height: 1;
  color: var(--ink);
}
.longform-lead {
  margin-top: 18px;
  font-size: clamp(1.08rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  color: var(--txt);
  max-width: 62ch;
}

/* Section headings: body font, sentence case. Kept close to their own text
   and further from the section above, so each section reads as a unit. */
.longform h2 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1.3;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--ink);
  margin: 40px 0 10px;
}
.longform h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.06rem;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  margin: 28px 0 8px;
}

/* Pages with parts (terms has "Part 1 · Terms", "Part 2 · Privacy") mark
   each part with a rule above, so the two documents read as two, and the
   numbered sections inside use h3. */
.longform h2.longform-part {
  font-size: 1.55rem;
  margin-top: 64px;
  padding-top: 32px;
  border-top: 2px solid var(--ink);
}
/* The header already ends in a rule, so the first part does not draw another. */
.longform h2.longform-part:first-of-type { margin-top: 40px; padding-top: 0; border-top: 0; }

/* Callout for the clauses a reader must not miss. Text stays --txt on the
   pale amber tint (13:1); the tint alone carries the emphasis. */
.longform-note {
  background: rgba(255, 179, 71, .14);
  border: 1px solid rgba(255, 179, 71, .55);
  border-left: 4px solid var(--amber);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  margin: 24px 0;
  font-size: 1rem;
  line-height: 1.65;
}
.longform-note p { font-size: inherit; line-height: inherit; }
.longform-head + .longform-note { margin-top: 28px; }

.longform p,
.longform li {
  font-size: 1.0625rem;
  line-height: 1.7;
  max-width: 68ch;
}
.longform p + p,
.longform p + ul,
.longform ul + p { margin-top: 14px; }

.longform ul { list-style: disc; padding-left: 1.25em; }
.longform li { padding-left: 4px; }
.longform li + li { margin-top: 10px; }
/* Bullets are decoration, not text, so brand coral is fine here. */
.longform li::marker { color: var(--coral); }

.longform a:not(.btn) {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--coral);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.longform a:not(.btn):hover { text-decoration-color: var(--ink); }
/* Ink outline, not the site's amber: amber is 1.6:1 on sand, too faint to
   find a focused link in running text. */
.longform a:not(.btn):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (max-width: 600px) {
  .longform { padding-top: calc(var(--nav-h) + 32px); padding-bottom: 72px; }
  .longform-head { padding-bottom: 22px; }
  .longform-meta { font-size: .72rem; margin-bottom: 10px; }
  .longform h2 { font-size: 1.18rem; margin-top: 34px; }
  .longform h2.longform-part { font-size: 1.35rem; margin-top: 48px; padding-top: 24px; }
  .longform h2.longform-part:first-of-type { margin-top: 32px; padding-top: 0; }
  .longform-note { padding: 14px 16px; font-size: .95rem; }
  .longform p, .longform li { font-size: 1rem; line-height: 1.65; }
}