/*
 * MEG redesign: single post (single.php) only.
 * Head + lead image, share | body + topics | up next grid, corrections line,
 * "More {category}" row. Shared tag/art/section-head/card rules live in
 * meg-base.css.
 * Body rules use descendant selectors only (no `>` on p, h2, blockquote) so
 * they reach text inside WPBakery `.wpb_text_column` wrappers too.
 * Logical properties only; physical left/right lives in rtl.css.
 */

/* Page ---------------------------------------------------------------------- */

/*
 * Sticky offset under the admin bar and the header (meg.js sets
 * --meg-header-h; 64px until it runs). Admin bar: 32px, 46px at 782px and
 * below, scrolls away at 600px and below (same steps as the header in meg-base.css).
 */
html body.meg main.meg-article-main {
	--meg-admin: 0px;
	--meg-stick: calc(var(--meg-admin) + var(--meg-header-h, 64px));
	display: block;
	font: 500 16px/1.45 var(--meg-sans);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

html body.admin-bar main.meg-article-main {
	--meg-admin: 32px;
}

@media (max-width: 782px) {
	html body.admin-bar main.meg-article-main {
		--meg-admin: 46px;
	}
}

@media (max-width: 600px) {
	html body.admin-bar main.meg-article-main {
		--meg-admin: 0px;
	}
}

/* Reading progress: fixed bar under the admin bar and header, width set by meg.js. */
.meg-progress {
	position: fixed;
	inset-block-start: var(--meg-stick);
	inset-inline: 0;
	z-index: 1001;
	block-size: 3px;
	pointer-events: none;
}

.meg-progress__bar {
	display: block;
	block-size: 100%;
	background-color: var(--meg-dusk);
	transform: scaleX(0);
	transform-origin: 0 50%;
	will-change: transform;
}

/* Grids: share 64px | text 680px | side 300px ------------------------------- */

.meg-article__top,
.meg-article__grid {
	display: grid;
	grid-template-columns: 64px minmax(0, 680px) minmax(0, 300px);
	column-gap: 48px;
	justify-content: space-between;
}

/* Head spans text + side; the lead image stays at text width (side column empty). */
.meg-article__top > * {
	grid-column: 2 / -1;
	min-inline-size: 0;
}

.meg-article__top > .meg-article__figure {
	grid-column: 2;
}

.meg-article__grid {
	row-gap: 48px;
	align-items: start;
	padding-block: 40px 120px;
}

/* Head ---------------------------------------------------------------------- */

.meg-article__head {
	display: grid;
	justify-items: start;
	gap: 18px;
	padding-block: 48px 32px;
}

/* Capped at the 680px text column so long titles never run over the side column. */
html body.meg .meg-article__title {
	max-inline-size: min(18ch, 680px);
	margin: 0;
	font-size: clamp(34px, 4.8vw, 72px);
	line-height: 0.98;
	color: inherit;
}

html body.meg .meg-article__dek {
	max-inline-size: 46ch;
	margin: 0;
	font-size: clamp(18px, 1.6vw, 22px);
	line-height: 1.4;
	color: var(--meg-kohl);
}

html body.meg .meg-article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 0;
	color: var(--meg-muted);
}

/* Lead image ---------------------------------------------------------------- */

.meg-article__figure {
	margin: 0;
}

html body.meg .meg-article__art {
	aspect-ratio: 16 / 9;
}

html body.meg .meg-article__caption {
	padding-block: 10px;
	font-size: 10px;
	color: var(--meg-muted);
}

/* Share --------------------------------------------------------------------- */

.meg-share {
	position: sticky;
	inset-block-start: calc(var(--meg-stick) + 32px);
	display: grid;
	justify-items: center;
	gap: 10px;
}

html body.meg .meg-share__label,
html body.meg .meg-share__status {
	margin: 0;
	font-size: 10px;
	color: var(--meg-muted);
}

html body.meg .meg-share__status:empty {
	display: none;
}

.meg-share__list {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

html body.meg .meg-share__btn {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	inline-size: 40px;
	block-size: 40px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--meg-line);
	border-radius: 50%;
	background-color: transparent;
	color: var(--meg-kohl);
	cursor: pointer;
	text-decoration: none;
	transition: border-color 0.25s ease;
}

html body.meg .meg-share__btn:hover,
html body.meg .meg-share__btn:focus-visible {
	border-color: var(--meg-kohl);
	color: var(--meg-kohl);
	text-decoration: none;
}

