/*
 * Base styles and components for mariemann.com. Everything references a
 * token from tokens.css. Block-level typography and colour defaults come
 * from theme.json; this file handles what theme.json can't.
 */

html {
	-webkit-text-size-adjust: 100%;
}

body {
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: var(--text-md);
	line-height: var(--leading-body);
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

a:hover {
	color: var(--accent);
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

/* ---------- Header ---------- */

.mm-header {
	padding-block: var(--gap-xl);
	border-bottom: 1px solid var(--line);
}

.mm-brand {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: 500;
	letter-spacing: -0.01em;
	margin: 0;
}

.mm-brand a {
	text-decoration: none;
}

.mm-nav {
	font-size: var(--text-sm);
	letter-spacing: 0.02em;
}

.mm-nav a {
	text-decoration: none;
}

.mm-nav .current-menu-item > a {
	color: var(--accent);
}

/* ---------- Sky hero (homepage) ---------- */

.mm-main--front {
	padding-top: 0;
}

.mm-sky {
	position: relative;
	min-height: calc(100svh - (var(--frame-inset) * 2));
	margin: var(--frame-inset);
	overflow: hidden;
	border-radius: var(--radius);
	background-color: var(--sky);
	/* Drop the real photo at assets/images/sky.jpg; until then the gradient shows. */
	background-image:
		url("images/sky.jpg"),
		linear-gradient(180deg, var(--sky) 0%, var(--sky-2) 70%, #9cc6e2 100%);
	background-size: cover;
	background-position: center;
}

/* Film grain: an SVG noise texture laid over the sky. */
.mm-sky::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.45;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
}

.mm-sky__name,
.mm-sky__link {
	position: absolute;
	margin: 0;
	line-height: 1;
	white-space: nowrap;
	z-index: 1;
}

.mm-sky__name {
	left: 9.5%;
	top: 22%;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(44px, 9.5vw, 128px);
	letter-spacing: -0.015em;
	color: var(--acid);
}

.mm-sky__link {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: clamp(26px, 5.2vw, 72px);
	letter-spacing: -0.01em;
	color: var(--navy);
}

.mm-sky__link a {
	color: inherit;
	text-decoration: none;
	transition: color var(--dur) var(--ease);
}

.mm-sky__link a:hover,
.mm-sky__link a:focus-visible {
	color: var(--acid);
}

.mm-sky__link--about    { right: 8%;  top: 10%; }
.mm-sky__link--work     { right: 14%; top: 49%; }
.mm-sky__link--manniacs { left: 13%;  top: 58%; }
.mm-sky__link--store    { left: 54%;  top: 78%; }

.mm-below {
	padding-block: var(--gap-3xl) var(--section);
}

/* ---------- Main ---------- */

.mm-main {
	padding-block: var(--gap-3xl) var(--section);
	min-height: 60vh;
}

.mm-page__head {
	margin-bottom: var(--gap-2xl);
}

.mm-kicker {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}

.mm-meta {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	color: var(--muted);
}

/* ---------- Work grid ---------- */

.mm-grid {
	gap: var(--gap-2xl) var(--gap-xl);
}

.mm-card__image {
	margin: 0 0 var(--gap-md);
	background: var(--paper-2);
	overflow: hidden;
}

.mm-card__image img {
	transition: transform var(--dur) var(--ease);
}

.mm-card__image a:hover img {
	transform: scale(1.015);
}

.mm-card__title {
	font-family: var(--font-display);
	font-size: var(--text-md);
	font-weight: 500;
	margin: 0;
}

.mm-card__title a {
	text-decoration: none;
}

/* ---------- Single work ---------- */

.mm-work__image {
	margin-bottom: var(--gap-2xl);
}

.mm-work__image img {
	margin-inline: auto;
	max-height: 85vh;
	width: auto;
}

/* ---------- Prose ---------- */

.mm-prose p,
.mm-prose ul,
.mm-prose ol,
.mm-prose blockquote {
	margin-block: 0 var(--gap-xl);
}

.mm-prose blockquote {
	border-left: 2px solid var(--line);
	padding-left: var(--gap-xl);
	color: var(--ink-2);
	font-family: var(--font-display);
	font-size: var(--text-lg);
}

/* ---------- Buttons ---------- */

.wp-block-button__link,
.wc-block-components-button,
.woocommerce .button,
.woocommerce button.button,
.pmpro_btn {
	background: var(--ink);
	color: var(--paper);
	border: 1px solid var(--ink);
	border-radius: var(--radius);
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	letter-spacing: 0.02em;
	padding: 0.8em 1.4em;
	text-decoration: none;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.wp-block-button__link:hover,
.wc-block-components-button:hover,
.woocommerce .button:hover,
.woocommerce button.button:hover,
.pmpro_btn:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--paper);
}

.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--ink);
}

/* ---------- Footer ---------- */

.mm-footer {
	border-top: 1px solid var(--line);
	padding-block: var(--gap-xl) var(--gap-2xl);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--muted);
}

.mm-footer a {
	text-decoration: none;
}

/* ---------- WooCommerce: typography follows the theme ---------- */

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title,
.wp-block-post-title.wc-block-components-product-title {
	font-family: var(--font-display);
	font-weight: 500;
}

.woocommerce ul.products li.product .price,
.wc-block-components-product-price {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	color: var(--ink-2);
}