/* =====================================================================
   THE MAP AROUND THE KURHAUS — inc/mwf-city-map.php (2026-10-08)
   A sheet of plan paper like «Dentro il Kurhaus» (css/visitors.css): the
   town in soft greys and water, the house in ink, numbered wine pins kept
   at screen size by js/city-map.js, the numbered list beside the map.
   Two skins for the list's chrome — light on the white Visitors Area,
   dark on the wine-ground event pages; the sheet is paper either way.
   Scoped to .mwfk; rem only.
   ===================================================================== */

.mwfk {
	--mwfk-ink: #2a2224;
	--mwfk-text: #4a4144;
	--mwfk-wine: #671e26;
	--mwfk-brass: #cdad59;
	--mwfk-brass-dark: #8c6d1f;
	--mwfk-line: rgba(42, 34, 36, .14);
	--mwfk-paper: #fbfaf7;
	--mwfk-card: #ffffff;
	--mwfk-card-line: rgba(42, 34, 36, .14);
	--mwfk-card-hover: rgba(103, 30, 38, .4);
	--mwfk-name: #671e26;
	--mwfk-num: #671e26;
	--mwfk-num-on: #671e26;
	--mwfk-num-on-text: #ffffff;
	--mwfk-chip: #8c6d1f;
	--mwfk-chip-line: rgba(140, 109, 31, .4);
	--mwfk-group: #8c6d1f;
	--mwfk-more: #671e26;
	--mwfk-more-text: #fcfdde;
	--mwfk-shadow: 0 1.1rem 2.5rem -1.7rem rgba(42, 34, 36, .5);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(18rem, 23rem);
	gap: clamp(1.2rem, 3vw, 2.4rem);
	align-items: start;
	font-family: var(--mwfe-sans, 'Raleway', system-ui, sans-serif);
}
.mwfk--dark {
	--mwfk-text: #d3c6b4;
	--mwfk-card: rgba(255, 255, 255, .035);
	--mwfk-card-line: rgba(205, 173, 89, .28);
	--mwfk-card-hover: rgba(205, 173, 89, .6);
	--mwfk-name: #f4efe4;
	--mwfk-num: #cdad59;
	--mwfk-num-on: #cdad59;
	--mwfk-num-on-text: #28191b;
	--mwfk-chip: #cdad59;
	--mwfk-chip-line: rgba(205, 173, 89, .45);
	--mwfk-group: #cdad59;
	--mwfk-more: #cdad59;
	--mwfk-more-text: #28191b;
	--mwfk-shadow: 0 1.4rem 2.8rem -1.6rem rgba(0, 0, 0, .7);
}
.mwfk--stack { grid-template-columns: 1fr; gap: 1rem; }
.mwfk-board { min-width: 0; }
.mwfk--side .mwfk-board {
	position: sticky;
	top: calc(var(--mwfe-header-h, 14vh) + 1.2rem);
	z-index: 2;
}

/* --------------------------------------------------------- the sheet */
.mwfk-stage {
	position: relative;
	aspect-ratio: 456 / 334; /* the town's window, in the drawing's millimetres */
	border: 1px solid var(--mwfk-line);
	border-radius: 1.25rem;
	overflow: hidden;
	background-color: var(--mwfk-paper);
	background-image:
		linear-gradient(rgba(103, 30, 38, .055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(103, 30, 38, .055) 1px, transparent 1px);
	background-size: 2rem 2rem;
	background-position: center;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 1.6rem 3rem -1.8rem rgba(42, 34, 36, .45);
}
.mwfk--dark .mwfk-stage { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 2.2rem 4rem -2rem rgba(0, 0, 0, .8); }
.mwfk-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	overflow: hidden;
}
/* the pins and labels take their screen size from the script: not before */
.mwfk-svg:not(.is-ready) .mwfk-pins,
.mwfk-svg:not(.is-ready) .mwfk-labels { opacity: 0; }
@media (scripting: none) {
	.mwfk-svg:not(.is-ready) .mwfk-pins,
	.mwfk-svg:not(.is-ready) .mwfk-labels { opacity: 1; }
}

