/* =============================================================
   History 35 — the stream of the sections (/history-35/#sezioni)
   (template-parts/page-history.php, js/history-sezioni.js; data
   inc/mwf-history-sezioni.php). 1992 → 2025, one gold thread per
   lineage. Desktop: a sticky stage the scroll (or a drag) runs
   sideways; phones: a vertical stream beside the year rows.
   Without scripts: the year-by-year list. Scoped .mwfs, rem only;
   nothing animates but transform and opacity.
   ============================================================= */

.mwfs {
	--mwfs-gold: #e2c574;
	--mwfs-gold-hi: #fcf0c4;
	--mwfs-col: clamp(8.5rem, 11.5vw, 13rem);
	--mwfs-lane: clamp(7.5rem, 38vw, 12rem);
	--mwfs-foot: clamp(9rem, 24vh, 12.5rem);
	position: relative;
	z-index: 1;
	padding: clamp(3.5rem, 10vh, 7rem) 0 clamp(3rem, 8vh, 5rem);
	border-top: 1px solid rgba(226, 197, 116, .16);
}

/* ------------------------------------------------------- head */
.mwfs-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 62rem;
	margin: 0 auto clamp(2rem, 5vh, 3.25rem);
	padding: 0 var(--mwfe-gutter);
	text-align: center;
}
.mwfs-kicker { justify-content: center; margin-bottom: .2rem; }
.mwfs-title {
	margin: .35rem 0 .9rem;
	font-family: var(--mwfe-serif);
	font-weight: 500;
	font-size: clamp(2.3rem, 4.8vw, 4.2rem);
	line-height: 1.04;
	color: var(--mwfe-cream);
}
.mwfs-title em { font-style: italic; font-weight: 400; color: var(--mwfe-brass); }
.mwfs-lead {
	max-width: 46ch;
	margin: 0;
	font-size: 1.1rem;
	line-height: 1.55;
	color: var(--mwfe-cream-dim);
}
.mwfs-legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .7rem 1.8rem;
	margin: 1.7rem 0 0;
	padding: 0;
	list-style: none;
	font-family: var(--mwfe-sans);
	font-size: .66rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mwfe-cream-dim);
}
.mwfs-legend li { display: inline-flex; align-items: center; gap: .6rem; }

/* the event glyphs (legend, year rows, the stream's own marks) */
.mwfs-g { flex: none; width: 1.5rem; height: 1rem; overflow: visible; }
.mwfs-gl { fill: none; stroke: var(--mwfs-gold); stroke-width: 1.4; stroke-linecap: round; }
.mwfs-gp { stroke-width: 1.7; stroke-dasharray: .01 3.2; }
.mwfs-gb { fill: none; stroke: var(--mwfs-gold); stroke-width: 1.6; stroke-linecap: round; }
.mwfs-gd { fill: var(--mwfs-gold); }
.mwfs-gr, .mwfs-gm { fill: var(--mwfe-bg-deep); stroke: var(--mwfs-gold); stroke-width: 1.3; }

/* the head comes up once it is in view (js adds .is-armed, then .is-in) */
.mwfs.is-armed .mwfs-head > * { opacity: 0; transform: translate3d(0, 1.4rem, 0); }
.mwfs.is-armed.is-in .mwfs-head > * {
	opacity: 1;
	transform: none;
	transition: opacity .9s cubic-bezier(.25, 1, .5, 1), transform .9s cubic-bezier(.25, 1, .5, 1);
}
.mwfs.is-armed.is-in .mwfs-head > :nth-child(2) { transition-delay: .08s; }
.mwfs.is-armed.is-in .mwfs-head > :nth-child(3) { transition-delay: .16s; }
.mwfs.is-armed.is-in .mwfs-head > :nth-child(4) { transition-delay: .24s; }

/* ----------------------------------------- the year list (text) */
.mwfs-run, .mwfs-lane, .mwfs-hint-v { display: none; }
.mwfs-body { position: relative; }
.mwfs-years {
	max-width: 62rem;
	margin: 0 auto;
	padding: 0 var(--mwfe-gutter);
	list-style: none;
}
.mwfs-y {
	position: relative;
	padding: 1.15rem 0 1.25rem;
	border-top: 1px solid rgba(226, 197, 116, .14);
}
.mwfs-y-h {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .2rem .75rem;
	margin: 0 0 .55rem;
	font-weight: 400;
}
.mwfs-y-num {
	font-family: var(--mwfe-serif);
	font-size: 2rem;
	font-weight: 500;
	line-height: 1;
	font-variant-numeric: lining-nums;
	color: var(--mwfs-gold);
}
.mwfs-y-ed, .mwfs-y-n {
	font-family: var(--mwfe-sans);
	font-size: .66rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--mwfe-brass);
}
.mwfs-y-n {
	padding: 0;
	border: 0;
	background: none;
	color: var(--mwfe-cream-dim);
	cursor: default;
}
.mwfs-y-brk {
	margin: 0 0 .5rem;
	font-family: var(--mwfe-serif);
	font-style: italic;
	font-size: 1.25rem;
	color: var(--mwfe-cream);
}
.mwfs-chg { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.mwfs-c {
	display: grid;
	grid-template-columns: 1.5rem minmax(0, 1fr);
	column-gap: .65rem;
	align-items: center;
	font-size: 1rem;
	line-height: 1.4;
}
.mwfs-c-k {
	font-family: var(--mwfe-sans);
	font-size: .62rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--mwfe-brass);
}
.mwfs-c-v { grid-column: 2; color: var(--mwfe-cream); }
.mwfs-c--same { grid-template-columns: minmax(0, 1fr); }
.mwfs-c--same .mwfs-c-k { color: var(--mwfe-cream-dim); }
.mwfs-to { color: var(--mwfe-brass); padding: 0 .15em; }
.mwfs-sep { color: rgba(226, 197, 116, .55); }
.mwfs-name {
	display: inline;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	line-height: inherit;
	color: inherit;
	text-align: inherit;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: .22em;
	cursor: pointer;
}
.mwfs-name:hover, .mwfs-name:focus-visible { text-decoration-color: var(--mwfe-brass); }
.mwfs-name:focus-visible { outline: 1px solid var(--mwfe-brass); outline-offset: .15em; }
/* 2026: the names open their sections (new tab) */
.mwfs-name.is-go { text-decoration-color: rgba(226, 197, 116, .4); }
.mwfs-name.is-go .mwfs-go-i { margin-left: .2em; }
.mwfs-c--pause .mwfs-c-v, .mwfs-c--end .mwfs-c-v { color: var(--mwfe-cream-dim); }
/* a name in two languages: on phones only the reader's part (English readers get the German) */
.mwfs.is-v .mwfs-bi-x, .mwfs.is-v .mwfs-bi-s { display: none; }
@media (max-width: 900px) {
	.mwfs:not(.is-on) .mwfs-bi-x, .mwfs:not(.is-on) .mwfs-bi-s { display: none; }
}
.mwfs-all { margin-top: .8rem; }
.mwfs-all-k {
	margin: 0 0 .2rem;
	font-family: var(--mwfe-sans);
	font-size: .6rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(205, 173, 89, .8);
}
.mwfs-all-v { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--mwfe-cream-dim); }

/* the lineage card (filled by js) */
.mwfs-card { display: none; }

/* =================================================== desktop stage */
.mwfs.is-h .mwfs-years {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}
.mwfs.is-h .mwfs-run { display: block; position: relative; height: var(--mwfs-run, 500vh); }
.mwfs-stage {
	position: sticky;
	top: calc(var(--mwfe-header-h) + var(--mwfs-toc-h, 0rem));   /* under the page's index bar */
	display: grid;
	grid-template-rows: minmax(0, 1fr) 2.4rem var(--mwfs-foot);
	height: calc(100svh - var(--mwfe-header-h) - var(--mwfs-toc-h, 0rem));
	overflow: hidden;
	/* nothing that changes in here lays out (or repaints) the page around it */
	contain: strict;
	will-change: transform;
	user-select: none;
	-webkit-user-select: none;
}
.mwfs-stream {
	position: relative;
	overflow: hidden;
	cursor: grab;
	touch-action: pan-y;
	outline: none;
}
.mwfs-stream { overflow: clip; }   /* a focused button off screen never scrolls the stream itself */
.mwfs-stream.is-dragging { cursor: grabbing; }

/* the owner's sections at the start of the stream, left of 1992 (desktop): each starts a guided
   journey; the list moves with the river and leaves with it */
