/* =========================================================
   Million Little Pieces — presentational styles
   Colors sampled directly from the Figma design assets:
   ---------------------------------------------------------
   Cream paper background : #F4ECE1
   Ink / heading text      : #1E1B16
   Body text (muted ink)   : #4A443C
   Mustard yellow          : #E9BD02
   Chair / accent yellow   : #F3CC33
   Sky blue                : #32BBEE
   Tan / sand               : #E4C2A7
   Powder blue              : #BACAE6
   Gold / orange accent     : #FEC157
   Navy (button / links)    : #1B2A6B
   ========================================================= */

@font-face {
	font-family: 'Austin Cyr';
	src: url('../fonts/AustinCyr-Roman.woff') format('woff'),
		url('../fonts/AustinCyr-Roman.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Austin Cyr';
	src: url('../fonts/AustinCyr-Italic.woff') format('woff'),
		url('../fonts/AustinCyr-Italic.ttf') format('truetype');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Austin Cyr';
	src: url('../fonts/AustinCyr-Medium.woff') format('woff'),
		url('../fonts/AustinCyr-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Austin Cyr';
	src: url('../fonts/AustinCyr-MediumItalic.woff') format('woff'),
		url('../fonts/AustinCyr-MediumItalic.ttf') format('truetype');
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}

:root {
	--mlp-cream: #F4ECE1;
	--mlp-cream-deep: #EFE4D4;
	--mlp-ink: #1E1B16;
	--mlp-body: #4A443C;
	--mlp-mustard: #E9BD02;
	--mlp-yellow: #F3CC33;
	--mlp-sky: #32BBEE;
	--mlp-tan: #E4C2A7;
	--mlp-powder: #BACAE6;
	--mlp-gold: #FEC157;
	--mlp-navy: #1B2A6B;
	--mlp-navy-dark: #142055;
	--mlp-white: #FFFFFF;

	--mlp-font-display: 'Austin Cyr', Georgia, 'Times New Roman', serif;
	--mlp-font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--mlp-max-width: 1280px;
	--mlp-gutter: 64px;
}

/* -------------------- Reset / base -------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

html.mlp-no-scroll,
html.mlp-no-scroll body {
	height: 100%;
	overflow: hidden;
}

body.mlp-hero-page,
body {
	margin: 0;
	padding: 0;
	background-color: var(--mlp-cream);
	color: var(--mlp-body);
	font-family: var(--mlp-font-body);
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* -------------------- Hero section -------------------- */
.mlp-hero {
	position: relative;
	height: 100vh;
	background-color: var(--mlp-cream);
	/* Two layers, in order: the torn corner on top, plain paper grain
	   beneath. Keeping them separate means the tear's size is set
	   explicitly in px/vw and never depends on the screen's aspect
	   ratio, so it can neither be cropped away nor blown up. */
	background-image:
		url('../images/paper-corner.webp'),
		url('../images/paper-texture.jpg');
	/* 63vw renders the 900px-wide corner asset at its native size on a
	   1440px viewport — i.e. pixel-for-pixel the Figma desktop frame —
	   and holds the tear at the same ~35% of screen width at every
	   other width, phones included. */
	background-size:
		clamp(200px, 63vw, 1200px) auto,
		cover;
	background-position:
		left top,
		center;
	background-repeat: no-repeat, no-repeat;
	overflow: hidden;
}

/* Torn-paper corner — matched to the Figma source file.
   paper-corner.webp (900x420) is the single source of the tear: the
   top-left corner of the original sheet, feathered to transparent on
   its right and bottom edges so it dissolves into the paper beneath
   with no rectangular seam. In the Figma sheet the tear spans x 39-579
   of 1440 and y 0-153 of 1024, so the feather (starting at x 640 /
   y 200) never touches it.
   paper-texture.jpg is a tear-free patch of the same sheet, grain only.
   Deprecated, no longer referenced: paper-accent.webp (opaque
   rectangle with no alpha — always drew a visible box edge plus a
   second tear), paper-bg.jpg and paper-bg-mobile.jpg (tear baked in,
   so its size was hostage to `cover` and the screen's aspect ratio —
   cropped away on wide desktops, magnified on tall phones). */

.mlp-hero-inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: clamp(12px, 3vh, 32px) 48px clamp(10px, 2.4vh, 24px);
	display: grid;
	grid-template-columns: minmax(320px, 460px) 1fr;
	grid-template-areas:
		"logo   media"
		"content media";
	align-content: center;
	align-items: start;
	gap: 8px;
	height: 100vh;
	position: relative;
	z-index: 1;
}

.mlp-logo {
	grid-area: logo;
	display: inline-block;
	margin-bottom: clamp(10px, 2.8vh, 28px);
	align-self: end;
}
.mlp-logo img {
	width: 150px;
	height: auto;
}

/* -------------------- Left column: content -------------------- */
.mlp-hero-content {
	grid-area: content;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.mlp-headline {
	font-family: var(--mlp-font-display);
	font-weight: 400;
	font-style: normal;
	font-size: clamp(40px, 8vh, 68px);
	line-height: 1.0;
	color: var(--mlp-ink);
	margin: 0 0 clamp(8px, 2.5vh, 20px);
	max-width: 480px;
	text-wrap: balance;
}

.mlp-underline {
	display: block;
	width: 96px;
	height: 4px;
	background: var(--mlp-mustard);
	border-radius: 2px;
	margin-bottom: clamp(10px, 2.8vh, 22px);
}

.mlp-body-copy {
	font-family: var(--mlp-font-body);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.7;
	color: var(--mlp-body);
	max-width: 400px;
	margin: 0 0 clamp(6px, 1.7vh, 14px);
}

.mlp-body-strong {
	font-family: var(--mlp-font-body);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.7;
	color: var(--mlp-body);
	margin: 0 0 clamp(6px, 1.7vh, 14px);
}

.mlp-opening-line {
	font-family: var(--mlp-font-body);
	font-weight: 600;
	font-size: 14px;
	color: var(--mlp-navy);
	margin: 0 0 clamp(10px, 3.4vh, 28px);
}
.mlp-opening-line strong { font-weight: 600; }

/* -------------------- Newsletter form -------------------- */
.mlp-newsletter-form {
	width: 100%;
	max-width: 420px;
	margin-bottom: clamp(10px, 3.4vh, 28px);
}

.mlp-newsletter-field {
	display: flex;
	align-items: stretch;
	background: var(--mlp-white);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(30,27,22,0.08);
}

.mlp-newsletter-input {
	flex: 1 1 auto;
	min-width: 0;
	border: none;
	outline: none;
	background: transparent;
	font-family: var(--mlp-font-body);
	font-size: 14px;
	color: var(--mlp-ink);
	padding: 15px 18px;
}
.mlp-newsletter-input::placeholder { color: #8A8478; }

.mlp-hp-field {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	opacity: 0;
}

.mlp-newsletter-submit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--mlp-navy);
	color: var(--mlp-white);
	border: none;
	font-size: 14px;
	font-weight: 500;
	padding: 15px 22px;
	transition: background-color 0.2s ease;
	white-space: nowrap;
}
.mlp-newsletter-submit:hover,
.mlp-newsletter-submit:focus-visible {
	background: var(--mlp-navy-dark);
}
.mlp-newsletter-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}
.mlp-btn-arrow { transition: transform 0.2s ease; }
.mlp-newsletter-submit:hover .mlp-btn-arrow { transform: translateX(3px); }

