/**
 * ARC premium parity styles — mega menu, tabs, bento, bottom nav, etc.
 */

/* Mega menu — explicit toggle only; hover previews hijacked normal submenus. */
.arc-mega-menu.is-open {
	display: block;
}

.arc-mega-menu {
	background: var(--wp--preset--color--surface);
	border-block: 1px solid var(--wp--preset--color--border);
	display: none;
	padding-block: var(--arc-space-40);
	position: relative;
	z-index: 90;
}

.arc-mega-menu__inner {
	display: grid;
	gap: var(--arc-space-40);
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.arc-mega-menu__heading {
	display: block;
	font-size: var(--arc-text-s);
	font-weight: 800;
	letter-spacing: 0.06em;
	margin-bottom: var(--arc-space-20);
	text-transform: uppercase;
}

.arc-mega-menu__featured {
	display: grid;
	font-size: var(--arc-text-s);
	gap: var(--arc-space-20);
}

.arc-mega-menu__featured img {
	aspect-ratio: 4 / 3;
	border-radius: 0.5rem;
	object-fit: cover;
	width: 100%;
}

/* Card badges */
.arc-card__badge {
	background: var(--wp--preset--color--brand);
	border-radius: 999px;
	color: var(--arc-on-brand, var(--wp--preset--color--background));
	font-size: var(--arc-text-3xs);
	font-weight: 800;
	left: 0.35rem;
	letter-spacing: 0.08em;
	padding: var(--arc-space-10) 0.45rem;
	position: absolute;
	text-transform: uppercase;
	top: 0.35rem;
	z-index: 2;
}

/*
 * The badge is pinned to the card's top corner because it is meant to sit on the
 * thumbnail. With no thumbnail to sit on it landed on the kicker instead, so the
 * label and the category name printed over each other.
 */
.arc-card--no-image .arc-card__badge {
	align-self: start;
	display: inline-block;
	/* The kicker below carries a -0.4rem top margin to widen its tap target, so
	 * the gap has to clear that before it counts for anything. */
	margin-bottom: var(--arc-space-30);
	position: static;
}

.arc-card__badge--sponsored {
	background: var(--wp--preset--color--muted);
}

.arc-card__badge--opinion {
	background: var(--wp--preset--color--accent);
}

/*
 * Two things were wrong here, and the first hid the second.
 *
 * --wp--preset--color--highlight does not exist. The palette emits the highlight as
 * --arc-highlight (inc/presets.php), so this declaration was invalid and the browser
 * dropped it: these badges have always rendered with the base brand background, and
 * the media colour never reached the screen. Nothing reported it, the same way
 * nothing reported box-shadow being handed a colour.
 *
 * Naming the real token would have exposed the second problem. The badge inherits
 * color: var(--arc-on-brand) from .arc-card__badge, which is chosen against the
 * brand, not against the highlight -- and highlight is a bright, saturated colour.
 * On-brand ink on the raw highlight measures 1.86:1 at worst and fails on 17 of the
 * 50 palette/scheme pairs. No ink available in CSS fixes it: the page text token
 * fails on 37, and even a hue-matched near-black derived the way
 * arc_color_pick_on_color() does still fails on 2.
 *
 * So the highlight is mixed towards the brand instead of replacing it. The hue comes
 * through, the ink stays the one that was validated against brand. 25% is the most
 * highlight that clears AA on all 50 pairs (4.56:1) and 30% already fails; 20% sits
 * at 4.87:1 and leaves margin. Do not raise it to make the badge louder.
 */
.arc-card__badge--video,
.arc-card__badge--gallery,
.arc-card__badge--audio {
	background: color-mix(in srgb, var(--arc-highlight) 20%, var(--wp--preset--color--brand));
}

.arc-card__video {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.arc-card__video iframe {
	height: 100%;
	width: 100%;
}

/* Tabbed posts */
.arc-tabbed-posts {
	margin-block: var(--arc-section-gap, 2rem);
}

/*
 * Every other section gets a block gap between its ruled header and whatever
 * follows, but this section is built from plain divs, so the tab strip sat
 * directly on the rule. Space the header rather than the strip -- the gap then
 * holds up whether or not the strip is there to render.
 */
.arc-tabbed-posts .arc-section__header {
	margin-bottom: var(--arc-space-55);
}

.arc-tabbed-posts__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--arc-space-15);
	margin-bottom: var(--arc-space-40);
}