/* the town */
.mwfk-river { fill: #d4e3ea; }
.mwfk-river-line { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.mwfk-street { fill: #e6e2db; }
.mwfk-bridge { fill: #efe8d6; stroke: rgba(140, 109, 31, .6); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.mwfk-bridge-line { fill: none; stroke: rgba(140, 109, 31, .5); stroke-width: 1px; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }
.mwfk-block {
	fill: rgba(103, 30, 38, .14);
	stroke: rgba(103, 30, 38, .6);
	stroke-width: 1px;
	vector-effect: non-scaling-stroke;
	transition: fill .3s, stroke .3s;
}
.mwfk-block--hotel { fill: rgba(42, 34, 36, .08); stroke: rgba(42, 34, 36, .5); }
.mwfk-block--quiet { fill: rgba(42, 34, 36, .05); stroke: rgba(42, 34, 36, .3); stroke-dasharray: 3 3; }
.mwfk-block.is-on { fill: rgba(103, 30, 38, .82); stroke: var(--mwfk-brass); }

/* the house */
.mwfk-walls { opacity: .55; pointer-events: none; }
.mwfk-room {
	fill: rgba(103, 30, 38, .05);
	fill-rule: evenodd;
	stroke: rgba(103, 30, 38, .35);
	stroke-width: 1px;
	vector-effect: non-scaling-stroke;
	pointer-events: none;
}
.mwfk-room--arena { fill: rgba(140, 109, 31, .08); stroke: rgba(140, 109, 31, .5); }

/* the way: the red carpet along the Corso, the walk to the Terme */
.mwfk-route {
	fill: none;
	stroke: var(--mwfk-wine);
	stroke-width: 2px;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 6 4;
	vector-effect: non-scaling-stroke;
	opacity: .75;
}
.mwfk-svg marker path { fill: var(--mwfk-wine); }
.mwfk-door { fill: none; stroke: var(--mwfk-wine); stroke-width: 1.5px; vector-effect: non-scaling-stroke; transition: stroke .3s; }
.mwfk-door.is-on { stroke: var(--mwfk-brass-dark); }

/* the labels: in screen pixels (the script counter-scales their group) */
.mwfk-lbl text {
	font-family: var(--mwfe-sans, 'Raleway', system-ui, sans-serif);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	fill: rgba(42, 34, 36, .78);
	dominant-baseline: central;
	pointer-events: none;
	user-select: none;
}
.mwfk-lbl--water text { font-style: italic; text-transform: none; letter-spacing: .06em; font-weight: 500; fill: rgba(44, 80, 96, .7); }
.mwfk-lbl--street text { font-size: 8px; }
.mwfk-lbl--place text {
	font-family: var(--mwfe-serif, 'Cormorant Garamond', Georgia, serif);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: .26em;
	fill: var(--mwfk-wine);
	transition: fill .3s;
}
.mwfk-lbl.is-on text { fill: #ffffff; paint-order: stroke; stroke: var(--mwfk-wine); stroke-width: 3px; stroke-linejoin: round; }
.mwfk-lbl--mid text { text-anchor: middle; }
.mwfk-lbl--door text { font-size: 7.5px; letter-spacing: .08em; fill: var(--mwfk-wine); }
.mwfk.is-narrow .mwfk-lbl--door { display: none; }

/* the pins: like the guide's, sized in screen pixels */
.mwfk-pin { cursor: pointer; outline: none; }
.mwfk-pin-halo { fill: rgba(103, 30, 38, 0); transition: fill .25s; }
.mwfk-pin-dot { fill: #ffffff; stroke: var(--mwfk-wine); stroke-width: 1.5; transition: fill .25s, stroke .25s; }
.mwfk-pin-n {
	font-family: var(--mwfe-sans, 'Raleway', system-ui, sans-serif);
	font-size: 11px;
	font-weight: 700;
	fill: var(--mwfk-wine);
	text-anchor: middle;
	dominant-baseline: central;
	pointer-events: none;
	user-select: none;
	transition: fill .25s;
}
.mwfk-pin:hover .mwfk-pin-dot,
.mwfk-pin:focus-visible .mwfk-pin-dot { fill: var(--mwfk-brass); }
.mwfk-pin:hover .mwfk-pin-halo { fill: rgba(205, 173, 89, .25); }
.mwfk-pin.is-on .mwfk-pin-dot { fill: var(--mwfk-wine); stroke: var(--mwfk-brass); stroke-width: 2; }
.mwfk-pin.is-on .mwfk-pin-n { fill: #ffffff; }
.mwfk-pin.is-on .mwfk-pin-halo { fill: rgba(103, 30, 38, .12); }
.mwfk-pulse { pointer-events: none; }
.mwfk-pulse-ring { fill: none; stroke: var(--mwfk-brass); stroke-width: 1.5; opacity: 0; }

/* the hint, the way back, the sheet's brand line */
.mwfk-hint {
	position: absolute;
	top: .8rem;
	left: 1rem;
	margin: 0;
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--mwfk-brass-dark);
	pointer-events: none;
	transition: opacity .4s;
}
.mwfk.has-poi .mwfk-hint { opacity: 0; }
.mwfk .mwfk-stage .mwfk-whole {
	position: absolute;
	top: .7rem;
	right: .7rem;
	z-index: 3;
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: .45em;
	width: auto;
	min-height: 0;
	margin: 0;
	border: 1px solid var(--mwfk-brass);
	background: var(--mwfk-wine);
	color: #fcfdde;
	border-radius: 999px;
	padding: .6em 1.05em;
	font-family: var(--mwfe-sans, 'Raleway', system-ui, sans-serif);
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: 0 .6rem 1.4rem -.6rem rgba(42, 34, 36, .6);
	transition: background .3s, color .3s;
}
.mwfk .mwfk-stage .mwfk-whole[hidden] { display: none; }
.mwfk .mwfk-stage .mwfk-whole:hover { background: var(--mwfk-brass); color: var(--mwfk-ink); }
.mwfk-brand {
	position: absolute;
	right: 1rem;
	bottom: .6rem;
	font-size: .58rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(42, 34, 36, .45);
	pointer-events: none;
	user-select: none;
}

/* ------------------------------------------------------ the list */
/* every rule carries .mwfk-list: the host pages style their own buttons and
   headings (the masterclass page zeroed the head's padding, 2026-10-08) */
.mwfk .mwfk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.mwfk .mwfk-list .mwfk-group {
	margin: 1rem 0 .25rem .3rem;
	padding: 0;
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--mwfk-group);
}
.mwfk .mwfk-list .mwfk-group:first-child { margin-top: 0; }
.mwfk .mwfk-list .mwfk-item {
	margin: 0;
	padding: 0;
	background: var(--mwfk-card);
	border: 1px solid var(--mwfk-card-line);
	border-radius: 1.1rem;
	overflow: hidden;
	transition: border-color .3s, box-shadow .3s;
}
.mwfk .mwfk-list .mwfk-item:hover { border-color: var(--mwfk-card-hover); }
.mwfk .mwfk-list .mwfk-item.is-open { border-color: var(--mwfk-num-on); box-shadow: var(--mwfk-shadow); }
.mwfk .mwfk-list .mwfk-item-head {
	appearance: none;
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr) 1.4rem;
	align-items: center;
	gap: 1rem;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 1rem 1.1rem 1rem 1rem;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	text-align: left;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.2;
	font-size: 1rem;
	cursor: pointer;
	color: var(--mwfk-text);
	font-family: inherit;
}
.mwfk .mwfk-list .mwfk-item-n {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--mwfk-num);
	font-family: var(--mwfe-serif, 'Cormorant Garamond', Georgia, serif);
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1;
	color: var(--mwfk-num);
	transition: background .3s, color .3s;
}
.mwfk .mwfk-list .mwfk-item.is-open .mwfk-item-n { background: var(--mwfk-num-on); color: var(--mwfk-num-on-text); }
.mwfk .mwfk-list .mwfk-item-t { min-width: 0; }
.mwfk .mwfk-list .mwfk-item-name {
	display: block;
	font-family: var(--mwfe-serif, 'Cormorant Garamond', Georgia, serif);
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1.15;
	color: var(--mwfk-name);
}
.mwfk .mwfk-list .mwfk-item-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.mwfk .mwfk-list .mwfk-chip {
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--mwfk-chip);
	border: 1px solid var(--mwfk-chip-line);
	border-radius: 999px;
	padding: .32em .7em;
	white-space: nowrap;
}
.mwfk .mwfk-list .mwfk-item-plus {
	justify-self: center;
	font-family: var(--mwfe-serif, 'Cormorant Garamond', Georgia, serif);
	font-weight: 300;
	font-size: 1.8rem;
	line-height: 1;
	color: var(--mwfk-chip);
	transition: transform .4s cubic-bezier(.2, .65, .3, 1);
}
.mwfk .mwfk-list .mwfk-item.is-open .mwfk-item-plus { transform: rotate(45deg); }
.mwfk .mwfk-list .mwfk-item-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.2, .65, .3, 1); }
.mwfk .mwfk-list .mwfk-item.is-open .mwfk-item-body { grid-template-rows: 1fr; }
.mwfk .mwfk-list .mwfk-item-inner { overflow: hidden; }
.mwfk .mwfk-list .mwfk-item-text {
	/* the words start under the name, not under the numeral */
	padding: 0 1.1rem 1.15rem 4.5rem;
	color: var(--mwfk-text);
	font-size: .95rem;
	line-height: 1.65;
}
.mwfk .mwfk-list .mwfk-item-text p { margin: 0 0 .7em; }
.mwfk .mwfk-list .mwfk-item-text p:last-child { margin-bottom: 0; }
.mwfk .mwfk-list .mwfk-item-text strong { color: var(--mwfk-name); font-weight: 600; }
.mwfk .mwfk-list .mwfk-more {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	margin-top: .95rem;
	border: 1px solid var(--mwfk-more);
	background: transparent;
	color: var(--mwfk-more);
	border-radius: 999px;
	padding: .65em 1.25em;
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.2;
	transition: background .3s, color .3s;
}
.mwfk .mwfk-list .mwfk-more:hover { background: var(--mwfk-more); color: var(--mwfk-more-text); }
.mwfk .mwfk-list .mwfk-more .mwfe-arrow { transition: transform .3s; }
.mwfk .mwfk-list .mwfk-more:hover .mwfe-arrow { transform: translateX(4px); }

