/* The interior page layout, shared by every page that is mostly prose and tables.

 * Before this, an interior page was a 640px column pinned to the left of a 1440px viewport with
 * 240px of empty space between each two-sentence section. It used a third of the screen and read
 * as unfinished, because visually it was: one thing at a time, stacked, with the page's own
 * structure invisible.
 *
 * The rail carries what the reader needs to orient — where they are in the set, and the page's
 * hard facts — so the body can stay a readable measure without the rest of the width going to
 * waste. The vertical rhythm inside the body is a section rule, not a screen of air.
 */

.doc {
  display: grid;
  gap: clamp(var(--space-6), 4vw, var(--space-8));
  align-items: start;
}

@media (min-width: 1000px) {
  .doc { grid-template-columns: 15rem minmax(0, 1fr); }
  .doc__rail { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
}

.doc__rail { display: grid; gap: var(--space-6); align-content: start; }

.doc__railgroup { display: grid; gap: var(--space-2); }

.doc__railtitle {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-faint);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}

.doc__raillink {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  padding: 0.3rem 0;
  color: var(--fg-muted);
  text-decoration: none;
  font-size: var(--text-sm);
}

.doc__raillink:hover { color: var(--fg); }
.doc__raillink[aria-current="page"] { color: var(--accent); }
.doc__raillink i { font-family: var(--font-data); font-size: 0.7rem; color: var(--fg-faint); font-style: normal; }

.doc__railfact { display: grid; gap: 0.15rem; padding: 0.35rem 0; }
.doc__railfact dt { font-size: var(--text-sm); color: var(--fg-muted); }
.doc__railfact dd { margin: 0; font-family: var(--font-data); font-size: 0.72rem; color: var(--fg); }

/* ---- the body ---- */

.doc__body { display: grid; gap: 0; min-width: 0; }

.doc__section {
  padding-block: clamp(var(--space-6), 3vw, var(--space-7));
  border-top: 1px solid var(--border);
}

.doc__section:first-child { padding-top: 0; border-top: 0; }

.doc__section > h2 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-4);
}

.doc__section > h2 + p,
.doc__section > p { max-width: 68ch; }

.doc__section > p + p { margin-top: var(--space-4); }

/* A section that carries a figure or a wide table drops the measure limit. */
.doc__section--wide > p { max-width: none; }

/* ---- page head ---- */

.doc__head { padding-bottom: clamp(var(--space-6), 3vw, var(--space-7)); }
.doc__head h1 { margin-bottom: var(--space-4); }
.doc__head .lead { max-width: 60ch; }

/* ---- a run of facts under the head, so the page opens with substance ---- */

.doc__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}

.doc__fact { display: grid; gap: 0.25rem; }

.doc__fact b {
  font-family: var(--font-data);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--fg);
  letter-spacing: -0.01em;
}

.doc__fact span { font-size: var(--text-sm); color: var(--fg-muted); }