/* ============================================================
   Taskip WP Next — Post Content Typography (.tk-prose)
   ============================================================ */

.tk-prose {
	font-family: var( --wp--preset--font-family--serif );
	font-size: clamp( 1.09375rem, 1.5vw, 1.21875rem );
	line-height: 1.85;
	color: var( --wp--preset--color--body );
}

.tk-prose > * + * {
	margin-top: 1.6875rem;
}

.tk-prose h2 {
	margin-top: clamp( 2.75rem, 5.5vw, 4.25rem );
	margin-bottom: 1.125rem;
	font-family: var( --wp--preset--font-family--sans );
	font-weight: 800;
	font-size: clamp( 1.5rem, 2.6vw, 2.0625rem );
	line-height: 1.18;
	letter-spacing: -0.028em;
	color: var( --wp--preset--color--dark );
	scroll-margin-top: 110px;
}

.tk-prose h3 {
	margin-top: clamp( 1.875rem, 3.5vw, 2.5rem );
	margin-bottom: 0.875rem;
	font-family: var( --wp--preset--font-family--sans );
	font-weight: 700;
	font-size: clamp( 1.1875rem, 1.8vw, 1.4375rem );
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var( --wp--preset--color--dark );
	scroll-margin-top: 110px;
}

.tk-prose h4 {
	margin-top: 1.5rem;
	margin-bottom: 0.75rem;
	font-family: var( --wp--preset--font-family--sans );
	font-weight: 700;
	font-size: 0.9375rem;
	color: var( --wp--preset--color--dark );
}

.tk-prose a {
	color: var( --wp--preset--color--primary-dark );
	text-decoration: none;
	border-bottom: 1px solid var( --wp--preset--color--primary-border );
}

.tk-prose a:hover {
	color: var( --wp--preset--color--dark );
	border-bottom-color: var( --wp--preset--color--dark );
}

.tk-prose ul,
.tk-prose ol {
	padding-left: 1.375rem;
}

.tk-prose li + li {
	margin-top: 0.5rem;
}

.tk-prose blockquote {
	margin: 0;
	padding: 1.25rem 1.5rem;
	border-left: 3px solid var( --wp--preset--color--primary );
	background: var( --wp--preset--color--primary-bg-light );
	border-radius: 0 12px 12px 0;
	font-style: italic;
}

.tk-prose figure {
	margin: 0;
}

.tk-prose figure img {
	max-width: 100%;
	height: auto;
	display: block;
	border: 1px solid var( --wp--preset--color--border );
	border-radius: 14px;
}

.tk-prose figcaption {
	margin-top: 0.625rem;
	font-family: var( --wp--preset--font-family--sans );
	font-size: var( --wp--preset--font-size--sm );
	color: var( --wp--preset--color--subtle );
}

.tk-prose figure.wp-block-table {
	margin: 0;
	border: 1px solid var( --wp--preset--color--border-alt );
	border-radius: 12px;
	overflow-x: auto;
	background: var( --wp--preset--color--white );
}

.tk-prose table {
	width: auto;
	min-width: 100%;
	border-collapse: collapse;
	font-family: var( --wp--preset--font-family--sans );
	table-layout: auto;
}

/* Core's `.wp-block-table thead { border-bottom: 3px solid }` / `tfoot`
   (wp-includes block-library CSS) draws a second, thick border on top of
   the thin one already on each `th` below — same specificity fix as above. */
.tk-prose .wp-block-table thead,
.tk-prose .wp-block-table tfoot {
	border: 0;
}

/* Core's own `.wp-block-table .has-fixed-layout` rule (wp-includes block-library
   CSS) is two classes deep and otherwise beats the rule above — this matches
   it exactly to win on specificity, not load order. */
.tk-prose table.has-fixed-layout {
	table-layout: auto;
}

.tk-prose thead tr {
	background: var( --wp--preset--color--surface-alt );
}

.tk-prose th,
.tk-prose td {
	padding: 0.8125rem 1rem;
	text-align: left;
	border: 0;
}

