/**
 * Arena Times — front-end styles.
 *
 * Two conventions run through this file, both learned from shipping a
 * builder-aware theme:
 *
 * 1. Component rules are scoped under `.arena` (a body class). That is a
 *    specificity of two, which beats Elementor's Global Kit — it styles
 *    bare `button`, `label`, `h1`-`h6` and `p` at `.elementor-kit-N button`
 *    (0,1,1), which silently outranks any single-class theme rule. Two
 *    classes also still LOSE to Elementor's own per-widget CSS at three, so
 *    widget style controls keep working. Never "fix" a conflict here by
 *    reaching for !important.
 *
 * 2. Nothing is sized by a fixed height. A news grid has to survive a
 *    two-word headline next to a fifteen-word one, and a missing image.
 *    Ratios and min-heights, never heights.
 */

/* ========================================================================
   Tokens
   ======================================================================== */

:root {
	--arena-ink: #14181f;
	--arena-ink-soft: #5b6472;
	--arena-line: #e3e7ec;
	--arena-bg: #ffffff;
	--arena-bg-soft: #f6f8fa;
	--arena-accent: #c8102e;
	--arena-accent-ink: #ffffff;

	--arena-radius: 10px;
	--arena-gap: 26px;
	--arena-container: 1200px;

	--arena-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--arena-font-head: Georgia, "Times New Roman", serif;
}

/* Dark is keyed off an attribute on <html>, not off a bare media query.
   A media query alone gives a dark newspaper to anyone whose laptop is in
   dark mode, with no way for the site owner to decide otherwise and no way
   for a visitor to change it back. The attribute is set in PHP from the
   Customizer setting (see inc/color-scheme.php), so one value decides it
   and PHP, the preview and the visitor's own toggle cannot disagree. */
:root[data-arena-scheme="dark"] {
	--arena-ink: #eef1f5;
	--arena-ink-soft: #a3adba;
	--arena-line: #2a313b;
	--arena-bg: #12161c;
	--arena-bg-soft: #171c24;
}

/* "Follow the device" and the untouched state of the visitor toggle both
   resolve to auto, and only then does the operating system get a vote. */
@media (prefers-color-scheme: dark) {
	:root[data-arena-scheme="auto"] {
		--arena-ink: #eef1f5;
		--arena-ink-soft: #a3adba;
		--arena-line: #2a313b;
		--arena-bg: #12161c;
		--arena-bg-soft: #171c24;
	}
}

/* ========================================================================
   Base
   ======================================================================== */

p{
	margin-block-start: 0!important;
}

.arena {
	margin: 0;
	background: var(--arena-bg);
	color: var(--arena-ink);
	font-family: var(--arena-font);
	font-size: 16px;
	line-height: 1.6;
}

.arena img {
	max-width: 100%;
	height: auto;
}

/* An element JS folds away with the hidden attribute must actually go.
   Any author `display` rule beats the browser's [hidden] default, so a
   component that sets its own display would otherwise stay on screen. */
.arena [hidden] {
	display: none !important;
}

.arena-container {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--arena-container);
	margin-inline: auto;
	padding-inline: 20px;
}

.arena-main {
	display: block;
	padding-block: 28px 56px;
}

/* An Elementor Full Width page - chosen on the page, or as the default
   in Site Settings > Layout - is laid out edge to edge by the page itself.
   The theme's breathing room above and below would sit outside every
   section, where no Elementor control can reach it. */
.elementor-template-full-width .arena-main {
	padding-block: 0;
}

/* Focus: never removed, only restyled. Suppressing the ring at :focus (not
   on the base state, where it does not reach :focus-visible anyway) and
   replacing it with nothing is how a keyboard becomes unusable. */
.arena a:focus-visible,
.arena button:focus-visible,
.arena input:focus-visible,
.arena select:focus-visible,
.arena textarea:focus-visible {
	outline: 2px solid var(--arena-accent);
	outline-offset: 2px;
}

