/*
 * natulique-events: the event, thank-you and message pages. Luma's layout at every width, phone,
 * tablet and computer (measured on luma.com/v2h3zxrm, 9 Oct 2026; Julian): see "The layout"
 * below. In NATULIQUE's own colours: the creams and browns of the store and its emails. Every
 * word in the store's Adobe font, ff-dax-pro, the title included (Julian, 8 Oct 2026), as the
 * store's own headings are.
 */

:root {
	--ne-bg: #f4ece3;
	--ne-card: #fffcf7;
	--ne-ink: #573119;
	--ne-ink-soft: #7a5a45;
	--ne-line: rgba(87, 49, 25, 0.14);
	--ne-tint: #efe3d6;
	--ne-button: #4b2e23;
	--ne-button-ink: #ffffff;
	/* Luma's hover colours, in the store's browns (luma.com/v2h3zxrm, 9 Oct 2026): */
	--ne-button-hover: #5a372a; /* its main button lightens on hover (x 1.2) */
	--ne-active: #3f261d;       /* its brand a shade darker (x 0.835): the Manage button on hover */
	--ne-link-active: #7a5a45;  /* hovered text links turn lighter, as Luma's near-black turns its brand colour (Julian, 9 Oct 2026) */
	--ne-pale: rgba(75, 46, 35, 0.13); /* its brand at 13%: the Manage box, inline link lines */
	--ne-grey: rgba(87, 49, 25, 0.5);       /* its grey words (36% of its near-black), as light on the store's cream */
	--ne-grey-hover: rgba(87, 49, 25, 0.8); /* its grey a shade deeper on hover (64%) */
	--ne-ease: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* every link and button change, as Luma's */
	--ne-radius: 16px;
	--ne-sans: "ff-dax-pro", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

body.ne {
	margin: 0;
	background: var(--ne-bg);
	color: var(--ne-ink);
	font-family: var(--ne-sans);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

/* Links, as Luma's: no underline, every change eased over 0.3 s, and a shade darker on hover
   where there is a mouse. Links drawn as buttons set their own colours further down. */
.ne a { color: inherit; text-decoration: none; transition: var(--ne-ease); }
@media (hover: hover) {
	.ne a:hover { color: var(--ne-link-active); }
}
.ne img { max-width: 100%; display: block; }
.ne h1, .ne h2 { margin: 0; }

/* The top bar is 52 px tall, as Luma's is. */
.ne-top {
	max-width: 960px;
	height: 52px;
	margin: 0 auto;
	padding: 0 16px;
	display: flex;
	align-items: center;
}
.ne-brand { display: flex; flex-shrink: 0; align-items: center; text-decoration: none; font-weight: 600; letter-spacing: 0.08em; }
/* NATULIQUE's icon in the top-left corner, where Luma has its own mark (1.1.3, Julian): the same
   icon as the footer, as Luma uses one mark in both, at 28 px. The same shade as the footer's
   too (1.1.5, Julian): half opacity, 0.8 on hover. */
.ne-brand img { display: block; width: 28px; height: 28px; border-radius: 50%; opacity: 0.5; transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
@media (hover: hover) {
	.ne-brand:hover img { opacity: 0.8; }
}

/* The menu above the event image (Calendar, or NATULIQUE without the calendar, then Partner Store
   and Academy), Luma's signed-in menu (seen on luma.com/v2h3zxrm, 9 Oct 2026): 16 px icons and 14 px
   words 8 px apart, items 20 px apart, grey until hovered, then dark over 0.3 s. Each icon sits
   beside its name at every width (1.3.7, Julian, 12 Oct 2026, taking the calendar's design: "move to
   the new ones"); until 1.3.7 the menu was words alone from 820 px down and icons alone from 450 px
   down. The bar spans the window like Luma's, its logo 16 px from the left edge. From 1240 px the
   logo has room in the margin, so the menu starts above the image; on a narrower screen it follows
   the logo. The top-right corner is Luma's too: the visitor's local time in grey, then "Join the
   Family" where Luma has "Create Event" (Julian, 9 Oct 2026), opening the Join pop-up, never cut to
   "Join" (1.3.7; it was from 820 px down since 1.3.0). Phones, 650 px and below, have no corner, as
   the calendar's /events since its 1.3.4: the menu moves to the right, ending 16 px from the edge,
   the leaf stays on the left, and the bar's gaps and the menu's close to 16 px, so Calendar, Store
   and Academy fit a 320 px phone. Until 1.3.7 the time went at 650 px and the gaps closed at 560. */
.ne-top-nav { max-width: none; gap: 24px; }
.ne-top-right { display: flex; flex-shrink: 0; align-items: center; gap: 16px; margin-left: auto; }
.ne-time { color: var(--ne-grey); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ne a.ne-top-join { color: var(--ne-grey); font-size: 14px; font-weight: 600; white-space: nowrap; }
@media (hover: hover) {
	.ne a.ne-top-join:hover { color: var(--ne-ink); }
}
@media (max-width: 650px) {
	.ne-top-nav { gap: 16px; }
	.ne-top-nav .ne-nav { margin-left: auto; gap: 16px; }
	.ne-top-right { display: none; }
}
.ne-nav { display: flex; align-items: center; gap: 20px; min-width: 0; }
.ne a.ne-nav-link {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--ne-grey);
	font-size: 14px;
	font-weight: 600;
	line-height: 21px;
	white-space: nowrap;
	isolation: isolate;
}
@media (hover: hover) {
	.ne a.ne-nav-link:hover { color: var(--ne-ink); }
}
.ne-nav-icon { display: block; flex-shrink: 0; width: 16px; height: 16px; }
.ne-nav-icon svg { display: block; width: 16px; height: 16px; }
/* A keyboard's focus: Luma's pale pill behind the item. */
.ne a.ne-nav-link:focus-visible { outline: none; color: var(--ne-ink); }
.ne-nav-link:focus-visible::before { content: ""; position: absolute; inset: -2px -6px; z-index: -1; border-radius: 8px; background: var(--ne-pale); }
@media (min-width: 1240px) {
	.ne-top-nav { max-width: none; display: grid; grid-template-columns: 1fr minmax(0, 960px) 1fr; padding: 0; }
	.ne-top-nav .ne-brand { grid-column: 1; grid-row: 1; justify-self: start; margin-left: 16px; }
	.ne-top-nav .ne-nav { grid-column: 2; grid-row: 1; padding: 0 16px; }
	.ne-top-nav .ne-top-right { grid-column: 2 / 4; grid-row: 1; justify-self: end; margin-right: 16px; }
}
/* A menu item's short name, "Store" for "Partner Store" (Julian, 11 Oct 2026, 1.3.0), on phones
   only since 1.3.7, where Calendar, Partner Store and Academy in full don't fit 375 px beside their
   icons; screen readers still hear the full name, and the short one is hidden from them. */
.ne-nav-short { display: none; }
@media (max-width: 650px) {
	.ne-nav-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.ne-nav-short { display: inline; }
}

/*
 * The layout, Luma's at every width, with Luma's breakpoints (1000, 820, 650 and 450 px):
 * 1. A computer: 928 px of content inside 960 px with 16 px each side. Two columns: the left one
 *    (image, Manage box, Presented by, Hosted by) 330 px wide, a 32 px gap, then the rest. Blocks
 *    in a column sit 24 px apart (--ne-gap).
 * 2. A tablet: the left column narrows to 300 px up to 1000 px wide, and to 280 px up to 820 px,
 *    where the gap is 24 px and blocks sit 20 px apart.
 * 3. A phone, up to 650 px: one column. The image (with the Manage box) fills the width, right
 *    under the top bar, the title starts 20 px below it, and Presented by and Hosted by come last.
 *    Until 1.3.7 that was from 450 px down, and from 451 to 650 px the image was at most 400 px wide
 *    and centred with the title 32 px below; 1.3.7 makes it one phone layout, as the calendar's
 *    (Julian, 12 Oct 2026). The breakpoints are now 1000, 820 and 650 px.
 * The document order is image, main, side; the grid places them.
 */
.ne { --ne-gap: 24px; }
.ne-grid {
	max-width: 960px;
	margin: 0 auto;
	padding: 16px 16px 48px;
	display: grid;
	grid-template-columns: 330px minmax(0, 1fr);
	grid-template-areas: "cover main" "side main";
	grid-template-rows: auto 1fr;
	column-gap: 32px;
	row-gap: var(--ne-gap);
}
.ne-cover { grid-area: cover; }
.ne-main { grid-area: main; min-width: 0; }
.ne-side { grid-area: side; }

@media (max-width: 1000px) {
	.ne-grid { grid-template-columns: 300px minmax(0, 1fr); }
}
@media (max-width: 820px) {
	.ne { --ne-gap: 20px; }
	.ne-grid { grid-template-columns: 280px minmax(0, 1fr); column-gap: 24px; }
}
@media (max-width: 650px) {
	.ne-grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "cover" "main" "side";
		grid-template-rows: none;
		row-gap: 0;
	}
	.ne-grid { padding-top: 0; }
	.ne-cover { width: 100%; }
	.ne-main { margin-top: 20px; }
	.ne-side { margin-top: var(--ne-gap); }
}

.ne-cover { display: grid; gap: var(--ne-gap); align-content: start; }

/* The image with Luma's glow, in place of a shadow: a blurred copy of the image 16 px lower, at
   20%, darkened to 80% and 20% more saturated, multiplied into the page behind the image. Luma
   moves the copy 0.1 px each second ("nudge"), which keeps Safari drawing the blur; so does this.
   The image sits in a frame with Luma's faint edge, scaled up 0.5% so no gap shows at the corners. */
.ne-cover-image { position: relative; z-index: 1; }
.ne-cover-glow {
	position: absolute;
	top: 16px;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.2;
	filter: brightness(0.8) blur(24px) saturate(1.2);
	mix-blend-mode: multiply;
	animation: ne-nudge 1s ease infinite alternate;
}
@keyframes ne-nudge {
	from { transform: translateY(0.1px); }
	to { transform: translateY(0); }
}
.ne-cover-frame {
	position: relative;
	overflow: hidden;
	border: 0.5px solid rgba(87, 49, 25, 0.04);
	border-radius: var(--ne-radius);
}
.ne-cover-frame img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transform: scale(1.005);
}

/* The Manage box under the image, for store admins only (natulique_events_manage_url()). Luma's
   "You have manage access for this event" card (seen on luma.com/v2h3zxrm, 9 Oct 2026), in the
   store's browns: 12 px corners and 12 by 14 px of padding, the button colour at 13% behind text
   in that colour, a column gap below the image. Its button: a 30 px pill, 14 px type, a 14 px arrow 6 px
   after the word, a shade darker on hover over 0.3 s, the arrow still. Luma's type is medium,
   which in the store's font kit is weight 600 (FF Dax Pro Medium), as Buy now is. */
.ne-manage {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--ne-pale);
	color: var(--ne-button);
}
.ne-manage p { margin: 0; }
.ne a.ne-manage-button {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	height: 30px;
	padding: 0 10px;
	border: 1px solid var(--ne-button);
	border-radius: 15px;
	background: var(--ne-button);
	color: var(--ne-button-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	outline: 2px solid transparent;
	outline-offset: 2px;
}
.ne a.ne-manage-button:focus-visible { outline-color: var(--ne-button); }
.ne-manage-button .ne-arrow {
	width: 14px;
	height: 14px;
	margin-left: 6px;
	color: inherit;
	opacity: 1;
	transform: none;
	transition: none;
}
.ne-manage-button .ne-arrow svg { width: 14px; height: 14px; }
@media (hover: hover) {
	.ne a.ne-manage-button:hover { background: var(--ne-active); border-color: var(--ne-active); color: var(--ne-button-ink); }
}

/* The title is Luma's size at every width: 48 px on a computer, 40 px up to 1000 px wide, 36 up
   to 820 and 28 on a phone, up to 650 (32 from 451 to 650 until 1.3.7, which made one phone
   layout), with Luma's line heights (1.15, and 1.2 on a phone). It is DAX Medium, the kit's weight
   600 (Julian, 9 Oct 2026: "more medium"). */
.ne-title {
	font-family: var(--ne-sans);
	font-weight: 600;
	font-size: 48px;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: #533019; /* the store's own heading colour */
}
@media (max-width: 1000px) {
	.ne-title { font-size: 40px; }
}
@media (max-width: 820px) {
	.ne-title { font-size: 36px; }
}
@media (max-width: 650px) {
	.ne-title { font-size: 28px; line-height: 1.2; }
}
.ne-title-small { font-size: 28px; }

/* "NATULIQUE ›" links to natulique.com.au, as Luma's links to its calendar, with its 24 px round
   leaf. Under the title it shows only on a phone, as on Luma: on a computer and a tablet the name
   is in Presented by. */
.ne-presenter { display: flex; align-items: center; width: fit-content; font-weight: 600; }
.ne-presenter img { width: 24px; height: 24px; margin-right: 8px; border-radius: 50%; }
.ne-chevron { display: block; flex-shrink: 0; width: 16px; height: 16px; transition: var(--ne-ease); }
.ne-chevron svg { display: block; width: 16px; height: 16px; }

/* Under the title: its name keeps its colour; the chevron, half faded and 1 px low, comes up to
   full and moves 2 px right while the row is hovered or tapped, as Luma's does. */
.ne-presenter-top { display: none; margin: 6px 0 20px; }
.ne a.ne-presenter-top, .ne a.ne-presenter-top:hover { color: var(--ne-ink-soft); }
.ne-presenter-top .ne-chevron { margin-left: 2px; opacity: 0.5; transform: translateY(1px); }
.ne-presenter-top:hover .ne-chevron { opacity: 1; transform: translate(2px) translateY(1px); }
@media (max-width: 650px) {
	.ne-presenter-top { display: flex; }
	.ne-presenter-top .ne-chevron { transform: translateY(0.5px); }
	.ne-presenter-top:hover .ne-chevron { transform: translate(2px) translateY(0.5px); }
}

/* In Presented by: the name darkens on hover like any link, and its pale chevron moves 2 px right. */
.ne-presenter-link { margin: 0 0 8px; }
.ne-presenter-link .ne-chevron { margin-left: 1px; color: rgba(87, 49, 25, 0.36); transform: translateY(1px); }
@media (hover: hover) {
	.ne-presenter-link:hover .ne-chevron { transform: translate(2px) translateY(1px); }
}

.ne-rows { margin: 16px 0 var(--ne-gap); display: grid; gap: 14px; }
.ne-row { display: flex; align-items: center; gap: 14px; }
.ne-row-title { font-weight: 600; font-size: 17px; text-decoration: none; }
.ne-row-sub { color: var(--ne-ink-soft); font-size: 15px; }

.ne-badge {
	flex: 0 0 44px;
	height: 46px;
	border: 1px solid var(--ne-line);
	border-radius: 10px;
	background: var(--ne-card);
	overflow: hidden;
	text-align: center;
	line-height: 1;
}
.ne-badge span {
	display: block;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.06em;
	padding: 4px 0 3px;
	background: var(--ne-tint);
	color: var(--ne-ink-soft);
}
.ne-badge b { display: block; font-size: 18px; padding-top: 4px; }

.ne-icon {
	flex: 0 0 44px;
	height: 44px;
	border: 1px solid var(--ne-line);
	border-radius: 10px;
	background: var(--ne-card);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ne-ink-soft);
}

