/*
 * MEG redesign: base layer.
 * Tokens, self-hosted fonts and the inherited base on parent pages.
 * Logical properties only; physical left/right lives in rtl.css.
 */

/* Fonts ------------------------------------------------------------------ */

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/inter-400.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/inter-500.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/inter-700.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("../fonts/inter-800.woff2") format("woff2");
}

@font-face {
	font-family: "Space Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/space-mono-400.woff2") format("woff2");
}

@font-face {
	font-family: "Space Mono";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/space-mono-700.woff2") format("woff2");
}

@font-face {
	font-family: "PP Neue Machina";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/pp-neue-machina-400.woff2") format("woff2");
}

@font-face {
	font-family: "PP Neue Machina";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("../fonts/pp-neue-machina-800.woff2") format("woff2");
}

@font-face {
	font-family: "PP Neue Montreal";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/pp-neue-montreal-500.woff2") format("woff2");
}

@font-face {
	font-family: "PP Neue Montreal";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/pp-neue-montreal-700.woff2") format("woff2");
}

/* Tokens ----------------------------------------------------------------- */

:root {
	--meg-kohl: #0e0e0e;
	--meg-offwhite: #f8f7f3;
	--meg-dusk: #b8a6ff;
	--meg-dusk-deep: #7d71ab; /* Dusk 65% over Kohl */
	--meg-dusk-soft: #ebe7f5; /* Dusk 20% over Off-white */
	--meg-muted: #6b6964;
	--meg-muted-dk: #a3a19b;
	--meg-line: rgba(14, 14, 14, 0.12);
	--meg-line-dk: rgba(248, 247, 243, 0.14);
	--meg-art: #e7e5e0;
	--meg-art-dark: #262626;
	--meg-max: 1320px;
	--meg-pad: 16px;
	--meg-sec: 56px;
	--meg-display: "PP Neue Machina", "Inter", sans-serif;
	--meg-sans: "PP Neue Montreal", "Inter", system-ui, sans-serif;
	--meg-mono: "Space Mono", ui-monospace, monospace;
}

@media (min-width: 900px) {
	:root {
		--meg-pad: 40px;
	}
}

/* Inherited base on parent pages ------------------------------------------ */

/*
 * Parent markup keeps its own skin colours and background; only fonts are
 * inherited.
 */
html body.meg {
	font-family: var(--meg-sans);
}

html body.meg h1,
html body.meg h2,
html body.meg h3,
html body.meg h4,
html body.meg h5,
html body.meg h6 {
	font-family: var(--meg-sans);
	font-weight: 700;
	font-style: normal;
}

/*
 * Base colours apply only inside containers the new design owns.
 * :where() keeps specificity low so component rules override it.
 */
html body.meg :where(.meg-header, main.meg-home-main, main.meg-article-main, main.meg-list-main) {
	background-color: var(--meg-offwhite);
	color: var(--meg-kohl);
}

html body.meg :where(.meg-header, main.meg-home-main, main.meg-article-main, main.meg-list-main) a {
	color: var(--meg-kohl);
}

html body.meg :where(.meg-header, main.meg-home-main, main.meg-article-main, main.meg-list-main) a:hover,
html body.meg :where(.meg-header, main.meg-home-main, main.meg-article-main, main.meg-list-main) a:focus-visible {
	color: var(--meg-kohl);
	text-decoration: underline;
	text-decoration-color: var(--meg-dusk);
}

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

html body.meg .meg-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 1000;
	border-block-end: 1px solid var(--meg-line);
	font-family: var(--meg-sans);
}

html body.admin-bar .meg-header {
	inset-block-start: 32px;
}

.meg-header__bar {
	display: flex;
	align-items: center;
	gap: 28px;
	block-size: 64px;
	max-inline-size: var(--meg-max);
	margin-inline: auto;
	padding-inline: var(--meg-pad);
}

