/* ==========================================================================
   The site menu — the overlay behind the burger (owner, 2026-09-30)

   Markup: inc/mwf-menu.php · motion: js/mwf-menu.js (GSAP).
   Loads on every page (functions.php, mwf_enqueue_menu_assets()); every rule
   is scoped to .mwfm, so nothing else on the site can change.
   Sizes in rem (the root scales above 1920px, custom-css/mwf.css) and vh
   (the whole first panel fits one screen from 1366×768 to phones).
   GSAP animates transforms/opacity of .mwfm-item, .mwfm-roll, .mwfm-note,
   .mwfm-chev, .mwfm-title-t, the spotlight parts, tiles, flags, chips —
   none of them carries a CSS transform transition (the sections' turn moves
   the .mwfm-t inside the roll, the tiles move their <img>).
   ========================================================================== */

.mwfm {
	--mwfm-wine: #671e26;
	--mwfm-wine-mid: #4a161d;
	--mwfm-deep: #28191b;
	--mwfm-ink-rgb: 40, 25, 27;
	--mwfm-cream: #f4efe4;
	--mwfm-brass: #cdad59;
	--mwfm-gold: #e3cd92;
	--mwfm-muted: rgba(244, 239, 228, .68);
	--mwfm-hair: rgba(205, 173, 89, .45);
	--mwfm-ease: cubic-bezier(.7, 0, .2, 1);
	--mwfm-serif: 'Libre Baskerville', Baskerville, 'Times New Roman', serif;
	--mwfm-sans: 'Raleway', system-ui, -apple-system, 'Segoe UI', sans-serif;
	/* the big voices: fluid with the width, capped by the height */
	--mwfm-size: clamp(1.5rem, min(1.05rem + 1.55vw, 4.1vh), 2.6rem);
	/* the header bar (14vh): the burger and the logo stay on top of the menu */
	--mwfm-top: 14vh;

	position: fixed;
	inset: 0;
	z-index: 9998;
	color: var(--mwfm-cream);
	font-family: var(--mwfm-serif);
	text-align: center;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-tap-highlight-color: transparent;
}

.mwfm[hidden],
.mwfm [hidden] {
	display: none !important;
}

.mwfm *,
.mwfm *::before,
.mwfm *::after {
	box-sizing: border-box;
}

/* While the menu is open the header sits above everything on the page (its
   own z-index is 30 and the overlay lives inside it), and the logo rises
   above the overlay next to the burger. The header's `transition: all 1s`
   would otherwise ramp the z-index up over a second. */
body.mwfm-open header.header {
	z-index: 10000;
	transition: none;
}

body.mwfm-open .center-logo {
	position: relative;
	z-index: 9999;
}

/* ---- the ground --------------------------------------------------------- */

.mwfm-bloom {
	position: absolute;
	left: var(--mwfm-bx, 8%);
	top: var(--mwfm-by, 7vh);
	width: var(--mwfm-bd, 260vmax);
	height: var(--mwfm-bd, 260vmax);
	margin: calc(var(--mwfm-bd, 260vmax) / -2) 0 0 calc(var(--mwfm-bd, 260vmax) / -2);
	border-radius: 50%;
	background: radial-gradient(closest-side, #6a1f28 0%, #4a161d 58%, #35141a 100%);
	pointer-events: none;
}

.mwfm-ground {
	position: absolute;
	inset: -3%;
	background: var(--mwfm-deep) url("/core/bg/mwfe-ground-wine-m.webp") 50% 18% / cover no-repeat;
	pointer-events: none;
}

/* a darker bed under the words, the wine left to glow at the edges */
.mwfm-ground::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 62% 58% at 50% 54%, rgba(var(--mwfm-ink-rgb), .62) 0%, rgba(var(--mwfm-ink-rgb), .3) 58%, rgba(var(--mwfm-ink-rgb), 0) 100%),
		linear-gradient(to bottom, rgba(var(--mwfm-ink-rgb), .35) 0%, rgba(var(--mwfm-ink-rgb), 0) 26%, rgba(var(--mwfm-ink-rgb), 0) 72%, rgba(var(--mwfm-ink-rgb), .5) 100%);
}

