/* Components. Every value is a token from tokens.css; layout primitives come
   from layout.css. Section-specific classes only hold what is unique to that
   section (an overlap, a timeline line, a marquee track). */
/* ------------------------------------------------------------------ */
/* Typographic roles                                                   */
/* ------------------------------------------------------------------ */
/* Eyebrow: Fraunces italic, sentence case, brass. */
.ew-eyebrow {
	margin: 0;
	color: var(--ew-color-brass);
	font-family: var(--ew-font-heading);
	font-size: var(--ew-text-eyebrow);
	font-style: italic;
	font-weight: var(--ew-weight-medium);
	letter-spacing: var(--ew-tracking-heading);
	line-height: var(--ew-leading-subheading);
}
/* Lead: Quicksand 300 on paper, 400 on ink, never below 1.375rem. */
.ew-lead {
	max-width: var(--ew-measure-lead);
	color: var(--ew-color-text-primary);
	font-size: var(--ew-text-lead);
	font-weight: var(--ew-weight-lead);
	line-height: var(--ew-leading-lead);
	text-wrap: pretty;
}
/* Label: buttons, navigation, top bar, facilities, form labels. */
/* Meta: small secondary text, never below 1rem. */
.ew-meta {
	color: var(--ew-color-text-muted);
	font-size: var(--ew-text-meta);
	font-weight: var(--ew-weight-medium);
	line-height: var(--ew-leading-ui);
}
/* Accent: signature, quotes. */
.ew-accent {
	font-family: var(--ew-font-heading);
	font-style: italic;
	font-weight: var(--ew-weight-regular);
	line-height: var(--ew-leading-subheading);
}
/* Numerals: stats, rates, dates, index numbers. */
.ew-num {
	font-family: var(--ew-font-numeric);
	font-weight: var(--ew-weight-medium);
	font-variant-numeric: var(--ew-numeric);
	letter-spacing: var(--ew-tracking-heading);
}
/* Prose: running text within the measure, paragraph rhythm --ew-space-3. */
.ew-prose {
	max-width: var(--ew-width-measure);
	color: var(--ew-color-text-secondary);
	font-size: var(--ew-text-body);
	font-weight: var(--ew-weight-body);
	line-height: var(--ew-leading-body);
}
.ew-prose > * + * {
	margin-top: var(--ew-space-3);
}
.ew-prose > :is(h2, h3) + * {
	margin-top: var(--ew-space-2);
}
.ew-prose :is(h2, h3, strong) {
	color: var(--ew-color-text-primary);
}
.ew-prose a {
	color: var(--ew-color-text-primary);
	text-decoration-color: var(--ew-color-brass);
	text-underline-offset: 0.18em;
}
.ew-prose a:hover {
	color: var(--ew-color-brass);
}
.ew-prose :is(ul, ol) {
	padding-inline-start: var(--ew-space-4);
}
/* ------------------------------------------------------------------ */
/* Actions: one primary, one secondary, one text link                  */
/* ------------------------------------------------------------------ */
.ew-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ew-space-1);
	min-height: var(--ew-tap);
	padding: var(--ew-button-padding-y) var(--ew-button-padding-x);
	border: var(--ew-border-width) solid transparent;
	border-radius: var(--ew-button-radius);
	background: transparent;
	color: var(--ew-color-text-primary);
	font-family: var(--ew-font-body);
	font-size: var(--ew-text-label);
	font-weight: var(--ew-weight-ui);
	letter-spacing: var(--ew-tracking-ui);
	line-height: var(--ew-leading-ui);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--ew-motion-duration-fast) var(--ew-motion-ease),
		color var(--ew-motion-duration-fast) var(--ew-motion-ease),
		border-color var(--ew-motion-duration-fast) var(--ew-motion-ease);
}
.ew-button--primary {
	background: var(--ew-button-primary-bg);
	border-color: var(--ew-button-primary-bg);
	color: var(--ew-button-primary-fg);
}
.ew-button--primary:hover {
	background: var(--ew-button-primary-bg-hover);
	border-color: var(--ew-button-primary-bg-hover);
}
.ew-button--secondary {
	border-color: currentColor;
}
.ew-button--secondary:hover {
	background: color-mix(in srgb, currentColor 8%, transparent);
}
.ew-button:disabled,
.ew-button[aria-disabled="true"] {
	cursor: default;
	opacity: 0.55;
}
/* Text link: underlined in brass, tap-sized when it stands alone. */
.ew-link {
	display: inline-flex;
	align-items: center;
	gap: var(--ew-space-1);
	min-height: var(--ew-tap);
	color: var(--ew-color-text-primary);
	font-family: var(--ew-font-body);
	font-size: var(--ew-text-label);
	font-weight: var(--ew-weight-ui);
	letter-spacing: var(--ew-tracking-ui);
	text-decoration: underline;
	text-decoration-color: var(--ew-color-brass);
	text-decoration-thickness: var(--ew-line);
	text-underline-offset: 0.3em;
	transition: color var(--ew-motion-duration-fast) var(--ew-motion-ease);
}
.ew-link:hover {
	color: var(--ew-color-brass);
}
.ew-link--inline {
	display: inline;
	min-height: 0;
}
/* ------------------------------------------------------------------ */
/* Section head: eyebrow + h2 left, lead + actions right                */
/* ------------------------------------------------------------------ */
.ew-section-head {
	display: grid;
	gap: var(--ew-space-4);
}
.ew-section-head__main {
	display: flex;
	flex-direction: column;
	gap: var(--ew-space-2);
}
.ew-section-head__aside {
	display: flex;
	flex-direction: column;
	gap: var(--ew-space-5);
}
.ew-section-head--center {
	justify-items: center;
	text-align: center;
}
.ew-section-head--center .ew-section-head__main,
.ew-section-head--center .ew-section-head__aside {
	align-items: center;
}
/* ------------------------------------------------------------------ */
/* Media frame                                                         */
/* ------------------------------------------------------------------ */
.ew-media {
	position: relative;
	overflow: hidden;
	margin: 0;
	border-radius: var(--ew-card-radius);
	background: color-mix(in srgb, var(--ew-color-text-primary) 8%, var(--ew-color-bg));
}
.ew-media img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--ew-media-focus, 50% 50%);
}
.ew-media--4-5 {
	aspect-ratio: 4 / 5;
}
.ew-media--4-3 {
	aspect-ratio: 4 / 3;
}
.ew-media--3-2 {
	aspect-ratio: 3 / 2;
}
.ew-media--16-9 {
	aspect-ratio: 16 / 9;
}
.ew-media--1-1 {
	aspect-ratio: 1 / 1;
}
.ew-media--lg {
	border-radius: var(--ew-radius-lg);
}
/* In a stretched grid the frame takes the row height, top and bottom aligned. */
@media (min-width: 64rem) {
	.ew-grid--stretch {
		align-items: stretch;
	}

	.ew-grid--stretch > .ew-media--fill {
		height: 100%;
		aspect-ratio: auto;
	}
}
/* ------------------------------------------------------------------ */
/* Card                                                                */
/* ------------------------------------------------------------------ */
.ew-card {
	display: flex;
	flex-direction: column;
	gap: var(--ew-space-3);
	padding: var(--ew-card-padding);
	background: var(--ew-color-surface);
	border: var(--ew-border-width) solid var(--ew-color-border);
	border-radius: var(--ew-card-radius);
	color: var(--ew-color-text-primary);
}
/* ------------------------------------------------------------------ */
/* Numbered lists and index markers                                    */
/* ------------------------------------------------------------------ */
.ew-list-numbered {
	counter-reset: ew-item;
	list-style: none;
}
.ew-list-numbered > li {
	counter-increment: ew-item;
}
.ew-index {
	display: inline-flex;
	flex: none;
	align-items: baseline;
	color: var(--ew-color-brass);
	font-family: var(--ew-font-numeric);
	font-size: var(--ew-text-index);
	font-weight: var(--ew-weight-medium);
	font-variant-numeric: var(--ew-numeric);
	line-height: 1;
}
.ew-index::before {
	content: counter(ew-item);
}
.ew-index--circle {
	align-items: center;
	justify-content: center;
	width: var(--ew-index-size);
	height: var(--ew-index-size);
	border: var(--ew-border-width) solid var(--ew-color-brass);
	border-radius: 50%;
}
/* Feature item: index on the title baseline, text within the card measure. */
.ew-feature {
	display: flex;
	flex-direction: column;
	gap: var(--ew-space-2);
	padding-top: var(--ew-space-3);
	border-top: var(--ew-border-width) solid var(--ew-color-border);
}
.ew-feature__title {
	display: flex;
	align-items: baseline;
	gap: var(--ew-space-2);
}
/* Definition list: label / value pairs. */
.ew-list-defs {
	display: grid;
	gap: var(--ew-gap-tight);
}
.ew-list-defs > div {
	display: flex;
	flex-direction: column;
	gap: var(--ew-space-1);
	padding-top: var(--ew-space-3);
	border-top: var(--ew-border-width) solid var(--ew-color-border);
}
.ew-list-defs dt {
	font-family: var(--ew-font-heading);
	font-size: var(--ew-text-heading-3);
	font-weight: var(--ew-weight-subheading);
	line-height: var(--ew-leading-subheading);
}
.ew-list-defs dd {
	max-width: var(--ew-measure-card);
	color: var(--ew-color-text-secondary);
}
/* Rows: label and value on one line (rates, booking summary). */
.ew-list-defs--rows > div {
	flex-direction: row;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ew-space-3);
}
.ew-label,
.ew-list-defs--rows dt {
	font-family: var(--ew-font-body);
	font-size: var(--ew-text-label);
	font-weight: var(--ew-weight-ui);
	letter-spacing: var(--ew-tracking-ui);
	line-height: var(--ew-leading-ui);
}
.ew-list-defs--rows dd {
	max-width: none;
	flex: 0 1 auto;
	min-width: 0;
	color: var(--ew-color-text-primary);
	font-family: var(--ew-font-numeric);
	font-weight: var(--ew-weight-medium);
	font-variant-numeric: var(--ew-numeric);
	text-align: end;
}
.ew-list-defs--rows dd.is-empty {
	color: var(--ew-color-text-muted);
	font-family: var(--ew-font-body);
	font-weight: var(--ew-weight-body);
}
.ew-list-defs--plain > div {
	padding-top: 0;
	border-top: 0;
}
/* ------------------------------------------------------------------ */
/* Top bar                                                              */
/* ------------------------------------------------------------------ */
/* The masthead is a grouping element only: its children lay out as children
   of the body, so the sticky header sticks to the page, not to the masthead. */
