/*
 * martamalengo.com — homepage
 * Ported from the Claude Design export (project/Homepage.html, src/MartaMalengo.jsx,
 * src/shared.jsx). Loaded only on the front page in place of Clearer's own
 * stylesheet — see mm_homepage_assets() in functions.php.
 *
 * The design prototype shipped a "tweaks" panel for iterating on a few
 * options; these are baked in here as the values the design landed on:
 *   - hero shapes: "Con etichette"  (labelled, linking to the category pages)
 *   - italic accent color: #D988C8 (pink)
 *   - about-panel quote watermark: on
 */

.mm-page {
	--mm-g: #6ECFA0;
	--mm-p: #D988C8;
	--mm-b: #89C8E8;
	--mm-gt: #1a5c3a;
	--mm-pt: #6b2060;
	--mm-bt: #1a4f6a;
	--mm-dark: #1a1a1a;
	--mm-mid: #666666;
	--mm-light: #f7f5f2;
	--mm-white: #ffffff;
	--mm-corsivo: #D988C8;
	--mm-serif: 'Playfair Display', Georgia, serif;
	--mm-sans: 'DM Sans', system-ui, sans-serif;

	font-family: var(--mm-sans);
	background: var(--mm-light);
	color: var(--mm-dark);
	min-height: 100vh;
}

.mm-page,
.mm-page *,
.mm-page *::before,
.mm-page *::after {
	box-sizing: border-box;
}

.mm-page a {
	text-decoration: none;
	color: inherit;
}

.mm-container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 28px 80px;
}

.mm-corsivo {
	font-style: italic;
	color: var(--mm-corsivo);
}

/* ── Nav ─────────────────────────────────────────────────────────────── */

.mm-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 28px 0 32px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	margin-bottom: 64px;
	flex-wrap: wrap;
	gap: 16px;
}

.mm-nav__brand {
	display: flex;
	align-items: center;
	gap: 12px;
}

.mm-nav__wordmark {
	font-family: var(--mm-serif);
	font-size: 18px;
	font-weight: 700;
	color: var(--mm-dark);
	letter-spacing: 0.02em;
}

.mm-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.mm-nav__link {
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mm-mid);
	border-bottom: 2px solid transparent;
	padding-bottom: 4px;
	display: inline-block;
}

.mm-nav__link.is-active {
	color: var(--mm-dark);
	border-bottom-color: var(--mm-p);
}

/* ── Logo mark (nav brand + footer signature) ───────────────────────────
 * --mm-logo-size is set inline per instance (26px in nav, 22px in footer);
 * every dimension below is that same ratio the prototype used at size 26. */

.mm-logo {
	display: inline-flex;
	align-items: flex-end;
	height: var(--mm-logo-size);
	gap: calc(var(--mm-logo-size) * 0.13462);
}

.mm-logo__arc {
	width: calc(var(--mm-logo-size) * 0.42308);
	height: calc(var(--mm-logo-size) * 0.92308);
	border-radius: calc(var(--mm-logo-size) * 0.21154) calc(var(--mm-logo-size) * 0.21154) 0 0;
	background: var(--mm-g);
}

.mm-logo__circle {
	width: calc(var(--mm-logo-size) * 0.5);
	height: calc(var(--mm-logo-size) * 0.5);
	border-radius: 50%;
	background: var(--mm-p);
}

.mm-logo__semicircle {
	width: calc(var(--mm-logo-size) * 0.53846);
	height: calc(var(--mm-logo-size) * 0.34615);
	border-radius: 0 0 calc(var(--mm-logo-size) * 0.26923) calc(var(--mm-logo-size) * 0.26923);
	background: var(--mm-b);
	align-self: flex-end;
	margin-bottom: calc(var(--mm-logo-size) * 0.03846);
}

.mm-logo__dot {
	width: calc(var(--mm-logo-size) * 0.19231);
	height: calc(var(--mm-logo-size) * 0.19231);
	border-radius: 50%;
	background: var(--mm-dark);
}

/* ── Hero ────────────────────────────────────────────────────────────── */

.mm-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
	margin-bottom: 100px;
}

.mm-hero__eyebrow {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mm-mid);
	margin-bottom: 20px;
}

