/* ==========================================================================
   Edysor — single post
   Depends on landing.css for the tokens and on blog.css for .bd-grid and the
   card, which the related-posts row reuses.
   ========================================================================== */

/* --------------------------------------------------------- reading progress */

.bd-readbar {
	position: fixed;
	inset: 0 0 auto;
	z-index: 150;
	height: 3px;
	background: transparent;
	pointer-events: none;
}
.bd-readbar span {
	display: block;
	width: 0;
	height: 100%;
	background: linear-gradient(90deg, var(--bd-primary), var(--bd-primary-400));
	transition: width .1s linear;
}


/* ---------------------------------------------------------------- masthead */

/* Shorter than the blog masthead: the cover image lands directly underneath
   and does the visual work a taller band would otherwise have to do. */
.bd-post__masthead {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-top: 190px;
	padding-bottom: 170px;
	text-align: center;
	background-color: #0c0620;
	background-image:
		radial-gradient(120% 90% at 50% 108%,
			rgba(184, 158, 255, .72) 0%,
			rgba(129, 104, 250, .5) 30%,
			rgba( 86,  56, 214, .26) 54%,
			rgba( 12,   6,  32,   0) 78%),
		linear-gradient(180deg, #120a30 0%, #1d1152 34%, #2c1a86 70%, #3d24ac 100%);
}

.bd-post__masthead-inner { position: relative; z-index: 2; }

.bd-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-bottom: 26px;
	color: rgba(255, 255, 255, .55);
	font-size: 14px;
	font-weight: 500;
}
.bd-crumbs a { color: rgba(255, 255, 255, .8); transition: color .18s var(--bd-ease); }
.bd-crumbs a:hover { color: #fff; }

.bd-post__title {
	max-width: 20ch;
	margin: 0 auto;
	color: #fff;
	font-size: clamp(32px, 4.2vw, 56px);
	line-height: 1.1;
	letter-spacing: -.03em;
	text-wrap: balance;
}

.bd-post__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 26px;
	color: rgba(255, 255, 255, .68);
	font-size: 14.5px;
	font-weight: 500;
}
.bd-post__author { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 600; }

.bd-avatar {
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--bd-primary-400), var(--bd-primary));
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .02em;
}
.bd-avatar--lg { width: 62px; height: 62px; font-size: 20px; }


/* ------------------------------------------------------------------- cover */

/* Lifted into the curve so the image reads as one object with the masthead
   rather than a picture that happens to sit under it. */
.bd-post__cover {
	position: relative;
	z-index: 4;
	margin: -110px 0 0;
	overflow: hidden;
	border-radius: 22px;
	box-shadow: var(--bd-shadow-card);
	line-height: 0;
}
.bd-post__cover img {
	display: block;
	width: 100%;
	max-height: 620px;
	object-fit: contain;
	background: #f5f4fb;
}

/* ------------------------------------------------------------------ layout */

.bd-post__layout {
	display: grid;
	grid-template-columns: 260px minmax(0, 760px) 300px;
	justify-content: center;
	gap: 64px;
	padding-top: 84px;
	padding-bottom: 90px;
}
.bd-single--no-toc .bd-post__layout { grid-template-columns: minmax(0, 760px) 300px; }

/* 90px clears the stuck header, which is 45px of logo plus its padding. */
.bd-toc,
.bd-rail {
	position: sticky;
	top: 104px;
}

