/* The articles: /articles and /articles/<slug> (modules/site/views/articles.php,
   article.php). The hero, the crumbs, the cards and the closing band come from
   lawyers.css. The table, the warning box and the code links come from tools.css. */

.ar-hero h1 { max-width: 900px; }
.site .ar-meta { margin: var(--s4) 0 0; font: 500 12px/1.4 var(--mono); letter-spacing: .03em; color: var(--ink-3); }

.ar-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--s5); }
.site .ar-card { display: grid; gap: var(--s3); align-content: start; color: inherit; text-decoration: none; }
.site .ar-card .ar-meta { margin: 0; }
.site .ar-card h2 { margin: 0; }
.site .ar-read { color: var(--accent); font-weight: 600; }

.ar-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--s7); align-items: start; }
.ar-toc { position: sticky; top: 92px; }
.ar-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); border-left: 1px solid var(--line); }
.ar-toc a { display: block; padding: 2px 0 2px var(--s4); font-size: 15px; color: var(--ink-2); text-decoration: none; }
.ar-toc a:hover { color: var(--ink); }

.ar-body { display: grid; gap: var(--s8); min-width: 0; max-width: 780px; line-height: 1.65; color: var(--ink-2); overflow-wrap: break-word; }
.ar-part { display: grid; gap: var(--s4); align-content: start; scroll-margin-top: 92px; }
.site .ar-part > h2 { margin: 0; font-size: clamp(24px, 2.8vw, 32px); color: var(--ink); }
.site .ar-part p, .site .ar-part ul, .site .ar-part ol { margin: 0; }
.ar-part ul, .ar-part ol { padding-left: 1.4em; display: grid; gap: var(--s2); }
.ar-part strong { color: var(--ink); font-weight: 600; }
.site .ar-part > .tl-caution { margin: 0; }
/* The first column names a row: it wraps, in the text face. The other
   columns hold sums: one line, in the mono face of site.css. */
.site .ar-part .tl-scroll .ar-table td:first-child { min-width: 14em; white-space: normal; font-family: var(--sans); font-size: inherit; letter-spacing: normal; }
.site .ar-part .tl-scroll .ar-table td:not(:first-child) { white-space: nowrap; }

.ar-faq { border-top: 1px solid var(--line); }
.ar-faq details { border-bottom: 1px solid var(--line); }
.ar-faq summary {
	display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
	padding: var(--s4) 0; cursor: pointer; list-style: none; font: 400 18px/1.35 var(--disp); letter-spacing: -.015em; color: var(--ink);
}
.ar-faq summary::-webkit-details-marker { display: none; }
.ar-faq summary::after { content: "+"; flex: none; font: 400 24px/1 var(--sans); color: var(--accent); transition: transform .2s; }
.ar-faq details[open] summary::after { transform: rotate(45deg); }
.site .ar-faq details p { padding: 0 0 var(--s4); }

.ar-more ul { list-style: none; padding: 0; }

@media (max-width: 860px) {
	.ar-grid { grid-template-columns: 1fr; gap: var(--s5); }
	.ar-toc { position: static; }
}