/* Long-form document styling, layered on top of splash.css. */

.doc { max-width: 720px; padding-bottom: 60px; }

.doc h1 { font-size: clamp(28px, 7vw, 40px); margin-bottom: 4px; }

.crumb { margin: 0 0 20px; font-size: 13px; }

.updated { margin: 0 0 24px; color: var(--dim); font-size: 13px; }

.lede {
  padding: 14px 16px;
  margin-bottom: 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
}

.doc h2 {
  margin: 30px 0 8px;
  font-size: 16px;
  color: var(--accent);
  text-transform: none;
  letter-spacing: 0;
}

.doc p, .doc li { font-size: 14.5px; }
.doc ul { padding-left: 20px; }
.doc li { margin-bottom: 6px; }

.doc table {
  width: 100%;
  margin: 12px 0;
  border-collapse: collapse;
  font-size: 13.5px;
  display: block;
  overflow-x: auto;
}
.doc th, .doc td {
  padding: 8px 10px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.doc th { background: var(--card); color: var(--dim); font-weight: 600; }
.doc code {
  padding: 1px 5px;
  background: #232936;
  border-radius: 4px;
  font-size: 12.5px;
}

.foot {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}