/*
 * An unfilled control has nothing but its ring to say where it is, and this one
 * was drawn in the plain border token: 1.2:1 against the page at the flattest
 * palette, where a separator is fine and a control is not. It takes the shared
 * control ring, which is held at 3:1 per palette in inc/palette-color.php.
 */
.arc-tabbed-posts__tab {
	background: transparent;
	border: 1px solid var(--arc-control-ring, var(--wp--preset--color--border));
	border-radius: 999px;
	cursor: pointer;
	font-size: var(--arc-text-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: var(--arc-space-15) 0.85rem;
	text-transform: uppercase;
}

.arc-tabbed-posts__tab.is-active {
	background: var(--wp--preset--color--brand);
	border-color: var(--wp--preset--color--brand);
	color: var(--arc-on-brand, var(--wp--preset--color--background));
}

.arc-tabbed-posts__panel:not(.is-active) {
	display: none;
}

/* Bento grid */
.arc-bento__grid {
	display: grid;
	gap: var(--arc-space-40);
	grid-template-columns: 1.4fr 1fr;
}

.arc-bento__side {
	display: grid;
	gap: var(--arc-space-30);
}

/*
 * The side column stacks two cards, so it is normally the taller of the two and
 * the lead card was left floating above a block of empty page. With uncropped
 * media the lead's image cannot stretch to take up the slack, so the card takes
 * the full height and its date anchors to the bottom, which reads as a composed
 * block rather than a hole. The longer standfirst on lead cards covers the rest.
 */
.arc-bento__lead > .arc-card {
	height: 100%;
}

.arc-bento__lead > .arc-card > .arc-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.arc-bento__lead > .arc-card .arc-card__excerpt {
	-webkit-line-clamp: 6;
}

.arc-bento__lead > .arc-card .arc-card__meta {
	margin-top: auto;
}

/*
 * With media shown uncropped, one portrait photo rendered 461px tall in a 538px
 * column and set the height of the whole module on its own. Capping the box lets
 * such an image scale down inside it -- still uncropped, just no longer able to
 * dictate the layout around it.
 */
.arc-bento__side .arc-card__image,
.arc-bento__side .wp-block-post-featured-image {
	max-height: 20rem;
}

.arc-bento__side .arc-card__image img {
	height: 100%;
	max-height: 20rem;
}

/*
 * Grid would start a short bottom row in track one and leave the slack on the
 * right, so a row one card short read as a mistake. Flex with a fixed basis
 * keeps the tracks even when the row is full and splits the slack either side
 * when it is not -- the same treatment the category sections get.
 */
.arc-bento__row {
	--arc-bento-row-gap: 0.75rem;
	--arc-bento-row-basis: calc((100% - var(--arc-bento-row-gap)) / 2);

	display: flex;
	flex-wrap: wrap;
	gap: var(--arc-bento-row-gap);
	grid-column: 1 / -1;
	justify-content: center;
}

.arc-bento__row > .arc-card {
	flex: 0 1 var(--arc-bento-row-basis);
	max-width: 100%;
	min-width: 0;
}

/* Newsletter */
/*
 * The panel paints its own surface, so it has to name the ink that goes on it:
 * inheriting left the heading white once it sat inside a dark footer.
 */
.arc-newsletter {
	background: color-mix(in srgb, var(--wp--preset--color--brand) 8%, var(--wp--preset--color--surface));
	border: 1px solid var(--arc-panel-border, var(--wp--preset--color--border));
	color: var(--wp--preset--color--text);
	border-radius: var(--arc-panel-radius);
	margin-block: var(--arc-space-50);
	padding: var(--arc-space-45);
	position: relative;
}

.arc-newsletter__form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--arc-space-20);
	margin-top: var(--arc-space-30);
}

/*
 * A bare <input> inherits the UA's inset border, 2px padding and 13px font, so
 * the field looked unstyled next to the pill-shaped submit button. Match the
 * button's shape and metrics instead.
 */