/* Inline links (Open in Google Maps, Add to calendar, links in About): Luma's description links, a
   faint brand line underneath that darkens with the text on hover. */
.ne-link, .ne-cal a, .ne-about a { border-bottom: 1px solid var(--ne-pale); }
@media (hover: hover) {
	.ne-link:hover, .ne-cal a:hover, .ne-about a:hover { border-bottom-color: var(--ne-link-active); }
}

/* Quiet links (Contact the Host, Back to the event page): Luma's "Contact the Host" button, grey
   14 px words with no line, a shade deeper on hover. */
.ne a.ne-quiet { border-bottom: 0; color: var(--ne-grey); font-size: 14px; font-weight: 600; }
@media (hover: hover) {
	.ne a.ne-quiet:hover { color: var(--ne-grey-hover); }
}
.ne-side > .ne-contact { margin: 0; line-height: 1; }
/* "Share Event" (1.3.9) looks like Contact the Host, 12 px under it rather than the column's gap. */
.ne .ne-share-link { color: var(--ne-grey); font-size: 14px; font-weight: 600; cursor: pointer; }
.ne-side > .ne-contact + .ne-share { margin-top: -12px; }
/* Its notice (1.3.10, Julian, 12 Oct 2026: "make it white, make it appear to the top right of the
   share event, and remove the tick box"): white with the page's brown words and Luma's shadow,
   8 px right of the link, rising 7 px above it, fading in and out. Any higher and it would cover
   the end of Contact the Host, 10 px above. The line is as wide as the link, so the notice sits
   against the link and not the column's edge. */