/* The logo's end margin pushes the menu and search button to the inline end. */
html body.meg .meg-header__logo {
	display: block;
	flex: none;
	margin-inline-end: auto;
	text-decoration: none;
}

.meg-header__logo img {
	display: block;
	block-size: 19px;
	inline-size: auto;
	max-inline-size: none;
}

/*
 * The menu scrolls sideways when it does not fit. The 4px padding (offset by
 * a negative margin) keeps the focus ring inside the scroll box.
 */
.meg-header__nav {
	min-inline-size: 0;
	margin: -4px;
	padding: 4px;
	overflow-x: auto;
	scrollbar-width: none;
}

.meg-header__nav::-webkit-scrollbar {
	display: none;
}

html body.meg .meg-nav {
	display: flex;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

html body.meg .meg-nav li {
	margin: 0;
	padding: 0;
}

html body.meg .meg-nav a {
	position: relative;
	display: block;
	padding-block: 6px;
	font: 500 15px/1.2 var(--meg-sans);
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
}

html body.meg .meg-nav a:hover::after,
html body.meg .meg-nav a:focus-visible::after,
html body.meg .meg-nav .current-menu-item > a::after,
html body.meg .meg-nav .current-menu-parent > a::after,
html body.meg .meg-nav .current-post-ancestor > a::after,
html body.meg .meg-nav .current-category-ancestor > a::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 2px;
	background: var(--meg-dusk);
}

.meg-header__lang {
	flex: none;
}

