/* Variables */
@font-face {
	font-family: "AvenirNext";
	src: url("../fonts/AvenirNext/AvenirNext-Regular.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "AvenirNext";
	src: url("../fonts/AvenirNext/AvenirNext-DemiBold.woff2") format("woff2");
	font-weight: 600;
	font-display: swap;
}
@font-face {
	font-family: "AvenirNext";
	src: url("../fonts/AvenirNext/AvenirNext-Bold.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
}
@font-face {
	font-family: "AvenirNext";
	src: url("../fonts/AvenirNext/AvenirNext-Heavy.woff2") format("woff2");
	font-weight: 900;
	font-display: swap;
}

:root {
	--mdrt-dark-blue: #0F2B5A;
	--mdrt-blue: #1853A3;
	--mdrt-medium-blue: #017CBD;
	--mdrt-yellow: #FFCF00;
	--mdrt-light-yellow: #FFEB92;
	--mdrt-coral: #F47E53;
	--mdrt-light-gray: #F2F2F2;
	--mdrt-lighter-gray: #F8F8F8;
	--mdrt-placeholder-gray: #D9D9D9;
	--mdrt-medium-gray: #B7B7B7;
	--mdrt-charcoal: #4D5357;
	--mdrt-dark-gray: rgba(28, 28, 28, 0.80);
	--mdrt-black-text: #1C1C1C;
	--mdrt-opaque-white: rgba(255, 255, 255, 0.8);
	--mdrt-font-body: "Nunito Sans", Arial, sans-serif;
	--mdrt-font-headings-sans: "AvenirNext", Arial, sans-serif;
	--mdrt-font-headings-serif: "Merriweather", serif;
	--mdrt-font-avenir: "AvenirNext", Arial, sans-serif;
	--section-y-padding-lg: 100px;
	--section-y-padding-md: 45px;
	--section-y-padding-sm: 20px;
	--section-x-padding: 20px;
}

/* * { outline: 1px solid red; } */


/* Font localization */
body.locale-zh-cn {
	--mdrt-font-body: "Source Han Sans", "Source Han Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
	--mdrt-font-headings-sans: "Source Han Sans", "Source Han Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
}
body.locale-zh-cht {
	--mdrt-font-body: "Source Han Sans", "Source Han Sans TC", "Noto Sans CJK TC", "PingFang TC", sans-serif;
	--mdrt-font-headings-sans: "Source Han Sans", "Source Han Sans TC", "Noto Sans CJK TC", "PingFang TC", sans-serif;
}
body.locale-ko {
	--mdrt-font-body: "Nanum Gothic", "Apple SD Gothic Neo", sans-serif;
	--mdrt-font-headings-sans: "Nanum Gothic", "Apple SD Gothic Neo", sans-serif;
}
body.locale-ja {
	--mdrt-font-body: "Noto Sans JP", "Meiryo", "Hiragino Kaku Gothic ProN", sans-serif;
	--mdrt-font-headings-sans: "Noto Sans JP", "Meiryo", "Hiragino Kaku Gothic ProN", sans-serif;
}
body.locale-vi {
	--mdrt-font-body: Arial, "Times New Roman", sans-serif;
	--mdrt-font-headings-sans: "Times New Roman", Arial, serif;
}
body.locale-th {
	--mdrt-font-body: Tahoma, "PSL Kitthada", "PSL Kittithada", sans-serif;
	--mdrt-font-headings-sans: Tahoma, "PSL Kitthada", "PSL Kittithada", serif;
}
body.locale-zh-cn,
body.locale-zh-cht,
body.locale-ko,
body.locale-ja,
body.locale-vi,
body.locale-th {
	--mdrt-font-avenir: var(--mdrt-font-body);
}

/* Core styles */
html {
	overflow-x: hidden;
}
body{
	margin: 0;
	padding: 0;
	font-family: var(--mdrt-font-body);
	overflow-x: hidden;
}

/* Skip navigation */
.skip-nav {
	position: absolute;
	top: -100%;
	left: 0;
	background: var(--mdrt-blue);
	color: white;
	padding: 14px 24px;
	font-weight: 700;
	font-family: var(--mdrt-font-headings-sans);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	z-index: 10000;
	&:focus {
		top: 0;
	}
}

/* Global keyboard focus indicator */
:focus-visible {
	outline: 3px solid var(--mdrt-yellow);
	outline-offset: 2px;
}

h1, h2, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	font-family: var(--mdrt-font-headings-sans);
	text-transform: uppercase;
	text-wrap: balance;
}
h1 {
	font-size: 68px;
	font-weight: 900;
	line-height: 75px;
	color: white;
}
h1 sup {
	font-size: 40px;
}
h1 .hero-subheading {
	font-size: 40px;
	font-weight: 900;
	line-height: 60px;
	color: white;
}
h2 {
	font-size: 32px;
	font-weight: 900;
	color: var(--mdrt-blue);
	text-align: center;
	margin-bottom: 30px;
}

p {
	font-size: 24px;
	font-weight: 600;
	text-wrap: balance;
}

h2 sup {
	font-size: 0.645em;
	line-height: 0;
}

span[data-aos] {
	display: inline-block;
}

/* <picture> only picks the AVIF/WebP source; the <img> inside lays out as if it were the direct child */
picture {
	display: contents;
}
/* With the <picture> box gone, <source> would otherwise count as an (empty) flex/grid item and pick up gaps */
picture > source {
	display: none;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

header {
	padding: var(--section-y-padding-md) var(--section-x-padding);

	& .header-logo {
		max-height: 50px;
		height: auto;
		width: auto;
	}
	& nav {
		& a {
			color: var(--mdrt-blue);
			font-size: 20px;
			font-weight: 600;
			text-decoration: none;
			text-transform: uppercase;
			margin-left: 30px;
			&:hover,
			&:focus-visible {
				color: var(--mdrt-medium-blue);
			}
		}
		& ul {
			list-style: none;
			margin: 0;
			padding: 0;
			display: flex;
			align-items: center;
			height: 50px;
		}
	}
	& .language-globe {
		background: none;
		border: none;
		cursor: pointer;
		padding: 0;
		position: relative;
		top: 3px;
		margin-left: 20px;
		& img {
			padding: 10px;
			display: block;
		}
		&:hover img,
		&:focus-visible img {
			background-color: var(--mdrt-light-gray);
			border-radius: 50%;
		}
	}
}

section {
	padding: var(--section-y-padding-lg) var(--section-x-padding);

	&.hero {
		padding: 60px var(--section-x-padding);
		height: 600px;
		& .hero-heading {
			max-width: 50%;
		}
	}
	&.intro {
		& p { text-align: center; }
	}
	&.hype-video {
		& video {
			margin: auto;
			display: block;
			width: 100%;
			height: auto;
			aspect-ratio: 16 / 9;
		}
	}
	&.social {
		& p.social-text { text-align: center; margin-bottom: 50px; }
		& .juicer-feed { min-height: 400px; }
		& .juicer-feed p { font-size: 14px; line-height: initial;
			font-weight: initial; margin-top: 0; }
		/* Juicer's "Load more" button */
		& .juicer-feed .j-paginate {
			/* Juicer's stylesheet sets a 150px width, letter-spacing and a bordered pill */
			display: table;
			width: auto;
			margin: 50px auto 0;
			padding: 16px 32px;
			border: 0;
			border-radius: 0;
			letter-spacing: normal;
			white-space: nowrap;
			text-decoration: none;
			background: var(--mdrt-blue);
			color: white;
			font-family: var(--mdrt-font-body);
			font-size: 20px;
			font-weight: 400;
			line-height: normal;
			text-transform: uppercase;
			cursor: pointer;
			&:hover,
			&:focus-visible {
				background: var(--mdrt-dark-blue);
			}
		}
	}
	&.cta {
		& .cta-heading-group {
			display: flex;
			align-items: center;
			gap: 50px;
		}
		& .square-logo {
			max-width: 127px;
			height: auto;
			width: auto;
		}
		& .cta-heading {
			color: white;
			font-size: 40px;
			line-height: 45px;
			text-align: left;
			margin: 0;
		}
		& p.cta-text {
			font-family: var(--mdrt-font-avenir);
			font-weight: 600;
			margin: 40px 0 0;
		}
		& .cta-member-heading {
			color: white;
			font-family: var(--mdrt-font-headings-serif);
			font-size: 24px;
			font-weight: 600;
			text-transform: none;
			margin: 80px 0 13px;
		}
		& p.cta-member-text {
			font-size: 16px;
			font-weight: 400;
			margin: 0 0 1.2em;
			& a {
				color: white;
				font-weight: 700;
			}
		}
		& .cta-cards {
			display: flex;
			flex-direction: column;
			gap: 20px;
		}
		& .cta-card {
			padding: 22px 114px 22px 25px;
			background-color: #F5F5F5;
			text-decoration: none;
			display: block;
			background-image: url('../images/cta-card-arrow.svg');
			background-repeat: no-repeat;
			background-position: right 25px center;
			background-size: 74px 115px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			min-height: 159px;
			&:hover,
			&:focus-visible {
				background-image: url('../images/cta-card-arrow-hover.svg');
			}
		}
		& .cta-card-heading {
			color: var(--mdrt-black-text);
			font-family: var(--mdrt-font-headings-serif);
			font-size: 24px;
			font-weight: 600;
			display: block;
			margin-bottom: 11px;
		}
		& .cta-card-text {
			font-family: var(--mdrt-font-body);
			color: var(--mdrt-dark-gray);
			font-size: 16px;
			font-weight: 400;
			display: block;
		}
	}
}

[data-background="light-gray"] {
	background: var(--mdrt-light-gray);
	& p {
		color: var(--mdrt-dark-gray);
	}
}
[data-background="white"] {
	background: white;
}
[data-background="blue"] {
	background: var(--mdrt-blue);
}
[data-background="dark-blue"] {
	background: var(--mdrt-dark-blue);
}
[data-background="light-pattern"] {
	background: url('../images/grid-background-light.svg'), white;
	background-attachment: fixed;
}
[data-background="blue-pattern"] {
	background: url('../images/grid-background-blue.svg');
	background-size: cover;
	background-attachment: fixed;
	& p {
		color: white;
	}
}
[data-background="blue-pattern-with-arrows"] {
	background: url('../images/hero-arrows.svg') bottom left, url('../images/grid-background-blue.svg');
	background-size: contain, cover;
	background-repeat: no-repeat;
	background-attachment: scroll, fixed;
	& p {
		color: white;
	}
}


footer {
	padding: var(--section-y-padding-lg) var(--section-x-padding) var(--section-y-padding-md) var(--section-x-padding);
	& .footer-logo {
		max-width: 250px;
		height: auto;
	}

	& a.footer-phone {
		color: white;
		text-decoration: none;
		font-size: 20px;
		font-weight: 700;
	}
	& address {
		color: white;
		font-size: 20px;
		line-height: 30px;
		font-style: normal;
	}
	& a.contact-us {
		color: white;
		font-size: 20px;
		font-weight: 700;
		text-decoration: none;
		display: inline-block;
		margin-top: 20px;
	}
	& h3 {
		color: white;
		font-size: 20px;
		font-weight: 900;
		margin-bottom: 45px;
		text-transform: initial;
		font-family: var(--mdrt-font-body);
	}
	& nav.helpful-links ul {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 25px;
		padding: 0;
		list-style: none;
	}
	& nav.helpful-links ul li a {
		color: white;
		font-size: 20px;
		font-weight: 700;
		text-decoration: none;
	}
	& .social-media-hashtag {
		color: white;
		font-size: 24px;
		font-weight: 400;
	}
	& nav.social-media ul {
		display: flex;
		gap: 25px;
		padding: 0;
		list-style: none;
		align-items: center;
		margin: 0;
	}
	& nav.social-media ul li a:hover {
		opacity: 0.75;
	}
	& .footer-bottom-row {
		padding-top: var(--section-y-padding-lg);
	}
	& p.footer-legal {
		color: white;
		font-size: 16px;
		margin: 0;
		font-weight: 400;
		display: inline-block;
		margin-right: 50px;
	}
	& nav.nav-legal {
		display: inline-block;
	}
	& nav.nav-legal ul {
		display: flex;
		gap: 25px;
		padding: 0;
		list-style: none;
	}
	& nav.nav-legal ul li a {
		color: white;
		font-size: 16px;
		font-weight: 700;
		text-decoration: none;
	}
}

.external-link::after {
	content: url(../images/external-link.svg);
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-left: 6px;
	margin-top: -10px;
	vertical-align: middle;
}

/* Language modal */
.language-modal {
	border: none;
	border-radius: 16px;
	padding: 32px;
	width: 600px;
	max-width: calc(100vw - 40px);
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
}
.language-modal::backdrop {
	background: rgba(0, 0, 0, 0.45);
}
.language-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 28px;
}
.language-modal-title {
	font-family: var(--mdrt-font-body);
	font-size: 22px;
	font-weight: 700;
	color: var(--mdrt-black-text);
	text-transform: none;
	margin: 0;
}
.language-modal-close {
	background: none;
	border: none;
	font-size: 26px;
	line-height: 1;
	color: var(--mdrt-black-text);
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 4px;
	&:hover {
		background-color: var(--mdrt-light-gray);
	}
}
.language-modal-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
.language-option {
	font-family: var(--mdrt-font-body);
	font-size: 14px;
	font-weight: 600;
	padding: 8px 16px;
	border: none;
	border-radius: 50px;
	background-color: var(--mdrt-light-gray);
	color: var(--mdrt-black-text);
	cursor: pointer;
	text-align: center;
	&:hover {
		background-color: var(--mdrt-medium-gray);
	}
	&.active {
		background-color: var(--mdrt-blue);
		color: white;
	}
}

/* Mobile nav */
.mobile-nav-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
}
.mobile-nav-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 999;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	&.open {
		opacity: 1;
		pointer-events: auto;
	}
}
.mobile-nav {
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	width: min(300px, 82vw);
	background: var(--mdrt-dark-blue);
	z-index: 1000;
	transform: translateX(100%);
	transition: transform 0.3s ease;
	display: flex;
	flex-direction: column;
	/* box-shadow: -4px 0 24px rgba(0, 0, 0, 0.25); */
	&.open {
		transform: translateX(0);
	}
}
.mobile-nav-header {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 20px 24px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.mobile-nav-close {
	background: none;
	border: none;
	color: white;
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
	opacity: 0.75;
	&:hover {
		opacity: 1;
	}
}
.mobile-nav-links {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1;
	& li a {
		display: block;
		color: white;
		font-family: var(--mdrt-font-body);
		font-size: 16px;
		font-weight: 700;
		text-decoration: none;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		padding: 18px 28px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
		transition: background 0.15s ease, color 0.15s ease;
	}
	& li:first-child a {
		border-top: 1px solid rgba(255, 255, 255, 0.08);
	}
	& li a:hover,
	& li a:focus {
		background: rgba(255, 255, 255, 0.08);
		color: var(--mdrt-yellow);
	}
}
.mobile-nav-footer {
	padding: 24px 28px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.mobile-language-trigger {
	display: flex;
	align-items: center;
	gap: 12px;
	background: none;
	border: none;
	color: white;
	font-family: var(--mdrt-font-body);
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	cursor: pointer;
	padding: 0;
	opacity: 0.75;
	transition: opacity 0.15s ease, color 0.15s ease;
	& img {
		filter: brightness(0) invert(1);
		width: 22px;
		height: 22px;
	}
	&:hover {
		opacity: 1;
		color: var(--mdrt-yellow);
	}
}

/* Timeline */
section.timeline {
	padding: 40px 0;
	overflow: hidden;
}
.timeline-layout {
	display: flex;
	align-items: center;
	gap: 52px;
	/* Left edge lines up with .container; the scroller bleeds off the right edge */
	padding-left: max(15px, calc((100% - 1170px) / 2 + 15px));
}
.timeline-intro {
	position: relative;
	flex: 0 0 349px;
	& .timeline-heading {
		text-align: left;
		margin-bottom: 25px;
	}
	& p.timeline-text {
		margin: 0;
		color: var(--mdrt-dark-gray);
		line-height: normal;
		text-wrap: pretty;
		& strong { font-weight: 800; }
	}
}
.timeline-prompt {
	display: flex;
	align-items: center;
	gap: 20px;
	& p.timeline-text { max-width: 230px; }
}
.timeline-drag-icon--mobile {
	display: none;
}
/* Drag hint: a quick left/right nudge, then a pause, on loop */
@keyframes timeline-drag-hint {
	0%, 50%, 100% { transform: translateX(0); }
	12% { transform: translateX(-8px); }
	30% { transform: translateX(8px); }
	42% { transform: translateX(-2px); }
}
.timeline-drag-icon {
	animation: timeline-drag-hint 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
	.timeline-drag-icon { animation: none; }
}
.timeline-scroller {
	position: relative;
	flex: 1;
	min-width: 0;
	&:has(.timeline-viewport:focus-visible) {
		outline: 3px solid var(--mdrt-yellow);
		outline-offset: -3px;
	}
}
/* Registered so the edge fades can transition */
@property --fade-start {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}
@property --fade-end {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}
.timeline-viewport {
	position: relative;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	cursor: grab;
	/* Soft fade on whichever edge still has more timeline beyond it (toggled in full.js) */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent);
	mask-image: linear-gradient(to right, transparent, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent);
	transition: --fade-start 0.3s ease, --fade-end 0.3s ease;
	&[data-more-before] { --fade-start: 80px; }
	&[data-more-after] { --fade-end: 80px; }
	&::-webkit-scrollbar { display: none; }
	/* The mask would fade the focus ring at the edges, so the scroller draws it instead */
	&:focus-visible { outline: none; }
	&.is-dragging {
		cursor: grabbing;
		user-select: none;
	}
}
.timeline-track {
	display: grid;
	/* Cards are 562px and span two columns, so 336px columns leave ~110px between neighbours (as in Figma) */
	grid-template-columns: 100px repeat(var(--inner), 336px) 100px;
	grid-template-rows: auto 146px auto;
	width: max-content;
	/* White space after the ribbon's end so it visibly stops short of the browser edge
	   (content-box so the padding adds to the scroll width rather than eating into the columns) */
	box-sizing: content-box;
	padding-right: 40px;
}
.timeline-ribbon {
	grid-row: 2;
	grid-column: 1 / -1;
	background: var(--mdrt-blue);
	clip-path: polygon(0 0, 100% 0, calc(100% - 70px) 50%, 100% 100%, 0 100%, 75px 50%);
}
.timeline-year {
	grid-row: 2;
	grid-column: var(--col) / span 2;
	justify-self: start;
	position: relative;
	z-index: 1;
	padding-left: 40px;
	font-family: var(--mdrt-font-headings-serif);
	font-size: 104px;
	font-weight: 700;
	line-height: normal;
	color: white;
	pointer-events: none;
	user-select: none;
	&::before {
		content: "";
		position: absolute;
		left: 0;
		top: 42px;
		width: 29px;
		height: 45px;
		background: url('../images/timeline/year-chevron.svg') no-repeat center / contain;
	}
}
.timeline-year--top {
	align-self: start;
	margin-top: -15px;
}
.timeline-year--bottom {
	align-self: start;
	margin-top: 32px;
}
.timeline-card {
	grid-column: var(--col) / span 2;
	display: flex;
	gap: 30px;
	width: 562px;
}
.timeline-card--top {
	grid-row: 1;
	align-self: end;
	align-items: flex-end;
	margin-bottom: 15px;
}
.timeline-card--bottom {
	grid-row: 3;
	align-self: start;
	align-items: flex-start;
	margin-top: 40px;
}
.timeline-card-image {
	flex: 0 0 156px;
	width: 156px;
	height: 156px;
	object-fit: cover;
}
.timeline-card-text {
	width: 376px;
}
.timeline-card-title {
	margin-bottom: 10px;
	font-size: 24px;
	font-weight: 900;
	line-height: normal;
	color: var(--mdrt-blue);
	text-transform: none;
}
p.timeline-card-body {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
	color: var(--mdrt-dark-gray);
	text-wrap: pretty;
}
.timeline-more {
	display: none;
}
.timeline-more[hidden] {
	display: none !important;
}

/* Museum */
.museum {
	& .museum-heading { color: white; }
	& p.museum-text {
		margin: 0 0 50px;
		text-align: center;
		color: white;
	}
}
.museum-exhibit-heading {
	margin: 0;
	font-size: inherit;
	text-transform: none;
}
.museum-tab {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	padding: 18px 30px;
	border: 0;
	background: var(--mdrt-yellow);
	color: var(--mdrt-dark-blue);
	font-family: var(--mdrt-font-headings-serif);
	font-size: 24px;
	font-weight: 900;
	line-height: 26px;
	text-align: left;
	cursor: pointer;
	& em { font-style: italic; }
	& .museum-tab-label {
		flex: 1;
		text-wrap: pretty;
	}
	&:hover { background: var(--mdrt-light-yellow); }
	&[aria-expanded="true"] { background: white; }
}
.museum-tab-icon {
	flex: 0 0 17px;
	height: 27px;
	background: url('../images/icon-chevron-navy.svg') no-repeat center / contain;
	opacity: 0.2;
	.museum-tab:hover &,
	.museum-tab[aria-expanded="true"] & {
		opacity: 1;
	}
}
.museum-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 764 / 556;
	object-fit: cover;
}
p.museum-caption {
	margin: 15px 0 0;
	color: white;
	font-size: 16px;
	font-style: italic;
	font-weight: 400;
	text-wrap: pretty;
}
@media (min-width: 992px) {
	/* Desktop: exhibit buttons in the left column, the open exhibit on the right */
	.museum-exhibits {
		display: grid;
		grid-template-columns: 377px minmax(0, 1fr);
		grid-template-rows: repeat(var(--exhibits), auto) 1fr;
		column-gap: 30px;
		row-gap: 15px;
		align-items: start;
	}
	.museum-exhibit-heading { grid-column: 1; }
	.museum-panel {
		grid-column: 2;
		grid-row: 1 / -1;
	}
	.museum-tab[aria-expanded="true"] { cursor: default; }
}
@media (max-width: 991px) {
	/* Tablet/mobile: accordion */
	.museum-exhibit-heading { margin-bottom: 15px; }
	.museum-tab {
		padding: 20px;
		line-height: 28px;
	}
	.museum-tab-icon {
		flex-basis: 26px;
		height: 28px;
		background-image: url('../images/icon-plus-navy.svg');
		opacity: 1;
		.museum-tab[aria-expanded="true"] & {
			background-image: url('../images/icon-minus-navy.svg');
			background-size: 26px auto;
		}
	}
	.museum-panel { margin: 5px 0 35px; }
}