.mm-hero__title {
	font-family: var(--mm-serif);
	font-size: 58px;
	line-height: 1.08;
	font-weight: 700;
	margin-bottom: 24px;
	color: var(--mm-dark);
}

.mm-hero__desc {
	font-size: 16px;
	line-height: 1.7;
	color: var(--mm-mid);
	max-width: 420px;
	margin-bottom: 36px;
}

.mm-hero__figure {
	display: flex;
	justify-content: center;
}

.mm-btn {
	display: inline-block;
	padding: 14px 32px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 40px;
}

.mm-btn--dark {
	background: var(--mm-dark);
	color: var(--mm-white);
}

/* ── Hero composition (arc / circle / semicircle / dot) ─────────────────
 * Fixed 440x440 box, positioned exactly as in the prototype. */

.mm-bigm {
	position: relative;
	width: 440px;
	height: 440px;
	max-width: 100%;
}

.mm-bigm__arc {
	position: absolute;
	left: 40px;
	top: 0;
	width: 230px;
	height: 320px;
	background: var(--mm-g);
	border-radius: 115px 115px 0 0;
	overflow: hidden;
}

.mm-bigm__quote {
	position: absolute;
	left: 50%;
	top: 74px;
	transform: translateX(-50%);
	font-family: var(--mm-serif);
	font-style: italic;
	font-size: 230px;
	line-height: 0.5;
	color: var(--mm-light);
	user-select: none;
}

.mm-bigm__circle {
	position: absolute;
	left: 0;
	top: 250px;
	width: 190px;
	height: 190px;
	border-radius: 50%;
	background: var(--mm-p);
	overflow: hidden;
}

.mm-bigm__books {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 9px;
}

.mm-bigm__book {
	width: 15px;
	border-radius: 7px 7px 0 0;
	background: var(--mm-light);
	transform-origin: bottom center;
}

.mm-bigm__book--1 { height: 112px; opacity: 0.85; }
.mm-bigm__book--2 { height: 138px; opacity: 1; }
.mm-bigm__book--3 { height: 96px; opacity: 0.85; transform: rotate(7deg) translateY(4px); }
.mm-bigm__book--4 { height: 126px; opacity: 0.85; }

.mm-bigm__semicircle {
	position: absolute;
	left: 226px;
	top: 286px;
	width: 214px;
	height: 154px;
	background: var(--mm-b);
	border-radius: 0 0 107px 107px;
	overflow: hidden;
}

.mm-bigm__line {
	position: absolute;
	left: 34px;
	right: 34px;
	height: 2px;
	background: var(--mm-light);
	opacity: 0.9;
}

.mm-bigm__line--1 { top: 34px; }
.mm-bigm__line--2 { top: 58px; }
.mm-bigm__line--3 { top: 82px; }
.mm-bigm__line--4 { top: 106px; }

.mm-bigm__label {
	position: absolute;
	left: 34px;
	top: 16px;
	width: 56px;
	height: 8px;
	border-radius: 4px;
	background: var(--mm-bt);
}

.mm-bigm__dot {
	position: absolute;
	left: 316px;
	top: 208px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--mm-dark);
}

.mm-bigm__stem {
	position: absolute;
	left: 296px;
	top: 120px;
	width: 2px;
	height: 76px;
	background: var(--mm-dark);
	opacity: 0.25;
}

.mm-bigm__chip {
	position: absolute;
	padding: 7px 16px;
	border-radius: 20px;
	background: var(--mm-white);
	border: 1px solid rgba(0, 0, 0, 0.1);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mm-dark);
	white-space: nowrap;
}

.mm-bigm__chip--copy { left: 96px; top: 262px; }
.mm-bigm__chip--books { left: 44px; top: 328px; }
.mm-bigm__chip--archive { left: 286px; top: 336px; }

/* ── Section divider ─────────────────────────────────────────────────── */

.mm-divider {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 48px;
}

.mm-divider__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--mm-dark);
	flex-shrink: 0;
}

.mm-divider__label {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mm-mid);
	font-weight: 500;
	white-space: nowrap;
}

