/* WP-113: guides index, article reading layout, error pages. Page-specific; loaded by the pages themselves via @section Head (foundation is site.css). */
/* guides index */
.guides-index .topic-h{margin-block-start:var(--s8)}
.guides-index .sub{max-inline-size:62ch}
.guides-index .cards{margin-block-start:var(--s5)}
.guides-index h3{font-size:var(--fs-h3);margin:0 0 .4em}

/* article: reading measure ~70 characters, sticky contents on wide screens only */
.art-wrap{max-inline-size:760px}
.article .prose{font-size:1.0625rem;line-height:1.75}
.article .prose p{max-inline-size:70ch}
.article .prose h2{margin-block-start:2.2em;padding-block-start:.2em}
.article .prose h2,.article .prose h3{line-height:1.25}
.article .prose pre,.article .prose table{max-inline-size:100%}
.article .prose pre{overflow-x:auto;tab-size:2}
.article .prose code{overflow-wrap:anywhere}
.article .prose pre code{overflow-wrap:normal}
.article .prose a{text-decoration-thickness:1px}
.article .prose hr{border:0;border-block-start:1px solid var(--line);margin-block:2em}
.article .meta{margin-block-end:var(--s5)}
.article .toc{display:none}
.article .toc ol{padding-inline-start:1.2em}
.article .toc a{color:var(--text2);text-decoration:none}.article .toc a:hover{color:var(--teal);text-decoration:underline}
.article .related li{transition:border-color .2s}.article .related li:hover{border-color:var(--indigo)}
@media (min-width:600px){.article .toc{display:block}}
@media (min-width:1180px){
  .article .art-wrap{max-inline-size:1100px;display:grid;grid-template-columns:minmax(0,740px) 280px;column-gap:var(--s7);align-items:start}
  .article .art-wrap>*{grid-column:1}
  .article .toc{grid-column:2;grid-row:1/span 40;position:sticky;inset-block-start:calc(var(--header-h) + 24px);margin:0;max-block-size:calc(100vh - var(--header-h) - 48px);overflow-y:auto;font-size:var(--fs-sm)}
}

/* error pages */
.err-page{padding-block:var(--s6)}
.err-page .lead{margin-inline:auto;max-inline-size:46ch}
.err-links{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);justify-content:center;margin-block-start:var(--s6)}
.err-links a{display:inline-flex;align-items:center;min-block-size:44px;padding-inline:16px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--text2);text-decoration:none;font-weight:600;font-size:var(--fs-sm)}
.err-links a:hover{border-color:var(--indigo);color:var(--text)}
.article .table-wrap{border:1px solid var(--line);border-radius:12px}.article .prose table{margin:0;min-inline-size:520px}