/* WordPress's standard visually-hidden text: read by screen readers, not
   drawn. The theme uses it for the skip link, field labels, the search
   form, the colour-scheme toggle and more - and it was never defined, so
   all of those were showing. No !important on position, so the skip link
   below can still become position: fixed when it receives focus. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
	word-wrap: normal;
	border: 0;
}

.arena-skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 999;
	width: auto;
	height: auto;
	padding: 10px 16px;
	clip: auto;
	clip-path: none;
	background: var(--arena-bg);
	color: var(--arena-ink);
}

/* ========================================================================
   Header
   ======================================================================== */

.arena .arena-header {
	border-bottom: 1px solid var(--arena-line);
	background: var(--arena-bg);
}

.arena .arena-topbar {
	border-bottom: 1px solid var(--arena-line);
	background: var(--arena-bg-soft);
	font-size: 13px;
}

.arena .arena-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	min-height: 38px;
}

.arena .arena-topbar__menu,
.arena .arena-nav__menu,
.arena .arena-footer__menu {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.arena .arena-topbar__date {
	color: var(--arena-ink-soft);
}

.arena .arena-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding-block: 18px;
}

.arena .arena-branding__name {
	font-family: var(--arena-font-head);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--arena-ink);
	text-decoration: none;
}

.arena .arena-branding__tagline {
	margin: 4px 0 0;
	color: var(--arena-ink-soft);
	font-size: 13px;
}

.arena .arena-nav a {
	color: var(--arena-ink);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.arena .arena-nav a:hover {
	color: var(--arena-accent);
}

.arena .arena-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--arena-line);
	border-radius: var(--arena-radius);
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.arena .arena-nav-toggle__bars,
.arena .arena-nav-toggle__bars::before,
.arena .arena-nav-toggle__bars::after {
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
}

.arena .arena-nav-toggle__bars {
	position: relative;
}

.arena .arena-nav-toggle__bars::before,
.arena .arena-nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.arena .arena-nav-toggle__bars::before { top: -6px; }
.arena .arena-nav-toggle__bars::after  { top: 6px; }

/* ========================================================================
   Breaking ticker
   ======================================================================== */

.arena .arena-ticker {
	background: var(--arena-accent);
	color: var(--arena-accent-ink);
}

.arena .arena-ticker__inner {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 44px;
}

.arena .arena-ticker__label {
	flex-shrink: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.arena .arena-ticker__list {
	display: flex;
	align-items: center;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}

.arena .arena-ticker__list::-webkit-scrollbar {
	display: none;
}

.arena .arena-ticker__item {
	flex: 0 0 auto;
	white-space: nowrap;
}

.arena .arena-ticker__item a {
	color: inherit;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

/* ========================================================================
   Layout
   ======================================================================== */

.arena .arena-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	align-items: start;
	gap: 40px;
}

/* No sidebar widgets, no reserved column — the body class says so rather
   than the template guessing. */
.arena.arena-no-sidebar .arena-layout {
	grid-template-columns: minmax(0, 1fr);
}

.arena .arena-layout__main {
	min-width: 0; /* Lets long words wrap instead of widening the column. */
}

.arena .arena-columns {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

.arena .arena-section {
	margin-block: 0 44px;
}

.arena .arena-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--arena-ink);
}

.arena .arena-section__title {
	margin: 0;
	font-family: var(--arena-font-head);
	font-size: 22px;
	line-height: 1.2;
}

.arena .arena-section__more {
	flex-shrink: 0;
	color: var(--arena-accent);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

/* ========================================================================
   Grid
   ======================================================================== */

/* auto-fit with a minimum, so the column count follows the available width
   instead of a breakpoint guessing at it — and a short last row lines up
   from the leading edge rather than centring, which reads as broken. */
.arena .arena-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--arena-gap);
	justify-content: start;
}