.mwfs-track--intro { z-index: 6; transition: opacity .35s ease, visibility 0s; }
.mwfs.is-focus .mwfs-track--intro { opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
.mwfs-intro {
	position: absolute;
	top: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	pointer-events: none;
}
.mwfs-intro-k {
	width: min(100%, 22rem);
	margin: 0 0 clamp(.45rem, 1.5vh, .9rem);
	font-family: var(--mwfe-sans);
	font-size: .62rem;
	font-weight: 600;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--mwfe-brass);
}
.mwfs-intro-l { display: grid; gap: clamp(.28rem, .95vh, .55rem); width: min(100%, 22rem); margin: 0; padding: 0; list-style: none; }
.mwfs-jb {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 1rem;
	width: 100%;
	margin: 0;
	padding: clamp(.38rem, 1.05vh, .7rem) 1rem clamp(.38rem, 1.05vh, .7rem) 1.15rem;
	border: 1px solid rgba(226, 197, 116, .42);
	border-radius: .35rem;
	background: linear-gradient(100deg, rgba(var(--mwfe-ink-rgb), .86), rgba(74, 30, 36, .86));
	box-shadow: inset 0 1px 0 rgba(252, 240, 196, .12), 0 .6rem 1.6rem rgba(0, 0, 0, .35);
	font: inherit;
	text-align: left;
	cursor: pointer;
	pointer-events: auto;
	transition: transform .35s cubic-bezier(.25, 1, .5, 1);
}
.mwfs-jb::after {
	content: "";
	position: absolute;
	inset: -1px;
	border: 1px solid var(--mwfs-gold-hi);
	border-radius: inherit;
	box-shadow: 0 0 1.2rem rgba(226, 197, 116, .35);
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease;
}
.mwfs-jb:hover, .mwfs-jb:focus-visible { transform: translate3d(.35rem, 0, 0); }
.mwfs-jb:hover::after, .mwfs-jb:focus-visible::after { opacity: 1; }
.mwfs-jb:focus-visible { outline: none; }
.mwfs-jb-t {
	grid-column: 1;
	font-family: var(--mwfe-serif);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1rem, 2.3vh, 1.45rem);
	line-height: 1.08;
	color: var(--mwfs-gold-hi);
}
.mwfs-jb-y {
	grid-column: 1;
	margin-top: .2rem;
	font-family: var(--mwfe-sans);
	font-size: .56rem;
	font-weight: 600;
	letter-spacing: .2em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--mwfe-brass);
}
.mwfs-jb-i {
	position: relative;
	grid-column: 2;
	grid-row: 1 / span 2;
	width: 1.9rem;
	height: 1.9rem;
	border: 1px solid rgba(226, 197, 116, .6);
	border-radius: 50%;
}
.mwfs-jb-i::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	border-top: .32rem solid transparent;
	border-bottom: .32rem solid transparent;
	border-left: .5rem solid var(--mwfs-gold);
	transform: translate(-50%, -50%);
}
/* every section of 2026 has its button (owner, 2026-10-24: «add all buttons that we have sections for»):
   the list in three columns, read down; too short a stage drops the «since» lines */
.mwfs-intro.is-cols .mwfs-intro-k { width: 100%; max-width: 48rem; }
.mwfs-intro-l.is-cols { display: block; width: 100%; max-width: 48rem; columns: 3; column-gap: .55rem; }
.mwfs-intro-l.is-cols > li { break-inside: avoid; padding-bottom: clamp(.22rem, .7vh, .45rem); }
.mwfs-intro-l.is-cols .mwfs-jb { padding: clamp(.28rem, .8vh, .5rem) .55rem clamp(.28rem, .8vh, .5rem) .75rem; column-gap: .5rem; }
.mwfs-intro-l.is-cols .mwfs-jb-t { font-size: clamp(.82rem, 1.75vh, 1.08rem); }
.mwfs-intro-l.is-cols .mwfs-jb-y { margin-top: .15rem; font-size: .5rem; letter-spacing: .16em; }
.mwfs-intro-l.is-cols .mwfs-jb-i { width: 1.45rem; height: 1.45rem; }
.mwfs-intro-l.is-cols .mwfs-jb-i::before { border-top-width: .25rem; border-bottom-width: .25rem; border-left-width: .38rem; }
.mwfs-intro-l.is-cols.is-tight .mwfs-jb-y { display: none; }
.mwfs-intro-l.is-cols.is-tighter > li { padding-bottom: .16rem; }
.mwfs-intro-l.is-cols.is-tighter .mwfs-jb { padding: .18rem .35rem .18rem .5rem; column-gap: .3rem; }
.mwfs-intro-l.is-cols.is-tighter .mwfs-jb-t { font-size: .72rem; line-height: 1.05; }
.mwfs-intro-l.is-cols.is-tighter .mwfs-jb-i { width: 1.05rem; height: 1.05rem; }
.mwfs-intro-l.is-cols.is-tighter .mwfs-jb-i::before { border-top-width: .19rem; border-bottom-width: .19rem; border-left-width: .29rem; }
.mwfs-stream:focus-visible { box-shadow: inset 0 0 0 1px rgba(205, 173, 89, .6); }
/* the soft edges of the river */
.mwfs-stream::before, .mwfs-stream::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 4;
	width: clamp(3rem, 8vw, 8rem);
	pointer-events: none;
}
.mwfs-stream::before { left: 0; background: linear-gradient(90deg, rgba(var(--mwfe-ink-rgb), .95), rgba(var(--mwfe-ink-rgb), 0)); }
.mwfs-stream::after { right: 0; background: linear-gradient(270deg, rgba(var(--mwfe-ink-rgb), .95), rgba(var(--mwfe-ink-rgb), 0)); }

.mwfs-track {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	will-change: transform;
	pointer-events: none;
}
.mwfs-track svg { display: block; overflow: visible; }
.mwfs-track--base { opacity: 0; transition: opacity 1.2s ease; }
.mwfs.is-in .mwfs-track--base { opacity: .34; }
.mwfs-ink, .mwfs-ink-in {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	will-change: transform;
	pointer-events: none;
}
.mwfs-ink { overflow: hidden; }
.mwfs-ink-in { width: 100%; }
.mwfs-ink, .mwfs-track--base, .mwfs-tags { transition: opacity .45s ease; }
.mwfs.is-focus .mwfs-track--base { opacity: .1; }
.mwfs.is-focus .mwfs-ink { opacity: .16; }
.mwfs-track--lit { z-index: 2; opacity: 0; transition: opacity .45s ease; }
.mwfs.is-focus .mwfs-track--lit { opacity: 1; }

/* the living strings (js): the threads that move are drawn here while their SVG copies rest
   hidden; above the ink, below the lit family and the points of 2026 (DOM order, no z-index) */
.mwfs-live { position: absolute; top: 0; left: 0; display: block; pointer-events: none; }
.mwfs-lane .mwfs-live { will-change: transform; }
/* the zoomed view: the thread under the cursor lit, its name shown (owner, 2026-10-22) */
.mwfs-track--lit .mwfs-s.is-hover { stroke: var(--mwfs-gold-hi); }
.mwfs-track--lit .mwfs-s.is-hov2 { stroke-width: 3.6; opacity: .85; }
.mwfs.is-focus .mwfs-tag.is-on.is-hover { opacity: 1; }
.mwfs-tag.is-hover .mwfs-tag-t { color: var(--mwfs-gold-hi); }
.mwfs-hover-n {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 7;
	padding: .15rem .5rem;
	border-radius: .2rem;
	background: rgba(var(--mwfe-ink-rgb), .9);
	font-family: var(--mwfe-sans);
	font-size: .72rem;
	letter-spacing: .03em;
	white-space: nowrap;
	color: var(--mwfs-gold-hi);
	opacity: 0;
	pointer-events: none;
	will-change: transform;
	transition: opacity .12s ease;
}
.mwfs-hover-n.is-on { opacity: 1; }