/* Body ---------------------------------------------------------------------- */

.meg-article__col {
	min-inline-size: 0;
}

html body.meg .meg-article__body {
	font: 400 19px/1.65 var(--meg-sans);
	color: var(--meg-kohl);
}

html body.meg .meg-article__body p {
	margin: 0 0 1.1em;
	font: inherit;
	color: inherit;
}

html body.meg .meg-article__body a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--meg-dusk);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

html body.meg .meg-article__body h2 {
	margin: 1.6em 0 0.6em;
	font: 800 clamp(24px, 2.4vw, 32px)/1.1 var(--meg-display);
	letter-spacing: 0;
	text-transform: none;
	color: inherit;
}

html body.meg .meg-article__body h3,
html body.meg .meg-article__body h4 {
	margin: 1.6em 0 0.5em;
	font: 700 22px/1.25 var(--meg-sans);
	text-transform: none;
	color: inherit;
}

/*
 * Lists use native markers. The parent theme hides them on
 * `.wpb_text_column` / `.hentry` lists and draws small white ::before
 * counters and icon bullets instead; those are switched off here.
 */
html body.meg .meg-article__body ul,
html body.meg .meg-article__body ol {
	margin: 0 0 1.1em;
	padding: 0;
	padding-inline-start: 1.4em;
	list-style-position: outside;
}

html body.meg .meg-article__body ol {
	list-style-type: decimal;
}

html body.meg .meg-article__body ul {
	list-style-type: disc;
}

html body.meg .meg-article__body :is(ol, ul) :is(ol, ul) {
	margin: 0.4em 0 0;
}

html body.meg .meg-article__body :is(ol, ul) ul {
	list-style-type: circle;
}

html body.meg .meg-article__body ol li,
html body.meg .meg-article__body ul li {
	position: static;
	padding: 0;
	padding-block-end: 0.4em;
}

html body.meg .meg-article__body ol > li::before,
html body.meg .meg-article__body ul > li::before {
	content: none;
}

/* Same size and family as the list text; tabular digits keep long rankings aligned. */
html body.meg .meg-article__body li::marker {
	color: var(--meg-kohl);
	font-family: var(--meg-sans);
	font-size: 1em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/*
 * Pull quote: classic `blockquote`, Quote block (`.wp-block-quote`) and
 * Pullquote block (`.wp-block-pullquote` figure around a blockquote).
 * No box; 3px Dusk bar in the gutter on the inline-start side, so the quote
 * text lines up with the body text. `cite` / `figcaption` is the
 * "Name, Role" line in small mono.
 * Embed blockquotes (X, Instagram, WordPress, TikTok) are left alone.
 */
html body.meg .meg-article__body .wp-block-pullquote {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	text-align: start;
}

html body.meg .meg-article__body blockquote:not(.twitter-tweet, .instagram-media, .wp-embedded-content, .tiktok-embed) {
	margin-block: 2.2em 2.6em;
	margin-inline: -31px 0;
	padding: 4px 0;
	padding-inline-start: 28px;
	border: 0;
	border-inline-start: 3px solid var(--meg-dusk);
	background: none;
	font: 500 clamp(22px, 2vw, 26px)/1.4 var(--meg-sans);
	letter-spacing: -0.01em;
	text-align: start;
	color: inherit;
	quotes: none;
}

html body.meg .meg-article__body blockquote:not(.twitter-tweet, .instagram-media, .wp-embedded-content, .tiktok-embed)::before,
html body.meg .meg-article__body blockquote:not(.twitter-tweet, .instagram-media, .wp-embedded-content, .tiktok-embed)::after {
	content: none;
}

html body.meg .meg-article__body blockquote:not(.twitter-tweet, .instagram-media, .wp-embedded-content, .tiktok-embed) p {
	font-size: inherit;
	line-height: inherit;
}

html body.meg .meg-article__body blockquote:not(.twitter-tweet, .instagram-media, .wp-embedded-content, .tiktok-embed) p:last-of-type {
	margin-block-end: 0;
}

html body.meg .meg-article__body :is(blockquote:not(.twitter-tweet, .instagram-media, .wp-embedded-content, .tiktok-embed) cite, .wp-block-pullquote figcaption) {
	display: block;
	margin-block-start: 16px;
	font: 400 11px/1.4 var(--meg-mono);
	font-style: normal;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--meg-muted);
}