.arena .arena-grid--two {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.arena .arena-grid--list {
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
}

/* ========================================================================
   Card
   ======================================================================== */

.arena .arena-card {
	display: flex;
	/* Direction and the picture's flex are read from properties rather than
	   written here, so one responsive control can move a card between
	   "picture above" and "picture beside" at any breakpoint without the
	   markup changing. The defaults are the stacked card. */
	flex-direction: var(--arena-card-dir, column);
	flex-wrap: wrap;
	gap: 12px;
	min-width: 0;
}

.arena .arena-card__media {
	flex: var(--arena-media-flex, 0 0 auto);
}

.arena .arena-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--arena-radius);
	background: var(--arena-bg-soft);
	/* The ratio is pinned here rather than relying on the cropped size, so
	   a site whose old uploads were never regenerated still gets even rows. */
	aspect-ratio: 16 / 10;
}

/* The link fills the media box; the badge and label chips sit beside it,
   not inside it, so they stay real links of their own. */
.arena .arena-card__media-link {
	display: block;
	width: 100%;
	height: 100%;
}

.arena .arena-card__media img,
.arena .arena-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.arena .arena-card__placeholder {
	background:
		linear-gradient(135deg, transparent 46%, var(--arena-line) 46%, var(--arena-line) 54%, transparent 54%),
		var(--arena-bg-soft);
}

.arena .arena-card__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 26px;
	padding-inline: 8px;
	border-radius: 999px;
	background: var(--arena-ink);
	color: var(--arena-bg);
	font-size: 13px;
	font-weight: 700;
}

/* The overlay over the picture on a video card, so the play mark still
   reads on a pale or busy photo. Transparent until an editor picks a
   colour, so this changes nothing by default.

   background-color rather than the background shorthand, and a plain
   declaration rather than a var(): a transition cannot interpolate a
   property whose value arrived through a custom property that changed, and
   the whole point of the speed control is that this fades. */
.arena .arena-card__scrim {
	position: absolute;
	inset: 0;
	/* It covers the image link, so it must not swallow the click. */
	pointer-events: none;
	/* A whisper of a tint by default. Enough that a play mark reads on a
	   bright photo, not enough that anyone notices it is there. Every one of
	   these properties can be set once for the whole site in the Customizer,
	   and overridden per widget in Elementor. */
	background-color: var(--arena-scrim, rgba(0, 0, 0, .16));
	transition: background-color var(--arena-video-speed, .18s) ease;
}

/* The play mark on a video story. Positioned, not interactive: the whole
   card already links to the story, and a second click target inside it
   would be a keyboard trap for no gain — hence pointer-events: none and
   aria-hidden on the element itself. */
.arena .arena-card__play {
	position: absolute;
	/* Auto margins inside inset:0 centre the badge on both axes with no
	   transform involved. A translate-based centring has to be mirrored for
	   RTL, and any position control then has to undo both the offset and the
	   transform together — which is exactly how this ended up half outside
	   the card. Offsets are a separate `translate`, so they compose instead. */
	inset: 0;
	margin: auto;
	translate: var(--arena-play-x, 0px) var(--arena-play-y, 0px);
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--arena-play-size, 58px);
	height: var(--arena-play-size, 58px);
	border-radius: 50%;
	background-color: var(--arena-play-bg, rgba(12, 12, 12, .5));
	color: var(--arena-play-color, #fff);
	/* An inset ring rather than a border: a border would be added to the
	   58px and nudge the centring, an inset shadow is drawn inside it. */
	box-shadow: inset 0 0 0 var(--arena-play-ring, 2px) var(--arena-play-ring-color, rgba(255, 255, 255, .9));
	pointer-events: none;
	transition:
		background-color var(--arena-video-speed, .18s) ease,
		color var(--arena-video-speed, .18s) ease,
		box-shadow var(--arena-video-speed, .18s) ease;
}

.arena .arena-card__play svg {
	width: 58%;
	height: 58%;
	display: block;
}

/* The card, not the badge, is what the pointer is over.

   Deliberately left at a specificity the widget's own Background control
   clears: once an editor picks a badge colour, "no hover colour" should
   mean the badge does not change, not that it jumps to the theme accent
   they never asked for. */
/* Both hover rules sit at a specificity a widget's own colour clears, so
   "I set a colour and no hover colour" means the card does not change on
   hover - rather than jumping to something nobody asked for. */
