/* =============================================================
   History 35 — /history-35/ (template-parts/page-history.php)
   The 35th edition's celebration and the journey back to 1992:
   a gilded 35 with the Kurhaus statue, then one stop per edition
   on a curved path drawn by js/history.js. Scoped .mwfh, rem only
   (the design system scales the root above 1920 px).
   ============================================================= */

.mwfh {
	--mwfh-gold: #e2c574;
	--mwfh-gold-hi: #fcf0c4;
	--mwfh-statue-fill: url(#mwfh-gold);
	--mwfh-statue-line: #cdad59;
	--mwfh-statue-oculus: url(#mwfh-gold);
	--mwfh-node: 3rem;
	--mwfh-node-live: 4.4rem;
}

/* the statue symbol's paint (the <use> clones inherit these) */
.mwfh-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.mwfh-st-figures, .mwfh-st-dome { fill: var(--mwfh-statue-fill, #cdad59); }
.mwfh-st-oculus { fill: var(--mwfh-statue-oculus, #cdad59); }
.mwfh-st-roof { fill: none; stroke: var(--mwfh-statue-line, #cdad59); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* the page ground as a fixed, composited layer (round 14: performance) */
.mwfe.mwfh { background: transparent; }
.mwfe.mwfh::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background: var(--mwfe-bg-deep) url('/core/bg/mwfe-ground-wine.webp') center top / cover no-repeat;
	pointer-events: none;
	will-change: transform;
}
@media (max-width: 900px) {
	.mwfe.mwfh::before { background-image: url('/core/bg/mwfe-ground-wine-m.webp'); }
}

/* /history-35/: the page's ground and what changes it (js/history.js «the page's ground») — the 2007 painting,
   the 2008 fresco, the gold of the 2001 sails, the Bosch colours of the 2019 Kurhaus windows.
   Takes the place of egg 35-23's rules (.mwf-egg-moroder, .mwfh-moroder, .mwfh.is-moroder).
   The ground itself — its layer, the pictures, the cosmos, the leaves, the mix — is drawn by the site's
   grounds engine since 2026-10-26 (js/mwf-grounds.js, css/mwf-grounds.css), the same on every page
   that wears the wine ground; here: the names, the sails, the windows. */
.mwf-ground-name {
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	white-space: nowrap; /* one target, never split over two lines */
	text-decoration: underline dotted rgba(255, 255, 255, .35);
	text-underline-offset: .18em;
}
.mwf-ground-name:focus-visible { outline: 1px solid var(--mwfe-brass); outline-offset: .15em; }

/* the stops whose backdrops take taps: no double-tap zoom, no delay */
.mwf-taps { touch-action: manipulation; }

/* 2001: the sails, their colour turned by a double click (owner, 2026-10-22) */
.mwf-sails > img { transition: filter .7s ease; }
.mwf-sails.is-turned > img { filter: drop-shadow(6px 14px 22px #000e2a) hue-rotate(287deg); }

/* 2019: the Kurhaus windows — the faintness moves from the frame to the drawing, so the gold
   in the windows is solid (as on the 2026 Gusto Nobile mark) */
.mwfh-backdrop.mwfh-backdrop--art.mwf-kw { opacity: 1; }
.mwf-kw > img { opacity: var(--art-o, .11); }
.mwf-kw-panes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mwf-kw-panes path { fill: url(#mwf-kw-gold); opacity: 0; transition: opacity .35s ease; }
.mwf-kw-panes path.is-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.mwf-sails > img, .mwf-kw-panes path { transition: none; }
}

/* =========================================================== hero */
.mwfh-hero {
	position: relative;
	min-height: calc(100svh - var(--mwfe-header-h));
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1.5rem, 5vh, 3.5rem) var(--mwfe-gutter) clamp(5rem, 11vh, 7rem);
	overflow: clip;
	isolation: isolate;
	text-align: center;
}
.mwfh-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		radial-gradient(48% 42% at 50% 40%, rgba(226, 197, 116, .2), transparent 70%),
		radial-gradient(90% 70% at 50% 110%, rgba(var(--mwfe-ink-rgb), .9), transparent 70%);
}
.mwfh-dust {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	pointer-events: none;
}
.mwfh-hero-inner {
	position: relative;
	width: min(100%, 75rem);
	display: flex;
	flex-direction: column;
	align-items: center;
}
.mwfh-hero-kicker { justify-content: center; margin-bottom: .4rem; }
.mwfh-hero-kicker::after {
	content: "";
	width: 3.2em;
	height: 1px;
	background: var(--mwfe-brass);
	flex: 0 0 auto;
}

/* the sculpture */
.mwfh-35 { width: min(100%, 56rem, 68svh); margin: 0 auto; will-change: transform; }
.mwfh-35-svg { display: block; width: 100%; height: auto; overflow: visible; }
.mwfh-35-d,
#mwfh-35-clip text {
	font-family: var(--mwfe-serif);
	font-weight: 500;
	font-size: 640px;
	/* lining figures: Cormorant's old-style 3 and 5 hang far below the horizon */
	font-variant-numeric: lining-nums;
	font-feature-settings: "lnum" 1;
}
.mwfh-35-d {
	fill: url(#mwfh-gold);
	fill-opacity: 1;
	stroke: var(--mwfh-gold);
	stroke-width: 1.4;
	stroke-dasharray: 2600;
	stroke-dashoffset: 0;
	paint-order: stroke;
}
.mwfh-35-statue { --mwfh-statue-fill: url(#mwfh-gold); filter: drop-shadow(0 .6rem 1.4rem rgba(0, 0, 0, .45)); }
.mwfh-35-horizon { stroke: var(--mwfe-brass); stroke-width: 1; opacity: .7; }
.mwfh-35-sheen { opacity: 0; }

.mwfh-hero-title {
	font-family: var(--mwfe-serif);
	font-weight: 500;
	font-size: clamp(2.3rem, 4.6vw, 4.4rem);
	line-height: 1.02;
	letter-spacing: -.01em;
	color: var(--mwfe-gold-light);
	margin: 1rem 0 .9rem;
	text-wrap: balance;
}
.mwfh-hero-title em { font-style: italic; font-weight: 400; color: var(--mwfe-brass); }
.mwfh-hero-lead {
	max-width: 54ch;
	text-wrap: balance;
	margin: 0 auto 1.6rem;
	font-size: clamp(1.05rem, 1.4vw, 1.25rem);
	line-height: 1.6;
	color: #e8dfd0;
}
.mwfh-hero-meta { justify-content: center; margin-bottom: 0; }

.mwfh-seal { bottom: clamp(2rem, 7vh, 4.5rem); }
.mwfh-seal .mwfe-seal-core { font-style: normal; letter-spacing: .04em; font-size: clamp(.95rem, 1.4vw, 1.3rem); }

.mwfh-begin {
	position: absolute;
	left: 50%;
	bottom: 1.3rem;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .55rem;
	font-family: var(--mwfe-sans);
	font-size: .64rem;
	font-weight: 600;
	letter-spacing: .36em;
	text-transform: uppercase;
	text-decoration: none;
	color: rgba(244, 239, 228, .78);
	z-index: 2;
	transition: color .3s;
}
.mwfh-begin:hover { color: var(--mwfe-gold-light); }
.mwfh-begin::after {
	content: "";
	width: 1px;
	height: 2.75rem;
	background: linear-gradient(var(--mwfe-brass), transparent);
	transform-origin: top;
	animation: mwfe-cue 2.2s ease-in-out infinite;
}

/* the entrance — pure CSS, so it paints from the first frame with no flash
   and needs no script: the 35 is drawn in gold line, then filled; the
   horizon opens; the statue rises onto it; the words follow. */
@media (prefers-reduced-motion: no-preference) {
	.mwfh-35-d { animation: mwfh-draw 2.3s cubic-bezier(.55, .1, .3, 1) .25s both, mwfh-fill 1.1s ease 1.75s both; }
	.mwfh-35-d5 { animation-delay: .45s, 1.95s; }
	.mwfh-35-horizon { transform-box: fill-box; transform-origin: center; animation: mwfh-open 1.4s cubic-bezier(.65, .05, .36, 1) .3s both; }
	.mwfh-35-statue { animation: mwfh-rise 1.5s cubic-bezier(.2, .8, .25, 1.12) 1.35s both; }
	.mwfh-35-sheen { animation: mwfh-sheen 7s ease-in-out 3s 3; }
	.mwfh-hero-kicker { animation: mwfh-up .9s cubic-bezier(.2, .7, .2, 1) .1s both; }
	.mwfh-hero-title { animation: mwfh-up 1s cubic-bezier(.2, .7, .2, 1) 1.9s both; }
	.mwfh-hero-lead { animation: mwfh-up 1s cubic-bezier(.2, .7, .2, 1) 2.1s both; }
	.mwfh-hero-meta { animation: mwfh-up 1s cubic-bezier(.2, .7, .2, 1) 2.3s both; }
	.mwfh-seal, .mwfh-begin { animation: mwfh-fade 1.2s ease 2.6s both; }
}
@keyframes mwfh-draw { from { stroke-dashoffset: 2600; } to { stroke-dashoffset: 0; } }
@keyframes mwfh-fill { from { fill-opacity: 0; } to { fill-opacity: 1; } }
@keyframes mwfh-open { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: .7; } }
@keyframes mwfh-rise { from { opacity: 0; transform: translateY(46px); } to { opacity: 1; transform: none; } }
@keyframes mwfh-sheen { 0% { opacity: 0; transform: translateX(0); } 8% { opacity: 1; } 32% { opacity: 1; transform: translateX(1500px); } 33%, 100% { opacity: 0; transform: translateX(1500px); } }
@keyframes mwfh-up { from { opacity: 0; transform: translateY(1.6rem); } to { opacity: 1; transform: none; } }
@keyframes mwfh-fade { from { opacity: 0; } to { opacity: 1; } }
/* off screen, the endless motions rest (js/history.js sets .is-resting on the
   hero, the marquee and the band): nothing restyles unseen while scrolling */
.mwfh .is-resting,
.mwfh .is-resting *,
.mwfh .is-resting *::before,
.mwfh .is-resting *::after { animation-play-state: paused !important; }

/* the year ribbon */
.mwfh-marquee .mwfe-marquee-track > span { gap: 0; letter-spacing: .06em; }

/* ============================================ MWF over the years (band) */
/* owner, 2026-10-11: a horizontal time band before the journey, desktop only.
   Positions: --x is unitless 0…100 along the axis (1992 → 2026); the axis
   leaves room on the right for the 35. Reveal: transform/opacity only, once
   (js/history.js adds .is-armed, then .is-in when the band comes into view). */
.mwfh-band { display: none; }
@media (min-width: 1100px) {
	.mwfh-band {
		display: block;
		position: relative;
		z-index: 1;
		padding: clamp(3.5rem, 9vh, 6rem) var(--mwfe-gutter) clamp(2.5rem, 7vh, 4.5rem);
	}
	.mwfh-band-k {
		margin: 0 0 .6rem;
		text-align: center;
		font-family: var(--mwfe-sans, Raleway, sans-serif);
		font-size: .74rem;
		font-weight: 600;
		letter-spacing: .32em;
		text-transform: uppercase;
		color: var(--mwfe-brass);
	}
	.mwfh-band-track {
		--ax-l: 3rem;
		--ax-r: 7.5rem;
		position: relative;
		width: min(100%, 80rem);
		height: 27rem;
		margin: 0 auto;
	}
	.mwfh-band-line {
		position: absolute;
		top: 50%;
		left: var(--ax-l);
		right: var(--ax-r);
		height: 1px;
	}
	.mwfh-band-line i {
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg, rgba(205, 173, 89, .25), rgba(226, 197, 116, .95));
		transform-origin: 0 50%;
	}
	.mwfh-band-ticks, .mwfh-band-hl { margin: 0; padding: 0; list-style: none; }
	.mwfh-band-ticks li, .mwfh-band-hl > li {
		position: absolute;
		top: 50%;
		left: calc(var(--ax-l) + (100% - var(--ax-l) - var(--ax-r)) * var(--x) / 100);
	}
	.mwfh-band-ticks li {
		width: 1px;
		height: 7px;
		margin: -3.5px 0 0 -.5px;
		background: rgba(205, 173, 89, .45);
	}
	.mwfh-band-ticks li.is-dec { height: 13px; margin-top: -6.5px; background: rgba(226, 197, 116, .8); }
	.mwfh-band-ticks span {
		position: absolute;
		top: 1.15rem;
		left: 50%;
		transform: translateX(-50%);
		font-family: var(--mwfe-serif);
		font-size: .9rem;
		font-variant-numeric: lining-nums;
		font-feature-settings: "lnum" 1;
		color: rgba(205, 173, 89, .7);
	}
	.mwfh-band-hl > li::before {
		content: "";
		position: absolute;
		left: -.5px;
		width: 1px;
		height: 2.4rem;
		background: linear-gradient(rgba(226, 197, 116, .7), rgba(226, 197, 116, .15));
	}
	.mwfh-band-hl > li.is-up::before { bottom: 0; background: linear-gradient(rgba(226, 197, 116, .15), rgba(226, 197, 116, .7)); }
	.mwfh-band-hl > li.is-down::before { top: 0; }
	.mwfh-band-hl a { display: block; color: inherit; text-decoration: none; }
	.mwfh-band-dot {
		position: absolute;
		left: 0;
		top: 0;
		width: .8rem;
		height: .8rem;
		border: 1.5px solid var(--mwfh-gold, #cdad59);
		border-radius: 50%;
		background: var(--mwfe-bg-deep, #1a0d0f);
		box-shadow: 0 0 .8rem rgba(226, 197, 116, .35);
		transform: translate(-50%, -50%);
		transition: background .35s ease, box-shadow .35s ease;
	}
	.mwfh-band-card {
		position: absolute;
		left: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: .3rem;
		width: 8.4rem;
		text-align: center;
		transform: translateX(-50%);
		transition: transform .45s cubic-bezier(.2, .8, .2, 1);
	}
	.is-up .mwfh-band-card { bottom: 2.6rem; flex-direction: column-reverse; }
	.is-down .mwfh-band-card { top: 2.6rem; }
	.mwfh-band-card img {
		display: block;
		width: auto;
		height: 5.6rem;
		padding: 3px;
		background: rgba(var(--mwfe-ink-rgb, 28, 14, 16), .9);
		border: 1px solid rgba(205, 173, 89, .45);
		box-shadow: 0 1rem 1.8rem -1rem rgba(0, 0, 0, .9);
		transition: border-color .35s ease;
	}
	.mwfh-band-card b {
		font-family: var(--mwfe-serif);
		font-size: 1.55rem;
		font-weight: 500;
		line-height: 1;
		font-variant-numeric: lining-nums;
		font-feature-settings: "lnum" 1;
		color: var(--mwfe-gold-light, #e2c574);
	}
	.mwfh-band-card > span {
		font-family: var(--mwfe-sans, Raleway, sans-serif);
		font-size: .64rem;
		font-weight: 600;
		line-height: 1.35;
		letter-spacing: .14em;
		text-transform: uppercase;
		color: rgba(243, 234, 210, .78);
	}
	.mwfh-band-hl a:hover .mwfh-band-card, .mwfh-band-hl a:focus-visible .mwfh-band-card { transform: translate(-50%, -4px); }
	.mwfh-band-hl a:hover .mwfh-band-dot, .mwfh-band-hl a:focus-visible .mwfh-band-dot { background: var(--mwfh-gold, #cdad59); box-shadow: 0 0 1.2rem rgba(226, 197, 116, .7); }
	.mwfh-band-hl a:hover img, .mwfh-band-hl a:focus-visible img { border-color: rgba(243, 220, 138, .95); }
	.mwfh-band-hl a:focus-visible { outline: none; }
	.mwfh-band-hl a:focus-visible .mwfh-band-card b { text-decoration: underline; text-underline-offset: .3rem; }

	/* the 35 at the end of the line */
	.mwfh-band-35 {
		position: absolute;
		top: 50%;
		left: calc(100% - var(--ax-r));
		display: grid;
		place-items: center;
		width: 9.6rem;
		height: 9.6rem;
		margin: -4.8rem 0 0 -4.8rem;
		color: inherit;
		text-decoration: none;
	}
	.mwfh-band-35-ring {
		position: absolute;
		inset: 0;
		border-radius: 50%;
		border: 1px solid rgba(226, 197, 116, .8);
		background: radial-gradient(closest-side, rgba(226, 197, 116, .16), rgba(26, 13, 15, .92) 72%);
		box-shadow: 0 0 2.6rem rgba(226, 197, 116, .28), inset 0 0 0 .45rem rgba(26, 13, 15, .6), inset 0 0 0 calc(.45rem + 1px) rgba(226, 197, 116, .45);
	}
	.mwfh-band-35-ring::after {
		content: "";
		position: absolute;
		inset: -1px;
		border-radius: 50%;
		background: conic-gradient(from 0deg, transparent 0 72%, rgba(255, 246, 214, .85) 80%, transparent 88%);
		-webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
		mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
		animation: mwfh-band-gleam 6s linear infinite;
	}
	@keyframes mwfh-band-gleam { to { transform: rotate(1turn); } }
	.mwfh-band-35-num {
		position: relative;
		margin-top: -.6rem;
		font-family: var(--mwfe-serif);
		font-size: 4.6rem;
		font-weight: 500;
		line-height: 1;
		font-variant-numeric: lining-nums;
		font-feature-settings: "lnum" 1;
		background: linear-gradient(170deg, #fff1c4 10%, #e2c574 45%, #a8822f 90%);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
	.mwfh-band-35-y {
		position: absolute;
		bottom: 1.5rem;
		font-family: var(--mwfe-sans, Raleway, sans-serif);
		font-size: .62rem;
		font-weight: 600;
		letter-spacing: .3em;
		color: var(--mwfe-brass);
	}
	.mwfh-band-35-l {
		position: absolute;
		top: calc(100% + .9rem);
		left: 50%;
		width: 12rem;
		transform: translateX(-50%);
		text-align: center;
		font-family: var(--mwfe-serif);
		font-style: italic;
		font-size: 1.05rem;
		line-height: 1.3;
		color: var(--mwfe-gold-light, #e2c574);
	}
	.mwfh-band-35:hover .mwfh-band-35-ring, .mwfh-band-35:focus-visible .mwfh-band-35-ring { box-shadow: 0 0 3.4rem rgba(226, 197, 116, .5), inset 0 0 0 .45rem rgba(26, 13, 15, .6), inset 0 0 0 calc(.45rem + 1px) rgba(226, 197, 116, .7); }
	.mwfh-band-35:focus-visible { outline: none; }

	/* the reveal: the line draws, the years rise, the 35 lands last */
	.mwfh-band.is-armed .mwfh-band-line i { transform: scaleX(0); transition: transform 1.8s cubic-bezier(.65, 0, .2, 1); }
	.mwfh-band.is-armed .mwfh-band-ticks { opacity: 0; transition: opacity 1s ease .4s; }
	.mwfh-band.is-armed .mwfh-band-hl > li { opacity: 0; transform: translateY(.8rem); transition: opacity .7s ease, transform .9s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(.35s + var(--i) * .16s); }
	.mwfh-band.is-armed .mwfh-band-hl > li.is-down { transform: translateY(-.8rem); }
	.mwfh-band.is-armed .mwfh-band-35 { opacity: 0; transform: scale(.82); transition: opacity .8s ease, transform 1.1s cubic-bezier(.2, 1.4, .3, 1); transition-delay: calc(.5s + var(--i) * .16s); }
	.mwfh-band.is-in .mwfh-band-line i { transform: scaleX(1); }
	.mwfh-band.is-in .mwfh-band-ticks { opacity: 1; }
	.mwfh-band.is-in .mwfh-band-hl > li, .mwfh-band.is-in .mwfh-band-hl > li.is-down { opacity: 1; transform: none; }
	.mwfh-band.is-in .mwfh-band-35 { opacity: 1; transform: none; }
}
@media (min-width: 1100px) and (prefers-reduced-motion: reduce) {
	.mwfh-band-35-ring::after { animation: none; }
}
/* the jump bar is already there over the band */
.mwfh.is-band .mwfh-jump { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* ======================================================== journey */
.mwfh-journey {
	position: relative;
	padding: clamp(4rem, 12vh, 8rem) 0 0;
	/* timeline-fix, 2026-10-23: since the stream sits above the journey, .mwfh-ink (as tall as the
	   journey, lifted by translate -100%) reached into the viewport, and a late font reflow up there
	   counted as a screen-wide layout shift (phone CLS .66). Clipped to the journey (+1.5rem: both
	   axes, or Chrome ignores the margin); no pixel of the page changes (12 spots, phone + desktop). */
	overflow: clip;
	overflow-clip-margin: 1.5rem;
}
.mwfh-path {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: visible;
	z-index: 0;
}
.mwfh-path-base {
	fill: none;
	stroke: rgba(205, 173, 89, .3);
	stroke-width: 1.2;
	stroke-linecap: round;
	stroke-dasharray: 1 7;
}
/* the gold ink: painted once, inside a clip that two transforms slide open
   (.mwfh-ink up by H − y, .mwfh-ink-in back down by the same) — the reveal
   runs on the compositor, nothing repaints while scrolling (round 14) */
.mwfh-ink {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
	transform: translate3d(0, -100%, 0);
	will-change: transform;
}
.mwfh-ink-in {
	position: absolute;
	inset: 0;
	transform: translate3d(0, 100%, 0);
	will-change: transform;
}
.mwfh-ink-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; }
.mwfh-path-glow {
	fill: none;
	stroke: rgba(226, 197, 116, .2);
	stroke-width: 7;
	stroke-linecap: round;
}
.mwfh-path-ink {
	fill: none;
	stroke: var(--mwfh-gold);
	stroke-width: 2;
	stroke-linecap: round;
}
/* the traveller: a small layer that only moves (transform), its glow painted once */
.mwfh-traveller {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 2rem;
	height: 2rem;
	margin: -1rem 0 0 -1rem;
	border: 1px solid rgba(252, 240, 196, .55);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(226, 197, 116, .22), rgba(226, 197, 116, .06) 70%);
	pointer-events: none;
	opacity: 0;
	transition: opacity .4s;
	will-change: transform;
}
.mwfh-traveller::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: .62rem;
	height: .62rem;
	margin: -.31rem 0 0 -.31rem;
	border-radius: 50%;
	background: var(--mwfh-gold-hi);
	box-shadow: 0 0 .5rem .1rem rgba(252, 240, 196, .75);
}
.mwfh.is-travelling .mwfh-traveller { opacity: 1; }

.mwfh-stops {
	list-style: none;
	margin: 0 auto;
	padding: 0 var(--mwfe-gutter);
	width: min(100%, var(--mwfe-maxw));
	position: relative;
	z-index: 1;
}
.mwfh-stop { position: relative; margin: 0; }

/* the node — where the traveller stops; the ring of page ground around it
   makes the path seem to pass beneath */
.mwfh-node {
	--n: var(--mwfh-node);
	position: relative;
	flex: none;
	width: var(--n);
	height: var(--n);
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: radial-gradient(circle at 34% 28%, #5a1b23, var(--mwfe-bg-deep) 72%);
	border: 1px solid rgba(205, 173, 89, .45);
	box-shadow: 0 0 0 .4rem rgba(var(--mwfe-ink-rgb), .92);
	transition: border-color 0s;
}
/* the node's fades when the traveller reaches it — the gold border, the gold
   numeral, the drop shadow giving way to a glow while it is «here» — are
   painted layers cross-faded by opacity, on the compositor. Perf round
   (2026-10-12): as transitions of border-color, box-shadow and color they
   repainted the whole page on every frame of a glide (~1.5 ms a frame at
   CPU ×4). Same states, same .5 s: .mwfh-node::before = the gold border;
   .mwfh-node-shade (under the node) ::before = the drop shadow, ::after =
   the glow; the numeral is painted twice (data-r), brass and gold-hi —
   the brass numeral and border leave only once the gold ones are in (no
   dip, and the end state is the old one to the pixel). */
.mwfh-node::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: 50%;
	border: 1px solid var(--mwfh-gold);
	opacity: 0;
	transition: opacity .5s;
	pointer-events: none;
}
.mwfh-node-shade {
	position: absolute;
	inset: -1px;
	z-index: -1;
	border-radius: 50%;
	pointer-events: none;
}
.mwfh-node-shade::before,
.mwfh-node-shade::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	transition: opacity .5s;
}
.mwfh-node-shade::before { box-shadow: 0 .6rem 1.4rem rgba(0, 0, 0, .35); }
.mwfh-node-shade::after { box-shadow: 0 0 1.6rem rgba(226, 197, 116, .45); opacity: 0; }
.mwfh-node-roman {
	position: relative;
	font-family: var(--mwfe-serif);
	font-style: italic;
	font-size: calc(var(--n) * .25);
	line-height: 1;
	color: transparent;
	letter-spacing: .01em;
	white-space: nowrap;
}
.mwfh-node-roman::before,
.mwfh-node-roman::after {
	content: attr(data-r);
	position: absolute;
	top: 0;
	left: 0;
}
.mwfh-node-roman::before { color: var(--mwfe-brass); transition: opacity 0s; }
.mwfh-node-roman::after { color: var(--mwfh-gold-hi); opacity: 0; transition: opacity .5s; }
.mwfh-stop.is-reached .mwfh-node {
	border-color: transparent;
	background: radial-gradient(circle at 34% 28%, #7d2a32, #3a1418 72%);
	transition: border-color 0s .5s;
}
.mwfh-stop.is-reached .mwfh-node::before { opacity: 1; }
.mwfh-stop.is-reached .mwfh-node-roman::before { opacity: 0; transition: opacity 0s .5s; }
.mwfh-stop.is-reached .mwfh-node-roman::after { opacity: 1; }
.mwfh-node::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: 50%;
	border: 1px solid var(--mwfh-gold);
	opacity: 0;
	pointer-events: none;
}
.mwfh-stop.is-here .mwfh-node-shade::before { opacity: 0; }
.mwfh-stop.is-here .mwfh-node-shade::after { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
	.mwfh-stop.is-arriving .mwfh-node::after { animation: mwfh-ring 1.4s cubic-bezier(.2, .7, .2, 1); }
}
@keyframes mwfh-ring { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(2.3); } }

/* ---------------------------------------------- milestones (idle) */
/* Each year has its own seeded place on the road (--mx, % of the road),
   its own air (--mh) and its own poster, laid down a little askew (--tilt)
   — template-parts/page-history.php sets them inline. The poster is the
   memory hook: grey until the traveller passes, then in its own colours. */
.mwfh-stop.is-idle { padding: calc(var(--mh, 11rem) / 2) 0; }
.mwfh-mile {
	position: relative;
	left: clamp(17rem, var(--mx, 50%), calc(100% - 17rem));
	display: flex;
	align-items: center;
	gap: 1.3rem;
	width: max-content;
	transform: translateX(calc(var(--mwfh-node) / -2));
}
.mwfh-stop.is-idle.is-left .mwfh-mile {
	flex-direction: row-reverse;
	transform: translateX(calc(-100% + var(--mwfh-node) / 2));
}
.mwfh-thumb {
	position: relative;
	display: block;
	flex: none;
	height: clamp(7.5rem, 15vh, 9.5rem);
	padding: .28rem;
	background: rgba(var(--mwfe-ink-rgb), .92);
	border: 1px solid rgba(205, 173, 89, .35);
	box-shadow: 0 1.1rem 2rem -1.2rem rgba(0, 0, 0, .8);
	rotate: var(--tilt, 0deg);
	filter: saturate(.35) brightness(.7);
	transition: filter .9s ease, border-color .9s ease;
}
.mwfh-thumb img { display: block; height: 100%; width: auto; }
.mwfh-thumb noscript img { height: 100%; width: auto; }
.mwfh-stop.is-reached .mwfh-thumb { filter: none; border-color: rgba(226, 197, 116, .7); }
.mwfh-thumb--card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	aspect-ratio: 1 / 1.414;
	padding: .6rem;
	background: linear-gradient(165deg, var(--mwfe-wine), var(--mwfe-plum) 60%, var(--mwfe-bg-deep));
}
.mwfh-thumb--card svg { width: 88%; height: auto; overflow: visible; }
.mwfh-thumb--card b { font-family: var(--mwfe-serif); font-weight: 500; font-size: 1rem; letter-spacing: .08em; color: var(--mwfh-gold); }
.mwfh-mile-year {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	margin: 0;
	font-weight: 400;
}
.mwfh-stop.is-left .mwfh-mile-year { align-items: flex-end; text-align: right; }
.mwfh-mile-num {
	font-family: var(--mwfe-serif);
	font-size: clamp(2rem, 3vw, 2.7rem);
	font-weight: 500;
	line-height: 1;
	color: rgba(244, 239, 228, .42);
	transition: color .6s;
}
.mwfh-mile-ed {
	font-family: var(--mwfe-sans);
	font-size: .62rem;
	font-weight: 600;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: rgba(205, 173, 89, .55);
}
.mwfh-stop.is-reached .mwfh-mile-num { color: rgba(252, 253, 222, .82); }
.mwfh-stop.is-first .mwfh-mile-num { color: rgba(252, 253, 222, .7); }

/* the decades — landmarks on the road, so a fast scroll still knows where it is */
.mwfh-decade {
	position: relative;
	margin: 0 0 clamp(1.5rem, 5vh, 3.5rem);
	text-align: center;
	font-family: var(--mwfe-serif);
	font-weight: 500;
	font-size: clamp(4.5rem, 12vw, 10.5rem);
	line-height: .9;
	letter-spacing: -.01em;
	font-variant-numeric: lining-nums;
	font-feature-settings: "lnum" 1;
	color: transparent;
	-webkit-text-stroke: 1px rgba(205, 173, 89, .34);
	pointer-events: none;
	user-select: none;
}
.mwfh-stop.is-live .mwfh-decade { grid-column: 1 / -1; }

/* --------------------------------------------- full slides (live) */
.mwfh-stop.is-live {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: clamp(3rem, 7vw, 8rem);
	align-items: center;
	min-height: 100svh;
	padding: clamp(4rem, 11vh, 7.5rem) 0;
}
.mwfh-stop.is-live.is-right .mwfh-media { order: 2; }
.mwfh-media {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2.2rem;
	position: relative;
	/* the poster's height also answers to the column's width (cqw), so a
	   wide A-format poster never spills out of a narrow column */
	container-type: inline-size;
}
.mwfh-media .mwfh-node { --n: var(--mwfh-node-live); }

.mwfh-poster { margin: 0; position: relative; }
.mwfh-poster.is-tilted { rotate: calc(var(--tilt, 0deg) * .5); }
/* the round anniversaries (I, X, XX, XXV, XXX, XXXV): a bigger poster in a gold glow */
.mwfh-stop.is-live.is-feature .mwfh-media::before {
	content: "";
	position: absolute;
	inset: 8% -12%;
	z-index: -1;
	background: radial-gradient(50% 45% at 50% 55%, rgba(226, 197, 116, .2), transparent 70%);
	pointer-events: none;
}
.mwfh-poster-frame {
	display: block;
	position: relative;
	padding: .55rem;
	background: rgba(var(--mwfe-ink-rgb), .94);
	border: 1px solid rgba(205, 173, 89, .55);
	box-shadow: 0 2.4rem 4.5rem -1.8rem rgba(0, 0, 0, .8);
}
/* the entrances (js/history.js «the cues»): the veiled state before a slide's
   words rise and its poster lands — the motion itself is a Web Animation run
   by the compositor (never `transition`, which other rules on these elements
   set — the edition-line eggs 35-7 / 35-8 on .mwfh-ed, css/mwf-eggs.css) */
@media (prefers-reduced-motion: no-preference) {
	.mwfh-body.is-veiled > * { opacity: 0; transform: translateY(44px); }
	.mwfh-poster-frame.is-veiled { opacity: 0; visibility: hidden; transform: translateY(-64px); }
}
.mwfh-poster-frame::before {
	content: "";
	position: absolute;
	inset: -.95rem;
	border: 1px solid rgba(205, 173, 89, .26);
	pointer-events: none;
}
.mwfh-poster img {
	display: block;
	height: min(64svh, 38rem);
	height: min(64svh, 38rem, calc((100cqw - 3.2rem) * var(--pr, 2.1)));
	width: auto;
	max-width: 100%;
	object-fit: contain;
}
.mwfh-stop.is-live.is-feature .mwfh-poster img {
	height: min(72svh, 44rem);
	height: min(72svh, 44rem, calc((100cqw - 3.2rem) * var(--pr, 2.1)));
}

/* the statue card (an edition without its poster yet — 2026) */
.mwfh-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	height: min(64svh, 38rem);
	height: min(64svh, 38rem, calc((100cqw - 3.2rem) * 1.414));
	aspect-ratio: 1 / 1.414;
	max-width: 100%;
	padding: 2.2rem 1.6rem 2rem;
	text-align: center;
	background:
		radial-gradient(70% 45% at 50% 42%, rgba(226, 197, 116, .2), transparent 70%),
		linear-gradient(165deg, var(--mwfe-wine) 0%, var(--mwfe-plum) 55%, var(--mwfe-bg-deep) 100%);
}
.mwfh-card-roman {
	font-family: var(--mwfe-serif);
	font-size: clamp(2.4rem, 4vw, 3.6rem);
	font-weight: 500;
	letter-spacing: .08em;
	line-height: 1;
	color: var(--mwfh-gold);
}
.mwfh-card-statue { width: 86%; height: auto; overflow: visible; }
.mwfh-card-name {
	font-family: var(--mwfe-serif);
	font-size: clamp(1.4rem, 2.2vw, 2rem);
	line-height: 1.05;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mwfe-cream);
}
.mwfh-card-when {
	font-family: var(--mwfe-sans);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--mwfe-brass);
}

/* the words */
.mwfh-body { position: relative; max-width: 34rem; }
.mwfh-stop.is-live.is-right .mwfh-body { justify-self: end; }
.mwfh-ed {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .9rem;
	margin: 0 0 .4rem;
	font-family: var(--mwfe-sans);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--mwfe-brass);
}
.mwfh-ed > span:first-child {
	font-family: var(--mwfe-serif);
	font-style: italic;
	font-size: 1.35rem;
	letter-spacing: .02em;
	text-transform: none;
	color: var(--mwfe-gold-light);
}
.mwfh-draft {
	display: inline-block;
	padding: .35em .9em;
	border: 1px dashed rgba(240, 198, 116, .7);
	border-radius: 999px;
	font-size: .58rem;
	letter-spacing: .22em;
	color: #f0c674;
}
.mwfh-year {
	margin: 0 0 1rem;
	font-family: var(--mwfe-serif);
	font-weight: 500;
	font-size: clamp(5rem, 10.5vw, 9.5rem);
	line-height: .86;
	letter-spacing: -.02em;
	font-variant-numeric: lining-nums;
	font-feature-settings: "lnum" 1;
	color: transparent;
	-webkit-text-stroke: 1px var(--mwfe-brass);
	text-stroke: 1px var(--mwfe-brass);
}
.mwfh-when {
	margin: 0 0 1.5rem;
	font-family: var(--mwfe-sans);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--mwfe-cream-dim);
}
.mwfh-title {
	margin: 0 0 1rem;
	font-family: var(--mwfe-serif);
	font-weight: 500;
	font-size: clamp(1.7rem, 2.7vw, 2.5rem);
	line-height: 1.15;
	color: var(--mwfe-gold-light);
	text-wrap: balance;
}
.mwfh-text p {
	margin: 0;
	font-size: 1.16rem;
	line-height: 1.65;
	color: var(--mwfe-cream-dim);
}
.mwfh-stats {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem 2.4rem;
	margin: 1.8rem 0 0;
	padding: 0;
}
.mwfh-stats li { display: flex; flex-direction: column; gap: .2rem; }
.mwfh-stats b {
	position: relative;
	font-family: var(--mwfe-serif);
	font-weight: 500;
	font-size: clamp(2.2rem, 3.4vw, 3rem);
	line-height: 1;
	color: var(--mwfh-gold);
}
/* the count-up (js/history.js): the running figure is a layer over the final
   one, which keeps the box; size + layout containment make the layer a
   relayout boundary, so a digit change never lays the journey out again */
.mwfh-stats b.is-counting { color: transparent; }
.mwfh-count-run {
	position: absolute;
	inset: 0;
	contain: size layout;
	white-space: nowrap;
	color: var(--mwfh-gold);
	pointer-events: none;
}
/* the label only — never the running figure (a span inside the b): it once took the label's
   small grey capitals while it counted (owner, 2026-10-13) */
.mwfh-stats li > span {
	font-family: var(--mwfe-sans);
	font-size: .64rem;
	font-weight: 600;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--mwfe-cream-dim);
}
.mwfh-facts {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 1.5rem 0 0;
	padding: 0;
}
.mwfh-facts li {
	padding: .5em 1.05em;
	border: 1px solid var(--mwfe-line);
	border-radius: 999px;
	font-family: var(--mwfe-sans);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .1em;
	color: var(--mwfe-cream);
	background: rgba(var(--mwfe-ink-rgb), .6);
}
.mwfh-symbol:empty { display: none; }

/* a year's Leitmotiv — one italic line under the headline (2005: the first) */
.mwfh-motto {
	margin: 0 0 1.1rem;
	padding-left: 1rem;
	border-left: 1px solid var(--mwfe-brass);
	font-family: var(--mwfe-serif);
	font-style: italic;
	font-size: 1.12rem;
	line-height: 1.5;
	color: var(--mwfe-gold-light);
}
.mwfh-motto span {
	display: block;
	margin-bottom: .2rem;
	font-family: var(--mwfe-sans);
	font-style: normal;
	font-size: .62rem;
	font-weight: 600;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--mwfe-brass);
}
.mwfh-motto q { quotes: "«" "»"; }
:lang(de) .mwfh-motto q { quotes: "„" "“"; }
:lang(en) .mwfh-motto q { quotes: "“" "”"; }

/* a period logo on a cream plate (1997: Gourmet's International) — original colours, never reversed */
.mwfh-plate {
	display: inline-block;
	margin: 1.6rem 0 0;
	padding: .75rem 1.1rem;
	background: var(--mwfe-cream);
	border-radius: .3rem;
	box-shadow: 0 .9rem 1.8rem -1.1rem rgba(0, 0, 0, .75);
}
.mwfh-plate img { display: block; height: 2.6rem; width: auto; }

/* the old mark behind a slide (1993: the glass on its torn square plate,
   inc/mwf-history-glass.php) — original colours, laid large and a little
   askew behind the words, quiet enough to read through; it never moves */
.mwfh-stop.has-backdrop { isolation: isolate; }
.mwfh-backdrop {
	position: absolute;
	z-index: -1;
	top: 50%;
	width: clamp(18rem, 30vw, 30rem);
	pointer-events: none;
	opacity: .11;
	transform: translate(-50%, -50%) rotate(-5deg);
}
.mwfh-stop.is-right .mwfh-backdrop { left: 27%; }
.mwfh-stop.is-left .mwfh-backdrop { left: 73%; transform: translate(-50%, -50%) rotate(5deg); }
.mwfh-backdrop svg { display: block; width: 100%; height: auto; }
/* 2017: the WineHunter emblem on the white disc of its Award seal — a logo,
   so upright (no tilt), original colours, as faint as the 1993 mark */
.mwfh-backdrop--wh { width: clamp(17rem, 27vw, 27rem); }
.mwfh-stop.is-left .mwfh-backdrop--wh, .mwfh-stop.is-right .mwfh-backdrop--wh { transform: translate(-50%, -50%); }
/* 2005: the Wine & Culinary Award seal on its cream disc, its lettering round the rim
   (inc/mwf-history-award05.php) — a seal, so upright like the 2017 one, as faint — and
   its medal, the bottle tag (img/history/award-2005-medal.webp), resting on the lower
   rim beside the counters, a little stronger; each carries its own opacity */
.mwfh-backdrop--award { width: clamp(18rem, 29vw, 29rem); }
.mwfh-backdrop.mwfh-backdrop--award { opacity: 1; }
.mwfh-backdrop--award svg { opacity: .11; }
.mwfh-stop.is-left .mwfh-backdrop--award, .mwfh-stop.is-right .mwfh-backdrop--award { transform: translate(-50%, -50%); }
.mwfh-award-medal {
	position: absolute;
	left: 96%;
	top: 84%;
	width: 44%;
	height: auto;
	opacity: .42;
	transform: translate(-50%, -50%) rotate(8deg);
}
/* (the medal and the 2016 emblem were the buttons of eggs 35-9 / 35-10 until 2026-10-14;
   their photos are the 2005 and 2016 galleries now — both are plain pictures again) */
/* 2005: «Meran(o)» — the o faded, Meran and Merano at once (owner) */
.mwfh-fade-o { opacity: .38; }
/* the owner's artwork behind a slide (2026-10-13 …): the couple, the Catwalk Champagne logo,
   the horse, the glass, the Kurhaus, the amphora, the NoLow seal, Tischler's cartoon —
   decoration only, each at its own faintness (--art-o) */
.mwfh-backdrop--art { opacity: var(--art-o, .11); }
.mwfh-backdrop--art img, .mwfh-backdrop--art svg { display: block; width: 100%; height: auto; }
/* 2014: the couple stands upright in a soft cream spotlight, so the dark suit and dress read
   on the dark ground and not only the faces float */
.mwfh-art--elegance { --art-o: .25; width: clamp(10rem, 15vw, 15.5rem); }
.mwfh-stop.is-left .mwfh-art--elegance, .mwfh-stop.is-right .mwfh-art--elegance { transform: translate(-50%, -50%); }
.mwfh-art--elegance img { background: radial-gradient(closest-side, rgba(244, 239, 228, .95), rgba(244, 239, 228, .45) 58%, rgba(244, 239, 228, 0)); }
/* 2015: the Catwalk Champagne logo, no plate — subtle behind the words like the others; owner
   2026-10-13: 1.5 × bigger and all white (the svg keeps its original colours, CSS whitens it) */
.mwfh-art--catwalk { --art-o: .16; width: clamp(30rem, 51vw, 51rem); }
.mwfh-art--catwalk path { fill: #fff; }
/* 2017: the rearing horse of «ippodromo» (owner, 2026-10-13), in white — its own wine red would
   vanish on the page — upright behind the words */
.mwfh-art--ippodromo { --art-o: .14; width: clamp(14rem, 20vw, 20rem); }
.mwfh-stop.is-left .mwfh-art--ippodromo, .mwfh-stop.is-right .mwfh-art--ippodromo { transform: translate(-50%, -50%); }
/* 2025 (2024 until 2026-10-14): the «The WH Award · NoLow Alcohol» seal, original colours, upright like the 2016 seal */
.mwfh-art--nolow { --art-o: .14; width: clamp(17rem, 27vw, 27rem); }
.mwfh-stop.is-left .mwfh-art--nolow, .mwfh-stop.is-right .mwfh-art--nolow { transform: translate(-50%, -50%); }
/* 2024: the «@mphoRa Evolution» logo (owner, 2026-10-14), white like the 2017 horse — its black,
   plum and wine red would vanish on the page; upright, a tall drawing (561 × 927) */
.mwfh-art--amphora { --art-o: .14; width: clamp(14rem, 19vw, 19rem); }
.mwfh-stop.is-left .mwfh-art--amphora, .mwfh-stop.is-right .mwfh-art--amphora { transform: translate(-50%, -50%); }
/* 1999: the Culinaria & Vitis logo — a glass whose stem curls into a C, gold on wine in its gold
   frame — original colours (owner, 2026-10-14): the gold reads, the dark grounds melt in; upright */
.mwfh-art--culinariavitis { --art-o: .2; width: clamp(15rem, 22vw, 22rem); }
.mwfh-stop.is-left .mwfh-art--culinariavitis, .mwfh-stop.is-right .mwfh-art--culinariavitis { transform: translate(-50%, -50%); }
/* 2012: Peppi Tischler's cartoon for the Meran WineFestival — two men raising their glasses under
   the old mark — in the page's gold (owner, 2026-10-13), upright */
.mwfh-art--tischler { --art-o: .16; width: clamp(22rem, 36vw, 36rem); }
.mwfh-stop.is-left .mwfh-art--tischler, .mwfh-stop.is-right .mwfh-art--tischler { transform: translate(-50%, -50%); }
/* 2019: the Kurhaus drawing (owner, 2026-10-13), white, upright — a vector, sharp at any size */
.mwfh-art--kurhaus { --art-o: .13; width: clamp(18rem, 28vw, 28rem); }
.mwfh-stop.is-left .mwfh-art--kurhaus, .mwfh-stop.is-right .mwfh-art--kurhaus { transform: translate(-50%, -50%); }
/* 2018: the tall glass — a 286 px drawing, kept under ~23rem tall so it stays sharp */
.mwfh-art--glass { --art-o: .16; width: clamp(6.5rem, 8.5vw, 8.8rem); }
/* 2026: the Gusto Nobile Basilicata mark (owner, 2026-10-17) — the glass of wine, the fork, the emblem
   and the Castello Aragonese of Venosa — original colours, upright. It carries egg 35-12, which lights
   it up (css/mwf-eggs.css): so the faintness sits on the drawing, not on the frame */
.mwfh-art--gustonobile { --art-o: 1; width: clamp(12rem, 17.5vw, 17.5rem); } /* a bit smaller since the Calabria mark came (owner, 2026-10-17) */
.mwfh-art--gustonobile > img:first-child { opacity: .16; }

/* the fourteen years that had no backdrop (2026-10-22, the archive sweep's picks): upright, faint */
.mwfh-art--wineemotions { --art-o: .16; width: clamp(14rem, 21vw, 21rem); }
.mwfh-stop.is-left .mwfh-art--wineemotions, .mwfh-stop.is-right .mwfh-art--wineemotions { transform: translate(-50%, -50%); }
.mwfh-art--alembic { --art-o: .16; width: clamp(17rem, 25vw, 25rem); }
.mwfh-stop.is-left .mwfh-art--alembic, .mwfh-stop.is-right .mwfh-art--alembic { transform: translate(-50%, -50%); }
.mwfh-art--saintemilion { --art-o: .15; width: clamp(7.5rem, 10.5vw, 10.5rem); }
.mwfh-stop.is-left .mwfh-art--saintemilion, .mwfh-stop.is-right .mwfh-art--saintemilion { transform: translate(-50%, -50%); }
.mwfh-art--sails { --art-o: .18; width: clamp(22rem, 34vw, 34rem); }
.mwfh-stop.is-left .mwfh-art--sails, .mwfh-stop.is-right .mwfh-art--sails { transform: translate(-50%, -50%); }
.mwfh-art--chalice { --art-o: .13; width: clamp(11rem, 16vw, 16rem); }
.mwfh-stop.is-left .mwfh-art--chalice, .mwfh-stop.is-right .mwfh-art--chalice { transform: translate(-50%, -50%); }
.mwfh-art--glasses { --art-o: .16; width: clamp(22rem, 36vw, 36rem); }
.mwfh-stop.is-left .mwfh-art--glasses, .mwfh-stop.is-right .mwfh-art--glasses { transform: translate(-50%, -50%); }
.mwfh-art--frauenkirche { --art-o: .14; width: clamp(12rem, 17vw, 17rem); }
.mwfh-stop.is-left .mwfh-art--frauenkirche, .mwfh-stop.is-right .mwfh-art--frauenkirche { transform: translate(-50%, -50%); }
.mwfh-art--culinaria { --art-o: .2; width: clamp(22rem, 34vw, 34rem); }
.mwfh-stop.is-left .mwfh-art--culinaria, .mwfh-stop.is-right .mwfh-art--culinaria { transform: translate(-50%, -50%); }
.mwfh-art--gourmetarena { --art-o: .13; width: clamp(22rem, 32vw, 32rem); }
.mwfh-stop.is-left .mwfh-art--gourmetarena, .mwfh-stop.is-right .mwfh-art--gourmetarena { transform: translate(-50%, -50%); }
.mwfh-art--kantharos { --art-o: .16; width: clamp(12rem, 17vw, 17rem); }
.mwfh-stop.is-left .mwfh-art--kantharos, .mwfh-stop.is-right .mwfh-art--kantharos { transform: translate(-50%, -50%); }
.mwfh-art--award { --art-o: .14; width: clamp(15rem, 22vw, 22rem); }
.mwfh-stop.is-left .mwfh-art--award, .mwfh-stop.is-right .mwfh-art--award { transform: translate(-50%, -50%); }
.mwfh-art--vinchapeau { --art-o: .17; width: clamp(20rem, 30vw, 30rem); }
.mwfh-stop.is-left .mwfh-art--vinchapeau, .mwfh-stop.is-right .mwfh-art--vinchapeau { transform: translate(-50%, -50%); }
.mwfh-art--shockcuisine { --art-o: .12; width: clamp(13rem, 18vw, 18rem); }
.mwfh-stop.is-left .mwfh-art--shockcuisine, .mwfh-stop.is-right .mwfh-art--shockcuisine { transform: translate(-50%, -50%); }
.mwfh-art--chefschallenge { --art-o: .14; width: clamp(22rem, 34vw, 34rem); }
.mwfh-stop.is-left .mwfh-art--chefschallenge, .mwfh-stop.is-right .mwfh-art--chefschallenge { transform: translate(-50%, -50%); }
.mwfh-stop.is-left .mwfh-art--gustonobile, .mwfh-stop.is-right .mwfh-art--gustonobile { transform: translate(-50%, -50%); }
/* the owner's logos laid behind a slide as decoration (2026-10-17; owner: «more background», «semi
   transparent», a light overlap): upright and faint, behind the words and under the poster (z −1),
   each placed on its own — --dx/--dy its centre in % of the stop, --dw its width, --do its faintness */
.mwfh-stop .mwfh-backdrop.mwfh-decor { left: var(--dx); top: var(--dy); width: var(--dw); opacity: var(--do, .28); transform: translate(-50%, -50%); }
.mwfh-decor img { display: block; width: 100%; height: auto; }
/* 2016: wine & siena over the lower right edge of the Award emblem (which sits at 27 % / 50 %) */
.mwfh-decor--winesiena { --dx: 46%; --dy: 64%; --dw: clamp(14rem, 20vw, 20rem); --do: .3; }
/* 2021: Catwalk Rosé in the gap left of the poster */
.mwfh-decor--catwalkrose { --dx: 50.5%; --dy: 64%; --dw: clamp(12rem, 17vw, 16.5rem); --do: .3; }
/* 2023: the Ambassador and Royal Tasting in the middle, between the poster and the words (a gap of ~13 % of the
   stop), lying under the small rows — the theme, the paragraph, the links — never the year or the counters;
   the Ambassador the larger */
.mwfh-decor--ambassador { --dx: 52.5%; --dy: 51%; --dw: clamp(14rem, 20vw, 18rem); --do: .24; }
.mwfh-decor--royaltasting { --dx: 50.5%; --dy: 76%; --dw: clamp(9rem, 11.5vw, 11rem); --do: .24; }
/* the archive sweep's extras (2026-10-22): each in the gap between the words and the poster, at the height of
   the line that speaks of it — 1997 the garland on the ship itself (the ship's own box: width, left, top edge
   and tilt; its frame runs lower for the grapes, so the box is lifted by the ship's half height) */
.mwfh-decor--garland { --dx: 26%; --dy: 56%; --dw: clamp(24rem, 40vw, 40rem); --do: .3; }
.mwfh-stop .mwfh-backdrop.mwfh-decor--garland { transform: translate(-50%, -43.9%) rotate(-2deg); transform-origin: 50% 43.9%; }
.mwfh-stop.is-left .mwfh-backdrop.mwfh-decor--garland { --dx: 74%; transform: translate(-50%, -43.9%) rotate(2deg); }
.mwfh-decor--animaterra { --dx: 54.5%; --dy: 77.5%; --dw: clamp(11rem, 15vw, 14rem); --do: .3; }
.mwfh-decor--annullo { --dx: 45.5%; --dy: 64%; --dw: clamp(9rem, 12vw, 11.5rem); --do: .24; }
.mwfh-decor--clubexcellence { --dx: 45.5%; --dy: 58%; --dw: clamp(7.5rem, 10vw, 9.5rem); --do: .24; }
.mwfh-decor--cult { --dx: 54.5%; --dy: 43%; --dw: clamp(11rem, 15vw, 14rem); --do: .26; }
.mwfh-decor--thecircle { --dx: 54.5%; --dy: 73%; --dw: clamp(11rem, 15vw, 14rem); --do: .24; }
.mwfh-decor--naturae { --dx: 50.5%; --dy: 45.5%; --dw: clamp(7rem, 9vw, 8.5rem); --do: .3; }
@media (min-width: 901px) and (max-width: 1365px) {
	/* small desks: the gap between poster and words is barely 90px — slide them toward the words, so
	   the poster hides none of them */
	.mwfh-decor--catwalkrose { --dx: 47%; }
	.mwfh-decor--ambassador { --dx: 57%; }
	.mwfh-decor--royaltasting { --dx: 53.5%; }
}
/* a year's mark in the pocket right of its numeral (2026: the Merano WineFestival Calabria mark,
   owner 2026-10-17) — original colours, more present than the art behind the words, and never
   under a line of words: it stands on the body's right edge with its foot just above the date
   line and reaches up past the body's top (at most 10rem; .9rem on phones, clear of the poster's frame),
   as wide as the room right of the numeral allows. Everything follows the numeral's own size
   --yf (the same clamp as .mwfh-year): measured, the numeral ends at 1.806 × --yf and the date
   line starts at 3.68rem + .867 × --yf below the body's top, at every width. The anchor has no
   height; the picture hangs from its foot (.mwfh-badge-in). It carries egg 35-13 (css/mwf-eggs.css). */
.mwfh-badge {
	--yf: clamp(5rem, 10.5vw, 9.5rem);
	--bt: calc(2.78rem + .867 * var(--yf));
	--ar: .5435;   /* the picture's width / height (set by the template) */
	--bmax: 11.5rem;
	position: absolute;
	z-index: 1;
	right: 0;
	top: var(--bt);
	height: 0;
	width: min(calc(100% - 1.806 * var(--yf) - 1.1rem), calc((10rem + var(--bt)) * var(--ar)), var(--bmax));
}
.mwfh-badge-in { position: absolute; right: 0; bottom: 0; width: 100%; aspect-ratio: var(--ar); }
.mwfh-badge-in > img { display: block; width: 100%; height: 100%; opacity: .5; }
/* 2021: the Cult Oenologist logo (owner, 2026-10-17), a wordmark: it stands on the date line beside the numeral */
.mwfh-badge--cult21 { --bmax: 15rem; }

/* a year's compact logos (owner, 2026-10-17: 2025 the Amphora gold medal; $E[year]['marks'],
   img/history/bg/ from tools-assets/history/marks.py), never under a line of words: in the gutter
   between the words and the poster from 1280px, where it is wide enough (clamp(3rem, 7vw, 8rem)
   between the columns plus the poster's own margin, measured ≥ 2.2vw); below that a row under the words. */
.mwfh-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem 2.2rem; margin: 2.2rem 0 0; }
.mwfh-mark { display: block; flex: none; height: var(--mk-h, 3rem); aspect-ratio: var(--ar); }
.mwfh-mark > img { display: block; width: 100%; height: 100%; opacity: .55; }
.mwfh-mark--amphoragold { --mk-h: 6.4rem; }
@media (min-width: 1280px) {
	.mwfh-body > .mwfh-marks {
		position: absolute;
		top: 0;
		bottom: 0;
		width: calc(clamp(3rem, 7vw, 8rem) + 2.2vw - 2.4rem);
		margin: 0;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: center;
		gap: 3.2rem;
	}
	.mwfh-stop.is-right .mwfh-body > .mwfh-marks { left: calc(100% + 1.3rem); }
	.mwfh-stop.is-left .mwfh-body > .mwfh-marks { right: calc(100% + 1.3rem); }
	.mwfh-body > .mwfh-marks .mwfh-mark { height: auto; width: min(100%, var(--mk-w, 100%)); }
}
.mwfh-stop.is-left .mwfh-art--gustonobile { left: 70%; } /* a little left, clear of the Calabria mark */
@media (min-width: 901px) and (max-width: 1320px) {
	.mwfh-award-medal { left: 104%; top: 98%; width: 40%; } /* narrower desks: clear of the counters' labels */
}
@media (max-width: 900px) {
	.mwfh-backdrop { top: 74%; left: 56% !important; width: 74vw; opacity: .09; } /* phones: behind the words, under the poster */
	.mwfh-backdrop--award svg { opacity: .09; }
	.mwfh-award-medal { left: 74%; top: 88%; width: 40%; opacity: .32; }
	.mwfh-backdrop.mwfh-backdrop--art { opacity: var(--art-o, .09); }
	.mwfh-art--elegance { --art-o: .18; width: 34vw; }
	.mwfh-art--glass { --art-o: .14; width: 21vw; }
	.mwfh-art--ippodromo { --art-o: .12; width: 46vw; }
	.mwfh-art--amphora { --art-o: .12; width: 42vw; }
	.mwfh-art--tischler { width: 86vw; }
	.mwfh-art--culinariavitis { width: 52vw; }
	.mwfh-art--catwalk { width: 88vw; } /* as big as a phone allows: the frame's left is held at 56% */
	.mwfh-art--gustonobile { width: min(60vw, 17.5rem); }
	.mwfh-art--wineemotions { width: 52vw; }
	.mwfh-art--alembic { width: 62vw; }
	.mwfh-art--saintemilion { width: 26vw; }
	.mwfh-art--sails { width: 86vw; }
	.mwfh-art--chalice { width: 42vw; }
	.mwfh-art--glasses { width: 86vw; }
	.mwfh-art--frauenkirche { width: 44vw; }
	.mwfh-art--culinaria { width: 86vw; }
	.mwfh-art--gourmetarena { width: 84vw; }
	.mwfh-art--kantharos { width: 44vw; }
	.mwfh-art--award { width: 56vw; }
	.mwfh-art--vinchapeau { width: 80vw; }
	.mwfh-art--shockcuisine { width: 46vw; }
	.mwfh-art--chefschallenge { width: 86vw; }
	/* phones: the decoration behind the words, under the poster, like the other backgrounds */
	.mwfh-stop .mwfh-backdrop.mwfh-decor { left: var(--pdx, 56%) !important; top: var(--pdy, 74%); width: var(--pdw, 60vw); opacity: var(--pdo, .15); }
	.mwfh-decor--winesiena { --pdy: 86%; --pdw: 62vw; }
	.mwfh-decor--catwalkrose { --pdy: 71%; --pdw: 50vw; }
	.mwfh-decor--ambassador { --pdy: 64%; --pdw: 70vw; }
	.mwfh-decor--royaltasting { --pdy: 84%; --pdw: 56vw; }
	.mwfh-decor--garland { --pdx: 54%; --pdy: 56%; --pdw: 92vw; --pdo: .3; }   /* the ship stays at 56 % on phones */
	.mwfh-decor--animaterra { --pdy: 88%; --pdw: 62vw; --pdo: .2; }
	.mwfh-decor--annullo { --pdx: 72%; --pdy: 88%; --pdw: 34vw; }
	.mwfh-decor--clubexcellence { --pdy: 84%; --pdw: 30vw; }
	.mwfh-decor--cult { --pdy: 91%; --pdw: 46vw; --pdo: .13; }
	.mwfh-decor--thecircle { --pdy: 88%; --pdw: 52vw; }
	.mwfh-decor--naturae { --pdx: 80%; --pdy: 56%; --pdw: 24vw; --pdo: .2; }
	.mwfh-art--gustonobile > img:first-child { opacity: .12; }
	/* phones: the numeral is clamp(4rem, 19vw, 6rem); the edition line above it (11.3rem wide) is the
	   one to clear, since the mark reaches up beside it; on the narrowest phones it stays under it */
	.mwfh-badge {
		--yf: clamp(4rem, 19vw, 6rem);
		width: clamp(2.4rem, calc(100% - 12.1rem), calc((.9rem + var(--bt)) * var(--ar)));
	}
	/* a wordmark is low: it stays under the edition line, so only the numeral is to clear */
	.mwfh-badge.is-wide { width: min(calc(100% - 1.806 * var(--yf) - .8rem), calc((var(--bt) - 2.6rem) * var(--ar)), var(--bmax)); }
}

/* the ship of 1997 (inc/mwf-history-ship.php), laid in the slide's background
   like the 1993 mark (owner, 2026-10-12): large and faint behind the words, a
   gold line drawing (its colour layer stays below the clip's tide). It was egg
   35-6 until 2026-10-14; its photos are the 1997 gallery now. */
.mwfh-backdrop--ship {
	width: clamp(24rem, 40vw, 40rem);
	color: var(--mwfh-gold, #cdad59);
	opacity: .3;
	transform: translate(-50%, -50%) rotate(-2deg);
}
.mwfh-stop.is-right .mwfh-backdrop--ship { left: 26%; top: 56%; }
.mwfh-stop.is-left .mwfh-backdrop--ship { left: 74%; top: 56%; transform: translate(-50%, -50%) rotate(2deg); }
.mwfh-ship-svg { display: block; width: 100%; height: auto; overflow: visible; }
.mwfh-ship-line path { fill: none; stroke: currentColor; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.mwfh-ship-line .s-rig { stroke-width: .9; opacity: .8; }
.mwfh-ship-line .s-thin { stroke-width: 1; opacity: .6; }
.mwfh-ship-fill .s-hull { fill: url(#mwfh-ship-wood); }
.mwfh-ship-fill .s-plank { fill: none; stroke: #4f2d14; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.mwfh-ship-fill .s-wood { fill: #4a2c16; }
.mwfh-ship-fill .s-sail { fill: url(#mwfh-ship-cloth); }
.mwfh-ship-fill .s-red { fill: #c0392b; }
.mwfh-ship-fill .s-redline { fill: none; stroke: #c0392b; stroke-width: 2.4; }
.mwfh-ship-fill .s-seed { fill: #efe6cf; }
.mwfh-ship-fill .s-spar { fill: none; stroke: #4a2c16; stroke-width: 3.2; stroke-linecap: round; }
@media (max-width: 900px) {
	.mwfh-backdrop--ship { top: 70%; left: 54% !important; width: 92vw; opacity: .3; }
}

/* «what happened in <year>» — the drawer under each slide */
.mwfh-more { margin: 1.7rem 0 0; border-top: 1px solid var(--mwfe-line); }
.mwfh-more summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 0;
	list-style: none;
	cursor: pointer;
	font-family: var(--mwfe-sans);
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--mwfe-brass);
	transition: color .3s;
}
.mwfh-more summary::-webkit-details-marker { display: none; }
.mwfh-more summary:hover, .mwfh-more summary:focus-visible { color: var(--mwfh-gold-hi); }
.mwfh-more summary i {
	flex: none;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border: 1px solid var(--mwfe-brass);
	border-radius: 50%;
	font-style: normal;
	font-size: 1.15rem;
	line-height: 1;
	letter-spacing: 0;
	transition: transform .45s cubic-bezier(.2, .7, .2, 1), background .3s, color .3s;
}
.mwfh-more[open] summary i { transform: rotate(45deg); background: var(--mwfe-brass); color: var(--mwfe-bg-deep); }
.mwfh-more ul { list-style: none; margin: 0; padding: 0 0 .8rem; }
.mwfh-more li {
	position: relative;
	padding: .42rem 0 .42rem 1.5rem;
	font-size: 1.04rem;
	line-height: 1.55;
	color: var(--mwfe-cream-dim);
}
.mwfh-more li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.12em;
	width: .75rem;
	height: 1px;
	background: var(--mwfe-brass);
}
/* a line about a section of today's festival (owner, 2026-10-17, in place of the «→ today» rows): its
   dash bends into an arrow pointing up — toward today — one brass line, as wide and as fine as the dash,
   and opens that page; the hit area is larger than the line, clear of the words */
.mwfh-more li.has-to::before { content: none; }
.mwfh-to {
	position: absolute;
	left: -.625rem;
	top: calc(1.12em - .9rem);
	display: grid;
	place-items: center;
	width: 2rem;
	height: 1.8rem;
	color: var(--mwfe-brass);
	-webkit-tap-highlight-color: transparent;
	transition: color .3s;
}
.mwfh-to svg { display: block; width: .75rem; height: .5rem; overflow: visible; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.mwfh-to path { fill: none; stroke: currentColor; stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.mwfh-to:hover, .mwfh-to:focus-visible { color: var(--mwfh-gold-hi); }
.mwfh-to:hover svg, .mwfh-to:focus-visible svg { transform: translateY(-.15rem); }
.mwfh-to:focus-visible { outline: 1px solid var(--mwfh-gold-hi); outline-offset: -.3rem; border-radius: .2rem; }
/* a chip that leads to today's festival: the whole chip opens the page, the same bent line before its words */
.mwfh-facts li.has-to { padding: 0; transition: border-color .3s; }
.mwfh-facts li.has-to > a {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	padding: .5em 1.05em .5em .9em;
	border-radius: inherit;
	color: inherit;
	text-decoration: none;
}
.mwfh-facts li.has-to svg { flex: none; width: .75rem; height: .5rem; overflow: visible; color: var(--mwfe-brass); transition: transform .35s cubic-bezier(.2, .7, .2, 1), color .3s; }
.mwfh-facts li.has-to path { fill: none; stroke: currentColor; stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.mwfh-facts li.has-to:hover, .mwfh-facts li.has-to:focus-within { border-color: rgba(205, 173, 89, .7); }
.mwfh-facts li.has-to:hover svg, .mwfh-facts li.has-to:focus-within svg { color: var(--mwfh-gold-hi); transform: translateY(-.12rem); }

/* the posters open in the viewer (js/history.js) */
.mwfh-poster-frame[role="button"] { cursor: zoom-in; }
.mwfh-poster-frame[role="button"]:focus-visible { outline: 2px solid var(--mwfh-gold); outline-offset: .5rem; }
.mwfh-viewer {
	position: fixed;
	inset: 0;
	z-index: 45;
	display: grid;
	place-items: center;
	padding: 3.2rem 1rem 3.4rem;
	cursor: zoom-out;
	touch-action: none;
	overscroll-behavior: contain;
}
/* every moving part of the zoom is its own compositor layer — the backdrop
   fades by opacity (no backdrop blur), the big poster only moves (round 37:
   one fluid flight from the slide poster, no «drop» copy any more) */
.mwfh-viewer-bg {
	position: absolute;
	inset: 0;
	background: rgba(var(--mwfe-ink-rgb), .94);
	will-change: opacity;
}
.mwfh-viewer[hidden] { display: none; }
.mwfh-viewer-img {
	display: block;
	width: auto;
	height: auto;
	max-width: min(92vw, 60rem);
	max-height: calc(100svh - 7rem);
	position: relative;
	z-index: 2;
	will-change: transform, opacity;
	border-radius: .35rem;
	box-shadow: 0 2.4rem 5rem -1.6rem rgba(0, 0, 0, .9);
}
.mwfh-viewer-cap {
	position: absolute;
	z-index: 3;
	left: 0;
	right: 0;
	bottom: 1rem;
	margin: 0;
	text-align: center;
	font-family: var(--mwfe-serif);
	font-style: italic;
	font-size: 1.2rem;
	color: var(--mwfh-gold);
}
.mwfh-viewer-close, .mwfh-gal-close {
	position: absolute;
	z-index: 3;
	top: 1rem;
	right: 1rem;
	display: grid;
	place-items: center;
	width: 2.8rem;
	height: 2.8rem;
	border: 1px solid var(--mwfe-brass);
	border-radius: 50%;
	background: rgba(var(--mwfe-ink-rgb), .6);
	color: var(--mwfe-gold-light);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}
.mwfh-viewer-close:hover, .mwfh-viewer-close:focus-visible,
.mwfh-gal-close:hover, .mwfh-gal-close:focus-visible { background: var(--mwfe-brass); color: var(--mwfe-bg-deep); }

/* ------------------------------------------------- the year galleries
   (owner, 2026-10-14: «make all h2 mwfh-year open small foto gallery
   carousels and smooth swipe gallery for mobile») — a year with photos
   turns its numeral into a button; the gallery is one dialog js/history.js
   fills. The photos keep their own shape (never cropped): every print is as
   tall as --gh unless that would make it wider than --gw. Motion is
   transform/opacity only; the strip is a native scroller with snap points
   (the browser's own swipe and momentum), its prints eased by js/history.js. */
.mwfh-year-btn {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: .5rem 1.1rem;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: inherit;
	text-align: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.mwfh-year-btn:focus-visible { outline: 1px solid var(--mwfh-gold); outline-offset: .5rem; }
.mwfh-year-num { position: relative; display: block; }
/* the gold that comes into the outline under the pointer: a painted layer that only fades */
.mwfh-year-num::after {
	content: attr(data-y);
	position: absolute;
	inset: 0;
	color: var(--mwfh-gold);
	-webkit-text-stroke-width: 0;
	opacity: 0;
	transition: opacity .5s ease;
	pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
	.mwfh-year-btn:hover .mwfh-year-num::after { opacity: .3; }
	.mwfh-year-btn:hover .mwfh-year-tag { border-color: var(--mwfe-brass); color: var(--mwfh-gold); }
}
.mwfh-year-btn:focus-visible .mwfh-year-num::after { opacity: .3; }
.mwfh-year-tag {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 1.05rem;
	padding: .5rem .85rem .5rem .7rem;
	border: 1px solid rgba(205, 173, 89, .45);
	border-radius: 999px;
	font-family: var(--mwfe-sans);
	font-size: .62rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .24em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--mwfe-brass);
	-webkit-text-stroke-width: 0;
}
.mwfh-year-tag svg { display: block; width: 1.1rem; height: auto; fill: none; stroke: currentColor; stroke-width: 1.2; }
/* while its copy flies to the gallery and back, the numeral itself steps aside */
.mwfh-year-btn.is-away .mwfh-year-num { opacity: 0; }

.mwfh-gallery {
	--gh: clamp(13rem, calc(100svh - 26rem), 34rem); /* a print's height … */
	--gw: min(58vw, 54rem);                          /* … unless it would be wider than this */
	position: fixed;
	inset: 0;
	z-index: 46;
	display: grid;
	place-items: center;
	padding: clamp(.8rem, 3vh, 2rem) clamp(.8rem, 3vw, 2.5rem);
	touch-action: none;
	overscroll-behavior: contain;
}
.mwfh-gallery[hidden] { display: none; }
/* laid out unseen while a hand presses the numeral (js/history.js ready()) */
.mwfh-gallery.is-staged { visibility: hidden; pointer-events: none; }
.mwfh-gal-bg { position: absolute; inset: 0; background: rgba(var(--mwfe-ink-rgb), .9); }
.mwfh-gal-panel {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(100%, 76rem);
	max-height: 100%;
	padding: clamp(1.3rem, 3.4vh, 2.3rem) 0 clamp(1.1rem, 2.8vh, 1.9rem);
	overflow: hidden; /* the strip runs out at the panel's edges */
	background: linear-gradient(160deg, var(--mwfe-wine), #3f1519 45%, var(--mwfe-bg-deep));
	border: 1px solid rgba(205, 173, 89, .42);
	box-shadow: 0 3rem 6rem -2rem rgba(0, 0, 0, .85);
}
.mwfh-gal-panel::before {
	content: "";
	position: absolute;
	inset: .6rem;
	border: 1px solid rgba(205, 173, 89, .16);
	pointer-events: none;
}
.mwfh-gal-head, .mwfh-gal-foot { position: relative; z-index: 1; width: 100%; padding: 0 4.6rem; text-align: center; }
.mwfh-gal-k {
	display: flex;
	justify-content: center;
	align-items: baseline;
	gap: .7rem;
	margin: 0 0 .3rem;
	font-family: var(--mwfe-sans);
	font-size: .66rem;
	font-weight: 600;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--mwfe-brass);
}
.mwfh-gal-roman {
	font-family: var(--mwfe-serif);
	font-style: italic;
	font-size: 1.25rem;
	letter-spacing: .02em;
	text-transform: none;
	color: var(--mwfe-gold-light);
}
.mwfh-gal-title {
	position: relative;
	width: fit-content;
	margin: 0 auto;
	font-family: var(--mwfe-serif);
	font-weight: 500;
	font-size: clamp(3rem, 5.2vw, 4.6rem);
	line-height: .9;
	letter-spacing: -.02em;
	font-variant-numeric: lining-nums;
	font-feature-settings: "lnum" 1;
}
.mwfh-gal-year { display: block; color: transparent; -webkit-text-stroke: 1px var(--mwfe-brass); }
.mwfh-gal-year--gold { position: absolute; inset: 0; color: var(--mwfh-gold); -webkit-text-stroke-width: 0; opacity: 0; }
.mwfh-gal-title.is-gilded .mwfh-gal-year--gold { opacity: 1; }
.mwfh-gal-sub {
	margin: .5rem 0 0;
	font-family: var(--mwfe-serif);
	font-weight: 500;
	font-size: clamp(1.15rem, 1.6vw, 1.45rem);
	line-height: 1.25;
	color: var(--mwfe-cream);
	text-wrap: balance;
}
.mwfh-gal-intro {
	max-width: 46rem;
	margin: .4rem auto 0;
	font-family: var(--mwfe-serif);
	font-style: italic;
	font-size: 1.02rem;
	line-height: 1.45;
	color: var(--mwfe-cream-dim);
	text-wrap: balance;
}
.mwfh-gal-intro:empty, .mwfh-gal-sub:empty { display: none; }

.mwfh-gal-stage { position: relative; width: 100%; margin-top: clamp(.4rem, 1.6vh, 1.2rem); }
.mwfh-gal-track {
	position: relative; /* the slides measure their place from here (offsetLeft) */
	display: flex;
	align-items: center;
	gap: clamp(1.4rem, 2.6vw, 2.6rem);
	padding: 1.5rem 0 1.7rem; /* room for the outer hairline and the shadow */
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
	touch-action: pan-x;
	outline: none;
	cursor: grab;
}
.mwfh-gal-track::-webkit-scrollbar { display: none; }
/* room at both ends, so the first and the last photo can come to the middle */
.mwfh-gal-track::before, .mwfh-gal-track::after { content: ""; flex: 0 0 50%; }
.mwfh-gal-track.is-free { scroll-snap-type: none; }
.mwfh-gal-track.is-dragging { cursor: grabbing; }
.mwfh-gal-track.is-pouring .mwfh-gal-slide { visibility: hidden; } /* their copies are flying in or out */
.mwfh-gal-track:focus-visible { box-shadow: inset 0 0 0 1px rgba(205, 173, 89, .45); }
.mwfh-gal-slide {
	flex: none;
	margin: 0;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}
.mwfh-gal-print {
	--ar: 1.5;
	position: relative;
	display: block;
	box-sizing: content-box;
	height: min(var(--gh), calc(var(--gw) / var(--ar)));
	aspect-ratio: var(--ar);
	padding: .5rem;
	background: rgba(var(--mwfe-ink-rgb), .94);
	border: 1px solid rgba(205, 173, 89, .5);
	box-shadow: 0 2rem 3.6rem -1.6rem rgba(0, 0, 0, .85);
	transform-origin: 50% 55%;
	user-select: none;
	-webkit-user-select: none;
}
.mwfh-gal-print::before {
	content: "";
	position: absolute;
	inset: -.8rem;
	border: 1px solid rgba(205, 173, 89, .22);
	pointer-events: none;
}
.mwfh-gal-print img { display: block; width: 100%; height: 100%; -webkit-user-drag: none; pointer-events: none; }
/* the light on the print in the middle: its own layer, js/history.js only fades it */
.mwfh-gal-shine {
	position: absolute;
	inset: -1px;
	border: 1px solid var(--mwfh-gold);
	box-shadow: 0 0 1.8rem rgba(226, 197, 116, .32), inset 0 0 0 1px rgba(252, 240, 196, .3);
	opacity: 0;
	pointer-events: none;
}
.mwfh-gal-nav {
	position: absolute;
	z-index: 2;
	top: 50%;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	margin-top: -1.5rem;
	padding: 0;
	border: 1px solid var(--mwfe-brass);
	border-radius: 50%;
	background: rgba(var(--mwfe-ink-rgb), .72);
	color: var(--mwfe-gold-light);
	font-size: 1.7rem;
	line-height: 1;
	cursor: pointer;
}
.mwfh-gal-nav span { margin-top: -.15em; }
.mwfh-gal-prev { left: 1.5rem; }
.mwfh-gal-next { right: 1.5rem; }
.mwfh-gal-nav:hover, .mwfh-gal-nav:focus-visible { background: var(--mwfe-brass); color: var(--mwfe-bg-deep); }
.mwfh-gal-nav:disabled { opacity: .28; cursor: default; pointer-events: none; }
.mwfh-gal-foot { display: flex; flex-direction: column; align-items: center; gap: .55rem; }
.mwfh-gal-cap {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.65em; /* two lines: the panel never jumps between captions */
	max-width: 46rem;
	margin: 0;
	font-family: var(--mwfe-serif);
	font-style: italic;
	font-size: 1.12rem;
	line-height: 1.3;
	color: var(--mwfe-cream);
	text-wrap: balance;
}
/* «1 ● ○ ○ 3»: where you are and how many, the dots between — one symmetric row */
.mwfh-gal-count {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .7rem;
	font-family: var(--mwfe-serif);
	font-style: italic;
	font-size: 1.05rem;
	line-height: 1;
	color: var(--mwfe-gold-light);
}
.mwfh-gal-count[hidden] { display: none; }
.mwfh-gal-n, .mwfh-gal-of { min-width: 1.2em; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; }
.mwfh-gal-n { text-align: right; }
.mwfh-gal-of { text-align: left; color: var(--mwfe-brass); }
.mwfh-gal-dots { display: flex; justify-content: center; gap: .2rem; }
.mwfh-gal-dot {
	position: relative;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.mwfh-gal-dot::before, .mwfh-gal-dot::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: .5rem;
	height: .5rem;
	margin: -.25rem 0 0 -.25rem;
	border-radius: 50%;
}
.mwfh-gal-dot::before { border: 1px solid rgba(205, 173, 89, .7); box-sizing: border-box; }
.mwfh-gal-dot::after { background: var(--mwfh-gold); opacity: 0; transition: opacity .3s ease; }
.mwfh-gal-dot.is-on::after { opacity: 1; }
.mwfh-gal-dot:focus-visible { outline: 1px solid var(--mwfh-gold); outline-offset: -.2rem; border-radius: 50%; }
.mwfh-gal-close { top: 1.1rem; right: 1.1rem; }
/* the flights in and out (the numeral and the prints) — a fixed layer over everything */
.mwfh-gal-fly { position: fixed; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; }
.mwfh-gal-fly > * { position: absolute; left: 0; top: 0; margin: 0; transform-origin: 50% 50%; will-change: transform, opacity; }
.mwfh-gal-fly > .mwfh-gal-fly-in { overflow: hidden; transform: none; will-change: auto; }
.mwfh-gal-fly-in > * { position: absolute; left: 0; top: 0; margin: 0; will-change: transform, opacity; }
.mwfh-gal-fly .mwfh-gal-print { box-shadow: none; }
.mwfh-gal-flyyear { white-space: nowrap; }
.mwfh-gal-flyyear-gold { position: absolute; inset: 0; color: var(--mwfh-gold); -webkit-text-stroke-width: 0; opacity: 0; }
@media (max-width: 900px) {
	/* phones: the gallery is the whole screen, the strip swipes */
	.mwfh-gallery { --gh: min(52svh, 34rem); --gw: 72vw; padding: 0; } /* the neighbours peek at both sides */
	.mwfh-gal-panel { width: 100%; height: 100%; max-height: none; justify-content: center; padding: 4rem 0 1.4rem; border: 0; box-shadow: none; }
	.mwfh-gal-panel::before { display: none; }
	.mwfh-gal-head, .mwfh-gal-foot { padding: 0 1.25rem; }
	.mwfh-gal-title { font-size: clamp(2.6rem, 13vw, 3.4rem); }
	.mwfh-gal-intro { font-size: .95rem; }
	.mwfh-gal-track { gap: .6rem; padding: 1.2rem 0 1.4rem; cursor: auto; }
	.mwfh-gal-print { padding: .35rem; }
	.mwfh-gal-print::before { inset: -.5rem; }
	.mwfh-gal-nav { display: none; }
	.mwfh-gal-cap { font-size: 1.02rem; }
	.mwfh-gal-close { top: .9rem; right: .9rem; }
	.mwfh-year-tag { margin-bottom: .7rem; padding: .42rem .7rem .42rem .6rem; font-size: .56rem; letter-spacing: .2em; }
}
@media (max-height: 560px) {
	.mwfh-gal-intro { display: none; } /* a phone on its side: the photos first */
}
@media (prefers-reduced-motion: reduce) {
	.mwfh-year-num::after, .mwfh-gal-dot::after { transition: none; }
}

/* ---------------------------------------------------- the origin */
.mwfh-origin {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: clamp(3rem, 8vh, 5rem) var(--mwfe-gutter) clamp(5rem, 14vh, 9rem);
}
.mwfh-origin-seed {
	display: grid;
	place-items: center;
	width: 3.4rem;
	height: 3.4rem;
	border-radius: 50%;
	font-size: 1.2rem;
	color: var(--mwfe-bg-deep);
	background: radial-gradient(circle at 35% 30%, var(--mwfh-gold-hi), var(--mwfe-brass) 70%);
	box-shadow: 0 0 0 .45rem rgba(var(--mwfe-ink-rgb), .92), 0 0 2.4rem rgba(226, 197, 116, .5);
	margin-bottom: 1.6rem;
}
.mwfh-origin-title {
	margin: 0 0 .7rem;
	font-family: var(--mwfe-serif);
	font-style: italic;
	font-size: clamp(1.9rem, 3.4vw, 3rem);
	line-height: 1.1;
	color: var(--mwfe-gold-light);
}
.mwfh-origin-line {
	max-width: 40ch;
	margin: 0;
	font-size: 1.1rem;
	color: var(--mwfe-cream-dim);
}
/* the roots (1988), below the date: the story before the festival */
.mwfh-origin-roots {
	max-width: 44ch;
	margin: 2rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(226, 197, 116, .28);
	font-family: var(--mwfe-serif);
	font-style: italic;
	font-size: 1.05rem;
	line-height: 1.5;
	color: var(--mwfe-cream-dim);
}
.mwfh-origin-roots span {
	display: block;
	margin-bottom: .6rem;
	font-family: var(--mwfe-sans);
	font-style: normal;
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--mwfe-brass);
}
.mwfh-origin-line span {
	display: block;
	margin-top: 1rem;
	font-family: var(--mwfe-sans);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .3em;
	color: var(--mwfe-brass);
}

/* -------------------------------------------------- the band */
.mwfh-band-ctas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin-top: 2.2rem;
}
.mwfh-top {
	display: inline-block;
	margin-top: 2.4rem;
	font-family: var(--mwfe-sans);
	font-size: .66rem;
	font-weight: 600;
	letter-spacing: .3em;
	text-transform: uppercase;
	text-decoration: none;
	color: rgba(244, 239, 228, .7);
}
.mwfh-top:hover { color: var(--mwfe-gold-light); }

/* ------------------------------------- the year rail (desktop) */
.mwfh-rail {
	position: fixed;
	right: clamp(.5rem, 1.3vw, 1.5rem);
	top: calc(var(--mwfe-header-h) + 2rem);
	bottom: 2rem;
	z-index: 15;
	display: flex;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity .5s, visibility .5s;
}
.mwfh.is-journey .mwfh-rail { opacity: 1; visibility: visible; }
.mwfh-rail ol {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	height: min(100%, 42rem);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.mwfh-rail ol::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: .7rem;
	width: 1px;
	background: linear-gradient(transparent, rgba(205, 173, 89, .45) 6%, rgba(205, 173, 89, .45) 94%, transparent);
}
.mwfh-rail li { position: relative; }
.mwfh-rail a {
	position: relative;
	display: block;
	width: 1.4rem;
	height: .95rem;
	text-decoration: none;
}
.mwfh-rail a::before {
	content: "";
	position: absolute;
	right: calc(.7rem - 2.5px);
	top: 50%;
	width: 5px;
	height: 5px;
	margin-top: -2.5px;
	border-radius: 50%;
	background: rgba(205, 173, 89, .55);
	transition: transform .35s, background .35s;
}
.mwfh-rail a span {
	position: absolute;
	right: 1.9rem;
	top: 50%;
	transform: translate(.4rem, -50%);
	font-family: var(--mwfe-serif);
	font-size: 1.05rem;
	line-height: 1;
	color: var(--mwfe-gold-light);
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s, transform .3s;
}
.mwfh-rail a:hover::before,
.mwfh-rail a:focus-visible::before { background: var(--mwfh-gold-hi); transform: scale(1.5); }
.mwfh-rail a:hover span,
.mwfh-rail a:focus-visible span { opacity: .85; transform: translate(0, -50%); }
.mwfh-rail a.is-reached::before { background: var(--mwfh-gold); }
.mwfh-rail a.is-current::before { background: var(--mwfh-gold-hi); transform: scale(2); box-shadow: 0 0 .6rem rgba(252, 240, 196, .8); }
.mwfh-rail a.is-current span { opacity: 1; transform: translate(0, -50%); font-size: 1.35rem; color: var(--mwfh-gold-hi); }

/* the jump bar — one year up or down, or all of them (owner, 2026-10-11) */
.mwfh-jump {
	position: fixed;
	left: 50%;
	bottom: max(1rem, env(safe-area-inset-bottom));
	z-index: 22;
	display: flex;
	align-items: stretch;
	border: 1px solid var(--mwfe-line);
	border-radius: 999px;
	background: rgba(var(--mwfe-ink-rgb), .96);
	box-shadow: 0 1rem 2.4rem -1rem rgba(0, 0, 0, .75);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 1.4rem);
	transition: opacity .45s, transform .45s, visibility .45s;
}
.mwfh.is-journey .mwfh-jump { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.mwfh-jump button {
	appearance: none;
	margin: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}
.mwfh-jump-step {
	width: 3rem;
	font-size: 1.05rem;
	color: var(--mwfe-brass);
	transition: color .3s;
}
.mwfh-jump-step:hover, .mwfh-jump-step:focus-visible { color: var(--mwfh-gold-hi); }
.mwfh-jump-step:disabled { opacity: .3; cursor: default; }
.mwfh-jump-now {
	display: flex;
	align-items: baseline;
	gap: .55rem;
	padding: .62rem 1.15rem .66rem;
	border-left: 1px solid var(--mwfe-line) !important;
	border-right: 1px solid var(--mwfe-line) !important;
}
.mwfh-jump-year { font-family: var(--mwfe-serif); font-size: 1.35rem; line-height: 1; color: var(--mwfe-gold-light); font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
.mwfh-jump-roman { font-family: var(--mwfe-serif); font-style: italic; font-size: .95rem; line-height: 1; color: var(--mwfe-brass); }
.mwfh-jump-all {
	font-family: var(--mwfe-sans);
	font-size: .58rem;
	font-weight: 600;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--mwfe-cream-dim);
	transition: color .3s;
}
.mwfh-jump-now:hover .mwfh-jump-all, .mwfh-jump-now:focus-visible .mwfh-jump-all { color: var(--mwfh-gold-hi); }

/* the year picker — 35 editions, 35 posters */
.mwfh-index {
	position: fixed;
	inset: 0;
	z-index: 40;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: rgba(var(--mwfe-ink-rgb), .97);
	opacity: 0;
	transition: opacity .35s ease;
}
.mwfh-index[hidden] { display: none; }
.mwfh-index.is-open { opacity: 1; }
.mwfh-index-inner {
	width: min(100%, 80rem);
	margin: 0 auto;
	padding: clamp(1.2rem, 4vh, 3rem) var(--mwfe-gutter) 5rem;
}
.mwfh-index-head {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .8rem 0;
	background: linear-gradient(rgba(var(--mwfe-ink-rgb), .98) 70%, transparent);
}
.mwfh-index-head .mwfe-kicker { margin: 0; }
.mwfh-index-close {
	appearance: none;
	display: grid;
	place-items: center;
	width: 2.8rem;
	height: 2.8rem;
	border: 1px solid var(--mwfe-brass);
	border-radius: 50%;
	background: none;
	color: var(--mwfe-gold-light);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: background .3s, color .3s;
}
.mwfh-index-close:hover, .mwfh-index-close:focus-visible { background: var(--mwfe-brass); color: var(--mwfe-bg-deep); }
.mwfh-index-dec h3 {
	margin: 2.2rem 0 1.1rem;
	padding-bottom: .6rem;
	border-bottom: 1px solid var(--mwfe-line);
	font-family: var(--mwfe-serif);
	font-style: italic;
	font-weight: 500;
	font-size: 1.7rem;
	color: var(--mwfh-gold);
	font-variant-numeric: lining-nums;
	font-feature-settings: "lnum" 1;
}
.mwfh-index-dec ul {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(7.6rem, 1fr));
	gap: 1.2rem .8rem;
	margin: 0;
	padding: 0;
}
.mwfh-index a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .4rem;
	padding: .6rem .4rem .7rem;
	border-radius: .5rem;
	text-decoration: none;
	transition: background .3s;
}
.mwfh-index a:hover, .mwfh-index a:focus-visible { background: rgba(205, 173, 89, .1); }
.mwfh-index a.is-current { background: rgba(205, 173, 89, .16); box-shadow: inset 0 0 0 1px rgba(226, 197, 116, .6); }
.mwfh-index-img {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 9.5rem;
}
.mwfh-index-img img {
	display: block;
	height: 100%;
	width: auto;
	background: rgba(205, 173, 89, .08);
	max-width: 100%;
	object-fit: contain;
	border: 1px solid rgba(205, 173, 89, .35);
	box-shadow: 0 .9rem 1.6rem -1rem rgba(0, 0, 0, .8);
	transition: transform .35s ease;
}
.mwfh-index a:hover .mwfh-index-img img { transform: translateY(-.3rem); }
.mwfh-index-img.is-card {
	aspect-ratio: 1 / 1.414;
	align-items: center;
	padding: .5rem;
	border: 1px solid rgba(205, 173, 89, .35);
	background: linear-gradient(165deg, var(--mwfe-wine), var(--mwfe-plum) 60%, var(--mwfe-bg-deep));
}
.mwfh-index-img.is-card svg { width: 100%; height: auto; overflow: visible; }
.mwfh-index-year { font-family: var(--mwfe-serif); font-size: 1.3rem; line-height: 1; color: var(--mwfe-gold-light); font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
.mwfh-index-roman { font-family: var(--mwfe-serif); font-style: italic; font-size: .85rem; line-height: 1; color: var(--mwfe-brass); }

/* the veil — far jumps travel through it instead of scrolling past the years */
.mwfh-veil {
	position: fixed;
	inset: 0;
	z-index: 28;
	display: grid;
	place-items: center;
	padding-top: var(--mwfe-header-h);
	background: radial-gradient(60% 50% at 50% 50%, rgba(103, 30, 38, .97), rgba(var(--mwfe-ink-rgb), .99) 72%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
.mwfh-veil-inner { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.mwfh-veil-poster img {
	display: block;
	height: min(40svh, 22rem);
	width: auto;
	border: 1px solid rgba(226, 197, 116, .6);
	box-shadow: 0 2rem 3.5rem -1.5rem rgba(0, 0, 0, .85);
}
.mwfh-veil-poster img:not([src]) { display: none; }
.mwfh-veil-year {
	display: flex;
	height: 1em;
	overflow: hidden;
	font-family: var(--mwfe-serif);
	font-weight: 500;
	font-size: clamp(3.6rem, 9vw, 6.5rem);
	line-height: 1;
	color: var(--mwfh-gold);
	font-variant-numeric: lining-nums;
	font-feature-settings: "lnum" 1;
}
.mwfh-veil-year .d { display: block; height: 1em; overflow: hidden; }
.mwfh-veil-year .d > span { display: flex; flex-direction: column; }
.mwfh-veil-year .d i { display: block; height: 1em; font-style: normal; text-align: center; }
.mwfh-veil-roman { font-family: var(--mwfe-serif); font-style: italic; font-size: 1.4rem; color: var(--mwfe-brass); }
/* the veil's shine over 2026 (owner, 2026-10-26): a copy of the year, cell for cell, painted only by a light
   band clipped to its glyphs and drawn once across (js/history.js shine()) */
.mwfh-veil-year { position: relative; }
.mwfh-veil-glint {
	position: absolute;
	inset: 0;
	display: flex;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	background: linear-gradient(100deg, rgba(255, 244, 207, 0) 41%, rgba(255, 250, 236, 1) 50%, rgba(255, 244, 207, 0) 59%) 115% 0 / 260% 100% no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.mwfh-veil-glint i { display: block; flex: none; height: 1em; font-style: normal; text-align: center; }

@media (max-width: 1099px) {
	.mwfh-rail { display: none; }
}

/* ============================================================ phones */
@media (max-width: 900px) {
	.mwfh { --mwfh-node: 2.6rem; --mwfh-node-live: 3.2rem; }

	.mwfh-hero { padding-bottom: 7rem; }
	.mwfh-hero-kicker { gap: .6em; letter-spacing: .26em; }
	.mwfh-hero-kicker::before, .mwfh-hero-kicker::after { display: none; }
	.mwfh-35 { width: min(100%, 34rem); }
	.mwfh-hero-title { margin-top: .9rem; }

	/* the path runs down a lane on the left, weaving to each year's seeded --mxp */
	.mwfh-stop.is-idle { padding: calc(var(--mh, 11rem) / 4 + 1rem) 0; }
	.mwfh-mile,
	.mwfh-stop.is-idle.is-left .mwfh-mile {
		left: var(--mxp, 1.8rem);
		flex-direction: row;
		gap: 1rem;
		transform: translateX(calc(var(--mwfh-node) / -2));
	}
	.mwfh-stop.is-left .mwfh-mile-year { align-items: flex-start; text-align: left; }
	.mwfh-thumb { height: 6.6rem; }
	.mwfh-mile-num { font-size: 1.9rem; }
	.mwfh-decade { text-align: left; padding-left: 4.4rem; font-size: clamp(3.4rem, 17vw, 5rem); margin-bottom: 1.2rem; }

	.mwfh-stop.is-live {
		display: block;
		min-height: 0;
		padding: 3.2rem 0 3.6rem 4.6rem;
	}
	.mwfh-media { align-items: flex-start; gap: 0; }
	.mwfh-media .mwfh-node {
		position: absolute;
		left: calc(var(--mxp, 1.8rem) - 4.6rem - var(--mwfh-node-live) / 2);
		top: 0;
	}
	.mwfh-poster { margin: 0 0 2.4rem .95rem; }
	.mwfh-poster img {
		height: min(58svh, 27rem);
		height: min(58svh, 27rem, calc((100cqw - 3.2rem) * var(--pr, 2.1)));
	}
	.mwfh-card {
		height: min(58svh, 27rem);
		height: min(58svh, 27rem, calc((100cqw - 3.2rem) * 1.414));
		padding: 1.6rem 1.1rem 1.4rem;
	}
	.mwfh-stop.is-live.is-right .mwfh-body { justify-self: auto; }
	.mwfh-year { font-size: clamp(4rem, 19vw, 6rem); }
	.mwfh-text p { font-size: 1.08rem; }
	.mwfh-stop.is-live .mwfh-decade { margin-left: -4.6rem; }
	.mwfh-stop.is-live.is-feature .mwfh-poster img {
		height: min(62svh, 30rem);
		height: min(62svh, 30rem, calc((100cqw - 3.2rem) * var(--pr, 2.1)));
	}

	.mwfh-seal { display: none; }
	.mwfh-jump-all { display: none; }
	.mwfh-index-dec ul { grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: .9rem .5rem; }
	.mwfh-index-img { height: 7rem; }
}

@media (prefers-reduced-motion: reduce) {
	.mwfh-begin::after { animation: none; }
}

/* ======================================== round «mobile» (owner, 2026-10-14)
   «improve the mobile UI of the history page and fix issues (like the 2026
   banner not displaying correctly), and make it very impressive with gsap» */

/* the statue card (2026) has an explicit width as well as its height: Safari on
   an iPhone took the card's width from its content (the statue's 86 % and the
   lettering) instead of from aspect-ratio, so the card came out mis-sized. Its
   lettering now scales with the card itself (a size container). */
.mwfh-card {
	width: min(45.26svh, 26.87rem);
	width: min(45.26svh, 26.87rem, calc(100cqw - 3.2rem));
	aspect-ratio: auto;
	container-type: inline-size;
}
.mwfh-card-statue { aspect-ratio: 282 / 200; }
/* desktop: the old sizes (4vw / 2.2vw / .7rem) to the pixel at 1440 × 900 and
   1920 × 1080, within a pixel at 1280 × 800; smaller only where a short window
   makes the card too narrow for them (the old ones ran out of it there) */
.mwfh-card-roman { font-size: clamp(2rem, 16.2cqw, 3.6rem); }
.mwfh-card-name { font-size: clamp(1.05rem, 8.9cqw, 2rem); }
.mwfh-card-when { font-size: clamp(.6rem, 3.6cqw, .7rem); }

/* the gold sheen that crosses a poster once it has landed (phones, js/history.js) */
.mwfh-sheen { position: absolute; inset: .55rem; z-index: 1; overflow: hidden; pointer-events: none; }
.mwfh-sheen i {
	position: absolute;
	top: -20%;
	bottom: -20%;
	left: 0;
	width: 42%;
	background: linear-gradient(90deg, rgba(255, 236, 190, 0), rgba(255, 236, 190, .58) 50%, rgba(255, 236, 190, 0));
	opacity: 0;
}
/* the sparks off a node on its first arrival (phones, GSAP) */
.mwfh-sparks { position: absolute; left: 50%; top: 50%; z-index: 3; width: 0; height: 0; pointer-events: none; }
.mwfh-sparks i {
	position: absolute;
	left: -.22rem;
	top: -.22rem;
	width: .44rem;
	height: .44rem;
	border-radius: 50%;
	background: var(--mwfh-gold-hi);
	box-shadow: 0 0 .6rem .12rem rgba(252, 240, 196, .8);
}
.mwfh-sparks i:nth-child(3n) { left: -.14rem; top: -.14rem; width: .28rem; height: .28rem; }

/* the 2026 card coming to life (phones, js/history.js cardIntro): its numerals
   as letters of their own, the name as two lines, a light behind the statue
   (painted between the card's ground and its content) */
.mwfh-card { position: relative; isolation: isolate; }
.mwfh-card-l { display: inline-block; }
.mwfh-card-line { white-space: nowrap; }
.mwfh-card-glow {
	position: absolute;
	left: 50%;
	top: 46%;
	z-index: -1;
	width: 120%;
	aspect-ratio: 1;
	margin: -60% 0 0 -60%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(252, 240, 196, .42), rgba(226, 197, 116, .16) 45%, rgba(226, 197, 116, 0) 72%);
	opacity: 0;
	pointer-events: none;
}

/* the swipe tab: the year a sideways swipe leads to, at the edge it comes
   from (phones, js/history.js) */
.mwfh-swipe {
	position: fixed;
	top: 50%;
	z-index: 23;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .3rem;
	padding: .85rem .95rem;
	border: 1px solid var(--mwfe-line);
	background: rgba(var(--mwfe-ink-rgb), .96);
	box-shadow: 0 1rem 2.4rem -1rem rgba(0, 0, 0, .75);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: border-color .25s, background-color .25s;
}
.mwfh-swipe.is-right { right: 0; border-right: 0; border-radius: 2rem 0 0 2rem; padding-left: 1.15rem; }
.mwfh-swipe.is-left { left: 0; border-left: 0; border-radius: 0 2rem 2rem 0; padding-right: 1.15rem; }
.mwfh-swipe b {
	font-family: var(--mwfe-serif);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
	color: var(--mwfe-gold-light);
	font-variant-numeric: lining-nums;
	font-feature-settings: "lnum" 1;
	transition: color .25s;
}
.mwfh-swipe i { font-family: var(--mwfe-serif); font-size: .9rem; line-height: 1; color: var(--mwfe-brass); }
.mwfh-swipe.is-armed { border-color: var(--mwfh-gold); background-color: rgba(90, 27, 35, .96); }
.mwfh-swipe.is-armed b { color: var(--mwfh-gold-hi); }
/* a sideways swipe is the road's own on a touch phone: never the browser's
   history (Chrome turns a sideways overscroll into «back») */
@media (max-width: 900px) and (hover: none) {
	html:has(.mwfh-journey), html:has(.mwfh-journey) body { overscroll-behavior-x: none; }
}

@media (max-width: 900px) {
	/* the statue card on a phone: the phone poster's height, its own width */
	.mwfh-card {
		width: min(41.02svh, 19.09rem);
		width: min(41.02svh, 19.09rem, calc(100cqw - 3.2rem));
	}
	.mwfh-card-roman { font-size: clamp(2rem, 13.4cqw, 3.6rem); }
	.mwfh-card-name { font-size: clamp(1.05rem, 7.4cqw, 2rem); }
	.mwfh-card-when { font-size: clamp(.62rem, 4.1cqw, .74rem); }
	/* a narrower lane for the road (4.6 → 3.6rem): the words get the width back;
	   the nodes still clear the posters (--mxp runs 1.46 – 2.71rem) */
	.mwfh-stop.is-live { padding-left: 3.6rem; }
	.mwfh-media .mwfh-node { left: calc(var(--mxp, 1.8rem) - 3.6rem - var(--mwfh-node-live) / 2); }
	.mwfh-stop.is-live .mwfh-decade { margin-left: -3.6rem; }
	.mwfh-decade { padding-left: 3.4rem; }
	/* the entrances turn on these points: the poster falls back onto its bottom
	   edge, the year grows from its foot */
	.mwfh-poster-frame { transform-origin: 50% 100%; }
	.mwfh-year { transform-origin: 0 80%; }
	/* the jump bar: a little slimmer, and tucked away while you read downwards */
	.mwfh-jump-now { padding: .52rem 1rem .56rem; }
	.mwfh-jump-step { width: 2.8rem; }
	.mwfh.is-journey.is-tucked .mwfh-jump { opacity: 0; visibility: hidden; transform: translate(-50%, 150%); }
}
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
	.mwfh-decade.is-veiled { opacity: 0; }
}

/* ======================================== round «lightbox» (owner, 2026-10-14)
   «take another look at the mobile UI of the foto gallery hidden behind the
   year, also include a lightbox magnification for the fotos on click for both
   mobile and desktop» */

/* the loupe on the print in the middle — it lives in the print's light, so it
   comes and goes with it: this one opens big */
.mwfh-gal-loupe {
	position: absolute;
	right: .6rem;
	bottom: .6rem;
	display: grid;
	place-items: center;
	width: 2.2rem;
	height: 2.2rem;
	border: 1px solid rgba(252, 240, 196, .6);
	border-radius: 50%;
	background: rgba(var(--mwfe-ink-rgb), .66);
	box-shadow: 0 .4rem 1rem -.3rem rgba(0, 0, 0, .6);
}
.mwfh-gal-loupe svg { display: block; width: 1.05rem; height: 1.05rem; fill: none; stroke: var(--mwfe-gold-light); stroke-width: 1.5; stroke-linecap: round; }
@media (hover: hover) and (pointer: fine) {
	.mwfh-gal-slide.is-mid .mwfh-gal-print { cursor: zoom-in; }
	.mwfh-gal-track.is-dragging .mwfh-gal-print { cursor: grabbing; }
}

@media (max-width: 900px) {
	/* phones: the photos as wide as the screen allows (72 → 86vw); the ones
	   aside come in and lie under it (js/history.js paint()) */
	.mwfh-gallery { --gw: 86vw; }
	.mwfh-gal-track { gap: .5rem; }
	/* «4 FOTO» on the year: readable (it was 9 px) */
	.mwfh-year-tag { padding: .5rem .8rem .5rem .68rem; font-size: .66rem; letter-spacing: .18em; }
	.mwfh-year-tag svg { width: 1.2rem; }
}

/* a phone on its side (iPhone 14 Pro Max: 932 × 430): the whole screen, the
   words in one row over the strip, the photo as tall as is left — the panel
   with its desktop border cut off the counter and kept the photo at 160 px */
@media (max-height: 560px) {
	.mwfh-gallery { padding: 0; }
	.mwfh-gal-panel { width: 100%; height: 100%; max-height: none; justify-content: center; padding: .55rem 0 .45rem; border: 0; box-shadow: none; }
	.mwfh-gal-panel::before { display: none; }
	.mwfh-gal-head { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .2rem 1.1rem; padding: 0 4.4rem; }
	.mwfh-gal-k { margin: 0; }
	.mwfh-gal-title { margin: 0; font-size: 2.1rem; }
	.mwfh-gal-sub { margin: 0; font-size: 1.05rem; }
	.mwfh-gal-stage { margin-top: 0; }
	.mwfh-gal-track { padding: .9rem 0 1rem; }
	.mwfh-gal-foot { gap: .2rem; }
	.mwfh-gal-cap { min-height: 1.3em; font-size: .98rem; }
	.mwfh-gal-close { top: .45rem; right: .8rem; width: 2.6rem; height: 2.6rem; }
}

/* the lightbox (js/history.js «the lightbox»): the photo alone on the dark,
   its place set once, its flight, zoom and pan one transform */
.mwfh-lb {
	position: fixed;
	inset: 0;
	z-index: 7;
	overflow: hidden;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
}
.mwfh-lb[hidden], .mwfh-lb [hidden] { display: none; }
.mwfh-lb-bg { position: absolute; inset: 0; background: rgba(14, 7, 9, .96); }
.mwfh-lb-stage { position: absolute; inset: 0; }
.mwfh-lb-img {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	max-width: none;
	transform-origin: 0 0;
	box-shadow: 0 2.4rem 5rem -1.6rem rgba(0, 0, 0, .9);
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
	cursor: zoom-in;
}
.mwfh-lb.is-zoomed .mwfh-lb-img { cursor: grab; }
.mwfh-lb.is-panning .mwfh-lb-img { cursor: grabbing; }
.mwfh-lb-top {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: max(.85rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) .85rem max(1.25rem, env(safe-area-inset-left));
	pointer-events: none;
}
.mwfh-lb-top > * { pointer-events: auto; }
.mwfh-lb-n {
	margin: 0;
	font-family: var(--mwfe-serif);
	font-style: italic;
	font-size: 1.1rem;
	line-height: 1;
	color: var(--mwfe-gold-light);
	font-variant-numeric: lining-nums tabular-nums;
	font-feature-settings: "lnum" 1, "tnum" 1;
}
.mwfh-lb-tools { display: flex; gap: .55rem; margin-left: auto; }
.mwfh-lb button {
	appearance: none;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	padding: 0;
	border: 1px solid var(--mwfe-brass);
	border-radius: 50%;
	background: rgba(var(--mwfe-ink-rgb), .74);
	color: var(--mwfe-gold-light);
	font-family: var(--mwfe-serif);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color .25s, color .25s, opacity .25s;
}
.mwfh-lb button span { margin-top: -.12em; }
.mwfh-lb button:hover, .mwfh-lb button:focus-visible { background: var(--mwfe-brass); color: var(--mwfe-bg-deep); outline: none; }
.mwfh-lb button:disabled { opacity: .3; cursor: default; pointer-events: none; }
.mwfh-lb .mwfh-lb-nav { position: absolute; top: 50%; z-index: 2; width: 3.1rem; height: 3.1rem; margin-top: -1.55rem; font-size: 1.8rem; }
.mwfh-lb-prev { left: 1.6rem; }
.mwfh-lb-next { right: 1.6rem; }
.mwfh-lb-cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 6.5rem;
	margin: 0;
	padding: .8rem max(1.4rem, env(safe-area-inset-right)) max(.9rem, env(safe-area-inset-bottom)) max(1.4rem, env(safe-area-inset-left));
	font-family: var(--mwfe-serif);
	font-style: italic;
	font-size: 1.12rem;
	line-height: 1.35;
	text-align: center;
	color: var(--mwfe-cream);
	text-wrap: balance;
	pointer-events: none;
}
.mwfh-lb-hint {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 7.4rem;
	z-index: 3;
	width: fit-content;
	max-width: calc(100% - 2.5rem);
	margin: 0 auto;
	padding: .6rem 1.1rem;
	border: 1px solid rgba(205, 173, 89, .5);
	border-radius: 999px;
	background: rgba(var(--mwfe-ink-rgb), .9);
	font-family: var(--mwfe-sans);
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .06em;
	line-height: 1.3;
	text-align: center;
	color: var(--mwfe-gold-light);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
/* magnified, pulled down or tapped: the photo alone */
.mwfh-lb-top, .mwfh-lb-cap { transition: opacity .3s ease, visibility 0s; }
.mwfh-lb .mwfh-lb-nav { transition: opacity .3s ease, visibility 0s, background-color .25s, color .25s; }
.mwfh-lb.is-zoomed .mwfh-lb-cap,
.mwfh-lb.is-pulling .mwfh-lb-cap, .mwfh-lb.is-pulling .mwfh-lb-top, .mwfh-lb.is-pulling .mwfh-lb-nav,
.mwfh-lb.is-bare .mwfh-lb-cap, .mwfh-lb.is-bare .mwfh-lb-top, .mwfh-lb.is-bare .mwfh-lb-nav {
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility 0s .3s;
}
@media (max-width: 900px) {
	.mwfh-lb .mwfh-lb-nav { display: none; } /* a swipe turns the photos */
	.mwfh-lb-cap { font-size: 1.02rem; }
}
@media (max-height: 560px) {
	/* on its side: the photo has the whole height, the words lie over it */
	.mwfh-lb-top { background: linear-gradient(rgba(14, 7, 9, .7), rgba(14, 7, 9, 0)); }
	.mwfh-lb-cap { min-height: 0; padding-top: 2rem; background: linear-gradient(rgba(14, 7, 9, 0), rgba(14, 7, 9, .85)); font-size: .98rem; }
	.mwfh-lb-hint { bottom: 3.8rem; }
	.mwfh-lb .mwfh-lb-nav { width: 2.7rem; height: 2.7rem; margin-top: -1.35rem; }
	.mwfh-lb-prev { left: .8rem; }
	.mwfh-lb-next { right: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
	.mwfh-lb-top, .mwfh-lb-cap, .mwfh-lb .mwfh-lb-nav { transition: none; }
}

/* ======================================== round «seam» (owner, 2026-10-25)
   the divider between the timeline and the posters; the jump bar on phones from the first
   scroll; the timeline as the picker's last card (js/history.js) */
.mwfh-divider {
	position: absolute;
	top: clamp(.4rem, 2.6vh, 1.6rem);
	left: 0;
	right: 0;
	z-index: 2;
	display: flex;
	justify-content: center;
	padding: 0 var(--mwfe-gutter);
	pointer-events: none;
}
.mwfh-divider svg { display: block; width: 100%; max-width: 64rem; height: 3.4rem; overflow: visible; }
.mwfh-dv-rule { fill: none; stroke: url(#mwfh-dv-g); stroke-width: 1.1; }
.mwfh-dv-fine { fill: none; stroke: url(#mwfh-dv-g); stroke-width: .5; opacity: .65; }
.mwfh-dv-bead { fill: var(--mwfe-brass); }
.mwfh-dv-tick { fill: none; stroke: var(--mwfe-brass); stroke-width: .8; opacity: .8; }
/* the cut stones: wine-ruby, gold-set, facets lit from the upper left */
.mwfh-dv-gem { fill: url(#mwfh-dv-ruby); stroke: #e2c574; stroke-width: 1; stroke-linejoin: miter; }
.mwfh-dv-table { fill: url(#mwfh-dv-table); stroke: rgba(252, 240, 196, .55); stroke-width: .5; }
.mwfh-dv-lt { fill: rgba(252, 240, 196, .3); stroke: rgba(226, 197, 116, .5); stroke-width: .4; }
.mwfh-dv-lt2 { fill: rgba(252, 240, 196, .42); stroke: rgba(226, 197, 116, .5); stroke-width: .4; }
.mwfh-dv-md { fill: rgba(40, 25, 27, .18); stroke: rgba(226, 197, 116, .45); stroke-width: .4; }
.mwfh-dv-dk { fill: rgba(20, 10, 12, .4); stroke: rgba(226, 197, 116, .45); stroke-width: .4; }
.mwfh-dv-glint { fill: #fff6dc; opacity: .9; }
.mwfh-dv-bezel { fill: var(--mwfe-bg-deep); stroke: var(--mwfe-brass); stroke-width: .7; }
.mwfh-dv-pin { fill: #e2c574; }
.mwfh-dv-lines {
	transform-box: view-box;
	transform-origin: 50% 50%;
	transition: transform 1.3s cubic-bezier(.2, .7, .2, 1), opacity 1s ease;
}
.mwfh-dv-side { transition: opacity .9s ease .35s; }
.mwfh-divider:not(.is-in) .mwfh-dv-lines { transform: scaleX(.06); opacity: 0; }
.mwfh-divider:not(.is-in) .mwfh-dv-side { opacity: 0; }

/* the jump bar's look above the journey (phones only): three little posters, «Le locandine» */
.mwfh-jump-fan, .mwfh-jump-intro { display: none; }
.mwfh-jump-fan { align-items: center; padding: 0 .55rem 0 .2rem; }
.mwfh-jump-fan i {
	display: block;
	width: 1.05rem;
	height: 1.9rem;
	margin-left: -.42rem;
	overflow: hidden;
	border: 1px solid rgba(205, 173, 89, .6);
	border-radius: 2px;
	background: var(--mwfe-wine);
	box-shadow: 0 .25rem .6rem -.2rem rgba(0, 0, 0, .8);
}
.mwfh-jump-fan i:first-child { margin-left: 0; transform: rotate(-13deg) translateY(.08rem); }
.mwfh-jump-fan i:nth-child(2) { position: relative; z-index: 1; transform: translateY(-.1rem); }
.mwfh-jump-fan i:last-child { transform: rotate(13deg) translateY(.08rem); }
.mwfh-jump-fan img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mwfh-jump-intro { font-family: var(--mwfe-serif); font-style: italic; font-size: 1.12rem; line-height: 1; color: var(--mwfe-gold-light); white-space: nowrap; }
/* the year jump from the first scroll on every screen (owner, 2026-10-26: «appear on first scroll even before
   the timeline»); above the journey the posters' fan and «Le locandine» */
.mwfh.is-scrolled .mwfh-jump { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
/* the stream's card or sheet is open (timeline-fix: #sezioni.is-focus): the bar steps away */
.mwfh .mwfs.is-focus ~ .mwfh-jump { opacity: 0; visibility: hidden; transform: translate(-50%, 150%); }
/* the stream's timeline locked full-screen on phones (timeline-fix: .mwfs.is-locked; owner, 2026-10-26: «a semi
   magnetic lock»): the bar steps away, the year and its description at the foot stay clear */
.mwfh .mwfs.is-locked ~ .mwfh-jump { opacity: 0; visibility: hidden; transform: translate(-50%, 150%); }
.mwfh.is-before .mwfh-jump-now { align-items: center; }
.mwfh.is-before .mwfh-jump-year, .mwfh.is-before .mwfh-jump-roman, .mwfh.is-before .mwfh-jump-all { display: none; }
.mwfh.is-before .mwfh-jump-fan { display: inline-flex; }
.mwfh.is-before .mwfh-jump-intro { display: inline; }
@media (max-width: 900px) {
	.mwfh.is-scrolled.is-tucked .mwfh-jump { opacity: 0; visibility: hidden; transform: translate(-50%, 150%); }
	/* while the screen rests (owner, 2026-10-26: «otherwise it covers the fields below») — js/history.js restSoon() */
	.mwfh.is-scrolled.is-still .mwfh-jump { opacity: 0; visibility: hidden; transform: translate(-50%, 150%); }
	.mwfh-divider svg { height: 2.8rem; max-width: none; }
}

/* the timeline, the picker's last card: full width on wide screens, a row on phones */
.mwfh-index-tlsec { margin-top: clamp(2.2rem, 5vh, 3.6rem); }
.mwfh-index a.mwfh-index-tl {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 0;
	text-align: left;
	min-height: 9.5rem;
	padding: 1.6rem clamp(1.2rem, 3vw, 2.8rem);
	overflow: hidden;
	border: 1px solid var(--mwfe-line);
	border-radius: .25rem;
	background: linear-gradient(100deg, rgba(103, 30, 38, .6), rgba(var(--mwfe-ink-rgb), .92) 62%);
	color: var(--mwfe-cream);
	text-decoration: none;
	transition: border-color .4s, box-shadow .4s;
}
.mwfh-index-tl-art {
	position: absolute;
	inset: 0;
	opacity: .6;
	-webkit-mask-image: linear-gradient(90deg, transparent 8%, #000 52%);
	mask-image: linear-gradient(90deg, transparent 8%, #000 52%);
	transition: opacity .5s;
}
.mwfh-index-tl-art svg { display: block; width: 100%; height: 100%; }
.mwfh-index-tl-art .tl-m { fill: none; stroke: #fcf0c4; stroke-width: 1.8; }
.mwfh-index-tl-art .tl-b { fill: none; stroke: var(--mwfe-brass); stroke-width: 1.2; }
.mwfh-index-tl-art .tl-b2 { opacity: .8; }
.mwfh-index-tl-art .tl-b3 { opacity: .65; }
.mwfh-index-tl-art .tl-p { fill: none; stroke: var(--mwfe-brass); stroke-width: 1.2; stroke-dasharray: 2 6; opacity: .7; }
.mwfh-index-tl-art .tl-n { fill: #fcf0c4; }
.mwfh-index-tl-art .tl-r { fill: none; stroke: var(--mwfe-brass); stroke-width: 1.2; }
.mwfh-index-tl-art .tl-d { fill: var(--mwfe-bg-deep); stroke: #fcf0c4; stroke-width: 1.1; }
.mwfh-index-tl-art .tl-y { font-family: var(--mwfe-serif); font-size: 13px; fill: var(--mwfe-brass); }
.mwfh-index-tl-txt { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; max-width: 36rem; }
.mwfh-index-tl-k { font-family: var(--mwfe-sans); font-size: .6rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--mwfe-brass); }
.mwfh-index-tl-t { font-family: var(--mwfe-serif); font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.05; color: var(--mwfe-cream); }
.mwfh-index-tl-t em { color: var(--mwfe-gold-light); }
.mwfh-index-tl-go { margin-top: .45rem; font-family: var(--mwfe-sans); font-size: .62rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--mwfe-gold-light); }
.mwfh-index-tl-go i { display: inline-block; font-style: normal; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.mwfh-index a.mwfh-index-tl:hover, .mwfh-index a.mwfh-index-tl:focus-visible { background: linear-gradient(100deg, rgba(125, 42, 50, .65), rgba(var(--mwfe-ink-rgb), .92) 62%); border-color: var(--mwfe-brass); box-shadow: 0 0 0 1px rgba(205, 173, 89, .3), 0 1.2rem 2.6rem -1.2rem rgba(0, 0, 0, .85); outline: none; }
.mwfh-index-tl:hover .mwfh-index-tl-art, .mwfh-index-tl:focus-visible .mwfh-index-tl-art { opacity: .9; }
.mwfh-index-tl:hover .mwfh-index-tl-go i, .mwfh-index-tl:focus-visible .mwfh-index-tl-go i { transform: translateY(-.2rem); }
@media (max-width: 900px) {
	.mwfh-index a.mwfh-index-tl { min-height: 0; gap: .95rem; padding: .85rem; }
	.mwfh-index-tl-art {
		position: relative;
		inset: auto;
		flex: none;
		width: 7.4rem;
		height: 4.6rem;
		opacity: .95;
		border: 1px solid var(--mwfe-line);
		border-radius: .15rem;
		-webkit-mask-image: none;
		mask-image: none;
	}
	.mwfh-index-tl-txt { gap: .25rem; min-width: 0; }
	.mwfh-index-tl-k { font-size: .5rem; letter-spacing: .18em; }
	.mwfh-index-tl-t { font-size: 1.22rem; }
	.mwfh-index-tl-go { margin-top: .2rem; font-size: .55rem; }
}
@media (prefers-reduced-motion: reduce) {
	.mwfh-dv-lines, .mwfh-dv-side, .mwfh-index-tl, .mwfh-index-tl-art, .mwfh-index-tl-go i { transition: none; }
}