/* The visitor home page (17 Oct 2026). Loaded only on that page.
 *
 * TUNING — change these numbers to move things without touching anything else:
 *   --tme-wel-bg-max   widest the hall picture is drawn (wider screens show black either side, with soft edges)
 *   --tme-wel-logo-w   the "Welcome to Spice Me Up, Lucy" logo
 *   --tme-wel-hosts-w  Lucy and Gage
 *   --tme-wel-hello-w  "Well hello there, you gorgeous misfits"
 *   --tme-wel-overlap  how far "Well hello there" slides up over Lucy and Gage, as a share of their picture's
 *                      width (0.85 = 85%), so it lands in the same place on a phone and a computer
 *   --tme-wel-spicy-w  "Stay spicy"
 */
.tme-wel {
	--tme-wel-bg-max: 1400px;
	--tme-wel-logo-w: 440px;
	--tme-wel-hosts-w: 380px;
	--tme-wel-hello-w: 470px;
	--tme-wel-overlap: 0.85;
	--tme-wel-spicy-w: 360px;
}

body.tme-welcome-body {
	background: #000 !important;
	margin: 0;
}
body.tme-welcome-body .wp-site-blocks {
	background: #000;
	padding: 0 !important;
}

/* The hall: drawn at the top, full width up to --tme-wel-bg-max; its own bottom fades to transparent,
 * so it melts into the black below however long the page grows. */
.tme-wel {
	position: relative;
	isolation: isolate;
	background: #000;
	min-height: 100vh;
	color: #fff;
	overflow-x: clip;
}
.tme-wel::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(100%, var(--tme-wel-bg-max));
	height: 100%;
	background-image: var(--tme-wel-bg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
	z-index: -1;
	pointer-events: none;
	/* If the page is shorter than the picture (a wide screen, little content yet), fade it out above the footer
	 * instead of cutting it off in a hard line. On a longer page this only touches black, so it changes nothing. */
	-webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 260px), transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 260px), transparent 100%);
}
@media (min-width: 1401px) {
	/* wider than the picture: also soften its left and right edges into the black */
	.tme-wel::before {
		-webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 260px), transparent 100%), linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
		-webkit-mask-composite: source-in;
		mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 260px), transparent 100%), linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
		mask-composite: intersect;
	}
}

/* --- the top bar is the shared visitor bar (assets/tme-public.css, 2.72) --- */
.tme-welcome-body a.tme-wel-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 20px;
	border-radius: 999px;
	box-sizing: border-box;
	font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .3px;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s ease, box-shadow .2s ease;
}
.tme-welcome-body a.tme-wel-pill-join {
	background: #7c3aed;
	border: 2px solid #a855f7;
	color: #fff;
	box-shadow: 0 0 14px rgba(168, 85, 247, .75);
}
.tme-welcome-body a.tme-wel-pill-join:hover {
	background: #8b5cf6;
	color: #fff;
	box-shadow: 0 0 22px rgba(168, 85, 247, .95);
}
.tme-welcome-body a.tme-wel-pill-login {
	background: rgba(0, 0, 0, .5);
	border: 2px solid #e0b25c;
	color: #f3d98b;
	box-shadow: 0 0 10px rgba(224, 178, 92, .35);
}
.tme-welcome-body a.tme-wel-pill-login:hover {
	background: rgba(224, 178, 92, .16);
	color: #fff;
}
.tme-welcome-body a.tme-wel-pill:focus-visible {
	outline: 3px solid #f3d98b;
	outline-offset: 3px;
}

/* --- the welcome --- */
.tme-wel-main {
	position: relative;
	z-index: 1;
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 18px 72px;
	box-sizing: border-box;
}
.tme-wel-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.tme-wel-hero img {
	display: block;
	height: auto;
	max-width: 100%;
}
.tme-wel-logo {
	margin: 4px 0 0;
	padding: 0;
	line-height: 0;
	width: min(100%, var(--tme-wel-logo-w));
}
.tme-wel-logo img {
	width: 100%;
}
.tme-wel-hero .tme-wel-hosts {
	width: min(86%, var(--tme-wel-hosts-w));
	margin-top: 6px;
}
.tme-wel-hero .tme-wel-hello {
	position: relative;
	z-index: 1;
	width: min(100%, var(--tme-wel-hello-w));
	/* the same width sum as .tme-wel-hosts (percentages here are of the column's width, like its width) */
	margin-top: calc(-1 * var(--tme-wel-overlap) * min(86%, var(--tme-wel-hosts-w)));
}

/* Lucy and Gage's letter — the card: 3px purple border with the site's shared neon PULSE (class "tme-neon",
 * assets/tme-neon.css — the same speed and size as the member tiles; steady for people who ask for less motion) */