.ew-masthead {
	display: contents;
}
.ew-topbar {
	background: var(--ew-color-ink-900);
	color: var(--ew-color-paper-0);
	border-bottom: var(--ew-border-width) solid var(--ew-color-border);
}
.ew-topbar__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ew-space-4);
	min-height: var(--ew-topbar-h);
	height: var(--ew-topbar-h);
	font-family: var(--ew-font-body);
	font-size: var(--ew-text-label);
	font-weight: var(--ew-weight-ui);
	letter-spacing: var(--ew-tracking-ui);
	line-height: var(--ew-leading-ui);
	white-space: nowrap;
}
.ew-topbar__phone {
	display: inline-flex;
	align-items: center;
	gap: var(--ew-space-1);
	min-height: var(--ew-topbar-h);
	text-decoration: none;
}
.ew-topbar__phone:hover {
	color: var(--ew-color-brass);
}
.ew-topbar__icon {
	width: var(--ew-space-3);
	height: var(--ew-space-3);
	flex: none;
}
.ew-topbar__note {
	margin: 0;
	color: var(--ew-color-text-secondary);
}
.ew-topbar__end {
	display: flex;
	align-items: center;
	gap: var(--ew-space-4);
	margin-left: auto;
}
/* Sentinel for the scrolled-state shadow (IntersectionObserver, no scroll listener). */
.ew-header-sentinel {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	visibility: hidden;
}
/* ------------------------------------------------------------------ */
/* Header: always solid on ink, sticky, fixed height                   */
/* ------------------------------------------------------------------ */
.ew-header {
	position: sticky;
	top: var(--ew-admin-bar-h);
	z-index: var(--ew-z-header);
	background: var(--ew-color-ink-900);
	color: var(--ew-color-paper-0);
	border-bottom: var(--ew-border-width) solid var(--ew-color-border);
	transition: box-shadow var(--ew-motion-duration-normal) var(--ew-motion-ease);
}
.ew-header.is-scrolled {
	box-shadow: var(--ew-shadow-card);
}
/* Brand and tools get equal flexible columns, so the menu column sits on the
   centre line of the container whatever the logo or the tools measure. The
   max-content floor keeps either side from being squeezed on narrow desktops. */
.ew-header__bar {
	display: grid;
	grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
	align-items: center;
	gap: var(--ew-space-4);
	height: var(--ew-header-h);
}
.ew-header__brand,
.custom-logo-link {
	display: inline-flex;
	justify-self: start;
	align-items: center;
	min-height: var(--ew-tap);
	color: inherit;
	font-family: var(--ew-font-heading);
	font-size: var(--ew-text-heading-3);
	font-weight: var(--ew-weight-medium);
	line-height: 1;
	text-decoration: none;
}
.custom-logo {
	width: auto;
	height: var(--ew-logo-h);
	max-height: var(--ew-logo-h);
}
.ew-nav--desktop {
	justify-self: center;
	white-space: nowrap;
}
.ew-nav__list {
	display: flex;
	align-items: center;
	gap: var(--ew-nav-gap);
	list-style: none;
}
.ew-nav__item {
	display: flex;
	align-items: center;
}
.ew-nav--desktop .ew-nav__item > a {
	display: inline-flex;
	align-items: center;
	min-height: var(--ew-tap);
	font-family: var(--ew-font-body);
	font-size: var(--ew-text-label);
	font-weight: var(--ew-weight-ui);
	letter-spacing: var(--ew-tracking-ui);
	line-height: var(--ew-leading-ui);
	text-decoration: underline transparent;
	text-decoration-thickness: var(--ew-line);
	text-underline-offset: 0.45em;
	transition: text-decoration-color var(--ew-motion-duration-fast) var(--ew-motion-ease);
}
.ew-nav--desktop .ew-nav__item > a:hover,
.ew-nav--desktop .ew-nav__item.is-current > a,
.ew-nav--desktop .ew-nav__item > a[aria-current] {
	text-decoration-color: var(--ew-color-brass);
}
.ew-header__actions {
	display: flex;
	justify-self: end;
	align-items: center;
	justify-content: flex-end;
	gap: var(--ew-space-3);
}
.ew-header__tools {
	display: inline-flex;
	align-items: center;
	gap: var(--ew-space-4);
}
/* Language switcher: Quicksand 600, current language underlined in brass.
   --inline lists the codes with flags and separators (footer, mobile panel).
   --menu is a native <details> disclosure in the top bar: the current
   language is the trigger, the list drops down below it on the dropdown
   layer. navigation.js closes it on Escape, outside clicks and focus loss. */
.ew-lang {
	display: flex;
	align-items: center;
	gap: var(--ew-space-1);
	font-family: var(--ew-font-body);
	font-size: var(--ew-text-label);
	font-weight: var(--ew-weight-ui);
	letter-spacing: var(--ew-tracking-ui);
	line-height: var(--ew-leading-ui);
}
.ew-flag {
	flex: none;
	width: 1.25rem;
	height: 0.8333rem;
	border-radius: var(--ew-line);
	box-shadow: 0 0 0 var(--ew-border-width) var(--ew-color-border);
}
.ew-lang--inline a,
.ew-lang--inline .ew-lang__current {
	display: inline-flex;
	align-items: center;
	gap: var(--ew-space-1);
	min-width: var(--ew-space-5);
	min-height: var(--ew-tap);
	color: var(--ew-color-text-muted);
	text-decoration: none;
}
.ew-lang--inline .ew-lang__current {
	color: var(--ew-color-text-primary);
}
.ew-lang--inline .ew-lang__current > span,
.ew-lang__option.is-current .ew-lang__code {
	text-decoration: underline;
	text-decoration-color: var(--ew-color-brass);
	text-decoration-thickness: var(--ew-line);
	text-underline-offset: 0.45em;
}
.ew-lang--inline a:hover {
	color: var(--ew-color-text-primary);
}
.ew-lang__summary {
	display: inline-flex;
	align-items: center;
	gap: var(--ew-space-1);
	min-height: var(--ew-topbar-h);
	padding: 0;
	list-style: none;
	color: var(--ew-color-text-primary);
	cursor: pointer;
	user-select: none;
}
.ew-lang__summary::-webkit-details-marker {
	display: none;
}
.ew-lang__summary:hover {
	color: var(--ew-color-brass);
}
.ew-lang__caret {
	width: var(--ew-space-2);
	height: var(--ew-space-2);
	flex: none;
	transition: transform var(--ew-motion-duration-fast) var(--ew-motion-ease);
}
.ew-lang__details[open] .ew-lang__caret {
	transform: rotate(180deg);
}
.ew-lang__menu {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: var(--ew-z-dropdown);
	min-width: 11rem;
	margin: 0;
	padding: var(--ew-space-1);
	list-style: none;
	background: var(--ew-color-surface);
	color: var(--ew-color-text-primary);
	border: var(--ew-border-width) solid var(--ew-color-border);
	border-radius: var(--ew-radius-md);
	box-shadow: var(--ew-shadow-raised);
}
.ew-lang__option {
	display: flex;
	align-items: center;
	gap: var(--ew-space-2);
	min-height: var(--ew-tap);
	padding: 0 var(--ew-space-2);
	border-radius: var(--ew-radius-sm);
	color: var(--ew-color-text-primary);
	text-decoration: none;
}
.ew-lang__option .ew-lang__code {
	min-width: 1.75em;
}
.ew-lang__sep,
.ew-lang__name {
	color: var(--ew-color-text-muted);
}
a.ew-lang__option:hover,
a.ew-lang__option:focus-visible {
	background: var(--ew-color-surface-raised);
}
a.ew-lang__option:hover .ew-lang__name {
	color: var(--ew-color-text-primary);
}
.ew-lang__option.is-current {
	cursor: default;
}
/* Flags-only switcher in the sticky header: shown below --ew-bp-nav next to
   the hamburger, always visible while the menu is closed. One tap-sized
   target per language; the current language sits at full opacity with a
   faint white halo of 4px around the flag itself (8 nov), so it reads as
   active at a glance without a block behind it. */