.arena .arena-card:hover .arena-card__play {
	background-color: var(--arena-play-bg-hover, var(--arena-accent));
}

.arena .arena-card:hover .arena-card__scrim {
	background-color: var(--arena-scrim-hover, var(--arena-scrim, rgba(0, 0, 0, .16)));
}

.arena .arena-card--video .arena-card__media {
	position: relative;
}

.arena .arena-card__labels {
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	justify-content: flex-end;
	max-width: calc(100% - 20px);
}

.arena .arena-card__labels--inline {
	position: static;
	justify-content: flex-start;
	max-width: none;
	margin-bottom: 4px;
}

.arena .arena-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.arena .arena-card__category {
	align-self: flex-start;
	/* A zero-width transparent border by default, so switching the chip to
	   the outlined newspaper style in Elementor changes its appearance
	   without also shifting the text by a pixel or two. */
	border: 0 solid transparent;
	color: var(--arena-accent);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-decoration: none;
}

.arena .arena-card__title {
	margin: 0;
	font-family: var(--arena-font-head);
	font-size: 19px;
	line-height: 1.3;
	/* Long single words (URLs in headlines) must wrap, not widen the card. */
	overflow-wrap: anywhere;
}

.arena .arena-card__title a {
	color: var(--arena-ink);
	text-decoration: none;
}

.arena .arena-card__title a:hover {
	color: var(--arena-accent);
}

.arena .arena-card__excerpt {
	margin: 0;
	color: var(--arena-ink-soft);
	font-size: 14.5px;
}

.arena .arena-card__meta,
.arena .arena-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	color: var(--arena-ink-soft);
	font-size: 13px;
}

.arena .arena-card__meta > * + *::before,
.arena .arena-meta > * + *::before {
	/* The middle dot, escaped: a raw "·" is two bytes in UTF-8, and a
	   stylesheet read as Latin-1 (it carries no @charset) shows them as
	   "·". The escape is plain ASCII and cannot be misread. */
	content: "\00B7";
	margin-right: 8px;
}

/* An item in the byline row that carries an icon. Only these get a wrapper;
   an item without an icon stays a bare <time> or <span>, so the row's
   separator rule still counts the same number of children either way. */
/* A divider the card can draw under any of its blocks. It is an empty
   element rather than a border on the block itself, so switching it on
   cannot disturb that block's own spacing or its own border. */
/* Tag chips. Quieter than a news label on purpose: a label is editorial
   ("Breaking"), a tag is a subject, and the two must not read as equals. */
.arena .arena-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.arena .arena-tag {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border: 1px solid var(--arena-line);
	border-radius: 999px;
	color: var(--arena-ink-soft);
	font-size: 12px;
	text-decoration: none;
}

.arena a.arena-tag:hover {
	border-color: var(--arena-accent);
	color: var(--arena-accent);
}

/* Headline and excerpt as one flex child.

   gap: inherit rather than a number of its own, so turning the grouping on
   does not change a single pixel of spacing - the pair keeps exactly the
   gap the body was already giving them. */
.arena .arena-card__text {
	display: flex;
	flex-direction: column;
	gap: inherit;
	min-width: 0;
}

.arena .arena-card__rule {
	display: block;
	width: 100%;
	height: 0;
	flex: 0 0 auto;
	align-self: start;
	border-top: 1px solid var(--arena-line);
}

/* A numbered card. The number is its own column so the picture and the
   text stay in one stack beside it, whether or not there is a picture -
   which is what separates this from the older .arena-ranked markup, where
   the number could only sit beside a card that had no image. */
.arena .arena-card--numbered {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: var(--arena-number-gap, 16px);
	align-items: start;
}

