/*
 * natulique-events-calendar: the events calendar, Luma's events timeline (luma.com/home; Julian,
 * 10 Oct 2026). It loads after the event pages' own stylesheet (natulique-events/assets/event.css)
 * and uses its colours, type, top bar, footer and buttons: everything here is the timeline and its
 * cards, prefixed nc-.
 *
 * Luma's numbers, measured on its public calendar pages on 11 Oct 2026: 960 px of content, the feed
 * on the left and a 260 px sidebar on the right (1.1.0); the day on a pill above its cards, with the
 * dashed line 4 px in from the left; 24 px between days and 16 px between cards; cards padded
 * 12/12/12/16 px with a 120 px picture on the right; times, hosts and places 16 px in grey; titles
 * 20 px, 18 px up to 650 px wide. No sidebar from 820 px down.
 */

/*
 * The top menu leaves out NATULIQUE at 820 px and below, the event pages' width for phones and
 * tablets (1.3.4, Julian, 12 Oct 2026: "on the events page on small screens, remove the word
 * "NATULIQUE""). The icon before the menu still leads to natulique.com.au, and at the same widths
 * the footer reads NATULIQUE beside its logo (1.3.3). The page marks the link nc-nav-wide.
 */
@media (max-width: 820px) {
	.ne a.ne-nav-link.nc-nav-wide { display: none; }
}
/*
 * Partner Store and Academy keep their full names on phones, 650 px and below (1.3.4, Julian, 12 Oct
 * 2026: "Show the word "Academy" instead of the hat icon", then "Change the "Star" icon to say
 * "Partner Store""), "Partner Store" in full rather than the event pages' "Store", each with its star
 * or cap beside it, as on tablets (1.3.5, Julian: "Add the icons to Partner Store and Academy" on
 * phones). The event pages' stylesheet hides the icons from 820 px down and, at 450 px and below,
 * shows them alone with 4 px of padding for a tap; beside a name they need none. With the tablet rule
 * below, the menu reads the same at every width but for NATULIQUE. The phone layout started at 450 px,
 * then 560 px (1.3.4: "also combine"), and since 1.3.5 at 650 px, where the corner goes, cards and
 * the top bar's gaps included (Julian: "can you combine 1 and 2?"). The page marks both links
 * nc-nav-word.
 */