.ew-lang--flags {
	display: none;
	gap: 0;
}
.ew-lang__flag {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--ew-tap);
	height: var(--ew-tap);
	color: inherit;
	opacity: 0.6;
	text-decoration: none;
	transition: opacity var(--ew-motion-duration-fast) var(--ew-motion-ease);
}
.ew-lang__flag.is-current,
.ew-lang__flag:hover,
.ew-lang__flag:focus-visible {
	opacity: 1;
}
.ew-lang__flag.is-current .ew-flag {
	box-shadow:
		0 0 0 var(--ew-border-width) var(--ew-color-border),
		0 0 0 calc(2 * var(--ew-line)) color-mix(in srgb, var(--ew-color-white) 18%, transparent);
}
/* Hamburger */
.ew-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: var(--ew-tap);
	height: var(--ew-tap);
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	flex: none;
}
.ew-nav-toggle__box {
	position: relative;
	display: block;
	width: var(--ew-space-4);
	height: var(--ew-space-2);
}
.ew-nav-toggle__line {
	position: absolute;
	left: 0;
	display: block;
	width: 100%;
	height: var(--ew-line);
	background: currentColor;
	border-radius: 1px;
	transform-origin: center;
	transition:
		transform var(--ew-motion-duration-normal) var(--ew-motion-ease),
		top var(--ew-motion-duration-normal) var(--ew-motion-ease);
}
.ew-nav-toggle__line:first-child {
	top: 0;
}
.ew-nav-toggle__line:last-child {
	top: calc(var(--ew-space-2) - var(--ew-line));
}
.ew-nav-toggle[aria-expanded="true"] .ew-nav-toggle__line:first-child {
	top: calc(var(--ew-space-1) - 1px);
	transform: rotate(45deg);
}
.ew-nav-toggle[aria-expanded="true"] .ew-nav-toggle__line:last-child {
	top: calc(var(--ew-space-1) - 1px);
	transform: rotate(-45deg);
}
/* Mobile panel: full height under the header, over the page, never pushes it. */
.ew-nav-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: calc(100dvh - var(--ew-header-h) - var(--ew-admin-bar-h));
	overflow-y: auto;
	background: var(--ew-color-ink-900);
	color: var(--ew-color-paper-0);
	opacity: 0;
	visibility: hidden;
	transform: translateY(calc(-1 * var(--ew-space-1)));
	pointer-events: none;
	transition:
		opacity var(--ew-motion-duration-normal) var(--ew-motion-ease),
		transform var(--ew-motion-duration-normal) var(--ew-motion-ease),
		visibility 0s linear var(--ew-motion-duration-normal);
}
.ew-nav-panel.is-open {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
	transition-delay: 0s;
}
.ew-nav-panel__inner {
	display: flex;
	flex-direction: column;
	gap: var(--ew-space-5);
	padding-block: var(--ew-space-5) var(--ew-space-6);
}
.ew-nav--mobile .ew-nav__list {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}
.ew-nav--mobile .ew-nav__item {
	width: 100%;
	border-bottom: var(--ew-border-width) solid var(--ew-color-border);
}
.ew-nav--mobile .ew-nav__item > a {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: var(--ew-tap);
	padding-block: var(--ew-space-2);
	font-family: var(--ew-font-heading);
	font-size: var(--ew-text-heading-2);
	font-weight: var(--ew-weight-medium);
	line-height: var(--ew-leading-subheading);
	text-decoration: none;
}
.ew-nav--mobile .ew-nav__item.is-current > a,
.ew-nav--mobile .ew-nav__item > a[aria-current] {
	color: var(--ew-color-brass);
}
.ew-nav-panel__phone {
	display: inline-flex;
	align-items: center;
	gap: var(--ew-space-2);
	min-height: var(--ew-tap);
	color: inherit;
	font-family: var(--ew-font-body);
	font-size: var(--ew-text-label);
	font-weight: var(--ew-weight-ui);
	letter-spacing: var(--ew-tracking-ui);
	text-decoration: none;
}
/* Below --ew-bp-nav (56rem): hamburger, no desktop tools, no top bar. */
/* The admin bar stops being fixed below 600px. */
/* ------------------------------------------------------------------ */
/* Hero: one card, three variants                                      */
/* ------------------------------------------------------------------ */
.ew-hero {
	position: relative;
	padding: var(--ew-hero-inset);
	background: var(--ew-color-paper-0);
	color: var(--ew-color-ink-900);
}
.ew-hero__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: clip;
	/* Horizontal swipes change the slide (components.js); vertical panning and pinch zoom stay native. */
	touch-action: pan-y pinch-zoom;
	border-radius: var(--ew-hero-radius);
	background: var(--ew-color-hero-bg, var(--ew-color-ink-800));
	color: var(--ew-color-on-photo);
}
.ew-hero__card :focus-visible {
	outline-offset: calc(-2 * var(--ew-line));
}
.ew-hero__media,
.ew-hero__shade {
	position: absolute;
	inset: 0;
}
.ew-hero__media {
	overflow: hidden;
}
.ew-hero__media img,
.ew-hero__slide img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--ew-media-focus, 50% 50%);
}
/* Stronger scrim left and bottom: title, lede and bar reach 4.5:1 on every photo. */
.ew-hero__shade {
	background:
		linear-gradient(180deg, var(--ew-color-overlay-soft) 0%, var(--ew-color-overlay-mid) 55%, var(--ew-color-overlay-strong) 100%),
		linear-gradient(90deg, var(--ew-color-overlay-strong) 0%, var(--ew-color-overlay-mid) 45%, transparent 80%);
}
.ew-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--ew-space-4);
	height: 100%;
	/* The capped container loses the card inset on both sides so its centre
	   stays on the page container. The side padding is a fixed 14px on every
	   width (--ew-hero-pad), the same on every hero, page and language. */
	max-width: calc(var(--ew-width-wide) + 2 * var(--ew-gutter) - 2 * var(--ew-hero-inset));
	padding-inline: var(--ew-hero-pad);
	padding-block: var(--ew-space-6) var(--ew-space-5);
}
.ew-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: var(--ew-measure-lead);
}
/* The hero keeps the section-head rhythm: eyebrow, title, lede, actions. */
.ew-hero__content > * + * {
	margin-top: var(--ew-space-4);
}
.ew-hero__content > .ew-eyebrow + .ew-hero__title {
	margin-top: var(--ew-space-2);
}
.ew-prose > * + :is(h2, h3),
.ew-hero__content > .ew-actions {
	margin-top: var(--ew-space-5);
}
.ew-hero__title {
	font-size: var(--ew-text-hero);
	line-height: var(--ew-leading-heading);
	color: inherit;
}
.ew-hero__title:focus {
	outline: none;
}
.ew-hero__lede {
	max-width: var(--ew-measure-lead);
	color: var(--ew-color-on-photo-soft);
	font-size: var(--ew-text-lead);
	font-weight: var(--ew-weight-regular);
	line-height: var(--ew-leading-lead);
}
.ew-hero .ew-eyebrow {
	color: var(--ew-color-brass-500);
}
/* Text on a photo: paper primary button, on-photo crumbs. The home content
   block is a sibling of the card, so it carries the same overrides above
   --ew-bp-nav (see the desktop block below). */
.ew-hero__card .ew-button--primary {
	background: var(--ew-color-paper-50);
	border-color: var(--ew-color-paper-50);
	color: var(--ew-color-ink-900);
}
.ew-hero__card .ew-button--primary:hover {
	background: var(--ew-color-white);
	border-color: var(--ew-color-white);
}
.ew-hero__card .ew-crumbs,
.ew-hero__card .ew-crumbs a {
	color: var(--ew-color-on-photo-soft);
}
/* Home: full available height, slideshow, booking bar in the same cell. */
.ew-hero--home .ew-hero__card {
	height: var(--ew-hero-available);
	min-height: var(--ew-hero-min);
}
.ew-hero--home .ew-hero__title {
	max-width: var(--ew-measure-lead);
}
.ew-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--ew-hero-fade) var(--ew-motion-ease);
}
.ew-hero__slide.is-active {
	opacity: 1;
}
/* Slide marks: absolute inside the card, which is the media container on every
   viewport (the media fills the card). Every button keeps one fixed, tap-sized
   hit area whose content box equals the active bar length. Inside it two layers
   share one grid cell: ::before is the track (grows from --ew-hero-dot-w to
   --ew-hero-dot-w-active when active) and ::after is the progress fill that
   runs across the active track in --ew-hero-progress, the autoplay interval
   (set inline on .ew-hero__dots from the slideshow interval). The fill layer
   only exists on the active dot, so a class swap restarts it. */
