/* Blog posts — one sheet shared by every post. A post that needs styles of
   its own adds blog/css/<slug>.css after this one. */
.post-content {
  max-width: 44rem;
  padding-block: clamp(40px, 6vw, 72px) clamp(72px, 9vw, 120px);
}
.post-content h1 {
  margin-bottom: 14px;
  font-size: clamp(2.125rem, 1.4rem + 2.6vw, 3.125rem);
  line-height: 1.08;
  letter-spacing: -0.024em;
}
.post-meta { margin-bottom: 40px; color: var(--ink-3); font-size: 0.9375rem; }
.post-content h2 {
  margin: 52px 0 14px;
  font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.875rem);
  line-height: 1.2;
  letter-spacing: -0.016em;
}
.post-content p {
  margin-bottom: 1.15em;
  color: var(--ink);
  font-size: 1.125rem;
  line-height: 1.75;
  text-wrap: pretty;
}

/* Code: a caption above a dark panel */
.code-label { margin: 32px 0 8px; color: var(--ink-3); font-size: 0.875rem; font-weight: 700; }
.code-block { margin: 0 0 32px; }
.code-block pre { margin: 0; font-size: 0.8125rem; line-height: 1.75; }

/* Reference tables */
.cidr-table, .sources-table, .plan-table, .compare-table, .ranges-table {
  width: 100%;
  margin: 28px 0 36px;
  border-collapse: collapse;
  font-size: 0.9688rem;
  line-height: 1.5;
}
:is(.cidr-table, .sources-table, .plan-table, .compare-table, .ranges-table) th {
  padding: 10px 16px 10px 0;
  border-bottom: 2px solid var(--ink);
  color: var(--ink);
  font-weight: 700;
  text-align: left;
  vertical-align: bottom;
}
:is(.cidr-table, .sources-table, .plan-table, .compare-table, .ranges-table) td {
  padding: 10px 16px 10px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
  vertical-align: top;
}
:is(.cidr-table, .sources-table, .plan-table, .compare-table, .ranges-table) td:first-child { color: var(--ink); }

@media (max-width: 640px) {
  .post-content p { font-size: 1.0625rem; }
  .cidr-table, .sources-table, .plan-table, .compare-table, .ranges-table {
    display: block;
    overflow-x: auto;
    font-size: 0.9375rem;
  }
  :is(.cidr-table, .sources-table, .plan-table, .compare-table, .ranges-table) :is(th, td) { min-width: 9em; }
}