.bd-toc__head {
	margin-bottom: 14px;
	color: var(--bd-muted);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.bd-toc ul {
	border-left: 2px solid var(--bd-line);
	max-height: calc(100vh - 200px);
	overflow-y: auto;
	scrollbar-width: thin;
}
.bd-toc li a {
	display: block;
	padding: 8px 0 8px 16px;
	margin-left: -2px;
	border-left: 2px solid transparent;
	color: var(--bd-muted);
	font-size: 14.5px;
	line-height: 1.45;
	transition: color .18s var(--bd-ease), border-color .18s var(--bd-ease);
}
.bd-toc li a:hover { color: var(--bd-ink); }
.bd-toc li a.is-current {
	border-left-color: var(--bd-primary);
	color: var(--bd-primary);
	font-weight: 600;
}

/* The plugin writes its own table of contents into the post body. With the
   sidebar showing, that is the same list twice — so it is hidden here, and
   only here. On narrow screens the sidebar is gone and the inline one is the
   only outline there is, so it comes back. */
@media (min-width: 1100px) {
	.bd-single:not(.bd-single--no-toc) .abp-toc { display: none; }
}

.bd-rail { display: grid; gap: 28px; }

.bd-share__row { display: flex; gap: 8px; }
.bd-share__btn {
	display: inline-grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding: 0 14px;
	border: 1px solid var(--bd-line);
	border-radius: 11px;
	background: #fff;
	color: var(--bd-body);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: color .18s var(--bd-ease), border-color .18s var(--bd-ease), background-color .18s var(--bd-ease);
}
.bd-share__btn:hover { border-color: var(--bd-primary-200); color: var(--bd-primary); }
.bd-share__btn.is-done { border-color: transparent; background: var(--bd-primary); color: #fff; }

.bd-rail__cta {
	padding: 26px;
	border: 1px solid var(--bd-line);
	border-radius: 18px;
	background: linear-gradient(180deg, #fbfaff, #f4f1ff);
}
.bd-rail__eyebrow {
	color: var(--bd-primary);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}
.bd-rail__text { margin: 12px 0 20px; font-size: 14.5px; line-height: 1.7; }
.bd-rail__cta .bd-btn { width: 100%; height: 44px; }


/* ------------------------------------------------------------------- prose */

.bd-prose { color: var(--bd-body); font-size: 17.5px; line-height: 1.78; }

.bd-prose > * + * { margin-top: 1.25em; }

.bd-prose h2 {
	margin-top: 2em;
	font-size: clamp(25px, 2.3vw, 32px);
	line-height: 1.25;
	/* So an anchored heading is not hidden behind the fixed header. */
	scroll-margin-top: 110px;
}
.bd-prose h3 { margin-top: 1.7em; font-size: 21px; line-height: 1.35; scroll-margin-top: 110px; }
.bd-prose h4 { margin-top: 1.5em; font-size: 18px; }

.bd-prose a {
	color: var(--bd-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--bd-primary-200);
	transition: text-decoration-color .18s var(--bd-ease);
}
.bd-prose a:hover { text-decoration-color: var(--bd-primary); }

.bd-prose strong { color: var(--bd-ink); font-weight: 700; }

.bd-prose ul, .bd-prose ol { padding-left: 1.35em; }
.bd-prose ul { list-style: disc; }
.bd-prose ol { list-style: decimal; }
.bd-prose li { margin-top: .5em; padding-left: .25em; }
.bd-prose li::marker { color: var(--bd-primary-200); }

.bd-prose blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 26px;
	border-left: 3px solid var(--bd-primary);
	color: var(--bd-ink);
	font-size: 19px;
	font-style: italic;
	line-height: 1.65;
}

.bd-prose img { height: auto; border-radius: 14px; }
.bd-prose figure { margin: 2em 0; }
.bd-prose figcaption {
	margin-top: 12px;
	color: var(--bd-muted);
	font-size: 14px;
	text-align: center;
}

.bd-prose code {
	padding: 3px 7px;
	border-radius: 6px;
	background: var(--bd-primary-050);
	color: var(--bd-primary-600);
	font-size: .88em;
}
.bd-prose pre {
	overflow-x: auto;
	padding: 22px 24px;
	border-radius: 14px;
	background: #140f36;
	color: #e8e4ff;
	font-size: 14.5px;
	line-height: 1.65;
}
.bd-prose pre code { padding: 0; background: none; color: inherit; }

/* Tables come out of the generator often and can be wider than the column,
   so the wrapper scrolls rather than the page. The table itself stays a real
   table — see blogdots_prepare_content() for why display:block is not the fix. */
.bd-tablewrap {
	overflow-x: auto;
	margin: 1.8em 0;
	border: 1px solid var(--bd-line);
	border-radius: 14px;
}
.bd-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15.5px;
}
.bd-prose th, .bd-prose td {
	padding: 13px 16px;
	border-bottom: 1px solid var(--bd-line);
	text-align: left;
	vertical-align: top;
}
.bd-prose th {
	background: #faf9ff;
	color: var(--bd-ink);
	font-weight: 700;
	white-space: nowrap;
}
.bd-prose tbody tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------- generated content blocks

   The plugin ships its own frontend.css for these classes, written to look
   acceptable on any theme. Here it is our theme, so they are pulled onto the
   site's tokens: same radii, same accent, same type scale as everything else.
   The plugin sheet loads first, so equal specificity is enough to win. */

.bd-prose .abp-toc {
	padding: 22px 26px;
	border-left: 3px solid var(--bd-primary);
	border-radius: 14px;
	background: #faf9ff;
}
.bd-prose .abp-toc > p { margin-bottom: 10px; }
.bd-prose .abp-toc ul { padding-left: 20px; }

.bd-prose .abp-table {
	margin: 0;
	border: 0;
}
.bd-prose .abp-table th,
.bd-prose .abp-table td {
	border: 0;
	border-bottom: 1px solid var(--bd-line);
	padding: 14px 18px;
}
.bd-prose .abp-table th { background: #faf9ff; }
.bd-prose .abp-table tr:nth-child(even) td { background: transparent; }

/* Stat callouts sit in a row that wraps, rather than inline in a paragraph. */
.bd-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 2em 0;
}
.bd-prose .abp-stat-callout {
	flex: 1 1 150px;
	margin: 0;
	padding: 18px 20px;
	border-left: 3px solid var(--bd-primary);
	border-radius: 14px;
	background: #faf9ff;
}
.bd-prose .abp-stat-callout__value {
	color: var(--bd-primary);
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.1;
}
.bd-prose .abp-stat-callout__label {
	margin-top: 4px;
	color: var(--bd-muted);
	font-size: 13px;
	line-height: 1.45;
}

.bd-prose .abp-disclaimer {
	padding: 18px 22px;
	border-left: 3px solid #dba617;
	border-radius: 14px;
	background: #fdf9ee;
	font-size: 15px;
	line-height: 1.7;
}
.bd-prose .abp-disclaimer strong { display: block; margin-bottom: 4px; }

.bd-prose .abp-cta {
	padding: 34px;
	border-radius: 20px;
	background: linear-gradient(135deg, #4a3ed8, #2c1a86);
}
.bd-prose .abp-cta h3 { font-size: 23px; letter-spacing: -.02em; }
.bd-prose .abp-cta p { margin-bottom: 22px; }
.bd-prose .abp-cta__button {
	padding: 13px 30px;
	border-radius: 10px;
	color: var(--bd-primary-600);
	text-decoration: none;
}

.bd-prose .abp-faq details {
	margin-bottom: 12px;
	padding: 18px 22px;
	border: 1px solid var(--bd-line);
	border-radius: 14px;
	transition: border-color .2s var(--bd-ease);
}
.bd-prose .abp-faq details[open] { border-color: var(--bd-primary-200); }
.bd-prose .abp-faq summary {
	color: var(--bd-ink);
	font-size: 16.5px;
	list-style: none;
}
.bd-prose .abp-faq summary::-webkit-details-marker { display: none; }
/* A rotating caret, drawn in CSS so the accordion needs no icon markup. */
.bd-prose .abp-faq summary::after {
	content: "";
	float: right;
	width: 9px;
	height: 9px;
	margin: 6px 4px 0 12px;
	border-right: 2px solid var(--bd-primary);
	border-bottom: 2px solid var(--bd-primary);
	transform: rotate(45deg);
	transition: transform .22s var(--bd-ease);
}
.bd-prose .abp-faq details[open] summary::after { transform: rotate(-135deg); }

.bd-figure { margin: 2.4em 0; }

/* Photographs get no frame — the diagrams below need one because they are
   drawn on white and would otherwise float loose on a white page. */
.bd-figure--photo img {
	display: block;
	width: 100%;
	border-radius: 18px;
	box-shadow: 0 26px 54px -30px rgba(18, 16, 58, .55);
}

.bd-figure svg {
	display: block;
	width: 100%;
	height: auto;
	padding: 26px;
	border: 1px solid var(--bd-line);
	border-radius: 18px;
	background: #fff;
}

/* Key takeaways — the one block with no plugin class, because the generator
   has no equivalent of it. */
.bd-takeaways {
	padding: 30px 34px;
	border: 1px solid var(--bd-primary-200);
	border-radius: 20px;
	background: linear-gradient(180deg, #fbfaff, #f4f1ff);
}
.bd-takeaways__head {
	margin-bottom: 14px;
	color: var(--bd-primary);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}
/* .bd-prose ul sets a disc and outranks a bare class selector, so these
   custom lists have to be qualified to drop the marker. */
.bd-prose .bd-takeaways ul { padding-left: 0; list-style: none; }
.bd-takeaways li {
	position: relative;
	margin-top: .7em;
	padding-left: 30px;
	font-size: 16px;
	line-height: 1.7;
}
.bd-takeaways li::before {
	content: "";
	position: absolute;
	top: .62em;
	left: 6px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--bd-primary);
}

/* The blocked-vocabulary list. Struck through because the point of the block
   is what the writer never says, not a list of suggestions. */
.bd-never {
	padding: 26px 30px;
	border: 1px dashed var(--bd-line);
	border-radius: 18px;
	background: #fbfaff;
}
.bd-never__head {
	margin-bottom: 16px;
	color: var(--bd-muted);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}
.bd-prose .bd-never__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-left: 0;
	list-style: none;
}
.bd-never__list li {
	margin: 0;
	padding: 6px 13px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--bd-line);
	color: var(--bd-muted);
	font-size: 13.5px;
	text-decoration: line-through;
	text-decoration-color: rgba(91, 79, 232, .5);
}
.bd-never__note { margin-top: 16px; color: var(--bd-muted); font-size: 14px; }