/* Carousels (museum + video series) */
.carousel {
	position: relative;
}
.carousel-viewport {
	position: relative;
	overflow: hidden;
	touch-action: pan-y;
}
.carousel-arrow {
	position: absolute;
	z-index: 2;
	width: 49px;
	height: 65px;
	padding: 0;
	border: 0;
	background: url('../images/carousel-arrow.svg') no-repeat center / contain;
	cursor: pointer;
	&:hover,
	&:focus-visible {
		background-image: url('../images/carousel-arrow-hover.svg');
	}
}
.carousel-arrow--next {
	scale: -1 1;
}
.carousel-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 26px;
}
.carousel-dot {
	width: 26px;
	height: 26px;
	padding: 0;
	border: 1px solid var(--mdrt-medium-blue);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	&:hover { background: rgba(1, 124, 189, 0.25); }
	&[aria-current="true"] { background: var(--mdrt-medium-blue); }
}

/* Fade carousel: slides stack, one visible at a time */
.carousel--fade {
	& .carousel-track { display: grid; }
	& .carousel-slide {
		grid-area: 1 / 1;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.4s ease, visibility 0.4s;
		&.is-active {
			opacity: 1;
			visibility: visible;
		}
	}
	& .carousel-arrow {
		top: 50%;
		translate: 0 -50%;
	}
	& .carousel-arrow--prev { left: 7px; }
	& .carousel-arrow--next { right: 7px; }
}

