/* Single article template (theme 0.9.9). Three columns from 1200px; stacked below in DOM order
   (author, dates and takeaways, then contents, then the article). Settled state at first paint:
   the contents list below 1200px is drawn closed under html.dc-js before article.js marks it ready,
   and the current-section highlight only changes colour, so nothing moves after paint. */

.dc-main--article .dc-article__header{padding-bottom:28px}
.dc-main--article .dc-post-header__title{max-width:24ch;font-size:clamp(32px,4vw,58px);line-height:1.1;margin:0}
.dc-main--article .dc-article__header .dc-eyebrow{margin:0 0 12px}
.dc-main--article .dc-editorial-art{margin-bottom:0}
.dc-article__wrap{padding-top:clamp(28px,4vw,48px)}
.dc-article__grid{display:grid;grid-template-columns:minmax(0,1fr);row-gap:24px;max-width:calc(720px + 2 * var(--margin))}
.dc-article__grid>*{min-width:0}

/* Centre: readable measure and a clear H2 and H3 hierarchy. */
.dc-main--post .dc-prose.dc-article__content{max-width:none;margin:0;font-size:17px;line-height:1.7}
.dc-article__content>*:first-child{margin-top:0}
.dc-article__content h2{font-size:clamp(26px,2.3vw,34px);line-height:1.18;letter-spacing:-.02em;margin-top:56px;margin-bottom:0}
.dc-article__content h3{font-size:clamp(20px,1.6vw,24px);line-height:1.25;margin-top:36px;margin-bottom:0}
.dc-article__content h2+*,.dc-article__content h3+*{margin-top:14px}
.dc-article__content h2[id],.dc-article__content h3[id],.dc-article-bio h3[id]{scroll-margin-top:110px}
.dc-article__content p,.dc-article__content li{max-width:68ch}
.dc-article__content a:not(.dc-btn):not(.wp-block-button__link){color:#1a3fd6;text-decoration:underline;text-underline-offset:3px}
.dc-main--post .dc-article__content .wp-block-table{overflow-x:visible}
.dc-main--post .dc-article__content .wp-block-table table{min-width:0}
.dc-article__cover{margin:0 0 36px}
.dc-article__cover img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover}

/* FAQ section and sources list, drawn on the server from the post. */
.dc-article-faq{margin-top:56px;padding:4px 0 8px;border-top:3px solid var(--dc-blue)}
.dc-article-faq>h2{margin-top:28px}
.dc-article-faq h3{padding-top:22px;margin-top:22px;border-top:var(--rule)}
.dc-article-sources{margin-top:56px;padding-top:4px;border-top:var(--rule)}
.dc-article-sources h2{font-size:clamp(22px,1.8vw,26px)}
.dc-article-sources ol{padding-left:22px;font-size:15px;line-height:1.55}
.dc-article-sources li+li{margin-top:8px}
.dc-article-sources a{overflow-wrap:anywhere}
.dc-article-sources__site{color:var(--dc-graphite);font-size:13px;white-space:nowrap}

/* Author block, dates, reading time, key takeaways. */
.dc-article__meta{display:grid;gap:20px;align-content:start;font-size:14px;line-height:1.5}
.dc-article-author{display:flex;gap:14px;align-items:center}
.dc-article-author__text p{margin:0}
.dc-article-author__label{display:block;font:500 12px/1.4 var(--font-body);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--dc-graphite)}
.dc-article-author__name{font:600 16px/1.35 var(--font-body);color:var(--dc-ink)}
.dc-article-author__name a,.dc-article-author__role a,.dc-article-bio a,.dc-article-nextguide a{color:var(--dc-ink);text-decoration:underline;text-decoration-color:var(--dc-blue);text-underline-offset:3px}
.dc-article-author__role{color:var(--dc-graphite);font-size:13px;margin-top:2px!important}
.dc-article-author__img{display:block;width:64px;height:64px;object-fit:cover;flex:none}
.dc-monogram{position:relative;display:inline-flex;flex:none;align-items:center;justify-content:center;width:64px;height:64px;background:var(--dc-ink);color:var(--dc-paper);overflow:hidden}
.dc-monogram__dc{font:900 25px/1 var(--font-display);letter-spacing:-.04em;transform:translateX(-5px)}
.dc-monogram__slash{position:absolute;right:11px;top:17px;width:5px;height:30px;background:var(--dc-signal-blue);transform:skewX(-18deg)}
.dc-article-facts{display:grid;gap:8px;margin:0;padding:14px 0;border-block:var(--rule)}
.dc-article-facts>div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px}
.dc-article-facts dt{font:500 12px/1.5 var(--font-body);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--dc-graphite)}
.dc-article-facts dd{margin:0;color:var(--dc-ink)}
.dc-article-readtime{margin:0;color:var(--dc-graphite)}
.dc-article-takeaways{padding:18px 20px;background:var(--dc-blue-10);border-left:3px solid var(--dc-blue)}
.dc-article-takeaways__title{margin:0 0 10px;font:600 12px/1.4 var(--font-body);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--dc-ink)}
.dc-article-takeaways ul{list-style:none;margin:0;padding:0 0 0 18px;display:grid;gap:10px}
.dc-article-takeaways li{position:relative;color:var(--dc-ink)}
.dc-article-takeaways li::before{content:'/';content:'/' / '';position:absolute;left:-16px;color:var(--dc-blue);font-weight:300}

