/* ===== Listing details box ============================================= */
:root {
	--illu-c-competition: #047857;
	--illu-c-job:         #1d4ed8;
	--illu-c-event:       #b45309;
	--illu-bg:            #f3f4f6;
	--illu-border:        #e5e7eb;
	--illu-text:          #1f2937;
	--illu-muted:         #6b7280;
	--illu-strong:        #111827;
	--illu-card:          #fff;
}

.illu-listing-box {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: 16px;
	column-gap: 24px;
	border: 1px solid var(--illu-border);
	border-radius: 10px;
	padding: 22px 24px;
	margin: 0 0 28px;
	background: var(--illu-bg);
	font: 14px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--illu-text);
	box-sizing: border-box;
	position: relative;
	border-left-width: 4px;
}
.illu-listing-box * { box-sizing: border-box; }
.illu-listing-box--competition { border-left-color: var(--illu-c-competition); }
.illu-listing-box--job         { border-left-color: var(--illu-c-job); }
.illu-listing-box--event       { border-left-color: var(--illu-c-event); }

/* Grid-area labels — ONLY apply when a template-areas layout is active.
 * Setting `grid-area: foo` unconditionally caused Chrome to spawn implicit
 * grid tracks (3-column layout with dl squashed into a 327px sub-column)
 * because the named line had no matching template. Gate by parent class. */
.illu-listing-box--has-logo .illu-listing-box__hero,
.illu-listing-box--has-hero .illu-listing-box__hero     { grid-area: hero; }
.illu-listing-box--has-logo .illu-listing-box__head,
.illu-listing-box--has-hero .illu-listing-box__head     { grid-area: head; }
.illu-listing-box--has-logo .illu-listing-box__logo,
.illu-listing-box--has-hero .illu-listing-box__logo     { grid-area: logo; }
.illu-listing-box--has-logo .illu-listing-box__rows,
.illu-listing-box--has-hero .illu-listing-box__rows     { grid-area: rows; }
.illu-listing-box--has-logo .illu-listing-box__prizes,
.illu-listing-box--has-hero .illu-listing-box__prizes   { grid-area: prizes; }
.illu-listing-box--has-logo .illu-listing-box__calendar,
.illu-listing-box--has-hero .illu-listing-box__calendar { grid-area: calendar; }
.illu-listing-box--has-logo .illu-listing-box__cta,
.illu-listing-box--has-hero .illu-listing-box__cta      { grid-area: cta; }

/* Logo only (no hero) — head + logo side by side at the top. */
.illu-listing-box--has-logo:not(.illu-listing-box--has-hero) {
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"head logo"
		"rows rows"
		"prizes prizes"
		"calendar calendar"
		"cta cta";
}
.illu-listing-box--has-logo:not(.illu-listing-box--has-hero) .illu-listing-box__head { align-self: center; }

/* Hero only (no logo) — full-width hero, then the rest stacked. */
.illu-listing-box--has-hero:not(.illu-listing-box--has-logo) {
	grid-template-areas:
		"hero"
		"head"
		"rows"
		"prizes"
		"calendar"
		"cta";
}

/* Both hero AND logo — hero full-width, then head + logo side by side below. */
.illu-listing-box--has-hero.illu-listing-box--has-logo {
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"hero hero"
		"head logo"
		"rows rows"
		"prizes prizes"
		"calendar calendar"
		"cta cta";
}
.illu-listing-box--has-hero.illu-listing-box--has-logo .illu-listing-box__head { align-self: center; }

/* Featured ring — keep the type's colored left border intact, only tint
 * top/right/bottom + draw the amber halo via box-shadow. */
.illu-listing-box--featured {
	border-top-color: #f59e0b;
	border-right-color: #f59e0b;
	border-bottom-color: #f59e0b;
	box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.18);
}
.illu-listing-box--state-expired   { opacity: 0.9; }
.illu-listing-box--state-closed,
.illu-listing-box--state-cancelled { opacity: 0.75; }

/* ----- Hero image inside box ----- */
.illu-listing-box__hero {
	margin: -22px -24px 0;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	overflow: hidden;
	max-height: 320px;
	position: relative;
}
.illu-listing-box__hero img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 320px;
	object-fit: cover;
}