/* strands */
.mwfs-s { fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* twice as thick as first drawn (owner, 2026-10-22: «double the size of all strings») */
.mwfs-track--base .mwfs-s { stroke: var(--mwfe-cream); stroke-width: 2.2; }
.mwfs-track--base .mwfs-s.is-dot { stroke-width: 2.6; stroke-dasharray: .01 9; }
.mwfs-ink .mwfs-s { stroke: var(--mwfs-gold); stroke-width: 3.8; }
.mwfs-ink .mwfs-s.is-dot { stroke-width: 3.8; stroke-dasharray: .01 10; opacity: .75; }
.mwfs-ink .mwfs-s.is-glow { stroke: rgba(226, 197, 116, .14); stroke-width: 14; }
.mwfs-track--lit .mwfs-s { stroke: var(--mwfs-gold-hi); stroke-width: 4.8; }
.mwfs-track--lit .mwfs-s.is-dot { stroke-width: 4.4; stroke-dasharray: .01 10; }
.mwfs-track--lit .mwfs-s.is-glow { stroke: rgba(252, 240, 196, .2); stroke-width: 18; }
.mwfs-track--lit .mwfs-s.is-kin { stroke: var(--mwfs-gold); stroke-width: 3.6; }
/* inside the thread it braided into, until it comes out again: finer, beside its host */
.mwfs-track--base .mwfs-s.is-in { stroke-width: 1.5; }
.mwfs-ink .mwfs-s.is-in { stroke-width: 2.4; }
.mwfs-track--lit .mwfs-s.is-in { stroke-width: 3; }
.mwfs-over .mwfs-s.is-in { stroke-width: 1.6; }
.mwfs-lane .mwfs-s.is-in, .mwfs-lane .mwfs-track--base .mwfs-s.is-in { stroke-width: 1.3; }
.mwfs-gw.is-in { stroke-width: 8; }
/* the weights (owner): the main string thickest, Culinaria, bio&dynamica and Catwalk Champagne between */
.mwfs-track--base .mwfs-s.is-w1 { stroke-width: 3.8; }
.mwfs-track--base .mwfs-s.is-w2 { stroke-width: 5.4; }
.mwfs-ink .mwfs-s.is-w1 { stroke-width: 6.8; }
.mwfs-ink .mwfs-s.is-w2 { stroke-width: 10; }
.mwfs-track--lit .mwfs-s.is-w1 { stroke-width: 8; }
.mwfs-track--lit .mwfs-s.is-w2 { stroke-width: 11.5; }
.mwfs-tag.is-w2 { font-weight: 700; }
.mwfs-tag.is-w2::before { width: 1rem; height: 1rem; margin-left: -.25rem; }
.mwfs-tag.is-w1::before { width: .82rem; height: .82rem; margin-left: -.16rem; }
/* marks on the strands: start ●, end |, new name ◆, fusion/split ◎, return ○ */
.mwfs-m-dot { fill: var(--mwfs-gold); }
.mwfs-m-ring, .mwfs-m-dia, .mwfs-m-knot, .mwfs-m-go { fill: var(--mwfe-bg-deep); stroke: var(--mwfs-gold); stroke-width: 2.2; }
.mwfs-m-go { stroke-width: 1.6; }
.mwfs-m-bar { fill: none; stroke: var(--mwfs-gold); stroke-width: 3; stroke-linecap: round; }
.mwfs-track--base .mwfs-m-dot { fill: var(--mwfe-cream); }
.mwfs-track--base .mwfs-m-ring, .mwfs-track--base .mwfs-m-dia, .mwfs-track--base .mwfs-m-knot, .mwfs-track--base .mwfs-m-go { stroke: var(--mwfe-cream); }
.mwfs-track--base .mwfs-m-bar { stroke: var(--mwfe-cream); }
.mwfs-track--lit .mwfs-m-dot { fill: var(--mwfs-gold-hi); }
.mwfs-track--lit .mwfs-m-ring, .mwfs-track--lit .mwfs-m-dia, .mwfs-track--lit .mwfs-m-knot, .mwfs-track--lit .mwfs-m-bar, .mwfs-track--lit .mwfs-m-go { stroke: var(--mwfs-gold-hi); }

/* the backlight behind the gold: soft wide strokes in one layer whose opacity GSAP breathes */
.mwfs-glow { position: absolute; top: 0; left: 0; opacity: .6; will-change: opacity; pointer-events: none; }
.mwfs-gw { fill: none; stroke: rgba(226, 197, 116, .1); stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; }
.mwfs-gw.is-w1 { stroke-width: 20; stroke: rgba(236, 210, 140, .12); }
.mwfs-gw.is-w2 { stroke-width: 28; stroke: rgba(252, 240, 196, .13); }
.mwfs-gw.is-dot { stroke-width: 9; stroke-dasharray: .01 10; stroke: rgba(226, 197, 116, .07); }
.mwfs-lane .mwfs-gw { stroke-width: 7; }
.mwfs-lane .mwfs-gw.is-w1 { stroke-width: 10; }
.mwfs-lane .mwfs-gw.is-w2 { stroke-width: 14; }
.mwfs-flow { transform-origin: 50% 50%; }

/* 2020: the dark break across every thread */
.mwfs-brk {
	position: absolute;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(90deg, rgba(14, 7, 8, 0), rgba(14, 7, 8, .82) 24%, rgba(14, 7, 8, .82) 76%, rgba(14, 7, 8, 0));
}
.mwfs-track--brk { z-index: 1; }
.mwfs.is-focus .mwfs-track--brk { opacity: .35; }
/* read top to bottom, «COVID» on top, the strings from the past running into the foot of its letters; across the
   whole band, a little transparent (owner, 2026-10-25) — js sizes it to the band (buildH) */
.mwfs-brk p {
	margin: 0;
	writing-mode: vertical-rl;
	white-space: nowrap;
	text-align: center;
	line-height: 1;
}
.mwfs-brk b {
	display: block;
	font-family: var(--mwfe-serif);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.3rem, 2vw, 1.75rem);
	letter-spacing: .02em;
	color: var(--mwfe-cream);
	opacity: .5;
}
/* 2020's online formats: two labels hovering over the band (owner: «categories hovering over the band») */
.mwfs-brk-on {
	position: absolute;
	top: 1.2rem;
	right: calc(50% + .35rem);   /* left of the band's middle: clear of the pens' names at the line */
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: .45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mwfs-brk-on li {
	padding: .3rem .7rem;
	border: 1px solid rgba(226, 197, 116, .6);
	border-radius: 999px;
	background: rgba(14, 7, 8, .92);
	box-shadow: 0 0 1rem rgba(226, 197, 116, .3);
	font-family: var(--mwfe-sans);
	font-size: .6rem;
	font-weight: 600;
	letter-spacing: .14em;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--mwfs-gold-hi);
}
.mwfs-ink .mwfs-brk-on { display: none; }
.mwfs-brk b { color: var(--mwfs-gold-hi); }

/* the now line and its pens */
.mwfs-axis {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	width: 1px;
	background: linear-gradient(180deg, rgba(226, 197, 116, 0), rgba(226, 197, 116, .55) 12%, rgba(226, 197, 116, .55) 88%, rgba(226, 197, 116, 0));
	pointer-events: none;
}
.mwfs-tags {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
	width: 0;
	height: 100%;
	contain: size layout style;
	pointer-events: none;
}
.mwfs-tag {
	position: absolute;
	top: 0;
	left: -.25rem;
	display: flex;
	align-items: center;
	gap: .55rem;
	max-width: 38vw;
	height: 1.5rem;
	margin: -.75rem 0 0;
	padding: 0 .4rem 0 0;
	border: 0;
	background: none;
	font-family: var(--mwfe-sans);
	font-size: .74rem;
	font-weight: 500;
	letter-spacing: .03em;
	line-height: 1.5rem;
	white-space: nowrap;
	color: var(--mwfe-cream);
	text-shadow: 0 0 .45rem rgba(var(--mwfe-ink-rgb), 1), 0 0 .15rem rgba(var(--mwfe-ink-rgb), 1);
	cursor: pointer;
	pointer-events: auto;
	will-change: transform;
	opacity: 0;
	visibility: hidden;
	transition: opacity .35s ease, visibility 0s linear .35s;
}
.mwfs-tag.is-on { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; }
/* 2026: the pen is a link to its section (new tab) */
a.mwfs-tag { text-decoration: none; }
.mwfs-go-i { flex: none; margin-left: -.3rem; font-style: normal; font-size: .8em; color: var(--mwfs-gold); opacity: .8; transition: opacity .2s ease, transform .2s ease; }
a.mwfs-tag:hover .mwfs-go-i, a.mwfs-tag:focus-visible .mwfs-go-i { opacity: 1; transform: translate3d(.12rem, -.12rem, 0); }
a.mwfs-tag:hover .mwfs-tag-t, a.mwfs-tag:focus-visible .mwfs-tag-t { color: var(--mwfs-gold-hi); }
.mwfs-tag.is-dim { opacity: .42; }
.mwfs.is-focus .mwfs-tag.is-on { opacity: .3; }
.mwfs.is-focus .mwfs-tag.is-on.is-lit { opacity: 1; }
.mwfs-tag::before {
	content: "";
	flex: none;
	width: .66rem;
	height: .66rem;
	margin-left: -.08rem;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, var(--mwfs-gold-hi), var(--mwfs-gold) 70%);
	box-shadow: 0 0 .55rem rgba(226, 197, 116, .7);
}
.mwfs-tag.is-dim::before { background: transparent; box-shadow: inset 0 0 0 1px var(--mwfs-gold); }
.mwfs-tag-w { position: relative; display: block; overflow: visible; contain: layout style; }
.mwfs-tag-t, .mwfs-tag-g { display: block; }
.mwfs-tag-g { position: absolute; top: 0; left: 0; }
.mwfs-tag:hover .mwfs-tag-t, .mwfs-tag:focus-visible .mwfs-tag-t { color: var(--mwfs-gold-hi); }
.mwfs-tag:focus-visible { outline: 1px solid var(--mwfe-brass); outline-offset: .1rem; }