.bd-note { color: var(--bd-muted); font-size: 14px; line-height: 1.65; }

/* Plan cards */
.bd-plancards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: 18px;
	margin: 2.2em 0;
}
.bd-plancard {
	display: flex;
	flex-direction: column;
	padding: 26px 24px;
	border: 1px solid var(--bd-line);
	border-radius: 18px;
	background: #fff;
}
.bd-plancard.is-featured {
	border-color: transparent;
	background: linear-gradient(180deg, #fbfaff, #f1eeff);
	box-shadow: 0 24px 50px -30px rgba(91, 79, 232, .7);
}
.bd-plancard__flag {
	align-self: flex-start;
	margin-bottom: 10px;
	padding: 4px 11px;
	border-radius: 999px;
	background: var(--bd-primary);
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.bd-plancard__name { color: var(--bd-ink); font-size: 17px; font-weight: 700; }
.bd-plancard__price {
	margin-top: 6px;
	color: var(--bd-ink);
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -.02em;
}
.bd-plancard__price span {
	display: block;
	margin-top: 2px;
	color: var(--bd-muted);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
}
.bd-plancard__blurb { margin-top: 12px; font-size: 14.5px; line-height: 1.65; }
.bd-prose .bd-plancard ul { margin-top: 16px; padding-left: 0; list-style: none; }
.bd-plancard li {
	position: relative;
	margin-top: .55em;
	padding-left: 22px;
	font-size: 14.5px;
	line-height: 1.55;
}
.bd-plancard li::before {
	content: "";
	position: absolute;
	top: .45em;
	left: 2px;
	width: 11px;
	height: 6px;
	border-left: 2px solid var(--bd-primary);
	border-bottom: 2px solid var(--bd-primary);
	transform: rotate(-45deg);
}
.bd-plancard__cta {
	margin-top: auto;
	padding-top: 22px;
	color: var(--bd-primary);
	font-size: 14.5px;
	font-weight: 700;
	text-decoration: none;
}
.bd-plancard__cta:hover { text-decoration: underline; }

@media (max-width: 640px) {
	.bd-takeaways, .bd-never { padding: 22px; }
	.bd-figure svg { padding: 14px; }
	.bd-prose .abp-cta { padding: 26px 22px; }
}

.bd-post__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 46px;
	padding-top: 28px;
	border-top: 1px solid var(--bd-line);
}
.bd-post__tags a {
	padding: 7px 14px;
	border: 1px solid var(--bd-line);
	border-radius: 999px;
	color: var(--bd-body);
	font-size: 13.5px;
	font-weight: 600;
}
.bd-post__tags a:hover { border-color: var(--bd-primary-200); color: var(--bd-primary); }


/* --------------------------------------------------------------- authorbox */

.bd-authorbox {
	display: flex;
	gap: 22px;
	max-width: 900px;
	margin: 0 auto;
	padding: 30px 34px;
	border: 1px solid var(--bd-line);
	border-radius: 20px;
	background: #fbfaff;
}
/* The author box is a flex row, so the avatar was being stretched to the row's
   full height and squeezed narrower than its width — a circle came out as a
   tall oval. Flex items need to be told to keep their own size. */
.bd-authorbox .bd-avatar {
	flex: 0 0 auto;
	align-self: flex-start;
}

.bd-authorbox__name { color: var(--bd-ink); font-size: 17px; font-weight: 700; }
.bd-authorbox__name a { transition: color .18s var(--bd-ease); }
.bd-authorbox__name a:hover { color: var(--bd-primary); }
.bd-authorbox__bio { margin-top: 6px; font-size: 15px; line-height: 1.68; }
.bd-authorbox__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 12px;
	color: var(--bd-primary);
	font-size: 14.5px;
	font-weight: 600;
}
.bd-authorbox__link .bd-icon { width: 15px; height: 15px; transition: transform .2s var(--bd-ease); }
.bd-authorbox__link:hover .bd-icon { transform: translateX(3px); }

