/* Single blog posts. See ecl-post.php. */
.ecl-post { --ps-ink: #241449; --ps-text: #3d3550; --ps-muted: #6f687c; --ps-violet: #6849d9; --ps-gold: #ffbd10; --ps-line: rgba(36, 20, 73, .1); background: #fff; color: var(--ps-ink); font-family: Inter, "ECL Inter Fallback", Arial, sans-serif; }
.ecl-post *, .ecl-post *::before, .ecl-post *::after { box-sizing: border-box; }
.ecl-post__inner { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.ecl-post h1, .ecl-post h2, .ecl-post h3, .ecl-post h4 { color: var(--ps-ink); font-family: Inter, "ECL Inter Fallback", Arial, sans-serif; text-transform: none; }

.ecl-post__hero { padding: 132px 0 52px; background: linear-gradient(125deg, #fff 8%, #f3f0ff 57%, #edf6ff); border-bottom: 1px solid var(--ps-line); }
.ecl-post__crumb { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; color: var(--ps-muted); font: 600 13px/1.4 Inter, Arial, sans-serif; }
.ecl-post__crumb a { color: var(--ps-ink); text-decoration: none; }
.ecl-post__crumb a:hover { color: var(--ps-violet); }
.ecl-post__crumb > span:last-child { max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ecl-post__eyebrow { margin: 0 0 14px; font: 800 12px/1.3 Inter, Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.ecl-post__eyebrow a { color: var(--ps-violet); text-decoration: none; }
.ecl-post h1 { max-width: 900px; margin: 0; font-size: clamp(34px, 4.4vw, 58px); font-weight: 800; line-height: 1.07; letter-spacing: -.04em; text-wrap: balance; }
.ecl-post__lead { max-width: 760px; margin: 20px 0 0; color: #5f5870; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; }
.ecl-post__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 26px 0 0; color: var(--ps-muted); font-size: 14px; font-weight: 600; }
.ecl-post__meta span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 14px 3px 0; border-radius: 50%; background: #c5bcd9; vertical-align: middle; }

.ecl-post__layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(40px, 5vw, 72px); align-items: start; padding: 56px 0 84px; }
.ecl-post__body { max-width: 740px; min-width: 0; color: var(--ps-text); font-size: 18px; line-height: 1.75; }
.ecl-post__body > *:first-child { margin-top: 0; }
.ecl-post__body p, .ecl-post__body li { color: var(--ps-text); }
.ecl-post__body p { margin: 0 0 22px; }
.ecl-post__body h2 { margin: 52px 0 16px; font-size: clamp(26px, 2.4vw, 32px); font-weight: 800; line-height: 1.2; letter-spacing: -.03em; scroll-margin-top: 120px; }
.ecl-post__body h3 { margin: 34px 0 12px; font-size: 21px; font-weight: 800; line-height: 1.3; letter-spacing: -.015em; scroll-margin-top: 120px; }
.ecl-post__body a { color: #5236c4; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ecl-post__body a:hover { color: var(--ps-ink); }
.ecl-post__body ul, .ecl-post__body ol { margin: 0 0 24px; padding-left: 1.3em; }
.ecl-post__body li { margin: 0 0 10px; padding-left: 4px; }
.ecl-post__body li::marker { color: var(--ps-violet); font-weight: 700; }
.ecl-post__body strong { color: var(--ps-ink); }
.ecl-post__body blockquote { margin: 30px 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--ps-gold); color: var(--ps-ink); font-size: 19px; }
.ecl-post__body .ecl-callout { margin: 0 0 34px; padding: 24px 26px; border: 1px solid rgba(104, 73, 217, .18); border-radius: 18px; background: #f8f6ff; font-size: 17px; }
.ecl-post__body .ecl-callout > *:last-child { margin-bottom: 0; }
.ecl-post__body .ecl-callout-title { margin: 0 0 10px; color: var(--ps-violet); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.ecl-post__body figure.ecl-table { margin: 28px 0 32px; overflow-x: auto; border: 1px solid var(--ps-line); border-radius: 16px; }
.ecl-post__body table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15.5px; line-height: 1.55; }
.ecl-post__body th, .ecl-post__body td { padding: 13px 16px; border-bottom: 1px solid var(--ps-line); text-align: left; vertical-align: top; }
.ecl-post__body thead th { background: #f6f3ff; color: var(--ps-ink); font-size: 14px; font-weight: 800; }
.ecl-post__body tbody tr:last-child > * { border-bottom: 0; }
.ecl-post__body tbody th { color: var(--ps-ink); font-weight: 700; }
.ecl-post__body .ecl-sources { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--ps-line); color: var(--ps-muted); font-size: 15px; }

.ecl-post__aside { position: sticky; top: 120px; }
.ecl-post__help { padding: 28px 26px; border-radius: 22px; background: var(--ps-ink); color: #ddd6f2; box-shadow: 0 24px 54px rgba(36, 20, 73, .18); font-size: 15px; line-height: 1.6; }
.ecl-post__help p { margin: 0 0 18px; color: #ddd6f2; }
.ecl-post__help .ecl-post__help-eyebrow { color: #cfc3ff; font-size: 12px !important; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px !important; }
.ecl-post__help .ecl-post__help-title { color: #fff; font-size: 21px; font-weight: 800; line-height: 1.25; letter-spacing: -.02em; }
.ecl-post a.ecl-post__btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--ps-gold); color: var(--ps-ink); font-weight: 800; font-size: 15px; text-decoration: none; }
.ecl-post a.ecl-post__btn:hover { background: #ffcd45; color: var(--ps-ink); }
.ecl-post__help .ecl-post__help-sub { margin: 24px 0 8px !important; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .14); color: #cfc3ff; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ecl-post__help ul { margin: 0; padding: 0; list-style: none; }
.ecl-post__help li { margin: 0; }
.ecl-post__help li a { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; color: #fff; font-weight: 700; text-decoration: none; }
.ecl-post__help li a:hover { color: var(--ps-gold); }
.ecl-post a:focus-visible { outline: 3px solid var(--ps-gold); outline-offset: 3px; }

@media (max-width: 1000px) {
	.ecl-post__layout { grid-template-columns: 1fr; padding-bottom: 64px; }
	.ecl-post__aside { position: static; max-width: 740px; }
}
@media (max-width: 767px) {
	.ecl-post__inner { width: calc(100% - 32px); }
	.ecl-post__hero { padding: 108px 0 40px; }
	.ecl-post__body { font-size: 17px; }
	.ecl-post__body h2 { margin-top: 42px; }
	.ecl-post__crumb > span:last-child { max-width: 100%; }
	.ecl-post__meta { flex-direction: column; gap: 4px; }
	.ecl-post__meta span + span::before { display: none; }
}