.tme-wel-card {
	--tme-neon-rgb: 168, 85, 247;
	--tme-neon-border: 3px;
	position: relative;
	width: 100%;
	max-width: 720px;
	margin-top: 18px;
	padding: 26px 24px 24px;
	box-sizing: border-box;
	border: 3px solid #a855f7;
	border-radius: 22px;
	background: rgba(16, 6, 28, .84);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	text-align: left;
}
.tme-wel-card p {
	margin: 0 0 16px;
	font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	font-weight: 500;
	font-size: 20px;
	line-height: 1.55;
	color: #fff;
}
.tme-wel-card p.tme-wel-lead {
	font-weight: 600;
	font-size: clamp(25px, 6.4vw, 30px);
	line-height: 1.25;
	margin-bottom: 18px;
}
.tme-wel-card p.tme-wel-come {
	font-style: italic;
	font-weight: 600;
	color: #f3d98b;
	font-size: 22px;
}
.tme-wel-card p:last-child {
	margin-bottom: 0;
}

.tme-wel-hero .tme-wel-spicy {
	width: min(86%, var(--tme-wel-spicy-w));
	margin-top: 34px;
}
/* the second Join free, under Stay Spicy — a bigger version of the top bar's purple pill */
.tme-welcome-body a.tme-wel-pill-big {
	margin-top: 26px;
	min-height: 54px;
	padding: 0 44px;
	font-size: 18px;
}
.tme-wel-inside {
	margin: 34px 0 0;
	font-family: 'Cinzel', Georgia, serif;
	font-weight: 600;
	font-size: clamp(24px, 6vw, 34px);
	line-height: 1.25;
	color: #f3d98b;
	text-shadow: 0 0 12px rgba(224, 178, 92, .45);
}

/* 2.60 (P2): the six feature tiles under "What you'll find waiting for you inside" (they replaced Lucy in her hard hat).
 * One column on phones, two from 560px. Plum, a thin purple edge, gold icon and title, white text (no fine grey print). */
