/*
 * Serene base styles (Classic Crest).
 * Colour tokens (--plum, --gold, --blush ...) are Bricks global colours.
 * Components (header, footer, buttons, cards ...) are Bricks global classes (sc-*).
 * Bricks sets html { font-size: 62.5% }, so sizes here are in px.
 */

:root {
	--font-serif: "Brygada 1918", Georgia, "Times New Roman", serif;
	--font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--gutter: clamp(20px, 5vw, 64px);
	--radius-arch: 999px 999px 0 0;
	--ease: cubic-bezier(.2, .7, .2, 1);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Base type ------------------------------------------------------------ */

body {
	background: var(--white, #fff);
	color: var(--ink, #241820);
	font-family: var(--font-sans);
	font-size: 18px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

:where(h1, h2, h3, h4) {
	color: var(--plum);
	font-family: var(--font-serif);
	margin: 0;
	text-wrap: balance;
}

:where(h1) {
	font-size: clamp(40px, 5.2vw, 78px);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.06;
}

:where(h2) {
	font-size: clamp(32px, 3.6vw, 52px);
	font-weight: 400;
	line-height: 1.08;
}

:where(h3) {
	font-size: clamp(22px, 1.9vw, 27px);
	font-weight: 500;
	line-height: 1.2;
}

:where(h4) {
	font-family: var(--font-sans);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
}

:where(p) {
	margin: 0;
	text-wrap: pretty;
}

:where(a) {
	color: var(--plum);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease);
}

:where(a:hover) {
	color: var(--plum-deep);
}

:where(strong, b) {
	font-weight: 600;
}

::selection {
	background: var(--blush-deep);
	color: var(--ink);
}

/* Visible focus everywhere; cream on plum surfaces */
:focus-visible {
	outline: 2px solid var(--plum);
	outline-offset: 3px;
	border-radius: 4px;
}

.sc-on-plum :focus-visible {
	outline-color: var(--cream);
}

/* Line icons ------------------------------------------------------------
 * <a class="sc-icon sc-icon--phone">Call</a> draws a currentColor icon before
 * the text. Icons are masks, so they follow the text colour and add no requests.
 */

.sc-icon {
	align-items: center;
	display: inline-flex;
	gap: 8px;
}

.sc-icon::before {
	background-color: currentColor;
	content: "";
	flex: 0 0 auto;
	height: var(--icon-size, 20px);
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
	width: var(--icon-size, 20px);
}

.sc-icon--after {
	flex-direction: row-reverse;
	justify-content: flex-end;
}

.sc-icon--phone {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h3l2 5-2.5 1.5a11 11 0 0 0 6 6L15 14l5 2v3a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
}

.sc-icon--whatsapp {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11.5a8 8 0 0 1-11.8 7L4 20l1.5-4.2A8 8 0 1 1 20 11.5z'/%3E%3C/svg%3E");
}

.sc-icon--mail {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3.5 6.5 12 13l8.5-6.5'/%3E%3C/svg%3E");
}

.sc-icon--pin {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
}

.sc-icon--arrow {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	--icon-size: 18px;
}

/* Utilities ------------------------------------------------------------ */

.sc-visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.sc-nowrap {
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
	}
}