/* the hint, top centre, gone after the first move */
.mwfs-hint {
	position: absolute;
	top: 1rem;
	left: 50%;
	z-index: 6;
	margin: 0;
	transform: translateX(-50%);
	font-family: var(--mwfe-sans);
	font-size: .62rem;
	font-weight: 600;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--mwfe-brass);
	pointer-events: none;
	transition: opacity .6s ease;
}
.mwfs.is-moved .mwfs-hint { opacity: 0; }

/* the ruler of years, moving with the stream */
.mwfs-ruler {
	position: relative;
	overflow: hidden;
	border-top: 1px solid rgba(226, 197, 116, .2);
}
.mwfs-ruler-in { position: absolute; top: 0; left: 0; height: 100%; will-change: transform; }
.mwfs-ruler-in button {
	position: absolute;
	top: 0;
	height: 100%;
	margin: 0;
	padding: .55rem 0 0;
	border: 0;
	background: none;
	font-family: var(--mwfe-sans);
	font-size: .66rem;
	font-weight: 600;
	letter-spacing: .14em;
	font-variant-numeric: lining-nums tabular-nums;
	color: rgba(211, 198, 180, .62);
	transform: translateX(-50%);
	cursor: pointer;
}
.mwfs-ruler-in button::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 1px;
	height: .35rem;
	background: rgba(226, 197, 116, .5);
}
.mwfs-ruler-in button.is-dec { color: var(--mwfe-brass); font-size: .74rem; }
.mwfs-ruler-in button.is-dec::before { height: .55rem; }
.mwfs-ruler-in button:hover, .mwfs-ruler-in button:focus-visible { color: var(--mwfs-gold-hi); }
.mwfs-ruler::after {
	content: "";
	position: absolute;
	top: 0;
	left: var(--mwfs-ax, 50%);
	width: .5rem;
	height: .5rem;
	margin-left: -.25rem;
	margin-top: -.25rem;
	transform: rotate(45deg);
	background: var(--mwfs-gold);
}

/* the foot: the year, big, left of the line; what changed, right of it */
.mwfs-foot {
	position: relative;
	display: grid;
	grid-template-columns: var(--mwfs-ax, 50%) minmax(0, 1fr);
	overflow: hidden;
}
.mwfs-now {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-start;
	margin: 0;
	padding: .2rem 1.6rem 0 0;
	text-align: right;
}
.mwfs-now-y {
	display: flex;
	height: 1em;
	overflow: hidden;
	font-family: var(--mwfe-serif);
	font-size: clamp(3.6rem, 7vw, 6.4rem);
	font-weight: 500;
	line-height: 1;
	font-variant-numeric: lining-nums tabular-nums;
	color: var(--mwfs-gold);
}
.mwfs-dg { display: block; height: 1em; overflow: hidden; }
.mwfs-dg-in { display: block; will-change: transform; transition: transform .7s cubic-bezier(.25, 1, .5, 1); }
.mwfs-dg-in span { display: block; height: 1em; text-align: center; }
.mwfs-now-meta {
	display: flex;
	gap: .9rem;
	margin-top: .45rem;
	font-family: var(--mwfe-sans);
	font-size: .66rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--mwfe-brass);
}
.mwfs-now-n { color: var(--mwfe-cream-dim); }
.mwfs-panel {
	position: relative;
	padding: .9rem var(--mwfe-gutter) 0 1.6rem;
	overflow: hidden;
	contain: strict;
	transition: opacity .35s ease;
}
/* busy years (2011, 2019, 2021) flow into a second column instead of under the edge */
.mwfs-panel .mwfs-chg { display: block; columns: 2; column-gap: 1.8rem; }
.mwfs-panel .mwfs-c { margin-bottom: .32rem; font-size: .88rem; line-height: 1.32; break-inside: avoid; }
/* measured once per layout (js): a year that still does not fit gets smaller type */
.mwfs-panel-in.is-dense .mwfs-c { margin-bottom: .2rem; font-size: .78rem; line-height: 1.25; }
.mwfs-panel-in.is-denser .mwfs-c { margin-bottom: .12rem; font-size: .7rem; line-height: 1.2; }
.mwfs-panel-in.is-dense .mwfs-c-k { font-size: .56rem; }
.mwfs-panel .mwfs-y-brk { font-size: 1.1rem; margin-bottom: .3rem; }
/* the 34 panels, built once: the year's in place, the others parked aside */
.mwfs-panel-in {
	position: absolute;
	top: .9rem;
	left: 1.6rem;
	right: var(--mwfe-gutter);
	transform: translate3d(-300vw, 0, 0);
}
.mwfs-panel-in.is-cur { transform: none; }
.mwfs.is-focus .mwfs-panel { opacity: 0; pointer-events: none; }

