/**
 * DM Turbo — blog index, archives and single posts.
 *
 * Loaded on top of components.css, which supplies the tokens, buttons and
 * container widths. Only what the blog adds lives here.
 */

/* ------------------------------------------------------------------ *
 * Section scaffolding
 *
 * The home page carried these as .dm-section* / .dm-swoosh in main.css; when
 * it moved to utilities the classes went with the file, but the blog
 * templates still ask for them by name. Restored here — this is the only
 * place left that uses them.
 * ------------------------------------------------------------------ */

.dm-section {
	position: relative;
	overflow: clip;
}

.dm-section__head {
	position: relative;
	text-align: center;
}

/* Paytone One 36/50 unless a section overrides the leading. */
.dm-section__title {
	font-family: var(--dm-display);
	font-weight: 400;
	font-size: clamp(26px, 2.5vw, 36px);
	line-height: 1.389;
}

/* The hand-drawn yellow underline sits under the title, not across the row. */
.dm-swoosh {
	display: block;
	height: 15px;
	margin: 13px auto 0;
	overflow: visible;
}

.dm-swoosh--md {
	width: 238px;
}

/* Yellow rope decorations. Each modifier supplies its own offsets; without
   this base they fall back into flow and push their card open. */
.dm-squiggle {
	position: absolute;
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

/* ------------------------------------------------------------------ *
 * Header variant
 * ------------------------------------------------------------------ */

.dm-blog {
	background: #fff;
}

/* ------------------------------------------------------------------ *
 * Blog index — masthead and featured mosaic
 * ------------------------------------------------------------------ */

.dm-bloghead {
	padding: 10px 0 0;
}

.dm-bloghead__bolt {
	width: 76px;
	height: 76px;
	margin: 0 auto;
}

.dm-bloghead .dm-section__title {
	margin-top: -9px;
}

.dm-bloghead__sub {
	max-width: 740px;
	margin: 8px auto 0;
	/* 24/38 in the frame. At 20px the line fitted "more sales" too and the
	   subtitle broke one word later than the design. */
	font-size: clamp(17px, 1.67vw, 24px);
	line-height: 1.583;
	text-align: center;
	color: var(--dm-muted);
}

.dm-bloghead--archive {
	padding-bottom: 8px;
}

/* Two stacked cards on the left, one tall card on the right. */
.dm-featured {
	display: grid;
	grid-template-columns: 542fr 646fr;
	grid-template-rows: auto auto;
	gap: 19px 14px;
	margin-top: 25px;
}

.dm-featured__item {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 12px;
	background: var(--dm-surface-soft);
}

.dm-featured__item--0 { grid-column: 2; grid-row: 1 / span 2; }
.dm-featured__item--1 { grid-column: 1; grid-row: 1; aspect-ratio: 542 / 187; }
.dm-featured__item--2 { grid-column: 1; grid-row: 2; aspect-ratio: 542 / 183; }

.dm-featured__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.dm-featured__item:hover img {
	transform: scale(1.03);
}

.dm-featured__cat {
	position: absolute;
	left: 14px;
	bottom: 14px;
	padding: 7px 16px;
	border-radius: 18px;
	background: rgba(51, 51, 51, 0.62);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff;
	font-size: 16px;
	line-height: 1.3;
}

.dm-bloghead__cta {
	margin-top: 55px;
	text-align: center;
}

/* ------------------------------------------------------------------ *
 * Newsletter
 *
 * Wide card (blog index): 1094x330, r26, 32/35 padding, art parked at the
 * right. Sidebar card: 315x404, r12, centred, Inter body. Both taken from
 * the frames rather than eyeballed.
 * ------------------------------------------------------------------ */

.dm-newsletter {
	position: relative;
	overflow: hidden;
	width: min(100%, 1094px);
	min-height: 330px;
	margin: 46px auto 0;
	padding: 32px;
	border-radius: 26px;
	background: var(--dm-ink);
	color: #fff;
	/* Like the testimonial strip, this card drops the global 0.374px tracking
	   in the frame — with it the body ran one word long. */
	letter-spacing: normal;
}

.dm-squiggle--newsletter {
	top: 0;
	right: 12px;
	width: 97px;
	z-index: 0;
}

.dm-newsletter__body {
	position: relative;
	z-index: 1;
	/* 701 in the frame. Oxygen sets the same sentence ~20px wider than Figma
	   renders it, so at 701 "directly" fell to the second line. */
	max-width: 715px;
}

/* Bolt overlaps the envelope's left edge, as drawn. */
.dm-newsletter__aside {
	/* It is a <span>, so it must be blockified explicitly: the wide variant
	   gets that free from position:absolute, but the compact variant sets
	   position:relative, and width/height/margin:auto do not apply to an
	   inline box. Without this the sidebar card collapsed the illustration to
	   a zero-size box and the artwork escaped above the card. */
	display: block;
	position: absolute;
	top: 32px;
	right: 12px;
	width: 294px;
	height: 276px;
	z-index: 1;
	pointer-events: none;
}

.dm-newsletter__bolt {
	position: absolute;
	left: 0;
	top: 0;
	width: 126px;
	height: 126px;
}

.dm-newsletter__art {
	position: absolute;
	left: 0;
	top: 22px;
	width: 294px;
	height: 254px;
	object-fit: contain;
}

/* Paytone One 26 / 46. */
.dm-newsletter__title {
	font-family: var(--dm-display);
	font-weight: 400;
	font-size: clamp(20px, 1.8vw, 26px);
	line-height: 1.77;
	color: #fff;
}

/* Oxygen Light 22 / 42. */
.dm-newsletter__text {
	margin-top: 12px;
	font-weight: 300;
	font-size: clamp(16px, 1.53vw, 22px);
	line-height: 1.91;
	color: #fff;
}

/* The result of a signup, shown between the body copy and the form. Sits in
   the form's top margin rather than adding to it, so the card keeps its
   height when a message appears. */
.dm-newsletter__notice {
	margin: 20px 0 -28px;
	padding: 12px 18px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.1);
	border-left: 3px solid var(--dm-brand-soft);
	font-family: var(--dm-sans);
	font-size: clamp(15px, 1.25vw, 18px);
	line-height: 1.5;
	color: #fff;
}

