.guide-intro {
  padding-bottom: calc(var(--section-space) / 2);
}

.guide-title-block {
  position: relative;
  max-width: var(--content-max);
  overflow-x: clip;
}

.guide-title-block::after {
  content: "";
  position: absolute;
  inset-inline: var(--card-space);
  bottom: var(--card-space);
  height: var(--focus-width);
  background: linear-gradient(90deg, var(--accent), var(--tint-line), var(--clear));
  pointer-events: none;
}

.guide-title-block h1 {
  max-width: var(--reading-max);
}

.guide-lead {
  max-width: var(--reading-max);
  margin-top: var(--gap);
  margin-bottom: var(--gap);
  color: var(--muted);
  font-size: var(--large);
  line-height: var(--leading-wide);
}

.guide-relationship {
  max-width: var(--reading-max);
  margin-top: var(--gap);
  padding-top: var(--gap);
  padding-bottom: var(--gap);
  border-top: var(--focus-width) solid var(--line);
  color: var(--muted);
}

.guide-relationship p {
  margin: 0;
}

.guide-relationship .text-link {
  margin-inline-start: var(--micro);
  color: var(--text);
}

.guide-article {
  max-width: calc(var(--reading-max) + var(--gutter) * 2);
  padding-top: calc(var(--section-space) / 2);
}

.guide-section {
  min-width: 0;
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
  border-bottom: var(--focus-width) solid var(--line);
  box-shadow: var(--groove-shadow);
}

.guide-section > h2 {
  margin-bottom: var(--card-space);
}

.guide-section h3 {
  margin-top: calc(var(--gap) * 2);
  margin-bottom: var(--gap);
}

.guide-section p,
.guide-section li {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.guide-section a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: var(--focus-offset);
}

.guide-section .callout,
.guide-section .table-scroll,
.guide-section pre {
  margin-top: calc(var(--gap) * 2);
  margin-bottom: calc(var(--gap) * 2);
}

.guide-section .data-table th:first-child {
  width: calc(var(--card-space) * 6);
}

.guide-section pre {
  box-shadow: inset 0 var(--focus-width) 0 var(--etch);
}

.guide-close {
  margin-top: calc(var(--section-space) / 2);
}

.guide-close h3 {
  margin-top: 0;
}

.guide-close p {
  max-width: var(--reading-max);
}

.guide-close .fact-row {
  margin-top: var(--gap);
}

@media (max-width: 768px) {
  .guide-intro {
    padding-top: var(--section-space);
  }

  .guide-title-block h1 {
    font-size: var(--h1-small);
  }

  .guide-lead {
    font-size: var(--body-size);
  }

  .guide-article {
    padding-top: 0;
  }

  .guide-section {
    padding-top: var(--section-space);
    padding-bottom: var(--section-space);
  }

  .guide-section h3 {
    margin-top: var(--section-space);
  }

  .guide-section .data-table th:first-child {
    width: auto;
  }
}

@media (max-width: 380px) {
  .guide-title-block .fact-row {
    align-items: flex-start;
  }

  .guide-title-block .fact-tag,
  .guide-title-block .badge {
    width: fit-content;
  }
}