/* Hallmark · page styles for this route; stamp and tokens live in site.css · hero: Banner */
.banner { padding-block: var(--space-2xl) var(--space-xl); border-bottom: 1px solid var(--color-rule); }
.banner h1 { font-size: var(--text-display-s); max-width: none; }
.banner .lead { max-width: 56ch; }
.banner__grid { display: grid; gap: var(--space-md); }
.doc__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; }
.toc { grid-column: 1 / span 4; position: sticky; top: calc(var(--nav-height) + var(--space-lg)); }
.toc__title { margin-bottom: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }
.toc ol { list-style: none; border-top: 1px solid var(--color-rule-strong); }
.toc li { border-bottom: 1px solid var(--color-rule); }
.toc a { display: block; padding: var(--space-sm) 0; font-size: var(--text-sm); line-height: 1.4; color: var(--color-ink-2); text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.toc a:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 0.2em; }
.doc__text { grid-column: 6 / span 7; max-width: 40rem; line-height: 1.7; }
.doc__text h2 { max-width: none; margin-top: var(--space-2xl); margin-bottom: var(--space-md); font-size: var(--text-2xl); line-height: 1.2; scroll-margin-top: var(--space-3xl); }
.doc__text h2:first-child { margin-top: 0; }
.doc__text p { max-width: none; }
.doc__text p + p { margin-top: var(--space-md); }
.doc__text a { text-decoration: underline; }
.mail { user-select: all; }
@media (max-width: 60rem) {
  .toc { grid-column: 1 / -1; position: static; margin-bottom: var(--space-xl); }
  .doc__text { grid-column: 1 / -1; }
}
.section--s.lib, .section--s.doc, .section--s.archive { padding-top: var(--space-xl); }
.banner h1, .banner .lead { text-wrap: balance; }
.btn:focus-visible { outline-offset: 3px; }
.toc a:focus-visible, .doc__text a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.toc a:active { color: var(--color-ink-2); }

@media (max-width: 40rem) { .toc { display: none; } }
@media (max-width: 80rem) { .toc { display: none; } .doc__text { grid-column: 1 / -1; margin-inline: auto; } }