/* ------------------------------------------------------ the heads the pages print over the map */
.mwfk-head { position: relative; max-width: 50rem; margin: 0 auto clamp(1.6rem, 4vh, 2.6rem); text-align: center; }
.mwfk-head .mwfe-kicker { justify-content: center; margin-bottom: .9rem; }
.mwfk-head .mwfe-kicker::after { content: ""; width: 3.2em; height: 1px; background: var(--mwfe-brass, #cdad59); flex: 0 0 auto; }
.mwfk-head p { font-size: 1.02rem; line-height: 1.6; margin: 0; }

/* ------------------------------------------------------------ phones */
@media (max-width: 900px) {
	.mwfk { grid-template-columns: 1fr; gap: 1rem; }
	.mwfk--side .mwfk-board { position: static; }
	.mwfk-brand { display: none; }
	.mwfk .mwfk-list .mwfk-item-head { grid-template-columns: 2.2rem minmax(0, 1fr) 1.2rem; gap: .8rem; padding: .85rem .9rem .85rem .85rem; }
	.mwfk .mwfk-list .mwfk-item-n { width: 2.2rem; height: 2.2rem; font-size: 1.1rem; }
	.mwfk .mwfk-list .mwfk-item-text { padding-left: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
	.mwfk .mwfk-list .mwfk-item-body,
	.mwfk .mwfk-list .mwfk-item-plus,
	.mwfk-block,
	.mwfk-door { transition: none; }
}