.arc-newsletter__hp {
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.arc-newsletter__status {
	font-size: var(--arc-text-s);
	margin: var(--arc-space-20) 0 0;
}

.arc-newsletter__status[data-tone="ok"] {
	color: var(--wp--preset--color--brand);
}

.arc-newsletter__form input[type="email"] {
	/* Left to the UA the field was white in one scheme and pure black in the
	 * other, neither of which is a colour this theme uses. It sits on the panel,
	 * so it takes the panel's surface rather than the page's. */
	background: var(--wp--preset--color--surface);
	/* Same ring as the button it is welded to; see .arc-btn in main.css. */
	border: 1px solid var(--arc-control-ring, color-mix(in srgb, var(--wp--preset--color--brand) 30%, var(--wp--preset--color--border)));
	border-radius: 999px;
	color: var(--wp--preset--color--text);
	flex: 1 1 12rem;
	font: inherit;
	font-size: var(--arc-text-s);
	min-height: 2.65rem;
	min-width: 0;
	padding: var(--arc-space-15) 1rem;
}

/* Most read */
.arc-most-read__list {
	counter-reset: arc-most-read;
	list-style: none;
	margin: 0;
	padding: 0;
}

.arc-most-read__list li {
	align-items: start;
	display: grid;
	gap: var(--arc-space-15);
	grid-template-columns: auto 1fr;
	margin-bottom: var(--arc-space-25);
}

.arc-most-read__list a {
	/* Single-line entries would otherwise be a 20px target. */
	display: block;
	min-height: 1.5rem;
}

.arc-most-read__rank {
	color: var(--wp--preset--color--brand);
	font-size: var(--arc-text-ml);
	font-weight: 800;
	line-height: 1.2;
}

/*
 * Load more.
 *
 * The hairline that used to sit here came from the pagination block's border-top and
 * left with it. It is deliberately not restored. It earned its keep when this strip
 * held three groups of controls -- numbers, previous, next -- because a fence is what
 * told the reader that a busy band was chrome and not content. There is one centred
 * control now, and it is already strongly figured: a pill with its own border, fill
 * and arrow. A rule above it introduces something that needs no introduction, and on
 * mobile, where the button runs the full width a finger's width under a full-width
 * card, it would add a third horizontal edge inside 24px.
 *
 * The separation the line provided is kept as space instead. The old composition put
 * the controls 3.5rem below the grid (2rem of margin, then the rule, then 1.5rem of
 * padding); dropping the rule without touching the margin would have quietly halved
 * that to 2rem. 3rem is the step on the theme.json scale nearest the distance that
 * was there, so the proportion survives and the edge does not.
 *
 * Worth knowing if this is revisited: the wrap aligns exactly with the post grid at
 * every width -- both are 981px at 1440 and 364px at 390 -- so a rule here would land
 * flush with the cards. Alignment was not the reason against it.
 */
.arc-load-more-wrap {
	margin-block: var(--arc-space-70);
	text-align: center;
}

.arc-load-more.is-loading {
	opacity: 0.65;
	pointer-events: none;
}

/* Archive toolbar */
.arc-archive-toolbar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: var(--arc-space-40);
}

.arc-archive-toolbar__views {
	display: inline-flex;
	gap: var(--arc-space-10);
}

/* Unfilled control, same reasoning as .arc-tabbed-posts__tab above. */
.arc-archive-toolbar__btn {
	align-items: center;
	background: transparent;
	border: 1px solid var(--arc-control-ring, var(--wp--preset--color--border));
	color: var(--arc-brand, var(--wp--preset--color--text));
	border-radius: 999px;
	cursor: pointer;
	display: inline-flex;
	font-size: var(--arc-text-xs);
	font-weight: 700;
	gap: 0.35rem;
	justify-content: center;
	min-height: 2.25rem;
	padding: var(--arc-space-15) 0.9rem;
}

.arc-archive-toolbar__btn.is-active {
	background: var(--wp--preset--color--brand);
	border-color: var(--wp--preset--color--brand);
	color: var(--arc-on-brand, var(--wp--preset--color--background));
}