.tk-prose th {
	font-size: var( --wp--preset--font-size--sm );
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --wp--preset--color--muted );
	border-bottom: 1px solid var( --wp--preset--color--border-alt );
	white-space: nowrap;
}

.tk-prose td {
	font-size: 0.875rem;
	font-weight: 500;
	color: var( --wp--preset--color--muted-dark );
	border-bottom: 1px solid var( --wp--preset--color--surface-alt-2 );
}

.tk-prose tbody tr:last-child td {
	border-bottom: 0;
}

.tk-prose td:first-child {
	font-weight: 700;
	color: var( --wp--preset--color--dark );
	white-space: nowrap;
}

.tk-prose td:last-child {
	font-weight: 600;
	color: var( --wp--preset--color--primary-dark );
	white-space: nowrap;
}

/* Rank Math's own TOC block is kept purely as the data source for
   taskip/toc (see inc/toc.php) — it's not meant to render a second,
   unstyled table of contents inside the article body. */
.tk-prose .wp-block-rank-math-toc-block,
.tk-prose .rank-math-toc-wrap {
	display: none;
}

/* ============================================================
   Legacy "taski-blocks" plugin markup
   ------------------------------------------------------------
   Every migrated post's content still has these blocks' HTML
   baked into post_content (WordPress saves static block markup
   into the post itself), but the plugin that used to enqueue
   their CSS is retired, so the classes below render with zero
   style. Per-instance colors already come from each block's own
   inline `style` attribute (background-color, border-left-color,
   the --taskip-conversion-boost-* custom properties, etc.) — this
   only supplies the missing layout/typography, in this theme's
   design language, so old posts read like new ones.
   ============================================================ */

/* ── taski-blocks/tldr ─────────────────────────────────────── */

.tk-prose .tldr-block {
	margin: 0;
	border: 1px solid var( --wp--preset--color--border );
	border-radius: 16px;
	overflow: hidden;
	background: var( --wp--preset--color--white );
}

.tk-prose .tldr-block__header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	background: var( --wp--preset--color--surface );
	border-bottom: 1px solid var( --wp--preset--color--border );
}

.tk-prose .tldr-block__icon {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 9px;
	background: var( --wp--preset--color--primary-bg );
}

.tk-prose .tldr-block__title {
	font: 800 1rem/1.3 var( --wp--preset--font-family--sans );
	letter-spacing: -0.01em;
	color: var( --wp--preset--color--dark );
}

.tk-prose .tldr-block__content {
	padding: 20px 22px 22px;
}

.tk-prose .tldr-block__content > * + * {
	margin-top: 1.125rem;
}

.tk-prose .tldr-block__content > *:first-child {
	margin-top: 0;
}

/* ── taski-blocks/blog-callout ─────────────────────────────── */
/* Each instance sets its own background-color + border-left-color
   inline; this supplies the border width/radius/typography those
   colors render into. */

.tk-prose .blog-callout {
	margin: 0;
	padding: 20px 22px;
	border-left: 3px solid var( --wp--preset--color--border-alt );
	border-radius: 0 12px 12px 0;
}

.tk-prose .blog-callout__heading {
	display: block;
	margin-bottom: 8px;
	font: 800 0.75rem/1 var( --wp--preset--font-family--sans );
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --wp--preset--color--muted-dark );
}

.tk-prose .blog-callout__content {
	font-family: var( --wp--preset--font-family--serif );
	font-size: 1rem;
	line-height: 1.7;
	color: var( --wp--preset--color--muted-dark );
}

.tk-prose .blog-callout__content > * + * {
	margin-top: 0.875rem;
}

/* ── taski-blocks/highlight-important ──────────────────────── */
/* No sub-elements to hook a label/icon onto in the saved markup,
   so the "!" badge below is generated rather than templated. */

.tk-prose .highlight-important {
	position: relative;
	margin: 0;
	padding: 18px 20px 18px 54px;
	background: var( --wp--preset--color--amber-bg );
	border: 1px solid var( --wp--preset--color--amber-border );
	border-radius: 14px;
	font-family: var( --wp--preset--font-family--serif );
	font-size: 1rem;
	line-height: 1.7;
	color: var( --wp--preset--color--muted-dark );
}