.ne-side > .ne-share { position: relative; justify-self: start; }
.ne .ne-toast.ne-toast-near {
	position: absolute;
	left: 100%;
	bottom: 0;
	margin: 0 0 0 8px;
	min-width: 0;
	max-width: none;
	padding: 4px 10px;
	line-height: 16px;
	background: #ffffff;
	color: var(--ne-ink);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	pointer-events: none;
	animation: ne-toast-near-in 0.2s ease-out forwards;
}
.ne .ne-toast.ne-toast-near.ne-toast-out { animation: ne-toast-near-out 0.3s ease-in forwards; }
@keyframes ne-toast-near-in {
	from { opacity: 0; transform: translate3d(0, 4px, 0) scale(0.96); }
	to { opacity: 1; transform: none; }
}
@keyframes ne-toast-near-out {
	from { opacity: 1; transform: none; }
	to { opacity: 0; transform: translate3d(0, -4px, 0); }
}
@media (hover: hover) {
	.ne .ne-share-link:hover { color: var(--ne-grey-hover); }
}

/* Who's going, Luma's block, shown only when the event's "Show who's going" is ticked (Julian,
   9 Oct 2026): the count as its heading, up to six 24 px round heads overlapping by 9.6 px, then
   the first two names and how many others. The heads are initials on soft tints, since buyers
   have no pictures. */