/* the overview at the end of the run: all 34 years at once */
.mwfs-over {
	position: absolute;
	inset: 0;
	z-index: 2;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
.mwfs-over svg { position: absolute; top: 0; left: 0; display: block; overflow: visible; }
.mwfs-over .mwfs-s { stroke: var(--mwfs-gold); stroke-width: 2.6; }
.mwfs-over .mwfs-s.is-dot { stroke-width: 2.8; stroke-dasharray: .01 6; opacity: .7; }
.mwfs-over .mwfs-s.is-w1 { stroke-width: 4.6; }
.mwfs-over .mwfs-s.is-w2 { stroke-width: 6.8; }
.mwfs-over .mwfs-m-ring, .mwfs-over .mwfs-m-dia, .mwfs-over .mwfs-m-knot, .mwfs-over .mwfs-m-go { stroke-width: 1.6; }
.mwfs-over .mwfs-m-bar { stroke-width: 2; }
/* the points of 2026 on the river and the overview: links (new tab), their name on hover */
.mwfs-go { position: absolute; top: 0; left: 0; width: 0; height: 0; }
.mwfs-go-pt {
	position: absolute;
	top: 0;
	left: 0;
	width: 1.3rem;
	height: 1.3rem;
	margin: -.65rem 0 0 -.65rem;
	border-radius: 50%;
	pointer-events: auto;
	cursor: pointer;
}
.mwfs-go-pt span {
	position: absolute;
	top: 50%;
	left: 100%;
	margin-left: .3rem;
	padding: .15rem .45rem;
	border-radius: .2rem;
	background: rgba(var(--mwfe-ink-rgb), .92);
	font-family: var(--mwfe-sans);
	font-size: .68rem;
	letter-spacing: .03em;
	line-height: 1.3;
	white-space: nowrap;
	color: var(--mwfe-cream);
	opacity: 0;
	visibility: hidden;
	transform: translate3d(0, -50%, 0);
	transition: opacity .2s ease, visibility 0s linear .2s;
}
.mwfs-go-pt span i { font-style: normal; color: var(--mwfs-gold); }
.mwfs-go-pt:hover span { opacity: 1; visibility: visible; transition: opacity .2s ease, visibility 0s; }
.mwfs-go-pt:hover::after { content: ''; position: absolute; inset: .1rem; border-radius: 50%; box-shadow: 0 0 0 1px var(--mwfs-gold-hi), 0 0 .6rem rgba(226, 197, 116, .6); }
.mwfs-over .mwfs-go-pt span { left: auto; right: 100%; margin: 0 .3rem 0 0; }
/* the river's ends past 2026 (owner, 2026-10-24: «these links at the end of the strings should be very
   inviting»): each string runs on into its button, drawn out once 2026 is reached — transform and
   opacity only; the button's height is set by the closest neighbours (--bh) */
.mwfs-track--go { z-index: 5; }
.mwfs-ends { position: absolute; top: 0; left: 0; width: 0; height: 0; --bh: 2rem; }
.mwfs-end-s {
	position: absolute;
	height: 2px;
	margin-top: -1px;
	border-radius: 1px;
	background: linear-gradient(90deg, var(--mwfs-gold-hi), var(--mwfs-gold) 75%, rgba(226, 197, 116, .6));
	box-shadow: 0 0 .5rem rgba(226, 197, 116, .35);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform .75s cubic-bezier(.25, 1, .5, 1) calc(var(--d, 0) * 1s);
}
.mwfs-end-s.is-w1 { height: 3px; margin-top: -1.5px; }
.mwfs-end-s.is-w2 { height: 4px; margin-top: -2px; }
.mwfs-end-b {
	position: absolute;
	display: flex;
	align-items: center;
	gap: .55em;
	height: var(--bh);
	margin-top: calc(var(--bh) / -2);
	padding: 0 calc(var(--bh) * .14) 0 calc(var(--bh) * .45);
	border: 1px solid rgba(226, 197, 116, .55);
	border-radius: 999px;
	background: linear-gradient(100deg, rgba(var(--mwfe-ink-rgb), .95), rgba(74, 30, 36, .95));
	box-shadow: inset 0 1px 0 rgba(252, 240, 196, .14), 0 .4rem 1.1rem rgba(0, 0, 0, .4);
	font-family: var(--mwfe-serif);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(.72rem, calc(var(--bh) * .52), 1.12rem);
	line-height: 1;
	white-space: nowrap;
	color: var(--mwfs-gold-hi);
	text-decoration: none;
	pointer-events: auto;
	opacity: 0;
	transform: translate3d(-.7rem, 0, 0);
	transition: opacity .4s ease calc(var(--d, 0) * 1s + .3s), transform .6s cubic-bezier(.25, 1, .5, 1) calc(var(--d, 0) * 1s + .3s);
}
.mwfs-end-b::after {
	content: "";
	position: absolute;
	inset: -1px;
	border: 1px solid var(--mwfs-gold-hi);
	border-radius: inherit;
	box-shadow: 0 0 1.1rem rgba(226, 197, 116, .45);
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease;
}
.mwfs-end-i {
	display: grid;
	place-items: center;
	flex: none;
	width: calc(var(--bh) * .72);
	height: calc(var(--bh) * .72);
	border-radius: 50%;
	background: var(--mwfs-gold);
	font-family: var(--mwfe-sans);
	font-size: calc(var(--bh) * .38);
	font-style: normal;
	font-weight: 700;
	color: rgb(var(--mwfe-ink-rgb));
	transition: transform .35s cubic-bezier(.25, 1, .5, 1);
}
.mwfs.is-end .mwfs-end-s { transform: none; }
.mwfs.is-end .mwfs-end-b { opacity: 1; transform: none; }
.mwfs-end-b:hover::after, .mwfs-end-b:focus-visible::after { opacity: 1; }
.mwfs-end-b:hover .mwfs-end-i, .mwfs-end-b:focus-visible .mwfs-end-i { transform: translate3d(.12rem, -.12rem, 0) scale(1.08); }
.mwfs-end-b:focus-visible { outline: none; }
.mwfs.is-end.is-focus .mwfs-end-b:not(.is-lit) { opacity: .42; }
.mwfs.is-focus .mwfs-end-s:not(.is-lit) { opacity: .3; }
.mwfs.is-end .mwfs-end-b:hover, .mwfs.is-end .mwfs-end-b:focus-visible { opacity: 1; transition-delay: 0s; }
.mwfs-over-y {
	position: absolute;
	bottom: .6rem;
	font-family: var(--mwfe-sans);
	font-size: .62rem;
	font-weight: 600;
	letter-spacing: .18em;
	color: var(--mwfe-brass);
	transform: translateX(-50%);
}
.mwfs-over-mark {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 1px;
	background: rgba(252, 240, 196, .7);
	opacity: 0;
	will-change: transform;
}
.mwfs.is-rm .mwfs-over-mark { opacity: 1; }
/* reduced motion: the overview is the stage (the final picture) */
.mwfs.is-rm .mwfs-over { opacity: 1; visibility: visible; }
.mwfs.is-rm .mwfs-flow { opacity: 0; visibility: hidden; }
.mwfs.is-rm .mwfs-stream { cursor: pointer; }

/* the scrubber: reduced motion only (the final picture, a year at a time) */
.mwfs-scrub { display: none; }
.mwfs.is-rm .mwfs-scrub {
	position: absolute;
	top: .8rem;
	left: 50%;
	z-index: 7;
	display: flex;
	align-items: center;
	gap: .8rem;
	width: min(34rem, 80%);
	transform: translateX(-50%);
	font-family: var(--mwfe-sans);
	font-size: .62rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--mwfe-brass);
}
.mwfs-scrub input { flex: 1; accent-color: var(--mwfs-gold); }
.mwfs.is-rm .mwfs-hint { display: none; }
.mwfs.is-rm.is-h .mwfs-run { height: auto; }
.mwfs.is-rm .mwfs-stage { position: relative; top: auto; height: clamp(34rem, calc(100svh - var(--mwfe-header-h) - var(--mwfs-toc-h, 0rem)), 52rem); }

/* the card of a lineage, desktop: an overlay over the foot and the lower stream,
   a scrim dimming the rest (owner, 2026-10-22: «a proper overlay over the map»,
   never a scroll box — js tightens the type until it fits) */