/*
 * Steps: List block style "Steps" (`is-style-meg-steps`), or the class
 * `meg-steps` on an `<ol>` or on a WPBakery text block around one.
 * Numbers 01, 02 … in Dusk; the first bold text in an item (or in its first
 * paragraph) is the step title.
 */
html body.meg .meg-article__body :is(ol.is-style-meg-steps, ol.meg-steps, .meg-steps ol) {
	margin: 0 0 1.4em;
	padding: 0;
	list-style: none;
	counter-reset: meg-step;
}

html body.meg .meg-article__body :is(ol.is-style-meg-steps, ol.meg-steps, .meg-steps ol) > li {
	position: relative;
	min-block-size: 34px;
	padding-block: 20px;
	padding-inline-start: 80px;
	border-block-start: 1px solid var(--meg-line);
	font-size: 17px;
	color: var(--meg-muted);
	counter-increment: meg-step;
}

html body.meg .meg-article__body :is(ol.is-style-meg-steps, ol.meg-steps, .meg-steps ol) > li:last-child {
	border-block-end: 1px solid var(--meg-line);
}

html body.meg .meg-article__body :is(ol.is-style-meg-steps, ol.meg-steps, .meg-steps ol) > li::before {
	content: counter(meg-step, decimal-leading-zero);
	position: absolute;
	inset-block-start: 20px;
	inset-inline-start: 0;
	font: 700 34px/1 var(--meg-sans);
	font-variant-numeric: tabular-nums;
	color: var(--meg-dusk);
}

html body.meg .meg-article__body :is(ol.is-style-meg-steps, ol.meg-steps, .meg-steps ol) > li > strong:first-of-type,
html body.meg .meg-article__body :is(ol.is-style-meg-steps, ol.meg-steps, .meg-steps ol) > li > p:first-child > strong:first-of-type {
	display: block;
	margin-block-end: 8px;
	font-size: 20px;
	line-height: 1.2;
	color: var(--meg-kohl);
}

/*
 * Tip: Paragraph or Group block style "Tip" (`is-style-meg-tip`), or the
 * class `meg-tip` (WPBakery text block). A leading bold word ("Tip") is the
 * mono label, typed by the editor so it translates with the post.
 */
html body.meg .meg-article__body :is(.is-style-meg-tip, .meg-tip) {
	margin: 1.6em 0;
	padding: 18px 20px;
	background-color: var(--meg-art);
	font-size: 17px;
	line-height: 1.5;
	color: var(--meg-kohl);
}

html body.meg .meg-article__body :is(.is-style-meg-tip, .meg-tip) p {
	margin: 0 0 0.6em;
}

html body.meg .meg-article__body :is(.is-style-meg-tip, .meg-tip) p:last-of-type {
	margin-block-end: 0;
}