/*
 * The two views used to differ only in the excerpt's `display` value, which
 * renders identically either way: both drew the same magazine grid, so the
 * control looked dead. Each view now owns the breakpoint where it has something
 * to say. Grid is the desktop default and list the mobile one, so neither class
 * changes what a visitor who never touches the toggle sees.
 *
 * List must own the *container* as well as the card. Archive balanced-grid
 * (`display:flex` + `--arc-balanced-basis` 25–33%) packs several items on a
 * row; the old reset only set `grid-template-columns`, which does nothing on
 * a flex container. Each card then tried to be image+text inside an ~80–200px
 * track, so the kicker wrapped letter-by-letter and the title vanished.
 */
body.arc-archive-view-list .arc-archive-grid,
body.arc-archive-view-list .arc-archive-grid.arc-balanced-grid,
body.arc-archive-view-list .arc-archive-grid.is-layout-grid,
body.arc-archive-view-list .arc-search-list {
	display: flex !important;
	flex-direction: column;
	flex-wrap: nowrap;
	grid-template-columns: minmax(0, 1fr) !important;
}

body.arc-archive-view-list .arc-archive-grid > li,
body.arc-archive-view-list .arc-archive-grid > li:first-child:not(:nth-last-child(-n + 2)),
body.arc-archive-view-list .arc-archive-grid.arc-balanced-grid > li,
body.arc-archive-view-list .arc-search-list > li {
	--arc-balanced-basis: 100%;
	flex: 0 0 100%;
	grid-column: auto;
	grid-row: auto;
	max-width: 100%;
	width: 100%;
}

body.arc-archive-view-list .arc-archive-grid .arc-card--archive :where(.arc-card__categories, .wp-block-post-terms) {
	white-space: normal;
	writing-mode: horizontal-tb;
}

body.arc-archive-view-list .arc-archive-grid .arc-card--archive a.arc-kicker,
body.arc-archive-view-list .arc-archive-grid .arc-card--archive a.arc-card__category {
	white-space: nowrap;
}

@media (min-width: 782px) {
	body.arc-archive-view-list .arc-archive-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The second selector mirrors the lead card's span rule exactly; anything
	 * shorter loses to it on specificity and leaves an implicit second column. */
	body.arc-archive-view-list .arc-archive-grid > li,
	body.arc-archive-view-list .arc-archive-grid > li:first-child:not(:nth-last-child(-n + 2)) {
		grid-column: auto;
		grid-row: auto;
	}

	body.arc-archive-view-list .arc-archive-grid .arc-card--archive {
		align-items: start;
		column-gap: 1.35rem;
		display: grid;
		grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
		grid-template-rows: auto auto 1fr auto;
		row-gap: var(--arc-space-15);
	}

	body.arc-archive-view-list .arc-archive-grid .arc-card--archive > .wp-block-post-featured-image {
		grid-column: 1;
		grid-row: 1 / span 4;
		margin: 0;
	}

	body.arc-archive-view-list .arc-archive-grid .arc-card--archive > :not(.wp-block-post-featured-image) {
		grid-column: 2;
		margin: 0;
	}

	/* The excerpt is the point of the wider row, so let it run longer here. */
	body.arc-archive-view-list .arc-archive-grid .arc-card--archive :where(.arc-card__excerpt, .wp-block-post-excerpt) {
		-webkit-line-clamp: 3;
		display: -webkit-box;
	}

	/* Without a thumbnail the media column would stand empty. */
	body.arc-archive-view-list .arc-archive-grid .arc-card--archive:not(:has(.wp-block-post-featured-image)) {
		grid-template-columns: minmax(0, 1fr);
	}

	body.arc-archive-view-list .arc-archive-grid .arc-card--archive:not(:has(.wp-block-post-featured-image)) > * {
		grid-column: 1;
	}
}