/* ----- Head: type badge + featured + state + countdown ----- */
.illu-listing-box__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
}
.illu-listing-box__badge,
.illu-listing-box__featured,
.illu-listing-box__state,
.illu-listing-box__countdown {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 5px 10px;
	border-radius: 999px;
	white-space: nowrap;
	line-height: 1;
	text-transform: uppercase;
}
.illu-listing-box__badge { background: var(--illu-strong); color: #fff; }
.illu-listing-box--job         .illu-listing-box__badge { background: var(--illu-c-job); }
.illu-listing-box--event       .illu-listing-box__badge { background: var(--illu-c-event); }
.illu-listing-box--competition .illu-listing-box__badge { background: var(--illu-c-competition); }

.illu-listing-box__featured { background: #fef3c7; color: #92400e; }
.illu-listing-box__state--expired   { background: #6b7280; color: #fff; }
.illu-listing-box__state--closed    { background: #1f2937; color: #fff; }
.illu-listing-box__state--cancelled { background: #b91c1c; color: #fff; }

.illu-listing-box__countdown--info { background: #f3f4f6; color: #374151; }
.illu-listing-box__countdown--warn { background: #fef3c7; color: #92400e; }
.illu-listing-box__countdown--soon { background: #fee2e2; color: #b91c1c; animation: illu-pulse 1.6s ease-in-out infinite; }
@keyframes illu-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.7; }
}
.illu-listing-box__countdown svg { width: 12px; height: 12px; }

/* ----- Logo ----- */
.illu-listing-box__logo { display: flex; align-items: flex-start; }
.illu-listing-box__logo img {
	display: block;
	width: 120px;
	max-width: 100%;
	height: auto;
	max-height: 80px;
	object-fit: contain;
	background: var(--illu-card);
	border: 1px solid var(--illu-border);
	border-radius: 8px;
	padding: 8px;
}

/* ----- Rows ----- */
/* Direct dt/dd grid children. Heavy !important + high specificity to defeat
 * aggressive theme/plugin CSS (e.g. `dt { float: left; width: 30% }` patterns
 * or `dd { display: none }` quirks) that were squashing the layout. */
.illu-listing-box dl.illu-listing-box__rows {
	display: grid !important;
	grid-template-columns: minmax(160px, max-content) 1fr !important;
	column-gap: 28px !important;
	row-gap: 10px !important;
	margin: 0 !important;
	padding: 0 !important;
	align-items: baseline;
	list-style: none;
}
.illu-listing-box dl.illu-listing-box__rows > dt {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	visibility: visible !important;
	color: var(--illu-muted);
	font-weight: 500;
	font-size: 13px;
	line-height: 1.5;
}
.illu-listing-box dl.illu-listing-box__rows > dd {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	visibility: visible !important;
	color: var(--illu-strong);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.5;
	overflow-wrap: anywhere;
}
.illu-listing-box dl.illu-listing-box__rows > dd a {
	color: inherit;
	border-bottom: 1px dotted currentColor;
	text-decoration: none;
}
.illu-listing-box dl.illu-listing-box__rows > dd a:hover { color: var(--illu-c-job); border-bottom-color: var(--illu-c-job); }

/* Icon slot: ALWAYS reserves 16px regardless of whether icon is rendered. */
.illu-listing-box .illu-row-icon-slot {
	flex-shrink: 0 !important;
	display: inline-flex !important;
	width: 16px !important;
	height: 16px !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
	padding: 0 !important;
}
.illu-listing-box .illu-row-icon {
	width: 16px !important;
	height: 16px !important;
	display: block !important;
	color: var(--illu-muted);
	opacity: 0.85;
}
.illu-listing-box .illu-row-label {
	display: inline !important;
	visibility: visible !important;
	font-size: 13px !important;
	color: inherit !important;
	line-height: inherit !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

/* ----- Prize details ----- */
.illu-listing-box__prizes {
	margin: 0;
	padding: 12px 14px;
	background: var(--illu-card);
	border: 1px solid var(--illu-border);
	border-radius: 8px;
}
.illu-listing-box__prizes > summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--illu-strong);
	list-style: none;
}
.illu-listing-box__prizes > summary::-webkit-details-marker { display: none; }
.illu-listing-box__prizes > summary::before {
	content: "▸ ";
	color: var(--illu-muted);
	display: inline-block;
	width: 1em;
}
.illu-listing-box__prizes[open] > summary::before { content: "▾ "; }
.illu-listing-box__prizes pre {
	margin: 10px 0 0;
	padding: 0;
	font-family: inherit;
	font-size: 13px;
	color: #374151;
	background: transparent;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	overflow-x: auto;
	max-width: 100%;
}

/* ----- Add-to-calendar pills ----- */
.illu-listing-box__calendar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 13px;
}
.illu-listing-box__calendar-label { color: var(--illu-muted); font-weight: 500; margin-right: 4px; }
.illu-listing-box__calendar a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 10px;
	color: var(--illu-c-job);
	background: var(--illu-card);
	border: 1px solid #dbeafe;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 500;
	font-size: 12px;
	transition: background 0.12s, border-color 0.12s;
}
.illu-listing-box__calendar a:hover { background: #eff6ff; border-color: #93c5fd; }

/* ----- Primary CTA ----- */
.illu-listing-box__cta { margin: 0; }
.illu-listing-box__cta-btn {
	display: inline-block;
	padding: 11px 20px;
	background: var(--illu-strong);
	color: #fff;
	text-decoration: none;
	border-radius: 6px;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	transition: background 0.12s, transform 0.06s;
}
.illu-listing-box--job         .illu-listing-box__cta-btn { background: var(--illu-c-job); }
.illu-listing-box--event       .illu-listing-box__cta-btn { background: var(--illu-c-event); }
.illu-listing-box--competition .illu-listing-box__cta-btn { background: var(--illu-c-competition); }
.illu-listing-box__cta-btn:hover { filter: brightness(0.92); color: #fff; }
.illu-listing-box__cta-btn:active { transform: translateY(1px); }

/* ===== Archive layout ================================================== */
/* The default archive template (templates/archive.php) emits a bare <main>
 * between the theme's header and footer, with no theme content wrapper — so
 * without this it spans the full viewport edge-to-edge and looks misaligned
 * against the theme's centered content column. Constrain + center it to match.
 * --illu-archive-max = content width (1220) + 2×20 gutter; box-sizing makes the
 * inner content land at exactly the theme's measured width/offset. Override the
 * var in a child theme if its content column differs. */
.illu-archive {
	--illu-archive-max: 1260px;
	max-width: var(--illu-archive-max);
	margin: 32px auto 48px;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}
.illu-archive__header { margin: 0 0 22px; }
.illu-archive__breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--illu-muted);
}
.illu-archive__breadcrumb a { color: var(--illu-muted); text-decoration: none; }
.illu-archive__breadcrumb a:hover { color: var(--illu-c-job); text-decoration: underline; }
.illu-archive__crumb-sep { opacity: 0.6; }
.illu-archive__crumb-current { color: var(--illu-text); font-weight: 600; }
.illu-archive__headrow {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin: 0 0 10px;
}
/* Count — big bold number over a small muted label, matching the theme's
 * category header count ("280 / Articles"). */
.illu-archive__count {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	line-height: 1.05;
	white-space: nowrap;
}
.illu-archive__count-num {
	font-family: "Work Sans", Verdana, Geneva, sans-serif;
	font-size: 33px;
	font-weight: 700;
	color: #000;
	letter-spacing: -0.66px;
	line-height: 1.1;
}
.illu-archive__count-label {
	font-family: "Oxygen", Verdana, Geneva, sans-serif;
	font-size: 14px;
	font-weight: 400;
	color: #666;
}
.illu-archive__title {
	margin: 0;
	font-size: 30px;
	line-height: 1.2;
	font-weight: 700;
}
.illu-archive__intro {
	color: var(--illu-muted);
	font-size: 15px;
	line-height: 1.65;
	max-width: 820px;
}
.illu-archive__intro p { margin: 0 0 10px; }
.illu-archive__intro p:last-child { margin-bottom: 0; }

/* ===== Archive cards =================================================== */
/* Masonry layout via CSS multi-column: each card keeps its natural height and
 * packs into ~280px columns, so there is NO empty space at the bottom of
 * shorter cards (the trade-off vs. an equal-height grid is staggered bottoms).
 * Works with Load More out of the box — appended cards just reflow. */
.illu-archive-grid {
	column-width: 280px;
	column-gap: 25px;
	margin: 0;
}
.illu-archive-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0 0 25px;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	background: var(--illu-card);
	border: 0;
	border-radius: 5px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
	transition: box-shadow 0.18s, transform 0.06s;
	position: relative;
}
.illu-archive-card:hover { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12); transform: translateY(-2px); }
/* Featured: keep the soft card shadow AND add the amber ring on top. */
.illu-archive-card--featured {
	box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.35), 0 4px 20px rgba(0, 0, 0, 0.07);
}
.illu-archive-card--featured:hover {
	box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.45), 0 8px 28px rgba(0, 0, 0, 0.12);
}
.illu-archive-card__media { position: relative; aspect-ratio: 16/9; background: #f3f4f6; }
.illu-archive-card__media img { width: 100%; height: 100%; object-fit: cover; }
.illu-archive-card__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 4px 8px;
	border-radius: 999px;
	color: #fff;
	background: var(--illu-strong);
	text-transform: uppercase;
}
.illu-archive-card--job         .illu-archive-card__badge { background: var(--illu-c-job); }
.illu-archive-card--event       .illu-archive-card__badge { background: var(--illu-c-event); }
.illu-archive-card--competition .illu-archive-card__badge { background: var(--illu-c-competition); }
/* Uniform 8px rhythm between every body element (eyebrow, title, meta, tag row,
 * detail list, date pill, footer); individual groups carry no extra margins. */