/* Coverflow carousel: active slide centered, neighbours scaled down and faded */
.carousel--coverflow {
	--slide-w: min(699px, calc(100vw - 240px));
	--slide-h: calc(var(--slide-w) * 398 / 699);
	--gap: 31px;
	margin-top: 50px;
	& .carousel-viewport { height: var(--slide-h); }
	& .carousel-slide {
		position: absolute;
		top: 0;
		left: 50%;
		width: var(--slide-w);
		height: var(--slide-h);
		transform: translateX(calc(-50% + var(--offset, 0) * (var(--slide-w) + var(--gap)))) scale(var(--scale, 1));
		transform-origin: var(--origin, center);
		opacity: var(--opacity, 1);
		transition: transform 0.5s ease, opacity 0.5s ease, visibility 0.5s;
		&.is-prev,
		&.is-next {
			--scale: 0.704;
			--opacity: 0.25;
			cursor: pointer;
		}
		&.is-prev { --origin: right center; }
		&.is-next { --origin: left center; }
		&.is-far {
			--opacity: 0;
			visibility: hidden;
		}
		/* Wrapping slides jump into place but still fade */
		&.no-transition { transition: opacity 0.5s ease; }
	}
	& .carousel-arrow {
		top: calc(var(--slide-h) / 2);
		translate: 0 -50%;
	}
	& .carousel-arrow--prev { left: calc(50% - var(--slide-w) / 2 - 99px); }
	& .carousel-arrow--next { left: calc(50% + var(--slide-w) / 2 + 49px); }
}
.video-card {
	position: relative;
	width: 100%;
	height: 100%;
	background: var(--mdrt-placeholder-gray);
}
.video-card-player {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: var(--mdrt-placeholder-gray);
}
.video-card-play {
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	width: 97px;
	height: 98px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: url('../images/play-button.svg') no-repeat center / contain;
	cursor: pointer;
	&:hover,
	&:focus-visible {
		background-image: url('../images/play-button-hover.svg');
	}
	.video-card.is-playing & { display: none; }
	.carousel-slide:not(.is-active) & {
		opacity: 0;
		pointer-events: none;
	}
}