.mwfs-scrim { display: none; }
.mwfs.is-h .mwfs-scrim {
	position: absolute;
	inset: 0;
	z-index: 8;
	display: block;
	background: linear-gradient(180deg, rgba(var(--mwfe-ink-rgb), .1), rgba(var(--mwfe-ink-rgb), .3) 45%, rgba(var(--mwfe-ink-rgb), .86));
	pointer-events: none;   /* the stream under it stays live: hover, a click on a thread, a click beside it */
}
.mwfs.is-h .mwfs-card {
	position: absolute;
	right: max(var(--mwfe-gutter), calc(50% - 34rem));
	bottom: 0;
	left: max(var(--mwfe-gutter), calc(50% - 34rem));
	z-index: 9;
	display: block;
	padding: 1.3rem 2.2rem 1.5rem;
	background: rgb(var(--mwfe-ink-rgb));
	border: 1px solid rgba(226, 197, 116, .38);
	border-bottom: 0;
	border-radius: .6rem .6rem 0 0;
	box-shadow: 0 -1.6rem 3.5rem rgba(0, 0, 0, .5);
	touch-action: none;
	user-select: text;
	-webkit-user-select: text;
}
.mwfs.is-h .mwfs-card-names { columns: 3 13rem; }
.mwfs.is-h .mwfs-card-x { top: .9rem; right: 1rem; }
.mwfs-card[hidden], .mwfs-scrim[hidden] { display: none !important; }
/* a journey: the river is the show — the scrim only under the card; the card follows the years */
.mwfs.is-h.is-journey .mwfs-scrim { background: linear-gradient(180deg, rgba(var(--mwfe-ink-rgb), 0) 50%, rgba(var(--mwfe-ink-rgb), .78)); }
.mwfs-card-j { display: none; }
.mwfs-card.is-journey .mwfs-card-j { display: block; }
.mwfs-card.is-journey .mwfs-card-names, .mwfs-card.is-journey .mwfs-card-braid { display: none; }
.mwfs-jy { display: flex; align-items: baseline; gap: .9rem; min-width: 0; margin: .15rem 2.6rem .4rem 0; }
.mwfs-jy-y {
	flex: none;
	font-family: var(--mwfe-serif);
	font-size: clamp(2rem, 3.4vw, 2.8rem);
	font-weight: 500;
	line-height: 1;
	font-variant-numeric: lining-nums tabular-nums;
	color: var(--mwfs-gold);
}
.mwfs-jy-ed { flex: none; font-family: var(--mwfe-sans); font-size: .62rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--mwfe-brass); }
.mwfs-jy-n {
	min-width: 0;
	overflow: hidden;
	font-family: var(--mwfe-serif);
	font-style: italic;
	font-size: clamp(1.15rem, 1.8vw, 1.5rem);
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--mwfe-cream);
}
.mwfs-jf { position: relative; }
.mwfs-jf .mwfs-c { margin-bottom: .3rem; font-size: .9rem; line-height: 1.35; }
.mwfs-jf-g.is-same { grid-template-columns: minmax(0, 1fr); }
.mwfs-jf-g.is-same .mwfs-c-k { color: var(--mwfe-cream-dim); }
.mwfs-jf-m { position: absolute; top: 0; left: 2.2rem; right: 2.2rem; visibility: hidden; pointer-events: none; }
.mwfs-jp { position: relative; height: 2px; margin: .55rem 0 .45rem; overflow: hidden; background: rgba(226, 197, 116, .18); }
.mwfs-jp i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--mwfs-gold), var(--mwfs-gold-hi)); transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s linear; }
.mwfs-jh { margin: 0; font-family: var(--mwfe-sans); font-size: .56rem; font-weight: 600; letter-spacing: .2em; line-height: 1.3; text-transform: uppercase; color: rgba(205, 173, 89, .75); }
.mwfs-card.is-arrived .mwfs-jh, .mwfs-card.is-held .mwfs-jh { visibility: hidden; }
.mwfs-card-today .mwfs-jgo { font-family: var(--mwfe-serif); font-size: 1.08rem; }
.mwfs-jagain {
	margin-left: 1rem;
	padding: .3rem .75rem;
	border: 1px solid rgba(226, 197, 116, .5);
	border-radius: 999px;
	background: none;
	font-family: var(--mwfe-sans);
	font-size: .58rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mwfs-gold);
	cursor: pointer;
}
.mwfs-card:not(.is-arrived):not(.is-held) .mwfs-jagain { visibility: hidden; }
.mwfs-jagain:hover, .mwfs-jagain:focus-visible { color: var(--mwfs-gold-hi); border-color: var(--mwfs-gold-hi); }
.mwfs-card:focus { outline: none; }
.mwfs-card-x {
	position: absolute;
	top: .55rem;
	right: max(1rem, calc(var(--mwfe-gutter) - 2.4rem));
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 1px solid rgba(226, 197, 116, .45);
	border-radius: 50%;
	background: rgba(var(--mwfe-ink-rgb), .6);
	font-size: 1.1rem;
	line-height: 1;
	color: var(--mwfe-cream);
	cursor: pointer;
}
.mwfs-card-x:hover, .mwfs-card-x:focus-visible { border-color: var(--mwfs-gold); color: var(--mwfs-gold-hi); }
.mwfs-card-k {
	margin: 0;
	font-family: var(--mwfe-sans);
	font-size: .62rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--mwfe-brass);
}
.mwfs-card-t {
	margin: .15rem 2.6rem .5rem 0;
	font-family: var(--mwfe-serif);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.35rem, 2.1vw, 1.8rem);
	line-height: 1.1;
	color: var(--mwfs-gold-hi);
}
.mwfs-card-names {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 2 15rem;
	column-gap: 2rem;
	font-size: .9rem;
	line-height: 1.35;
	color: var(--mwfe-cream);
}
.mwfs-card-names li { display: flex; align-items: baseline; gap: .7rem; padding: .08rem 0; break-inside: avoid; }
.mwfs-card-names b {
	flex: none;
	min-width: 5.4rem;
	font-family: var(--mwfe-sans);
	font-size: .62rem;
	font-weight: 600;
	letter-spacing: .12em;
	font-variant-numeric: lining-nums tabular-nums;
	color: var(--mwfe-brass);
}
.mwfs-card-names .is-pause, .mwfs-card-names .is-in { color: var(--mwfe-cream-dim); font-style: italic; }
/* a long lineage fits by tighter type, never by a scrollbar (js measures once per opening) */
.mwfs-card.is-dense .mwfs-card-names { font-size: .8rem; line-height: 1.25; }
.mwfs-card.is-dense .mwfs-card-braid, .mwfs-card.is-dense .mwfs-card-today { font-size: .78rem; margin-top: .4rem; }
.mwfs-card.is-dense .mwfs-card-t { font-size: clamp(1.15rem, 1.7vw, 1.45rem); margin-bottom: .35rem; }
.mwfs-card.is-denser .mwfs-card-names { font-size: .72rem; line-height: 1.18; }
.mwfs-card.is-denser .mwfs-card-names li { padding: 0; }
.mwfs-card.is-denser .mwfs-card-braid, .mwfs-card.is-denser .mwfs-card-today { font-size: .7rem; }
.mwfs.is-h .mwfs-card.is-denser .mwfs-card-names { columns: 4 11rem; }
.mwfs-card-braid, .mwfs-card-today { margin: .55rem 0 0; font-size: .86rem; line-height: 1.45; color: var(--mwfe-cream-dim); }
.mwfs-card-braid:empty, .mwfs-card-today:empty { display: none; }
.mwfs-card-braid > span:first-child, .mwfs-card-today > span:first-child {
	margin-right: .6rem;
	font-family: var(--mwfe-sans);
	font-size: .6rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--mwfe-brass);
}
.mwfs-card-braid small { font-size: .78em; color: rgba(211, 198, 180, .8); }
.mwfs-card-today a {
	color: var(--mwfs-gold-hi);
	text-decoration: underline;
	text-decoration-color: rgba(226, 197, 116, .5);
	text-underline-offset: .22em;
}
.mwfs-card-today a:hover, .mwfs-card-today a:focus-visible { text-decoration-color: var(--mwfs-gold-hi); }

/* ========================================================= phones */
.mwfs.is-v .mwfs-hint-v {
	display: block;
	margin: -1rem 0 1.4rem;
	padding: 0 var(--mwfe-gutter);
	text-align: center;
	font-family: var(--mwfe-sans);
	font-size: .62rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--mwfe-brass);
}
.mwfs.is-v .mwfs-lane {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--mwfe-gutter);
	width: var(--mwfs-lane);
}
.mwfs-lane svg { position: absolute; top: 0; left: 0; display: block; overflow: visible; }
.mwfs-lane .mwfs-track--base { width: 100%; }
.mwfs-lane .mwfs-ink, .mwfs-lane .mwfs-ink-in { width: 100%; height: auto; }
.mwfs-lane .mwfs-s { stroke-width: 2.2; }
.mwfs-lane .mwfs-track--base .mwfs-s { stroke-width: 1.6; }
.mwfs-lane .mwfs-m-ring, .mwfs-lane .mwfs-m-dia, .mwfs-lane .mwfs-m-knot, .mwfs-lane .mwfs-m-go { stroke-width: 1.2; }
.mwfs-lane .mwfs-m-bar { stroke-width: 2; }
.mwfs-lane .mwfs-s.is-w1 { stroke-width: 3.6; }
.mwfs-lane .mwfs-s.is-w2 { stroke-width: 5.2; }
.mwfs-lane .mwfs-track--base .mwfs-s.is-w1 { stroke-width: 2.3; }
.mwfs-lane .mwfs-track--base .mwfs-s.is-w2 { stroke-width: 3.3; }
.mwfs-lane .mwfs-ink .mwfs-s.is-glow { stroke-width: 5; }
.mwfs-lane .mwfs-ink .mwfs-s.is-dot, .mwfs-lane .mwfs-track--base .mwfs-s.is-dot { stroke-dasharray: .01 6; }
.mwfs.is-v .mwfs-years {
	max-width: none;
	padding: 0 var(--mwfe-gutter) 0 calc(var(--mwfe-gutter) + var(--mwfs-lane) + 1rem);
}
.mwfs.is-v .mwfs-y { padding: .3rem 0 1.5rem; border-top: 0; }
.mwfs.is-v .mwfs-y-h {
	position: sticky;
	top: calc(var(--mwfe-header-h) + var(--mwfs-toc-h, 0rem) - 1px);
	z-index: 2;
	margin: 0 0 .5rem;
	padding: .5rem 0 .45rem;
	background: linear-gradient(180deg, rgba(var(--mwfe-ink-rgb), .96) 70%, rgba(var(--mwfe-ink-rgb), 0));
}
.mwfs.is-v .mwfs-y-num { font-size: 1.65rem; color: rgba(226, 197, 116, .55); }
.mwfs.is-v .mwfs-y.is-now .mwfs-y-num, .mwfs.is-v .mwfs-y.is-past .mwfs-y-num { color: var(--mwfs-gold); }
.mwfs.is-v .mwfs-y-n { cursor: pointer; }
.mwfs.is-v .mwfs-y-n::after { content: " +"; color: var(--mwfe-brass); }
.mwfs.is-v .mwfs-y-n[aria-expanded="true"]::after { content: " −"; }
.mwfs.is-v .mwfs-all { display: none; }
.mwfs.is-v .mwfs-y.is-open .mwfs-all { display: block; }
.mwfs.is-v .mwfs-c { font-size: .92rem; column-gap: .5rem; grid-template-columns: 1.25rem minmax(0, 1fr); }
.mwfs.is-v .mwfs-c .mwfs-g { width: 1.25rem; }
.mwfs.is-v .mwfs-y.is-break .mwfs-y-brk {
	padding: .6rem .8rem;
	background: rgba(14, 7, 8, .9);
	border-left: 1px solid var(--mwfe-brass);
}
.mwfs.is-v.is-focus .mwfs-lane .mwfs-track--base { opacity: .1; }
.mwfs.is-v.is-focus .mwfs-lane .mwfs-ink { opacity: .2; }
/* the now line across the lane, phones */
.mwfs-vaxis {
	position: fixed;
	top: 45vh;
	left: calc(var(--mwfe-gutter) - .5rem);
	z-index: 3;
	width: calc(var(--mwfs-lane) + 1rem);
	height: 1px;
	background: linear-gradient(90deg, rgba(226, 197, 116, 0), rgba(226, 197, 116, .7) 20%, rgba(226, 197, 116, .7) 80%, rgba(226, 197, 116, 0));
	opacity: 0;
	pointer-events: none;
	transition: opacity .4s ease;
}
.mwfs.is-v.is-inside .mwfs-vaxis { opacity: 1; }