.dm-newsletter__notice--error { border-left-color: #ff8a5b; }

.dm-newsletter__form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 48px;
}

.dm-newsletter__input {
	flex: 0 1 432px;
	min-width: 0;
	height: 71px;
	padding: 0 23px;
	border: 1px solid #6f6bb5;
	border-radius: 18px;
	background: transparent;
	color: #fff;
	font-family: var(--dm-sans);
	font-size: 22px;
	letter-spacing: inherit;
}

.dm-newsletter__input::placeholder { color: #a5a5a5; }
.dm-newsletter__input:focus-visible { outline: 2px solid var(--dm-brand-soft); outline-offset: 2px; }

.dm-newsletter__submit {
	flex: none;
	width: 236px;
	height: 64px;
	min-width: 0;
	padding: 0 16px;
}

/* ---- Sidebar variant: 315x404, Inter body, everything centred ---- */

.dm-newsletter--compact {
	width: 100%;
	min-height: 404px;
	margin: 26px 0 0;
	padding: 12px 34px 26px;
	border-radius: 12px;
	text-align: center;
}

.dm-newsletter--compact .dm-newsletter__aside {
	position: relative;
	top: auto;
	right: auto;
	width: 155px;
	height: 137px;
	margin: 0 auto;
}

.dm-newsletter--compact .dm-newsletter__bolt {
	left: -19px;
	top: 0;
	width: 87px;
	height: 87px;
}

.dm-newsletter--compact .dm-newsletter__art {
	left: 0;
	top: 13px;
	width: 155px;
	height: 124px;
}

.dm-newsletter--compact .dm-newsletter__body { max-width: none; }

.dm-newsletter--compact .dm-newsletter__title {
	margin-top: -13px;
	font-size: 19px;
	line-height: 2.42;
}

.dm-newsletter--compact .dm-newsletter__text {
	margin-top: 0;
	font-family: var(--dm-ui);
	font-weight: 300;
	font-size: 14px;
	line-height: 1.5;
}

.dm-newsletter--compact .dm-newsletter__notice {
	margin: 16px 0 -12px;
	font-family: var(--dm-ui);
	font-size: 15px;
	text-align: left;
}

.dm-newsletter--compact .dm-newsletter__form {
	flex-direction: column;
	gap: 16px;
	margin-top: 22px;
}

.dm-newsletter--compact .dm-newsletter__input {
	flex: none;
	width: 100%;
	height: 46px;
	padding: 0 14px;
	border-radius: 9px;
	font-family: var(--dm-ui);
	font-size: 12px;
}

.dm-newsletter--compact .dm-newsletter__submit {
	width: 100%;
	height: 49px;
	font-family: var(--dm-ui);
	font-weight: 600;
	font-size: 16px;
}

/* ------------------------------------------------------------------ *
 * Post grid
 * ------------------------------------------------------------------ */

.dm-postlist {
	padding: 57px 0 40px;
}

.dm-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 19px;
	margin-top: 21px;
}