/* Video series */
section.hype-video {
	padding-bottom: 0;
}
section.video-series {
	padding-left: 0;
	padding-right: 0;
	overflow: hidden;
	& p.video-series-text {
		margin: 0;
		text-align: center;
		color: var(--mdrt-dark-gray);
	}
}

/* 100th Anniversary articles */
.articles-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.article-card-link {
	display: block;
	text-decoration: none;
	&:hover .article-card-title,
	&:focus-visible .article-card-title {
		text-decoration: underline;
	}
}
.article-card-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 370 / 236;
	object-fit: cover;
	margin-bottom: 30px;
	background: var(--mdrt-placeholder-gray);
	/* Hairline stroke (drawn inside, no layout shift) so white thumbnails don't vanish into the white section */
	outline: 1px solid rgba(28, 28, 28, 0.15);
	outline-offset: -1px;
}
.article-card-title {
	margin: 0 0 15px;
	font-family: var(--mdrt-font-headings-serif);
	font-size: 20px;
	font-weight: 700;
	line-height: normal;
	color: var(--mdrt-blue);
	text-transform: none;
}
.article-card--placeholder .article-card-title {
	text-transform: uppercase;
}
p.article-card-summary {
	margin: 0;
	font-family: var(--mdrt-font-avenir);
	font-size: 14px;
	font-weight: 400;
	line-height: normal;
	color: var(--mdrt-dark-gray);
	text-wrap: pretty;
}
.article-card-date {
	font-weight: 600;
}