/* phones: the journeys (owner, 2026-10-22: «add the journeys to mobile as well … the button elements presented
   more neatly for phone screens»): half-width gold buttons at the head of the rows, 1 + 2 + 2 + 2 (the first,
   the longest name, spans both), names on one line, 44 px targets; they come up with the head */
.mwfs-vj { display: none; }
.mwfs.is-v .mwfs-vj {
	position: relative;
	z-index: 3;   /* above the lane, which runs the whole body */
	display: block;
	max-width: 30rem;
	margin: 0 auto 2.2rem;
	padding: 0 var(--mwfe-gutter);
}
.mwfs-vj-k {
	margin: 0 0 .7rem;
	text-align: center;
	font-family: var(--mwfe-sans);
	font-size: .6rem;
	font-weight: 600;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--mwfe-brass);
}
.mwfs-vj-l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 0; padding: 0; list-style: none; }
.mwfs-vj-l > li { display: flex; }
.mwfs-vj-l > li:first-child { grid-column: 1 / -1; }
.mwfs-vj .mwfs-jb { min-height: 2.75rem; padding: .45rem .5rem .45rem .7rem; column-gap: .45rem; transition: none; }
.mwfs-vj .mwfs-jb:hover, .mwfs-vj .mwfs-jb:focus-visible { transform: none; }
.mwfs-vj .mwfs-jb-t { font-size: clamp(.8rem, 3.6vw, .98rem); white-space: nowrap; }
.mwfs-vj .mwfs-jb-y { font-size: .5rem; letter-spacing: .14em; white-space: nowrap; }
.mwfs-vj .mwfs-jb-i { width: 1.45rem; height: 1.45rem; }
.mwfs-vj .mwfs-jb-i::before { border-top-width: .25rem; border-bottom-width: .25rem; border-left-width: .38rem; }
.mwfs.is-armed .mwfs-vj-l > li { opacity: 0; transform: translate3d(0, .9rem, 0); }
.mwfs.is-armed.is-in .mwfs-vj-l > li {
	opacity: 1;
	transform: none;
	transition: opacity .7s cubic-bezier(.25, 1, .5, 1) calc(.3s + var(--i) * .05s), transform .7s cubic-bezier(.25, 1, .5, 1) calc(.3s + var(--i) * .05s);
}
/* a journey on phones: its thread gold up to the line (revealed with the ink), faint beyond; a compact sheet
   (≤ 42 svh): the year, the edition and the name on one line, four lines of facts, the progress, today + ↺ */
.mwfs-lane .mwfs-ink--j { display: none; }
.mwfs.is-v.is-jcard .mwfs-lane .mwfs-ink--j { display: block; opacity: 1; }
.mwfs-lane .mwfs-ink--j .mwfs-s { stroke: var(--mwfs-gold-hi); }
.mwfs.is-v.is-jcard .mwfs-lane .mwfs-track--lit { opacity: .35; }
.mwfs.is-v .mwfs-card.is-journey { max-height: 42svh; overflow: hidden; padding-top: .8rem; }
.mwfs.is-v .mwfs-card.is-journey .mwfs-card-k { margin-bottom: .1rem; }
.mwfs.is-v .mwfs-card.is-journey .mwfs-card-t { margin-bottom: .2rem; padding-right: 2.4rem; font-size: 1.15rem; }
.mwfs.is-v .mwfs-jy { gap: .6rem; margin: 0 0 .3rem; }
.mwfs.is-v .mwfs-jy-y { font-size: 1.7rem; }
.mwfs.is-v .mwfs-jy-n { font-size: 1rem; }
.mwfs.is-v .mwfs-card.is-journey .mwfs-jf { max-height: 5.4em; overflow: hidden; font-size: .8rem; }
.mwfs.is-v .mwfs-card.is-journey .mwfs-jf .mwfs-c { margin-bottom: 0; font-size: 1em; line-height: 1.35; }
.mwfs.is-v .mwfs-card.is-jdense .mwfs-jf { font-size: .7rem; }
.mwfs.is-v .mwfs-card.is-journey .mwfs-jp { margin: .4rem 0 .3rem; }
.mwfs.is-v .mwfs-card.is-journey .mwfs-jh { font-size: .5rem; }
.mwfs.is-v .mwfs-card.is-journey .mwfs-card-today { margin-top: .3rem; }

/* the card, phones: a sheet from the bottom, sized to its words; the page stays live under it
   (owner, 2026-10-22): the scrim only shades the foot and never takes a touch */
.mwfs.is-v .mwfs-scrim {
	position: fixed;
	inset: 0;
	z-index: 59;
	display: block;
	background: linear-gradient(180deg, rgba(var(--mwfe-ink-rgb), 0) 35%, rgba(var(--mwfe-ink-rgb), .55));
	pointer-events: none;
}
.mwfs.is-v .mwfs-card {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	display: block;
	padding: 1.1rem var(--mwfe-gutter) calc(1.4rem + env(safe-area-inset-bottom, 0px));
	touch-action: none;
	overscroll-behavior: contain;
	background: rgba(var(--mwfe-ink-rgb), .98);
	border-top: 1px solid rgba(226, 197, 116, .45);
	box-shadow: 0 -1.5rem 3rem rgba(0, 0, 0, .55);
	transform: translate3d(0, 0, 0);
	will-change: transform;
}
.mwfs.is-v .mwfs-card.is-scroll { max-height: 45svh; overflow-y: auto; touch-action: pan-y; }
.mwfs.is-v .mwfs-card-x { top: .8rem; right: var(--mwfe-gutter); }
.mwfs.is-v .mwfs-card-names { columns: auto; }
.mwfs.is-v .mwfs-card-names li { padding: .12rem 0; }

@media (prefers-reduced-motion: reduce) {
	.mwfs.is-armed .mwfs-head > * { opacity: 1; transform: none; }
	.mwfs-dg-in, .mwfs-tag, .mwfs-track--base, .mwfs-ink, .mwfs-track--lit, .mwfs-panel, .mwfs-hint, .mwfs-vaxis { transition: none; }
}

/* =============================================================
   Outside .mwfs: the page's parts (owner, 2026-10-22: «we should work with general headers more;
   introduce as mwfe-toc for MWF Timeline and Editions over the Years»). The bar is the design
   system's .mwfe-toc (custom-css/mwf.css); here only its set height — the stage and the phones'
   year heads stand under it — and its stepping aside under a lineage's card
   ============================================================= */
.mwfh { --mwfh-toc-h: 2.4rem; }
.mwfe-toc ~ .mwfs { --mwfs-toc-h: var(--mwfh-toc-h); }
.mwfh-toc { transition: transform .3s ease, opacity .3s ease; }
.mwfh-toc .mwfe-toc-inner { justify-content: center; height: var(--mwfh-toc-h); }
.mwfh-toc a { display: flex; align-items: center; padding: 0 .9rem; }
.mwfh-toc.is-off { transform: translate3d(0, -100%, 0); opacity: 0; pointer-events: none; }
.mwfh-part-k { justify-content: center; margin: clamp(3rem, 9vh, 6rem) var(--mwfe-gutter) 0; text-align: center; }
.mwfh-part-k::before { display: none; }
/* round D: the band's inert stand-in (template) — css/history.css shows every .mwfh-band from 1100 px */
.mwfh-band[hidden] { display: none !important; }
@media (max-width: 900px) {
	/* two labels side by side at 375 px, 44 px targets */
	.mwfh { --mwfh-toc-h: 2.75rem; }
	.mwfh-toc .mwfe-toc-inner { gap: 0; padding: 0 .5rem; }
	.mwfh-toc a { padding: 0 .55rem; font-size: .6rem; letter-spacing: .1em; }
}
@media (prefers-reduced-motion: reduce) {
	.mwfh-toc { transition: none; }
}