.ew-hero__dots {
	position: absolute;
	left: 50%;
	bottom: var(--ew-space-2);
	z-index: 2;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: var(--ew-space-1);
	margin: 0;
	padding: 0;
}
.ew-hero__dot {
	position: relative;
	display: grid;
	align-items: center;
	box-sizing: border-box;
	width: var(--ew-hero-dot-hit);
	height: var(--ew-tap);
	margin: 0;
	padding: 0 calc((var(--ew-hero-dot-hit) - var(--ew-hero-dot-w-active)) / 2);
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	appearance: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.ew-hero__dot::before,
.ew-hero__dot::after {
	grid-area: 1 / 1;
	display: block;
	height: var(--ew-hero-dot-h);
	border-radius: var(--ew-hero-dot-h);
}
.ew-hero__dot::before {
	content: "";
	justify-self: center;
	width: var(--ew-hero-dot-w);
	background: var(--ew-color-paper-50);
	opacity: 0.45;
	transition:
		opacity var(--ew-motion-duration-normal) var(--ew-motion-ease),
		width var(--ew-motion-duration-normal) var(--ew-motion-ease),
		background-color var(--ew-motion-duration-normal) var(--ew-motion-ease);
}
.ew-hero__dot.is-active::before {
	width: var(--ew-hero-dot-w-active);
	opacity: 0.6;
}
.ew-hero__dot.is-active::after {
	content: "";
	justify-self: start;
	width: 0;
	background: var(--ew-color-white);
	animation: ew-hero-progress var(--ew-hero-progress) linear forwards;
}
.ew-hero__dots[data-paused] .ew-hero__dot::after {
	animation-play-state: paused;
}
@keyframes ew-hero-progress {
	from {
		width: 0;
	}

	to {
		width: 100%;
	}
}
.ew-hero__dot:hover::before {
	opacity: 0.75;
}
.ew-hero__dot.is-active:hover::before {
	opacity: 0.6;
}
.ew-hero__dot:focus-visible {
	outline-color: var(--ew-color-paper-50);
}
/* Desktop (above --ew-bp-nav): card, content block and bar share one grid
   cell. The content overlays the card in on-photo colours; the bar sits on
   a doubled bottom inset and the content keeps that space free of text; the
   dots sit centred in the band under the bar. The content block is
   transparent to the pointer so the dots under it stay clickable; only the
   content itself takes clicks. */
@media (min-width: 56rem) {
	.ew-hero--home {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}

	.ew-hero--home .ew-hero__card,
	.ew-hero--home .ew-hero__inner,
	.ew-hero--home .ew-hero__booking {
		grid-area: 1 / 1;
	}

	.ew-hero--home .ew-hero__inner {
		align-self: stretch;
		justify-self: center;
		width: 100%;
		pointer-events: none;
		color: var(--ew-color-on-photo);
		padding-bottom: calc(var(--ew-hero-booking-h) + 3 * var(--ew-hero-inset));
	}

	.ew-hero--home .ew-hero__content {
		pointer-events: auto;
	}

	.ew-hero--home .ew-hero__inner :focus-visible {
		outline-offset: calc(-2 * var(--ew-line));
	}

	.ew-hero--home .ew-hero__inner .ew-button--primary {
		background: var(--ew-color-paper-50);
		border-color: var(--ew-color-paper-50);
		color: var(--ew-color-ink-900);
	}

	.ew-hero--home .ew-hero__inner .ew-button--primary:hover {
		background: var(--ew-color-white);
		border-color: var(--ew-color-white);
	}

	.ew-hero--home .ew-hero__inner .ew-button--secondary,
	.ew-hero--home .ew-hero__inner .ew-link {
		color: var(--ew-color-on-photo);
	}

	.ew-hero--home .ew-hero__booking {
		z-index: 2;
		align-self: end;
		padding-bottom: calc(2 * var(--ew-hero-inset));
		/* The bar's bottom inset lies over the dots: only the bar itself takes clicks. */
		pointer-events: none;
	}

	.ew-hero--home .ew-hero__booking > .ew-container {
		pointer-events: auto;
	}

	.ew-hero--home .ew-hero__dots {
		bottom: calc((2 * var(--ew-hero-inset) - var(--ew-tap)) / 2);
	}
}
/* Below --ew-bp-nav the home hero stacks: the card is a 16:9 photo (no fixed
   height, no scrim), the content follows it as an ordinary text block in the
   section's scheme (ink on paper, dark scheme through data-scheme), then the
   bar. The dots keep their centred place along the photo's bottom edge. */
@media (max-width: 55.99rem) {
	.ew-topbar,
	.ew-nav--desktop,
	.ew-header__tools {
		display: none;
	}
	.ew-nav-toggle {
		display: inline-flex;
	}
	.ew-lang--flags {
		display: flex;
	}
	.ew-header__bar {
		grid-template-columns: minmax(0, 1fr) auto;
	}
	.ew-hero--home .ew-hero__card {
		width: 100%;
		height: auto;
		min-height: 0;
		aspect-ratio: 16 / 9;
	}
	.ew-hero--home .ew-hero__shade {
		display: none;
	}
	.ew-hero--home .ew-hero__inner {
		height: auto;
		background: var(--ew-color-bg);
		color: var(--ew-color-text-primary);
		padding-block: var(--ew-section-compact);
	}
	.ew-hero--home .ew-hero__lede {
		color: var(--ew-color-text-secondary);
		font-weight: var(--ew-weight-lead);
	}
	.ew-hero--home .ew-eyebrow {
		color: var(--ew-color-brass);
	}
	.ew-hero--home .ew-hero__booking {
		padding-top: 0;
	}
	/* The bar is as wide as the photo card above it: no container gutter here. */
	.ew-hero--home .ew-hero__booking > .ew-container {
		padding-inline: 0;
	}
}
/* Phones: a portrait crop needs its own focus point when one is set. */
/* Low desktop viewports: drop the lede, then let the card grow with its
   content. Below --ew-bp-nav the card is 16:9, so these never apply there. */
@media (max-height: 47.5rem) and (min-width: 56rem) {
	.ew-hero--home .ew-hero__lede {
		display: none;
	}
}
@media (max-height: 37.5rem) and (min-width: 56rem) {
	.ew-hero--home .ew-hero__card {
		height: auto;
		min-height: var(--ew-hero-available);
	}
}
/* Page: featured image, 60svh card. */
.ew-hero--page .ew-hero__card {
	height: var(--ew-hero-page-h);
	min-height: var(--ew-hero-min);
}
/* Compact: no photo, warm ink tint, height from content. */
.ew-hero--compact .ew-hero__card {
	--ew-color-hero-bg: var(--ew-hero-compact-bg);
}
.ew-hero--compact .ew-hero__inner {
	padding-block: var(--ew-section-compact);
}
/* ------------------------------------------------------------------ */
/* Breadcrumbs                                                         */
/* ------------------------------------------------------------------ */
.ew-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ew-space-1);
	list-style: none;
	color: var(--ew-color-text-muted);
	font-family: var(--ew-font-body);
	font-size: var(--ew-text-meta);
	font-weight: var(--ew-weight-medium);
	line-height: var(--ew-leading-ui);
}
.ew-crumbs li {
	display: inline-flex;
	align-items: center;
	gap: var(--ew-space-1);
}
.ew-crumbs li + li::before {
	content: "/";
	opacity: 0.6;
}
.ew-crumbs a {
	display: inline-flex;
	align-items: center;
	min-height: var(--ew-tap);
	text-decoration: none;
}
.ew-crumbs a:hover {
	text-decoration: underline;
	text-decoration-color: var(--ew-color-brass);
	text-underline-offset: 0.3em;
}
/* ------------------------------------------------------------------ */
/* Photo marquee                                                        */
/* ------------------------------------------------------------------ */
.ew-marquee__viewport {
	--ew-marquee-h: var(--ew-marquee-h-lead);
	--ew-marquee-duration: var(--ew-marquee-duration-lead);
	min-width: 0;
	overflow: clip;
}
.ew-marquee__viewport--right {
	--ew-marquee-h: var(--ew-marquee-h-follow);
	--ew-marquee-duration: var(--ew-marquee-duration-follow);
}
.ew-marquee__track {
	display: flex;
	width: max-content;
	animation: ew-marquee-left var(--ew-marquee-duration) linear infinite;
	will-change: transform;
}
.ew-marquee__viewport--right .ew-marquee__track {
	animation-name: ew-marquee-right;
}
/* Hover and focus pause the row. */
.ew-marquee__viewport:hover .ew-marquee__track,
.ew-marquee__viewport:focus-within .ew-marquee__track {
	animation-play-state: paused;
}
.ew-marquee__group {
	display: flex;
	flex: none;
	gap: var(--ew-gap-tight);
	margin: 0;
	padding: 0 var(--ew-gap-tight) 0 0;
	list-style: none;
}
.ew-marquee__item {
	position: relative;
	flex: none;
	height: var(--ew-marquee-h);
	margin: 0;
	overflow: hidden;
	border-radius: var(--ew-card-radius);
	background: var(--ew-color-paper-100);
}
.ew-marquee__item--4-5 {
	aspect-ratio: 4 / 5;
}
.ew-marquee__item--4-3 {
	aspect-ratio: 4 / 3;
}
.ew-marquee__item--3-2 {
	aspect-ratio: 3 / 2;
}
.ew-marquee__item--1-1 {
	aspect-ratio: 1 / 1;
}
.ew-marquee__item--16-9 {
	aspect-ratio: 16 / 9;
}
.ew-marquee__item img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--ew-media-focus, 50% 50%);
}
.ew-marquee__item:focus-visible {
	outline-offset: calc(-2 * var(--ew-line));
}
@keyframes ew-marquee-left {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(-50%, 0, 0);
	}
}
@keyframes ew-marquee-right {
	from {
		transform: translate3d(-50%, 0, 0);
	}

	to {
		transform: translate3d(0, 0, 0);
	}
}
/* Reduced motion: still rows the visitor scrolls sideways. */
/* ------------------------------------------------------------------ */
/* Story: portrait photo with an overlapping inset, hosts' text         */
/* ------------------------------------------------------------------ */
.ew-story__media {
	position: relative;
	min-width: 0;
	/* Room for the inset that hangs below the 4:5 photo. */
	padding-bottom: calc(var(--ew-story-overhang-y) * 1.25);
}
.ew-story__inset {
	position: absolute;
	right: calc(var(--ew-story-overhang-x) * -1);
	bottom: 0;
	width: var(--ew-story-inset-width);
	padding: var(--ew-story-mat);
	background: var(--ew-color-white);
	border-radius: var(--ew-card-radius);
	box-shadow: var(--ew-shadow-card);
}
.ew-story__inset .ew-media {
	border-radius: var(--ew-radius-sm);
}
.ew-story__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ew-space-4);
	min-width: 0;
}
.ew-story__copy .ew-section-head__main {
	gap: var(--ew-space-2);
}
.ew-story__signature {
	color: var(--ew-color-text-primary);
	font-size: var(--ew-text-heading-3);
}
/* Phone: the inset stays close to the photo edge. */
@media (max-width: 47.99rem) {
	.ew-story {
		--ew-story-inset-width: 45%;
		--ew-story-overhang-x: 8%;
		--ew-story-overhang-y: 10%;
	}
}
/* Tablet: 6/6, inset 45%. */
@media (min-width: 48rem) and (max-width: 63.99rem) {
	.ew-story {
		--ew-story-inset-width: 45%;
		--ew-story-overhang-x: 10%;
	}
}
/* ------------------------------------------------------------------ */
/* Stats: four equal cells, dividers between cells only                 */
/* ------------------------------------------------------------------ */
.ew-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
}
.ew-stats__item {
	display: flex;
	flex-direction: column;
	gap: var(--ew-space-2);
	padding-inline: var(--ew-space-4);
	padding-block: var(--ew-space-3);
}
.ew-stats__item:nth-child(odd) {
	padding-inline-start: 0;
}
.ew-stats__item:nth-child(even) {
	border-inline-start: var(--ew-border-width) solid var(--ew-color-border);
}
.ew-stats__item:nth-child(n + 3) {
	border-top: var(--ew-border-width) solid var(--ew-color-border);
}
.ew-stats__value {
	font-family: var(--ew-font-numeric);
	font-size: var(--ew-text-stat);
	font-weight: var(--ew-weight-medium);
	font-variant-numeric: var(--ew-numeric);
	line-height: 1;
	white-space: nowrap;
}
.ew-stats__unit {
	font-family: var(--ew-font-body);
	font-size: 0.45em;
	font-weight: var(--ew-weight-ui);
	vertical-align: baseline;
}
.ew-stats__label {
	max-width: var(--ew-measure-label);
	color: var(--ew-color-text-muted);
	font-size: var(--ew-text-meta);
	font-weight: var(--ew-weight-medium);
	line-height: var(--ew-leading-ui);
}
@media (min-width: 64rem) {
	.ew-stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.ew-stats__item {
		padding-block: 0;
	}

	.ew-stats__item:nth-child(odd) {
		padding-inline-start: var(--ew-space-4);
	}

	.ew-stats__item:first-child {
		padding-inline-start: 0;
	}

	.ew-stats__item:not(:first-child) {
		border-inline-start: var(--ew-border-width) solid var(--ew-color-border);
	}

	.ew-stats__item:nth-child(n + 3) {
		border-top: 0;
	}
}
/* ------------------------------------------------------------------ */
/* Trust bar: facilities in the label role, dots between items         */
/* ------------------------------------------------------------------ */
.ew-trust__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	row-gap: var(--ew-space-2);
	list-style: none;
}
.ew-trust__list li {
	display: inline-flex;
	align-items: center;
	color: var(--ew-color-text-primary);
	font-family: var(--ew-font-body);
	font-size: var(--ew-text-label);
	font-weight: var(--ew-weight-ui);
	letter-spacing: var(--ew-tracking-ui);
	line-height: var(--ew-leading-ui);
	white-space: nowrap;
	scroll-snap-align: start;
}
.ew-trust__list li + li::before {
	content: "";
	width: var(--ew-space-1);
	height: var(--ew-space-1);
	margin-inline: var(--ew-space-3);
	border-radius: 50%;
	background: var(--ew-color-brass);
}
/* ------------------------------------------------------------------ */
/* Location places, steps timeline                                      */
/* ------------------------------------------------------------------ */
.ew-lang__details,
.ew-steps__list {
	position: relative;
}
.ew-step {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--ew-space-2);
}
.ew-step__title {
	max-width: var(--ew-measure-card);
}
.ew-step .ew-index--circle {
	background: var(--ew-color-bg);
}
/* Phone: vertical timeline with the line on the left. */
@media (max-width: 47.99rem) {
	.ew-steps__list {
		row-gap: var(--ew-space-5);
	}

	.ew-step {
		padding-inline-start: calc(var(--ew-index-size) + var(--ew-space-3));
	}

	.ew-step .ew-index--circle {
		position: absolute;
		top: 0;
		left: 0;
	}

	.ew-step::before {
		content: "";
		position: absolute;
		top: var(--ew-index-size);
		bottom: calc(-1 * var(--ew-space-5));
		left: calc(var(--ew-index-size) / 2);
		width: 1px;
		background: var(--ew-color-border);
	}

	.ew-step:last-child::before {
		display: none;
	}
}
/* Desktop: four steps on one line, circles joined by a thin line. */
/* ------------------------------------------------------------------ */
/* Accordion                                                           */
/* ------------------------------------------------------------------ */
.ew-accordion {
	border-top: var(--ew-border-width) solid var(--ew-color-border);
}
.ew-accordion__item {
	border-bottom: var(--ew-border-width) solid var(--ew-color-border);
}
.ew-accordion__heading {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}
.ew-accordion__button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ew-space-4);
	width: 100%;
	min-height: var(--ew-tap);
	padding: var(--ew-space-3) 0;
	border: 0;
	background: transparent;
	color: inherit;
	font-family: var(--ew-font-heading);
	font-size: var(--ew-text-heading-3);
	font-weight: var(--ew-weight-subheading);
	line-height: var(--ew-leading-subheading);
	text-align: start;
}
.ew-accordion__icon {
	position: relative;
	flex: none;
	width: var(--ew-space-3);
	height: var(--ew-space-3);
}
.ew-accordion__icon::before,
.ew-accordion__icon::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	background: var(--ew-color-brass);
}
.ew-accordion__icon::before {
	height: var(--ew-line);
}
.ew-accordion__icon::after {
	width: var(--ew-line);
	transition: transform var(--ew-motion-duration-normal) var(--ew-motion-ease);
}
.ew-accordion__button[aria-expanded="true"] .ew-accordion__icon::after {
	transform: scaleY(0);
}
.ew-accordion__panel {
	max-width: var(--ew-width-measure);
	padding-bottom: var(--ew-space-4);
	color: var(--ew-color-text-secondary);
}
.ew-accordion__panel > * + * {
	margin-top: var(--ew-space-3);
}
/* ------------------------------------------------------------------ */
/* Google reviews                                                       */
/* ------------------------------------------------------------------ */
.ew-story,
.ew-marquee,
.ew-greviews {
	overflow-x: clip;
}
.ew-greviews__score {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ew-space-2) var(--ew-space-3);
	margin: 0;
	font-size: var(--ew-text-meta);
}
.ew-greviews__mark {
	display: block;
	width: var(--ew-space-4);
	height: var(--ew-space-4);
}
.ew-greviews__score-rating {
	font-family: var(--ew-font-numeric);
	font-size: var(--ew-text-heading-3);
	font-weight: var(--ew-weight-medium);
	line-height: 1;
}
.ew-greviews__stars {
	position: relative;
	display: inline-flex;
	color: color-mix(in srgb, var(--ew-color-brass) 32%, var(--ew-color-bg));
}
.ew-greviews__stars svg {
	display: block;
	fill: currentColor;
}
.ew-greviews__stars-base,
.ew-greviews__stars-fill {
	display: inline-flex;
	gap: var(--ew-gap-hair);
}
.ew-greviews__stars-fill {
	position: absolute;
	inset: 0;
	overflow: hidden;
	color: var(--ew-color-brass);
}
.ew-marquee__rows,
.ew-greviews__rows {
	display: grid;
	/* minmax(0, 1fr): the mask spans the visible row, not the whole track. */
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ew-gap-tight);
	min-width: 0;
}
.ew-greviews__viewport {
	--ew-greviews-duration: var(--ew-greviews-duration-lead);
	min-width: 0;
	overflow: clip;
	-webkit-mask-image: linear-gradient(to right, transparent, var(--ew-color-ink-900) 4%, var(--ew-color-ink-900) 96%, transparent);
	mask-image: linear-gradient(to right, transparent, var(--ew-color-ink-900) 4%, var(--ew-color-ink-900) 96%, transparent);
}
.ew-greviews__viewport--right {
	--ew-greviews-duration: var(--ew-greviews-duration-follow);
}
.ew-greviews__track {
	display: flex;
	width: max-content;
	animation: ew-marquee-left var(--ew-greviews-duration) linear infinite;
	will-change: transform;
}
.ew-greviews__viewport--right .ew-greviews__track {
	animation-name: ew-marquee-right;
}
.ew-greviews__viewport:hover .ew-greviews__track,
.ew-greviews__viewport:focus-within .ew-greviews__track {
	animation-play-state: paused;
}
.ew-greviews__group {
	display: flex;
	flex: none;
	align-items: stretch;
	gap: var(--ew-gap-tight);
	margin: 0;
	padding: var(--ew-space-1) var(--ew-gap-tight) var(--ew-space-1) 0;
	list-style: none;
}
.ew-greviews__item {
	display: flex;
	flex: none;
	margin: 0;
}
.ew-greviews__card {
	width: max-content;
	min-width: var(--ew-width-content);
	max-width: var(--ew-greviews-card-max);
}
.ew-greviews__who {
	display: flex;
	align-items: center;
	gap: var(--ew-space-2);
}
.ew-greviews__avatar {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--ew-tap);
	height: var(--ew-tap);
	border-radius: 50%;
	object-fit: cover;
	background: var(--ew-color-paper-100);
	color: var(--ew-color-ink-900);
	font-family: var(--ew-font-heading);
	font-size: var(--ew-text-heading-3);
}
.ew-greviews__meta {
	display: grid;
	gap: var(--ew-space-1);
	min-width: 0;
}
.ew-greviews__name {
	color: var(--ew-color-text-primary);
	font-family: var(--ew-font-body);
	font-size: var(--ew-text-label);
	font-weight: var(--ew-weight-ui);
	letter-spacing: var(--ew-tracking-ui);
	text-decoration: none;
}
a.ew-greviews__name:hover {
	text-decoration: underline;
	text-decoration-color: var(--ew-color-brass);
}
.ew-greviews__row {
	display: flex;
	align-items: center;
	gap: var(--ew-space-1);
}
.ew-greviews__when {
	color: var(--ew-color-text-muted);
	font-size: var(--ew-text-meta);
}
.ew-greviews__quote {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	margin: 0;
	overflow: hidden;
	color: var(--ew-color-text-secondary);
	font-size: var(--ew-text-body);
	font-weight: var(--ew-weight-body);
	line-height: var(--ew-leading-body);
}
.ew-greviews__source {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ew-space-1);
	margin-top: auto;
	padding-top: var(--ew-space-2);
	color: var(--ew-color-text-muted);
	font-size: var(--ew-text-meta);
	border-top: var(--ew-border-width) solid var(--ew-color-border);
}
.ew-greviews__source .ew-greviews__mark {
	width: var(--ew-space-3);
	height: var(--ew-space-3);
}
.ew-greviews__source a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.ew-greviews__source a:hover {
	color: var(--ew-color-text-primary);
}
.ew-greviews__rows--static .ew-greviews__track {
	width: 100%;
	justify-content: center;
	animation: none;
}
/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */
.ew-footer {
	background: var(--ew-color-ink-900);
	color: var(--ew-color-paper-0);
	padding-block: var(--ew-section) var(--ew-space-5);
}
.ew-footer__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--ew-space-5) var(--ew-gap);
	padding-bottom: var(--ew-space-5);
	border-bottom: var(--ew-border-width) solid var(--ew-color-border);
}
.ew-footer__grid > * {
	grid-column: 1 / -1;
	min-width: 0;
}
.ew-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ew-space-3);
}
.ew-footer__brand .custom-logo {
	height: var(--ew-logo-h);
}
.ew-footer__label {
	margin: 0;
	color: var(--ew-color-text-muted);
	font-family: var(--ew-font-body);
	font-size: var(--ew-text-label);
	font-weight: var(--ew-weight-ui);
	letter-spacing: var(--ew-tracking-ui);
	line-height: var(--ew-leading-ui);
}
.ew-footer__list {
	display: flex;
	flex-direction: column;
	gap: var(--ew-space-1);
	list-style: none;
}
.ew-footer__list a,
.ew-footer__address a {
	display: inline-flex;
	align-items: center;
	min-height: var(--ew-tap);
	color: var(--ew-color-text-primary);
	text-decoration: none;
}
.ew-footer__list a:hover,
.ew-footer__address a:hover {
	text-decoration: underline;
	text-decoration-color: var(--ew-color-brass);
	text-underline-offset: 0.3em;
}
.ew-footer__notes {
	display: flex;
	flex-direction: column;
	gap: var(--ew-space-1);
	list-style: none;
	color: var(--ew-color-text-secondary);
}
.ew-footer__address {
	display: flex;
	flex-direction: column;
	gap: var(--ew-space-1);
	color: var(--ew-color-text-secondary);
}
.ew-footer__base {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ew-space-3) var(--ew-space-5);
	padding-top: var(--ew-space-4);
}
.ew-footer__meta {
	margin: 0;
	color: var(--ew-color-text-muted);
	font-size: var(--ew-text-meta);
	font-weight: var(--ew-weight-medium);
}
@media (min-width: 48rem) {
	.ew-footer__brand {
		grid-column: 1 / -1;
	}

	.ew-footer__col {
		grid-column: span 6;
	}
}
/* ------------------------------------------------------------------ */
/* Contact details                                                      */
/* ------------------------------------------------------------------ */
.ew-contact__value {
	font-family: var(--ew-font-numeric);
	font-size: var(--ew-text-heading-3);
	font-weight: var(--ew-weight-medium);
	font-variant-numeric: var(--ew-numeric);
	line-height: var(--ew-leading-subheading);
	text-decoration: none;
}
a.ew-contact__value:hover {
	color: var(--ew-color-brass);
}
.ew-contact__list dt {
	color: var(--ew-color-text-muted);
	font-family: var(--ew-font-body);
	font-size: var(--ew-text-label);
	font-weight: var(--ew-weight-ui);
	letter-spacing: var(--ew-tracking-ui);
	line-height: var(--ew-leading-ui);
}
.ew-contact__list dd {
	max-width: none;
	color: var(--ew-color-text-primary);
}
/* ------------------------------------------------------------------ */
/* Rates (booking page): the printed rate card as a web section. Three  */
/* blocks under one head, each a label line closed by an ink rule, rows  */
/* on hairlines, amounts right-aligned in fixed year columns.            */
/* ------------------------------------------------------------------ */
.ew-section-head__title,
.ew-section-head__sub {
	max-width: var(--ew-measure-lead);
}
.ew-rates-block__title {
	margin: 0;
	padding-bottom: var(--ew-space-1);
	border-bottom: var(--ew-border-width) solid var(--ew-color-text-primary);
	color: var(--ew-color-text-primary);
	font-family: var(--ew-font-body);
	font-size: var(--ew-text-label);
	font-weight: var(--ew-weight-ui);
	letter-spacing: var(--ew-tracking-ui);
	line-height: var(--ew-leading-ui);
}
.ew-rates {
	width: 100%;
	border-collapse: collapse;
}
.ew-rates th,
.ew-rates td {
	padding: var(--ew-space-2) 0;
	border-bottom: var(--ew-border-width) solid var(--ew-color-border);
	text-align: start;
	vertical-align: baseline;
}
.ew-rates thead th {
	padding-top: var(--ew-space-1);
	color: var(--ew-color-text-muted);
	font-family: var(--ew-font-body);
	font-size: var(--ew-text-label);
	font-weight: var(--ew-weight-ui);
	letter-spacing: var(--ew-tracking-ui);
	line-height: var(--ew-leading-ui);
}
/* Every row of the card at one size: period labels, amounts and extras. */
.ew-rates tbody th,
.ew-rates td,
.ew-rates-extras dt,
.ew-rates-extras dd {
	font-size: var(--ew-text-label);
	line-height: var(--ew-leading-ui);
}
.ew-rates tbody th {
	font-family: var(--ew-font-body);
	font-weight: var(--ew-weight-ui);
	letter-spacing: var(--ew-tracking-ui);
}
/* Year columns: one fixed width keeps 2026 and 2027 aligned between the
   season table and the short-stay table. */