/* Member benefits */
.benefit {
	display: flex;
	align-items: flex-start;
	gap: 65px;
	margin-bottom: 65px;
	&:nth-child(even) { flex-direction: row-reverse; }
}
.benefit-image {
	flex: 0 0 48.7%;
	width: 48.7%;
	height: auto;
	aspect-ratio: 571 / 395;
	object-fit: cover;
}
.benefit-copy {
	flex: 1;
}
.benefit-title {
	margin-bottom: 19px;
	font-size: 28px;
	font-weight: 900;
	line-height: normal;
	color: var(--mdrt-medium-blue);
	text-transform: none;
}
p.benefit-text {
	margin: 0;
	color: var(--mdrt-dark-gray);
	line-height: normal;
	text-wrap: pretty;
	& a {
		color: var(--mdrt-blue);
		font-weight: 800;
		&:hover { color: var(--mdrt-medium-blue); }
	}
}

/* FAQ accordion */
.faq-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.faq {
	background: var(--mdrt-blue);
	transition: background-color 0.3s ease;
	&[open] { background: var(--mdrt-lighter-gray); }
	/* Stay grey while the closing animation runs */
	&.is-closing { background: var(--mdrt-lighter-gray); }
}
.faq-question {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
	padding: 30px 35px;
	list-style: none;
	font-family: var(--mdrt-font-headings-sans);
	font-size: 24px;
	font-weight: 900;
	line-height: 28px;
	color: white;
	cursor: pointer;
	transition: color 0.3s ease;
	&::-webkit-details-marker { display: none; }
	.faq[open] > & { color: var(--mdrt-dark-gray); }
}
.faq-icon {
	flex: 0 0 26px;
	height: 28px;
	background: url('../images/icon-plus-white.svg') no-repeat center / 26px 28px;
	.faq[open] & {
		background-image: url('../images/icon-minus-black.svg');
		background-size: 26px auto;
	}
}
.faq-answer {
	overflow: hidden;
	/* Clicking the open answer closes it (full.js) */
	cursor: pointer;
}
.faq-answer-inner {
	padding: 0 35px 30px;
	& p {
		max-width: 880px;
		margin: 0 0 20px;
		font-family: var(--mdrt-font-avenir);
		font-size: 16px;
		font-weight: 400;
		line-height: 20px;
		color: var(--mdrt-dark-gray);
		text-wrap: pretty;
		&:last-child { margin-bottom: 0; }
	}
	& strong { font-weight: 600; }
}
.faq--table .faq-answer-inner {
	padding-bottom: 30px;
}
.faq-table-scroll {
	max-height: 358px;
	overflow: auto;
	scrollbar-color: var(--mdrt-charcoal) var(--mdrt-placeholder-gray);
	&:focus-visible { outline-offset: 2px; }
}
.faq-answer p.faq-table-note {
	max-width: none;
	margin-top: 12px;
	font-size: 14px;
	font-style: italic;
	text-align: right;
}
.faq-table {
	width: 100%;
	/* Collapsed borders don't travel with sticky cells and shift on scroll */
	border-collapse: separate;
	border-spacing: 0;
	font-family: var(--mdrt-font-avenir);
	font-size: 14px;
	line-height: 18px;
	text-align: center;
	color: black;
	& th {
		position: sticky;
		top: 0;
		height: 55px;
		padding: 10px;
		border: 1px solid rgba(255, 255, 255, 0.5);
		background: var(--mdrt-charcoal);
		color: white;
		font-weight: 600;
		text-transform: uppercase;
	}
	& th:nth-child(1) { width: 10%; }
	& th:nth-child(2) { width: 42%; }
	& td {
		height: 60px;
		padding: 10px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.25);
	}
	& tr td:first-child { border-left: 1px solid rgba(0, 0, 0, 0.25); }
	& tr td:last-child { border-right: 1px solid rgba(0, 0, 0, 0.25); }
}