/* the skip, desktop (owner, 2026-10-22: «if the mouse is below the .mwfs-now-meta line while scrolling,
   skip the timeline»): a faint caption at the stage's foot while the pointer is there */
.mwfs-skip {
	position: absolute;
	bottom: .5rem;
	left: 50%;
	z-index: 7;
	margin: 0;
	font-family: var(--mwfe-sans);
	font-size: .56rem;
	font-weight: 600;
	letter-spacing: .2em;
	line-height: 1.3;
	text-transform: uppercase;
	white-space: nowrap;
	color: rgba(205, 173, 89, .85);
	pointer-events: none;
	opacity: 0;
	transform: translate3d(-50%, .5rem, 0);
	transition: opacity .3s ease, transform .3s ease;
}
.mwfs-skip.is-on { opacity: 1; transform: translate3d(-50%, 0, 0); }
.mwfs.is-focus .mwfs-skip { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
	.mwfs-skip { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
	.mwfs-end-s, .mwfs-end-b { transition: none; }
}

/* =========================================================== phones: the swiped stage
   (owner, 2026-10-26: «change the scrolling design for a swiping design … allow to scroll out of the
   timeline when downward swiping on phones»): the sideways stage one screen tall — a swipe across runs
   the years, a swipe down scrolls the page past it; the journeys a two-row rail above it; the card of a
   journey leads with the year and its name, big */
.mwfs.is-sw {
	--mwfs-col: clamp(6.4rem, 30vw, 9rem);
	--mwfs-foot: clamp(8.4rem, 25svh, 11rem);
}
.mwfs.is-sw .mwfs-body { display: flex; flex-direction: column; }
.mwfs.is-sw .mwfs-run { height: auto; }
.mwfs.is-sw .mwfs-stage {
	position: relative;
	top: auto;
	height: clamp(20rem, 100svh, 60rem);   /* the whole screen once locked (the header steps away) */
	grid-template-rows: minmax(0, 1fr) 2rem var(--mwfs-foot);
}
/* locked (js: the page at rest on the stage, or a journey): the hand runs the years, a full swipe leaves */
.mwfs.is-sw.is-locked .mwfs-stage { touch-action: none; }
html.mwfs-full header.header { transform: translate3d(0, -110%, 0) !important; transition: transform .35s ease !important; }
html.mwfs-full .mwfe-progress { opacity: 0; transition: opacity .25s ease; }   /* the page's hairline under the header goes with it */
.mwfs.is-sw .mwfs-foot { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.mwfs.is-sw .mwfs-now { flex-direction: row; align-items: center; gap: .9rem; padding: .35rem var(--mwfe-gutter) 0; text-align: left; }
.mwfs.is-sw .mwfs-now-y { font-size: clamp(2.4rem, 11vw, 3.2rem); }
.mwfs.is-sw .mwfs-now-meta { flex-direction: column; gap: .2rem; margin-top: 0; font-size: .58rem; }
.mwfs.is-sw .mwfs-panel { padding: .3rem var(--mwfe-gutter) 0; }
.mwfs.is-sw .mwfs-panel-in { top: .3rem; left: var(--mwfe-gutter); right: var(--mwfe-gutter); }
.mwfs.is-sw .mwfs-panel .mwfs-chg { columns: 1; }
.mwfs.is-sw .mwfs-panel .mwfs-c { margin-bottom: .22rem; font-size: .8rem; line-height: 1.3; }
.mwfs.is-sw .mwfs-tag { max-width: calc(100vw - var(--mwfs-ax) - .6rem); font-size: .68rem; }
.mwfs.is-sw .mwfs-hint { top: .8rem; white-space: nowrap; }

/* the journeys: a rail of two rows swiped sideways, above the stage */
.mwfs.is-sw .mwfs-vj { position: relative; z-index: 3; display: block; order: -1; margin: 0 0 1.1rem; padding: 0; }
.mwfs.is-sw .mwfs-vj-k { padding: 0 var(--mwfe-gutter); }
.mwfs.is-sw .mwfs-vj-l {
	grid-template-columns: none;
	grid-template-rows: repeat(2, auto);
	grid-auto-flow: column;
	grid-auto-columns: min(46vw, 13rem);
	padding: .1rem var(--mwfe-gutter) .35rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scroll-padding: 0 var(--mwfe-gutter);
	scrollbar-width: none;
}
.mwfs.is-sw .mwfs-vj-l::-webkit-scrollbar { display: none; }
.mwfs.is-sw .mwfs-vj-l > li { scroll-snap-align: start; }
.mwfs.is-sw .mwfs-vj-l > li:first-child { grid-column: auto; }
.mwfs.is-sw .mwfs-vj .mwfs-jb-t { font-size: .86rem; line-height: 1.12; white-space: normal; }

/* the last journey again, from its start (owner: «a button that allows to go back to auto mode of the last
   selected button from the beginning»): a pill at the stage's head while that journey is not gliding */
.mwfs-replay { display: none; }
.mwfs.is-sw .mwfs-replay {
	position: absolute;
	top: .55rem;
	left: var(--mwfe-gutter);
	z-index: 10;
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	max-width: calc(100% - 2 * var(--mwfe-gutter));
	padding: .48rem .9rem .48rem .7rem;
	border: 1px solid rgba(226, 197, 116, .6);
	border-radius: 999px;
	background: rgba(var(--mwfe-ink-rgb), .92);
	box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .45);
	font-family: var(--mwfe-sans);
	font-size: .58rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mwfs-gold);
	cursor: pointer;
	opacity: 0;
	transform: translate3d(0, -.4rem, 0);
	pointer-events: none;
	transition: opacity .35s ease, transform .35s ease;
}
.mwfs.is-sw .mwfs-replay.is-on { opacity: 1; transform: none; pointer-events: auto; }
.mwfs-replay i { font-style: normal; font-size: .95rem; letter-spacing: 0; }
.mwfs-replay b {
	overflow: hidden;
	font-family: var(--mwfe-serif);
	font-style: italic;
	font-weight: 500;
	font-size: .86rem;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--mwfs-gold-hi);
}

/* the card of a journey on phones: the year and its name lead, big; a few lines of what changed below */
.mwfs.is-sw .mwfs-card { right: .5rem; left: .5rem; padding: .85rem 1rem .9rem; }
.mwfs.is-sw .mwfs-card-k { margin-bottom: .1rem; font-size: .52rem; }
.mwfs.is-sw .mwfs-card-t { margin-bottom: .1rem; padding-right: 2.4rem; font-size: 1.1rem; }
.mwfs.is-sw .mwfs-card-x { top: .6rem; right: .6rem; }
.mwfs.is-sw .mwfs-jy { flex-wrap: wrap; gap: 0 .7rem; margin: .15rem 0 .35rem; }
.mwfs.is-sw .mwfs-jy-y { font-size: clamp(2.7rem, 13vw, 3.4rem); }
.mwfs.is-sw .mwfs-jy-n {
	flex-basis: 100%;
	display: -webkit-box;
	min-height: 2.3em;
	margin-top: .2rem;
	font-size: 1.25rem;
	line-height: 1.15;
	white-space: normal;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.mwfs.is-sw .mwfs-jf {
	height: 2.75rem;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
	mask-image: linear-gradient(180deg, #000 70%, transparent);
}
.mwfs.is-sw .mwfs-jf .mwfs-c { margin-bottom: .15rem; font-size: .76rem; line-height: 1.3; }
.mwfs.is-sw .mwfs-card-today { font-size: .8rem; }
.mwfs.is-sw .mwfs-jp { margin: .4rem 0 .35rem; }
.mwfs.is-sw .mwfs-jh { overflow: hidden; font-size: .5rem; white-space: nowrap; text-overflow: ellipsis; }
/* phones held sideways: the card at the side, the river beside it */
@media (max-height: 520px) {
	.mwfs.is-sw .mwfs-card { top: 0; right: 0; left: auto; width: min(24rem, 52%); overflow: hidden; border-bottom: 0; border-radius: .6rem 0 0 0; }
	.mwfs.is-sw .mwfs-jy-y { font-size: 2.2rem; }
	.mwfs.is-sw .mwfs-jy-n { min-height: 0; font-size: 1.05rem; }
	.mwfs.is-sw .mwfs-jf { height: 2.2rem; }
}