.ew-rates .ew-rates__num {
	width: var(--ew-rates-col);
	padding-inline-start: var(--ew-space-3);
	text-align: end;
	white-space: nowrap;
}
/* One face for every amount on the page: the numeric face, lining and
   tabular figures, so columns of amounts line up digit for digit. */
.ew-rates td,
.ew-amount {
	color: var(--ew-color-text-primary);
	font-family: var(--ew-font-numeric);
	font-weight: var(--ew-weight-medium);
	font-variant-numeric: var(--ew-numeric) tabular-nums;
}
/* Extras: the unit reads as text in the body face; the amount keeps the
   numeric face. The value column gets the room, the label stays whole. */
.ew-rates-extras dt {
	flex: 0 0 auto;
}
.ew-rates-extras dd {
	flex: 1 1 auto;
	color: var(--ew-color-text-primary);
	font-family: var(--ew-font-body);
	font-weight: var(--ew-weight-medium);
	font-variant-numeric: var(--ew-numeric) tabular-nums;
}
.ew-rates-note {
	max-width: none;
	color: var(--ew-color-text-muted);
}
/* ------------------------------------------------------------------ */
/* Journal, search, comments (secondary templates)                      */
/* ------------------------------------------------------------------ */
.ew-articles {
	display: flex;
	flex-direction: column;
	border-top: var(--ew-border-width) solid var(--ew-color-border);
}
.ew-article {
	padding-block: var(--ew-space-4);
	border-bottom: var(--ew-border-width) solid var(--ew-color-border);
}
.ew-article__kicker {
	color: var(--ew-color-text-muted);
	font-size: var(--ew-text-meta);
	font-weight: var(--ew-weight-medium);
}
.ew-article__kicker a,
.ew-article__title a {
	text-decoration: none;
}
.ew-article__title a:hover {
	text-decoration: underline;
	text-decoration-color: var(--ew-color-brass);
	text-underline-offset: 0.2em;
}
.ew-article__excerpt {
	max-width: var(--ew-width-measure);
	color: var(--ew-color-text-secondary);
}
.ew-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ew-space-2);
}
.ew-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	min-height: var(--ew-tap);
	padding-inline: var(--ew-space-1);
	text-decoration: none;
}
.ew-pagination .current {
	text-decoration: underline;
	text-decoration-color: var(--ew-color-brass);
	text-underline-offset: 0.3em;
}
.ew-post-nav .nav-links {
	display: grid;
	gap: var(--ew-space-3);
}
.ew-post-nav a {
	font-family: var(--ew-font-heading);
	font-size: var(--ew-text-heading-3);
	text-decoration: none;
}
.ew-post-nav a:hover {
	text-decoration: underline;
	text-decoration-color: var(--ew-color-brass);
}
.ew-comment-list {
	display: flex;
	flex-direction: column;
	gap: var(--ew-space-3);
	list-style: none;
}
.ew-comment-list .comment-body {
	padding-bottom: var(--ew-space-3);
	border-bottom: var(--ew-border-width) solid var(--ew-color-border);
}
/* ------------------------------------------------------------------ */
/* Generic fields (search, comments). Booking fields share these rules. */
/* ------------------------------------------------------------------ */
.ew-field label,
.ew-field legend,
.ew-form label {
	color: var(--ew-color-text-secondary);
	font-family: var(--ew-font-body);
	font-size: var(--ew-text-label);
	font-weight: var(--ew-weight-ui);
	letter-spacing: var(--ew-tracking-ui);
	line-height: var(--ew-leading-ui);
}
.ew-field__optional {
	color: var(--ew-color-text-muted);
	font-weight: var(--ew-weight-medium);
}
.ew-input,
.ew-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.ew-form textarea,
.ew-search input[type="search"] {
	width: 100%;
	min-height: var(--ew-field-height);
	padding: var(--ew-space-1) var(--ew-space-2);
	border: 0;
	border-bottom: var(--ew-border-width) solid var(--ew-color-border);
	border-radius: var(--ew-field-radius) var(--ew-field-radius) 0 0;
	background: color-mix(in srgb, var(--ew-color-text-primary) 4%, transparent);
	color: var(--ew-color-text-primary);
	font-family: var(--ew-font-body);
	font-size: var(--ew-text-body);
	font-weight: var(--ew-weight-medium);
	line-height: var(--ew-leading-ui);
	transition:
		background-color var(--ew-motion-duration-fast) var(--ew-motion-ease),
		border-color var(--ew-motion-duration-fast) var(--ew-motion-ease);
}
.ew-input:hover,
.ew-input:focus-visible,
.ew-form input:hover,
.ew-form input:focus-visible,
.ew-form textarea:hover,
.ew-form textarea:focus-visible {
	background: color-mix(in srgb, var(--ew-color-text-primary) 8%, transparent);
	border-bottom-color: var(--ew-color-brass);
}
.ew-input::placeholder,
.ew-form input::placeholder,
.ew-form textarea::placeholder {
	color: var(--ew-color-text-muted);
	font-weight: var(--ew-weight-body);
	opacity: 1;
}
.ew-input[aria-invalid="true"],
.ew-form [aria-invalid="true"] {
	border-bottom-color: var(--ew-color-error);
}
.ew-field__error {
	color: var(--ew-color-error);
	font-size: var(--ew-text-meta);
	font-weight: var(--ew-weight-medium);
}
.ew-field__error:empty {
	display: none;
}
.ew-search {
	display: flex;
	align-items: flex-end;
	gap: var(--ew-space-2);
	max-width: var(--ew-width-content);
}
.ew-search button {
	flex: none;
}
.ew-comment-form {
	display: flex;
	flex-direction: column;
	gap: var(--ew-space-4);
}
.ew-field,
.ew-comment-form p {
	display: flex;
	flex-direction: column;
	gap: var(--ew-space-1);
}
/* ------------------------------------------------------------------ */
/* Density patterns (docs/audit/eureka122-restructure-plan.md, fase 1) */
/* Dense facts strip, chips, card meta line, clamped card, notes row,  */
/* filter chips and pull quote. Every value is a token; nothing new in */
/* colour, type or spacing.                                            */
/* ------------------------------------------------------------------ */
/* Dense facts strip: five or six figures on the statistics list. Two
   columns on phones (as .ew-stats), three from 48rem, one column per
   figure from 90rem. The figure drops to the dense size so "1.500 m"
   keeps its column. */