/* the design system's cellar grain */
.mwfm-ground::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: .07;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* ---- layout ------------------------------------------------------------- */

.mwfm-scroll {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: calc(var(--mwfm-top) + clamp(.25rem, 1.6vh, 1.25rem)) 1rem calc(clamp(1rem, 3.6vh, 2.5rem) + env(safe-area-inset-bottom, 0px));
}

.mwfm-scroll::-webkit-scrollbar {
	display: none;
}

.mwfm-nav {
	width: 100%;
	max-width: 48rem;
	margin: auto;
}

/* every panel in the same cell: the stage keeps the height of the tallest,
   each panel is centred in it, the flights cross over each other */
.mwfm-stage {
	display: grid;
}

.mwfm-panel {
	grid-area: 1 / 1;
	align-self: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
}

.mwfm-panel:not(.is-current):not(.is-moving) {
	visibility: hidden;
}

.mwfm ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mwfm li {
	margin: 0;
	padding: 0;
}

.mwfm li::before,
.mwfm li::marker {
	content: none;
}

/* ---- the big voices ------------------------------------------------------- */

.mwfm .mwfm-major,
.mwfm .mwfm-sub {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.mwfm .mwfm-major {
	gap: clamp(0rem, .7vh, .5rem);
}

.mwfm .mwfm-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 100%;
}

.mwfm .mwfm-link {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	max-width: 100%;
	margin: 0;
	padding: .24em 1.15em;
	border: 0;
	border-radius: .25em;
	background: none;
	box-shadow: none;
	color: var(--mwfm-cream);
	font: 400 var(--mwfm-size) / 1.14 var(--mwfm-serif);
	letter-spacing: .012em;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: opacity .45s ease, color .3s ease;
}

.mwfm .mwfm-link:focus {
	outline: none;
}

.mwfm .mwfm-link:focus-visible {
	outline: 1px solid var(--mwfm-brass);
	outline-offset: .05em;
}

/* the mask the words rise out of when the menu opens; its padding keeps the
   descenders. Vertical only: side margins made Chrome size the label a few px
   under its text and wrap it ("Area Visitatori" on two lines). */
.mwfm .mwfm-mask {
	display: block;
	max-width: 100%;
	overflow: hidden;
	padding: .06em 0 .16em;
	margin: -.06em 0 -.16em;
}

.mwfm .mwfm-roll {
	position: relative;
	display: block;
}

.mwfm .mwfm-t {
	display: block;
}

/* The main voices do not turn (owner, 2026-09-30): a golden shine crosses
   the word under the pointer — the word is painted by its background (gold,
   a bright edge, cream), which slides from the cream end to the gold end. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.mwfm .mwfm-major .mwfm-t {
		/* gold | a glint: warm light, a bright point, a brass edge | cream */
		background-image: linear-gradient(100deg, var(--mwfm-gold) 0%, var(--mwfm-gold) 42%, #f3dc9c 45.5%, #fffbef 48%, #c9a24b 51%, var(--mwfm-cream) 55%, var(--mwfm-cream) 100%);
		background-size: 260% 100%;
		background-position: 100% 0;
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		transition: background-position .95s cubic-bezier(.45, 0, .2, 1);
	}

	.mwfm .mwfm-major .mwfm-link:focus-visible .mwfm-t,
	.mwfm .mwfm-major .mwfm-link:active .mwfm-t,
	.mwfm .mwfm-major .mwfm-link[aria-current="page"] .mwfm-t,
	.mwfm .mwfm-major .mwfm-drill.is-here .mwfm-t {
		background-position: 0 0;
	}
}

/* The sections turn: the name leaves upwards, the section's dates come up
   in gold. Both share one grid cell, so the mask is as wide as the longer. */
.mwfm .mwfm-roll--when {
	display: grid;
	justify-items: center;
}

.mwfm .mwfm-roll--when > .mwfm-t {
	grid-area: 1 / 1;
	white-space: nowrap;
	transition: transform .65s var(--mwfm-ease);
}

.mwfm .mwfm-when {
	color: var(--mwfm-gold);
	transform: translateY(calc(100% + .3em));
}

