.db-article { display: flex; flex-direction: column; gap: 32px; padding-block: 20px 40px; }
.db-article__toc { order: -1; }
.db-article__toc-inner { display: flex; flex-direction: column; gap: 24px; } .db-article__toc .db-article__toc-title {
font-family: var(--font-display); font-size: 14px; line-height: 20px;
text-transform: uppercase; color: var(--ink);
}
.db-article__toc ol { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.db-article__toc li a {
font-family: var(--font-body); font-weight: 300; font-size: 14px; line-height: 20px;
color: rgba(37, 32, 30, 0.6); transition: color .2s ease;
}
.db-article__toc li.is-active a,
.db-article__toc li a:hover { color: var(--ink); } .db-article__toc::after { content: ""; display: block; margin-top: 32px; height: 1px; background: var(--line); } .db-article__toc:not(.is-ready) { display: none; }
.db-article__body { display: flex; flex-direction: column; gap: 20px; min-width: 0; } .db-post__inner > .db-article__body:not(:has(.db-article)) { max-width: 920px; padding-block: 20px 40px; } body.post-type-post .is-root-container:not(:has(> .db-article)) {
display: flex; flex-direction: column; gap: 20px;
max-width: calc(920px + var(--wp--style--root--padding-left) + var(--wp--style--root--padding-right));
margin-left: max(0px, calc((100% - var(--wp--style--root--padding-left) - var(--wp--style--root--padding-right) - var(--wp--style--global--content-size, 1360px)) / 2));
} body.post-type-post .is-root-container:not(:has(> .db-article)) > * { width: 100%; }
.db-article__lead { font-size: 16px; line-height: 28px; color: var(--muted); }
.db-article__body h2,
body.post-type-post .is-root-container h2 {
margin-top: 20px; margin-bottom: -12px; font-size: 1.125rem; line-height: 28px; color: var(--ink);
scroll-margin-top: 120px; }
.db-article__body > *:first-child,
body.post-type-post .is-root-container > *:first-child { margin-top: 0; }
.db-article__body h3,
body.post-type-post .is-root-container h3 {
margin-bottom: -12px;
font-family: var(--font-display); font-size: 14px; line-height: 20px;
text-transform: uppercase; color: var(--ink);
}
.db-article__body p,
body.post-type-post .is-root-container p { font-size: 16px; line-height: 28px; color: var(--muted); } .db-article__note { font-weight: 500; }
.db-article__body ul,
body.post-type-post .is-root-container ul { display: flex; flex-direction: column; gap: 2px; padding-left: 0; list-style: none; }
.db-article__body ul li,
body.post-type-post .is-root-container ul li { position: relative; padding-left: 14px; font-size: 16px; line-height: 28px; color: var(--muted); }
.db-article__body ul li::before,
body.post-type-post .is-root-container ul li::before {
content: ""; position: absolute; left: 0; top: 12px;
width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
}
.db-article__body figure,
body.post-type-post .is-root-container figure { margin: 0; }
.db-article__body img,
body.post-type-post .is-root-container img { width: 100%; height: 300px; object-fit: cover; } .db-article__body .db-article__pair.has-nested-images { --wp--style--unstable-gallery-gap: 10px; gap: 10px; }
.db-article__body .db-article__pair.has-nested-images figure.wp-block-image { height: 160px; }
@media (min-width: 861px) {
.db-article { flex-direction: row; align-items: flex-start; gap: 60px; padding-block: 0 120px; } .db-article__toc { order: 2; flex: 0 0 clamp(260px, 28%, 380px); min-width: 0; align-self: stretch; } .db-article > .wp-block-html { order: 2; flex: 0 0 clamp(260px, 28%, 380px); min-width: 0; }
.db-article__toc::after { display: none; }
.db-article__toc-inner { position: sticky; top: 120px; }
.db-article__body { flex: 1 1 auto; gap: 24px; } .db-post__inner > .db-article__body:not(:has(.db-article)) { padding-block: 0 120px; }
body.post-type-post .is-root-container:not(:has(> .db-article)) { gap: 24px; }
.db-article__body h2,
body.post-type-post .is-root-container h2 { margin-top: 36px; font-size: 1.5rem; line-height: 32px; }
.db-article__body h3,
body.post-type-post .is-root-container h3 { font-size: 16px; line-height: 24px; }
.db-article__body ul,
body.post-type-post .is-root-container ul { gap: 6px; }
.db-article__body img,
body.post-type-post .is-root-container img { height: 420px; }
.db-article__body .db-article__pair.has-nested-images { --wp--style--unstable-gallery-gap: 16px; gap: 16px; }
.db-article__body .db-article__pair.has-nested-images figure.wp-block-image { height: 420px; }
}