.dm-filter {
	display: inline-flex;
	align-items: center;
	height: 38px;
	padding: 0 18px;
	border: 1px solid var(--dm-brand);
	border-radius: 8px;
	background: #fff;
	color: var(--dm-brand);
	font-size: 17px;
	line-height: 1;
	transition: background 0.18s ease, color 0.18s ease;
}

.dm-filter:hover { background: #f4f2ff; }

.dm-filter.is-active {
	background: var(--dm-brand);
	color: #fff;
}

.dm-postgrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 31px;
	margin-top: 52px;
}

.dm-postcard {
	display: flex;
	flex-direction: column;
	padding: 16px;
	border: 1px solid #ececf3;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 10px 26px -18px rgba(51, 51, 51, 0.4);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dm-postcard:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 34px -20px rgba(51, 51, 51, 0.45);
}

.dm-postcard__media {
	display: block;
	overflow: hidden;
	border-radius: 8px;
	aspect-ratio: 345 / 194;
	background: var(--dm-surface-soft);
}

.dm-postcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dm-postcard__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #ece9ff, #f6f5ff);
}

.dm-postcard__title {
	margin-top: 16px;
	font-family: var(--dm-display);
	font-weight: 400;
	font-size: clamp(18px, 1.4vw, 20px);
	line-height: 1.35;
	color: var(--dm-ink);
}

.dm-postcard__title a:hover { color: var(--dm-brand); }

.dm-postcard__excerpt {
	flex: 1 1 auto;
	margin-top: 10px;
	font-size: 16px;
	line-height: 1.75;
	color: var(--dm-muted);
}

.dm-postcard__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 20px;
}

.dm-chip {
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 0 12px;
	border-radius: 14px;
	background: #efecff;
	color: var(--dm-brand);
	font-size: 15px;
	line-height: 1;
}

.dm-chip:hover { background: #e2ddff; }

.dm-readtime {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 15px;
	line-height: 1;
	color: var(--dm-muted);
}

.dm-readtime .dm-icon {
	width: 17px;
	height: 17px;
}

.dm-postlist__empty {
	margin-top: 40px;
	text-align: center;
	font-size: 18px;
	color: var(--dm-muted);
}

/* Pagination */
.dm-blog .navigation.pagination {
	margin-top: 48px;
}

.dm-blog .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.dm-blog .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 14px;
	border: 1px solid #e3e0f0;
	border-radius: 10px;
	color: var(--dm-ink);
	font-size: 16px;
}

