/*
 * Stijl "Typewriter" — zwart-wit, typemachineletters, dunne kaders met een hartje
 * en lijntekeningen, zoals de witte kaarten van Miwimae.
 */

@font-face {
	font-family: "Special Elite";
	src: url("../fonts/special-elite-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Courier Prime";
	src: url("../fonts/courier-prime-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Courier Prime";
	src: url("../fonts/courier-prime-400-italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Courier Prime";
	src: url("../fonts/courier-prime-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--bg: #fff;
	--bg-soft: #f5f4f0;
	--surface: #fff;
	--ink: #161616;
	--ink-soft: #4a4a4a;
	--heading: #111;
	--brand: #111;
	--eyebrow: #4a4a4a;
	--accent: #e2725b;
	--accent-ink: #c04e37;
	--accent-contrast: #111;
	--leaf: #111;
	--stem: #111;
	--vein: #111;
	--flower-heart: #111;
	--line: #d8d8d4;
	--underline: #111;
	--focus: #111;
	--ghost-border: #111;

	--button-bg: #111;
	--button-ink: #fff;
	--button-bg-hover: #e2725b;
	--button-ink-hover: #111;
	--button-border: 1px solid #111;
	--button-border-hover: #111;
	--button-weight: 700;

	--announce-bg: #111;
	--announce-ink: #fff;
	--header-bg: #fff;
	--hero-bg: #fff;
	--usp-bg: #fff;
	--page-head-bg: #fff;
	--page-head-border: 1px solid #111;
	--card-border: 1px solid #111;
	--step-bg: #fff;
	--step-ink: #111;
	--step-border: 1px solid #111;
	--mix-bg: #fff;
	--quote-bg: #fff;
	--quote-border: 1px solid #111;
	--insta-bg: #f5f4f0;
	--footer-bg: #111;
	--footer-ink: #fff;
	--footer-brand: #fff;
	--footer-line: rgb(255 255 255 / 0.25);

	--radius: 0;
	--radius-small: 0;
	--radius-button: 0;

	--font-display: "Special Elite", "Courier New", Courier, monospace;
	--font-body: "Courier Prime", "Courier New", Courier, monospace;
	--font-label: var(--font-body);
	--font-quote: var(--font-display);
	--display-weight: 400;
	--display-leading: 1.2;
	--label-weight: 700;
	--label-tracking: 0.12em;
	--nav-weight: 400;
	--nav-tracking: 0;
	--button-tracking: 0;
	--body-size: 1.0625rem;
	--body-leading: 1.7;
	--em-style: normal;
	--quote-style: normal;
	--loop-title-size: 1.3rem;
}

/* Lijntekeningen in plaats van gevulde bloemen. */
.botanical .b-fill {
	fill: #fff;
	stroke: #111;
	stroke-width: 1.3;
	stroke-linejoin: round;
}

.botanical .b-line {
	stroke-width: 1.3;
}

.botanical .b-line[data-vein] {
	stroke-width: 0.9;
}

.site-header {
	border-bottom-color: #111;
}

.usps {
	border-color: #111;
}

/* Het kader met het hartje, zoals op de kaarten. */
.hero__frame,
.quote-card {
	--heart: url("../img/heart.svg");
}

.hero__frame {
	position: absolute;
	inset: clamp(0.9rem, 2.2vw, 1.75rem);
	border: 1px solid #111;
	pointer-events: none;
}

.hero__frame::after,
.quote-card::after {
	content: "";
	position: absolute;
	bottom: -0.95rem;
	left: 50%;
	width: 4.2rem;
	height: 1.9rem;
	transform: translateX(-50%);
	background: #fff var(--heart) center / 1.8rem no-repeat;
}

.hero__inner {
	padding-inline: clamp(1.25rem, 4vw, 3rem);
	padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

.hero__bouquet {
	position: absolute;
	right: -3%;
	bottom: -14%;
	z-index: 0;
	width: 34%;
	height: auto;
}

.hero__cards {
	margin-right: 8%;
}

.hero h1 {
	max-width: 12em;
	font-size: clamp(2.1rem, 1.5rem + 2.8vw, 3.6rem);
}

.eyebrow::before {
	content: "— ";
}

.quote-card {
	overflow: visible;
}

.quote-card p {
	font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.55rem);
	line-height: 1.5;
}

h2 {
	font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.7rem);
}

.steps li::before {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 1.2rem;
	padding-top: 0.2em;
}

.quote-card::after {
	background-color: var(--bg-soft);
}

.section:not(.section--soft) .quote-card::after {
	background-color: #fff;
}

.page-head::after {
	content: "";
	position: absolute;
	right: clamp(0.5rem, 6vw, 6rem);
	bottom: -2.2rem;
	width: clamp(5rem, 11vw, 8.5rem);
	aspect-ratio: 640 / 962;
	background: url("../img/boeket.png") center / contain no-repeat;
	opacity: 0.9;
}

.shop-chips a:hover,
.shop-chips .is-current a {
	background: #111;
	color: #fff;
}

.site-footer .brand,
.site-footer .brand:hover {
	color: #fff;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border: 1px solid #111;
	border-top-width: 3px;
	background: #fff;
}

@media (max-width: 860px) {
	.page-head::after {
		display: none;
	}

	.hero__bouquet {
		width: 30%;
		bottom: -8%;
	}
}