@media (max-width: 781px) {
	/* Mobile defaults to the compact river, so grid is the one with work to do:
	 * full-width media on top of the text instead of a 6.75rem thumbnail beside
	 * it. The river rules use the same specificity, hence the repeated compound. */
	body.arc-archive-view-grid .arc-archive-grid .arc-card--archive,
	body.arc-archive-view-grid .arc-search-list .arc-card--archive {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--arc-space-20);
	}

	body.arc-archive-view-grid .arc-archive-grid .arc-card--archive > *,
	body.arc-archive-view-grid .arc-search-list .arc-card--archive > * {
		grid-column: 1;
		grid-row: auto;
	}

	body.arc-archive-view-grid .arc-archive-grid .arc-card--archive .wp-block-post-featured-image,
	body.arc-archive-view-grid .arc-search-list .arc-card--archive .wp-block-post-featured-image {
		max-height: none;
	}

	body.arc-archive-view-grid .arc-archive-grid .arc-card--archive :where(.arc-card__excerpt, .wp-block-post-excerpt),
	body.arc-archive-view-grid .arc-search-list .arc-card--archive :where(.arc-card__excerpt, .wp-block-post-excerpt) {
		-webkit-line-clamp: 2;
		min-height: calc(1.55em * 2);
		display: -webkit-box;
	}
}

/* Bottom nav */
.arc-bottom-nav {
	background: var(--wp--preset--color--background);
	border-top: 1px solid var(--wp--preset--color--border);
	bottom: 0;
	display: none;
	inset-inline: 0;
	padding-bottom: env(safe-area-inset-bottom, 0);
	position: fixed;
	z-index: 99998;
}

/*
 * Without a blur behind it, a translucent bar just leaks headlines through the
 * labels. Match the header: go translucent only where the backdrop can be blurred,
 * and keep the filter on a pseudo-element so the bar never becomes a containing
 * block for fixed children.
 */
@supports ((-webkit-backdrop-filter: blur(1rem)) or (backdrop-filter: blur(1rem))) {
	.arc-bottom-nav {
		background: color-mix(in srgb, var(--wp--preset--color--background) 88%, transparent);
	}

	.arc-bottom-nav::before {
		-webkit-backdrop-filter: blur(1rem) saturate(150%);
		backdrop-filter: blur(1rem) saturate(150%);
		content: "";
		inset: 0;
		pointer-events: none;
		position: absolute;
		z-index: -1;
	}
}

.arc-bottom-nav ul {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	list-style: none;
	margin: 0;
	padding: var(--arc-space-15) 0.25rem;
}

.arc-bottom-nav a {
	align-items: center;
	color: inherit;
	display: flex;
	flex-direction: column;
	font-size: var(--arc-text-3xs);
	font-weight: 650;
	gap: var(--arc-space-5);
	padding: var(--arc-space-15) 0.15rem;
	text-align: center;
	text-decoration: none;
}

.arc-bottom-nav__icon {
	background: currentColor;
	border-radius: 2px;
	display: block;
	height: 1rem;
	mask-size: contain;
	opacity: 0.85;
	width: 1rem;
}

.arc-bottom-nav__icon--home {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M4 10 12 3l8 7v10H4z'/%3E%3C/svg%3E");
}

.arc-bottom-nav__icon--grid {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='4' y='4' width='7' height='7'/%3E%3Crect x='13' y='4' width='7' height='7'/%3E%3Crect x='4' y='13' width='7' height='7'/%3E%3Crect x='13' y='13' width='7' height='7'/%3E%3C/svg%3E");
}

.arc-bottom-nav__icon--search {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
}

.arc-bottom-nav__icon--top {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 5v14M5 12l7-7 7 7'/%3E%3C/svg%3E");
}

/*
 * Desktop sticky share. .arc-share is a full-width panel, and the clone kept its
 * width, padding, border and background -- as a fixed element that resolved to
 * the viewport, so the rail rendered as a 1400px card laid over the article
 * with the icons floating in the middle of it.
 *
 * Double class + :not() on the panel rules: after the CSS context split,
 * `.arc-share` (singular) was concatenated after `.arc-share--desktop-sticky`
 * (core, because `--` was not a token boundary). Same specificity, later wins.
 */
.arc-share.arc-share--desktop-sticky {
	background: none;
	border: 0;
	box-shadow: none;
	display: none;
	flex-direction: column;
	gap: var(--arc-space-15);
	height: auto;
	margin: 0;
	max-width: 3.25rem !important;
	padding: 0;
	position: fixed;
	right: max(0.75rem, env(safe-area-inset-right));
	top: 40%;
	width: max-content;
	z-index: 99990;
}

.arc-share.arc-share--desktop-sticky.is-visible {
	display: flex;
}