.ne-heads { display: flex; align-items: center; padding-bottom: 8px; }
.ne-head {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	box-shadow: 0 0 0 1.5px var(--ne-bg);
	color: var(--ne-ink);
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
}
.ne-head + .ne-head { margin-left: -9.6px; }

/* The heads and names are one button that opens the guest list, as Luma's: the names darken on
   hover. */
.ne-going-button {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.ne-going-names { display: block; color: var(--ne-ink-soft); font-size: 14px; transition: var(--ne-ease); }
@media (hover: hover) {
	.ne-going-button:hover .ne-going-names { color: var(--ne-ink); }
}
.ne-going-button:focus-visible { outline: 3px solid #c08a5b; outline-offset: 2px; border-radius: 6px; }

/* The guest list, Luma's dialog: 340 px wide, round corners, a faint ring and a soft shadow, the
   page dimmed behind. Store admins and signed-in salons who booked see every name; anyone else is
   told to book to see it, as Luma tells visitors to register. */
.ne-guests {
	width: 340px;
	max-width: calc(100vw - 32px);
	max-height: min(80vh, 640px);
	padding: 20px;
	border: 0;
	border-radius: 20px;
	background: var(--ne-card);
	color: var(--ne-ink);
	font-family: var(--ne-sans);
	box-shadow: 0 0 0 1px rgba(87, 49, 25, 0.08), 0 12px 40px rgba(0, 0, 0, 0.12);
	overflow: auto;
}
.ne-guests::backdrop { background: rgba(40, 28, 18, 0.25); }
.ne-guests-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 12px;
	border-radius: 50%;
	background: rgba(87, 49, 25, 0.06);
	color: var(--ne-ink-soft);
}
.ne-guests h2 { margin: 0 0 4px; font-size: 20px; font-weight: 600; }
.ne-guests-note { margin: 0 0 12px; color: var(--ne-ink-soft); font-size: 14px; }
.ne-guests-list { display: grid; gap: 12px; margin: 12px 0 0; padding: 0; list-style: none; }
.ne-guests-list li { display: flex; align-items: center; gap: 12px; }
.ne-guests-list .ne-head { width: 32px; height: 32px; font-size: 13px; box-shadow: none; }
.ne-guests-close { position: absolute; top: 14px; right: 14px; margin: 0; }
.ne-guests-x {
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: rgba(87, 49, 25, 0.06);
	color: var(--ne-ink-soft);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

/* The place row is one link, as on Luma: the venue turns lighter and its arrow moves when hovered. */
.ne a.ne-row-link { border-radius: 10px; }
.ne-row-head { display: flex; align-items: center; gap: 4px; }

/* The arrow after a link that opens Google Maps: Luma's icon and movement (seen on
   luma.com/v2h3zxrm, 9 Oct 2026). At rest half-faded and 0.5 px low; on hover full, in the hover
   colour, 1 px right and 0.5 px up, over 0.3 s. Hover only where there is a mouse. */
.ne-arrow {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-left: 4px;
	vertical-align: -2px;
	color: var(--ne-ink-soft);
	opacity: 0.5;
	transform: translateY(0.5px);
	transition: var(--ne-ease);
}
.ne-row-head .ne-arrow { display: block; margin-left: 0; }
.ne-arrow svg { display: block; width: 16px; height: 16px; }
@media (hover: hover) {
	.ne-row-link:hover .ne-arrow,
	.ne-link:hover .ne-arrow {
		color: var(--ne-link-active);
		opacity: 1;
		transform: translate(1px) translateY(-0.5px);
	}
}
.ne-row-link:focus-visible .ne-arrow, .ne-link:focus-visible .ne-arrow { color: var(--ne-link-active); opacity: 1; }

/* Words for screen readers only. */
.ne-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ne-message {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-radius: 12px;
	background: #fbe9e7;
	color: #7a2318;
	display: grid;
	gap: 2px;
}
.ne-message-soft { background: var(--ne-tint); color: var(--ne-ink); }

/* Square corners but the bottom right, rounded 18 px (Julian, 9 Oct 2026, set in the browser's
   inspector on the ticket card); every card in this place takes it, "You're In" included. */
.ne-card {
	background: var(--ne-card);
	border: 1px solid var(--ne-line);
	border-radius: 0 0 18px 0;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(87, 49, 25, 0.06);
}
.ne-card-head {
	padding: 10px 18px;
	background: var(--ne-tint);
	font-family: var(--ne-sans);
	font-size: 14px;
	font-weight: 600;
	color: var(--ne-ink-soft);
}
.ne-card-body { padding: 16px 18px 18px; }
.ne-card hr { border: 0; border-top: 1px solid var(--ne-line); margin: 14px 0; }
.ne-label { color: var(--ne-ink-soft); font-size: 14px; }
.ne-price { font-size: 28px; font-weight: 600; }
.ne-welcome { margin: 0 0 14px; }
.ne-state { margin: 4px 0 0; font-weight: 600; font-size: 18px; }
.ne-cal { margin: 14px 0 0; font-size: 14px; color: var(--ne-ink-soft); }

/* The thank-you page's "You're In" card, as Luma's after registering (1.1.7, Julian's screenshot of
   luma.com, 9 Oct 2026): the host's round mark and a "Starting in" pill with the time in orange,
   "You're In", then soft buttons for Add to Calendar (a menu) and Invite a Friend, and grey notes
   underneath. Not Luma's QR code, wallet pass or "Get Ready" row: the plugin has none of them. */
.ne-in { overflow: visible; padding: 16px 18px 18px; }
.ne-in-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ne-in-mark { display: block; width: 40px; height: 40px; border-radius: 50%; }
.ne-in-starts { padding: 4px 10px; border-radius: 999px; background: rgba(87, 49, 25, 0.06); color: var(--ne-ink-soft); font-size: 13px; line-height: 20px; white-space: nowrap; }
.ne-in-starts b { color: #c2531b; font-weight: 600; } /* Luma's orange, darkened to 4.5:1 on the pill */
.ne .ne-in-title { margin: 14px 0 14px; font-family: var(--ne-sans); font-size: 24px; font-weight: 600; line-height: 1.2; color: #533019; }
.ne-in-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ne-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 10px;
	border: 0;
	border-radius: 8px;
	background: rgba(87, 49, 25, 0.06);
	color: var(--ne-ink-soft);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 18px;
	cursor: pointer;
	list-style: none;
	transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ne-chip::-webkit-details-marker { display: none; }
.ne-chip-icon, .ne-chip-icon svg { display: block; width: 16px; height: 16px; flex-shrink: 0; }
@media (hover: hover) {
	.ne-chip:hover { background: rgba(87, 49, 25, 0.12); color: var(--ne-ink); }
	.ne-in-menu a:hover { background: rgba(87, 49, 25, 0.06); }
}
.ne-chip:focus-visible { outline: 2px solid var(--ne-ink-soft); outline-offset: 2px; }
.ne-in-cal { position: relative; }
.ne-in-cal[open] > .ne-chip { background: rgba(87, 49, 25, 0.12); color: var(--ne-ink); }
.ne-in-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 10;
	display: grid;
	min-width: 190px;
	padding: 6px;
	border: 1px solid var(--ne-line);
	border-radius: 10px;
	background: var(--ne-card);
	box-shadow: 0 6px 24px rgba(87, 49, 25, 0.14);
}
.ne .ne-in-menu a { padding: 8px 10px; border-radius: 6px; font-size: 14px; color: var(--ne-ink); }
.ne-in-note { margin: 14px 0 0; color: var(--ne-ink-soft); font-size: 14px; }
.ne-in-note + .ne-in-note { margin-top: 6px; }

/* Buttons, as Luma's: the main one (Buy now) lightens on hover and the soft one fills in dark with
   white words, both over 0.3 s; nothing moves when pressed. A keyboard's focus draws a 2 px ring in
   the button's own colour, 2 px out. */
.ne-button {
	display: inline-block;
	width: 100%;
	padding: 13px 18px;
	border: 0;
	border-radius: 0 0 15px 0; /* the card's shape, 15 px (Julian, 9 Oct 2026) */
	background: var(--ne-button);
	color: var(--ne-button-ink);
	font: 600 16px/1.2 var(--ne-sans);
	letter-spacing: 0.02em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: var(--ne-ease);
	outline: 2px solid transparent;
	outline-offset: 2px;
}
/* Links inherit the text colour (.ne a), so a link drawn as a button needs its colour back. */
.ne a.ne-button { color: var(--ne-button-ink); }
.ne-button-soft { background: var(--ne-tint); color: var(--ne-ink); }
.ne a.ne-button-soft { color: var(--ne-ink); }
@media (hover: hover) {
	.ne-button:not([disabled]):hover { background: var(--ne-button-hover); color: var(--ne-button-ink); }
	.ne a.ne-button:hover { background: var(--ne-button-hover); color: var(--ne-button-ink); }
	.ne a.ne-button-soft:hover { background: rgba(87, 49, 25, 0.64); color: #ffffff; }
}
.ne-button:focus-visible { outline-color: var(--ne-button); }
.ne-button-soft:focus-visible { outline-color: var(--ne-ink); }
.ne a:not(.ne-button):not(.ne-manage-button):not(.ne-nav-link):focus-visible { outline: 3px solid #c08a5b; outline-offset: 2px; }
.ne-button[disabled] { opacity: 0.7; cursor: wait; }
/* "Registration Opening Soon" (1.3.8): the button's own brown, not faded like a button that is sending
   (Julian, 12 Oct 2026: "keep the button colour brown and not faded out"), and no wait cursor. It
   still can't be pressed, and as it is disabled it never takes the hover colour. */
.ne-button.ne-button-soon[disabled] { opacity: 1; cursor: default; }

/* The honeypot: hidden from people, present for bots. */
.ne-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ne-section { margin-top: 32px; }
/* Section headings at 14 px, as Luma's (Julian, 9 Oct 2026). */
.ne-section h2, .ne-side-block h2 {
	font-family: var(--ne-sans);
	font-size: 14px;
	font-weight: 600;
	color: var(--ne-ink-soft);
	padding-bottom: 8px;
	margin-bottom: 12px;
	border-bottom: 1px solid var(--ne-line);
}
.ne-about p { margin: 0 0 14px; }
/* Bold words in the description are DAX Medium, the kit's 600, not Bold (Julian, 9 Oct 2026). */
.ne-about strong, .ne-about b { font-weight: 600; }

/* Location's venue and address: one block that copies the address when clicked, as Luma's does,
   with its copy cursor and no other change on hover. The notice is below. */
.ne-copy { cursor: copy; border-radius: 6px; }
.ne-copy:focus-visible { outline: 3px solid #c08a5b; outline-offset: 2px; }
.ne-venue { margin: 0; font-weight: 600; }
.ne-addr, .ne-note { margin: 2px 0 0; color: var(--ne-ink-soft); }
.ne-map {
	margin: 14px 0 10px;
	border-radius: var(--ne-radius);
	overflow: hidden;
	border: 1px solid var(--ne-line);
	aspect-ratio: 16 / 10;
	background: var(--ne-tint);
}
.ne-map iframe { width: 100%; height: 100%; border: 0; display: block; }

.ne-side { display: grid; gap: var(--ne-gap); align-content: start; }
.ne-side-block p { margin: 0 0 8px; }
/* Luma leaves 24 px between the side blocks and nothing more (Julian, 9 Oct 2026: "reduce the
   padding" between the host and Contact the Host), so a block's last line keeps no margin. */
.ne-side-block > :last-child { margin-bottom: 0; }
.ne-blurb { color: var(--ne-ink-soft); font-size: 15px; }
.ne-host { font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.ne-side-block .ne-host { margin: 0; } /* not the column's 8 px under each paragraph */
/* Luma's spacing (measured on luma.com, 10 Oct 2026): 24 px rows, 12 px between hosts, 8 px from
   the photo to the name. */
.ne-side-block .ne-host + .ne-host { margin-top: 12px; }
/* Each host's photo, round, before the name as on Luma; a host without one gets their initial on
   the same tints as Who's going (1.1.15). */
.ne-host-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ne-host-photo, .ne-host-initial { flex: none; width: 24px; height: 24px; border-radius: 50%; }
.ne-host-photo { object-fit: cover; background: var(--ne-tint); }
.ne-host-initial { display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--ne-ink); }
/* A host's Instagram (1.1.13): the footer's icon, grey until hovered, in a 28 px tap area, at the
   far right of the host's row as on Luma, faded to 30% of the text colour (1.1.14, Julian: "almost
   faded"); the -6 px puts the icon's edge on the rule's. */
.ne-host-ig { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; margin: -6px -6px -6px 0; border-radius: 8px; transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.ne a.ne-host-ig { color: rgba(87, 49, 25, 0.3); } /* `.ne a` would make it the text colour */
.ne a.ne-host-ig:focus-visible { color: var(--ne-grey-hover); }
@media (hover: hover) {
	.ne a.ne-host-ig:hover { color: var(--ne-grey-hover); } /* not on a phone, where a tap would leave it dark */
}
.ne-host-ig-icon, .ne-host-ig-icon svg { display: block; width: 16px; height: 16px; }

/* The thank-you and message pages. */
.ne-narrow { max-width: 560px; margin: 0 auto; padding: 8px 16px 48px; }
.ne-booked { text-align: left; }
.ne-thumb {
	width: 88px;
	height: 88px;
	object-fit: cover;
	border-radius: 12px;
	margin-bottom: 14px;
}
.ne-pill {
	display: inline-block;
	margin: 0 0 10px;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--ne-tint);
	font-size: 14px;
	font-weight: 600;
}
.ne-details { margin: 18px 0; display: grid; gap: 10px; }
.ne-details div { display: grid; grid-template-columns: 96px 1fr; gap: 8px; }
.ne-details dt { color: var(--ne-ink-soft); }
.ne-details dd { margin: 0; }
.ne-sent { color: var(--ne-ink-soft); }
.ne-actions { display: grid; gap: 10px; margin: 18px 0 8px; }
.ne-back { margin: 16px 0 0; }

/* The footer, Luma's (Julian, 9 Oct 2026): a faint line across the content; on the left the
   NATULIQUE icon (1.1.2) and the menu's links where Luma has its logo and Discover, Pricing and
   Help; on the right
   NATULIQUE Australia's Instagram and email as 16 px icons in 34 px tap areas. All grey until
   hovered, then a shade deeper over 0.3 s. No X. */
.ne-foot {
	max-width: 960px;
	margin: 0 auto;
	padding: 0 16px 40px;
	font-size: 14px;
	color: var(--ne-grey);
}
.ne-foot-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 16px;
	border-top: 1px solid rgba(87, 49, 25, 0.08);
}
.ne .ne-foot a { color: inherit; }
.ne-foot-left { display: flex; flex-wrap: wrap; align-items: center; margin-left: -8px; }
.ne-foot-mark { display: flex; padding: 8px 12px 8px 8px; }
/* NATULIQUE's icon (1.1.2): a 20 px circle, as on its Luma profile. Its brown at half opacity sits
   with the grey links, and 0.8 on hover matches their hover grey. */
.ne-foot-logo img { display: block; width: 20px; height: 20px; border-radius: 50%; opacity: 0.5; transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.ne-foot-links { display: flex; flex-wrap: wrap; align-items: center; }
/* The footer's NATULIQUE link, beside the icon on phones and tablets and never on computers: first
   for the calendar's /events (1.3.2, Julian, 11 Oct 2026), on every page since 1.3.7 (Julian, 12 Oct
   2026). Shown again at 820 px and below. */
.ne-foot-phone { display: none; }
.ne-foot-link { padding: 8px; }
.ne-foot-icons { display: flex; align-items: center; margin-right: -9px; }
/* Phones and tablets (Julian, 11 Oct 2026, 1.3.1): the icon, NATULIQUE beside it (event pages, and
   the calendar's /events as a phone-only link from 1.3.2) and the social icons share the first row, and the other links take a
   row of their own below, the first one in line with the icon. The left group dissolves (display:
   contents) so its pieces can sit on different rows. */
@media (max-width: 820px) {
	.ne-foot-inner { flex-wrap: wrap; justify-content: flex-start; }
	.ne-foot-left { display: contents; }
	.ne-foot-logo { order: 0; margin-left: -8px; }
	.ne-foot-icons { order: 1; margin-left: auto; }
	.ne-foot-links { order: 2; flex-basis: 100%; margin-left: -8px; }
	.ne-foot-phone { display: block; }
}
.ne-foot-icons a { display: flex; padding: 9px; }
.ne-foot-icon { display: block; width: 16px; height: 16px; }
.ne-foot-icon svg { display: block; width: 16px; height: 16px; }
@media (hover: hover) {
	.ne .ne-foot a:hover { color: var(--ne-grey-hover); }
	.ne-foot-logo:hover img { opacity: 0.8; }
}
/* "Partner Store" (1.1.2) is longer than "Shop": below 370 px the links close up by 4 px each so
   the row still fits a 360 px phone. At 320 px Academy wraps under the icon. */
@media (max-width: 370px) {
	.ne-foot-mark { padding-right: 8px; }
	.ne-foot-link { padding: 8px 6px; }
}

/* Luma's notice (react-hot-toast): centred 16 px above the bottom, at least 200 px and at most
   350 px wide, 8 px corners, white words on green for done and red for a failure, rising in over
   0.35 s and dropping away over 0.4 s. */
.ne-toaster {
	position: fixed;
	z-index: 9999;
	left: 16px;
	right: 16px;
	bottom: 16px;
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: 8px;
	pointer-events: none;
}
.ne-toast {
	display: flex;
	align-items: center;
	min-width: 200px;
	max-width: 350px;
	padding: 8px 10px;
	border-radius: 8px;
	color: #ffffff;
	line-height: 1.3;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05);
	pointer-events: auto;
	animation: ne-toast-in 0.35s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
}
.ne-toast-ok { background: #3cbd2c; }
.ne-toast-error { background: #ed2b32; }
.ne-toast-icon { display: block; flex-shrink: 0; width: 20px; height: 20px; }
.ne-toast-icon svg { display: block; }
.ne-toast-text { flex: 1 1 auto; margin: 4px 10px; }
.ne-toast-out { animation: ne-toast-out 0.4s cubic-bezier(0.06, 0.71, 0.55, 1) forwards; }
@keyframes ne-toast-in {
	from { transform: translate3d(0, 200%, 0) scale(0.6); opacity: 0.5; }
	to { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
}
@keyframes ne-toast-out {
	from { transform: translate3d(0, 0, -1px) scale(1); opacity: 1; }
	to { transform: translate3d(0, 150%, -1px) scale(0.6); opacity: 0; }
}