html body.meg .meg-lang {
	display: flex;
	align-items: center;
	gap: 8px;
	font: 700 15px/1.2 var(--meg-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

html body.meg .meg-lang__sep {
	color: var(--meg-muted);
}

html body.meg .meg-lang__item {
	padding-block: 6px;
	border: 0;
	background: none;
	color: var(--meg-muted);
	text-decoration: none;
}

html body.meg .meg-lang__item.is-current {
	color: var(--meg-kohl);
	pointer-events: none;
}

html body.meg .meg-lang__item:not(.is-current):hover,
html body.meg .meg-lang__item:not(.is-current):focus-visible {
	color: var(--meg-kohl);
	text-decoration: underline 2px;
	text-decoration-color: var(--meg-dusk);
	text-underline-offset: 6px;
}

html body.meg .meg-header__search {
	display: grid;
	flex: none;
	place-items: center;
	inline-size: 38px;
	block-size: 38px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--meg-line);
	border-radius: 50%;
	color: var(--meg-kohl);
	background: none;
	cursor: pointer;
}

.meg-header__search[aria-expanded="true"] {
	border-color: var(--meg-kohl);
}

/* Footer ------------------------------------------------------------------ */

html body.meg .meg-footer {
	padding-block: 64px 32px;
	background-color: var(--meg-kohl);
	color: var(--meg-offwhite);
	font-family: var(--meg-sans);
}

html body.meg-article .meg-footer {
	border-block-start: 1px solid var(--meg-line-dk);
}

html body.meg .meg-footer a {
	color: var(--meg-offwhite);
	text-decoration: none;
}

.meg-footer__wrap {
	max-inline-size: var(--meg-max);
	margin-inline: auto;
	padding-inline: var(--meg-pad);
}

.meg-footer__name {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

/* Social links (bold) at the inline start, footer menu (muted) at the end. */
.meg-footer__cols {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: space-between;
	margin-block-start: 36px;
	padding-block-end: 28px;
	border-block-end: 1px solid var(--meg-line-dk);
}

.meg-footer__cols,
.meg-footer__base {
	font: 400 11px/1.2 var(--meg-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

html body.meg .meg-footer__social,
html body.meg .meg-footer__menu-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

html body.meg .meg-footer__social a {
	font-weight: 700;
}

html body.meg .meg-footer__menu-list a {
	color: var(--meg-muted-dk);
}

.meg-footer__base {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin-block-start: 20px;
	color: var(--meg-muted-dk);
}

html body.meg .meg-footer__copy,
html body.meg .meg-footer__note,
html body.meg .meg-footer__parent {
	margin: 0;
}

/* Parent-brand line at the inline end, muted like the copyright. */
html body.meg .meg-footer__parent {
	margin-inline-start: auto;
}

/* Search form (list, search and page heads). */
html body.meg .meg-search {
	display: flex;
	gap: 12px;
	align-items: center;
	margin: 0;
	border-block-end: 1px solid var(--meg-kohl);
}

.meg-search__label {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

html body.meg .meg-search__field {
	flex: 1;
	min-inline-size: 0;
	block-size: auto;
	padding-block: 12px;
	padding-inline: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--meg-kohl);
	font: 500 20px/1.3 var(--meg-sans);
	box-shadow: none;
	outline-offset: 2px;
}

html body.meg .meg-search__submit {
	flex: none;
	padding: 14px 20px;
	border: 0;
	border-radius: 0;
	background: var(--meg-kohl);
	color: var(--meg-offwhite);
	font: 700 12px/1 var(--meg-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

/* Search overlay -------------------------------------------------------------- */

/*
 * Full-screen dialog over the page (and the header), Off-white, scrolls on its
 * own while the page behind is locked (html.meg-srch-open). Field: big display
 * type on a single 2px Kohl underline, "Esc ×" close at the inline end; Enter
 * submits to the results page (no visible button).
 */
html.meg-srch-open,
html.meg-srch-open body {
	overflow: hidden;
}

html body.meg .meg-srch {
	position: fixed;
	inset: 0;
	z-index: 100000;
	box-sizing: border-box;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-block: calc(env(safe-area-inset-top, 0px) + 28px) 48px;
	background: var(--meg-offwhite);
	color: var(--meg-kohl);
	font-family: var(--meg-sans);
	animation: meg-srch-in 0.16s ease-out;
}

/* Below the admin bar, which stays on top. */
html body.admin-bar .meg-srch {
	inset-block-start: 32px;
}

@media (max-width: 782px) {
	html body.admin-bar .meg-srch {
		inset-block-start: 46px;
	}
}

html body.meg .meg-srch[hidden] {
	display: none;
}

@keyframes meg-srch-in {
	from {
		opacity: 0;
	}
}

.meg-srch__inner {
	box-sizing: border-box;
	max-inline-size: var(--meg-max);
	margin-inline: auto;
	padding-inline: var(--meg-pad);
}

html body.meg .meg-srch .meg-search {
	display: flex;
	flex-wrap: nowrap;
	gap: 16px;
	align-items: center;
	margin: 0;
	padding: 0 0 14px;
	border: 0;
	border-block-end: 2px solid var(--meg-kohl);
	background: none;
}

html body.meg .meg-srch .meg-search__icon {
	display: block;
	flex: none;
	inline-size: 26px;
	block-size: 26px;
	color: var(--meg-kohl);
}

html body.meg .meg-srch .meg-search__field {
	display: block;
	flex: 1 1 auto;
	inline-size: auto;
	min-inline-size: 0;
	block-size: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--meg-kohl);
	font: 800 clamp(26px, 4vw, 52px)/1.1 var(--meg-display);
	font-style: normal;
	letter-spacing: -0.01em;
	box-shadow: none;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

html body.meg .meg-srch .meg-search__field::placeholder {
	color: #b9b7b1;
	opacity: 1;
}

html body.meg .meg-srch .meg-search__field::-webkit-search-cancel-button {
	display: none;
}

/* The field's own outline is off; the underline thickens to show focus. */
html body.meg .meg-srch .meg-search:focus-within {
	border-block-end-color: var(--meg-kohl);
	box-shadow: 0 1px 0 0 var(--meg-kohl);
}

html body.meg .meg-srch .meg-search__close {
	display: flex;
	flex: none;
	gap: 10px;
	align-items: center;
	block-size: 42px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--meg-line);
	border-radius: 0;
	background: none;
	color: var(--meg-kohl);
	font: 400 22px/1 var(--meg-sans);
	cursor: pointer;
}

html body.meg .meg-srch .meg-search__close:hover {
	border-color: var(--meg-kohl);
}

html body.meg .meg-srch .meg-search__close .meg-mono {
	font-size: 10px;
	color: var(--meg-muted);
}

/* Before typing: popular searches and Browse chips. */
html body.meg .meg-srch__h {
	margin: 32px 0 12px;
	color: var(--meg-muted);
}

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

html body.meg .meg-srch__chips li {
	margin: 0;
	padding: 0;
}

html body.meg .meg-srch__chip {
	display: block;
	margin: 0;
	padding: 9px 16px;
	border: 1px solid var(--meg-line);
	border-radius: 0;
	background: none;
	color: var(--meg-kohl);
	font: 500 16px/1.2 var(--meg-sans);
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
}

html body.meg .meg-srch__chip:hover {
	border-color: var(--meg-kohl);
	color: var(--meg-kohl);
	text-decoration: none;
}

html body.meg .meg-srch__chips--cats .meg-srch__chip,
html body.meg .meg-srch__chips--cats .meg-srch__chip:hover,
html body.meg .meg-srch__chips--cats .meg-srch__chip:focus-visible {
	border-color: var(--meg-kohl);
	background: var(--meg-kohl);
	color: var(--meg-offwhite);
}

html body.meg .meg-srch__chips--cats .meg-srch__chip:hover {
	text-decoration: underline;
	text-decoration-color: var(--meg-dusk);
	text-underline-offset: 4px;
}

/* While typing: count, then a two-column result list (one column below 760px). */
.meg-srch__bar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	align-items: baseline;
	justify-content: space-between;
	margin-block: 24px 4px;
}

html body.meg .meg-srch__count {
	margin: 0;
	color: var(--meg-muted);
}

html body.meg .meg-srch__all {
	color: var(--meg-kohl);
	text-decoration: none;
}

html body.meg .meg-srch__all[hidden] {
	display: none;
}

html body.meg .meg-srch__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

html body.meg .meg-srch__list li {
	margin: 0;
	padding: 0;
	min-inline-size: 0;
}

html body.meg .meg-srch__item {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: 16px;
	align-items: center;
	padding-block: 14px;
	border-block-end: 1px solid var(--meg-line);
	color: var(--meg-kohl);
	text-decoration: none;
}

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

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

html body.meg .meg-srch__title {
	display: block;
	margin-block-start: 5px;
	font: 700 17px/1.25 var(--meg-sans);
	overflow-wrap: anywhere;
}

html body.meg .meg-srch__item:hover .meg-srch__title,
html body.meg .meg-srch__item:focus-visible .meg-srch__title {
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.22em;
}

html body.meg .meg-srch__title mark {
	padding: 0 1px;
	background: var(--meg-dusk-soft);
	color: inherit;
}

html body.meg .meg-srch__none {
	margin: 24px 0 0;
	color: var(--meg-kohl);
	font: 500 17px/1.4 var(--meg-sans);
}

html body.meg .meg-srch__eg {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--meg-kohl);
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--meg-dusk);
	cursor: pointer;
}

/* Screen reader announcement of the result count. */
.meg-srch__status {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

html body.meg .meg-srch :focus-visible:not(.meg-search__field) {
	outline: 2px solid var(--meg-kohl);
	outline-offset: 2px;
}

@media (max-width: 760px) {
	html body.meg .meg-srch__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 560px) {
	html body.meg .meg-srch .meg-search {
		gap: 10px;
	}

	html body.meg .meg-srch .meg-search__icon {
		inline-size: 20px;
		block-size: 20px;
	}

	html body.meg .meg-srch .meg-search__close {
		block-size: 36px;
		padding: 0 10px;
	}

	html body.meg .meg-srch__item {
		grid-template-columns: 96px minmax(0, 1fr);
		gap: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html body.meg .meg-srch {
		animation: none;
	}

	html body.meg .meg-srch .meg-art img {
		transition: none;
		transform: none;
	}
}

/* Below 760px the menu wraps to a second, side-scrolling row. */
@media (max-width: 760px) {
	.meg-header__bar {
		flex-wrap: wrap;
		gap: 10px;
		block-size: auto;
		padding-block: 12px;
	}

	.meg-header__nav {
		order: 3;
		inline-size: calc(100% + 8px);
		margin-inline: -4px;
	}

	/*
	 * The list is as wide as its items, so the nav's end padding stays in the
	 * scroll range and the last item stops one gutter from the edge, like the first.
	 */
	html body.meg .meg-nav {
		gap: 20px;
		inline-size: max-content;
	}
}

@media (max-width: 782px) {
	html body.admin-bar .meg-header {
		inset-block-start: 46px;
	}
}

/* Below 600px the admin bar scrolls away with the page. */
@media (max-width: 600px) {
	html body.admin-bar .meg-header {
		inset-block-start: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	html body.meg :is(.meg-header, .meg-footer, main.meg-home-main, main.meg-article-main, main.meg-list-main) *,
	html body.meg :is(.meg-header, .meg-footer, main.meg-home-main, main.meg-article-main, main.meg-list-main) *::before,
	html body.meg :is(.meg-header, .meg-footer, main.meg-home-main, main.meg-article-main, main.meg-list-main) *::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto;
	}

	/* No hover zoom on story images. */
	html body.meg a:hover .meg-art img {
		transform: none;
	}

	/* The parent theme may turn on smooth scrolling for the whole page. */
	html:has(> body.meg) {
		scroll-behavior: auto;
	}
}

/* Focus ring: Kohl on Off-white, Dusk on Kohl (footer and dark sections). */
html body.meg :where(.meg-header, .meg-footer, main.meg-home-main, main.meg-article-main, main.meg-list-main) :focus-visible {
	outline: 2px solid var(--meg-kohl);
	outline-offset: 2px;
}

html body.meg :is(.meg-footer, .meg-dark) :focus-visible {
	outline-color: var(--meg-dusk);
}

/* Footer link hover: kept last so selector specificity only ascends. */

html body.meg .meg-footer a:hover,
html body.meg .meg-footer a:focus-visible {
	color: var(--meg-offwhite);
	text-decoration: underline;
	text-decoration-color: var(--meg-dusk);
}

/* Shared components (home, article, lists) ---------------------------------- */

.meg-wrap {
	box-sizing: border-box;
	max-inline-size: var(--meg-max);
	margin-inline: auto;
	padding-inline: var(--meg-pad);
}

html body.meg .meg-mono {
	font: 400 11px/1.2 var(--meg-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Always upright: the parent heading styles are italic and there is no italic face. */
html body.meg .meg-display,
html body.meg .meg-display * {
	font-style: normal;
}

html body.meg .meg-display {
	font-family: var(--meg-display);
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: -0.01em;
	text-transform: none;
}

html body.meg .meg-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: 400 11px/1 var(--meg-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.meg-tag::before {
	content: "";
	flex: none;
	inline-size: 7px;
	block-size: 7px;
	background-color: var(--meg-dusk);
}

.meg-section {
	padding-block: var(--meg-sec);
}

html body.meg .meg-dark {
	background-color: var(--meg-kohl);
	color: var(--meg-offwhite);
}

/* Section head: h2 with optional Dusk highlight, optional "All →" link. */
.meg-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-block-end: 24px;
	padding-block-end: 14px;
	border-block-end: 1px solid var(--meg-line);
}

.meg-dark .meg-head {
	border-block-end-color: var(--meg-line-dk);
}

html body.meg .meg-head__title {
	margin: 0;
	font-size: clamp(28px, 3vw, 40px);
	color: inherit;
}

.meg-head__title span {
	color: var(--meg-dusk);
}

html body.meg .meg-head__all {
	flex: none;
	font: 400 11px/1 var(--meg-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

/* Arrow glyphs point the reading direction. */
html[dir="rtl"] .meg-arrow {
	display: inline-block;
	transform: scaleX(-1);
}

/* Image box: grey placeholder when the post has no featured image. */
html body.meg .meg-art {
	position: relative;
	display: block;
	overflow: hidden;
	background-color: var(--meg-art);
	text-decoration: none;
}

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

/* Story image zooms on hover of the link around it. */
html body.meg a:hover .meg-art img {
	transform: scale(1.04);
}

/* Title underline: hidden until the link around it is hovered or focused. */
html body.meg .meg-ul {
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.22em;
	text-decoration-color: transparent;
	transition: text-decoration-color 0.25s ease;
}

html body.meg a:hover .meg-ul,
html body.meg a:focus-visible .meg-ul {
	text-decoration-color: currentColor;
}

html body.meg .meg-dark .meg-art {
	background-color: var(--meg-art-dark);
}

/* Card: 4/3 image, tag, title, dek; list row with square thumb below 760px. */
.meg-card {
	min-inline-size: 0;
}

html body.meg .meg-card__art {
	aspect-ratio: 4 / 3;
	margin-block-end: 16px;
}

html body.meg .meg-card__title {
	margin: 12px 0 6px;
	font-style: normal;
	font: 700 24px/1.12 var(--meg-sans);
	letter-spacing: -0.01em;
	text-transform: none;
	color: inherit;
}

html body.meg .meg-card__link {
	color: inherit;
	text-decoration: none;
}

html body.meg .meg-card__dek {
	margin: 0;
	color: var(--meg-muted);
}

/* Card grid: 3 columns; one column of list-row cards below 760px. */
.meg-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 48px 32px;
}

/* Card row (home rows, article "More" row): 4 columns, 2 below 1000px; 3-column modifier, 1 below 760px. */
.meg-cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}

.meg-cards--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

html body.meg .meg-hcard {
	display: grid;
	align-content: start;
	gap: 12px;
	min-inline-size: 0;
	text-decoration: none;
}

html body.meg .meg-hcard__art {
	aspect-ratio: 616 / 353;
}

html body.meg .meg-hcard--egg .meg-hcard__art {
	aspect-ratio: 4 / 5;
}

/*
 * Image fills its box whatever the inherited img rules: pinned to the box,
 * cropped to cover. Wide thumbnails in the 4/5 box keep their middle.
 */
html body.meg .meg-hcard__art img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	max-block-size: none;
	object-fit: cover;
	object-position: 50% 50%;
}

html body.meg .meg-hcard--egg .meg-hcard__art img {
	object-position: 50% 35%;
}

html body.meg .meg-cards--3 .meg-hcard__art {
	aspect-ratio: 4 / 3;
}

html body.meg .meg-hcard__title {
	margin: 0;
	font: 700 18px/1.25 var(--meg-sans);
	letter-spacing: 0;
	text-transform: none;
	color: inherit;
}

html body.meg .meg-hcard__meta {
	color: var(--meg-muted);
}

html body.meg .meg-dark .meg-hcard__meta {
	color: var(--meg-muted-dk);
}

@media (max-width: 1000px) {
	.meg-cards:not(.meg-cards--3) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.meg-cards--3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

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

	.meg-card {
		display: grid;
		grid-template-columns: 112px minmax(0, 1fr);
		gap: 0 14px;
		align-items: start;
		align-content: start;
	}

	html body.meg .meg-card__art {
		grid-row: span 3;
		aspect-ratio: 1;
		margin: 0;
	}

	html body.meg .meg-card__title {
		margin: 8px 0 4px;
		font-size: 18px;
	}

	html body.meg .meg-card__dek {
		font-size: 14px;
	}
}

/* Review scores (home rail, "How we score" dialog) ------------------------- */

html body.meg .meg-sr {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Score ring: --meg-c (tier colour) set inline; the arc starts at 12 o'clock. */
html body.meg .meg-ring {
	position: relative;
	display: block;
	flex: none;
	inline-size: 54px;
	block-size: 54px;
}

html body.meg .meg-ring svg {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	transform: rotate(-90deg);
}

.meg-ring__trk,
.meg-ring__val {
	fill: none;
	stroke-width: 4;
}

.meg-ring__trk {
	stroke: var(--meg-line-dk);
}

.meg-ring__val {
	stroke: var(--meg-c, var(--meg-dusk));
}

html body.meg .meg-ring__n {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font: 700 22px/1 var(--meg-sans);
	font-variant-numeric: tabular-nums;
	color: var(--meg-c, var(--meg-dusk));
}

/* "How we score" dialog: printed on every view, outside the MEG containers. */
html body.meg .meg-hws {
	box-sizing: border-box;
	inline-size: min(640px, calc(100vw - 32px));
	max-inline-size: none;
	max-block-size: calc(100dvh - 32px);
	margin: auto;
	padding: 0;
	overflow: auto;
	border: 0;
	background: var(--meg-kohl);
	color: var(--meg-offwhite);
	font: 500 16px/1.45 var(--meg-sans);
	-webkit-font-smoothing: antialiased;
}

html body.meg .meg-hws::backdrop {
	background: rgba(14, 14, 14, 0.6);
}

.meg-hws__in {
	padding-block: 32px 28px;
	padding-inline: clamp(20px, 4vw, 40px);
}

.meg-hws__top {
	display: flex;
	align-items: start;
	justify-content: space-between;
	gap: 16px;
}

html body.meg .meg-hws__title {
	margin: 0;
	font-size: clamp(28px, 4vw, 40px);
	color: inherit;
}

html body.meg .meg-hws__x {
	display: grid;
	flex: none;
	place-items: center;
	inline-size: 40px;
	block-size: 40px;
	padding: 0;
	border: 1px solid var(--meg-line-dk);
	border-radius: 50%;
	background: none;
	color: var(--meg-offwhite);
	font: 400 20px/1 var(--meg-sans);
	cursor: pointer;
}

html body.meg .meg-hws__x:hover {
	border-color: var(--meg-offwhite);
}

html body.meg .meg-hws :focus-visible {
	outline: 2px solid var(--meg-dusk);
	outline-offset: 2px;
}

html body.meg .meg-hws__lede {
	max-inline-size: 46ch;
	margin: 10px 0 22px;
	color: var(--meg-muted-dk);
	font-size: 16px;
}

.meg-hws__scale {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	gap: 4px;
	margin-block-end: 6px;
}

.meg-hws__scale span {
	block-size: 10px;
	background: var(--meg-c);
}

html body.meg .meg-hws__scale-l {
	display: flex;
	justify-content: space-between;
	margin-block-end: 24px;
	color: var(--meg-muted-dk);
}

html body.meg .meg-hws__bands {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

html body.meg .meg-hws__bands li {
	display: grid;
	grid-template-columns: 54px minmax(0, 1fr);
	gap: 18px;
	align-items: center;
	margin: 0;
	padding-block: 14px;
	border-block-start: 1px solid var(--meg-line-dk);
}

html body.meg .meg-hws__band {
	display: block;
	font: 700 18px/1.2 var(--meg-sans);
	color: var(--meg-c);
}

html body.meg .meg-hws__band .meg-mono {
	margin-inline-start: 4px;
	font-size: 10px;
	color: var(--meg-muted-dk);
}

html body.meg .meg-hws__bands p {
	margin: 4px 0 0;
	font-size: 15px;
	line-height: 1.4;
	color: var(--meg-offwhite);
	opacity: 0.82;
}

html body.meg .meg-hws__fine {
	margin: 18px 0 0;
	font-size: 10px;
	line-height: 1.6;
	color: var(--meg-muted-dk);
}