/* ============================================================
   DOC PAGES — long-form legal / support text (jimeo, etc.)
   ============================================================ */

.doc {
  padding: calc(var(--nav-h) + clamp(var(--s-4), 10vh, var(--s-6))) 0 var(--s-6);
}

.doc__inner {
  width: min(100% - 2 * var(--page-margin), 68ch);
  margin: 0 auto;
}

/* the eyebrow names the app these pages belong to, so it doubles as the way
   back to it. Inherits the eyebrow's own colour via the global `a` reset and
   brightens on hover — the only cue it needs at this size. */
.doc__eyebrow-link {
  transition: color 0.25s ease;
}
@media (hover: hover) {
  .doc__eyebrow-link:hover { color: var(--ink); }
}

.doc__title {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: -0.03em;
  font-weight: var(--fs-heading-weight);
  margin-bottom: var(--s-2);
}

.doc__meta {
  color: var(--ink-faint);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  margin-bottom: var(--s-3);
}

.doc__lede {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  margin-bottom: var(--s-4);
}

.doc h2 {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: -0.01em;
  font-weight: 400;
  margin: var(--s-4) 0 var(--s-1);
}

.doc p {
  color: var(--ink-dim);
  line-height: 1.65;
}

.doc__back {
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--hairline);
}