html body.meg .meg-article__body :is(.is-style-meg-tip, .meg-tip) > strong:first-child,
html body.meg .meg-article__body :is(.is-style-meg-tip, .meg-tip) p:first-child > strong:first-child {
	display: block;
	margin-block-end: 6px;
	font: 700 11px/1.2 var(--meg-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Media stays inside the column. */
html body.meg .meg-article__body img,
html body.meg .meg-article__body video {
	max-inline-size: 100%;
	block-size: auto;
}

html body.meg .meg-article__body iframe,
html body.meg .meg-article__body embed,
html body.meg .meg-article__body object {
	max-inline-size: 100%;
}

html body.meg .meg-article__body iframe[src*="youtube"],
html body.meg .meg-article__body iframe[src*="vimeo"] {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 16 / 9;
}

html body.meg .meg-article__body figure,
html body.meg .meg-article__body .wp-caption {
	max-inline-size: 100%;
	margin: 1.6em 0;
}

html body.meg .meg-article__body figcaption,
html body.meg .meg-article__body .wp-caption-text {
	margin-block-start: 10px;
	font: 400 12px/1.4 var(--meg-mono);
	letter-spacing: 0.02em;
	color: var(--meg-muted);
}

/* Wide image (`.alignwide`): 40px past the text column each side, mono caption. */
html body.meg .meg-article__body .alignwide {
	max-inline-size: none;
	inline-size: auto;
	margin-inline: -40px;
}

html body.meg .meg-article__body .alignwide img {
	display: block;
	inline-size: 100%;
}

html body.meg .meg-article__body .alignwide :is(figcaption, .wp-element-caption) {
	font: 400 10px/1.4 var(--meg-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

@media (max-width: 900px) {
	html body.meg .meg-article__body .alignwide {
		margin-inline: 0;
	}
}

/* WPBakery rows keep their own gutters; full-width rows are left to WPBakery JS. */
html body.meg .meg-article__body .vc_row {
	box-sizing: border-box;
}

.meg-article__pages {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-block: 32px;
}

/* Topics -------------------------------------------------------------------- */

.meg-article__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-block: 1.4em 0;
}

html body.meg .meg-article__tags-label {
	margin: 0;
	margin-inline-end: 6px;
	color: var(--meg-muted);
}

.meg-article__tags-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

html body.meg .meg-pill {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid var(--meg-line);
	font: 500 14px/1.3 var(--meg-sans);
	text-decoration: none;
	color: var(--meg-kohl);
	transition: border-color 0.25s ease;
}

html body.meg .meg-pill:hover,
html body.meg .meg-pill:focus-visible {
	border-color: var(--meg-kohl);
	color: var(--meg-kohl);
	text-decoration: none;
}

/* Up next ------------------------------------------------------------------- */

/* Side column: Up next, then Most read. Sticky only where it fits the screen. */
.meg-article__side {
	display: grid;
	gap: 28px;
	min-inline-size: 0;
}

@media (min-width: 1101px) and (min-height: 860px) {
	.meg-article__side {
		position: sticky;
		inset-block-start: calc(var(--meg-stick) + 32px);
	}
}

.meg-upnext {
	min-inline-size: 0;
}

html body.meg .meg-upnext__title {
	margin: 0 0 16px;
	padding-block-end: 10px;
	border-block-end: 1px solid var(--meg-line);
	color: var(--meg-muted);
}

.meg-upnext__list {
	display: grid;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Explicit Kohl and no underline in every link state: the parent link colour otherwise wins. */
html body.meg main.meg-article-main .meg-upnext__item,
html body.meg main.meg-article-main .meg-upnext__item:visited,
html body.meg main.meg-article-main .meg-upnext__item:hover,
html body.meg main.meg-article-main .meg-upnext__item:focus-visible {
	display: grid;
	gap: 8px;
	color: var(--meg-kohl);
	text-decoration: none;
}

html body.meg .meg-upnext__art {
	aspect-ratio: 16 / 9;
}

html body.meg .meg-upnext__name {
	margin: 0;
	font: 700 16px/1.3 var(--meg-sans);
	letter-spacing: 0;
	text-transform: none;
	color: var(--meg-kohl);
}

/* Most read: numbered headlines (inc/meg-most-read.php). */
html body.meg main.meg-article-main .meg-mostread__title {
	margin: 0 0 4px;
	padding-block-end: 10px;
	border-block-end: 1px solid var(--meg-line);
	color: var(--meg-muted);
}

.meg-mostread__list {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: meg-most;
}

.meg-mostread__item {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr);
	gap: 8px;
	padding-block: 12px;
	border-block-end: 1px solid var(--meg-line);
	counter-increment: meg-most;
}

.meg-mostread__item::before {
	content: counter(meg-most);
	font: 700 20px/1 var(--meg-sans);
	font-variant-numeric: tabular-nums;
	color: var(--meg-dusk);
}

html body.meg main.meg-article-main .meg-mostread__link,
html body.meg main.meg-article-main .meg-mostread__link:is(:visited, :hover, :focus-visible) {
	font: 700 15px/1.3 var(--meg-sans);
	color: var(--meg-kohl);
	text-decoration: none;
}

html body.meg main.meg-article-main .meg-mostread__link:hover {
	text-decoration: underline;
	text-decoration-color: var(--meg-dusk);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* Corrections line ---------------------------------------------------------- */

html body.meg .meg-article__fix {
	margin: 40px 0 0;
	padding-block-start: 20px;
	border-block-start: 1px solid var(--meg-line);
	color: var(--meg-muted);
}

html body.meg main.meg-article-main .meg-article__fix a {
	color: var(--meg-kohl);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* More ---------------------------------------------------------------------- */

html body.meg main.meg-article-main .meg-dark a,
html body.meg main.meg-article-main .meg-dark a:hover,
html body.meg main.meg-article-main .meg-dark a:focus-visible {
	color: inherit;
}

/* Only the title underline (.meg-ul) shows on hover, not the base link underline. */
html body.meg main.meg-article-main .meg-hcard:is(:hover, :focus-visible) {
	text-decoration: none;
}

/* 701–1100px: up next moves under the body; text column stays 680px max --- */

@media (min-width: 701px) and (max-width: 1100px) {
	.meg-article__top,
	.meg-article__grid {
		grid-template-columns: 64px minmax(0, 680px);
		justify-content: center;
	}

	.meg-article__top > *,
	.meg-article__top > .meg-article__figure,
	.meg-article__side {
		grid-column: 2;
	}
}

/* Up to 1100px: up next is static, its items side by side ------------------- */

@media (max-width: 1100px) {
	.meg-upnext__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}
}

/* 700px and below: one column, share becomes a row -------------------------- */

@media (max-width: 700px) {
	.meg-article__top,
	.meg-article__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 28px;
	}

	.meg-article__grid {
		padding-block-start: 24px;
	}

	/* Same specificity as the wide placement rules, so these win. */
	.meg-article__top > *,
	.meg-article__top > .meg-article__figure {
		grid-column: auto;
	}

	.meg-share {
		position: static;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
	}

	.meg-share__list {
		display: flex;
	}

	html body.meg .meg-article__body blockquote:not(.twitter-tweet, .instagram-media, .wp-embedded-content, .tiktok-embed) {
		margin-inline: 0;
		padding-inline-start: 18px;
	}
}

/* Lead image credit and Game info box ------------------------------------------ */

/* Caption and game credit each on their own line. */
.meg-article__caption > span {
	display: block;
}

.meg-article__caption > span + span {
	margin-block-start: 4px;
}

.meg-gameinfo {
	margin-block: 2em 1.4em;
	padding: 22px 22px 8px;
	border: 1px solid var(--meg-kohl);
}

html body.meg main.meg-article-main .meg-gameinfo__title {
	margin: 0 0 12px;
	font: 400 11px/1.2 var(--meg-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--meg-kohl);
}

html body.meg .meg-gameinfo__list {
	display: grid;
	margin: 0;
}

.meg-gameinfo__row {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: 12px;
	padding-block: 10px;
	border-block-start: 1px solid var(--meg-line);
	font-size: 16px;
}

html body.meg .meg-gameinfo__row dt {
	margin: 0;
	padding-block-start: 3px;
	font-weight: 400;
	color: var(--meg-muted);
}

html body.meg .meg-gameinfo__row dd {
	margin: 0;
	font-weight: 500;
	overflow-wrap: anywhere;
}

@media (max-width: 480px) {
	.meg-gameinfo__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}
}

/* Ad slot (template-parts/meg/article/ad-mpu.php) ----------------------------- */
/*
 * Side column beside the lead image: mono label over a 300×250 box. Up to
 * 1100px it drops under the lead image, centred. Grid placement mirrors in RTL.
 */
.meg-article__top > .meg-ad {
	grid-column: 3;
	align-self: start;
}

.meg-ad {
	display: grid;
	justify-items: center;
	gap: 6px;
}

/* Set by the GPT slotRenderEnded listener when no ad fills the slot. */
.meg-ad[hidden] {
	display: none;
}

html body.meg .meg-ad__label {
	font-size: 9px;
	color: var(--meg-muted);
}

.meg-ad__box {
	inline-size: 300px;
	max-inline-size: 100%;
	min-block-size: 250px;
	background-color: var(--meg-art);
}

@media (max-width: 1100px) {
	.meg-article__top > .meg-ad {
		grid-column: 2;
		justify-self: center;
		margin-block-start: 28px;
	}
}

@media (max-width: 700px) {
	.meg-article__top > .meg-ad {
		grid-column: auto;
		margin-block-start: 0;
	}
}

/* Content blocks (inc/meg-blocks.php) ----------------------------------------- */

/* Tip box: [meg_tip]. */
html body.meg .meg-article__body .meg-tipbox {
	display: grid;
	gap: 6px;
	margin: 1.6em 0;
	padding: 18px 20px;
	background-color: var(--meg-art);
	font-size: 17px;
	line-height: 1.5;
	color: var(--meg-kohl);
}

html body.meg .meg-article__body .meg-tipbox__label {
	font-weight: 700;
	color: var(--meg-kohl);
}

html body.meg .meg-article__body .meg-tipbox__text p {
	margin: 0 0 0.6em;
}

html body.meg .meg-article__body .meg-tipbox__text p:last-child {
	margin-block-end: 0;
}

/* Guide steps: [meg_steps] / [meg_step]. Number in Dusk, then name, region, directions, screenshot. */
html body.meg .meg-article__body ol.meg-guide {
	display: grid;
	margin: 0 0 1.4em;
	padding: 0;
	list-style: none;
}

html body.meg .meg-article__body .meg-guide > .meg-guide__step {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 16px;
	padding: 20px 0;
	border-block-start: 1px solid var(--meg-line);
}

html body.meg .meg-article__body .meg-guide > .meg-guide__step:last-child {
	border-block-end: 1px solid var(--meg-line);
}

html body.meg .meg-article__body .meg-guide__num {
	font: 700 34px/1 var(--meg-sans);
	font-variant-numeric: tabular-nums;
	color: var(--meg-dusk);
}

html body.meg .meg-article__body .meg-guide__main {
	min-inline-size: 0;
}

html body.meg .meg-article__body .meg-guide__name {
	display: block;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--meg-kohl);
}

html body.meg .meg-article__body .meg-guide__region {
	display: block;
	margin-block-start: 4px;
	color: var(--meg-muted);
}

html body.meg .meg-article__body .meg-guide__text {
	margin-block-start: 8px;
	font-size: 17px;
	line-height: 1.55;
	color: var(--meg-muted);
}

html body.meg .meg-article__body .meg-guide__text p {
	margin: 0 0 0.6em;
}

html body.meg .meg-article__body .meg-guide__text p:last-child {
	margin-block-end: 0;
}

html body.meg .meg-article__body .meg-guide__shot {
	margin: 14px 0 0;
	background-color: var(--meg-art);
}

html body.meg .meg-article__body .meg-guide__shot img {
	display: block;
	inline-size: 100%;
}

/* TikTok card: [meg_tiktok]. Kohl box, 9:16 thumbnail with play button, links out (a div when the URL is not on tiktok.com). */
html body.meg main.meg-article-main .meg-article__body .meg-vcard,
html body.meg main.meg-article-main .meg-article__body a.meg-vcard:is(:link, :visited, :hover, :focus, :active) {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: 20px;
	align-items: center;
	margin: 1.6em 0;
	padding: 14px;
	background-color: var(--meg-kohl);
	color: var(--meg-offwhite);
	text-decoration: none;
}

html body.meg main.meg-article-main .meg-article__body a.meg-vcard:focus-visible {
	outline: 2px solid var(--meg-dusk);
	outline-offset: 3px;
}

html body.meg .meg-article__body .meg-vcard__art {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 9 / 16;
	background-color: var(--meg-art-dark);
}

html body.meg .meg-article__body .meg-vcard__art img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	object-fit: cover;
	transition: transform 0.5s ease;
}