.tk-prose .highlight-important::before {
	content: "!";
	position: absolute;
	top: 18px;
	left: 18px;
	width: 24px;
	height: 24px;
	border-radius: 7px;
	background: var( --wp--preset--color--amber-surface );
	color: var( --wp--preset--color--amber-ink );
	display: flex;
	align-items: center;
	justify-content: center;
	font: 800 12.5px/1 var( --wp--preset--font-family--sans );
}

.tk-prose .highlight-important > * + * {
	margin-top: 0.75rem;
}

.tk-prose .highlight-important > *:first-child {
	margin-top: 0;
}

/* ── taski-blocks/blog-cta ─────────────────────────────────── */
/* Background + button color are set inline per-instance. */

.tk-prose .blog-cta {
	margin: 0;
	padding: clamp( 28px, 4vw, 40px );
	border-radius: 18px;
	text-align: center;
}

.tk-prose .blog-cta__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.tk-prose .blog-cta__logo {
	display: flex;
	align-items: center;
	gap: 8px;
}

.tk-prose .blog-cta__logo-img {
	width: 26px;
	height: 26px;
	display: block;
}

.tk-prose .blog-cta__brand {
	font: 800 0.8125rem/1 var( --wp--preset--font-family--sans );
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --wp--preset--color--muted-dark );
}

.tk-prose .blog-cta__headline {
	margin: 0;
	font: 800 clamp( 1.375rem, 2.4vw, 1.75rem )/1.22 var( --wp--preset--font-family--sans );
	letter-spacing: -0.02em;
	color: var( --wp--preset--color--dark );
}

.tk-prose .blog-cta__description {
	margin: 0;
	max-width: 520px;
	font: 400 1rem/1.65 var( --wp--preset--font-family--serif );
	color: var( --wp--preset--color--muted-dark );
}

.tk-prose .blog-cta__button,
.tk-prose .blog-cta__button:hover {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
	padding: 14px 24px;
	border-radius: 11px;
	font: 700 0.9375rem/1 var( --wp--preset--font-family--sans );
	text-decoration: none;
	border-bottom: 0;
}

.tk-prose .blog-cta__sub-text {
	margin: 0;
	font: 500 0.8125rem/1 var( --wp--preset--font-family--sans );
	color: var( --wp--preset--color--subtle );
}

/* ── taski-blocks/blog-button ──────────────────────────────── */
/* Background + text color are set inline per-instance. */

.tk-prose .blog-btn-wrapper {
	display: flex;
	margin: 0;
}

.tk-prose .blog-btn-wrapper.is-align-center { justify-content: center; }
.tk-prose .blog-btn-wrapper.is-align-left { justify-content: flex-start; }
.tk-prose .blog-btn-wrapper.is-align-right { justify-content: flex-end; }

.tk-prose .blog-btn,
.tk-prose .blog-btn:hover {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 24px;
	border-radius: 11px;
	font: 700 0.9375rem/1 var( --wp--preset--font-family--sans );
	text-decoration: none;
	border-bottom: 0;
}

.tk-prose .blog-btn--small { padding: 10px 18px; font-size: 0.8125rem; }
.tk-prose .blog-btn--large { padding: 17px 28px; font-size: 1rem; }

/* ── taski-blocks/testimonial-card ─────────────────────────── */

.tk-prose .testimonial-card {
	position: relative;
	margin: 0;
	padding: clamp( 28px, 3.5vw, 36px );
	border: 1px solid var( --wp--preset--color--border );
	border-radius: 16px;
	background: var( --wp--preset--color--white );
}

.tk-prose .testimonial-card__quote-mark {
	font: 800 2.75rem/1 Georgia, serif;
	color: var( --wp--preset--color--primary-border );
}

.tk-prose .testimonial-card__quote {
	margin: -0.5rem 0 0;
	font-family: var( --wp--preset--font-family--serif );
	font-size: clamp( 1.03125rem, 1.45vw, 1.15625rem );
	line-height: 1.75;
	font-style: italic;
	color: var( --wp--preset--color--body );
}