/*
 * The rail is ~49px wide and needs a 12px offset, so it only clears the content
 * once the gutter is 61px a side -- the 1600px wide-width cap plus 122px. Below
 * that it sits on top of the sidebar's links instead of beside them, and the
 * article's own share row still covers sharing.
 */
@media (max-width: 1721px) {
	.arc-share.arc-share--desktop-sticky,
	.arc-share.arc-share--desktop-sticky.is-visible {
		display: none;
	}
}

.arc-share.arc-share--desktop-sticky h2,
.arc-share.arc-share--desktop-sticky .arc-btn span {
	display: none;
}

.arc-share.arc-share--desktop-sticky ul {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: var(--arc-space-15);
	justify-content: flex-start;
	list-style: none;
	margin: 0;
	padding: 0;
	width: max-content;
}

.arc-share.arc-share--desktop-sticky .arc-btn {
	height: 2.75rem;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0;
	width: 2.75rem;
}

/* Live blog */
.arc-live-blog__updates {
	border-left: 3px solid var(--wp--preset--color--brand);
	margin-block: var(--arc-space-50);
	padding-left: 1rem;
}

.arc-live-badge {
	background: var(--wp--preset--color--accent);
	border-radius: 999px;
	color: var(--arc-on-brand, var(--wp--preset--color--background));
	display: inline-block;
	font-size: var(--arc-text-2xs);
	font-weight: 800;
	letter-spacing: 0.08em;
	margin-bottom: var(--arc-space-30);
	padding: var(--arc-space-10) 0.55rem;
	text-transform: uppercase;
}

@media (max-width: 781px) {
	.arc-bottom-nav {
		display: block;
	}

	body.arc-has-bottom-nav {
		padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0));
	}

	.arc-bento {
		margin-block: var(--arc-space-20) var(--arc-space-40);
	}

	.arc-bento__grid {
		gap: 0;
		grid-template-columns: 1fr;
	}

	.arc-bento__row {
		--arc-bento-row-gap: 0;
		--arc-bento-row-basis: 100%;
	}

	.arc-bento__side {
		gap: 0;
	}

	.arc-tabbed-posts {
		margin-block: var(--arc-space-45);
	}

	/*
	 * The strip is meant to scroll sideways here, but it inherited `wrap` from
	 * the base rule, so on the narrowest screens the third tab dropped onto a
	 * line of its own and sat there against the left edge instead.
	 */
	.arc-tabbed-posts .arc-section__header {
		margin-bottom: var(--arc-space-40);
	}

	.arc-tabbed-posts__tabs {
		flex-wrap: nowrap;
		gap: var(--arc-space-10);
		margin-bottom: var(--arc-space-30);
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.arc-tabbed-posts__tab {
		flex: 0 0 auto;
	}

	.arc-tabbed-posts__tabs::-webkit-scrollbar {
		display: none;
	}

	.arc-tabbed-posts__tab {
		flex: 0 0 auto;
		font-size: var(--arc-text-2xs);
		padding: var(--arc-space-15) 0.75rem;
	}

	.arc-tabbed-posts .arc-post-grid {
		gap: 0;
	}

	.arc-newsletter {
		margin-inline: 0;
		padding: var(--arc-space-40);
	}

	.arc-newsletter__form {
		flex-direction: column;
	}

	.arc-newsletter__form input[type="email"],
	.arc-newsletter__form .arc-btn {
		width: 100%;
	}

	/*
	 * The form stacks here, so the row-oriented `flex-basis: 12rem` stops being a
	 * width and becomes a 192px tall input.
	 */
	.arc-newsletter__form input[type="email"] {
		flex: 0 0 auto;
	}

	.arc-archive-toolbar__btn {
		min-height: 2.75rem;
		padding-inline: 1.1rem;
	}

	.arc-most-read__list li {
		gap: var(--arc-space-20);
		padding-block: var(--arc-space-15);
	}

	.arc-most-read__list a {
		font-size: var(--arc-text-s);
		line-height: 1.35;
	}

	/*
	 * Tighter than the desktop step, as mobile density asks, but on the scale: 1.25rem
	 * was between two steps and close enough to the card above that the button read as
	 * part of it rather than as the control that extends it.
	 */
	.arc-load-more-wrap {
		margin-block: var(--arc-space-60);
	}

	.arc-load-more-wrap .arc-btn {
		min-height: 2.75rem;
		width: 100%;
	}

	.arc-mega-menu {
		display: none !important;
	}
}