.mwfm .mwfm-link:focus-visible .mwfm-roll--when > .mwfm-t:first-child,
.mwfm .mwfm-item.is-dated .mwfm-roll--when > .mwfm-t:first-child {
	transform: translateY(calc(-100% - .3em));
}

.mwfm .mwfm-link:focus-visible .mwfm-when,
.mwfm .mwfm-item.is-dated .mwfm-when {
	transform: none;
}

/* hover only on a panel at rest: a section under the pointer while its panel
   flies in would turn inside a mask it has not risen into yet */
@media (hover: hover) and (pointer: fine) {
	@supports ((-webkit-background-clip: text) or (background-clip: text)) {
		.mwfm .mwfm-panel.is-current:not(.is-moving) .mwfm-major .mwfm-link:hover .mwfm-t {
			background-position: 0 0;
		}
	}

	.mwfm .mwfm-panel.is-current:not(.is-moving) .mwfm-link:hover .mwfm-roll--when > .mwfm-t:first-child {
		transform: translateY(calc(-100% - .3em));
	}

	.mwfm .mwfm-panel.is-current:not(.is-moving) .mwfm-link:hover .mwfm-when {
		transform: none;
	}

	/* the others step back a little while one is under the pointer */
	.mwfm .mwfm-panel.is-current:not(.is-moving) .mwfm-major:hover .mwfm-link,
	.mwfm .mwfm-panel.is-current:not(.is-moving) .mwfm-sub:hover .mwfm-link {
		opacity: .5;
	}

	.mwfm .mwfm-panel.is-current:not(.is-moving) .mwfm-major .mwfm-link:hover,
	.mwfm .mwfm-panel.is-current:not(.is-moving) .mwfm-sub .mwfm-link:hover {
		opacity: 1;
	}
}

.mwfm .mwfm-link:active {
	color: var(--mwfm-gold);
}

/* the page you are on, and the voice that holds it */
.mwfm .mwfm-sub .mwfm-link[aria-current="page"] .mwfm-t:first-child {
	color: var(--mwfm-gold);
}

.mwfm .mwfm-link[aria-current="page"]::after,
.mwfm .mwfm-drill.is-here::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: .3rem;
	height: .3rem;
	margin-left: -.15rem;
	background: var(--mwfm-brass);
	transform: rotate(45deg);
}

/* "Culinaria - Food·Spirits·Beer": the part after the dash, small */
.mwfm .mwfm-note {
	display: block;
	margin-top: .12rem;
	padding-left: .26em;
	color: var(--mwfm-muted);
	font: 400 .6rem / 1.3 var(--mwfm-sans);
	letter-spacing: .26em;
	text-transform: uppercase;
}

/* the chevron of a voice that opens a panel: in the right padding, so the
   words stay on the centre line */
.mwfm .mwfm-chev {
	position: absolute;
	right: .38em;
	top: 50%;
	width: .3em;
	height: .5em;
	margin-top: -.25em;
	color: var(--mwfm-brass);
	transition: transform .5s var(--mwfm-ease);
}

.mwfm .mwfm-drill:hover .mwfm-chev,
.mwfm .mwfm-drill:focus-visible .mwfm-chev {
	transform: translateX(.22em);
}

/* ---- the spotlight ("In evidenza") -------------------------------------- */

.mwfm .mwfm-spot {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(24rem, 100%);
	margin-top: clamp(1rem, 3.2vh, 2.3rem);
}

.mwfm .mwfm-kicker {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .85rem;
	margin: 0 0 .4rem;
	color: var(--mwfm-brass);
	font: 400 .62rem / 1 var(--mwfm-sans);
	letter-spacing: .34em;
	text-transform: uppercase;
}

.mwfm .mwfm-kicker span {
	padding-left: .34em;
}

.mwfm .mwfm-kicker::before,
.mwfm .mwfm-kicker::after {
	content: "";
	width: 2.4rem;
	height: 1px;
	background: var(--mwfm-hair);
}

.mwfm .mwfm-spot-stage {
	display: grid;
	width: 100%;
}