.tme-wel-tiles {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	text-align: left;
}
@media (min-width: 560px) {
	.tme-wel-tiles { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
	.tme-wel-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.tme-wel-tile {
	margin: 0;
	padding: 18px 18px 18px;
	box-sizing: border-box;
	min-width: 0;
	background: rgba(16, 6, 28, .84);
	border: 1.5px solid rgba(168, 85, 247, .75);
	border-radius: 16px;
	box-shadow: 0 0 12px rgba(168, 85, 247, .28);
}
.tme-wel-tile .tme-wel-tile-icon {
	display: block;
	color: #e0b25c;
	margin: 0 0 8px;
}
.tme-wel-tile h3 {
	margin: 0 0 6px;
	font-family: 'Cinzel', Georgia, serif;
	font-weight: 600;
	font-size: 18px;
	line-height: 1.3;
	color: #f3d98b;
}
.tme-wel-tile p {
	margin: 0;
	font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
	font-weight: 500;
	font-size: 15px;
	line-height: 1.55;
	color: #fff;
}
.tme-wel-privacy {
	margin: 18px 0 0;
	font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
	font-size: 15px;
}
.tme-welcome-body .tme-wel-privacy a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: #f3d98b;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.tme-welcome-body .tme-wel-privacy a:hover { color: #fff; }

/* whatever is added to the page below the welcome */
.tme-wel-main > :not(.tme-wel-hero) {
	color: #fff;
}

/* 2.67: the pictures now carry width/height (so the page saves their space and stops jumping); height:auto keeps
   their shape when the CSS above narrows them. */
.tme-wel-logo img, .tme-wel-hosts, .tme-wel-hello, .tme-wel-spicy { height: auto; }


/* ============ 2.72 (31 Oct): the reworked home page — layout from the "public site plan" canvas ============ */
/* the heading sits over the lower part of Lucy and Gage's picture, so it gets the card's dark glass behind it */
.tme-wel-hero h1.tme-wel-h1 {
	position: relative;
	z-index: 1;
	margin: 18px 0 0;
	max-width: 820px;
	padding: 14px 18px;
	box-sizing: border-box;
	border-radius: 16px;
	background: rgba(16, 6, 28, .84);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	font-family: 'Cinzel', Georgia, serif;
	font-weight: 700;
	font-size: clamp(21px, 5.2vw, 31px);
	line-height: 1.35;
	color: #e0b25c;
	text-shadow: 0 0 12px rgba(224, 178, 92, .4);
}
.tme-wel-card p.tme-wel-kia {
	margin: 0 0 6px;
	font-family: 'Great Vibes', cursive;
	font-weight: 400;
	font-size: clamp(34px, 9vw, 44px);
	line-height: 1.1;
	color: #f3d98b;
}
.tme-wel-card p.tme-wel-lead { font-size: clamp(22px, 5.6vw, 26px); }

.tme-wel-pillars {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin: 34px auto 0;
	max-width: 720px;
}
@media (min-width: 900px) {
	.tme-wel-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
}
.tme-wel-pillar {
	padding: 20px 20px 22px;
	box-sizing: border-box;
	border: 1px solid rgba(168, 85, 247, .45);
	border-radius: 16px;
	background: rgba(16, 6, 28, .84);
}
.tme-wel-pillar h2 {
	margin: 0 0 8px;
	font-family: 'Cinzel', Georgia, serif;
	font-weight: 600;
	font-size: 20px;
	line-height: 1.3;
	color: #e0b25c;
}
.tme-wel-pillar p {
	margin: 0;
	font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
	font-size: 16px;
	line-height: 1.65;
	color: #fff;
}
.tme-wel-pillar-gold { border: 2px solid #e0b25c; background: rgba(28, 20, 8, .9); box-shadow: 0 0 16px rgba(224, 178, 92, .3); }
.tme-wel-pillar-gold h2 { color: #f3d98b; }

.tme-wel-joinrow, .tme-wel-last {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.tme-wel-joinrow .tme-wel-spicy {
	display: block;
	height: auto;
	width: min(86%, var(--tme-wel-spicy-w));
	margin-top: 34px;
}
.tme-wel-nofee, .tme-wel-member {
	margin: 12px 0 0;
	font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
	font-size: 15px;
	color: #fff;
}
.tme-welcome-body .tme-wel-member a { color: #f3d98b; text-decoration: underline; text-underline-offset: 3px; }

.tme-wel-section { margin-top: 56px; text-align: center; }
.tme-wel-section .tme-wel-inside { margin: 0; }
.tme-wel-sub {
	margin: 8px 0 0;
	font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
	font-size: 16px;
	color: #fff;
}
.tme-wel-section .tme-pub-cards, .tme-wel-section .tme-wel-tiles { text-align: left; }
@media (min-width: 900px) {
	.tme-wel-guides ul.tme-pub-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* tiles that open Lucy's feature pages */
.tme-wel-tile:has(a.tme-wel-tile-link) { padding: 0; }
.tme-welcome-body a.tme-wel-tile-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	padding: 18px;
	border-radius: 15px;
	color: #fff;
	text-decoration: none;
}
.tme-welcome-body a.tme-wel-tile-link:hover { background: rgba(124, 58, 237, .14); }
.tme-welcome-body a.tme-wel-tile-link:focus-visible { outline: 3px solid #f3d98b; outline-offset: 2px; }
.tme-wel-tile-more {
	margin-top: auto;
	padding-top: 10px;
	font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #e0b25c;
}

/* Quick questions */
.tme-wel-faq { max-width: 760px; margin-left: auto; margin-right: auto; }
.tme-wel-faq .tme-wel-inside { margin-bottom: 16px; }
details.tme-wel-q {
	margin: 0 0 10px;
	text-align: left;
	border: 1px solid #3a2a4a;
	border-radius: 12px;
	background: rgba(20, 12, 28, .9);
	font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
}
details.tme-wel-q summary {
	list-style: none;
	min-height: 54px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 18px;
	box-sizing: border-box;
	font-size: 16px;
	font-weight: 500;
	color: #fff;
	cursor: pointer;
}
details.tme-wel-q summary::-webkit-details-marker { display: none; }
details.tme-wel-q summary span { color: #e0b25c; font-size: 24px; line-height: 1; transition: transform .2s ease; }
details.tme-wel-q[open] summary span { transform: rotate(45deg); }
details.tme-wel-q summary:focus-visible { outline: 3px solid #f3d98b; outline-offset: 2px; border-radius: 12px; }
details.tme-wel-q p { margin: 0; padding: 0 18px 16px; font-size: 15px; line-height: 1.6; color: #fff; }

.tme-wel-last { margin-top: 56px; }
.tme-wel-last p.tme-wel-come {
	margin: 0;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-style: italic;
	font-weight: 600;
	font-size: clamp(24px, 6vw, 30px);
	color: #f3d98b;
}

/* 2.74 (Mike): the six "Take a peek inside" tiles get the site's neon PULSE and a bold 3px frame, like the
 * Kia ora card — on the black page they'd otherwise get lost. Same pulse recipe (assets/tme-neon.css). */
.tme-wel-tiles { gap: 22px; }
li.tme-wel-tile.tme-neon {
	--tme-neon-rgb: 168, 85, 247;
	--tme-neon-border: 3px;
	border: 3px solid #a855f7;
	border-radius: 18px;
	box-shadow: none;
}
.tme-welcome-body li.tme-wel-tile a.tme-wel-tile-link { border-radius: 15px; }

/* 2.75: sections with two paragraphs */
.tme-wel-pillar p + p { margin-top: 12px; }