/* ewebsites design tokens
   Three layers: primitive values, semantic roles, component decisions.
   Every other stylesheet consumes --ew-* custom properties only.
   Client values (Eureka122) live here and in inc/content/, never in components. */
/* Self-hosted variable fonts (assets/fonts, SIL OFL). No CDN, no Google Fonts. */
@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces-var.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces-var-italic.woff2") format("woff2");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Quicksand";
	src: url("../fonts/quicksand-var.woff2") format("woff2");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}
/* Metric-matched fallbacks: while the web fonts load, Georgia and Arial take
   the same width and line boxes, so text does not shift on swap. */
@font-face {
	font-family: "Fraunces Fallback";
	src: local("Georgia");
	font-style: normal;
	size-adjust: 105.2%;
	ascent-override: 92.96%;
	descent-override: 24.24%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Fraunces Fallback";
	src: local("Georgia Italic"), local("Georgia-Italic");
	font-style: italic;
	size-adjust: 105.2%;
	ascent-override: 92.96%;
	descent-override: 24.24%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Quicksand Fallback";
	src: local("Arial"), local("ArialMT");
	size-adjust: 104.8%;
	ascent-override: 95.45%;
	descent-override: 23.86%;
	line-gap-override: 0%;
}
:root {
	/* ------------------------------------------------------------------
	   Primitive: colour. Warm paper and warm ink anchor the whole site. */
	--ew-color-paper-0: #f4efe5;
	--ew-color-paper-50: #faf7f1;
	--ew-color-paper-100: #ebe4d6;
	--ew-color-ink-900: #211f1b;
	--ew-color-ink-800: #2b2823;
	--ew-color-ink-700: #36322c;
	--ew-color-ink-500: #6b6358;
	--ew-color-ink-400: #857b6e;
	--ew-color-brass-300: #e4c9a4;
	--ew-color-brass-500: #d5aa75;
	--ew-color-brass-700: #8a5e28;
	--ew-color-white: #fffdf8;
	--ew-color-clay-300: #e7b4a4;
	--ew-color-clay-700: #8a4b38;

	/* Primitive: type */
	--ew-font-fraunces: "Fraunces", "Fraunces Fallback", Georgia, serif;
	--ew-font-quicksand: "Quicksand", "Quicksand Fallback", "Segoe UI", system-ui, sans-serif;
	--ew-font-heading-variation: "SOFT" 100, "WONK" 1;
	--ew-weight-light: 300;
	--ew-weight-regular: 400;
	--ew-weight-medium: 500;
	--ew-weight-subheading: 550;
	--ew-weight-semibold: 600;
	--ew-text-display: clamp(2.2rem, 1.15rem + 2.9vw, 3.9rem);
	--ew-text-hero: clamp(2.2rem, 0.9rem + 1.6vw + 2.4svh, 3.9rem);
	--ew-text-heading-1: clamp(1.8rem, 1.15rem + 1.8vw, 2.9rem);
	--ew-text-heading-2: clamp(1.75rem, 1.2rem + 1.5vw, 2.6rem);
	--ew-text-heading-3: clamp(1.25rem, 1.15rem + 0.35vw, 1.5rem);
	--ew-text-lead: clamp(1.375rem, 1.25rem + 0.4vw, 1.5rem);
	--ew-text-body: 1.125rem;
	--ew-text-label: 1rem;
	--ew-text-meta: 1rem;
	--ew-text-eyebrow: 1.0625rem;
	--ew-text-stat: clamp(2.6rem, 1.6rem + 2.8vw, 4.5rem);
	--ew-text-index: 1.25rem;
	--ew-leading-heading: 1.1;
	--ew-leading-subheading: 1.2;
	--ew-leading-lead: 1.5;
	--ew-leading-body: 1.7;
	--ew-leading-ui: 1.3;
	--ew-tracking-heading: 0;
	--ew-tracking-ui: 0.01em;
	/* Fraunces (fontsource build) ships lining figures and no tnum. */
	--ew-numeric: lining-nums;

	/* Primitive: space (the stack scale, used inside sections) */
	--ew-space-1: 0.5rem;
	--ew-space-2: 0.75rem;
	--ew-space-3: 1rem;
	--ew-space-4: 1.5rem;
	--ew-space-5: 2.25rem;
	--ew-space-6: 3.5rem;

	/* Primitive: section rhythm, grid gaps */
	--ew-section: clamp(4rem, 8vw, 7rem);
	--ew-section-compact: clamp(2.5rem, 5vw, 4rem);
	--ew-gap: clamp(1.5rem, 3vw, 2.5rem);
	--ew-gap-tight: var(--ew-space-3);

	/* Primitive: width and measure */
	--ew-gutter: 1.25rem;
	--ew-width-wide: 75rem;
	--ew-width-content: 36rem;
	--ew-width-measure: 66ch;
	--ew-measure-lead: 58ch;
	--ew-measure-card: 32ch;
	--ew-measure-label: 16ch;

	/* Primitive: shape, line, elevation (two warm shadow levels, nothing else) */
	--ew-radius-lg: 1.25rem;
	--ew-radius-md: 0.75rem;
	--ew-radius-sm: 0.375rem;
	--ew-border-width: 1px;
	--ew-line: 2px;
	--ew-gap-hair: 0.125rem;
	--ew-admin-bar-h: var(--wp-admin--admin-bar--height, 0px);
	--ew-shadow-1: 0 1px 2px rgba(33, 31, 27, 0.06), 0 6px 18px rgba(33, 31, 27, 0.08);
	--ew-shadow-2: 0 12px 36px rgba(33, 31, 27, 0.18);

	/* Primitive: motion and depth */
	--ew-motion-duration-fast: 160ms;
	--ew-motion-duration-normal: 260ms;
	--ew-motion-duration-slow: 480ms;
	--ew-motion-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ew-motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ew-reveal-distance: 0.85rem;
	--ew-reveal-stagger: 60ms;
	--ew-z-header: 40;
	--ew-z-dropdown: 50;
	--ew-z-dialog: 70;
	--ew-z-skip: 80;

	/* Primitive: masthead and hero geometry.
	   --ew-bp-nav is the width below which the desktop navigation no longer
	   fits on one line (logo, centred menu, Boeken button, longest language;
	   the language menu lives in the top bar). Media queries repeat the same value as a literal because custom
	   properties cannot be read inside @media; navigation.js reads this token. */
	--ew-bp-nav: 56rem;
	--ew-topbar-h: 2.25rem;
	--ew-header-h: 4.5rem;
	--ew-hero-inset: 1.5rem;
	--ew-hero-pad: 0.875rem; /* 14px: side padding of the hero text (.ew-hero__inner), the same on every width */
	--ew-hero-radius: var(--ew-radius-lg);
	--ew-hero-compact-bg: var(--ew-color-ink-800);
	--ew-hero-booking-h: 9.5625rem; /* measured: the bar renders at 153px from 1024px up (test-results/qa/results.md) */
	--ew-hero-available: calc(100svh - var(--ew-topbar-h) - var(--ew-header-h) - 2 * var(--ew-hero-inset) - var(--ew-admin-bar-h));
	--ew-hero-min: 22rem;
	--ew-hero-page-h: clamp(22rem, 60svh, var(--ew-hero-available));
	--ew-tap: 2.75rem;

	/* ------------------------------------------------------------------
	   Semantic: dark surface is the default (header, dark sections). */
	--ew-color-bg: var(--ew-color-ink-900);
	--ew-color-bg-raised: var(--ew-color-ink-800);
	--ew-color-surface: var(--ew-color-ink-800);
	--ew-color-surface-raised: var(--ew-color-ink-700);
	--ew-color-text-primary: var(--ew-color-paper-0);
	--ew-color-text-secondary: #ddd5c7;
	--ew-color-text-muted: #b8ae9b;
	--ew-color-brass: var(--ew-color-brass-500);
	--ew-color-border: rgba(244, 239, 229, 0.16);
	--ew-color-focus: var(--ew-color-brass-500);
	--ew-color-error: var(--ew-color-clay-300);
	--ew-color-selection: rgba(213, 170, 117, 0.35);
	--ew-color-on-photo: var(--ew-color-paper-50);
	--ew-color-on-photo-soft: rgba(250, 247, 241, 0.9);
	--ew-color-overlay-strong: rgba(33, 31, 27, 0.82);
	--ew-color-overlay-mid: rgba(33, 31, 27, 0.5);
	--ew-color-overlay-soft: rgba(33, 31, 27, 0.14);
	--ew-font-heading: var(--ew-font-fraunces);
	--ew-font-body: var(--ew-font-quicksand);
	/* Numerals, prices and dates: Quicksand. Fraunces is for titles only. */
	--ew-font-numeric: var(--ew-font-body);
	--ew-weight-body: var(--ew-weight-medium);
	--ew-weight-lead: var(--ew-weight-regular);
	--ew-weight-ui: var(--ew-weight-semibold);
	--ew-button-primary-bg: var(--ew-color-paper-50);
	--ew-button-primary-fg: var(--ew-color-ink-900);
	--ew-button-primary-bg-hover: var(--ew-color-white);
	--ew-shadow-card: var(--ew-shadow-1);
	--ew-shadow-raised: var(--ew-shadow-2);

	/* Component decisions */
	--ew-button-padding-y: 0.8rem;
	--ew-button-padding-x: 1.25rem;
	--ew-button-radius: var(--ew-radius-sm);
	--ew-field-radius: var(--ew-radius-sm);
	--ew-field-height: 3rem;
	--ew-card-radius: var(--ew-radius-md);
	--ew-card-padding: var(--ew-space-4);
	--ew-index-size: 2.75rem;
	--ew-nav-gap: 1.5rem;
	--ew-logo-h: 2rem;
	--ew-hero-dot-h: 0.3125rem;
	--ew-hero-dot-w: 2.25rem;
	--ew-hero-dot-w-active: 3rem;
	--ew-hero-dot-hit: max(var(--ew-tap), var(--ew-hero-dot-w-active)); /* fixed hit area per dot; only the bar inside animates */
	--ew-hero-fade: 1400ms;
	--ew-hero-progress: 6000ms; /* fill time of the active slide mark; hero.php sets it inline from the slideshow interval */
	/* Liquid glass: the hero booking bar on desktop. Paper tint over a blurred,
	   saturated backdrop with a white specular edge and a sheen across the top. */
	--ew-glass-tint: color-mix(in srgb, var(--ew-color-paper-50) 78%, transparent);
	--ew-glass-tint-fallback: color-mix(in srgb, var(--ew-color-paper-50) 96%, transparent);
	--ew-glass-blur: 28px;
	--ew-glass-saturate: 1.6;
	--ew-glass-edge: color-mix(in srgb, var(--ew-color-white) 70%, transparent);
	--ew-glass-highlight: color-mix(in srgb, var(--ew-color-white) 90%, transparent);
	--ew-glass-sheen: color-mix(in srgb, var(--ew-color-white) 30%, transparent);
	--ew-glass-well: color-mix(in srgb, var(--ew-color-white) 72%, transparent); /* fields on the pane */
	--ew-glass-well-active: color-mix(in srgb, var(--ew-color-white) 92%, transparent);
	--ew-rates-col: 5.5rem; /* year column of the rates tables; 4.5rem on phones */
	--ew-marquee-h-lead: clamp(9.6rem, 5.6rem + 16vw, 24rem);
	--ew-marquee-h-follow: clamp(8rem, 4.4rem + 13.2vw, 20rem);
	--ew-marquee-duration-lead: 96s;
	--ew-marquee-duration-follow: 83s;
	--ew-greviews-card-max: min(26rem, 84vw);
	--ew-greviews-duration-lead: 55s;
	--ew-greviews-duration-follow: 47s;
	--ew-story-mat: 0.5rem;
	--ew-story-inset-width: 50%;
	--ew-story-overhang-x: 15%;
	--ew-story-overhang-y: 12%;
	/* Density patterns (docs/audit): dense facts strip of five or six figures,
	   clamped cards of three lines, chips, notes icons. */
	--ew-text-stat-dense: clamp(1.75rem, 1rem + 1.5vw, 2.5rem);
	--ew-clamp-lines: 3;
	--ew-clamp-height: calc(var(--ew-clamp-lines) * var(--ew-leading-body) * var(--ew-text-body));
	--ew-chip-height: 2rem;
	--ew-chip-height-sm: 1.75rem;
	--ew-text-chip-sm: 0.9375rem;
	--ew-chip-radius: 999px;
	--ew-icon-size: 1.25rem;
	--ew-icon-size-sm: 0.75rem; /* chevron of the card toggle */
	/* Dichtbij (Omgeving): every place is a card of its own. One band runs
	   from --ew-space-4 on a phone to --ew-space-5 from 768px up, and the
	   room between the cards and the room inside them read it both, so the
	   gutters of the grid and the padding of a card are always the same
	   figure, on every width and in both directions. The hover colours live
	   in the scheme blocks, because they are mixed from the scheme's own
	   surface and ink. */
	--ew-feature-card-gap: clamp(var(--ew-space-4), calc(var(--ew-space-2) + 3.125vw), var(--ew-space-5));
	--ew-feature-card-padding: clamp(var(--ew-space-4), calc(var(--ew-space-2) + 3.125vw), var(--ew-space-5));
	--ew-feature-card-radius: var(--ew-card-radius);
	/* How many masonry columns the cards flow in. filters.js reads this
	   token, so the breakpoints stay here and not in the script; the steps
	   match the grid's own (one column, two from 768px, three from 1024px). */
	--ew-masonry-columns: 1;
	--ew-feature-card-transition:
		background-color var(--ew-motion-duration-fast) var(--ew-motion-ease),
		border-color var(--ew-motion-duration-fast) var(--ew-motion-ease),
		box-shadow var(--ew-motion-duration-fast) var(--ew-motion-ease);
	--ew-feature-card-bg-hover: color-mix(in srgb, var(--ew-color-surface-raised) 60%, var(--ew-color-surface));
	--ew-feature-card-border-hover: color-mix(in srgb, var(--ew-color-text-primary) 40%, var(--ew-color-border));
}
/* Light scheme: warm paper, dark text. Body weight drops to 400. */
[data-scheme="light"] {
	--ew-color-bg: var(--ew-color-paper-0);
	--ew-color-bg-raised: var(--ew-color-paper-50);
	--ew-color-surface: var(--ew-color-paper-50);
	--ew-color-surface-raised: var(--ew-color-white);
	--ew-color-text-primary: var(--ew-color-ink-900);
	--ew-color-text-secondary: #4a443c;
	--ew-color-text-muted: var(--ew-color-ink-500);
	--ew-color-brass: var(--ew-color-brass-700);
	--ew-color-border: rgba(33, 31, 27, 0.14);
	--ew-color-focus: var(--ew-color-brass-700);
	--ew-color-error: var(--ew-color-clay-700);
	--ew-weight-body: var(--ew-weight-regular);
	--ew-weight-lead: var(--ew-weight-light);
	--ew-button-primary-bg: var(--ew-color-ink-900);
	--ew-button-primary-fg: var(--ew-color-paper-50);
	--ew-button-primary-bg-hover: var(--ew-color-ink-700);
	--ew-feature-card-bg-hover: color-mix(in srgb, var(--ew-color-surface-raised) 60%, var(--ew-color-surface));
	--ew-feature-card-border-hover: color-mix(in srgb, var(--ew-color-text-primary) 40%, var(--ew-color-border));
}
/* Dark scheme (explicit): same as the root defaults, so nested light > dark works. */
[data-scheme="dark"] {
	--ew-color-bg: var(--ew-color-ink-900);
	--ew-color-bg-raised: var(--ew-color-ink-800);
	--ew-color-surface: var(--ew-color-ink-800);
	--ew-color-surface-raised: var(--ew-color-ink-700);
	--ew-color-text-primary: var(--ew-color-paper-0);
	--ew-color-text-secondary: #ddd5c7;
	--ew-color-text-muted: #b8ae9b;
	--ew-color-brass: var(--ew-color-brass-500);
	--ew-color-border: rgba(244, 239, 229, 0.16);
	--ew-color-focus: var(--ew-color-brass-500);
	--ew-color-error: var(--ew-color-clay-300);
	--ew-weight-body: var(--ew-weight-medium);
	--ew-weight-lead: var(--ew-weight-regular);
	--ew-button-primary-bg: var(--ew-color-paper-50);
	--ew-button-primary-fg: var(--ew-color-ink-900);
	--ew-button-primary-bg-hover: var(--ew-color-white);
	--ew-feature-card-bg-hover: color-mix(in srgb, var(--ew-color-surface-raised) 60%, var(--ew-color-surface));
	--ew-feature-card-border-hover: color-mix(in srgb, var(--ew-color-text-primary) 40%, var(--ew-color-border));
}
/* Gutter steps: 1.25rem on a phone, 2rem from 768px, 3rem from 1440px. */
@media (min-width: 48rem) {
	:root {
		--ew-gutter: 2rem;
		--ew-masonry-columns: 2;
	}
}
/* Three masonry columns from 1024px, where the grid also goes to three. */
@media (min-width: 64rem) {
	:root {
		--ew-masonry-columns: 3;
	}
}
@media (min-width: 90rem) {
	:root {
		--ew-gutter: 3rem;
	}
}
/* Below --ew-bp-nav (56rem): no top bar, lower header, tighter hero radius. */
@media (max-width: 55.99rem) {
	:root {
		--ew-topbar-h: 0rem;
		--ew-header-h: 4rem;
		--ew-hero-radius: 0.875rem;
		/* A smaller inset keeps the hero text on the same line as the logo and the sections. */
		--ew-hero-inset: 0.75rem;
		/* Narrower slide marks: five dots fit on a 16:9 photo at 320px. */
		--ew-hero-dot-w: 1.5rem;
		--ew-hero-dot-w-active: 2.25rem;
	}
}
/* Phones: narrower year columns in the rates tables leave the period its room. */
@media (max-width: 47.99rem) {
	:root {
		--ew-rates-col: 4.5rem;
	}
}
/* Browsers without svh fall back to vh for the hero height. */
@supports not (height: 100svh) {
	:root {
		--ew-hero-available: calc(100vh - var(--ew-topbar-h) - var(--ew-header-h) - 2 * var(--ew-hero-inset) - var(--ew-admin-bar-h));
		--ew-hero-page-h: clamp(22rem, 60vh, var(--ew-hero-available));
	}
}
@media (prefers-reduced-motion: reduce) {
	:root {
		--ew-motion-duration-fast: 0ms;
		--ew-motion-duration-normal: 0ms;
		--ew-motion-duration-slow: 0ms;
		--ew-reveal-distance: 0rem;
		--ew-reveal-stagger: 0ms;
		--ew-hero-fade: 0ms;
		--ew-hero-progress: 0ms;
	}
}