.dm-blog .page-numbers:hover { border-color: var(--dm-brand); color: var(--dm-brand); }
.dm-blog .page-numbers.current { background: var(--dm-brand); border-color: var(--dm-brand); color: #fff; }
.dm-blog .screen-reader-text { position: absolute !important; }

/* ------------------------------------------------------------------ *
 * Single post — lead
 * ------------------------------------------------------------------ */

.dm-postlead {
	padding: 46px 0 34px;
	background: linear-gradient(180deg, #f7f5ff 0%, #ffffff 100%);
}

.dm-postlead__grid {
	display: grid;
	grid-template-columns: minmax(0, 645fr) minmax(0, 515fr);
	gap: 40px;
	align-items: start;
}

.dm-postlead__image {
	width: 100%;
	height: auto;
	aspect-ratio: 645 / 360;
	object-fit: cover;
	border-radius: 20px;
}

.dm-author {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 22px;
}

.dm-author__avatar {
	width: 59px;
	height: 59px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}

.dm-author__body { display: flex; flex-direction: column; gap: 3px; }
.dm-author__label { font-size: 16px; line-height: 1.2; color: var(--dm-muted); }
.dm-author__name { font-size: 18px; line-height: 1.2; color: var(--dm-ink); }

.dm-postlead__title {
	font-family: var(--dm-display);
	font-weight: 400;
	font-size: clamp(26px, 2.5vw, 36px);
	line-height: 1.25;
	color: var(--dm-ink);
}

.dm-postlead__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 18px;
}

.dm-postlead__meta .dm-readtime { font-size: 17px; }

.dm-postlead__comments {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 17px;
	color: var(--dm-brand);
}

.dm-postlead__comments .dm-icon { width: 18px; height: 18px; }

.dm-postlead__excerpt {
	margin-top: 16px;
	font-size: clamp(16px, 1.35vw, 19px);
	line-height: 1.9;
	color: var(--dm-muted);
}

/* ------------------------------------------------------------------ *
 * Single post — body and sidebar
 * ------------------------------------------------------------------ */

.dm-single__grid {
	display: grid;
	grid-template-columns: minmax(0, 815fr) minmax(0, 316fr);
	gap: 68px;
	align-items: start;
	padding-top: 30px;
}

.dm-single__sticky {
	position: sticky;
	top: 24px;
}

.dm-toc > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 24px;
	border: 1px solid #e6e4f0;
	border-radius: 12px;
	background: #fbfbfd;
	cursor: pointer;
	list-style: none;
	font-size: 18px;
	color: var(--dm-ink);
}

.dm-toc > summary::-webkit-details-marker { display: none; }

.dm-toc__summary .dm-icon {
	width: 20px;
	height: 20px;
	flex: none;
	transition: transform 0.2s ease;
}

.dm-toc[open] .dm-toc__summary .dm-icon { transform: rotate(180deg); }

.dm-toc__list {
	display: grid;
	gap: 10px;
	margin: 12px 0 0;
	padding: 18px 24px;
	border: 1px solid #eeecf6;
	border-radius: 12px;
}

.dm-toc__list a { font-size: 17px; color: var(--dm-muted); }
.dm-toc__list a:hover { color: var(--dm-brand); }

/* Post content */
.dm-prose {
	margin-top: 34px;
	font-size: clamp(16px, 1.3vw, 18px);
	line-height: 1.95;
	color: var(--dm-muted);
}

.dm-prose > * + * { margin-top: 24px; }

.dm-prose h2 {
	font-family: var(--dm-display);
	font-weight: 400;
	font-size: clamp(22px, 1.95vw, 28px);
	line-height: 1.35;
	color: var(--dm-brand);
	margin-top: 42px;
}

.dm-prose h3 {
	font-family: var(--dm-display);
	font-weight: 400;
	font-size: clamp(19px, 1.5vw, 22px);
	line-height: 1.4;
	color: var(--dm-ink);
	margin-top: 32px;
}

.dm-prose a { color: var(--dm-brand); text-decoration: underline; text-underline-offset: 3px; }
.dm-prose strong { color: var(--dm-ink); }
.dm-prose img { border-radius: 14px; }

.dm-prose ul,
.dm-prose ol {
	padding-left: 22px;
	list-style: disc;
}

.dm-prose ol { list-style: decimal; }
.dm-prose li + li { margin-top: 10px; }

