/* Blog (b1 a) and article (b2 b). Sizes measured off the mock-ups, 1536 px wide. The contact band comes from ds.css. */

/* --- blog list ------------------------------------------------------------------------------------------------------------------ */
.ds-blog { background: #F3F5F8; }
.ds-blog > .ds-wrap { padding: calc(18 * var(--u)) calc(51 * var(--u)) calc(70 * var(--u)) calc(52 * var(--u)); }
.ds-blog .ds-crumbs { font-size: var(--t-s); }
.ds-blog .ds-crumbs a { color: #4B5563; text-decoration: none; }
.ds-blog__h { margin-top: calc(10 * var(--u)); font: 700 var(--t-h1)/1.15 var(--f-head); color: var(--c-ink); letter-spacing: -.01em; }
.ds-blog__lead { margin-top: calc(6 * var(--u)); font-size: var(--t-lead); color: #4B5563; }
.ds-blog__chips { display: flex; flex-wrap: wrap; gap: calc(13 * var(--u)); margin-top: calc(16 * var(--u)); }
.ds-bchip { display: grid; place-items: center; min-height: max(42px, calc(44 * var(--u))); padding: 0 calc(22 * var(--u)); border: 1px solid #CBD2DA; border-radius: 6px; background: var(--c-white);
	color: var(--c-ink); text-decoration: none; font: 400 var(--t-s)/1.2 var(--f-text); }
.ds-bchip:hover { border-color: var(--c-blue); color: var(--c-blue); }
.ds-bchip.is-on { border-color: var(--c-yellow); background: var(--c-yellow); color: var(--c-ink); font-weight: 500; }
.ds-blog__top { display: grid; grid-template-columns: calc(788 * var(--u)) 1fr; gap: calc(15 * var(--u)); margin-top: calc(16 * var(--u)); }
.ds-blog__side { display: grid; gap: calc(14 * var(--u)); }
.ds-blog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(14 * var(--u)); margin-top: calc(15 * var(--u)); }
.ds-ptile { display: flex; flex-direction: column; border: 1px solid #E3E6EA; border-radius: 6px; background: var(--c-white); overflow: hidden; }
.ds-ptile__img { display: block; overflow: hidden; background: #EEF2F7; }
.ds-ptile__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.ds-ptile:hover .ds-ptile__img img { transform: scale(1.03); }
.ds-ptile__text { padding: calc(14 * var(--u)) calc(20 * var(--u)) calc(18 * var(--u)); }
.ds-ptile h2 { font: 700 var(--t-m)/1.35 var(--f-head); color: var(--c-ink); }
.ds-ptile h2 a { color: inherit; text-decoration: none; }
.ds-ptile h2 a:hover { color: var(--c-blue); }
.ds-ptile__meta { margin-top: calc(8 * var(--u)); font-size: var(--t-xs); color: var(--c-muted); }
.ds-ptile__meta span { margin: 0 calc(14 * var(--u)); color: #CBD2DA; }
.ds-ptile--big .ds-ptile__img { height: calc(277 * var(--u)); min-height: 180px; }
.ds-ptile--big h2 { font-size: var(--t-h5); }
.ds-ptile--big .ds-ptile__text { padding: calc(16 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u)); }
.ds-ptile--side { flex-direction: row; align-items: center; padding: calc(10 * var(--u)); }
.ds-ptile--side .ds-ptile__img { flex: none; width: calc(253 * var(--u)); min-width: 140px; aspect-ratio: 253 / 157; border-radius: 3px; }
.ds-ptile--side .ds-ptile__text { padding: 0 calc(14 * var(--u)) 0 calc(24 * var(--u)); }
.ds-ptile--side h2 { font-size: var(--t-m); }
.ds-ptile--grid .ds-ptile__img { margin: calc(6 * var(--u)) calc(9 * var(--u)) 0; height: calc(168 * var(--u)); min-height: 120px; border-radius: 3px; }
.ds-blog__none { margin-top: 30px; font-size: var(--t-m); }

/* --- article: ink header ------------------------------------------------------------------------------------------------------- */
.ds-ahead { background: var(--c-ink); color: var(--c-white); }
.ds-ahead__in { display: grid; grid-template-columns: 1fr calc(598 * var(--u)); column-gap: calc(30 * var(--u)); align-items: center; padding-top: calc(46 * var(--u)); padding-bottom: calc(30 * var(--u));
	padding-left: calc(56 * var(--u)); padding-right: calc(54 * var(--u)); }
.ds-ahead .ds-crumbs { font-size: var(--t-s); color: #E5E7EB; }
.ds-ahead .ds-crumbs a { color: #E5E7EB; text-decoration: none; }
.ds-ahead h1 { margin-top: calc(30 * var(--u)); font: 700 var(--t-h1)/1.15 var(--f-head); color: var(--c-white); letter-spacing: -.025em; }
.ds-ahead__meta { margin-top: calc(30 * var(--u)); font-size: var(--t-l); color: #E5E7EB; }
.ds-ahead__meta span { margin: 0 calc(8 * var(--u)); }
.ds-ahead__cover { padding: calc(14 * var(--u)); border: 2.5px dashed var(--c-yellow); border-radius: 10px; }
.ds-ahead__cover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 8.2; object-fit: cover; border-radius: 4px; }

/* --- article: reading column and the aside ------------------------------------------------------------------------------------- */
.ds-abody { display: grid; grid-template-columns: 1fr calc(438 * var(--u)); column-gap: calc(86 * var(--u)); align-items: start; padding-top: calc(16 * var(--u)); padding-bottom: calc(80 * var(--u));
	padding-left: calc(95 * var(--u)); padding-right: calc(61 * var(--u)); }
.ds-prose { max-width: calc(860 * var(--u)); padding-top: calc(48 * var(--u)); font-size: var(--t-l); line-height: 1.75; color: #374151; }
.ds-prose > p:first-child { font-size: var(--t-lead); line-height: 1.75; color: #4B5563; }
.ds-prose p { margin: 0 0 calc(22 * var(--u)); }
.ds-prose h2 { position: relative; margin: calc(64 * var(--u)) 0 calc(18 * var(--u)); padding-top: calc(32 * var(--u)); scroll-margin-top: 24px;
	font: 700 var(--t-h3)/1.25 var(--f-head); color: var(--c-ink); letter-spacing: -.01em; }
.ds-prose h2::before { content: ''; position: absolute; left: 0; top: 0; width: calc(67 * var(--u)); min-width: 44px; height: 4px; border-radius: 2px; background: var(--c-yellow); }
.ds-prose h3 { margin: calc(32 * var(--u)) 0 calc(10 * var(--u)); font: 700 var(--t-h5)/1.3 var(--f-head); color: var(--c-ink); }
.ds-prose ul, .ds-prose ol { margin: 0 0 calc(22 * var(--u)); padding-left: 1.3em; list-style: disc; }
.ds-prose ol { list-style: decimal; }
.ds-prose li + li { margin-top: 6px; }
.ds-prose a { color: var(--c-blue); text-underline-offset: 3px; }
.ds-prose strong { color: var(--c-ink); }
.ds-aside { position: sticky; top: 24px; display: grid; gap: calc(14 * var(--u)); padding-top: calc(16 * var(--u)); }
.ds-toc { padding: calc(20 * var(--u)) calc(24 * var(--u)) calc(30 * var(--u)); border: 1px solid #E3E6EA; border-radius: 8px; background: var(--c-white); }
.ds-toc h2 { font: 700 var(--t-h5)/1.3 var(--f-head); color: var(--c-ink); }
.ds-toc ol { margin: calc(14 * var(--u)) 0 0; padding: 0; list-style: none; display: grid; gap: calc(6 * var(--u)); }
.ds-toc a { position: relative; display: block; padding: calc(6 * var(--u)) 0 calc(6 * var(--u)) calc(28 * var(--u)); color: #4B5563; text-decoration: none; font-size: var(--t-m); line-height: 1.35; }
.ds-toc a:hover { color: var(--c-blue); }
.ds-toc a.is-on { color: var(--c-blue); }
.ds-toc a.is-on::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; border-radius: 2px; background: var(--c-yellow); }
.ds-acard { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: calc(24 * var(--u)) calc(28 * var(--u)); border-radius: 8px; background: var(--c-ink); color: var(--c-white); text-decoration: none; }
.ds-acard b { display: block; font: 700 var(--t-h4)/1.25 var(--f-head); }
.ds-acard > span > span { display: block; margin-top: calc(6 * var(--u)); font-size: var(--t-l); color: #E5E7EB; }
.ds-acard .ds-ic { flex: none; color: var(--c-yellow); }
.ds-acard:hover b { text-decoration: underline; text-decoration-color: var(--c-yellow); }
.ds-amore { padding: calc(60 * var(--u)) 0 calc(80 * var(--u)); background: #F3F5F8; }
.ds-amore .ds-wrap { padding-left: calc(52 * var(--u)); padding-right: calc(51 * var(--u)); }
.ds-amore .ds-blog__grid { margin-top: calc(24 * var(--u)); }

/* --- narrow screens and phones -------------------------------------------------------------------------------------------------- */
@media (max-width: 1180px) {
	.ds-blog__top { grid-template-columns: 1fr; }
	.ds-blog__side { grid-template-columns: 1fr 1fr; }
	.ds-abody { grid-template-columns: 1fr calc(380 * var(--u) + 60px); column-gap: 40px; }
}
@media (max-width: 960px) {
	.ds-blog > .ds-wrap, .ds-amore .ds-wrap { padding-left: var(--gutter); padding-right: var(--gutter); }
	.ds-blog > .ds-wrap { padding-top: 16px; padding-bottom: 36px; }
	.ds-blog__side, .ds-blog__grid { grid-template-columns: 1fr; }
	.ds-ptile--side { flex-direction: column; align-items: stretch; padding: 0; }
	.ds-ptile--side .ds-ptile__img, .ds-ptile--grid .ds-ptile__img { width: auto; margin: 0; height: auto; aspect-ratio: 16 / 7; border-radius: 0; }
	.ds-ptile--side .ds-ptile__text { padding: 14px 18px 18px; }
	.ds-ptile--big .ds-ptile__img { height: auto; min-height: 0; aspect-ratio: 16 / 7; }
	.ds-ahead__in { grid-template-columns: 1fr; row-gap: 22px; padding: 22px var(--gutter) 26px; }
	.ds-ahead h1 { margin-top: 14px; }
	.ds-ahead__meta { margin-top: 14px; }
	.ds-ahead__cover { padding: 8px; }
	.ds-abody { grid-template-columns: 1fr; padding: 8px var(--gutter) 40px; }
	.ds-prose { max-width: none; padding-top: 22px; }
	.ds-prose h2 { margin-top: 40px; padding-top: 22px; }
	.ds-aside { position: static; margin-top: 10px; }
	.ds-toc { display: none; }
}