@@ Line 1: / Line 1: @@
+__NOTOC__
 <html>
 <style>
-.vu-page {
+.vu-main {
 	--vu-border: var(--border-color-base, #a2a9b1);
 	--vu-text: var(--color-base, #202122);
@@ Line 9: / Line 11: @@
 	--vu-red: var(--color-destructive, #d33);
 	--vu-navy: #1B223D;
-	--vu-blue: #2c4265;
+	--vu-navy-light: #2b3d60;
+	--vu-blue: #78c7ff;
 	max-width: 1180px;
-	margin: 0 auto 32px;
+	margin: 0 auto 30px;
 	color: var(--vu-text);
 }
-.vu-page,
+.vu-main,
-.vu-page * {
+.vu-main * {
 	box-sizing: border-box;
 }
-.vu-page a {
+.vu-main a {
 	color: var(--vu-link);
 	text-decoration: none;
 }
-.vu-page a:hover {
+.vu-main a:hover {
 	text-decoration: underline;
 }
-.vu-page a.new,
+.vu-main a.new,
-.vu-page a.new:visited {
+.vu-main a.new:visited {
 	color: var(--vu-red) !important;
 }
-/* Masthead */
+/* Header */
-.vu-masthead {
+.vu-header {
 	position: relative;
 	display: grid;
 	grid-template-columns: 240px minmax(0, 1fr);
-	min-height: 310px;
+	min-height: 285px;
 	overflow: hidden;
 	border: 1px solid #3a506b;
-	background:
+	background: linear-gradient(118deg, #151b30 0%, #1B223D 55%, #2b3d60 100%);
-		linear-gradient(135deg, transparent 65%, rgba(255,255,255,0.04) 65%),
-		linear-gradient(115deg, var(--vu-navy), var(--vu-blue));
 	color: #e0f0ff;
 }
-.vu-masthead::before,
+.vu-header::before {
-.vu-masthead::after {
 	content: "";
 	position: absolute;
-	width: 420px;
+	right: -130px;
-	height: 420px;
+	top: -210px;
-	border: 70px solid rgba(255,255,255,0.035);
+	width: 520px;
-	border-radius: 50%;
+	height: 520px;
-	pointer-events: none;
+	border: 90px solid rgba(255,255,255,0.035);
+	transform: rotate(18deg);
 }
-.vu-masthead::before {
+.vu-header::after {
-	right: -230px;
+	content: "";
-	top: -250px;
+	position: absolute;
-}
+	right: 0;
+	bottom: 0;
-.vu-masthead::after {
+	width: 44%;
-	left: 80px;
+	height: 7px;
-	bottom: -390px;
+	background: var(--vu-blue);
+	clip-path: polygon(13px 0, 100% 0, 100% 100%, 0 100%);
 }
-.vu-emblem {
+.vu-logo-panel {
 	position: relative;
 	z-index: 2;
@@ Line 76: / Line 78: @@
 	align-items: center;
 	justify-content: center;
-	padding: 32px;
+	padding: 31px;
-	background: rgba(0,0,0,0.16);
+	background: linear-gradient(145deg, rgba(255,255,255,0.065), rgba(0,0,0,0.22));
-	border-right: 1px solid rgba(255,255,255,0.14);
+	border-right: 1px solid rgba(255,255,255,0.15);
 }
-.vu-emblem::after {
+.vu-logo-panel::after {
 	content: "";
 	position: absolute;
-	right: -28px;
+	right: -36px;
 	top: 50%;
-	width: 55px;
+	width: 70px;
-	height: 55px;
+	height: 70px;
-	background: var(--vu-navy);
+	background: #1B223D;
-	border-top: 1px solid rgba(255,255,255,0.14);
+	border-top: 1px solid rgba(255,255,255,0.15);
-	border-right: 1px solid rgba(255,255,255,0.14);
+	border-right: 1px solid rgba(255,255,255,0.15);
 	transform: translateY(-50%) rotate(45deg);
 }
-.vu-emblem img {
+.vu-logo-panel img {
 	position: relative;
 	z-index: 2;
@@ Line 100: / Line 102: @@
 	max-width: 175px;
 	height: auto;
-	filter: drop-shadow(0 12px 15px rgba(0,0,0,0.45));
+	filter: drop-shadow(0 12px 16px rgba(0,0,0,0.48));
 }
-.vu-masthead-copy {
+.vu-header-copy {
 	position: relative;
 	z-index: 2;
@@ Line 109: / Line 111: @@
 	flex-direction: column;
 	justify-content: center;
-	padding: 42px 48px 42px 62px;
+	padding: 39px 45px 39px 62px;
 }
@@ Line 115: / Line 117: @@
 	margin: 0 0 13px;
 	color: #fff;
-	font-size: clamp(3rem, 7vw, 5.3rem);
+	font-size: clamp(3rem, 7vw, 5rem);
 	font-weight: 700;
 	line-height: 0.95;
@@ Line 121: / Line 123: @@
 }
-.vu-lead {
+.vu-subtitle {
-	max-width: 680px;
+	max-width: 700px;
-	margin-bottom: 22px;
+	margin-bottom: 20px;
 	color: #dbe7f5;
-	font-size: 1.08rem;
+	font-size: 1.07rem;
-	line-height: 1.55;
+	line-height: 1.5;
 }
-.vu-top-links {
+.vu-header-actions {
 	display: flex;
 	flex-wrap: wrap;
-	gap: 9px;
+	gap: 8px;
 }
-.vu-top-link {
+.vu-header-button {
 	display: inline-block;
 	padding: 9px 15px;
-	border: 1px solid rgba(255,255,255,0.62);
+	border: 1px solid rgba(255,255,255,0.58);
 	color: #fff !important;
 	font-weight: 700;
@@ Line 144: / Line 146: @@
 }
-.vu-top-link:first-child {
+.vu-header-button:first-child {
 	background: #fff;
 	color: var(--vu-navy) !important;
 }
-.vu-top-link:hover {
+.vu-header-button:hover {
 	transform: translateY(-2px);
 	background: rgba(255,255,255,0.1);
@@ Line 155: / Line 157: @@
 }
-.vu-top-link:first-child:hover {
+.vu-header-button:first-child:hover {
 	background: #fff;
-}
-/* Section headings */
-.vu-section-heading {
-	display: flex;
-	align-items: center;
-	gap: 12px;
-	margin: 28px 0 15px;
-}
-.vu-section-heading::after {
-	content: "";
-	flex: 1;
-	height: 1px;
-	background: var(--vu-border);
-}
-.vu-section-heading span {
-	font-size: 1.45rem;
-	font-weight: 700;
 }
@@ Line 183: / Line 164: @@
 .vu-about {
-	position: relative;
 	display: grid;
-	grid-template-columns: 160px minmax(0, 1fr);
+	grid-template-columns: 145px minmax(0, 1fr);
-	margin-top: 18px;
+	margin-top: 15px;
-	overflow: hidden;
+	border-top: 1px solid var(--vu-border);
 	border-bottom: 1px solid var(--vu-border);
 	background: var(--vu-surface);
@@ Line 196: / Line 176: @@
 	align-items: center;
 	justify-content: center;
-	min-height: 235px;
 	overflow: hidden;
-	background: var(--vu-accent);
+	background: linear-gradient(135deg, var(--vu-accent) 0%, var(--vu-accent) 65%, transparent 65%);
-	color: var(--vu-link);
+	border-right: 1px solid var(--vu-border);
-	font-size: 4.5rem;
-	font-weight: 800;
-	letter-spacing: -0.14em;
 }
-.vu-about-mark span {
+.vu-about-mark img {
-	transform: rotate(-90deg);
+	width: 95px;
-	opacity: 0.28;
+	height: auto;
+	opacity: 0.15;
 }
 .vu-about-copy {
-	padding: 23px 27px;
+	padding: 21px 25px;
 	border-left: 5px solid var(--vu-link);
 }
 .vu-about-copy h2 {
-	margin: 0 0 12px;
+	margin: 0 0 10px;
+	color: var(--vu-text);
 	font-size: 1.45rem;
 }
 .vu-about-copy p {
-	margin: 0 0 11px;
+	margin: 0 0 10px;
-	line-height: 1.58;
+	line-height: 1.56;
 }
@@ Line 229: / Line 207: @@
 }
-/* Explore network */
+/* Headings */
-.vu-network {
+.vu-heading {
-	position: relative;
 	display: grid;
-	grid-template-columns: repeat(6, minmax(0, 1fr));
+	grid-template-columns: auto minmax(0, 1fr);
-	gap: 12px;
+	align-items: center;
-	padding: 24px 0 4px;
+	gap: 13px;
+	margin: 25px 0 12px;
 }
-.vu-network::before {
+.vu-heading-title {
-	content: "";
+	color: var(--vu-text);
-	position: absolute;
+	font-size: 1.45rem;
-	top: 51px;
+	font-weight: 700;
-	left: 7%;
+}
-	right: 7%;
-	height: 3px;
+.vu-heading-line {
-	background: linear-gradient(
+	height: 1px;
-		to right,
+	background: var(--vu-border);
-		transparent,
+}
-		var(--vu-link) 10%,
-		var(--vu-link) 90%,
+/* Explore */
-		transparent
-	);
+.vu-explore {
-	opacity: 0.5;
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	border-top: 1px solid var(--vu-border);
+	border-left: 1px solid var(--vu-border);
 }
-.vu-node {
+.vu-explore-link {
 	position: relative;
-	z-index: 2;
+	display: grid;
-	display: flex;
+	grid-template-columns: 72px minmax(0, 1fr) 28px;
-	flex-direction: column;
 	align-items: center;
-	text-align: center;
+	min-height: 94px;
+	padding-right: 18px;
+	overflow: hidden;
+	border-right: 1px solid var(--vu-border);
+	border-bottom: 1px solid var(--vu-border);
+	background: var(--vu-surface);
 	color: var(--vu-text) !important;
+	transition: background 0.15s ease, padding 0.15s ease;
+}
+.vu-explore-link:hover {
+	padding-right: 13px;
+	background: var(--vu-accent);
+	text-decoration: none !important;
 }
-.vu-node-dot {
+.vu-explore-mark {
+	align-self: stretch;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	width: 58px;
+	margin-right: 17px;
-	height: 58px;
-	margin-bottom: 11px;
-	border: 4px solid var(--vu-surface);
-	border-radius: 50%;
 	background: var(--vu-navy);
 	color: #fff;
-	font-size: 0.82rem;
+	font-size: 1.35rem;
-	font-weight: 700;
+	font-weight: 800;
-	box-shadow: 0 0 0 2px var(--vu-link);
+	clip-path: polygon(0 0, calc(100% - 17px) 0, 100% 50%, calc(100% - 17px) 100%, 0 100%);
-	transition: transform 0.15s ease, background 0.15s ease;
+}
+.vu-explore-copy {
+	position: relative;
+	z-index: 2;
 }
-.vu-node:hover {
+.vu-explore-title {
-	text-decoration: none !important;
+	display: block;
+	margin-bottom: 4px;
+	color: var(--vu-link);
+	font-size: 1.08rem;
+	font-weight: 700;
 }
-.vu-node:hover .vu-node-dot {
+.vu-explore-description {
-	transform: scale(1.08);
+	display: block;
-	background: var(--vu-blue);
+	color: var(--vu-text);
+	font-size: 0.9rem;
+	line-height: 1.38;
 }
-.vu-node-title {
+.vu-explore-arrow {
+	position: relative;
+	z-index: 2;
 	color: var(--vu-link);
+	font-size: 1.55rem;
 	font-weight: 700;
-}
-.vu-node-text {
-	margin-top: 5px;
-	font-size: 0.82rem;
-	line-height: 1.35;
 }
 /* Featured */
-.vu-feature-row {
+.vu-feature-layout {
 	display: grid;
-	grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.75fr);
+	grid-template-columns: minmax(0, 1.55fr) minmax(270px, 0.65fr);
-	gap: 16px;
+	gap: 14px;
 }
-.vu-featured {
+.vu-feature {
 	position: relative;
-	min-height: 210px;
+	min-height: 245px;
-	padding: 24px 30px 24px 25px;
+	padding: 25px 31px;
 	overflow: hidden;
-	border-left: 6px solid var(--vu-link);
+	border-left: 6px solid var(--vu-blue);
-	background: var(--vu-surface);
+	background: linear-gradient(118deg, var(--vu-surface) 0%, var(--vu-surface) 76%, var(--vu-accent) 76%);
-	clip-path: polygon(
-0,
-		calc(100% - 42px) 0,
-% 42px,
-% 100%,
-100%
-	);
 }
-.vu-featured::after {
+.vu-feature::after {
 	content: "";
 	position: absolute;
 	top: 0;
 	right: 0;
-	width: 42px;
+	width: 52px;
-	height: 42px;
+	height: 52px;
-	background: var(--vu-accent);
+	background: var(--vu-navy-light);
-	border-left: 1px solid var(--vu-border);
+	clip-path: polygon(100% 0, 100% 100%, 0 0);
-	border-bottom: 1px solid var(--vu-border);
+	opacity: 0.9;
+}
+.vu-feature-watermark {
+	position: absolute;
+	right: 22px;
+	bottom: -22px;
+	width: 150px;
+	opacity: 0.055;
+	pointer-events: none;
 }
-.vu-featured-label {
+.vu-feature-label {
-	margin-bottom: 12px;
+	position: relative;
+	z-index: 2;
+	margin-bottom: 9px;
 	color: var(--vu-link);
-	font-size: 0.78rem;
+	font-size: 0.76rem;
 	font-weight: 700;
-	letter-spacing: 0.14em;
+	letter-spacing: 0.15em;
 	text-transform: uppercase;
 }
-.vu-featured-content {
+.vu-feature h2 {
-	line-height: 1.55;
+	position: relative;
+	z-index: 2;
+	margin: 0 0 11px;
+	color: var(--vu-text);
+	font-size: 1.52rem;
 }
-.vu-featured-loading {
+.vu-feature p {
-	color: #72777d;
+	position: relative;
+	z-index: 2;
+	max-width: 760px;
+	margin: 0 0 10px;
+	line-height: 1.52;
+}
+.vu-feature-link {
+	position: relative;
+	z-index: 2;
+	display: inline-block;
+	margin-top: 4px;
+	padding: 8px 14px;
+	border-left: 4px solid var(--vu-link);
+	background: var(--vu-accent);
+	color: var(--vu-link) !important;
+	font-weight: 700;
 }
-/* Browse control strip */
+.vu-feature-link:hover {
+	text-decoration: none !important;
+}
+/* Browse */
 .vu-browse {
 	position: relative;
-	padding: 22px;
+	padding: 21px;
 	overflow: hidden;
-	background: var(--vu-navy);
+	background: linear-gradient(145deg, var(--vu-navy) 0%, var(--vu-navy) 72%, var(--vu-navy-light) 72%);
 	color: #e0f0ff;
 }
-.vu-browse::before {
+.vu-browse-watermark {
-	content: "VU";
 	position: absolute;
-	right: -15px;
+	right: -14px;
-	bottom: -42px;
+	bottom: -24px;
-	color: rgba(255,255,255,0.035);
+	width: 150px;
-	font-size: 9rem;
+	opacity: 0.045;
-	font-weight: 800;
+	pointer-events: none;
-	letter-spacing: -0.12em;
 }
@@ Line 381: / Line 403: @@
 	z-index: 2;
 	margin: 0 0 13px;
+	padding-bottom: 9px;
+	border-bottom: 1px solid rgba(255,255,255,0.28);
 	color: #fff;
 	font-size: 1.35rem;
 }
-.vu-browse-links {
+.vu-browse-buttons {
 	position: relative;
 	z-index: 2;
@@ Line 393: / Line 417: @@
 }
-.vu-browse-link {
+.vu-browse-button {
 	display: block;
-	padding: 9px 11px;
+	padding: 10px 11px;
-	border-left: 3px solid #88ccff;
+	border-left: 3px solid var(--vu-blue);
-	background: rgba(255,255,255,0.07);
+	background: rgba(255,255,255,0.08);
 	color: #e0f0ff !important;
 	font-weight: 650;
+	transition: background 0.15s ease, padding 0.15s ease;
+}
+.vu-browse-button:hover {
+	padding-left: 14px;
+	background: rgba(255,255,255,0.15);
+	text-decoration: none !important;
+}
+/* People slideshow */
+.vu-people {
+	position: relative;
+	overflow: hidden;
+	border: 1px solid var(--vu-border);
+	background: var(--vu-surface);
+}
+.vu-people::before {
+	content: "";
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 7px;
+	background: linear-gradient(90deg, var(--vu-blue), var(--vu-navy-light));
+	z-index: 3;
+}
+.vu-people-stage {
+	display: grid;
+	grid-template-columns: minmax(290px, 38%) minmax(0, 1fr);
+	min-height: 390px;
+}
+.vu-person-image {
+	position: relative;
+	overflow: hidden;
+	background: var(--vu-navy);
+}
+.vu-person-image::after {
+	content: "";
+	position: absolute;
+	right: -1px;
+	top: 0;
+	width: 72px;
+	height: 100%;
+	background: var(--vu-surface);
+	clip-path: polygon(100% 0, 100% 100%, 0 100%);
+	z-index: 2;
+}
+.vu-person-image img {
+	width: 100%;
+	height: 100%;
+	min-height: 390px;
+	object-fit: cover;
+	display: block;
+	transition: opacity 0.25s ease, transform 0.5s ease;
+}
+.vu-people.is-changing .vu-person-image img {
+	opacity: 0.35;
+	transform: scale(1.03);
+}
+.vu-person-copy {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	padding: 42px 50px 42px 34px;
+	overflow: hidden;
+}
+.vu-person-copy::after {
+	content: "";
+	position: absolute;
+	right: -45px;
+	bottom: -55px;
+	width: 220px;
+	height: 220px;
+	border: 42px solid var(--vu-accent);
+	transform: rotate(18deg);
+	opacity: 0.8;
+}
+.vu-person-kicker {
+	position: relative;
+	z-index: 2;
+	margin-bottom: 9px;
+	color: var(--vu-link);
+	font-size: 0.76rem;
+	font-weight: 700;
+	letter-spacing: 0.15em;
+	text-transform: uppercase;
+}
+.vu-person-title {
+	position: relative;
+	z-index: 2;
+	margin: 0 0 13px;
+	color: var(--vu-text);
+	font-size: clamp(1.8rem, 4vw, 2.8rem);
+	line-height: 1.08;
 }
-.vu-browse-link:hover {
+.vu-person-extract {
-	background: rgba(255,255,255,0.13);
+	position: relative;
+	z-index: 2;
+	max-width: 720px;
+	margin: 0 0 18px;
+	font-size: 1rem;
+	line-height: 1.62;
+}
+.vu-person-open {
+	position: relative;
+	z-index: 2;
+	align-self: flex-start;
+	display: inline-block;
+	padding: 9px 14px;
+	border-left: 4px solid var(--vu-link);
+	background: var(--vu-accent);
+	color: var(--vu-link) !important;
+	font-weight: 700;
+}
+.vu-person-open:hover {
 	text-decoration: none !important;
+}
+.vu-people-controls {
+	display: grid;
+	grid-template-columns: auto auto minmax(0, 1fr) auto auto;
+	align-items: center;
+	gap: 8px;
+	padding: 11px 14px;
+	border-top: 1px solid var(--vu-border);
+	background: var(--vu-accent);
+}
+.vu-slide-button {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	min-width: 42px;
+	height: 36px;
+	padding: 0 12px;
+	border: 1px solid var(--vu-border);
+	background: var(--vu-surface);
+	color: var(--vu-link);
+	font: inherit;
+	font-weight: 700;
+	cursor: pointer;
+}
+.vu-slide-button:hover,
+.vu-slide-button:focus {
+	border-color: var(--vu-link);
+	outline: none;
+}
+.vu-slide-progress {
+	position: relative;
+	height: 4px;
+	margin: 0 8px;
+	overflow: hidden;
+	background: var(--vu-border);
+}
+.vu-slide-progress-bar {
+	width: 0;
+	height: 100%;
+	background: var(--vu-link);
+}
+.vu-people.is-playing .vu-slide-progress-bar {
+	animation: vu-slide-progress 9s linear forwards;
+}
+.vu-slide-count {
+	min-width: 62px;
+	text-align: right;
+	color: var(--vu-text);
+	font-size: 0.88rem;
+	font-weight: 700;
+}
+.vu-people-status {
+	position: absolute;
+	left: 15px;
+	top: 15px;
+	z-index: 5;
+	padding: 7px 10px;
+	background: rgba(27,34,61,0.88);
+	color: #fff;
+	font-size: 0.82rem;
+}
+.vu-people-status[hidden] {
+	display: none;
+}
+@keyframes vu-slide-progress {
+	from { width: 0; }
+	to { width: 100%; }
 }
@@ Line 411: / Line 638: @@
 .vu-guide {
 	display: grid;
-	grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
+	grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr);
 	border-top: 1px solid var(--vu-border);
 	border-bottom: 1px solid var(--vu-border);
@@ Line 417: / Line 644: @@
 .vu-guide-copy {
-	padding: 23px 27px 23px 0;
+	padding: 21px 25px 21px 0;
 }
 .vu-guide-copy h2,
-.vu-families h2 {
+.vu-family-area h2 {
-	margin: 0 0 11px;
+	margin: 0 0 10px;
-	font-size: 1.35rem;
+	color: var(--vu-text);
+	font-size: 1.3rem;
 }
 .vu-guide-copy p {
 	margin: 0 0 10px;
-	line-height: 1.56;
+	line-height: 1.53;
 }
@@ Line 435: / Line 663: @@
 }
-.vu-families {
+.vu-route-buttons {
-	padding: 23px 0 23px 27px;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 7px;
+	margin-top: 13px;
+}
+.vu-route-button {
+	display: inline-block;
+	padding: 8px 11px;
+	border-bottom: 3px solid var(--vu-link);
+	background: var(--vu-accent);
+	color: var(--vu-link) !important;
+	font-weight: 650;
+}
+.vu-route-button:hover {
+	text-decoration: none !important;
+	transform: translateY(-1px);
+}
+.vu-family-area {
+	padding: 21px 0 21px 25px;
 	border-left: 1px solid var(--vu-border);
 }
-.vu-family-list {
+.vu-family-links {
-	position: relative;
 	display: grid;
-	gap: 8px;
+	gap: 6px;
-	padding-left: 18px;
-}
-.vu-family-list::before {
-	content: "";
-	position: absolute;
-	left: 4px;
-	top: 7px;
-	bottom: 7px;
-	width: 2px;
-	background: var(--vu-link);
-	opacity: 0.45;
 }
 .vu-family-link {
 	position: relative;
-	display: block;
+	display: grid;
-	padding: 7px 10px;
+	grid-template-columns: 8px minmax(0, 1fr);
+	align-items: center;
+	gap: 10px;
+	padding: 8px 11px;
 	background: var(--vu-accent);
 	color: var(--vu-link) !important;
 	font-weight: 650;
+	transition: padding 0.15s ease;
 }
 .vu-family-link::before {
 	content: "";
-	position: absolute;
+	width: 8px;
-	left: -18px;
+	height: 100%;
-	top: 50%;
-	width: 10px;
-	height: 10px;
-	border: 2px solid var(--vu-surface);
-	border-radius: 50%;
 	background: var(--vu-link);
-	transform: translateY(-50%);
+	clip-path: polygon(0 0, 100% 50%, 0 100%);
 }
 .vu-family-link:hover {
+	padding-left: 14px;
 	text-decoration: none !important;
-	transform: translateX(2px);
 }
-/* Footer information */
+/* Footer */
 .vu-information {
@@ Line 491: / Line 726: @@
 	grid-template-columns: repeat(2, minmax(0, 1fr));
 	gap: 1px;
-	margin-top: 18px;
+	margin-top: 15px;
+	border: 1px solid var(--vu-border);
 	background: var(--vu-border);
-	border: 1px solid var(--vu-border);
 }
 .vu-information section {
-	padding: 19px 22px;
+	padding: 18px 21px;
 	background: var(--vu-surface);
 }
 .vu-information h2 {
-	margin: 0 0 8px;
+	margin: 0 0 7px;
-	font-size: 1.25rem;
+	color: var(--vu-text);
+	font-size: 1.2rem;
 }
@@ Line 513: / Line 749: @@
 .vu-notice {
 	display: grid;
-	grid-template-columns: 165px minmax(0, 1fr);
+	grid-template-columns: 155px minmax(0, 1fr);
-	margin-top: 14px;
+	margin-top: 12px;
 	border: 1px solid #ab7f2a;
 	background: #fef6e7;
@@ Line 528: / Line 764: @@
 }
-.vu-notice-text {
+.vu-notice-copy {
 	padding: 15px 18px;
+	color: var(--vu-text);
 	line-height: 1.5;
 }
-/* Red links */
+/* Missing pages */
-.vu-page a.new,
+.vu-main a.new,
-.vu-page a.new:visited {
+.vu-main a.new:visited {
 	color: var(--vu-red) !important;
 }
-.vu-page .vu-top-link.new {
+.vu-main .vu-header-button.new {
 	border-color: var(--vu-red);
-	color: #ff8a8a !important;
+	color: #ff8b8b !important;
 }
-.vu-page .vu-node.new .vu-node-dot {
+.vu-main .vu-explore-link.new .vu-explore-mark {
 	background: var(--vu-red);
-	box-shadow: 0 0 0 2px var(--vu-red);
 }
-.vu-page .vu-node.new .vu-node-title,
+.vu-main .vu-explore-link.new .vu-explore-title,
-.vu-page .vu-family-link.new {
+.vu-main .vu-family-link.new,
+.vu-main .vu-route-button.new,
+.vu-main .vu-feature-link.new {
 	color: var(--vu-red) !important;
 }
@@ Line 557: / Line 795: @@
 /* Dark mode */
-html.skin-theme-clientpref-night .vu-page,
+html.skin-theme-clientpref-night .vu-main,
-body.skin-theme-clientpref-night .vu-page {
+body.skin-theme-clientpref-night .vu-main {
 	--vu-border: #444;
 	--vu-text: #d0d0d0;
@@ Line 573: / Line 811: @@
 @media (prefers-color-scheme: dark) {
-	html.skin-theme-clientpref-os .vu-page {
+	html.skin-theme-clientpref-os .vu-main {
 		--vu-border: #444;
 		--vu-text: #d0d0d0;
@@ Line 590: / Line 828: @@
 @media (max-width: 900px) {
-	.vu-masthead {
+	.vu-header {
 		grid-template-columns: 190px minmax(0, 1fr);
 	}
-	.vu-masthead-copy {
+	.vu-header-copy {
-		padding: 34px 32px 34px 48px;
+		padding: 34px 31px 34px 48px;
 	}
-	.vu-network {
+	.vu-feature-layout,
-		grid-template-columns: repeat(3, minmax(0, 1fr));
+	.vu-guide {
-		row-gap: 24px;
+		grid-template-columns: 1fr;
 	}
-	.vu-network::before {
+	.vu-people-stage {
-		display: none;
+		grid-template-columns: 42% minmax(0, 1fr);
 	}
-	.vu-feature-row,
+	.vu-person-copy {
-	.vu-guide {
+		padding: 36px 34px 36px 24px;
-		grid-template-columns: 1fr;
 	}
-	.vu-families {
+	.vu-family-area {
-		padding: 21px 0;
+		padding: 20px 0;
 		border-top: 1px solid var(--vu-border);
 		border-left: 0;
@@ Line 624: / Line 861: @@
 @media (max-width: 650px) {
-	.vu-masthead {
+	.vu-header {
 		grid-template-columns: 1fr;
 		text-align: center;
 	}
-	.vu-emblem {
+	.vu-logo-panel {
-		min-height: 150px;
+		min-height: 145px;
 		border-right: 0;
-		border-bottom: 1px solid rgba(255,255,255,0.14);
+		border-bottom: 1px solid rgba(255,255,255,0.15);
 	}
-	.vu-emblem::after {
+	.vu-logo-panel::after {
 		display: none;
 	}
-	.vu-emblem img {
+	.vu-logo-panel img {
 		max-width: 120px;
 	}
-	.vu-masthead-copy {
+	.vu-header-copy {
-		padding: 28px 20px;
+		padding: 27px 20px 31px;
 	}
-	.vu-top-links {
+	.vu-header-actions,
+	.vu-route-buttons {
 		justify-content: center;
 	}
@@ Line 656: / Line 894: @@
 	.vu-about-mark {
-		min-height: 70px;
+		display: none;
-		font-size: 2.8rem;
-	}
-	.vu-about-mark span {
-		transform: none;
 	}
@@ Line 669: / Line 902: @@
 	}
-	.vu-network {
+	.vu-explore {
-		grid-template-columns: repeat(2, minmax(0, 1fr));
+		grid-template-columns: 1fr;
+	}
+	.vu-people-stage {
+		grid-template-columns: 1fr;
+	}
+	.vu-person-image {
+		height: 300px;
+	}
+	.vu-person-image::after {
+		display: none;
+	}
+	.vu-person-image img {
+		min-height: 300px;
+	}
+	.vu-person-copy {
+		padding: 28px 22px 32px;
+	}
+	.vu-people-controls {
+		grid-template-columns: auto auto minmax(50px, 1fr) auto auto;
 	}
@@ Line 676: / Line 933: @@
 	.vu-notice {
 		grid-template-columns: 1fr;
+	}
+}
+@media (max-width: 430px) {
+	.vu-title {
+		font-size: 2.75rem;
+	}
+	.vu-header-button {
+		width: 100%;
+		text-align: center;
 	}
-	.vu-browse-links {
+	.vu-browse-buttons {
 		grid-template-columns: 1fr;
+	}
+	.vu-explore-link {
+		grid-template-columns: 62px minmax(0, 1fr) 22px;
 	}
 }
 </style>
-<div class="vu-page">
+<div class="vu-main">
-	<header class="vu-masthead">
+	<header class="vu-header">
-		<div class="vu-emblem">
+		<div class="vu-logo-panel">
 			<img src="/wiki/Special:Redirect/file/Vu-logo.png" alt="Vrienden Universe logo">
 		</div>
-		<div class="vu-masthead-copy">
+		<div class="vu-header-copy">
 			<div class="vu-title">Vrienden Universe</div>
-			<div class="vu-lead">
+			<div class="vu-subtitle">
-				People, families, locations, organizations and events documented across one connected history.
+				The history of De Vrienden and the wider world recorded around them.
 			</div>
-			<nav class="vu-top-links">
+			<div class="vu-header-actions">
-				<a class="vu-top-link" data-title="Timeline" href="/wiki/Timeline">Timeline</a>
+				<a class="vu-header-button" data-wiki-title="Timeline" href="/wiki/Timeline">Timeline</a>
-				<a class="vu-top-link" href="/wiki/Special:Random">Random page</a>
+				<a class="vu-header-button" href="/wiki/Special:Random">Random page</a>
-				<a class="vu-top-link" href="/wiki/Special:RecentChanges">Recent changes</a>
+				<a class="vu-header-button" href="/wiki/Special:RecentChanges">Recent changes</a>
-			</nav>
+			</div>
 		</div>
 	</header>
 	<section class="vu-about">
-		<div class="vu-about-mark"><span>VU</span></div>
+		<div class="vu-about-mark">
+			<img src="/wiki/Special:Redirect/file/Vu-logo.png" alt="">
+		</div>
 		<div class="vu-about-copy">
@@ Line 714: / Line 988: @@
 			<p>
 				The <strong>Vrienden Universe</strong> began in 2019 as
-				<a data-title="De Lijers De Vrienden" href="/wiki/De_Lijers_De_Vrienden"><strong>De Lijers De Vrienden</strong></a>,
+				<a data-wiki-title="De Lijers De Vrienden" href="/wiki/De_Lijers_De_Vrienden"><strong>De Lijers De Vrienden</strong></a>,
-				a project about <a data-title="De Vrienden" href="/wiki/De_Vrienden">De Vrienden</a>.
+				a project about <a data-wiki-title="De Vrienden" href="/wiki/De_Vrienden">De Vrienden</a>.
-				It expanded as related people, families, locations, organizations and events were documented.
+				The project expanded as related pages were added and became a single encyclopedia covering the wider history around its original subject.
 			</p>
 			<p>
-				The wiki now contains hundreds of connected pages. Articles share dates, relationships,
+				The wiki now contains hundreds of connected pages developed over several years.
-				places and events, allowing readers to move from one subject into the wider history.
+				Information established on one page is carried into related articles, allowing readers to follow the same history throughout the site.
-			</p>
-			<p>
-				The site has been developed over several years to preserve and present the complete
-				history and stories recorded across the wiki.
 			</p>
 		</div>
 	</section>
-	<div class="vu-section-heading"><span>Explore</span></div>
+	<div class="vu-heading">
+		<div class="vu-heading-title">Explore</div>
+		<div class="vu-heading-line"></div>
+	</div>
-	<nav class="vu-network">
+	<nav class="vu-explore">
-		<a class="vu-node" data-title="Category:People" href="/wiki/Category:People">
+		<a class="vu-explore-link" data-wiki-title="Category:People" href="/wiki/Category:People">
-			<span class="vu-node-dot">01</span>
+			<span class="vu-explore-mark">P</span>
-			<span class="vu-node-title">People</span>
+			<span class="vu-explore-copy">
-			<span class="vu-node-text">Biographies and personal histories</span>
+				<span class="vu-explore-title">People</span>
+				<span class="vu-explore-description">Biographies recorded across the wiki.</span>
+			</span>
+			<span class="vu-explore-arrow">&gt;</span>
 		</a>
-		<a class="vu-node" data-title="Category:Locations" href="/wiki/Category:Locations">
+		<a class="vu-explore-link" data-wiki-title="Category:Locations" href="/wiki/Category:Locations">
-			<span class="vu-node-dot">02</span>
+			<span class="vu-explore-mark">L</span>
-			<span class="vu-node-title">Locations</span>
+			<span class="vu-explore-copy">
-			<span class="vu-node-text">Countries, cities and other places</span>
+				<span class="vu-explore-title">Locations</span>
+				<span class="vu-explore-description">Places documented throughout the history.</span>
+			</span>
+			<span class="vu-explore-arrow">&gt;</span>
 		</a>
-		<a class="vu-node" data-title="Category:Families" href="/wiki/Category:Families">
+		<a class="vu-explore-link" data-wiki-title="Category:Families" href="/wiki/Category:Families">
-			<span class="vu-node-dot">03</span>
+			<span class="vu-explore-mark">F</span>
-			<span class="vu-node-title">Families</span>
+			<span class="vu-explore-copy">
-			<span class="vu-node-text">Family lines and relationships</span>
+				<span class="vu-explore-title">Families</span>
+				<span class="vu-explore-description">Family lines and their members.</span>
+			</span>
+			<span class="vu-explore-arrow">&gt;</span>
 		</a>
-		<a class="vu-node" data-title="Category:Organizations" href="/wiki/Category:Organizations">
+		<a class="vu-explore-link" data-wiki-title="Category:Organizations" href="/wiki/Category:Organizations">
-			<span class="vu-node-dot">04</span>
+			<span class="vu-explore-mark">O</span>
-			<span class="vu-node-title">Organizations</span>
+			<span class="vu-explore-copy">
-			<span class="vu-node-text">Governments, companies and groups</span>
+				<span class="vu-explore-title">Organizations</span>
+				<span class="vu-explore-description">Institutions and organized groups.</span>
+			</span>
+			<span class="vu-explore-arrow">&gt;</span>
 		</a>
-		<a class="vu-node" data-title="Category:Events" href="/wiki/Category:Events">
+		<a class="vu-explore-link" data-wiki-title="Category:Events" href="/wiki/Category:Events">
-			<span class="vu-node-dot">05</span>
+			<span class="vu-explore-mark">E</span>
-			<span class="vu-node-title">Events</span>
+			<span class="vu-explore-copy">
-			<span class="vu-node-text">Political, military and social events</span>
+				<span class="vu-explore-title">Events</span>
+				<span class="vu-explore-description">Events recorded throughout the history.</span>
+			</span>
+			<span class="vu-explore-arrow">&gt;</span>
 		</a>
-		<a class="vu-node" data-title="Category:Eras" href="/wiki/Category:Eras">
+		<a class="vu-explore-link" data-wiki-title="Category:Eras" href="/wiki/Category:Eras">
-			<span class="vu-node-dot">06</span>
+			<span class="vu-explore-mark">H</span>
-			<span class="vu-node-title">Eras</span>
+			<span class="vu-explore-copy">
-			<span class="vu-node-text">Historical periods used by the wiki</span>
+				<span class="vu-explore-title">Eras</span>
+				<span class="vu-explore-description">The historical periods used by the wiki.</span>
+			</span>
+			<span class="vu-explore-arrow">&gt;</span>
 		</a>
 	</nav>
-	<div class="vu-section-heading"><span>Featured and browse</span></div>
+	<div class="vu-heading">
+		<div class="vu-heading-title">Featured and browse</div>
+		<div class="vu-heading-line"></div>
+	</div>
-	<div class="vu-feature-row">
+	<div class="vu-feature-layout">
-		<section class="vu-featured">
+		<section class="vu-feature">
-			<div class="vu-featured-label">Featured page</div>
+			<img class="vu-feature-watermark" src="/wiki/Special:Redirect/file/Vu-logo.png" alt="">
-			<div id="vu-featured-content" class="vu-featured-content">
+			<div class="vu-feature-label">Featured page</div>
-				<div class="vu-featured-loading">Loading featured page…</div>
-			</div>
+			<h2>
+				<a data-wiki-title="Reichsministerium für Bergbau und Rohstoffe" href="/wiki/Reichsministerium_f%C3%BCr_Bergbau_und_Rohstoffe">
+					Reichsministerium f&uuml;r Bergbau und Rohstoffe
+				</a>
+			</h2>
+			<p>
+				The Reichsministerium f&uuml;r Bergbau und Rohstoffe was a central ministry of the
+				<a data-wiki-title="Government of the Tanoa Einsatzgruppen" href="/wiki/Government_of_the_Tanoa_Einsatzgruppen">Government of the Tanoa Einsatzgruppen</a>.
+				It administered mining and the state supply of raw materials.
+			</p>
+			<p>
+				The ministry supported the command economy of
+				<a data-wiki-title="Tanoa" href="/wiki/Tanoa">Tanoa</a>
+				and supplied the regime's industrial system.
+			</p>
+			<a class="vu-feature-link" data-wiki-title="Reichsministerium für Bergbau und Rohstoffe" href="/wiki/Reichsministerium_f%C3%BCr_Bergbau_und_Rohstoffe">
+				Open page
+			</a>
 		</section>
 		<nav class="vu-browse">
+			<img class="vu-browse-watermark" src="/wiki/Special:Redirect/file/Vu-logo.png" alt="">
 			<h2>Browse</h2>
-			<div class="vu-browse-links">
+			<div class="vu-browse-buttons">
-				<a class="vu-browse-link" href="/wiki/Special:AllPages">All pages</a>
+				<a class="vu-browse-button" href="/wiki/Special:AllPages">All pages</a>
-				<a class="vu-browse-link" href="/wiki/Special:Categories">Categories</a>
+				<a class="vu-browse-button" href="/wiki/Special:Categories">Categories</a>
-				<a class="vu-browse-link" href="/wiki/Special:NewPages">New pages</a>
+				<a class="vu-browse-button" href="/wiki/Special:NewPages">New pages</a>
-				<a class="vu-browse-link" href="/wiki/Special:RecentChanges">Recent changes</a>
+				<a class="vu-browse-button" href="/wiki/Special:RecentChanges">Recent changes</a>
-				<a class="vu-browse-link" href="/wiki/Special:Random">Random page</a>
+				<a class="vu-browse-button" href="/wiki/Special:Random">Random page</a>
-				<a class="vu-browse-link" href="/wiki/Special:SpecialPages">Special pages</a>
+				<a class="vu-browse-button" href="/wiki/Special:SpecialPages">Special pages</a>
 			</div>
 		</nav>
 	</div>
-	<div class="vu-section-heading"><span>How to use this wiki</span></div>
+	<div class="vu-heading">
+		<div class="vu-heading-title">People</div>
+		<div class="vu-heading-line"></div>
+	</div>
+	<section class="vu-people" id="vu-people-slider" aria-label="People slideshow">
+		<div class="vu-people-status" id="vu-people-status" hidden></div>
+		<div class="vu-people-stage">
+			<div class="vu-person-image">
+				<img
+					id="vu-person-image"
+					src="/wiki/Special:Redirect/file/ToonioNoord.jpg"
+					alt="Toonio Noord">
+			</div>
+			<div class="vu-person-copy">
+				<h2 class="vu-person-title" id="vu-person-title">Toonio Noord</h2>
+				<p class="vu-person-extract" id="vu-person-extract">
+					Toonio Noord, born 4 April 1969, is a Dutch registration official and former security guard from Vriendendam. He works for the Stichting Noord Registratiebureau and is a member of the Noord family.
+				</p>
+				<a
+					class="vu-person-open"
+					id="vu-person-link"
+					href="/wiki/Toonio_Noord">
+					Open page
+				</a>
+			</div>
+		</div>
+		<div class="vu-people-controls">
+			<button class="vu-slide-button" id="vu-person-prev" type="button" aria-label="Previous person">&lt;</button>
+			<button class="vu-slide-button" id="vu-person-toggle" type="button" aria-label="Pause slideshow">Pause</button>
+			<div class="vu-slide-progress" aria-hidden="true">
+				<div class="vu-slide-progress-bar"></div>
+			</div>
+			<div class="vu-slide-count" id="vu-person-count">1 / 1</div>
+			<button class="vu-slide-button" id="vu-person-next" type="button" aria-label="Next person">&gt;</button>
+		</div>
+	</section>
+	<div class="vu-heading">
+		<div class="vu-heading-title">How to use this wiki</div>
+		<div class="vu-heading-line"></div>
+	</div>
 	<section class="vu-guide">
 		<div class="vu-guide-copy">
-			<h2>Start with a subject</h2>
+			<h2>Choose a starting point</h2>
 			<p>
-				Most pages connect to related people, families, organizations, locations and events.
+				Most articles link directly to the subjects needed to continue through the history.
-				Readers can begin with a broad subject and continue through the links inside each article.
+				Readers can begin with <a data-wiki-title="De Vrienden" href="/wiki/De_Vrienden">De Vrienden</a>
+				or select a broader section above.
 			</p>
 			<p>
-				<a data-title="De Vrienden" href="/wiki/De_Vrienden">De Vrienden</a>
+				The principal family pages provide the main route from De Vrienden into family history.
-				was the original subject of the project. Its pages lead into the principal families
+				Index pages provide access to the rest of the site.
-				and wider history documented across the wiki.
 			</p>
-			<p>
+			<div class="vu-route-buttons">
-				The <a data-title="Timeline" href="/wiki/Timeline">Timeline</a>,
+				<a class="vu-route-button" data-wiki-title="Timeline" href="/wiki/Timeline">Timeline</a>
-				<a data-title="Factions" href="/wiki/Factions">Factions</a> and
+				<a class="vu-route-button" data-wiki-title="Factions" href="/wiki/Factions">Factions</a>
-				<a data-title="List of organizations" href="/wiki/List_of_organizations">List of organizations</a>
+				<a class="vu-route-button" data-wiki-title="List of organizations" href="/wiki/List_of_organizations">Organizations</a>
-				provide broader routes through the site.
+			</div>
-			</p>
 		</div>
-		<div class="vu-families">
+		<div class="vu-family-area">
 			<h2>Principal families</h2>
-			<div class="vu-family-list">
+			<div class="vu-family-links">
-				<a class="vu-family-link" data-title="Noord family" href="/wiki/Noord_family">Noord family</a>
+				<a class="vu-family-link" data-wiki-title="Noord family" href="/wiki/Noord_family">Noord family</a>
-				<a class="vu-family-link" data-title="Paap family" href="/wiki/Paap_family">Paap family</a>
+				<a class="vu-family-link" data-wiki-title="Paap family" href="/wiki/Paap_family">Paap family</a>
-				<a class="vu-family-link" data-title="Van Hetten family" href="/wiki/Van_Hetten_family">Van Hetten family</a>
+				<a class="vu-family-link" data-wiki-title="Van Hetten family" href="/wiki/Van_Hetten_family">Van Hetten family</a>
-				<a class="vu-family-link" data-title="Hoos family" href="/wiki/Hoos_family">Hoos family</a>
+				<a class="vu-family-link" data-wiki-title="Hoos family" href="/wiki/Hoos_family">Hoos family</a>
-				<a class="vu-family-link" data-title="Schroeter family" href="/wiki/Schroeter_family">Schroeter family</a>
+				<a class="vu-family-link" data-wiki-title="Schroeter family" href="/wiki/Schroeter_family">Schroeter family</a>
 			</div>
 		</div>
@@ Line 839: / Line 1,202: @@
 			<p>
-				Information about contributions and the purpose of the site is available on the
+				Information about contributing is available on the
-				<a data-title="Vrienden Universe:Community" href="/wiki/Vrienden_Universe:Community">community page</a>.
+				<a data-wiki-title="Vrienden Universe:Community" href="/wiki/Vrienden_Universe:Community">community page</a>.
 			</p>
 		</section>
@@ Line 848: / Line 1,211: @@
 			<p>
-				Information about the content and scope of the site is available in the
+				Information about the scope of the site is available in the
-				<a data-title="Vrienden Universe:General disclaimer" href="/wiki/Vrienden_Universe:General_disclaimer">disclaimer</a>.
+				<a data-wiki-title="Vrienden Universe:General disclaimer" href="/wiki/Vrienden_Universe:General_disclaimer">disclaimer</a>.
 			</p>
 		</section>
@@ Line 857: / Line 1,220: @@
 		<div class="vu-notice-title">Content notice</div>
-		<div class="vu-notice-text">
+		<div class="vu-notice-copy">
-			This wiki contains material intended for mature audiences. Some pages include violence,
+			This wiki contains material intended for mature audiences.
-			abuse, exploitation and other disturbing subjects. Reader discretion is advised.
+			Some pages contain disturbing subject matter. Reader discretion is advised.
 		</div>
 	</div>
@@ Line 867: / Line 1,230: @@
 <script>
 (function () {
-	if (!window.mw || !mw.loader) {
+	"use strict";
-		return;
+	function onReady(callback) {
+		if (document.readyState === "loading") {
+			document.addEventListener("DOMContentLoaded", callback, { once: true });
+		} else {
+			callback();
+		}
 	}
-	mw.loader.using(["mediawiki.api", "mediawiki.util"]).then(function () {
+	onReady(function () {
-		var api = new mw.Api();
+		var root = document.querySelector(".vu-main");
-		var root = document.querySelector(".vu-page");
+		var slider = document.getElementById("vu-people-slider");
+		var status = document.getElementById("vu-people-status");
+		var image = document.getElementById("vu-person-image");
+		var title = document.getElementById("vu-person-title");
+		var extract = document.getElementById("vu-person-extract");
+		var pageLink = document.getElementById("vu-person-link");
+		var count = document.getElementById("vu-person-count");
+		var previous = document.getElementById("vu-person-prev");
+		var next = document.getElementById("vu-person-next");
+		var toggle = document.getElementById("vu-person-toggle");
-		if (!root) {
+		if (
+			!root ||
+			!slider ||
+			!status ||
+			!image ||
+			!title ||
+			!extract ||
+			!pageLink ||
+			!count ||
+			!previous ||
+			!next ||
+			!toggle
+		) {
 			return;
 		}
-		var links = Array.prototype.slice.call(
+		var fallbackImage = "/wiki/Special:Redirect/file/Vu-logo.png";
-			root.querySelectorAll("a[data-title]")
+		var cacheKey = "vu-main-people-slides-v9";
-		);
+		var cacheLifetime = 6 * 60 * 60 * 1000;
+		var slideInterval = 9000;
+		var apiPath = "/wiki/api.php";
+		var people = [];
+		var currentIndex = 0;
+		var timer = null;
+		var playing = false;
+		previous.disabled = true;
+		next.disabled = true;
+		toggle.disabled = true;
+		count.textContent = "1 / 1";
+		toggle.textContent = "Play";
+		previous.textContent = "<";
+		next.textContent = ">";
+		function showStatus(message) {
+			if (!message) {
+				status.hidden = true;
+				status.textContent = "";
+				return;
+			}
+			status.textContent = message;
+			status.hidden = false;
+		}
+		function shuffle(items) {
+			var result = items.slice();
+			for (var index = result.length - 1; index > 0; index--) {
+				var randomIndex = Math.floor(Math.random() * (index + 1));
+				var temporary = result[index];
+				result[index] = result[randomIndex];
+				result[randomIndex] = temporary;
+			}
-		var titles = links
+			return result;
-			.map(function (link) {
+		}
-				return link.getAttribute("data-title");
-			})
+		function cleanText(value) {
-			.filter(function (title, index, allTitles) {
+			return String(value || "")
-				return title && allTitles.indexOf(title) === index;
+				.replace(/\[\s*\d+(?:\.\d+)?\s*\]/g, "")
+				.replace(/\s+/g, " ")
+				.trim();
+		}
+		function shorten(value, limit) {
+			var cleaned = cleanText(value);
+			if (!cleaned || cleaned.length <= limit) {
+				return cleaned;
+			}
+			var cut = cleaned.slice(0, limit);
+			var sentenceEnd = Math.max(
+				cut.lastIndexOf(". "),
+				cut.lastIndexOf("! "),
+				cut.lastIndexOf("? ")
+			);
+			if (sentenceEnd > 180) {
+				return cut.slice(0, sentenceEnd + 1);
+			}
+			var finalSpace = cut.lastIndexOf(" ");
+			return cut.slice(0, finalSpace > 0 ? finalSpace : limit) + "...";
+		}
+		function getImage(page) {
+			if (page.thumbnail && page.thumbnail.source) {
+				return page.thumbnail.source;
+			}
+			if (page.original && page.original.source) {
+				return page.original.source;
+			}
+			return "";
+		}
+		function pageUrl(pageTitle) {
+			if (window.mw && mw.util) {
+				return mw.util.getUrl(pageTitle);
+			}
+			return "/wiki/" + encodeURIComponent(pageTitle.replace(/ /g, "_"));
+		}
+		function normalizePages(pages) {
+			return shuffle(
+				pages
+					.filter(function (page) {
+						return page && !page.missing && page.title;
+					})
+					.map(function (page) {
+						var pageExtract = shorten(page.extract, 650);
+						if (!pageExtract) {
+							pageExtract =
+								"This page is listed in Category:People. Open the page for the full article.";
+						}
+						return {
+							title: page.title,
+							extract: pageExtract,
+							image: getImage(page) || fallbackImage,
+							url: page.fullurl || pageUrl(page.title)
+						};
+					})
+			);
+		}
+		function readCache() {
+			try {
+				var cached = JSON.parse(
+					window.sessionStorage.getItem(cacheKey) || "null"
+				);
+				if (
+					cached &&
+					cached.savedAt &&
+					Date.now() - cached.savedAt < cacheLifetime &&
+					Array.isArray(cached.people) &&
+					cached.people.length > 1
+				) {
+					return cached.people;
+				}
+			} catch (error) {
+				return null;
+			}
+			return null;
+		}
+		function saveCache(items) {
+			try {
+				window.sessionStorage.setItem(
+					cacheKey,
+					JSON.stringify({
+						savedAt: Date.now(),
+						people: items
+					})
+				);
+			} catch (error) {
+				return;
+			}
+		}
+		function preloadNext() {
+			if (people.length < 2) {
+				return;
+			}
+			var nextIndex = (currentIndex + 1) % people.length;
+			var preload = new Image();
+			preload.src = people[nextIndex].image;
+		}
+		function restartProgress() {
+			slider.classList.remove("is-playing");
+			void slider.offsetWidth;
+			if (playing && people.length > 1) {
+				slider.classList.add("is-playing");
+			}
+		}
+		function scheduleNext() {
+			if (timer) {
+				window.clearTimeout(timer);
+			}
+			restartProgress();
+			if (!playing || people.length < 2) {
+				return;
+			}
+			timer = window.setTimeout(function () {
+				showSlide(currentIndex + 1);
+			}, slideInterval);
+		}
+		function showSlide(index) {
+			if (!people.length) {
+				return;
+			}
+			currentIndex = (index + people.length) % people.length;
+			var person = people[currentIndex];
+			slider.classList.add("is-changing");
+			window.setTimeout(function () {
+				image.src = person.image || fallbackImage;
+				image.alt = person.title;
+				title.textContent = person.title;
+				extract.textContent = person.extract;
+				pageLink.href = person.url;
+				pageLink.textContent = "Open page";
+				count.textContent =
+					String(currentIndex + 1) + " / " + String(people.length);
+				window.setTimeout(function () {
+					slider.classList.remove("is-changing");
+				}, 40);
+				preloadNext();
+			}, 140);
+			scheduleNext();
+		}
+		function setPlaying(value) {
+			playing = Boolean(value && people.length > 1);
+			toggle.textContent = playing ? "Pause" : "Play";
+			toggle.setAttribute(
+				"aria-label",
+				playing ? "Pause slideshow" : "Play slideshow"
+			);
+			if (playing) {
+				scheduleNext();
+			} else {
+				if (timer) {
+					window.clearTimeout(timer);
+				}
+				slider.classList.remove("is-playing");
+			}
+		}
+		function activateSlides(items) {
+			if (!Array.isArray(items) || !items.length) {
+				showStatus("No people pages were loaded.");
+				return;
+			}
+			people = shuffle(items);
+			currentIndex = 0;
+			previous.disabled = people.length < 2;
+			next.disabled = people.length < 2;
+			toggle.disabled = people.length < 2;
+			showStatus("");
+			showSlide(0);
+			setPlaying(people.length > 1);
+		}
+		previous.addEventListener("click", function () {
+			showSlide(currentIndex - 1);
+		});
+		next.addEventListener("click", function () {
+			showSlide(currentIndex + 1);
+		});
+		toggle.addEventListener("click", function () {
+			setPlaying(!playing);
+		});
+		slider.addEventListener("mouseenter", function () {
+			if (playing && timer) {
+				window.clearTimeout(timer);
+				slider.classList.remove("is-playing");
+			}
+		});
+		slider.addEventListener("mouseleave", function () {
+			if (playing) {
+				scheduleNext();
+			}
+		});
+		image.addEventListener("error", function () {
+			if (image.src.indexOf("Vu-logo.png") === -1) {
+				image.src = fallbackImage;
+			}
+		});
+		function buildQuery(params) {
+			var parts = [];
+			Object.keys(params).forEach(function (key) {
+				parts.push(
+					encodeURIComponent(key) +
+						"=" +
+						encodeURIComponent(params[key])
+				);
 			});
-		for (var i = 0; i < titles.length; i += 50) {
+			return parts.join("&");
-			(function (batch) {
+		}
-				api.get({
-					action: "query",
-					titles: batch.join("|"),
-					formatversion: 2
-				}).then(function (data) {
-					var missing = {};
-					if (data.query && data.query.pages) {
+		function requestJson(params) {
-						data.query.pages.forEach(function (page) {
+			return window
-							if (page.missing) {
+				.fetch(apiPath + "?" + buildQuery(params), {
-								missing[page.title] = true;
+					credentials: "same-origin"
-							}
+				})
-						});
+				.then(function (response) {
+					if (!response.ok) {
+						throw new Error("API HTTP " + response.status);
 					}
-					links.forEach(function (link) {
+					return response.json();
-						var title = link.getAttribute("data-title");
+				});
+		}
+		function copyParams(params) {
+			var copied = {};
-						if (missing[title]) {
+			Object.keys(params).forEach(function (key) {
-							link.classList.add("new");
+				copied[key] = params[key];
-							link.href = mw.util.getUrl(title, {
+			});
-								action: "edit",
-								redlink: 1
+			return copied;
-							});
+		}
-							link.title = title + " (page does not exist)";
-						}
+		function loadCategoryMembers(params, collectedPages) {
+			return requestJson(params).then(function (data) {
+				var nextPages =
+					data &&
+					data.query &&
+					Array.isArray(data.query.categorymembers)
+						? data.query.categorymembers
+						: [];
+				var allPages = collectedPages.concat(nextPages);
+				if (data && data.continue) {
+					var nextParams = copyParams(params);
+					Object.keys(data.continue).forEach(function (key) {
+						nextParams[key] = data.continue[key];
 					});
-				});
-			})(titles.slice(i, i + 50));
+					showStatus("Loading people... " + String(allPages.length));
+					return loadCategoryMembers(nextParams, allPages);
+				}
+				return allPages;
+			});
 		}
-		var featured = document.getElementById("vu-featured-content");
+		function uniqueTitles(items) {
+			var seen = {};
+			var titles = [];
-		if (featured) {
+			items.forEach(function (item) {
-			api.get({
+				if (!item || !item.title || seen[item.title]) {
-				action: "parse",
+					return;
-				text: "{{Featured box}}",
-				title: "Main Page",
-				prop: "text",
-				disablelimitreport: 1,
-				formatversion: 2
-			}).then(function (data) {
-				if (data.parse && data.parse.text) {
-					featured.innerHTML = data.parse.text;
 				}
-			}).catch(function () {
-				featured.textContent = "The featured page could not be loaded.";
+				seen[item.title] = true;
+				titles.push(item.title);
+			});
+			return titles;
+		}
+		function loadPageDetails(titles) {
+			var groups = [];
+			for (var index = 0; index < titles.length; index += 1) {
+				groups.push(titles.slice(index, index + 1));
+			}
+			return groups
+				.reduce(function (chain, group) {
+					return chain.then(function (pages) {
+						return requestJson({
+							action: "query",
+							titles: group.join("|"),
+							prop: "extracts|pageimages|info",
+							exintro: 1,
+							explaintext: 1,
+							exchars: 700,
+							piprop: "thumbnail|original",
+							pithumbsize: 1000,
+							inprop: "url",
+							redirects: 1,
+							formatversion: 2,
+							format: "json"
+						}).then(function (data) {
+							var nextPages =
+								data &&
+								data.query &&
+								Array.isArray(data.query.pages)
+									? data.query.pages
+									: [];
+							if (
+								(pages.length + nextPages.length) % 10 === 0 ||
+								pages.length + nextPages.length === titles.length
+							) {
+								showStatus(
+									"Loading details... " +
+										String(pages.length + nextPages.length) +
+										" / " +
+										String(titles.length)
+								);
+							}
+							return pages.concat(nextPages);
+						});
+					});
+				}, Promise.resolve([]));
+		}
+		var cachedPeople = readCache();
+		if (cachedPeople) {
+			activateSlides(cachedPeople);
+		}
+		if (!window.fetch) {
+			showStatus("This browser cannot load the people list.");
+			return;
+		}
+		showStatus("Loading people...");
+		loadCategoryMembers(
+			{
+				action: "query",
+				list: "categorymembers",
+				cmtitle: "Category:People",
+				cmnamespace: 0,
+				cmtype: "page",
+				cmlimit: "max",
+				formatversion: 2,
+				format: "json"
+			},
+			[]
+		)
+			.then(function (members) {
+				var titles = uniqueTitles(members);
+				showStatus("Loading details... 0 / " + String(titles.length));
+				return loadPageDetails(titles);
+			})
+			.then(function (pages) {
+				var loadedPeople = normalizePages(pages);
+				saveCache(loadedPeople);
+				activateSlides(loadedPeople);
+			})
+			.catch(function () {
+				showStatus("Could not load people list.");
 			});
+		/*
+		 * Raw HTML links need a separate existence check so missing pages
+		 * keep MediaWiki's red-link appearance.
+		 */
+		if (window.mw && mw.loader) {
+			mw.loader
+				.using(["mediawiki.api", "mediawiki.util"])
+				.then(function () {
+					var api = new mw.Api();
+					var links = Array.prototype.slice.call(
+						root.querySelectorAll("a[data-wiki-title]")
+					);
+					var titles = links
+						.map(function (item) {
+							return item.getAttribute("data-wiki-title");
+						})
+						.filter(function (item, index, allItems) {
+							return item && allItems.indexOf(item) === index;
+						});
+					if (!titles.length) {
+						return;
+					}
+					return api
+						.get({
+							action: "query",
+							titles: titles.join("|"),
+							formatversion: 2
+						})
+						.then(function (data) {
+							var missing = {};
+							if (data.query && Array.isArray(data.query.pages)) {
+								data.query.pages.forEach(function (page) {
+									if (page.missing) {
+										missing[page.title] = true;
+									}
+								});
+							}
+							links.forEach(function (item) {
+								var pageTitle =
+									item.getAttribute("data-wiki-title");
+								if (!missing[pageTitle]) {
+									return;
+								}
+								item.classList.add("new");
+								item.href = mw.util.getUrl(pageTitle, {
+									action: "edit",
+									redlink: 1
+								});
+								item.title =
+									pageTitle + " (page does not exist)";
+							});
+						});
+				});
 		}
 	});
 })();
 </script>
 </html>

Main Page: Difference between revisions