.mwfm .mwfm-spot-item {
	grid-area: 1 / 1;
	justify-self: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 100%;
	padding: .15rem 1rem .2rem;
	border-radius: .5rem;
	color: var(--mwfm-cream);
	text-decoration: none;
	visibility: hidden;
}

.mwfm .mwfm-spot-item.is-active {
	visibility: visible;
}

.mwfm .mwfm-spot-mask {
	display: block;
	max-width: 100%;
	overflow: hidden;
	padding: .04em .1em .16em;
}

.mwfm .mwfm-spot-title {
	display: block;
	font: 400 clamp(1.1rem, .95rem + .45vw, 1.38rem) / 1.2 var(--mwfm-serif);
	transition: color .3s ease;
}

.mwfm .mwfm-spot-meta {
	display: block;
	color: var(--mwfm-muted);
	font: 400 .72rem / 1.35 var(--mwfm-sans);
	letter-spacing: .06em;
}

.mwfm .mwfm-rel {
	color: var(--mwfm-gold);
}

.mwfm .mwfm-spot-item:hover .mwfm-spot-title,
.mwfm .mwfm-spot-item:focus-visible .mwfm-spot-title {
	color: var(--mwfm-gold);
}

.mwfm .mwfm-spot-item:focus {
	outline: none;
}

.mwfm .mwfm-spot-item:focus-visible {
	outline: 1px solid var(--mwfm-brass);
	outline-offset: 0;
}

/* the bars: one per entry, the running one fills while it is shown */
.mwfm .mwfm-dots {
	display: flex;
	justify-content: center;
	gap: .2rem;
	margin-top: .15rem;
}

.mwfm .mwfm-dot {
	display: flex;
	align-items: center;
	width: 2.3rem;
	height: 1.6rem;
	margin: 0;
	padding: 0 .35rem;
	border: 0;
	border-radius: .3rem;
	background: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.mwfm .mwfm-dot i {
	position: relative;
	display: block;
	width: 100%;
	height: 2px;
	overflow: hidden;
	border-radius: 2px;
	background: rgba(244, 239, 228, .22);
	transition: background-color .3s ease;
}

.mwfm .mwfm-dot b {
	position: absolute;
	inset: 0;
	background: var(--mwfm-brass);
	transform: scaleX(0);
	transform-origin: 0 50%;
}

.mwfm .mwfm-dot.is-active b {
	transform: scaleX(1);
}

.mwfm .mwfm-dot:hover i {
	background: rgba(244, 239, 228, .42);
}

.mwfm .mwfm-dot:focus {
	outline: none;
}

.mwfm .mwfm-dot:focus-visible {
	outline: 1px solid var(--mwfm-brass);
}

/* ---- the service voices: icon tiles -------------------------------------- */

.mwfm .mwfm-rule {
	display: block;
	width: min(20rem, 72%);
	height: 1px;
	margin: clamp(1rem, 3vh, 2.1rem) auto 0;
	background: linear-gradient(90deg, rgba(205, 173, 89, 0), var(--mwfm-hair) 22%, var(--mwfm-hair) 78%, rgba(205, 173, 89, 0));
}

.mwfm .mwfm-minor {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr); /* equal tiles, however many */
	gap: .35rem;
	width: min(31rem, 100%);
	margin-top: clamp(.45rem, 1.4vh, .9rem);
}

.mwfm .mwfm-minor li {
	display: flex;
}

.mwfm .mwfm-tile {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	gap: .45rem;
	min-height: 2.75rem;
	padding: .55rem .25rem .5rem;
	border-radius: .75rem;
	color: var(--mwfm-muted);
	font: 400 .6rem / 1.35 var(--mwfm-sans);
	letter-spacing: .18em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: color .3s ease, background-color .3s ease;
}

.mwfm .mwfm-tile span {
	padding-left: .18em;
}

.mwfm .mwfm-tile img {
	display: block;
	width: 2rem;
	height: auto;
	opacity: .8;
	transition: transform .5s var(--mwfm-ease), opacity .3s ease;
}

.mwfm .mwfm-tile:hover,
.mwfm .mwfm-tile:focus-visible {
	color: var(--mwfm-cream);
	background: rgba(244, 239, 228, .06);
}