/* The byline in the masthead is a link now; it must not pick up the underline
   the prose link styles give every other anchor on the page. */
a.bd-post__author { text-decoration: none; transition: opacity .18s var(--bd-ease); }
a.bd-post__author:hover { opacity: .82; }


/* ---------------------------------------------------------------- post nav */

.bd-postnav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	max-width: 900px;
	margin: 40px auto 0;
}
.bd-postnav__link {
	display: block;
	padding: 22px 26px;
	border: 1px solid var(--bd-line);
	border-radius: 16px;
	transition: transform .22s var(--bd-ease), border-color .22s var(--bd-ease), box-shadow .22s var(--bd-ease);
}
.bd-postnav__link:hover {
	transform: translateY(-3px);
	border-color: transparent;
	box-shadow: 0 22px 44px -26px rgba(18, 16, 58, .5);
}
.bd-postnav__link--next { text-align: right; }
.bd-postnav__dir {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--bd-muted);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.bd-postnav__link--next .bd-postnav__dir { justify-content: flex-end; }
/* One arrow glyph, pointed by rotation, so both directions stay identical. */
.bd-postnav__dir .bd-icon { width: 16px; height: 16px; }
.bd-postnav__link:not(.bd-postnav__link--next) .bd-postnav__dir .bd-icon { transform: rotate(180deg); }
.bd-postnav__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin-top: 10px;
	color: var(--bd-ink);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
}