@media (min-width: 782px) {
	.arc-bottom-nav {
		display: none !important;
	}

	.arc-primary-navigation {
		position: relative;
	}

	.arc-site-header:has(.arc-mega-menu.is-open) .arc-mega-menu {
		display: block;
	}
}

@media (min-width: 1024px) {
	.arc-bento__grid {
		grid-template-columns: 1.5fr 1fr;
	}

	/* Three across from the same width the rest of the theme goes to three
	 * columns, so the bottom row is whole instead of leaving one card adrift. */
	.arc-bento__row {
		--arc-bento-row-basis: calc((100% - var(--arc-bento-row-gap) * 2) / 3);
	}
}

@media (min-width: 1280px) {
	.arc-mega-menu__inner {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.arc-breaking-ticker__list {
		animation: none !important;
	}
}

/*
 * Correction and update notes (inc/corrections.php).
 *
 * The look is a decision, not a default: a correction has to be findable without
 * being a spectacle. A red banner turns an honest disclosure into an admission of
 * scandal and gives an editor a reason to avoid writing one, which is the opposite
 * of the point. So it is built the way a printed paper sets one -- a rule, a small
 * upright label, the sentence in the body face -- and it borrows the article's own
 * surface rather than introducing a colour of its own.
 *
 * Every colour here is one of three pairings bin/verify-surface-contrast.php
 * already measures across all 25 palettes in both schemes: text on surface, brand
 * on surface, muted on surface. Nothing new needed signing off, which is the
 * reason those three were the ones used.
 *
 * The kind of note is carried by its label text, so the left rule can differ by
 * kind without the colour being the thing that says it -- WCAG 1.4.1 is satisfied
 * by the word "Corectură", and the rule is decoration on top of it.
 */
.arc-correction {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-left: 3px solid var(--wp--preset--color--brand);
	border-radius: var(--arc-panel-radius);
	color: var(--wp--preset--color--text);
	display: grid;
	gap: var(--arc-space-15);
	margin-block: var(--arc-space-60);
	padding: var(--arc-space-40) 1.15rem;
}

/*
 * A factual error is the one kind where the reader's stake is different, so it gets
 * the accent rule instead of the brand one. This is the only visual difference
 * between the kinds and it is not load-bearing.
 */
.arc-correction--correction {
	border-left-color: var(--wp--preset--color--accent);
}

.arc-correction__label {
	color: var(--wp--preset--color--brand);
	font-size: var(--arc-text-xs);
	font-weight: 800;
	letter-spacing: 0.08em;
	margin: 0;
	text-transform: uppercase;
}

.arc-correction__body {
	margin: 0;
}

/*
 * The note is a single sentence in the reading face at the reading size. Setting it
 * smaller would be the tell that the publication would rather it were not read.
 */
.arc-correction__body p {
	margin: 0;
}

.arc-correction__meta {
	color: var(--wp--preset--color--muted);
	font-size: var(--arc-text-xs);
	margin: 0;
}

/*
 * At the top of an article the note sits between the standfirst and the first
 * paragraph, where the eye is already moving downwards; it needs less weight than
 * it does at the foot of 2000 words, where nothing else is competing for attention.
 */
.arc-correction--at-start {
	margin-block: 0 var(--arc-space-50);
}

@media (max-width: 781px) {
	.arc-correction {
		margin-block: var(--arc-space-50);
		padding: var(--arc-space-35) 0.95rem;
	}
}

/*
 * On paper the note has to survive the one thing print reliably does to a page:
 * drop the backgrounds. print.css already forces black on white, so the tinted
 * surface would leave a coloured rule floating beside black text, and a note whose
 * only remaining boundary is a background that did not print is a note that reads
 * as part of the article. Ink, not colour.
 */
@media print {
	.arc-correction {
		background: none !important;
		border: 1px solid #000 !important;
		border-left-width: 3px !important;
	}

	.arc-correction__label,
	.arc-correction__meta {
		color: #000 !important;
	}
}

/*
 * Cross-document view transitions.
 *
 * Supported in Chrome 126+ and Safari 18.2+, so the "Chromium only" objection has
 * expired; browsers without it navigate exactly as before, because the whole
 * feature is this one at-rule and some animation timing. It pairs with the
 * speculative prefetch configured in inc/premium.php: prefetch removes the
 * network from the navigation and this removes the white flash from it.
 *
 * The treatment is deliberately plain. A news site is read in a series of short
 * navigations -- headline, article, back, next headline -- and anything with a
 * direction or a shape to it becomes a tic by the fourth click. So: a cross-fade
 * shorter than the default, and no element morphs. Naming the card image and the
 * headline so the card "opens" into the article is one rule away and was left out
 * on purpose; it is a portfolio effect, and it also breaks the moment two cards on
 * a page share a name.
 */
@view-transition {
	navigation: auto;
}

/*
 * 180 ms against the UA's 250. Long enough to read as a fade rather than a cut,
 * short enough that the second click does not queue behind the first.
 */
::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 180ms;
	animation-timing-function: ease;
}