/* Tablet */
@media (max-width: 1199px) {
	.benefit { gap: 40px; }
	p.benefit-text { font-size: 20px; }
}
@media (max-width: 991px) {
	.timeline-layout {
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
		padding-left: 0;
	}
	.timeline-intro {
		flex: none;
		max-width: 600px;
		margin: 0 auto;
		padding: 0 var(--section-x-padding);
		text-align: center;
		& .timeline-heading { text-align: center; }
	}
	.timeline-prompt {
		justify-content: center;
		& p.timeline-text { max-width: none; }
	}
	.articles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.mobile-nav,
	.mobile-nav-backdrop,
	.carousel--fade .carousel-slide,
	.carousel--coverflow .carousel-slide,
	.timeline-viewport {
		transition: none;
	}
}

/* Mobile adjustments */
@media (max-width: 767px) {
	/* background-attachment: fixed is broken on mobile Safari — sized to viewport, not element */
	[data-background="light-pattern"],
	[data-background="blue-pattern"],
	[data-background="blue-pattern-with-arrows"] {
		background-attachment: scroll;
	}

	header {
		padding: 45px 35px;
		position: relative;
		& .header-logo { max-width: 200px; }
		& nav { display: none; }
		& .mobile-nav-toggle {
			display: block;
			position: absolute;
			right: 10px;
			top: 50%;
			transform: translateY(-50%);
		}
	}
	section {
		&.hero {
			height: 375px;
			padding: var(--section-y-padding-sm) var(--section-x-padding);
			& .hero-heading {
				text-align: center;
				font-size: 40px;
				line-height: normal;
				max-width: initial;
				& sup { font-size: 24px; }
				& .hero-subheading {
					font-size: 28px;
					line-height: 40px;
				}
			}
		}
		&.cta {
			& .cta-card { background-position: right 20px bottom 20px; }
		}
	}
	.language-modal-grid { grid-template-columns: 1fr; }
	.social-media-hashtag { text-align: center; }
	nav.social-media ul { justify-content: center; }
	footer {
		& h3 { margin-top: 50px; }
		& .row:first-child {
			display: flex;
			flex-direction: column;
			& > *:nth-child(1) { order: 2; margin-top: 50px; }
			& > *:nth-child(2) { order: 3; }
			& > *:nth-child(3) { order: 1; }
		}
	}
}