.dm-prose blockquote {
	padding: 18px 24px;
	border-left: 3px solid var(--dm-brand);
	background: #f7f6ff;
	border-radius: 0 12px 12px 0;
	color: var(--dm-ink);
}

.dm-alsolike {
	margin-top: 34px;
	padding: 24px 28px;
	border-radius: 12px;
	background: var(--dm-surface-soft);
	font-size: 18px;
	line-height: 1.6;
	color: var(--dm-ink);
}

.dm-alsolike a { color: var(--dm-brand); }
.dm-alsolike a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The single post reuses the home FAQ block at a narrower measure. */
.dm-single .dm-faq {
	padding: 56px 0 10px;
}

.dm-single .dm-faq .dm-container {
	width: 100%;
}

.dm-single .dm-faq .dm-section__bubbles,
.dm-single .dm-faq .dm-swoosh {
	display: none;
}

.dm-single .dm-accordion { margin-top: 26px; }
.dm-single .dm-accordion__question { padding: 26px 0; gap: 24px; }
.dm-single .dm-accordion__question + .dm-accordion__answer { padding: 0 0 26px 50px; margin-top: -12px; }

/* Share rail */
.dm-share__title {
	font-family: var(--dm-display);
	font-weight: 400;
	font-size: 20px;
	line-height: 1.4;
	color: var(--dm-ink);
}

.dm-share__list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 14px;
}

.dm-share__item {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	padding: 10px;
	border: 0;
	border-radius: 16px;
	background: #f1eeff;
	cursor: pointer;
	transition: transform 0.18s ease;
}

.dm-share__item:hover { transform: translateY(-2px); }
.dm-share__item .dm-icon,
.dm-share__item img { width: 100%; height: 100%; object-fit: contain; }

.dm-share__feedback {
	margin-top: 10px;
	font-size: 14px;
	color: var(--dm-brand);
}

/* ------------------------------------------------------------------ *
 * Comments
 * ------------------------------------------------------------------ */

.dm-comments {
	margin-top: 52px;
}

.dm-comments__title {
	font-size: clamp(18px, 1.5vw, 20px);
	font-weight: 700;
	line-height: 1.4;
	color: var(--dm-ink);
}

.dm-comments__title--list { margin-top: 44px; }

/* Flex rather than inline-block: the whitespace between the generated <p>
   elements is enough to break a two-up inline-block row. */
.dm-commentform {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 18px;
	padding: 26px;
	border-radius: 18px;
	background: #efecff;
}

.dm-commentform > * {
	flex: 1 1 100%;
	margin: 0;
}

.dm-field input,
.dm-field textarea {
	width: 100%;
	padding: 16px 20px;
	border: 1px solid #e0dcf7;
	border-radius: 12px;
	background: #fff;
	font-family: var(--dm-sans);
	font-size: 17px;
	line-height: 1.5;
	letter-spacing: inherit;
	color: var(--dm-ink);
}