.mlp-newsletter-message {
	margin: 10px 2px 0;
	font-size: 13px;
	min-height: 18px;
}
.mlp-newsletter-message.is-success { color: #1D7A46; }
.mlp-newsletter-message.is-error { color: #C23A2E; }

/* -------------------- Social icons -------------------- */
.mlp-social-icons {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--mlp-ink);
}
.mlp-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1.5px solid var(--mlp-ink);
	color: var(--mlp-ink);
	transition: background-color 0.2s ease, color 0.2s ease;
}
.mlp-social-icon:hover,
.mlp-social-icon:focus-visible {
	background: var(--mlp-ink);
	color: var(--mlp-cream);
}
.mlp-social-handle {
	font-family: var(--mlp-font-body);
	font-size: 13px;
	font-weight: 500;
	color: var(--mlp-navy);
	margin-left: 2px;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.mlp-social-handle:hover { color: var(--mlp-navy-dark); }

/* -------------------- Right column: hero image -------------------- */
.mlp-hero-media {
	grid-area: media;
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 100%;
}
.mlp-hero-image {
	width: 100%;
	max-width: 960px;
	height: auto;
	object-fit: contain;
}

.mlp-about-link {
	position: absolute;
	left: 36%;
	bottom: 30%;
	transform: none;
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	font-family: 'Caveat', 'Segoe Script', cursive;
	font-size: 22px;
	font-weight: 600;
	color: var(--mlp-navy);
	line-height: 1;
	z-index: 3;
}
.mlp-about-arrow {
	display: block;
	margin-top: -2px;
	color: var(--mlp-navy);
}
.mlp-about-link:hover { color: var(--mlp-navy-dark); }

/* -------------------- WhatsApp floating button -------------------- */
/* Icon button with a small greeting-bubble popup: the bubble fades
   in a few seconds after load, sits beside the icon, and can be
   dismissed; the button itself no longer pulses/ripples. */
.mlp-whatsapp-wrap {
	position: fixed;
	right: 24px;
	bottom: 24px;
	display: flex;
	align-items: flex-end;
	gap: 10px;
	z-index: 50;
}
.mlp-whatsapp-float {
	position: relative;
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #25D366;
	color: #ffffff;
	border-radius: 50%;
	box-shadow: 0 4px 14px rgba(0,0,0,0.25);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	order: 2;
}
.mlp-whatsapp-float:hover,
.mlp-whatsapp-float:focus-visible {
	transform: scale(1.06);
	box-shadow: 0 6px 18px rgba(0,0,0,0.3);
	color: #ffffff;
}
.mlp-whatsapp-float svg { width: 28px; height: 28px; display: block; }

.mlp-whatsapp-bubble {
	order: 1;
	position: relative;
	max-width: 208px;
	background: #ffffff;
	color: var(--mlp-ink);
	font-family: var(--mlp-font-body);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.4;
	padding: 12px 30px 12px 16px;
	border-radius: 14px;
	box-shadow: 0 6px 20px rgba(30,27,22,0.16);
	opacity: 0;
	transform: translateY(6px) scale(0.96);
	pointer-events: none;
	animation: mlp-whatsapp-bubble-in 0.4s ease forwards;
	animation-delay: 2.6s;
	margin-bottom: 6px;
}
.mlp-whatsapp-bubble.is-dismissed { display: none; }
.mlp-whatsapp-bubble::after {
	content: "";
	position: absolute;
	right: -6px;
	bottom: 18px;
	width: 12px;
	height: 12px;
	background: #ffffff;
	transform: rotate(45deg);
	box-shadow: 2px -2px 4px rgba(30,27,22,0.04);
}
@keyframes mlp-whatsapp-bubble-in {
	from { opacity: 0; transform: translateY(6px) scale(0.96); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}
.mlp-whatsapp-bubble-close {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	color: #9A9184;
	font-size: 14px;
	line-height: 1;
	pointer-events: auto;
	border-radius: 50%;
}
.mlp-whatsapp-bubble-close:hover { color: var(--mlp-ink); background: #F1ECE3; }
@media (prefers-reduced-motion: reduce) {
	.mlp-whatsapp-bubble { animation: none; opacity: 1; transform: none; }
}

/* -------------------- Fallback page (index.php) -------------------- */
.mlp-fallback-page {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--mlp-cream);
}
.mlp-fallback-inner {
	max-width: 640px;
	padding: 48px 24px;
	text-align: center;
	font-family: var(--mlp-font-body);
}
.mlp-fallback-inner h1 {
	font-family: var(--mlp-font-display);
	color: var(--mlp-ink);
}
.mlp-fallback-inner a { color: var(--mlp-navy); text-decoration: underline; }

/* =========================================================
   Responsive: Tablet
   ========================================================= */
@media (max-width: 1024px) {
	:root { --mlp-gutter: 40px; }

	html.mlp-no-scroll,
	html.mlp-no-scroll body {
		height: auto;
		overflow: auto;
	}
	.mlp-hero {
		height: auto;
		min-height: 100vh;
		overflow: visible;
	}
	.mlp-hero-inner {
		grid-template-columns: 1fr;
		grid-template-areas:
			"logo"
			"media"
			"content";
		padding-top: 48px;
		height: auto;
		min-height: 0;
	}
	.mlp-logo { justify-self: center; align-self: auto; }
	.mlp-hero-media { margin-bottom: 8px; }
	.mlp-hero-image { max-width: 680px; margin: 0 auto; }
	.mlp-hero-content { align-items: center; text-align: center; }
	.mlp-logo img { width: 130px; }
	.mlp-headline { max-width: 560px; }
	.mlp-body-copy { max-width: 480px; }
	.mlp-underline { margin-left: auto; margin-right: auto; }
	.mlp-newsletter-form { margin-left: auto; margin-right: auto; }
	.mlp-social-icons { justify-content: center; }
	.mlp-about-link { left: 2%; bottom: 12%; transform: none; align-items: flex-start; }
}

/* =========================================================
   Responsive: Mobile
   Matches the Figma mobile frame: logo, then photo, then the
   centered headline/copy/form/icons beneath. Background stays a
   flat solid color — no torn-paper accent at this size.
   ========================================================= */
@media (max-width: 640px) {
	:root { --mlp-gutter: 24px; }

	/* Backgrounds are inherited from the base .mlp-hero rule on purpose:
	   the 63vw corner sizing already scales with the viewport, so the
	   tear holds the same proportion here as on desktop. Only layout
	   changes at this width. */
	.mlp-hero {
		height: auto;
		min-height: 100vh;
		overflow: visible;
	}
	.mlp-hero-inner {
		height: auto;
		padding: 28px var(--mlp-gutter) 40px;
		gap: 6px;
	}

	.mlp-logo {
		margin-top: -10px;
		margin-bottom: 16px;
		flex-shrink: 0;
	}
	.mlp-logo img {
		width: 112px;
		height: auto;
		max-width: 100%;
	}

	.mlp-hero-media {
		position: static;
		flex-direction: column;
		align-items: center;
		margin-left: calc(-1 * var(--mlp-gutter));
		margin-right: calc(-1 * var(--mlp-gutter));
		width: calc(100% + (2 * var(--mlp-gutter)));
	}
	.mlp-hero-image { max-width: 560px; width: 100%; }
	.mlp-about-link {
		position: static;
		left: auto;
		bottom: auto;
		transform: none;
		align-items: center;
		margin: 10px 0 0;
	}

	.mlp-headline {
		font-family: var(--mlp-font-display);
		font-size: 27px;
		line-height: 1.22;
		margin-bottom: 14px;
	}
	.mlp-underline { margin-top: 2px; margin-bottom: 18px; }

	.mlp-body-copy {
		font-family: var(--mlp-font-body);
		font-size: 13.5px;
		margin-bottom: 12px;
	}
	.mlp-body-strong {
		font-family: var(--mlp-font-body);
		font-size: 12.5px;
		margin-bottom: 12px;
	}
	.mlp-opening-line {
		font-family: var(--mlp-font-body);
		font-size: 13px;
		margin-bottom: 22px;
	}

	.mlp-newsletter-field { flex-direction: row; }
	.mlp-newsletter-input { padding: 13px 14px; font-size: 13px; }
	.mlp-newsletter-submit { padding: 13px 16px; font-size: 13px; }
	.mlp-btn-text { display: none; }
	.mlp-newsletter-submit .mlp-btn-arrow { font-size: 16px; }

	.mlp-social-icons { flex-wrap: wrap; justify-content: center; gap: 10px; }
	.mlp-social-icon { width: 28px; height: 28px; }
	.mlp-social-handle { width: 100%; text-align: center; margin-top: 4px; }

	.mlp-whatsapp-wrap { right: 16px; bottom: 16px; }
	.mlp-whatsapp-float { width: 48px; height: 48px; }
	.mlp-whatsapp-float svg { width: 24px; height: 24px; }
	.mlp-whatsapp-bubble { max-width: 168px; font-size: 12.5px; padding: 10px 26px 10px 14px; }
}

@media (max-width: 360px) {
	.mlp-hero-image { max-width: 400px; }
	.mlp-headline { font-size: 24px; }
}


/* ---------------------------------------------------------------
   Hero links: About Zainab keeps its place, Experiences sits under
   it. Stacked rather than side by side so the pair can never push
   past the collage on a narrow desktop window.
   --------------------------------------------------------------- */

.mlp-hero-links {
	position: absolute;
	left: 36%;
	bottom: 30%;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.mlp-hero-links .mlp-about-link {
	position: static;
	left: auto;
	bottom: auto;
	transform: none;
}

.mlp-hero-links .mlp-hero-link-alt {
	flex-direction: row;
	align-items: center;
	gap: 9px;
}

.mlp-arrow-side { margin-top: 1px; }

@media (max-width: 1100px) {
	.mlp-hero-links { left: 2%; bottom: 12%; }
}

@media (max-width: 780px) {
	.mlp-hero-links {
		position: static;
		left: auto;
		bottom: auto;
		align-items: center;
		gap: 8px;
		margin: 10px 0 0;
	}

	.mlp-hero-links .mlp-about-link { margin: 0; align-items: center; }
}