.mwfm .mwfm-tile:hover img,
.mwfm .mwfm-tile:focus-visible img {
	opacity: 1;
	transform: translateY(-.15rem);
}

.mwfm .mwfm-tile[aria-current="page"] {
	color: var(--mwfm-gold);
}

.mwfm .mwfm-tile:focus {
	outline: none;
}

.mwfm .mwfm-tile:focus-visible {
	outline: 1px solid var(--mwfm-brass);
}

/* ---- the languages ------------------------------------------------------- */

.mwfm .mwfm-langs {
	display: flex;
	justify-content: center;
	gap: .5rem;
	margin-top: clamp(.4rem, 1.6vh, 1.2rem);
}

.mwfm .mwfm-langs a {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	color: var(--mwfm-muted);
	font: 400 .7rem / 1 var(--mwfm-sans);
	letter-spacing: .1em;
	text-decoration: none;
}

.mwfm .mwfm-langs img {
	display: block;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	object-fit: cover;
	opacity: .55;
	box-shadow: 0 0 0 1px rgba(244, 239, 228, .3);
	transition: opacity .3s ease, transform .45s var(--mwfm-ease), box-shadow .3s ease;
}

.mwfm .mwfm-langs a:hover img,
.mwfm .mwfm-langs a:focus-visible img {
	opacity: 1;
	transform: scale(1.1);
}

.mwfm .mwfm-langs a[aria-current] img {
	opacity: 1;
	box-shadow: 0 0 0 2px var(--mwfm-deep), 0 0 0 3px var(--mwfm-brass);
}

.mwfm .mwfm-langs a:focus {
	outline: none;
}

.mwfm .mwfm-langs a:focus-visible {
	outline: 1px solid var(--mwfm-brass);
	outline-offset: -2px;
}

/* ---- a panel of its own (the sections) ----------------------------------- */

.mwfm .mwfm-back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	min-height: 2.75rem;
	margin: 0;
	padding: .5rem 1.1rem;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--mwfm-brass);
	font: 400 .64rem / 1 var(--mwfm-sans);
	letter-spacing: .3em;
	text-transform: uppercase;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color .3s ease;
}

.mwfm .mwfm-back-arrow {
	width: 1.15rem;
	height: .65rem;
	flex: none;
	transition: transform .45s var(--mwfm-ease);
}

.mwfm .mwfm-back:hover {
	background: rgba(205, 173, 89, .1);
}

.mwfm .mwfm-back:hover .mwfm-back-arrow,
.mwfm .mwfm-back:focus-visible .mwfm-back-arrow {
	transform: translateX(-.25rem);
}

.mwfm .mwfm-back:focus {
	outline: none;
}

.mwfm .mwfm-back:focus-visible {
	outline: 1px solid var(--mwfm-brass);
}

.mwfm .mwfm-title {
	max-width: 100%;
	margin: 0;
	padding: .24em 1.15em;
	color: var(--mwfm-gold);
	font: 400 var(--mwfm-size) / 1.14 var(--mwfm-serif);
	letter-spacing: .012em;
}

.mwfm .mwfm-title-t {
	display: inline-block;
	max-width: 100%;
}

.mwfm .mwfm-title-rule {
	display: block;
	width: 3.2rem;
	height: 1px;
	margin: .45rem auto clamp(.6rem, 2vh, 1.3rem);
	background: var(--mwfm-brass);
}

.mwfm .mwfm-sub {
	gap: clamp(0rem, .45vh, .3rem);
}

.mwfm .mwfm-sub .mwfm-link {
	padding-top: .2em;
	padding-bottom: .2em;
	font-size: calc(var(--mwfm-size) * .76);
}

/* the chips: anchors that sprout under their section */
.mwfm .mwfm-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .4rem;
	margin: -.15rem 0 .3rem;
}

.mwfm .mwfm-chip {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	color: var(--mwfm-brass);
	text-decoration: none;
}

.mwfm .mwfm-chip-stem {
	display: block;
	width: 1px;
	height: .55rem;
	background: linear-gradient(rgba(205, 173, 89, 0), var(--mwfm-brass));
	transform-origin: 50% 0;
}