.dm-field input::placeholder,
.dm-field textarea::placeholder { color: #b4b4c4; }

.dm-field input:focus-visible,
.dm-field textarea:focus-visible {
	outline: 2px solid var(--dm-brand);
	outline-offset: 1px;
}

.dm-field textarea { min-height: 180px; resize: vertical; }

/* Name and E-mail sit side by side above the message. */
@media (min-width: 700px) {
	.dm-commentform .dm-field--name,
	.dm-commentform .dm-field--email {
		flex: 1 1 calc(50% - 8px);
	}
}

/* Source order is name, email, consent, message, submit — the design puts the
   consent line last, so it is reordered visually instead of in the markup. */
.dm-commentform .dm-field--name { order: 1; }
.dm-commentform .dm-field--email { order: 2; }
.dm-commentform .dm-field--message { order: 3; }
.dm-commentform .comment-form-cookies-consent { order: 4; }
.dm-commentform .form-submit { order: 5; text-align: center; }

.dm-commentform .comment-form-cookies-consent {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	color: var(--dm-muted);
}

.dm-commentform .comment-form-cookies-consent input { width: auto; }

.dm-commentlist {
	display: grid;
	gap: 16px;
	margin-top: 18px;
	padding: 0;
	list-style: none;
}

.dm-comment { list-style: none; }

.dm-comment__inner {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 20px 24px;
	border-radius: 12px;
	background: var(--dm-surface-soft);
}

.dm-comment__avatar {
	width: 66px;
	height: 66px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}

.dm-comment__author {
	font-size: 16px;
	line-height: 1.3;
	color: var(--dm-muted);
}

.dm-comment__text {
	margin-top: 6px;
	font-size: 18px;
	line-height: 1.6;
	color: var(--dm-ink);
}

.dm-comment__text p { margin: 0; }
.dm-comment__pending { margin-top: 6px; font-size: 14px; color: var(--dm-brand); }
.dm-comment .children { display: grid; gap: 16px; margin: 16px 0 0 40px; padding: 0; list-style: none; }

/* ------------------------------------------------------------------ *
 * Related articles
 * ------------------------------------------------------------------ */

.dm-related {
	padding: 98px 0 122px;
}

/* Tighter than the index, where the filter row sits between the two. */
.dm-related .dm-postgrid {
	margin-top: 37px;
}

/* ------------------------------------------------------------------ *
 * Responsive
 * ------------------------------------------------------------------ */

@media (max-width: 1099px) {

	.dm-single__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.dm-single__sticky { position: static; }
	.dm-newsletter--compact { max-width: 420px; }
	.dm-share__list { gap: 10px; }
}

@media (max-width: 899px) {
	.dm-bloghead { padding-top: 20px; }
	.dm-bloghead__bolt { width: 56px; height: 56px; }
	.dm-bloghead__sub { font-size: 16px; line-height: 1.75; }

	.dm-featured {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.dm-featured__item--0,
	.dm-featured__item--1,
	.dm-featured__item--2 {
		grid-column: 1;
		grid-row: auto;
		aspect-ratio: 16 / 9;
	}

	.dm-featured__cat { font-size: 13px; padding: 5px 12px; }

	/* The art moves above the copy and the form goes full width. */
	.dm-newsletter {
		min-height: 0;
		padding: 24px 22px 28px;
		border-radius: 22px;
		text-align: center;
	}

	.dm-newsletter__body { max-width: none; }

	.dm-newsletter__aside {
		position: relative;
		top: auto;
		right: auto;
		width: 180px;
		height: 160px;
		margin: 0 auto 6px;
	}

	.dm-newsletter__bolt { left: -22px; top: 0; width: 62px; height: 62px; }
	.dm-newsletter__art { left: 0; top: 14px; width: 180px; height: 146px; }

	.dm-newsletter__title { line-height: 1.5; }
	.dm-newsletter__form { flex-direction: column; gap: 12px; margin-top: 22px; }
	.dm-newsletter__input { flex: none; width: 100%; height: 52px; font-size: 16px; }
	.dm-newsletter__submit { width: 100%; height: 52px; }
	.dm-squiggle--newsletter { display: none; }

	.dm-postlist { padding: 52px 0 30px; }
	.dm-postgrid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.dm-postcard { max-width: 460px; margin-inline: auto; width: 100%; }

	.dm-postlead { padding: 30px 0 24px; }
	.dm-postlead__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.dm-postlead__meta { justify-content: flex-start; gap: 20px; }

	.dm-single__grid { padding-top: 20px; gap: 34px; }
	.dm-toc > summary { padding: 16px 18px; font-size: 16px; }
	.dm-prose { margin-top: 26px; }
	.dm-alsolike { padding: 18px 20px; font-size: 16px; }

	.dm-commentform { padding: 20px; }
	.dm-field textarea { min-height: 140px; }
	.dm-comment__inner { padding: 16px; gap: 14px; }
	.dm-comment__avatar { width: 52px; height: 52px; }
	.dm-comment__text { font-size: 16px; }

	.dm-related { padding: 44px 0 10px; }

}