.mm-divider__rule {
	flex: 1;
	height: 1px;
	background: rgba(0, 0, 0, 0.1);
}

.mm-divider__quote {
	font-family: var(--mm-serif);
	font-style: italic;
	font-size: 15px;
	color: rgba(0, 0, 0, 0.3);
}

/* ── Motifs (card icons) ─────────────────────────────────────────────── */

.mm-motif--quote {
	width: 52px;
	height: 68px;
	border-radius: 26px 26px 0 0;
	background: var(--mm-g);
	overflow: hidden;
	position: relative;
	margin-bottom: 26px;
}

.mm-motif__mark {
	position: absolute;
	left: 50%;
	top: 18px;
	transform: translateX(-50%);
	font-family: var(--mm-serif);
	font-style: italic;
	font-size: 56px;
	line-height: 0.5;
	color: var(--mm-light);
	user-select: none;
}

.mm-motif--books {
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: var(--mm-p);
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 3.5px;
	margin-bottom: 32px;
}

.mm-motif__bar {
	width: 6px;
	background: var(--mm-light);
	border-radius: 3px 3px 0 0;
	transform-origin: bottom center;
}

.mm-motif__bar--1 { height: 34px; opacity: 0.85; }
.mm-motif__bar--2 { height: 44px; opacity: 1; }
.mm-motif__bar--3 { height: 29px; opacity: 0.85; transform: rotate(7deg) translateY(1px); }
.mm-motif__bar--4 { height: 40px; opacity: 0.85; }

.mm-motif--lines {
	width: 68px;
	height: 46px;
	border-radius: 0 0 34px 34px;
	background: var(--mm-b);
	position: relative;
	margin-bottom: 48px;
	margin-top: 22px;
}

.mm-motif__line {
	position: absolute;
	left: 12px;
	right: 12px;
	height: 1.5px;
	background: var(--mm-light);
	opacity: 0.9;
}

.mm-motif__line--1 { top: 10px; }
.mm-motif__line--2 { top: 19px; }
.mm-motif__line--3 { top: 28px; }

.mm-motif__label {
	position: absolute;
	left: 12px;
	top: -8px;
	width: 18px;
	height: 4px;
	border-radius: 2px;
	background: var(--mm-bt);
}

/* ── Three cards ─────────────────────────────────────────────────────── */

.mm-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
	margin-bottom: 100px;
}

.mm-card {
	background: var(--mm-white);
	border-radius: 28px;
	padding: 36px 28px 32px;
	display: flex;
	flex-direction: column;
	cursor: pointer;
	transition: transform 0.25s ease;
}

.mm-card:hover {
	transform: translateY(-5px);
}

.mm-card__role {
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mm-mid);
	margin-bottom: 10px;
	font-weight: 500;
}

.mm-card__title {
	font-family: var(--mm-serif);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 14px;
	color: var(--mm-dark);
}

.mm-card__desc {
	font-size: 14px;
	line-height: 1.65;
	color: var(--mm-mid);
	flex: 1;
	margin-bottom: 24px;
}

.mm-card__cta {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mm-card__cta--green { color: var(--mm-gt); }
.mm-card__cta--pink { color: var(--mm-pt); }
.mm-card__cta--blue { color: var(--mm-bt); }

/* ── About / "Chi sono" dark panel ───────────────────────────────────── */

.mm-about {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
	background: var(--mm-dark);
	border-radius: 140px 32px 32px 32px;
	padding: 64px 60px 56px 76px;
	margin-bottom: 80px;
	position: relative;
	overflow: hidden;
}

.mm-about__watermark {
	position: absolute;
	right: 36px;
	top: 90px;
	font-family: var(--mm-serif);
	font-style: italic;
	font-size: 220px;
	line-height: 0.5;
	color: rgba(255, 255, 255, 0.05);
	user-select: none;
	pointer-events: none;
}

.mm-about__eyebrow {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.4);
	margin-bottom: 18px;
	font-weight: 500;
}

.mm-about__title {
	font-family: var(--mm-serif);
	font-size: 36px;
	font-weight: 700;
	line-height: 1.15;
	margin-bottom: 20px;
	color: var(--mm-white);
}

.mm-about__desc {
	font-size: 15px;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.6);
}

