/* NatureType pages and their A-Z index. Reader: whoever restyles them.
   Tokens only: every colour, size and space is a design-system variable, so
   these pages add nothing to the Visual Guard or spacing baselines. The measure
   comes from .article-body (--max-width-text, 32.63em); nothing here is in ch. */

.nt-hero .breadcrumb {
  margin: 0 0 var(--space-3);
}

.nt-hero .lede {
  max-width: var(--max-width-text);
  font-style: italic;
}

.nt-structural,
.nt-framing {
  max-width: var(--max-width-text);
  margin-top: var(--space-2);
  color: var(--text-secondary);
}

.nt-art {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.nt-art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

/* These sections hold blocks that bring their own gutter (.article-body, the
   jump list, the index). Without this the gutter is applied twice and the text
   sits further in than the heading above it. */
.section.nt-body,
.section.nt-after,
.section.nt-index {
  padding-left: 0;
  padding-right: 0;
}

/* Jump list. It shares the article's measure so it lines up with the text. */
.nt-toc {
  max-width: var(--max-width-text);
  margin: 0 auto var(--space-5);
  padding: var(--space-3) var(--gutter);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.nt-toc h2 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-ui);
  color: var(--text-secondary);
}

.nt-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: var(--space-4);
}

.nt-toc li {
  margin: 0;
  break-inside: avoid;
}

.nt-toc a {
  display: block;
  padding: var(--space-1) 0;
}

/* Section rhythm: the space above a heading is three times the space below
   it (3rem against 1rem), so a heading belongs to the text under it. The first
   heading sits directly under the jump list and needs no extra lead. */
.nt-card > section:first-child h2 {
  margin-top: 0;
}

.nt-composition {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.nt-composition h2 {
  margin-top: 0;
  font-size: var(--fs-h3);
}

/* .article-body indents every list; a row of tags is not a list to indent. */
.nt-composition .tag-list {
  padding-left: 0;
}

.nt-composition h3 {
  margin-top: var(--space-4);
}

.nt-after {
  max-width: var(--max-width-text);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.nt-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
}

.nt-status {
  margin-top: var(--space-5);
  color: var(--text-secondary);
}

/* A-Z index */
.nt-index {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.nt-letters ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.nt-letters a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: var(--fw-ui);
}

.nt-letter h2 {
  margin: var(--space-5) 0 var(--space-2);
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
}

.nt-index-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--space-3) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nt-index-list a {
  display: block;
  padding: var(--space-1) 0;
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
}

.nt-index-list span {
  display: block;
  color: var(--text-secondary);
}

@media (max-width: 640px) {
  .nt-toc ol {
    columns: 1;
  }
}

/* Found by the rendered Visual Guard. The breadcrumb and tag components set
   13px type, below the 16px floor for text a visitor is meant to read, and the
   display leading (1.1) clips this serif's descenders. Both are raised here with
   registered tokens; the components themselves are shared and left alone. */
.nt-hero .breadcrumb,
.nt-composition .tag-list .tag {
  font-size: var(--fs-body);
}

.nt-hero h1 {
  line-height: var(--lh-heading-xl);
}