@media (max-width: 650px) {
	.ne a.ne-nav-link.nc-nav-word .ne-nav-icon { display: block; padding: 0; }
	.ne a.ne-nav-link.nc-nav-word .ne-nav-label,
	.ne a.ne-nav-link.nc-nav-word .ne-nav-full { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
	.ne a.ne-nav-link.nc-nav-word .ne-nav-short { display: none; }
}
/*
 * Tablets, 651 to 820 px, have the computers' top bar without NATULIQUE (1.3.4, Julian, 12 Oct 2026,
 * of that layout: "Show the icon and word Partner Store and Academy / Show Partner Store and Academy
 * on the left / Bring back "Join the family" on the right"). The event pages' stylesheet hides the
 * menu's icons and shows "Store" at 820 px and below; here the star and the cap come back beside the
 * full names from 651 px up, which changes nothing on computers. "Join the family" is never cut to
 * "Join" on the calendar: phones have no corner at all.
 */
@media (min-width: 651px) {
	.ne.nc .ne-nav-icon { display: block; }
	.ne.nc .ne-nav-full { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
	.ne.nc .ne-nav-short { display: none; }
}
.ne.nc .ne-top-join-more { display: inline; }
/*
 * Phones, 650 px and below: no corner, so neither the local time (the event pages hide it there too)
 * nor "Join the family" (Julian, 12 Oct 2026: "remove "Join""), and the menu moves to the right,
 * ending 16 px from the edge in line with the page, with the leaf on the left ("align Partner Store
 * and Academy to the right"). Tablets kept these until Julian asked for the tablet layout above.
 */
@media (max-width: 650px) {
	.ne.nc .ne-nav { margin-left: auto; }
	.ne.nc .ne-top-right { display: none; }
}
/* The top bar's gaps close from 24 to 16 px with the phone layout, at 650 px; the event pages close
   them at 560 px (1.3.5, Julian: "can you combine 1 and 2?"). */
@media (max-width: 650px) {
	.ne.nc .ne-top-nav { gap: 16px; }
}

.nc-wrap {
	max-width: 960px; /* Luma's calendar pages: 960 px of content (1.1.0), as the event pages */
	margin: 0 auto;
	padding: 24px 16px 56px;
}

/*
 * The banner (1.1.0), Luma's cover (measured on luma.com/genai-sf, 11 Oct 2026): cropped to 3.5 : 1,
 * 16 px corners, 8 px under the top bar, a little wider than the content (Luma's runs 24 px past
 * it; ours runs to the page's 960 px). From 1000 px down its corners are square, as Luma's are
 * when it runs edge to edge, which it does from 960 px down; between, it sits up to 20 px from each
 * edge. Square from 992 px until 1.3.4, when it moved to 1000 px, the sidebar gap's breakpoint, so
 * the calendar changes once there (Julian, 12 Oct 2026: "can we combine 4 and 5?", 821 to 992 px
 * and 993 to 1000 px). Shown at every width, phones included.
 */
.nc-banner {
	margin: -16px -16px 24px;
	overflow: hidden;
	aspect-ratio: 3.5 / 1;
	border-radius: 16px;
	background: var(--ne-tint);
}
.nc-banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1000px) {
	.nc-banner { border-radius: 0; }
}

/*
 * The feed on the left and the sidebar on the right (1.1.0), as on Luma's calendar pages (measured on
 * luma.com/genai-sf, 11 Oct 2026): a 260 px sidebar, 24 px from the feed (16 px up to 1000 px wide),
 * staying in view while the feed scrolls. The sidebar keeps its column when it has nothing to show,
 * so the feed doesn't move when a campaign ends. From 820 px down the sidebar is hidden, as Luma's
 * is (Julian, 11 Oct 2026), and the feed takes the full width.
 */
.nc-layout { display: flex; align-items: flex-start; gap: 24px; }
.nc-feed { flex: 1 1 auto; min-width: 0; }
.nc-side {
	position: sticky;
	top: 16px;
	flex: 0 0 260px;
	max-height: calc(100vh - 32px); /* a tall card scrolls within it, as Luma caps its sidebar at the window */
	overflow-y: auto;
	display: grid;
	grid-auto-rows: max-content; /* each card its full height, never squeezed to fit the window; the sidebar scrolls instead */
	gap: 12px;
	margin-top: 8px;
}
@media (max-width: 1000px) {
	.nc-layout { gap: 16px; }
}
@media (max-width: 820px) {
	.nc-layout { display: block; }
	.nc-side { display: none; }
}

/* The heading and the Upcoming / Past switch, on one row as on Luma. */
.nc-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 8px 0 32px;
}
.ne .nc-title {
	font-family: var(--ne-sans);
	font-size: 32px;
	font-weight: 600; /* DAX Medium, the font kit's 600 (lesson store-font-kit-weights) */
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: #533019; /* the store's own heading colour, as the event title */
}
@media (max-width: 650px) {
	.nc-head { margin-bottom: 24px; }
	.ne .nc-title { font-size: 28px; }
}

/* Luma's segmented switch, in the event pages' chip colours: the current choice sits on a card
   that is lighter than the track, the other is grey until hovered. */
.nc-switch {
	display: inline-flex;
	flex-shrink: 0;
	padding: 2px;
	border-radius: 0; /* square corners on the switch and its tabs (Julian, 11 Oct 2026) */
	background: rgba(87, 49, 25, 0.06);
}
.ne a.nc-switch-item {
	padding: 5px 12px;
	border-radius: 0;
	color: var(--ne-grey);
	font-size: 14px;
	font-weight: 600;
	line-height: 21px;
	white-space: nowrap;
}
.ne a.nc-switch-item[aria-current="page"] {
	background: var(--ne-card);
	color: var(--ne-ink);
	box-shadow: 0 1px 3px rgba(87, 49, 25, 0.12);
}
@media (hover: hover) {
	.ne a.nc-switch-item:not([aria-current="page"]):hover { color: var(--ne-grey-hover); }
}