.ew-stats--dense .ew-stats__value {
	font-size: var(--ew-text-stat-dense);
}
@media (min-width: 48rem) and (max-width: 89.99rem) {
	.ew-stats--dense {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ew-stats--dense .ew-stats__item {
		padding-block: var(--ew-space-3);
		padding-inline: var(--ew-space-3);
	}

	.ew-stats--dense .ew-stats__item:nth-child(3n + 1) {
		padding-inline-start: 0;
		border-inline-start: 0;
	}

	.ew-stats--dense .ew-stats__item:not(:nth-child(3n + 1)) {
		border-inline-start: var(--ew-border-width) solid var(--ew-color-border);
	}

	.ew-stats--dense .ew-stats__item:nth-child(-n + 3) {
		border-top: 0;
	}

	.ew-stats--dense .ew-stats__item:nth-child(n + 4) {
		border-top: var(--ew-border-width) solid var(--ew-color-border);
	}
}
@media (min-width: 90rem) {
	.ew-stats--5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.ew-stats--6 {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.ew-stats--dense .ew-stats__item {
		padding-inline: var(--ew-space-3);
	}

	.ew-stats--dense .ew-stats__item:first-child {
		padding-inline-start: 0;
	}
}
/* Chips: short facts as pills in the meta size, wrapping by default. The
   scroll variant (filter bar only) runs as one row on phones, snapping
   per chip, out to the screen edge like the trust bar. */
.ew-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ew-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ew-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--ew-space-1);
	min-height: var(--ew-chip-height);
	padding: 0 var(--ew-space-2);
	border: var(--ew-border-width) solid var(--ew-color-border);
	border-radius: var(--ew-chip-radius);
	background: transparent;
	color: var(--ew-color-text-primary);
	font-family: var(--ew-font-body);
	font-size: var(--ew-text-meta);
	font-weight: var(--ew-weight-medium);
	letter-spacing: var(--ew-tracking-ui);
	line-height: var(--ew-leading-ui);
	text-align: start;
}
.ew-chip--button {
	cursor: pointer;
	transition:
		background-color var(--ew-motion-duration-fast) var(--ew-motion-ease),
		border-color var(--ew-motion-duration-fast) var(--ew-motion-ease),
		color var(--ew-motion-duration-fast) var(--ew-motion-ease);
}
.ew-chip--button:hover {
	border-color: var(--ew-color-brass);
}
/* The active filter is more than a colour: brass border, tint, UI weight
   and a brass underline. */
