/* Studio Linnen — gedeelde huisstijl (tokens uit het design system, palet A "Terracotta & Honing") */
:root {
	--font-display: "Cormorant Garamond", Garamond, "Times New Roman", serif;
	--font-body: Jost, Futura, "Century Gothic", system-ui, sans-serif;
	--font-script: Parisienne, cursive;

	--linen-50: #FCFAF6; --linen-100: #F6F1E9; --linen-200: #EDE4D6; --linen-300: #DDD0BC;
	--terracotta-100: #F6E4DB; --terracotta-200: #EDC7B5; --terracotta-400: #D48D6E; --terracotta-500: #C07050; --terracotta-600: #A95C3F; --terracotta-700: #84452F;
	--honey-100: #F8EEDF; --honey-200: #F1DDC2; --honey-400: #D8A673; --honey-500: #C58D55;
	--espresso-900: #2E211E; --espresso-700: #5E4A42; --espresso-500: #8A766C; --espresso-300: #B9AAA0;
	--sage-200: #D3DBC9; --blush-200: #F0D6CD;

	--surface-page: var(--linen-50); --surface-sunken: var(--linen-100); --surface-card: #FFFFFF;
	--surface-tint: var(--honey-100); --surface-inverse: var(--espresso-900);
	--text-body: var(--espresso-900); --text-muted: var(--espresso-700); --text-subtle: var(--espresso-500); --text-on-inverse: var(--linen-50);
	--accent: var(--terracotta-600); --accent-hover: var(--terracotta-700); --accent-soft: var(--terracotta-100);
	--accent-2: var(--honey-400); --accent-2-soft: var(--honey-200);
	--border: var(--linen-300); --border-subtle: var(--linen-200); --border-strong: var(--espresso-300);
	--stitch: var(--terracotta-400);

	--container-max: 1240px; --container-narrow: 760px; --gutter: 24px;
	--radius-md: 8px; --radius-lg: 16px;
	--shadow-2: 0 10px 28px -12px rgba(46, 33, 30, .18);
	--ease-soft: cubic-bezier(.22, .61, .36, 1);
	--linen-texture: repeating-linear-gradient(0deg, rgba(46, 33, 30, .035) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(46, 33, 30, .03) 0 1px, transparent 1px 3px);
}

/* Zoals in het design system: fijnere lettertekening op macOS, geen negatieve letterafstand van het parent-thema */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: normal; }

::selection { background: var(--accent-2-soft); }

/* Knoppen */
.sl-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	height: 46px; padding: 0 26px; border-radius: 999px; border: 1px solid transparent;
	background: var(--accent); color: #fff;
	font: 500 13px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
	cursor: pointer; transition: background .16s var(--ease-soft), color .16s var(--ease-soft);
}
.sl-btn:hover, .sl-btn:focus-visible { background: var(--accent-hover); color: #fff; }
.sl-btn--lg { height: 54px; padding: 0 34px; font-size: 14px; }
.sl-btn--sm { height: 36px; padding: 0 18px; font-size: 12px; }
.sl-btn--secondary { background: transparent; color: var(--accent); border-color: var(--accent); }
.sl-btn--secondary:hover, .sl-btn--secondary:focus-visible { background: var(--accent-soft); color: var(--accent); }
.sl-btn:disabled { opacity: .45; cursor: not-allowed; background: var(--accent); }
.sl-btn:focus-visible, .sl-header a:focus-visible, .sl-footer a:focus-visible { outline: 2px solid var(--honey-400); outline-offset: 3px; }

.sl-icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Stiklijn (gestippelde "borduursteek") */
.sl-stitch { display: block; height: 1.5px; border-radius: 2px; background-image: repeating-linear-gradient(90deg, var(--stitch) 0 7px, transparent 7px 12px); }
.sl-stitch--short { width: 60px; margin: 18px auto; }
.sl-stitch--light { background-image: repeating-linear-gradient(90deg, rgba(252, 250, 246, .35) 0 7px, transparent 7px 12px); }

/* Header */
.sl-header-part { position: sticky; top: 0; z-index: 30; background: color-mix(in oklab, var(--surface-page) 92%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border-subtle); }
.admin-bar .sl-header-part { top: 32px; }
.sl-announce { background: var(--surface-inverse); color: var(--text-on-inverse); font: 400 12px/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; text-align: center; padding: 9px 16px; }
.sl-header { max-width: var(--container-max); margin: 0 auto; padding: 10px var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; }
.sl-header__nav { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.sl-header__nav a { color: var(--text-body); text-decoration: none; font: 400 12px/1.6 var(--font-body); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.sl-header__nav a:hover { color: var(--accent); }
.sl-header__end { display: flex; justify-content: flex-end; }
.sl-logo { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--text-body); }
.sl-logo__mark { width: auto; height: 60px; }
.sl-logo__word { font: 500 17px/1 var(--font-display); letter-spacing: .32em; text-transform: uppercase; color: var(--text-body); white-space: nowrap; }
.sl-logo__word--light { display: block; margin-top: 18px; color: var(--text-on-inverse); font-size: 16px; }
.sl-footer__mark { display: block; width: auto; height: 70px; }

/* Footer */
.sl-footer-part { background: var(--surface-inverse); color: var(--text-on-inverse); margin-top: 0; }
.sl-footer__grid { max-width: var(--container-max); margin: 0 auto; padding: 72px var(--gutter) 40px; display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.sl-footer p { font-size: 14px; line-height: 1.7; opacity: .8; max-width: 300px; margin: 18px 0 0; }
.sl-footer__title { font: 400 12px/1.4 var(--font-body); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 14px; }
.sl-footer ul { list-style: none; margin: 0; padding: 0; font-size: 14px; line-height: 2.1; }
.sl-footer li { opacity: .8; }
.sl-footer a { color: inherit; text-decoration: none; }
.sl-footer a:hover { text-decoration: underline; }
.sl-footer__bottom { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter) 32px; }
.sl-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 12px; opacity: .65; margin-top: 20px; }
.sl-footer__juridisch { display: flex; flex-wrap: wrap; gap: 8px 20px; }

@media (max-width: 860px) {
	.sl-header { grid-template-columns: 1fr auto; row-gap: 10px; }
	.sl-logo { grid-column: 1; grid-row: 1; }
	.sl-header__end { grid-column: 2; grid-row: 1; }
	.sl-header__nav { grid-column: 1 / -1; grid-row: 2; justify-content: center; }
	.sl-footer__grid { grid-template-columns: 1fr 1fr; }
	.sl-footer__grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 782px) { .admin-bar .sl-header-part { top: 0; position: relative; } }
@media (max-width: 480px) {
	.sl-announce { font-size: 10.5px; letter-spacing: .08em; }
	.sl-logo__mark { height: 48px; }
	.sl-logo__word { font-size: 14px; letter-spacing: .24em; }
	.sl-footer__grid { grid-template-columns: 1fr; }
}