/* The Location dropdown (1.2.0, Julian, 11 Oct 2026): on the right of the first day's row, where his
   screenshot circled it, in the switch's chip colours, with a chevron. It takes no height of its own,
   so the timeline starts where it did. */
.nc-tools {
	position: relative;
	z-index: 4; /* above the first day's pill, which is sticky */
	display: flex;
	justify-content: flex-end;
	height: 30px;
	margin-bottom: -30px;
	pointer-events: none;
}
.nc-filter { position: relative; pointer-events: auto; }
/* Its button: its words and a chevron that turns when open, with no background (Julian, 11 Oct 2026), its
   right edge in line with the cards'. */
.nc-filter-button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 30px;
	padding: 0 0 0 8px;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--ne-ink);
	font: 600 14px/30px var(--ne-sans);
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nc-filter-button svg { flex: none; color: var(--ne-ink-soft); transition: transform 0.2s; }
.nc-filter-button[aria-expanded="true"] svg { transform: rotate(180deg); }
.nc-filter-button:focus-visible { outline: 3px solid #c08a5b; outline-offset: 2px; }
@media (hover: hover) {
	.nc-filter-button:hover { color: var(--ne-active); }
	.nc-filter-button:hover svg { color: var(--ne-ink); }
}
/* Its menu, as Luma's account menu (Julian's screenshot, 11 Oct 2026): a white card with 12 px corners
   and a soft shadow under the button; plain rows with room around them, the one under the pointer or
   the keyboard on a light rounded background; every location first, then a thin line; a tick on the
   choice shown. */
.nc-filter-menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 10;
	min-width: 240px;
	max-width: calc(100vw - 32px);
	max-height: min(440px, 70vh);
	overflow-y: auto;
	margin: 0;
	padding: 6px;
	list-style: none;
	border: 1px solid rgba(87, 49, 25, 0.08);
	border-radius: 12px;
	background: #ffffff;
	box-shadow: 0 12px 32px rgba(43, 24, 13, 0.12), 0 2px 6px rgba(43, 24, 13, 0.06);
}
.nc-filter-option {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 9px 12px;
	border-radius: 8px;
	color: var(--ne-ink);
	font-size: 15px;
	line-height: 20px;
	white-space: nowrap;
	cursor: pointer;
	outline: none;
}
.nc-filter-option:focus { background: rgba(87, 49, 25, 0.07); }
@media (hover: hover) {
	.nc-filter-option:hover { background: rgba(87, 49, 25, 0.07); }
}
.nc-filter-option[data-value=""] { margin-bottom: 7px; }
.nc-filter-option[data-value=""]::before { content: ""; position: absolute; right: -6px; bottom: -4px; left: -6px; border-top: 1px solid rgba(87, 49, 25, 0.1); }
.nc-filter-option[aria-selected="true"] { font-weight: 600; }
.nc-filter-option[aria-selected="true"]::after {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5' fill='none' stroke='%23573119' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
/* Anything the dropdown or the switch hides stays hidden, whatever display its own rule sets. */
.nc-wrap [hidden] { display: none !important; }

/*
 * The timeline, single-column at every width as on Luma's calendar pages (1.1.0; until then the day
 * sat in a column on the left on a computer): the dashed line 4 px in from the left with each day's
 * dot on it, and the day above its cards on a pill that stays at the top while its cards scroll
 * under it. At rest the pill is invisible; once stuck (nc-stuck, set by the page's script) it gets
 * Luma's faint edge, a frosted cream behind it and a soft shadow, so the card beneath doesn't show
 * through. The line fades out under the last day's cards.
 */
.nc-day { position: relative; padding: 0 0 24px 24px; }
.nc-day.nc-day-last { padding-bottom: 0; } /* the last day shown (1.2.0: the Location dropdown can hide days) */
.nc-day::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 3px;
	border-left: 2px dashed rgba(87, 49, 25, 0.12);
}
.nc-day.nc-day-first::before { top: 14px; }
.nc-day.nc-day-last::before {
	-webkit-mask-image: linear-gradient(#000 0%, #000 calc(100% - 120px), transparent 100%);
	mask-image: linear-gradient(#000 0%, #000 calc(100% - 120px), transparent 100%);
}
.nc-dot {
	position: absolute;
	top: 9px;
	left: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(87, 49, 25, 0.25);
	box-shadow: 0 0 0 4px var(--ne-bg);
}
.nc-day-date {
	position: sticky;
	top: 8px;
	z-index: 3;
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	margin: 0 0 12px -13px;
	padding: 2px 12px;
	border: 1px solid transparent;
	border-radius: 100px;
	line-height: 1.5;
	transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.nc-day-date.nc-stuck {
	border-color: var(--ne-line);
	background: rgba(250, 245, 239, 0.9);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 4px 14px rgba(87, 49, 25, 0.1);
}
.nc-date { font-weight: 600; color: var(--ne-ink); }
.nc-weekday { color: var(--ne-grey); }
.nc-day-cards { display: grid; gap: 16px; }

/*
 * A card: the event pages' card (cream, a faint line, square corners but the bottom right, rounded
 * 18 px: Julian, 9 Oct 2026), laid out as Luma's: the words on the left, the picture on the right.
 * The whole card opens the event, through its title's link stretched over it; Manage Event sits
 * above that link. On hover the edge darkens and the shadow deepens, as Luma's.
 */
.nc-card {
	position: relative;
	display: flex;
	gap: 16px;
	padding: 12px 12px 12px 16px;
	background: var(--ne-card);
	border: 1px solid var(--ne-line);
	border-radius: 0 0 18px 0;
	box-shadow: 0 2px 10px rgba(87, 49, 25, 0.06);
	transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) {
	.nc-card:hover { border-color: rgba(87, 49, 25, 0.28); box-shadow: 0 8px 24px rgba(87, 49, 25, 0.1); }
	.nc-card:hover:has(.nc-manage:hover) { border-color: var(--ne-line); }
}
.nc-info { flex: 1 1 auto; min-width: 0; display: grid; gap: 8px; align-content: start; }
.nc-time { color: var(--ne-grey); font-variant-numeric: tabular-nums; }
.nc-live { margin-right: 6px; color: #c2531b; font-weight: 600; } /* Luma's orange, darkened to 4.5:1, as the event page's countdown */
.nc-live::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin: 0 6px 2px 0;
	border-radius: 50%;
	background: currentColor;
	vertical-align: middle;
}
.nc-local { color: #c2531b; }
.ne .nc-name {
	font-family: var(--ne-sans);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	color: #533019;
	overflow-wrap: anywhere;
}
.ne .nc-name a { color: inherit; }
.nc-name a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 0 0 18px 0; }
.ne .nc-name a:focus-visible { outline: none; }
.nc-name a:focus-visible::after { outline: 3px solid #c08a5b; outline-offset: 2px; }
@media (hover: hover) {
	.ne .nc-name a:hover { color: inherit; }
}
.nc-line {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	color: var(--ne-grey);
}
.nc-line > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-icon, .nc-icon svg { display: block; flex-shrink: 0; width: 16px; height: 16px; }

/* Under the place: badges, who's going and Manage Event, as Luma's row of pills and heads. */
.nc-extras { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
.nc-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 6px;
	background: var(--ne-tint);
	color: var(--ne-ink-soft);
	font-size: 13px;
	font-weight: 600;
	line-height: 18px;
}
.nc-badge-state { background: #fbe9e7; color: #7a2318; } /* the event page's notice colours */
.nc-badge-staff { background: transparent; box-shadow: inset 0 0 0 1px rgba(87, 49, 25, 0.28); }
.nc-badge-price { background: var(--ne-pale); color: var(--ne-button); } /* a paid event's price: Luma's pill in NATULIQUE's brown, the Get Tickets button's, at 13% behind it (1.3.6, Julian) */
.nc-going { display: inline-flex; align-items: center; gap: 8px; }
.nc-going .ne-heads { padding-bottom: 0; }
.nc-going .ne-head { box-shadow: 0 0 0 1.5px var(--ne-card); }
.nc-going-line { color: var(--ne-ink-soft); font-size: 14px; }
.ne a.nc-manage { position: relative; z-index: 2; padding: 4px 10px; font-size: 13px; }
.nc-manage .ne-arrow { margin-left: 2px; opacity: 0.6; }

.nc-thumb {
	flex: none;
	width: 120px;
	height: 120px;
	overflow: hidden;
	border-radius: 0 0 12px 0; /* the cards' shape: square but the bottom right (Julian, 11 Oct 2026; 1.2.0) */
	background: var(--ne-tint);
}
.nc-thumb img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 650px) {
	.ne .nc-name { font-size: 18px; }
	.nc-thumb { width: 96px; height: 96px; }
}
/* Touch screens: the switch and Manage Event at least 36 px tall, an easy tap. */
@media (pointer: coarse), (max-width: 650px) {
	.ne a.nc-switch-item { padding: 8px 14px; }
	.ne a.nc-manage { padding: 9px 12px; }
}
/* A phone, up to 650 px (checked at 320, 375, 390 and 430 px on 11 Oct 2026; up to 450 px until
   1.3.4, then up to 560 px until 1.3.5, as Julian asked to "combine" the layouts on either side, so
   the calendar has one phone layout). It comes after the 650 px rule above, so its 72 px picture wins.
   The picture sits beside the time and title only, and the hosts, the place and the badges take the
   card's full width beneath, so they aren't cut short by the picture's column. The visitor's own
   time gets a line of its own. */
@media (max-width: 650px) {
	.nc-card {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: start;
		gap: 4px 12px;
		padding: 12px;
	}
	.nc-info { display: contents; }
	.nc-time { grid-column: 1; grid-row: 1; }
	.nc-name { grid-column: 1; grid-row: 2; }
	.nc-thumb { grid-column: 2; grid-row: 1 / span 2; width: 72px; height: 72px; border-radius: 0 0 10px 0; }
	.nc-line, .nc-extras { grid-column: 1 / -1; }
	.nc-extras { margin-top: 4px; }
	.nc-local { display: block; }
	.nc-local-sep { display: none; }
}

/*
 * The sidebar (1.1.0). The top button is Luma's "Submit Event": full width, the event pages' soft chip
 * colours, deeper on hover. Each campaign placement (1, then 2 beneath it, 12 px apart) takes the event pages' card shape (square corners
 * but the bottom right, 18 px; Julian, 9 Oct 2026). Since 1.2.0, after Julian's example of 11 Oct
 * 2026, a card with a background image is a tall poster: the picture fills it, its tag sits on the
 * picture top left as a frosted pill, and the words sit at its foot on a fade, dark brown under white
 * words and cream under brown ones: the eyebrow in spaced capitals, a bold heading, the paragraph and
 * a short button with the event pages' arrow. A card without one keeps the cream card, in the same type.
 */
.ne a.nc-side-button {
	display: block;
	padding: 8px 12px;
	border-radius: 0; /* square, as the switch (Julian, 11 Oct 2026) */
	background: rgba(87, 49, 25, 0.06);
	color: var(--ne-ink-soft);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	text-align: center;
}
/* The event pages' arrow after its words (1.2.0, Julian): half-faded at rest, full and nudged up and
   right on hover, as after the venue on an event page. */
.ne a.nc-side-button .ne-arrow { color: currentColor; }
@media (hover: hover) {
	.ne a.nc-side-button:hover { background: rgba(87, 49, 25, 0.12); color: var(--ne-ink); }
	.ne a.nc-side-button:hover .ne-arrow { opacity: 1; transform: translate(1px) translateY(-0.5px); }
}
.nc-campaign {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--ne-line);
	border-radius: 0 0 18px 0;
	background: var(--ne-card) center / cover no-repeat;
	box-shadow: 0 2px 10px rgba(87, 49, 25, 0.06);
}
.nc-campaign > * { position: relative; }
.nc-campaign-bg {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 330px; /* a tall poster at the sidebar's 260 px (Julian, 11 Oct 2026, in the inspector); longer words make it taller */
	border: 0;
}
/* The fade belongs to the words: it starts 32 px above the eyebrow and is nearly solid by the button,
   so a long paragraph that makes the card taller never sits on the bare picture. */
.nc-campaign-bg > .nc-campaign-body {
	padding-top: 32px;
	background: linear-gradient(180deg, rgba(255, 252, 247, 0) 0, rgba(255, 252, 247, 0.72) 32px, rgba(255, 252, 247, 0.96) 100%);
}
.nc-campaign-light.nc-campaign-bg > .nc-campaign-body { background: linear-gradient(180deg, rgba(58, 36, 24, 0) 0, rgba(58, 36, 24, 0.62) 32px, rgba(58, 36, 24, 0.94) 100%); }
.nc-campaign-tag {
	display: inline-block;
	max-width: calc(100% - 28px);
	margin: 14px 14px 0;
	padding: 6px 13px;
	border-radius: 999px;
	background: var(--ne-tint);
	color: var(--ne-ink);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	overflow-wrap: anywhere;
}
.nc-campaign-bg > .nc-campaign-tag {
	align-self: flex-start;
	margin: 14px 14px auto; /* at the top, pushing the words to the foot; in the layout, so nothing covers it */
	background: rgba(58, 36, 24, 0.42);
	color: #ffffff;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.nc-campaign-image { display: block; width: calc(100% - 24px); height: auto; margin: 12px 12px 0; border-radius: 10px; }
.nc-campaign-body { display: grid; gap: 8px; padding: 18px; overflow-wrap: anywhere; } /* a long word or link wraps inside 260 px */
.nc-campaign-eyebrow { margin: 0 0 -2px; color: var(--ne-ink-soft); font-size: 11px; font-weight: 500; line-height: 1.3; letter-spacing: 0.24em; text-transform: uppercase; }
.ne .nc-campaign-heading { font-family: var(--ne-sans); font-size: 24px; font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; color: #533019; }
.nc-campaign-text { margin: 0; color: var(--ne-ink-soft); font-size: 14px; line-height: 1.45; }
.nc-campaign-light .nc-campaign-eyebrow { color: rgba(255, 255, 255, 0.82); }
.ne .nc-campaign-light .nc-campaign-heading { color: #ffffff; }
.nc-campaign-light .nc-campaign-text { color: rgba(255, 255, 255, 0.92); }
/* A short button, as wide as its words, with the arrow; the event pages' button shape, a little smaller. */
.ne a.nc-campaign-button {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	gap: 10px;
	width: auto;
	margin-top: 6px;
	padding: 10px 16px 10px 18px;
	border-radius: 0 0 12px 0;
	font-size: 15px;
}
.ne a.nc-campaign-button .ne-arrow { margin-left: 0; color: currentColor; opacity: 1; vertical-align: 0; }
/* On white words the button turns cream with brown words, so it still stands out. */
.ne .nc-campaign-light a.nc-campaign-button { background: var(--ne-card); color: var(--ne-button); }
.ne .nc-campaign-light a.nc-campaign-button:focus-visible { outline-color: #ffffff; } /* the brown ring would vanish on the dark fade */
@media (hover: hover) {
	.ne a.nc-campaign-button:hover .ne-arrow { transform: translate(1px) translateY(-0.5px); }
	.ne .nc-campaign-light a.nc-campaign-button:hover { background: #ffffff; color: var(--ne-active); }
}

/* An empty list: Luma's empty state, in the guest list's round icon. */
.nc-empty { padding: 56px 16px; text-align: center; color: var(--ne-ink-soft); }
.nc-empty-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 12px;
	border-radius: 50%;
	background: rgba(87, 49, 25, 0.06);
}
.nc-empty-icon .nc-icon, .nc-empty-icon svg { width: 24px; height: 24px; }
.ne .nc-empty h2 { margin-bottom: 4px; font-size: 20px; font-weight: 600; color: var(--ne-ink); }
.nc-empty p { margin: 0 0 8px; }