/* Articles: one column of stories, the linked one highlighted on arrival */
.page-articles .page-head .chips { margin-top: 30px; }
.page-articles .chip { background: transparent; color: var(--text); border-color: var(--line-strong); }
.page-articles .chip:hover { border-color: var(--text); }
.page-articles .chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--canvas); }
.articles { max-width: 860px; border-top: 2px solid var(--ink); }
.article { padding: 36px 0 40px; border-bottom: 1px solid var(--ink-line); scroll-margin-top: 90px; transition: background-color .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.article[hidden] { display: none; }
.article__meta { font-size: .875rem; font-weight: 600; color: var(--ink-2); margin-bottom: 10px; }
.article h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); margin-bottom: 18px; max-width: 24ch; }
.article .body-copy p + p { margin-top: .8em; }
.article__links { margin-top: 20px; }
.article.is-target { background: #FFF8D8; box-shadow: -24px 0 0 #FFF8D8, 24px 0 0 #FFF8D8; }

/* Article blocks: subheading, headings, bullet lists and images a creator places anywhere in the text */
.article__sub { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.45; color: var(--ink-2); margin: -6px 0 22px; max-width: 46ch; }
.article__body { display: flow-root; }
.article__body h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); margin: 1.4em 0 .5em; }
.article__body h4 { font-size: 1.1rem; font-style: normal; font-weight: 700; font-stretch: 100%; margin: 1.2em 0 .4em; }
.article__body ul { margin: .8em 0; padding-left: 1.2em; list-style: square; }
.article__body li + li { margin-top: .35em; }
.article__body li::marker { color: var(--brand); }
.article__fig { margin: 1.4em 0; }
.article__fig img { width: 100%; height: auto; background: var(--paper-2); }
.article__fig figcaption { margin-top: 8px; font-size: .875rem; color: var(--ink-2); }
.article__fig--left { float: left; width: 46%; margin: .3em 28px 1em 0; }
.article__fig--right { float: right; width: 46%; margin: .3em 0 1em 28px; }
@media (max-width: 640px) { .article__fig--left, .article__fig--right { float: none; width: 100%; margin: 1.2em 0; } }