.tk-prose .testimonial-card__divider {
	margin: 22px 0;
	border: 0;
	border-top: 1px solid var( --wp--preset--color--border );
}

.tk-prose .testimonial-card__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

.tk-prose .testimonial-card__author {
	display: flex;
	align-items: center;
	gap: 12px;
}

.tk-prose .testimonial-card__avatar-placeholder {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var( --wp--preset--color--dark );
	color: var( --wp--preset--color--primary );
	display: flex;
	align-items: center;
	justify-content: center;
	font: 700 13px/1 var( --wp--preset--font-family--sans );
	overflow: hidden;
}

.tk-prose .testimonial-card__author-info {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.tk-prose .testimonial-card__author-name {
	font: 700 14px/1 var( --wp--preset--font-family--sans );
	color: var( --wp--preset--color--dark );
}

.tk-prose .testimonial-card__author-role {
	font: 500 12.5px/1 var( --wp--preset--font-family--sans );
	color: var( --wp--preset--color--subtle );
}

.tk-prose .testimonial-card__platform a {
	display: flex;
	border-bottom: 0;
}

/* ── taski-blocks/conversion-boost-cta ─────────────────────── */
/* Every visual value ships as a CSS custom property on the block's
   own inline style (--headline-color, --button-color, etc.) — this
   just wires those variables to real properties, with this theme's
   tokens as the fallback for any instance that omits one. */

.tk-prose .taskip-conversion-boost-wrapper {
	margin: 0;
}

.tk-prose .taskip-conversion-boost {
	border-radius: var( --border-radius, 12px );
	box-shadow: var( --box-shadow, none );
	max-width: var( --max-width, 100% );
}

.tk-prose .taskip-conversion-boost-content {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	text-align: var( --text-align, left );
}

.tk-prose .taskip-conversion-boost-headline {
	margin: 0 0 var( --headline-margin-bottom, 16px );
	font-family: var( --wp--preset--font-family--sans );
	font-weight: var( --headline-font-weight, 700 );
	font-size: var( --headline-font-size, 1.75rem );
	line-height: 1.25;
	color: var( --headline-color, var( --wp--preset--color--dark ) );
}

.tk-prose .taskip-conversion-boost-description {
	margin: 0 0 var( --description-margin-bottom, 20px );
	font-family: var( --wp--preset--font-family--serif );
	font-size: var( --description-font-size, 1rem );
	line-height: 1.6;
	color: var( --description-color, var( --wp--preset--color--muted-dark ) );
}

.tk-prose .taskip-conversion-boost-button-wrapper {
	flex: 0 0 auto;
}

.tk-prose .taskip-conversion-boost-button,
.tk-prose .taskip-conversion-boost-button:hover {
	display: inline-flex;
	align-items: center;
	font-family: var( --wp--preset--font-family--sans );
	font-weight: var( --button-font-weight, 600 );
	font-size: var( --button-font-size, 0.9375rem );
	line-height: 1;
	color: var( --button-text-color, #fff );
	background: var( --button-color, var( --wp--preset--color--primary ) );
	border-radius: var( --button-border-radius, 10px );
	padding: var( --button-padding-y, 14px ) var( --button-padding-x, 24px );
	box-shadow: var( --button-box-shadow, none );
	text-decoration: none;
	border-bottom: 0;
}

.tk-prose .taskip-conversion-boost-button:hover {
	background: var( --button-hover-color, var( --wp--preset--color--primary-hover ) );
}

/* ── taski-blocks/invoice-cta-variant-e ────────────────────── */
/* Every color (icon gradients, day labels, timeline-item tints) is
   already inline per-item; this supplies the card shell + the
   timeline's layout (connecting line, icon-and-content rows). */

.tk-prose .taskip-cta-variant-e {
	margin: 0;
}

.tk-prose .taskip-cta {
	padding: clamp( 24px, 3.5vw, 34px );
	border: 1px solid var( --wp--preset--color--border );
	border-radius: 18px;
	background: var( --wp--preset--color--white );
}

.tk-prose .taskip-cta-header h3 {
	margin: 0 0 8px;
	font: 800 clamp( 1.25rem, 2vw, 1.5rem )/1.25 var( --wp--preset--font-family--sans );
	letter-spacing: -0.02em;
	color: var( --wp--preset--color--dark );
}

.tk-prose .taskip-cta-header p {
	margin: 0;
	font: 400 1rem/1.6 var( --wp--preset--font-family--serif );
	color: var( --wp--preset--color--muted-dark );
}

.tk-prose .taskip-timeline {
	position: relative;
	margin: clamp( 24px, 3vw, 32px ) 0;
	padding-left: 28px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.tk-prose .taskip-timeline-line {
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: 11px;
	width: 2px;
}

.tk-prose .taskip-timeline-item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.tk-prose .taskip-timeline-icon {
	position: relative;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin-left: -28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	line-height: 1;
}

.tk-prose .taskip-timeline-content {
	flex: 1 1 auto;
	min-width: 0;
	padding: 10px 14px;
	border-left: 2px solid var( --wp--preset--color--border-alt );
	border-radius: 0 10px 10px 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
}

.tk-prose .taskip-timeline-day {
	font: 700 0.8125rem/1 var( --wp--preset--font-family--sans );
}

.tk-prose .taskip-timeline-text {
	font: 400 0.9375rem/1.5 var( --wp--preset--font-family--serif );
	color: var( --wp--preset--color--muted-dark );
}

.tk-prose .taskip-cta-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.tk-prose .taskip-cta-btn,
.tk-prose .taskip-cta-btn:hover {
	display: inline-flex;
	align-items: center;
	padding: 14px 24px;
	border-radius: 11px;
	background: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--primary-ink );
	font: 700 0.9375rem/1 var( --wp--preset--font-family--sans );
	text-decoration: none;
	border-bottom: 0;
}

.tk-prose .taskip-cta-btn:hover {
	background: var( --wp--preset--color--primary-hover );
}

.tk-prose .taskip-cta-note {
	font: 500 0.8125rem/1 var( --wp--preset--font-family--sans );
	color: var( --wp--preset--color--subtle );
}

/* ── "Key features" 3-column grid ──────────────────────────────
   A plain wp:columns wrapper (not a custom block) used to lay a
   feature list out the way the design brief's per-review "Key
   features" section does — small teal dot markers instead of the
   default disc bullets. */

.tk-prose .tk-key-features {
	margin-top: 0;
	gap: 1.5rem 2rem;
}

.tk-prose .tk-key-features .wp-block-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.tk-prose .tk-key-features .wp-block-list > li {
	position: relative;
	padding-left: 16px;
}

.tk-prose .tk-key-features .wp-block-list > li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var( --wp--preset--color--primary );
}

/* ── "Keep reading" contextual links box ───────────────────────
   A one-off wp:group (not a registered block) — a dashed-border
   box of 2-3 related-post links dropped mid-article. */

.tk-prose .tk-keep-reading {
	margin-top: 0;
	border: 1px dashed var( --wp--preset--color--border-alt );
	border-radius: 14px;
	padding: 20px 22px;
	background: var( --wp--preset--color--surface );
}

.tk-prose .tk-keep-reading__eyebrow {
	margin: 0 0 12px;
	font: 800 0.6875rem/1 var( --wp--preset--font-family--sans );
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --wp--preset--color--subtle );
}