.mwfm .mwfm-chip-t {
	position: relative;
	display: inline-block;
	overflow: hidden;
	padding: .5rem .85rem .46rem calc(.85rem + .22em);
	border: 1px solid rgba(205, 173, 89, .55);
	border-radius: 999px;
	font: 400 .6rem / 1 var(--mwfm-sans);
	letter-spacing: .22em;
	text-transform: uppercase;
	transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

/* a slow glint across the chips while their panel is open */
.mwfm .mwfm-chip-t::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(255, 244, 214, 0) 30%, rgba(255, 244, 214, .32) 50%, rgba(255, 244, 214, 0) 70%);
	transform: translateX(-120%);
	pointer-events: none;
}

.mwfm .mwfm-panel.is-current .mwfm-chip-t::after {
	animation: mwfm-glint 6s ease-in-out 1.8s infinite;
}

.mwfm .mwfm-chip:nth-child(2) .mwfm-chip-t::after {
	animation-delay: 2.4s;
}

@keyframes mwfm-glint {
	0% {
		transform: translateX(-120%);
	}

	24%,
	100% {
		transform: translateX(120%);
	}
}

.mwfm .mwfm-chip:hover .mwfm-chip-t,
.mwfm .mwfm-chip:focus-visible .mwfm-chip-t {
	border-color: var(--mwfm-brass);
	background: var(--mwfm-brass);
	color: var(--mwfm-deep);
}

.mwfm .mwfm-chip:focus {
	outline: none;
}

.mwfm .mwfm-chip:focus-visible .mwfm-chip-t {
	outline: 1px solid var(--mwfm-cream);
	outline-offset: 2px;
}

/* a link was chosen: the rest steps back while the next page loads */
.mwfm.is-leaving .mwfm-link:not(.is-chosen),
.mwfm.is-leaving .mwfm-tile:not(.is-chosen),
.mwfm.is-leaving .mwfm-spot-item:not(.is-chosen),
.mwfm.is-leaving .mwfm-chip:not(.is-chosen) {
	opacity: .22;
}

.mwfm.is-leaving .is-chosen .mwfm-t:first-child,
.mwfm.is-leaving .is-chosen .mwfm-spot-title {
	color: var(--mwfm-gold);
}

/* ---- phones and short screens -------------------------------------------- */

@media (max-width: 600px) {
	.mwfm-scroll {
		padding-left: .75rem;
		padding-right: .75rem;
	}

	.mwfm .mwfm-link,
	.mwfm .mwfm-title {
		padding-left: .95em;
		padding-right: .95em;
	}

	/* taller phones, taller targets (44px on a 932px screen) */
	.mwfm .mwfm-major .mwfm-link {
		padding-top: clamp(.24em, 1.1vh - .1rem, .36em);
		padding-bottom: clamp(.24em, 1.1vh - .1rem, .36em);
	}

	.mwfm .mwfm-sub .mwfm-link {
		padding-top: clamp(.2em, 1.2vh - .15rem, .55em);
		padding-bottom: clamp(.2em, 1.2vh - .15rem, .55em);
	}

	.mwfm .mwfm-minor {
		gap: .2rem;
	}
}

/* short screens (laptops at 720–800px, small phones): the lower tier tightens
   so the whole first panel stays on one screen */
@media (max-height: 820px) {
	.mwfm .mwfm-spot {
		margin-top: clamp(.75rem, 2.4vh, 2.3rem);
	}

	.mwfm .mwfm-rule {
		margin-top: clamp(.75rem, 2.2vh, 2.1rem);
	}

	.mwfm .mwfm-tile {
		gap: .35rem;
		padding: .4rem .25rem .35rem;
	}

	.mwfm .mwfm-tile img {
		width: 1.7rem;
	}

	.mwfm .mwfm-langs {
		margin-top: .3rem;
	}

	.mwfm .mwfm-langs a {
		width: 2.5rem;
		height: 2.5rem;
	}
}

@media (max-height: 560px) {
	.mwfm {
		--mwfm-size: clamp(1.2rem, 5vh, 1.6rem);
	}

	.mwfm .mwfm-tile img {
		width: 1.6rem;
	}
}

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