/* ----------------------------------------------------------------- related */

.bd-related { padding: 100px 0 4px; background: #f7f6fd; }
.bd-related .bd-section__head { margin-bottom: 46px; }

/* The related row carries the trailing space when it renders. On a blog with
   too few posts to fill it — and with no previous or next post either — the
   author box was the last thing on the page and sat flush against the CTA
   band. Whichever container ends up last picks up the gap instead.
   When .bd-related is present it is the last child, so this never fires and
   no double gap appears under the tinted band. */
.bd-single > .bd-container:last-child { margin-bottom: 96px; }


/* -------------------------------------------------------------- responsive */

@media (max-width: 1280px) {
	.bd-post__layout,
	.bd-single--no-toc .bd-post__layout { grid-template-columns: 240px minmax(0, 760px); gap: 52px; }
	.bd-single--no-toc .bd-post__layout { grid-template-columns: minmax(0, 760px); }
	/* Sharing and the CTA move under the article rather than disappearing. */
	.bd-post__rail { grid-column: 1 / -1; }
	.bd-rail {
		position: static;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		max-width: 760px;
		margin-left: auto;
	}
}

@media (max-width: 1099px) {
	.bd-post__layout,
	.bd-single--no-toc .bd-post__layout { grid-template-columns: minmax(0, 760px); }
	.bd-post__outline { display: none; }
	.bd-rail { margin-inline: auto; }
}

@media (max-width: 900px) {
	.bd-post__masthead { padding-top: 160px; padding-bottom: 140px; }
	.bd-post__cover { margin-top: -80px; border-radius: 16px; }
	.bd-post__layout { padding-top: 56px; padding-bottom: 62px; gap: 40px; }
	.bd-rail { grid-template-columns: minmax(0, 1fr); }
	.bd-related { padding-top: 70px; }
}

@media (max-width: 640px) {
	.bd-post__masthead { padding-top: 132px; padding-bottom: 118px; }
	.bd-post__cover { margin-top: -62px; }
	.bd-post__cover img { max-height: 300px; }
	.bd-prose { font-size: 16.5px; }
	.bd-authorbox { flex-direction: column; gap: 16px; padding: 24px; }
	.bd-postnav { grid-template-columns: 1fr; }
	.bd-postnav__link--next { text-align: left; }
	.bd-postnav__link--next .bd-postnav__dir { justify-content: flex-start; }
}