.tk-prose .tk-keep-reading__link {
	margin: 0;
}

.tk-prose .tk-keep-reading__link + .tk-keep-reading__link {
	margin-top: 9px;
}

.tk-prose .tk-keep-reading__link a {
	font: 600 0.96875rem/1.5 var( --wp--preset--font-family--sans );
	color: var( --wp--preset--color--primary-dark );
	text-decoration: none;
	border-bottom: 0;
}

.tk-prose .tk-keep-reading__link a:hover {
	color: var( --wp--preset--color--dark );
}

/* ============================================================
   Core WordPress blocks — an editor can drop any of these into
   an article regardless of the custom taskip/* library, so they
   need to read as part of this design system too, not raw
   browser defaults.
   ============================================================ */

.tk-prose hr.wp-block-separator {
	margin: clamp( 2rem, 4vw, 3rem ) 0;
	border: 0;
	border-top: 1px solid var( --wp--preset--color--border );
}

.tk-prose hr.wp-block-separator.is-style-wide {
	border-top-width: 1px;
}

.tk-prose hr.wp-block-separator.is-style-dots {
	border: 0;
	text-align: center;
	line-height: 1;
}

.tk-prose hr.wp-block-separator.is-style-dots::before {
	content: '\00b7 \00b7 \00b7';
	font-size: 1.5rem;
	letter-spacing: 0.5em;
	color: var( --wp--preset--color--faint );
}