/* Contents. */
.dc-article-toc{font-size:14px;line-height:1.45}
.dc-article-toc__title{list-style:none;font:500 12px/1.4 var(--font-body);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--dc-graphite)}
.dc-article-toc__title::-webkit-details-marker{display:none}
.dc-article-toc ol{list-style:none;margin:0;padding:0}
.dc-article-toc>details>ol{display:grid;gap:4px;margin-top:12px;border-left:1px solid var(--dc-stone)}
.dc-article-toc a{display:block;padding:5px 0 5px 14px;margin-left:-1px;border-left:3px solid transparent;color:var(--dc-ink);text-decoration:none}
.dc-article-toc a:hover{color:var(--dc-deep-blue);text-decoration:underline}
.dc-article-toc a.is-current{border-left-color:var(--dc-blue);color:var(--dc-deep-blue);font-weight:500}
.dc-article-toc__sub a{padding-left:28px;font-size:13px;color:var(--dc-graphite)}
.dc-article-toc a:focus-visible,.dc-article-toc__title:focus-visible{outline:var(--focus-ring);outline-offset:2px}

/* Author bio box and the next guide. */
.dc-article-bio{margin-top:64px;padding:28px clamp(20px,3vw,32px);background:var(--dc-white);border-top:3px solid var(--dc-blue);font-size:16px;line-height:1.6}
.dc-article-bio__head{display:flex;gap:16px;align-items:center;margin-bottom:16px}
.dc-article-bio__head .dc-eyebrow{margin:0;color:var(--dc-graphite)}
.dc-article-bio h2{margin:2px 0 0;font-size:clamp(22px,1.8vw,26px);line-height:1.2}
.dc-article-bio h3{margin:24px 0 6px;font-size:18px;line-height:1.3}
.dc-article-bio p{margin:0 0 12px;max-width:68ch}
.dc-article-bio__role{color:var(--dc-graphite);font-size:14px;margin:2px 0 0!important}
.dc-article-nextguide{margin-top:40px;padding-top:20px;border-top:1px solid var(--dc-ink)}
.dc-article-nextguide .dc-eyebrow{margin:0 0 8px;color:var(--dc-graphite)}
.dc-article-nextguide a{display:flex;justify-content:space-between;gap:16px;align-items:baseline;font:800 clamp(20px,2vw,28px)/1.2 var(--font-display);text-decoration:none}
.dc-article-nextguide a span:first-child{text-decoration:underline;text-decoration-color:var(--dc-blue);text-decoration-thickness:2px;text-underline-offset:5px}
.dc-article-nextguide__arrow{color:var(--dc-blue);flex:none}
.dc-article a:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}

/* Below 1200px: stacked, contents as one collapsible row above the article. */
@media (max-width:1199.98px){
	.dc-article__grid{margin-inline:auto}
	.dc-article-toc{border-block:var(--rule)}
	.dc-article-toc__title{display:flex;justify-content:space-between;align-items:center;min-height:56px;margin:0;font:600 16px/1.4 var(--font-body);letter-spacing:0;text-transform:none;color:var(--dc-ink);cursor:pointer}
	.dc-article-toc__title::after{content:'+';content:'+' / '';font:300 24px/1 var(--font-body);color:var(--dc-blue)}
	.dc-article-toc__details[open] .dc-article-toc__title::after{content:'\2212';content:'\2212' / ''}
	.dc-article-toc>details>ol{margin:0 0 18px}
	html.dc-js .dc-article-toc__details:not([data-dc-ready])>:not(summary){display:none}
	html.dc-js .dc-article-toc__details:not([data-dc-ready]) .dc-article-toc__title::after{content:'+';content:'+' / ''}
}
@media (max-width:759.98px){
	.dc-main--post .dc-prose.dc-article__content{font-size:16px}
	.dc-article__content h2{margin-top:44px}
}

/* 1200px and wider: three columns, both side columns sticky below the fixed navigation. */
@media (min-width:1200px){
	.dc-article__grid{max-width:var(--frame-max);grid-template-columns:minmax(200px,240px) minmax(0,720px) minmax(200px,250px);column-gap:clamp(36px,3.6vw,64px);justify-content:space-between;align-items:start}
	.dc-article__meta,.dc-article-toc{position:sticky;top:104px;max-height:calc(100vh - 124px);overflow-y:auto;overscroll-behavior:contain;grid-row:1}
	.dc-article__meta{grid-column:1}
	.dc-article-toc{grid-column:3;padding-right:4px}
	.dc-article__body{grid-column:2;grid-row:1}
	.dc-article-toc__title{pointer-events:none}
}