body { min-width: 1024px; }

.notebook-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 720px);
  gap: 42px;
}

.notebook-index {
  align-self: start;
  display: grid;
  gap: 2px;
  position: sticky;
  top: 22px;
  padding-top: 1px;
}

.notebook-index a {
  padding: 7px 0;
  border-bottom: 1px solid var(--site-rule-light);
  color: var(--site-ink);
  font: 12px/1.25 var(--sketchbook-sans);
  text-decoration: none;
}

.notebook-index a.is-active { color: var(--site-muted); text-decoration: underline; text-underline-offset: 3px; }
.notebook-index a[data-depth="1"] { padding-left: 12px; }

.notebook-reading { min-width: 0; font: 14px/1.55 var(--sketchbook-sans); }
.notebook-reading h1,
.notebook-reading h2,
.notebook-reading h3 { font-family: var(--sketchbook-header); font-weight: 500; letter-spacing: -.035em; }
.notebook-reading h1 { margin: 0 0 18px; font-size: 34px; line-height: .96; }
.notebook-reading h2 { margin: 32px 0 10px; font-size: 25px; line-height: 1; }
.notebook-reading h3 { margin: 24px 0 8px; font-size: 20px; line-height: 1; }
.notebook-reading p { margin: 0 0 12px; }
.notebook-reading ul,
.notebook-reading ol { margin: 0 0 14px; padding-left: 20px; }
.notebook-reading li { margin: 4px 0; }
.notebook-reading blockquote { margin: 0 0 16px; padding-left: 16px; border-left: 1px solid var(--site-rule); color: var(--site-muted); }
.notebook-reading a { color: inherit; text-underline-offset: 3px; }
.notebook-reading table { width: 100%; margin: 16px 0; border-collapse: collapse; font-size: 12px; }
.notebook-reading th,
.notebook-reading td { padding: 8px 6px; border-bottom: 1px solid var(--site-rule-light); text-align: left; vertical-align: top; }
.notebook-reading code { font: .92em var(--sketchbook-sans); }