.tk-prose code {
	font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
	font-size: 0.875em;
	background: var( --wp--preset--color--surface-alt );
	border: 1px solid var( --wp--preset--color--border-alt );
	border-radius: 5px;
	padding: 0.15em 0.4em;
}

.tk-prose pre.wp-block-code {
	margin: 0;
	padding: 1.125rem 1.25rem;
	background: var( --wp--preset--color--dark );
	border-radius: 12px;
	overflow-x: auto;
}

.tk-prose pre.wp-block-code code {
	background: none;
	border: 0;
	padding: 0;
	color: var( --wp--preset--color--faint-alt );
	font-size: 0.84375rem;
	line-height: 1.65;
}

.tk-prose .wp-block-pullquote {
	margin: clamp( 1.75rem, 3.5vw, 2.5rem ) 0;
	padding: clamp( 28px, 4vw, 40px ) 0;
	border-top: 2px solid var( --wp--preset--color--dark );
	border-bottom: 2px solid var( --wp--preset--color--dark );
	text-align: center;
}

.tk-prose .wp-block-pullquote blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	border-radius: 0;
}

.tk-prose .wp-block-pullquote p {
	font-family: var( --wp--preset--font-family--sans );
	font-weight: 700;
	font-size: clamp( 1.25rem, 2.4vw, 1.75rem );
	line-height: 1.35;
	letter-spacing: -0.015em;
	color: var( --wp--preset--color--dark );
	font-style: normal;
}

.tk-prose .wp-block-pullquote cite {
	display: block;
	margin-top: 14px;
	font-family: var( --wp--preset--font-family--sans );
	font-style: normal;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var( --wp--preset--color--subtle );
}

.tk-prose .wp-block-columns {
	margin-bottom: 0;
}

.tk-prose .wp-block-column > * + * {
	margin-top: 1rem;
}

.tk-prose .wp-block-gallery {
	margin: 0;
}

.tk-prose .wp-block-gallery figure {
	border-radius: 12px;
	overflow: hidden;
}

.tk-prose .wp-block-gallery img {
	border-radius: 0;
	display: block;
}

.tk-prose .wp-block-embed {
	margin: clamp( 1.5rem, 3vw, 2.25rem ) 0;
}

.tk-prose .wp-block-embed__wrapper {
	position: relative;
}

.tk-prose .wp-block-embed iframe {
	border-radius: 12px;
	width: 100%;
}

.tk-prose .wp-block-embed figcaption {
	text-align: center;
}

.tk-prose .wp-block-details {
	margin: 0 0 1rem;
	padding: 16px 20px;
	background: var( --wp--preset--color--surface );
	border: 1px solid var( --wp--preset--color--border );
	border-radius: 12px;
}

.tk-prose .wp-block-details summary {
	cursor: pointer;
	font-family: var( --wp--preset--font-family--sans );
	font-weight: 700;
	color: var( --wp--preset--color--dark );
}

.tk-prose .wp-block-details[open] summary {
	margin-bottom: 10px;
}

.tk-prose .wp-block-verse {
	font-family: var( --wp--preset--font-family--serif );
	font-size: 1rem;
	line-height: 1.8;
	color: var( --wp--preset--color--text-alt );
	white-space: pre-wrap;
}

.tk-prose mark {
	background: var( --wp--preset--color--primary-bg );
	color: var( --wp--preset--color--primary-ink );
	border-radius: 3px;
	padding: 0.05em 0.2em;
}