.arena .arena-card--numbered .arena-card__number {
	grid-column: 1;
	grid-row: 1 / span 2;
	color: var(--arena-ink-soft);
	font-family: var(--arena-font-head);
	font-size: 28px;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

/* Spanning two rows is for picture + text. With no picture the text is the
   only row, and the span made an empty second one - which still took the
   card's row gap, leaving a strip of dead space under every card. */
.arena .arena-card--numbered:not(:has(> .arena-card__media)) .arena-card__number {
	grid-row: 1;
}

.arena .arena-card--numbered .arena-card__media,
.arena .arena-card--numbered .arena-card__body {
	grid-column: 2;
}

.arena .arena-meta__item {
	display: inline-flex;
	align-items: center;
	/* No flex gap here on purpose. The row's separator is a ::before on each
	   child, and inside an inline-flex wrapper that pseudo-element becomes a
	   flex item of its own - a gap would then be added to the separator's own
	   margin and this item would sit further out than its neighbours. The
	   spacing lives on the icon instead, where only the icon can collect it. */
}

.arena .arena-meta__icon {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	/* Logical, so a right-to-left site puts the space on the other side
	   without a companion rule. */
	margin-inline-end: var(--arena-meta-icon-gap, 5px);
	/* 1em keeps the icon tied to the row's own type size until an editor
	   sets a size of their own. */
	font-size: 1em;
	line-height: 1;
}

.arena .arena-meta__icon svg,
.arena .arena-meta__icon img {
	width: 1em;
	height: 1em;
	display: block;
	fill: currentColor;
}

/* A linked byline item reads as part of the byline, not as a link in the
   middle of it. The card's row was missing from this rule, so Author and
   Category came out in the site's link colour while the date beside them
   used the meta colour - the widget's own Link Colour control had to be
   set on every widget just to undo that. */
.arena .arena-meta a,
.arena .arena-card__meta a {
	color: inherit;
	text-decoration: none;
}

/* ── Variants ─────────────────────────────────────────────────────────── */

.arena .arena-card--list {
	/* Flex-wrap, not a grid, and that is the whole trick.

	   A media query asks how wide the WINDOW is. This card can be narrow in
	   a wide window - two of them side by side on a tablet - and a window
	   query cannot see that. Flex wrapping is measured against the card's own
	   width: when the picture plus the headline's floor no longer fit, the
	   body drops to the next line and the card stacks itself.

	   All three are properties, so one responsive control can turn a list
	   card into a stacked one at a breakpoint, or a grid card into a list
	   card, without the markup changing. */
	--arena-card-dir: row;
	--arena-media-flex: 0 1 var(--arena-list-media, 120px);
	--arena-body-flex: 1 1 var(--arena-list-text-min, 200px);
	align-items: start;
	gap: 16px;
}

.arena .arena-card--list .arena-card__media {
	/* Never grows past the width the Image Width control sets, but may
	   shrink, so a card narrower than the picture still fits. The flex
	   itself comes from --arena-media-flex on the card. */
	max-width: 100%;
	aspect-ratio: 1 / 1;
}

.arena .arena-card__body {
	/* The floor that decides when a side-by-side card gives up and stacks.
	   Below this the headline would break after every second word. */
	flex: var(--arena-body-flex, 1 1 auto);
	min-width: 0;
}

.arena .arena-card--list .arena-card__title {
	font-size: 16px;
}

.arena .arena-card--hero .arena-card__media {
	aspect-ratio: 16 / 9;
}

.arena .arena-card--hero .arena-card__title {
	font-size: 30px;
}

/* Text over the image. The gradient is on the media so the overlay cannot
   be left sitting on a card whose image failed to load. */
.arena .arena-card--overlay {
	position: relative;
}

.arena .arena-card--overlay .arena-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	/* It covers the image link, so it must not swallow the click. */
	pointer-events: none;
	background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .25) 45%, transparent 70%);
}

.arena .arena-card--overlay .arena-card__body {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 22px;
	color: #fff;
}

.arena .arena-card--overlay .arena-card__title a,
.arena .arena-card--overlay .arena-card__excerpt,
.arena .arena-card--overlay .arena-card__meta {
	color: #fff;
}

/* A card with no image cannot use an overlay — there is nothing to overlay,
   and the text would sit on the placeholder. */
.arena .arena-card--overlay.arena-card--no-image .arena-card__body {
	position: static;
	padding: 0;
	color: inherit;
}

