@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-latin-700-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Barlow Condensed";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Barlow Condensed";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("../fonts/barlow-condensed-latin-800-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Karla";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/karla-latin-400-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Karla";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/karla-latin-700-normal.woff2") format("woff2");
}

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

@font-face {
	font-family: "Kop Fallback";
	src: local("Arial Narrow"), local("Arial");
	size-adjust: 88%;
	ascent-override: 98%;
}

@font-face {
	font-family: "Tekst Fallback";
	src: local("Arial"), local("Helvetica");
	size-adjust: 96%;
}

:root {
	--kleur-nacht: #0a0a0a;
	--kleur-hout: #111111;
	--kleur-hout-midden: #181818;
	--kleur-hout-licht: #222222;
	--kleur-papier: #efe4cb;
	--kleur-papier-licht: #f7f0df;
	--kleur-papier-donker: #d8c59e;
	--kleur-inkt: #2a2018;
	--kleur-inkt-zacht: #5a4a3a;
	--kleur-messing: #eea12c;
	--kleur-messing-licht: #f7b84a;
	--kleur-messing-donker: #c27a12;
	--kleur-zegel: #9e2b25;
	--kleur-zegel-licht: #c0392b;
	--kleur-touw: #b3322a;
	--kleur-kurk: #8a6440;
	--kleur-kurk-donker: #6e4d30;
	--kleur-groen: #5e7a4a;
	--kleur-tekst-licht: #f2f2f2;
	--kleur-gedempt: #9a9a9a;
	--kleur-lijn-licht: rgba(255, 255, 255, 0.1);
	--kleur-lijn-donker: rgba(42, 32, 24, 0.16);
	--kleur-focus: #f7b84a;
	--kleur-succes: #6f9a4f;
	--kleur-fout: #c0392b;

	--font-kop: "Barlow Condensed", "Kop Fallback", "Arial Narrow", sans-serif;
	--font-boek: "Cormorant Garamond", Georgia, serif;
	--kleur-accent: #ffb000;
	--font-tekst: "Karla", "Tekst Fallback", Arial, sans-serif;
	--font-type: "Special Elite", "Courier New", monospace;

	--fs-klein: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
	--fs-basis: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
	--fs-groot: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
	--fs-h4: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
	--fs-h3: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
	--fs-h2: clamp(2.125rem, 1.6rem + 2.4vw, 3.5rem);
	--fs-h1: clamp(2.75rem, 1.9rem + 4vw, 5.5rem);
	--lh-tekst: 1.65;
	--lh-kop: 1;

	--ruimte-1: 0.25rem;
	--ruimte-2: 0.5rem;
	--ruimte-3: 0.75rem;
	--ruimte-4: 1rem;
	--ruimte-5: 1.5rem;
	--ruimte-6: 2rem;
	--ruimte-7: 3rem;
	--ruimte-8: 4rem;
	--sectie-ruimte: clamp(4rem, 3rem + 5vw, 8rem);

	--container: 1240px;
	--container-smal: 820px;
	--gutter: clamp(1rem, 0.6rem + 2vw, 2rem);

	--radius-klein: 4px;
	--radius: 8px;
	--radius-groot: 16px;
	--radius-rond: 999px;

	--schaduw-papier: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 18px 40px -18px rgba(0, 0, 0, 0.65), 0 4px 10px -4px rgba(0, 0, 0, 0.4);
	--schaduw-zwevend: 0 30px 60px -20px rgba(0, 0, 0, 0.75);
	--schaduw-gloed: 0 0 0 1px rgba(230, 181, 98, 0.35), 0 10px 30px -8px rgba(238, 161, 44, 0.5);

	--knop-hoogte: 3rem;
	--knop-hoogte-klein: 2.5rem;
	--knop-hoogte-groot: 3.5rem;
	--knop-padding: 0 1.5rem;
	--knop-radius: var(--radius-klein);
	--knop-font: var(--font-tekst);
	--knop-gewicht: 700;
	--knop-letter: 0.06em;
	--knop-primair-bg: var(--kleur-accent);
	--knop-primair-hover: #ffc233;
	--knop-primair-tekst: var(--kleur-nacht);
	--knop-zegel-bg: var(--kleur-zegel);
	--knop-zegel-tekst: var(--kleur-papier-licht);

	--kop-hoogte: 104px;
	--logo-kop: 88px;
	--logo-kop-klein: 66px;
	--logo-kop-mobiel: 60px;
	--logo-voet: 96px;
	--topbar-hoogte: 36px;

	--ease-uit: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-veer: cubic-bezier(0.34, 1.56, 0.64, 1);
	--duur-snel: 180ms;
	--duur: 420ms;
	--duur-traag: 900ms;

	--ruis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	--papier-vlek: radial-gradient(ellipse at 18% 12%, rgba(160, 110, 50, 0.16), transparent 42%), radial-gradient(ellipse at 88% 80%, rgba(140, 90, 40, 0.14), transparent 40%), radial-gradient(ellipse at 60% 40%, rgba(255, 255, 255, 0.35), transparent 60%);
	--hout-nerf: linear-gradient(transparent, transparent);
}