/* Design tokens – taken from the Figma file (EleniKollarou). */
:root {
	--c-ink: #150f0f;      /* "black" */
	--c-text: #362e2e;     /* paragraph text */
	--c-muted: #5d4f4f;
	--c-line: rgb(93 79 79 / .3);
	--c-bg: #fff;
	--c-quote-bg: #f3f3f3;
	--c-overlay: rgb(15 15 15 / .5);

	--ff: "Ysabeau Infant", system-ui, -apple-system, "Segoe UI", sans-serif;

	--fs-body: .9375rem;   /* 15px */
	--fs-h2: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);          /* 24px */
	--ls-h2: .06em;        /* 6% = 1.44px */

	--gutter: clamp(1.25rem, .3rem + 3.1vw, 3.75rem);        /* 60px on desktop */
	--max: 1920px;
	--section-gap: clamp(4rem, 2rem + 6.25vw, 7.5rem);       /* 120px */
	--grid-gap: clamp(.75rem, .2rem + 2.1vw, 2.5rem);        /* 40px */

	--ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-ink);
	font: 500 var(--fs-body)/1.4667 var(--ff);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-weight: 500; line-height: 1.1; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
[hidden] { display: none !important; }

.screen-reader-text, .skip-link:not(:focus) {
	position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link:focus { position: fixed; top: .5rem; left: .5rem; z-index: 1000; background: #fff; padding: .75rem 1rem; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }

/* Section heading ("H2" in Figma) */
.lbk-h2 {
	font-size: var(--fs-h2);
	font-weight: 500;
	letter-spacing: var(--ls-h2);
	text-transform: uppercase;
	text-align: center;
	line-height: 1.2;
}

/* Text link with underline that draws in on hover (Figma "main menu" / "btn main") */
.lbk-link {
	position: relative;
	display: inline-block;
	padding-bottom: 6px;
	font-size: var(--fs-body);
	font-weight: 500;
	text-transform: uppercase;
	line-height: 1.25;
	white-space: nowrap;
}
.lbk-link::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
	background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.lbk-link:hover::after, .lbk-link:focus-visible::after, .lbk-link.is-current::after,
.current-menu-item > .lbk-link::after, .current-menu-item > a.lbk-link::after { transform: scaleX(1); }

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