.arena .arena-card--overlay.arena-card--no-image .arena-card__title a,
.arena .arena-card--overlay.arena-card--no-image .arena-card__excerpt,
.arena .arena-card--overlay.arena-card--no-image .arena-card__meta {
	color: inherit;
}

/* ========================================================================
   Labels
   ======================================================================== */

.arena .arena-label {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	border-radius: 4px;
	background: var(--arena-ink);
	color: var(--arena-bg);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.arena .arena-label--breaking     { background: var(--arena-accent); color: #fff; }
.arena .arena-label--featured     { background: #0b5fff; color: #fff; }
.arena .arena-label--trending     { background: #e8710a; color: #fff; }
.arena .arena-label--editors-pick { background: #0f8a5f; color: #fff; }

/* ========================================================================
   Hero
   ======================================================================== */

.arena .arena-hero {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: var(--arena-gap);
	align-items: start;
}

.arena .arena-hero__rail {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* ========================================================================
   Ranked list
   ======================================================================== */

.arena .arena-ranked {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: arena-rank;
}

.arena .arena-ranked__item {
	display: flex;
	gap: 12px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--arena-line);
}

.arena .arena-ranked__item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

/* The rank badge has no image to sit on in a compact card, so it becomes
   a leading number instead of an absolute overlay. */
.arena .arena-ranked__item .arena-card__badge {
	position: static;
	flex-shrink: 0;
	background: transparent;
	color: var(--arena-accent);
	font-family: var(--arena-font-head);
	font-size: 22px;
}

/* ========================================================================
   Archive / author heads
   ======================================================================== */

.arena .arena-archive-head {
	margin-bottom: 32px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--arena-line);
}

.arena .arena-archive-head__kicker {
	margin: 0 0 6px;
	color: var(--arena-accent);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.arena .arena-archive-head__title {
	margin: 0;
	font-family: var(--arena-font-head);
	font-size: clamp(28px, 4vw, 40px);
	line-height: 1.15;
}

.arena .arena-archive-head__desc {
	margin: 10px 0 0;
	max-width: 62ch;
	color: var(--arena-ink-soft);
}

.arena .arena-author-box {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	flex-wrap: wrap;
	margin-bottom: 32px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--arena-line);
}

.arena .arena-author-box__avatar {
	border-radius: 50%;
}

.arena .arena-author-box__name {
	margin: 0 0 6px;
	font-family: var(--arena-font-head);
	font-size: 28px;
}

.arena .arena-author-box__bio {
	margin: 0;
	max-width: 62ch;
	color: var(--arena-ink-soft);
}

/* ========================================================================
   Article
   ======================================================================== */

.arena .arena-article__head {
	max-width: 780px;
	margin-inline: auto;
	padding-block: 12px 24px;
	text-align: center;
}

.arena .arena-article__category {
	display: inline-block;
	margin-bottom: 10px;
	color: var(--arena-accent);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
}

.arena .arena-article__labels {
	display: flex;
	gap: 6px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.arena .arena-article__title {
	margin: 0 0 12px;
	font-family: var(--arena-font-head);
	font-size: clamp(30px, 5vw, 48px);
	line-height: 1.12;
	overflow-wrap: anywhere;
}

.arena .arena-article__subtitle {
	margin: 0 0 16px;
	color: var(--arena-ink-soft);
	font-size: clamp(17px, 2.2vw, 20px);
	line-height: 1.5;
}

.arena .arena-article__meta {
	justify-content: center;
}

.arena .arena-article__media {
	margin: 0 0 32px;
}

.arena .arena-article__media img {
	width: 100%;
	border-radius: var(--arena-radius);
}

.arena .arena-article__media figcaption {
	margin-top: 8px;
	color: var(--arena-ink-soft);
	font-size: 13px;
	text-align: center;
}

.arena .arena-article__content {
	font-size: 17.5px;
	line-height: 1.75;
}

.arena .arena-article__content > * {
	max-width: 720px;
}

.arena .arena-article__content > .alignwide,
.arena .arena-article__content > .alignfull,
.arena .arena-article__content > figure {
	max-width: none;
}

.arena .arena-article__tags {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-block: 32px;
}

.arena .arena-article__tags a {
	padding: 5px 12px;
	border: 1px solid var(--arena-line);
	border-radius: 999px;
	color: var(--arena-ink-soft);
	font-size: 13px;
	text-decoration: none;
}

.arena .arena-share {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

/* The rule above and below is the classic template's own divider, not part
   of a share row. The Elementor widget uses the same .arena-share class and
   owns its spacing through its Style tab, so it must not inherit this. */
.arena .arena-share--rule {
	padding-block: 20px;
	border-block: 1px solid var(--arena-line);
}

.arena .arena-share__label {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.arena .arena-share__link {
	padding: 6px 12px;
	border: 1px solid var(--arena-line);
	border-radius: 999px;
	color: var(--arena-ink);
	font-size: 13px;
	text-decoration: none;
}

.arena .arena-article__adjacent {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
	margin-block: 32px;
}

.arena .arena-adjacent {
	padding: 16px;
	border: 1px solid var(--arena-line);
	border-radius: var(--arena-radius);
}

.arena .arena-adjacent span {
	display: block;
	margin-bottom: 4px;
	color: var(--arena-ink-soft);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.arena .arena-adjacent a {
	color: var(--arena-ink);
	font-weight: 600;
	text-decoration: none;
}

/* ========================================================================
   Newsletter, empty state, pagination, footer
   ======================================================================== */

.arena .arena-newsletter {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
	align-items: center;
	padding: 32px;
	border-radius: var(--arena-radius);
	background: var(--arena-bg-soft);
}

.arena .arena-newsletter__title {
	margin: 0 0 6px;
	font-family: var(--arena-font-head);
	font-size: 24px;
}

.arena .arena-newsletter__text {
	margin: 0;
	color: var(--arena-ink-soft);
}

.arena .arena-empty {
	padding-block: 48px;
	text-align: center;
}

.arena .arena-button {
	display: inline-block;
	padding: 11px 22px;
	border-radius: var(--arena-radius);
	background: var(--arena-ink);
	color: var(--arena-bg);
	font-weight: 600;
	text-decoration: none;
}

.arena .arena-search {
	display: flex;
	gap: 8px;
	max-width: 460px;
	margin-inline: auto;
}

.arena .arena-search__input {
	flex: 1 1 auto;
	min-width: 0;
	box-sizing: border-box;
	padding: 11px 14px;
	border: 1px solid var(--arena-line);
	border-radius: var(--arena-radius);
	background: var(--arena-bg);
	color: inherit;
	font: inherit;
	font-size: 15px;
}

.arena .arena-search__submit {
	flex-shrink: 0;
	padding: 11px 18px;
	border: 0;
	border-radius: var(--arena-radius);
	background: var(--arena-ink);
	color: var(--arena-bg);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.arena .navigation.pagination {
	margin-top: 36px;
}

.arena .nav-links {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
}

.arena .nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 12px;
	border: 1px solid var(--arena-line);
	border-radius: var(--arena-radius);
	color: var(--arena-ink);
	text-decoration: none;
}

.arena .nav-links .page-numbers.current {
	background: var(--arena-ink);
	border-color: var(--arena-ink);
	color: var(--arena-bg);
}

.arena .arena-footer {
	border-top: 1px solid var(--arena-line);
	background: var(--arena-bg-soft);
}

.arena .arena-footer__widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 32px;
	padding-block: 44px;
}

.arena .arena-footer__bar {
	border-top: 1px solid var(--arena-line);
}

.arena .arena-footer__bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-block: 18px;
	color: var(--arena-ink-soft);
	font-size: 14px;
}

.arena .arena-footer a {
	color: inherit;
	text-decoration: none;
}

/* ========================================================================
   Responsive
   ======================================================================== */

@media (max-width: 1024px) {
	.arena .arena-layout,
	.arena .arena-columns {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.arena .arena-hero {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 782px) {
	/* The classic header's phone menu. Scoped to .arena-header: the
	   Elementor Nav Menu widget shares the arena-nav class names, and
	   unscoped these gave its items a line, block links and padding its
	   own controls could not reach. */
	.arena .arena-nav-toggle {
		display: inline-flex;
	}

	.arena .arena-header .arena-nav {
		flex-basis: 100%;
		display: none;
	}

	.arena .arena-header .arena-nav.is-open {
		display: block;
	}

	.arena .arena-header .arena-nav__menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding-block: 8px;
	}

	.arena .arena-header .arena-nav__menu li {
		border-bottom: 1px solid var(--arena-line);
	}

	.arena .arena-header .arena-nav__menu a {
		display: block;
		padding-block: 12px;
	}

	.arena .arena-card--hero .arena-card__title {
		font-size: 24px;
	}

	/* Overlay text needs the image's full height to stay readable; on a
	   narrow screen it does not have it, so the card unstacks instead. */
	.arena .arena-card--overlay .arena-card__body {
		position: static;
		padding: 0;
		color: inherit;
	}

	.arena .arena-card--overlay .arena-card__title a,
	.arena .arena-card--overlay .arena-card__excerpt,
	.arena .arena-card--overlay .arena-card__meta {
		color: inherit;
	}

	.arena .arena-card--overlay .arena-card__media::after {
		display: none;
	}
}

@media (max-width: 480px) {
	.arena .arena-card--list {
		grid-template-columns: 92px minmax(0, 1fr);
		gap: 12px;
	}

	.arena .arena-article__head {
		text-align: left;
	}

	.arena .arena-article__labels,
	.arena .arena-article__meta {
		justify-content: flex-start;
	}
}

/* ── Rough Edges (Elementor container > Style > Rough Edges) ──
   The fill is the container's ::after, behind its content (isolation
   keeps the -1 inside the container). Until rough-edges.js has built the
   filter - or without script - it is a plain box the container's size.

   The filter first shrinks the fill by the roughness, then tears the edge
   up to the roughness either way. So the ::after grows by the roughness
   where the tear should sit across the container's edge, and stays the
   container's size for "Inside the box". A straight side always grows -
   it is not torn, only shrunk, and growing first puts it back exactly on
   the container's edge. The roughness comes from the script as
   --arena-rough-pad: an empty slider means "the effect's own", which
   only the script knows. inc/rough-edges.php explains the rest.

   Elementor writes each setting on the container, where a rough
   container nested inside would inherit it - so every one a slider can
   leave empty is reset here, back to "not set". */
.arena-rough-yes {
	--arena-rough-r: initial;
	--arena-rough-grain: initial;
	--arena-rough-detail: initial;
	--arena-rough-texture: initial;
	--arena-rough-shadow: initial;
	--arena-rough-x: 1;
	--arena-rough-y: 1;
	--arena-rough-out: 1;
	isolation: isolate;
}

/* A torn edge reaching past the screen's side must not make the page
   scroll sideways. Only on pages that have one. Both elements: on the
   root alone, phones still widen the page to fit the tear and let it be
   pinched out; on body alone, the browser hands it up to the root. clip,
   not hidden, so neither becomes a scroll box and sticky still works. */
html:has(.arena-rough-yes.is-rough-ready),
html:has(.arena-rough-yes.is-rough-ready) body {
	overflow-x: clip;
}

.arena-rough-yes::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.arena-rough-yes.is-rough-ready::after {
	inset-block: calc(max(var(--arena-rough-out), 1 - var(--arena-rough-y)) * var(--arena-rough-pad, 0) * -1px);
	inset-inline: calc(max(var(--arena-rough-out), 1 - var(--arena-rough-x)) * var(--arena-rough-pad, 0) * -1px);
	/* The shadow after the tear, so it follows the torn outline. */
	filter: var(--arena-rough-filter) var(--arena-rough-shadow, );
}

@media (prefers-reduced-motion: reduce) {
	.arena *,
	.arena *::before,
	.arena *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}