/* Mobile adjustments: full-site sections */
@media (max-width: 767px) {
	h2 {
		font-size: 28px;
		line-height: 34px;
	}
	section.timeline {
		padding: 80px 0 40px;
	}
	.timeline-intro {
		max-width: 375px;
		padding: 0 30px;
	}
	/* Text runs inline with the bold prompt; the drag icon sits below */
	.timeline-intro p.timeline-text { display: inline; }
	.timeline-prompt { display: contents; }
	.timeline-drag-icon--desktop { display: none; }
	.timeline-drag-icon--mobile {
		display: block;
		margin: 25px auto 0;
	}
	.timeline-viewport {
		scroll-snap-type: x mandatory;
		scroll-padding-left: 45px;
		/* The card's trailing 30px gap plus the track's end padding, so the last card snaps to the very end */
		scroll-padding-right: 45px;
		cursor: auto;
		/* Cards fill the screen here, so a fade would only clip their text; MORE signals what's next */
		-webkit-mask-image: none;
		mask-image: none;
	}
	.timeline-track {
		--item-w: min(345px, calc(100vw - 30px));
		/* The last item's own gap is room enough for the ribbon's end; the padding leaves white space after it */
		grid-template-columns: 45px repeat(var(--items), var(--item-w)) 0;
		grid-template-rows: auto 80px;
		padding-right: 15px;
	}
	.timeline-ribbon {
		clip-path: polygon(0 0, 100% 0, calc(100% - 40px) 50%, 100% 100%, 0 100%, 40px 50%);
	}
	.timeline-card,
	.timeline-card--top,
	.timeline-card--bottom {
		grid-row: 1;
		grid-column: var(--i);
		align-self: end;
		flex-direction: column;
		align-items: flex-start;
		gap: 13px;
		width: calc(var(--item-w) - 30px);
		margin: 0 0 20px;
		scroll-snap-align: start;
		/* Snapping the last card to the end shows where the ribbon stops (and hides MORE) */
		&:last-of-type { scroll-snap-align: end; }
	}
	.timeline-card-image {
		flex: none;
		width: 130px;
		height: 130px;
	}
	.timeline-card-text { width: auto; }
	.timeline-card-title { line-height: 30px; }
	.timeline-year,
	.timeline-year--top,
	.timeline-year--bottom {
		grid-column: var(--i);
		align-self: start;
		margin: 0;
		padding-left: 24px;
		font-size: 65px;
		&::before {
			top: 28px;
			width: 19px;
			height: 29px;
		}
	}
	.timeline-more {
		display: flex;
		align-items: center;
		gap: 3px;
		position: absolute;
		right: 10px;
		bottom: 4px;
		padding: 6px 5px;
		border: 0;
		background: none;
		color: var(--mdrt-yellow);
		font-family: var(--mdrt-font-avenir);
		font-size: 10px;
		font-weight: 700;
		line-height: 1;
		text-transform: uppercase;
		cursor: pointer;
		&::after {
			content: "";
			width: 11px;
			height: 7px;
			background:
				url('../images/timeline/more-chevron.svg') no-repeat 0 50% / 5px 7px,
				url('../images/timeline/more-chevron.svg') no-repeat 6px 50% / 5px 7px;
		}
	}

	.museum p.museum-text { margin-bottom: 40px; }
	/* .museum-image { aspect-ratio: 315 / 214; } */
	.carousel--fade .carousel-arrow {
		width: 21px;
		height: 28px;
		background-image: url('../images/carousel-arrow-hover.svg');
	}
	.carousel--fade .carousel-arrow--prev { left: 12px; }
	.carousel--fade .carousel-arrow--next { right: 12px; }

	.carousel--coverflow {
		--slide-w: calc(100vw - 60px);
		margin-top: 40px;
		& .carousel-slide.is-prev,
		& .carousel-slide.is-next {
			--opacity: 0;
		}
		& .carousel-arrow {
			width: 21px;
			height: 28px;
			background-image: url('../images/carousel-arrow-hover.svg');
		}
		& .carousel-arrow--prev { left: 4px; }
		& .carousel-arrow--next { left: auto; right: 4px; }
	}
	.video-card-play {
		width: 58px;
		height: 59px;
	}
	.carousel-dots {
		gap: 4px;
		margin-top: 15px;
	}
	.carousel-dot {
		width: 14px;
		height: 14px;
	}

	.articles-grid { grid-template-columns: minmax(0, 1fr); }

	.benefit,
	.benefit:nth-child(even) {
		flex-direction: column;
		gap: 30px;
		margin-bottom: 40px;
	}
	.benefit-image {
		flex: none;
		width: 100%;
	}
	.benefit-title {
		margin-bottom: 15px;
		line-height: 34px;
	}
	p.benefit-text {
		font-size: 16px;
		line-height: 24px;
	}

	.faq-list {
		width: 100vw;
		margin-left: calc(50% - 50vw);
		gap: 15px;
	}
	.faq-question {
		align-items: center;
		gap: 20px;
		padding: 25px 30px;
		line-height: normal;
	}
	.faq-answer-inner { padding: 0 30px 25px; }
	.faq-table-scroll { max-height: 460px; }
	.faq-table {
		font-size: 12px;
		line-height: 16px;
		& th {
			height: 85px;
			font-size: 14px;
			line-height: 18px;
		}
		& th:nth-child(1) { width: 19%; }
		& th:nth-child(2) { width: 36%; }
		& td { height: 125px; }
		& th,
		& td { padding: 10px 6px; }
	}
	.faq-table-break { display: none; }

	section.cta {
		& .cta-heading-group {
			flex-direction: column;
			align-items: flex-start;
			gap: 10px;
		}
		& .square-logo { max-width: 92px; }
		& .cta-heading { font-size: 32px; line-height: 40px; }
		& p.cta-text { margin-top: 30px; }
		& .cta-member-heading { margin-top: 50px; }
		& .cta-cards { margin-top: 30px; }
		& .cta-card { padding-right: 110px; }
	}
}