.ew-chip--button[aria-pressed="true"] {
	border-color: var(--ew-color-brass);
	background: color-mix(in srgb, var(--ew-color-brass) 16%, transparent);
	font-weight: var(--ew-weight-ui);
	text-decoration: underline;
	text-decoration-color: var(--ew-color-brass);
	text-decoration-thickness: var(--ew-line);
	text-underline-offset: 0.25em;
}
/* Card meta line: distance, travel time, season under a card title. The
   colour is the scheme's muted text, so it holds its contrast on the dark
   band as well as on paper. Every part is one unbreakable span; the brass
   dot is generated on every part but the first (empty alternative text,
   so it is not read out), so a line never ends on a dot: when the meta
   wraps, the dot starts the new line with its part. */
.ew-card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: var(--ew-space-1);
	max-width: var(--ew-measure-card);
	margin: 0;
}
.ew-card-meta__part + .ew-card-meta__part::before {
	content: "·";
	content: "·" / "";
	margin-inline-end: var(--ew-space-1);
	color: var(--ew-color-brass);
}
/* Clamped card text: three lines by default, the full text in the same
   element. The native <details> after it carries the extra content; while
   it is open the clamp on the text is released. Without :has() nothing is
   clamped, so no browser ever loses a word. The toggle follows the text at
   one space step; a closed card stays compact whatever its neighbours do
   (the grid aligns cards to the top, see .ew-list-numbered--clamp). */
.ew-clamp {
	display: flex;
	flex-direction: column;
	gap: var(--ew-space-2);
}
.ew-clamp:not(.ew-clamp--static) > .ew-clamp__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--ew-clamp-lines);
	overflow: hidden;
}
.ew-clamp:has(> .ew-clamp__details[open]) > .ew-clamp__text {
	display: block;
	-webkit-line-clamp: unset;
	overflow: visible;
}
@supports not selector(:has(*)) {
	.ew-clamp > .ew-clamp__text {
		display: block;
		-webkit-line-clamp: unset;
		overflow: visible;
	}
}
/* The disclosure is a grid so the toggle (order 2) sits under all the text,
   closed and open alike (Chromium and Safari); a browser that keeps
   <details> a block shows the toggle first, as before. The extra content
   (::details-content) animates its height and opacity on open and close;
   browsers without ::details-content or interpolate-size open at once. */
.ew-clamp__details {
	display: grid;
}
.ew-clamp__details::details-content {
	height: 0;
	overflow: clip;
	opacity: 0;
	transition:
		height var(--ew-motion-duration-normal) var(--ew-motion-ease),
		opacity var(--ew-motion-duration-normal) var(--ew-motion-ease),
		content-visibility var(--ew-motion-duration-normal) allow-discrete;
}
.ew-clamp__details[open]::details-content {
	height: auto;
	opacity: 1;
}
/* The toggle: a compact brass label with a chevron, not a link. The
   negative block margin cancels the padding, so the label itself sits one
   space step under the text while the hit area stays generous. */
.ew-clamp__toggle {
	order: 2;
	display: inline-flex;
	align-items: center;
	justify-self: start;
	gap: var(--ew-space-1);
	margin-block: calc(-1 * var(--ew-space-1));
	padding: var(--ew-space-1) 0;
	border-radius: var(--ew-radius-sm);
	list-style: none;
	color: var(--ew-color-brass);
	font-family: var(--ew-font-body);
	font-size: var(--ew-text-label);
	font-weight: var(--ew-weight-ui);
	letter-spacing: var(--ew-tracking-ui);
	line-height: var(--ew-leading-ui);
	cursor: pointer;
	user-select: none;
	transition: color var(--ew-motion-duration-fast) var(--ew-motion-ease);
}
.ew-clamp__toggle::marker {
	content: "";
}
.ew-clamp__toggle::-webkit-details-marker {
	display: none;
}
.ew-clamp__toggle:hover {
	color: var(--ew-color-text-primary);
}
.ew-clamp__toggle:focus-visible {
	outline: var(--ew-line) solid var(--ew-color-focus);
	outline-offset: calc(1.5 * var(--ew-line));
}
.ew-clamp__chevron {
	flex: none;
	width: var(--ew-icon-size-sm);
	height: var(--ew-icon-size-sm);
	transition: transform var(--ew-motion-duration-normal) var(--ew-motion-ease);
}
.ew-clamp__details[open] .ew-clamp__chevron {
	transform: rotate(180deg);
}
.ew-clamp__label--less,
.ew-clamp__details[open] .ew-clamp__label--more {
	display: none;
}
.ew-clamp__details[open] .ew-clamp__label--less {
	display: inline;
}
/* The extra text: one space step above its first paragraph and one below
   the block (before the toggle); the list follows its paragraph without
   extra margin. */
.ew-clamp__extra {
	max-width: var(--ew-measure-card);
	padding-bottom: var(--ew-space-2);
	color: var(--ew-color-text-secondary);
}
.ew-clamp__extra > :first-child,
.ew-clamp__extra > * + * {
	margin-top: var(--ew-space-2);
}
.ew-clamp__extra > p + .ew-clamp__list {
	margin-top: 0;
}
/* Lists in a card: no bullets, a hairline under every line, links in the
   primary ink with a brass underline. */
.ew-clamp__list,
.ew-feature__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.ew-clamp__list li,
.ew-feature__list li {
	padding-block: var(--ew-space-1);
	border-bottom: var(--ew-border-width) solid var(--ew-color-border);
}
.ew-clamp__list a,
.ew-feature__list a {
	color: var(--ew-color-text-primary);
	text-decoration: underline;
	text-decoration-color: var(--ew-color-brass);
	text-underline-offset: 0.2em;
	transition: color var(--ew-motion-duration-fast) var(--ew-motion-ease);
}
.ew-clamp__list a:hover,
.ew-feature__list a:hover {
	color: var(--ew-color-brass);
}
/* A plain list inside a card (no clamp): the card measure and colour. */
.ew-footer__description,
.ew-step__text,
.ew-feature__text,
.ew-feature__list {
	max-width: var(--ew-measure-card);
	color: var(--ew-color-text-secondary);
}
/* Dichtbij (Omgeving): every clamped card is a card in its own right, with
   its own surface, one hairline the whole way round, its own radius and its
   own padding, so the row reads as separate blocks and not as a field of
   text with rules through it. That border replaces the hairline that used to
   sit between the rows, so no line is ever drawn twice. */
.ew-feature--clamp {
	padding: var(--ew-feature-card-padding);
	background-color: var(--ew-color-surface);
	border: var(--ew-border-width) solid var(--ew-color-border);
	border-radius: var(--ew-feature-card-radius);
	transition: var(--ew-feature-card-transition);
}
/* components.js makes every card a reveal target and utilities.css loads
   after this file, so the reveal owns the transition on these cards. The
   card repeats the two entrance properties and adds its own three; without
   that the hover colour would land at once. Neither list touches a property
   that moves the layout. */
.ew-feature--clamp.ew-reveal {
	transition:
		opacity var(--ew-motion-duration-slow) var(--ew-motion-ease-out),
		transform var(--ew-motion-duration-slow) var(--ew-motion-ease-out),
		var(--ew-feature-card-transition);
}
/* Hover and keyboard focus are one and the same highlight: a brighter
   hairline and a surface a fraction lighter, both mixed from the scheme's
   own tokens. Colour only, so no transform, no border width and no padding
   change, and not one pixel of the layout moves. :focus-within carries it to
   the card while the toggle keeps its own focus ring. */
.ew-feature--clamp:hover,
.ew-feature--clamp:focus-within {
	background-color: var(--ew-feature-card-bg-hover);
	border-color: var(--ew-feature-card-border-hover);
}
/* Masonry: the markup is one flat list and the grid above would lay it out
   in rows, where the tallest card of a row sets where the next row starts.
   filters.js moves the cards into one column per viewport step instead
   (--ew-masonry-columns: one, two from 768px, three from 1024px), and the
   grid then only sets those columns side by side. The cards keep their own
   heights, so a card that opens pushes the cards under it in its own column
   and nothing else. Both gutters read the same token, so the room between
   two cards is the same figure down a column and across the columns. After
   a filter the cards that stay fade in briefly (filters.js restarts the
   animation by re-adding is-filtering); the columns themselves never
   animate. Without the script the cards stay direct children of the list
   and the grid lays them out in rows, as it always did. */
.ew-list-numbered--clamp {
	gap: var(--ew-feature-card-gap);
	align-items: start;
}
.ew-masonry__column {
	display: flex;
	flex-direction: column;
	gap: var(--ew-feature-card-gap);
}
/* A card keeps its own height, so there is normally no room left over; where
   something does stretch a card, the text block takes that room and the
   disclosure sits at the foot of it, with the title, the meta line and the
   text at the top. A card without a disclosure reads the same way. */
.ew-feature--clamp > .ew-clamp {
	flex-grow: 1;
}
.ew-feature--clamp .ew-clamp__details {
	margin-block-start: auto;
}
/* The number of a card follows its place in its column, not its place in the
   DOM: with one column it counts up by one, with two by two and with three
   by three, and every column starts one later than the one before it, so a
   row still reads 1, 2, 3 from left to right and the column reads 1, 4, 7
   downwards. A hidden card counts for nothing (display: none), exactly as it
   did while the cards were one flat list. */
.ew-masonry__column > li {
	counter-increment: ew-item 1;
}
@media (min-width: 48rem) {
	.ew-masonry__column > li {
		counter-increment: ew-item 2;
	}
	.ew-masonry__column:nth-child(1) {
		counter-reset: ew-item -1;
	}
	.ew-masonry__column:nth-child(2) {
		counter-reset: ew-item 0;
	}
}
@media (min-width: 64rem) {
	.ew-masonry__column > li {
		counter-increment: ew-item 3;
	}
	.ew-masonry__column:nth-child(1) {
		counter-reset: ew-item -2;
	}
	.ew-masonry__column:nth-child(2) {
		counter-reset: ew-item -1;
	}
	.ew-masonry__column:nth-child(3) {
		counter-reset: ew-item 0;
	}
}
@keyframes ew-card-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}
.ew-list-numbered.is-filtering > li:not([hidden]),
.ew-list-numbered.is-filtering > .ew-masonry__column > li:not([hidden]) {
	animation: ew-card-fade var(--ew-motion-duration-normal) var(--ew-motion-ease) both;
}
/* Notes row ("Goed om te weten"): short rules with a brass line icon. */
.ew-notes {
	display: grid;
	gap: var(--ew-gap-tight);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 48rem) {
	.ew-notes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--ew-gap);
	}
}
.ew-note {
	display: flex;
	align-items: flex-start;
	gap: var(--ew-space-3);
	padding-top: var(--ew-space-3);
	border-top: var(--ew-border-width) solid var(--ew-color-border);
}
.ew-note__icon {
	flex: none;
	width: var(--ew-icon-size);
	height: var(--ew-icon-size);
	margin-top: var(--ew-gap-hair);
	color: var(--ew-color-brass);
}
.ew-note__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}
.ew-note__text {
	max-width: var(--ew-measure-card);
	margin: 0;
	color: var(--ew-color-text-secondary);
	font-size: var(--ew-text-body);
	font-weight: var(--ew-weight-body);
	line-height: var(--ew-leading-body);
}
.ew-note__text strong {
	color: var(--ew-color-text-primary);
	font-weight: var(--ew-weight-ui);
}
.ew-note__text a {
	color: var(--ew-color-text-primary);
	text-decoration-color: var(--ew-color-brass);
	text-underline-offset: 0.18em;
}
.ew-note__text a:hover {
	color: var(--ew-color-brass);
}
/* Filter chips above a card grid: a group of real buttons with
   aria-pressed, the count read out through the status line. */