/*
 * The header and the mobile tab bar are the same object on both pages, so letting
 * them fade out and back in is a flicker with no information in it. Capturing them
 * as their own groups holds them still while the page underneath changes -- which
 * is also what makes the transition read as "the site stayed, the story changed"
 * rather than as a slide show.
 *
 * These names have to stay unique per document; a second element claiming either
 * one makes the browser skip the transition entirely and fall back to a normal
 * navigation.
 */
.arc-site-header {
	view-transition-name: arc-header;
}

.arc-bottom-nav {
	view-transition-name: arc-bottom-nav;
}

/*
 * Reduced motion turns the transition off at the source rather than setting the
 * duration to zero: `navigation: none` means no snapshot is taken at all, so there
 * is no work done and nothing to get stuck half-way. The pseudo-element rules are
 * kept as a second line of defence for engines that ship the pseudo-elements
 * before honouring `@view-transition` inside a media query.
 */
@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}

	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

/*
 * The title takes the display-tuned fallbacks from fonts.css instead of the
 * body-tuned ones in the stack theme.json sets. Same webfont first, same system
 * fonts last; only the four adjusted faces in the middle change, so a machine with
 * none of them installed behaves exactly as before.
 *
 * Without this the desktop title reflowed by a full line when Source Serif 4 landed:
 * /articole-seo-iasi/ measured CLS 0.2209 at 1440px, /advertoriale-seo-iasi/ 0.2153,
 * /comunicate-de-presa-iasi/ 0.1314, all of them over the 0.1 threshold and all of
 * them from this one element. bin/probe-cls.mjs is the guard.
 *
 * Card titles are deliberately not included: they run 17-24px, where the body basis
 * is the closer of the two, and they were not moving. The selector is written out per
 * container rather than as a bare :where(.wp-block-post-title) so it outranks
 * `.arc-type-editorial :where(... .wp-block-post-title ...)` in main.css, which sets
 * the family from the preset and would otherwise win on specificity.
 */
.arc-article > .wp-block-post-title,
.arc-page__article > .wp-block-post-title,
.arc-page--wide > .wp-block-post-title,
.arc-page--landing > .wp-block-post-title,
.arc-article__title,
h1.entry-title {
	font-family:
		"Source Serif 4",
		"ARC Serif display Georgia",
		"ARC Serif display Noto Serif",
		"ARC Serif display Times New Roman",
		"ARC Serif display DejaVu Serif",
		Georgia,
		"Times New Roman",
		serif;
}

/*
 * From 1280px the article body switches to the serif, at 18.88-22px, and takes the
 * fallback derived for that size instead of the phone/desktop compromise. Below the
 * breakpoint the body is Source Sans 3 and this rule does not apply, which is why it
 * can be tuned for one size without costing the other.
 */
@media (min-width: 1280px) {
	.arc-article .wp-block-post-content,
	.arc-page__article .wp-block-post-content,
	.arc-article__lead {
		font-family:
			"Source Serif 4",
			"ARC Serif text Georgia",
			"ARC Serif text Noto Serif",
			"ARC Serif text Times New Roman",
			"ARC Serif text DejaVu Serif",
			Georgia,
			"Times New Roman",
			serif;
	}
}