.illu-archive-card__body { padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.illu-archive-card__title { font-size: 17px; font-weight: 700; line-height: 1.25; margin: 0; }
.illu-archive-card__title a { color: var(--illu-strong); text-decoration: none; }
.illu-archive-card__title a:hover { color: var(--illu-c-job); }
.illu-archive-card__meta { font-size: 14px; color: var(--illu-muted); margin: 0; line-height: 1.5; }

/* Type eyebrow — sits above the title in the body (theme category position),
 * tinted by type instead of an image overlay badge. */
.illu-archive-card__eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--illu-c-competition);
}
.illu-archive-card--job         .illu-archive-card__eyebrow { color: var(--illu-c-job); }
.illu-archive-card--event       .illu-archive-card__eyebrow { color: var(--illu-c-event); }
.illu-archive-card--competition .illu-archive-card__eyebrow { color: var(--illu-c-competition); }

/* Tag pills (type / workplace / format) — short, rounded. */
.illu-archive-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
}
/* Künye detail facts — stacked badges (each on its own line, sized to its
 * content) so every piece of info reads as a labelled chip, not plain text. */
.illu-archive-card__details {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}
.illu-archive-card__detail {
	margin: 0;
	max-width: 100%;
	background: var(--illu-bg);
	color: var(--illu-text);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.4;
	padding: 5px 10px;
	border-radius: 8px;
	overflow-wrap: anywhere;
}
/* Per-kind soft colours (same family as the deadline pill). */
.illu-archive-card__detail--money  { background: #ecfdf5; color: #047857; }
.illu-archive-card__detail--prize  { background: #fffbeb; color: #b45309; }
.illu-archive-card__detail--date   { background: #eff6ff; color: #1d4ed8; }
.illu-archive-card__detail--people { background: #f5f3ff; color: #6d28d9; }
.illu-archive-card__detail--cat    { background: #fdf2f8; color: #be185d; }
.illu-archive-card__detail--info   { background: #ecfeff; color: #0e7490; }

/* Tag pills tinted by listing type (matches the eyebrow colour). */
.illu-archive-card--competition .illu-archive-card__tags .illu-archive-card__fact { background: #ecfdf5; color: #047857; }
.illu-archive-card--job         .illu-archive-card__tags .illu-archive-card__fact { background: #eff6ff; color: #1d4ed8; }
.illu-archive-card--event       .illu-archive-card__tags .illu-archive-card__fact { background: #fff7ed; color: #b45309; }
/* Primary date / status pill. */
.illu-archive-card__datewrap {
	margin: 0;
}
.illu-archive-card__fact {
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	padding: 5px 9px;
	border-radius: 999px;
	background: var(--illu-bg);
	color: var(--illu-text);
	white-space: nowrap;
}
.illu-archive-card__fact--date   { background: #eef2ff; color: #3730a3; }
.illu-archive-card__fact--warn   { background: #fef3c7; color: #92400e; }
.illu-archive-card__fact--soon   { background: #fee2e2; color: #b91c1c; }
.illu-archive-card__fact--closed { background: #e5e7eb; color: #6b7280; }

/* Byline footer — avatar + author on the left, share button on the right.
 * Sits right after the content (cards are content-height in the masonry
 * layout), with the same 8px rhythm and a small top pad. */
.illu-archive-card__footer {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-top: 2px;
	font-size: 12px;
	color: var(--illu-muted);
}
.illu-archive-card__byline {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	flex: 1 1 auto;
}
.illu-archive-card__avatar {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: block;
	flex-shrink: 0;
	object-fit: cover;
}
/* Full author name — no truncation/ellipsis; wraps if it must. */
.illu-archive-card__author {
	font-weight: 600;
	color: var(--illu-text);
	line-height: 1.3;
}
/* Share — plain icon button matching the theme's card share glyph (jli-share
 * from the theme's jl_font). No chrome, just the icon, tinted on hover. */
.illu-archive-card__share,
.illu-archive-card__share:hover,
.illu-archive-card__share:focus,
.illu-archive-card__share:active {
	margin-left: auto;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
	border: 0;
	/* Keep the button chrome-free in every state — the theme would otherwise
	 * paint a hover/active background that made it look like it "darkens". */
	background: transparent !important;
	box-shadow: none !important;
	outline: none;
	color: #1f2937;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
}
/* Force the icon glyph dark in all states (the theme tints it otherwise). */
.illu-archive-card__share .jli-share {
	font-size: 16px;
	line-height: 1;
	color: #1f2937 !important;
	transition: opacity 0.12s;
}
.illu-archive-card__share:hover .jli-share { opacity: 0.6; }
.illu-archive-card__share.is-copied,
.illu-archive-card__share.is-copied .jli-share { color: var(--illu-c-competition) !important; }
/* SVG fallback shown only when the theme icon font is unavailable (JS-detected). */
.illu-archive-card__share-fallback { display: none; }
.illu-archive-card__share.is-fallback .jli-share { display: none; }
.illu-archive-card__share.is-fallback .illu-archive-card__share-fallback { display: inline-block; }

/* Load more — styled by the theme's reused jl_* classes; these just guarantee
 * centering on any theme and a loading state. */
.illu-archive__loadmore { display: flex; justify-content: center; margin: 30px 0 0; }
.illu-archive__loadmore .jl-load-link { cursor: pointer; }
.illu-archive__loadmore.is-loading .jl-load-link { opacity: 0.55; pointer-events: none; }
.illu-archive-card__meta strong { color: var(--illu-text); font-weight: 600; }

/* ===== Related listings ================================================ */
.illu-related {
	margin: 32px 0;
	padding-top: 20px;
	border-top: 1px solid var(--illu-border);
}
.illu-related h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--illu-muted); margin: 0 0 14px; }
.illu-related .illu-archive-grid { margin-top: 0; }

/* ===== Mobile ========================================================== */
/* Use matching specificity + !important to defeat the desktop rules above. */
@media (max-width: 600px) {
	.illu-listing-box--has-logo:not(.illu-listing-box--has-hero) {
		grid-template-columns: 1fr;
		grid-template-areas: none;
	}
	.illu-listing-box--has-logo:not(.illu-listing-box--has-hero) .illu-listing-box__logo {
		justify-self: start;
	}
	.illu-listing-box dl.illu-listing-box__rows {
		grid-template-columns: 1fr !important;
		row-gap: 4px !important;
	}
	.illu-listing-box dl.illu-listing-box__rows > dt {
		font-size: 11px !important;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		padding-top: 6px !important;
	}
	.illu-listing-box dl.illu-listing-box__rows > dt:first-of-type { padding-top: 0 !important; }
}

/* Dark mode is opt-in via the `.illu-dark` class on the body (themes can add
 * it if they support dark mode). The plugin no longer auto-switches based on
 * `prefers-color-scheme` so the box stays a consistent gray on light sites. */
body.illu-dark .illu-listing-box {
	--illu-bg:     #0f172a;
	--illu-border: #1e293b;
	--illu-text:   #e2e8f0;
	--illu-muted:  #94a3b8;
	--illu-strong: #f1f5f9;
	--illu-card:   #1e293b;
}
body.illu-dark .illu-listing-box__featured { background: #78350f; color: #fef3c7; }
body.illu-dark .illu-listing-box__countdown--info { background: #1e293b; color: #cbd5e1; }
body.illu-dark .illu-listing-box__countdown--warn { background: #78350f; color: #fde68a; }
body.illu-dark .illu-listing-box__countdown--soon { background: #7f1d1d; color: #fecaca; }
body.illu-dark .illu-listing-box__calendar a { border-color: #334155; }
body.illu-dark .illu-listing-box__calendar a:hover { background: #1e293b; border-color: #475569; }
body.illu-dark .illu-archive-card { --illu-card: #1e293b; }
body.illu-dark .illu-archive-card__media { background: #0f172a; }

/* ===== Print =========================================================== */
@media print {
	.illu-listing-box {
		background: #fff !important;
		border: 1px solid #999;
		box-shadow: none;
		break-inside: avoid;
	}
	.illu-listing-box__calendar,
	.illu-listing-box__cta,
	.illu-listing-box__countdown { display: none !important; }
	.illu-listing-box__hero img { max-height: 200px; }
	.illu-listing-box__rows { row-gap: 6px; }
	.illu-related { display: none; }
}