html body.meg .meg-article__body .meg-vcard:hover .meg-vcard__art img {
	transform: scale(1.04);
}

html body.meg .meg-article__body .meg-vcard__play {
	position: absolute;
	inset: 0;
	margin: auto;
	inline-size: 40px;
	block-size: 40px;
	border-radius: 50%;
	background-color: var(--meg-offwhite);
}

/* Play triangle points right in both directions (media convention), drawn with clip-path. */
html body.meg .meg-article__body .meg-vcard__play::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	inline-size: 11px;
	block-size: 16px;
	background-color: var(--meg-kohl);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	transform: translateX(2px);
}

html body.meg .meg-article__body .meg-vcard__body {
	display: grid;
	gap: 6px;
	min-inline-size: 0;
	line-height: 1.3;
}

html body.meg .meg-article__body .meg-vcard__label {
	color: var(--meg-dusk);
}

html body.meg .meg-article__body .meg-vcard__title {
	font-size: 21px;
	font-weight: 700;
}

html body.meg .meg-article__body .meg-vcard__text {
	font-size: 15px;
	color: var(--meg-muted-dk);
}

@media (prefers-reduced-motion: reduce) {
	html body.meg .meg-article__body .meg-vcard__art img {
		transition: none;
	}
}

@media (max-width: 480px) {
	html body.meg main.meg-article-main .meg-article__body .meg-vcard,
	html body.meg main.meg-article-main .meg-article__body a.meg-vcard:is(:link, :visited, :hover, :focus, :active) {
		grid-template-columns: 96px minmax(0, 1fr);
		gap: 14px;
	}

	html body.meg .meg-article__body .meg-vcard__title {
		font-size: 18px;
	}
}