.mm-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	position: relative;
	z-index: 1;
}

.mm-stat {
	background: rgba(255, 255, 255, 0.06);
	border-radius: 18px;
	padding: 22px 20px;
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.mm-stat__num {
	font-family: var(--mm-serif);
	font-style: italic;
	font-size: 40px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.75);
	line-height: 1;
	margin-bottom: 6px;
}

.mm-stat__num.mm-accent-green { color: var(--mm-g); }
.mm-stat__num.mm-accent-pink { color: var(--mm-p); }
.mm-stat__num.mm-accent-blue { color: var(--mm-b); }

.mm-stat__label {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.4);
	line-height: 1.4;
}

/* ── Skills ──────────────────────────────────────────────────────────── */

.mm-skills {
	margin-bottom: 80px;
}

.mm-skills__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.mm-chip {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 20px;
	border-radius: 40px;
	font-size: 13px;
	font-weight: 400;
	background: var(--mm-white);
	border: 1px solid rgba(0, 0, 0, 0.1);
	color: var(--mm-dark);
}

.mm-chip__marker {
	display: inline-block;
}

.mm-chip__marker--g {
	width: 8px;
	height: 13px;
	border-radius: 4px 4px 0 0;
	background: var(--mm-g);
}

.mm-chip__marker--p {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--mm-p);
}

.mm-chip__marker--b {
	width: 12px;
	height: 8px;
	border-radius: 0 0 6px 6px;
	background: var(--mm-b);
}

.mm-chip__marker--n {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--mm-dark);
}

/* ── Footer / contact ────────────────────────────────────────────────── */

.mm-footer__contact {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 32px;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	padding-top: 40px;
}

.mm-footer__intro {
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
}

.mm-footer__portrait {
	width: 104px;
	height: 104px;
	border-radius: 50%;
	display: block;
	flex-shrink: 0;
	object-fit: cover;
}

.mm-footer__portrait--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--mm-light);
	border: 1px dashed rgba(0, 0, 0, 0.2);
	color: var(--mm-mid);
	font-size: 11px;
	text-align: center;
	line-height: 1.3;
	padding: 8px;
}

.mm-footer__eyebrow {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--mm-mid);
	margin: 0 0 8px;
	font-weight: 500;
}

.mm-footer__headline {
	font-family: var(--mm-serif);
	font-size: 38px;
	font-weight: 700;
	color: var(--mm-dark);
	margin: 0 0 8px;
}

.mm-footer__nowrap {
	white-space: nowrap;
}

.mm-footer__nowrap em {
	font-style: italic;
}

.mm-footer__dot {
	display: inline-block;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--mm-p);
	margin-left: 5px;
}

.mm-footer__contact-line {
	font-size: 16px;
	color: var(--mm-mid);
	margin: 0;
}

.mm-footer__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 36px;
	border-radius: 40px;
	background: var(--mm-dark);
	color: var(--mm-white);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.04em;
	flex-shrink: 0;
}

.mm-footer__cta-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--mm-p);
	display: inline-block;
}

.mm-footer__signature {
	display: flex;
	justify-content: center;
	padding-top: 72px;
}

/* ── Responsive ──────────────────────────────────────────────────────── *
 * The prototype was desktop-only (~1100px); these breakpoints are a
 * pragmatic minimum so the layout doesn't break on smaller viewports. */

@media (max-width: 900px) {
	.mm-hero {
		grid-template-columns: 1fr;
	}

	.mm-hero__figure {
		order: -1;
	}

	.mm-cards {
		grid-template-columns: 1fr;
	}

	.mm-about {
		grid-template-columns: 1fr;
		padding: 48px 28px 40px;
		border-radius: 60px 24px 24px 24px;
	}

	.mm-about__watermark {
		display: none;
	}
}

@media (max-width: 560px) {
	.mm-hero__title {
		font-size: 42px;
	}

	.mm-bigm {
		transform: scale(0.8);
		transform-origin: top center;
		margin-bottom: -88px;
	}

	.mm-footer__contact {
		justify-content: center;
		text-align: center;
	}

	.mm-footer__intro {
		justify-content: center;
	}
}