.ew-article__body,
.ew-rates-block,
.ew-footer__col,
.ew-filters {
	display: flex;
	flex-direction: column;
	gap: var(--ew-space-2);
}
.ew-filters__status:empty {
	display: none;
}
/* On a phone the filter bar sticks under the header while the cards scroll
   past, and lets go where its section ends (sticky inside the section's
   container). Full-bleed paper behind it, so the cards slide underneath. */
@media (max-width: 47.99rem) {
	.ew-chips--scroll {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--ew-gutter);
		margin-inline: calc(-1 * var(--ew-gutter));
		padding-inline: var(--ew-gutter);
		padding-bottom: var(--ew-space-1);
		scrollbar-width: none;
	}
	.ew-chips--scroll::-webkit-scrollbar {
		display: none;
	}
	.ew-chips--scroll > * {
		flex: none;
		scroll-snap-align: start;
		white-space: nowrap;
	}
	/* The row fades out at the right edge, so a chip that sits outside the
	   screen reads as "more to the right" whatever the chip widths are. */
	.ew-chips--scroll {
		mask-image: linear-gradient(to right, black calc(100% - var(--ew-space-6)), transparent);
	}
	.ew-trust__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--ew-gutter);
		margin-inline: calc(-1 * var(--ew-gutter));
		padding-inline: var(--ew-gutter);
		padding-bottom: var(--ew-space-1);
		scrollbar-width: none;
	}
	.ew-trust__list::-webkit-scrollbar {
		display: none;
	}
	.ew-hero__media img,
	.ew-hero__slide img {
		object-position: var(--ew-media-focus-mobile, var(--ew-media-focus, 50% 50%));
	}
	.ew-filters {
		position: sticky;
		top: calc(var(--ew-admin-bar-h) + var(--ew-header-h));
		z-index: calc(var(--ew-z-header) - 1);
		margin-inline: calc(-1 * var(--ew-gutter));
		padding: var(--ew-space-2) var(--ew-gutter);
		background: var(--ew-color-bg);
	}
}
/* The admin bar stops being fixed below 600px (as for .ew-header). */
@media (max-width: 37.5rem) {
	.ew-header {
		top: 0;
	}
	.ew-nav-panel {
		height: calc(100dvh - var(--ew-header-h));
	}
	.ew-filters {
		top: var(--ew-header-h);
	}
}
/* Pull quote under the photo of a split: Fraunces italic at lead size with
   a brass hairline, in the room the 4:5 frame leaves when the text column
   runs longer. */
.ew-nav-panel__meta,
.ew-split__media {
	display: flex;
	flex-direction: column;
	gap: var(--ew-space-4);
}
.ew-button--block,
.ew-split__media > .ew-media {
	width: 100%;
}
.ew-pullquote {
	margin: 0;
	padding-inline-start: var(--ew-space-4);
	border-inline-start: var(--ew-line) solid var(--ew-color-brass);
}
.ew-pullquote p {
	max-width: var(--ew-measure-lead);
	margin: 0;
	color: var(--ew-color-text-primary);
	font-family: var(--ew-font-heading);
	font-size: var(--ew-text-lead);
	font-style: italic;
	font-weight: var(--ew-weight-regular);
	line-height: var(--ew-leading-lead);
	text-wrap: pretty;
}
@media (prefers-reduced-motion: reduce) {
	.ew-feature--clamp,
	.ew-feature--clamp.ew-reveal,
	.ew-clamp__details::details-content,
	.ew-clamp__chevron {
		transition: none;
	}
	.ew-list-numbered.is-filtering > li,
	.ew-list-numbered.is-filtering > .ew-masonry__column > li {
		animation: none;
	}
	.ew-greviews__viewport {
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-mask-image: none;
		mask-image: none;
	}
	.ew-greviews__track {
		animation: none;
		padding-inline-start: var(--ew-gutter);
		will-change: auto;
	}
	.ew-greviews__group[aria-hidden="true"] {
		display: none;
	}
	.ew-marquee__viewport {
		overflow-x: auto;
		overscroll-behavior-x: contain;
	}
	.ew-marquee__track {
		animation: none;
		padding-inline-start: var(--ew-gutter);
		will-change: auto;
	}
	.ew-marquee__group[aria-hidden="true"] {
		display: none;
	}
	.ew-chip--button {
		transition: none;
	}
}
/* Rates callouts (fase 4): the security deposit and the down payment as two
   cards beside the tables, so they read as something other than a cost that
   counts in the stay total. Under the tables on phones (the grid stacks). */
.ew-callouts {
	display: grid;
	gap: var(--ew-gap-tight);
}
@media (min-width: 48rem) {
	.ew-callouts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.ew-callout {
	gap: var(--ew-space-1);
}
.ew-callout__label {
	margin: 0;
	color: var(--ew-color-text-muted);
}
.ew-callout__amount {
	margin: 0;
	font-size: var(--ew-text-heading-3);
	line-height: var(--ew-leading-subheading);
}
.ew-callout__unit {
	color: var(--ew-color-text-secondary);
	font-family: var(--ew-font-body);
	font-size: var(--ew-text-label);
	font-weight: var(--ew-weight-medium);
}
/* Clamped paragraph in a prose column (split, fase 3): the prose measure and
   colour instead of the card measure. */
.ew-clamp--prose > .ew-clamp__text,
.ew-clamp--prose .ew-clamp__extra {
	max-width: var(--ew-width-measure);
	color: var(--ew-color-text-secondary);
	font-size: var(--ew-text-body);
	font-weight: var(--ew-weight-body);
	line-height: var(--ew-leading-body);
}
/* Contact (fase 5): the map panel before the click, the frame after it, and
   the contact form. Form fields reuse .ew-field and .ew-input. */
.ew-map {
	display: flex;
	flex-direction: column;
	gap: var(--ew-space-3);
}
.ew-map__panel {
	gap: var(--ew-space-4);
}
.ew-map__address {
	color: var(--ew-color-text-primary);
	font-style: normal;
	font-size: var(--ew-text-body);
	line-height: var(--ew-leading-body);
}
.ew-callout__text,
.ew-filters__status,
.ew-rates-download,
.ew-map__note,
.ew-map__after {
	margin: 0;
}
.ew-map__frame {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	border: 0;
	border-radius: var(--ew-card-radius);
	background: var(--ew-color-surface);
}
.ew-contact-form__trap {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	overflow: hidden;
	clip-path: inset(50%);
}
.ew-contact-form__status {
	margin: 0;
	color: var(--ew-color-text-secondary);
	font-size: var(--ew-text-body);
	line-height: var(--ew-leading-body);
}
.ew-contact-form__status:empty {
	display: none;
}
.ew-contact-form__status.is-sent {
	color: var(--ew-color-text-primary);
	font-weight: var(--ew-weight-ui);
}
/* Legal pages (fase 5): table of contents and clause numbers. */
.ew-toc {
	padding-bottom: var(--ew-space-4);
	border-bottom: var(--ew-border-width) solid var(--ew-color-border);
}
.ew-toc__title {
	margin: 0 0 var(--ew-space-2);
	color: var(--ew-color-text-muted);
}
/* The article labels carry their own number ("1. Betaling"), so the list
   shows no marker of its own. */
.ew-toc__list {
	display: grid;
	gap: var(--ew-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ew-toc__list a {
	color: var(--ew-color-text-primary);
	text-decoration-color: var(--ew-color-brass);
	text-underline-offset: 0.18em;
}
.ew-toc__list a:hover {
	color: var(--ew-color-brass);
}
.ew-clause__num {
	margin-inline-end: var(--ew-space-2);
	color: var(--ew-color-brass);
	font-family: var(--ew-font-numeric);
	font-weight: var(--ew-weight-ui);
	font-variant-numeric: var(--ew-numeric) tabular-nums;
}
.ew-prose :target {
	scroll-margin-top: calc(var(--ew-header-h) + var(--ew-space-4));
}
/* Home highlights (8 nov): eyebrow, title, lead and button start on one top
   line; two equal 4:3 photos in the grid gutter of the card row; chips in
   the cards never break (three words at most) and sit a size below the
   serif card title, in the secondary ink with the muted border. */
.ew-card-meta__part,
.ew-rates-part,
.ew-rates-unit,
.ew-highlights .ew-chip {
	white-space: nowrap;
}
.ew-highlights .ew-feature .ew-chip {
	min-height: var(--ew-chip-height-sm);
	color: var(--ew-color-text-secondary);
	font-size: var(--ew-text-chip-sm);
}
@media (min-width: 64rem) {
	.ew-notes {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.ew-footer__brand {
		grid-column: 1 / 5;
	}
	.ew-footer__col {
		grid-column: span 2;
	}
	.ew-steps__list::before {
		content: "";
		position: absolute;
		top: calc(var(--ew-index-size) / 2);
		left: calc(var(--ew-index-size) / 2);
		right: calc(var(--ew-index-size) / 2);
		height: 1px;
		background: var(--ew-color-border);
	}
	.ew-step .ew-index--circle {
		position: relative;
		z-index: 1;
	}
	.ew-section-head--split {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--ew-gap);
		align-items: end;
	}
	.ew-section-head--split .ew-section-head__main {
		grid-column: 1 / 7;
	}
	.ew-section-head--split .ew-section-head__aside {
		grid-column: 8 / 13;
	}
	.ew-highlights .ew-section-head--split {
		align-items: start;
	}
}