:root {
	--choir-ink: #10222a;
	--choir-teal: #008fa5;
	--choir-cyan: #00bdd6;
	--choir-copper: #bd8650;
	--choir-gold: #d9aa71;
	--choir-red: #e34536;
	--choir-night: #031f28;
	--choir-ivory: #f4efe4;
}

html {
	scroll-behavior: smooth;
}

.choir-page #main > .choir-article {
	padding: 0;
}

.choir-hero {
	position: relative;
	padding: 7rem 8rem 5rem;
	background: #ffffff;
	text-align: center;
	overflow: hidden;
}

.choir-mobile-cover {
	display: none;
}

.choir-mobile-cover img {
	display: block;
	width: 100%;
	height: auto;
}

.choir-name-heading {
	text-transform: none;
}

.choir-name-heading span {
	display: block;
}

.choir-hero .hero-eyebrow,
.section-subtitle,
.feature-image figcaption,
.media-video figcaption,
.hero-location,
.choir-jump-nav {
	font-family: "Source Sans Pro", Helvetica, sans-serif;
	font-weight: 900;
	letter-spacing: 0.075em;
	text-transform: uppercase;
}

.choir-hero .hero-eyebrow {
	display: inline-block;
	margin-bottom: 1.25rem;
	color: #717981;
	font-size: 0.8rem;
}

.choir-hero h1 {
	margin: 0;
	color: #212931;
	font-size: clamp(4rem, 9vw, 7.5rem);
	line-height: 0.82;
	letter-spacing: -0.055em;
}

.choir-hero h1 span {
	display: inline;
}

.hero-cn {
	margin: 1.65rem 0 0.4rem;
	font-family: "Source Sans Pro", Helvetica, sans-serif;
	font-size: clamp(1.45rem, 3.2vw, 2.2rem);
	font-weight: 900;
	letter-spacing: 0.04em;
	text-align: center;
}

.hero-location {
	margin: 0 0 2.5rem;
	color: var(--choir-teal);
	font-size: 0.82rem;
	text-align: center;
}

.hero-image {
	position: relative;
	margin: 0 auto;
	max-width: 56rem;
	line-height: 0;
}

.hero-image img {
	display: block;
	width: 100%;
	border: 0;
}

.cover-pattern,
.cover-skyline,
.hero-flower {
	display: none;
}

.choir-jump-nav {
	position: sticky;
	top: 0;
	z-index: 4;
	display: flex;
	justify-content: center;
	gap: 0;
	background: #212931;
	box-shadow: 0 0.5rem 1.75rem rgba(16, 34, 42, 0.12);
}

.choir-jump-nav a {
	display: block;
	padding: 1rem 1.8rem;
	color: #fff;
	font-size: 0.74rem;
}

.choir-jump-nav a:hover,
.choir-jump-nav a:focus-visible {
	background: var(--choir-teal);
	color: #fff !important;
}

.choir-section {
	padding: 7rem 8rem;
	border-top: solid 2px #eeeeee;
	scroll-margin-top: 4.5rem;
}

.section-heading {
	max-width: 48rem;
	margin: 0 auto 3.75rem;
	text-align: center;
}

.section-heading h2 {
	margin-bottom: 0.75rem;
	font-size: clamp(2.6rem, 5vw, 4.5rem);
	line-height: 1.02;
	letter-spacing: -0.025em;
	white-space: nowrap;
}

.section-subtitle {
	margin: 0;
	color: var(--choir-copper);
	font-size: 0.9rem;
	text-align: center;
}

.prose {
	max-width: 54rem;
	margin: 0 auto;
}

.prose p {
	margin: 0 0 1.35rem;
	text-align: justify;
	text-indent: 2em;
}

.feature-image {
	margin: 3.5rem auto;
	max-width: 54rem;
}

.media-video {
	max-width: 54rem;
	margin: 3.5rem auto;
}

.media-video video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #020f14;
	object-fit: contain;
}

.media-video figcaption {
	padding-top: 0.8rem;
	border-top: 3px solid #212931;
	color: #717981;
	font-size: 0.72rem;
	text-align: right;
}

.feature-image img,
.portrait-pair img {
	display: block;
	width: 100%;
}

.feature-image figcaption {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 0.8rem;
	border-top: 3px solid #212931;
	color: #717981;
	font-size: 0.72rem;
}

.feature-image figcaption span {
	color: var(--choir-copper);
}

.vision-grid {
	display: block;
	max-width: 54rem;
	margin: 0 auto;
}

.vision-item {
	margin-bottom: 3.5rem;
}

.vision-item:last-child {
	margin-bottom: 0;
}

.vision-item h3 {
	position: relative;
	margin-bottom: 1.1rem;
	padding-bottom: 0.8rem;
	font-size: 1.45rem;
}

.vision-item h3::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 4rem;
	height: 3px;
	background: linear-gradient(90deg, var(--choir-teal) 0 70%, var(--choir-red) 70%);
}

.vision-item p {
	margin-bottom: 1.2rem;
	text-align: justify;
}

.portrait-pair {
	display: block;
	max-width: 54rem;
	margin: 0 auto 3.5rem;
}

.portrait-pair figure {
	margin: 0;
}

.portrait-pair figure + figure {
	margin-top: 2rem;
}

.two-columns {
	columns: auto;
}

.two-columns p {
	break-inside: avoid;
}

.conductor-section blockquote {
	max-width: 50rem;
	margin: 3.25rem auto;
	padding: 2.2rem 3rem;
	border-left: 0;
	background: var(--choir-copper);
	color: #fff;
	font-family: "Source Sans Pro", Helvetica, sans-serif;
	font-size: 2rem;
	font-style: normal;
	font-weight: 900;
	line-height: 1.35;
	text-align: center;
}

.brassify-section {
	background: #f6f3ed;
}

@media screen and (max-width: 980px) {
	.choir-hero,
	.choir-section {
		padding-right: 4rem;
		padding-left: 4rem;
	}

	.choir-jump-nav {
		position: relative;
	}
}

@media screen and (max-width: 736px) {
	body.choir-page {
		background: var(--choir-night);
		color: var(--choir-ivory);
	}

	.choir-page #wrapper {
		background-color: var(--choir-night);
		background-image:
			radial-gradient(circle at 10% 10%, rgba(0, 189, 214, 0.12), transparent 27rem),
			repeating-linear-gradient(128deg, transparent 0 35px, rgba(217, 170, 113, 0.035) 36px 37px);
	}

	.choir-page #wrapper > .bg {
		background-color: var(--choir-night);
		background-image:
			radial-gradient(circle at 10% 10%, rgba(0, 189, 214, 0.12), transparent 27rem),
			repeating-linear-gradient(128deg, transparent 0 35px, rgba(217, 170, 113, 0.035) 36px 37px);
		background-position: center, center;
		background-repeat: no-repeat, repeat;
		background-size: auto, auto;
	}

	.choir-page #header {
		display: none;
	}

	.choir-page #main {
		width: 100%;
		background: transparent;
	}

	.choir-hero {
		display: flex;
		min-height: calc(100svh - 4.5rem);
		padding: 3rem 1.5rem 2rem;
		background:
			radial-gradient(circle at 78% 30%, rgba(217, 170, 113, 0.22) 0 8rem, transparent 8.1rem),
			linear-gradient(150deg, #031f28 0%, #00161e 72%, #062b35 100%);
		color: var(--choir-ivory);
		text-align: left;
		isolation: isolate;
	}

	.cover-pattern {
		position: absolute;
		inset: 0;
		display: block;
		z-index: -2;
		background-image:
			repeating-linear-gradient(45deg, rgba(217, 170, 113, 0.09) 0 1px, transparent 1px 14px),
			repeating-linear-gradient(-45deg, rgba(217, 170, 113, 0.06) 0 1px, transparent 1px 14px);
		background-position: calc(100% + 3rem) -2rem;
		background-size: 12rem 12rem;
		mask-image: linear-gradient(to bottom, #000, transparent 42%);
	}

	.cover-skyline {
		position: absolute;
		left: -1rem;
		bottom: 2.2rem;
		display: block;
		width: calc(100% + 2rem);
		z-index: -1;
		fill: none;
		stroke: rgba(217, 170, 113, 0.5);
		stroke-width: 2;
	}

	.hero-copy {
		position: relative;
		z-index: 2;
		width: 100%;
	}

	.choir-hero .hero-eyebrow {
		margin-bottom: 1.4rem;
		padding: 0.4rem 0.7rem;
		border: 1px solid var(--choir-cyan);
		border-radius: 0.25rem;
		color: var(--choir-cyan);
		font-size: 0.64rem;
	}

	.choir-hero h1 {
		max-width: 8ch;
		color: var(--choir-gold);
		font-size: clamp(5.4rem, 27vw, 7.75rem);
		line-height: 0.72;
		letter-spacing: -0.075em;
		text-shadow: 0 0.2rem 1.5rem rgba(0, 0, 0, 0.28);
	}

	.choir-hero h1 span {
		display: block;
	}

	.choir-page #navPanel {
		background: #061f28;
		color: var(--choir-ivory);
	}

	.choir-page #navPanel .links li {
		border-top-color: rgba(217, 170, 113, 0.25);
	}

	.choir-page #navPanel .links li a,
	.choir-page #navPanel .close {
		color: var(--choir-ivory);
	}

	.choir-page #navPanel .dropdown-content {
		background: rgba(0, 20, 27, 0.72);
	}

	.choir-page #navPanel .dropdown-content li {
		border-top: 1px solid rgba(217, 170, 113, 0.18);
	}

	.choir-page #navPanel .dropdown-content li a {
		padding-left: 1rem;
		color: rgba(244, 239, 228, 0.82);
		font-weight: 600;
	}

	.hero-cn {
		max-width: 13em;
		margin: 1.75rem 0 0.7rem;
		padding-bottom: 0.85rem;
		color: var(--choir-ivory);
		font-size: 1.55rem;
		line-height: 1.22;
		text-align: left;
	}

	.hero-cn::after {
		content: "";
		display: block;
		width: 8.5rem;
		height: 4px;
		margin-top: 0.8rem;
		background: linear-gradient(90deg, var(--choir-cyan) 0 74%, var(--choir-red) 74%);
	}

	.hero-location {
		margin: 0;
		color: var(--choir-gold);
		font-size: 0.7rem;
	}

	.hero-image {
		position: absolute;
		right: -3.5rem;
		bottom: 0;
		width: min(31rem, 92vw);
		max-width: none;
		margin: 0;
		z-index: 0;
		opacity: 0.8;
		mask-image: linear-gradient(to top, #000 0 70%, transparent 100%);
	}

	.hero-image img {
		min-height: 43vh;
		object-fit: cover;
		object-position: 60% center;
		filter: saturate(0.72) contrast(1.08) brightness(0.66) sepia(0.12);
	}

	.hero-flower {
		position: absolute;
		right: 0.2rem;
		bottom: 1rem;
		display: block;
		width: 6.8rem;
		height: 6.8rem;
		z-index: 2;
		filter: drop-shadow(0 0.5rem 0.5rem rgba(0, 0, 0, 0.3));
	}

	.hero-flower i {
		position: absolute;
		left: 2.25rem;
		top: 0.1rem;
		display: block;
		width: 2.5rem;
		height: 3.8rem;
		border-radius: 70% 40% 65% 35%;
		background: linear-gradient(135deg, #f04a3d, #a90e1a 78%);
		transform-origin: 50% 88%;
	}

	.hero-flower i:nth-child(2) { transform: rotate(72deg); }
	.hero-flower i:nth-child(3) { transform: rotate(144deg); }
	.hero-flower i:nth-child(4) { transform: rotate(216deg); }
	.hero-flower i:nth-child(5) { transform: rotate(288deg); }

	.choir-hero {
		display: block;
		min-height: 0;
		padding: 0;
		background: var(--choir-night);
	}

	.choir-mobile-cover {
		display: block;
		width: 100%;
		line-height: 0;
	}

	.choir-hero > :not(.choir-mobile-cover) {
		display: none;
	}

	.choir-jump-nav {
		position: sticky;
		top: 0;
		overflow: hidden;
		justify-content: space-evenly;
		background: rgba(2, 27, 35, 0.96);
		border-top: 1px solid rgba(217, 170, 113, 0.3);
		border-bottom: 1px solid rgba(217, 170, 113, 0.3);
		backdrop-filter: blur(12px);
		scrollbar-width: none;
	}

	.choir-jump-nav::-webkit-scrollbar {
		display: none;
	}

	.choir-jump-nav a {
		flex: 1 1 25%;
		min-width: 0;
		padding: 0.9rem 0.2rem;
		color: var(--choir-ivory);
		font-size: clamp(0.52rem, 2.7vw, 0.64rem);
		letter-spacing: 0.035em;
		text-align: center;
		white-space: nowrap;
	}

	.choir-section {
		position: relative;
		padding: 4.75rem 1.15rem 3.75rem;
		border-top: 0;
		background: transparent;
		scroll-margin-top: 3.7rem;
		overflow: hidden;
	}

	.choir-section::before {
		content: "";
		position: absolute;
		right: -6rem;
		top: 2rem;
		width: 13rem;
		height: 13rem;
		border: 1px solid rgba(217, 170, 113, 0.14);
		transform: rotate(45deg);
		pointer-events: none;
	}

	.section-heading {
		position: relative;
		margin: 0 0 2.3rem;
		text-align: left;
	}

	.section-heading h2 {
		margin-bottom: 0.7rem;
		color: var(--choir-ivory);
		font-size: clamp(1.9rem, 8vw, 2.75rem);
		line-height: 1.02;
		letter-spacing: -0.045em;
		text-align: center;
	}

	.section-subtitle {
		position: relative;
		margin: 0;
		padding-bottom: 0.8rem;
		color: var(--choir-cyan);
		font-size: 0.75rem;
		text-align: center;
	}

	.section-subtitle::after {
		content: "";
		position: absolute;
		left: 50%;
		bottom: 0;
		width: 7rem;
		height: 3px;
		background: linear-gradient(90deg, var(--choir-cyan) 0 78%, var(--choir-red) 78%);
		transform: translateX(-50%);
	}

	.prose,
	.vision-grid,
	.portrait-pair,
	.conductor-section blockquote,
	.feature-image {
		max-width: none;
	}

	.media-video {
		margin: 1.5rem 0;
		padding: 0.35rem;
		border: 1px solid var(--choir-gold);
		border-radius: 1rem;
		background: rgba(2, 29, 38, 0.82);
		overflow: hidden;
	}

	.media-video video {
		border-radius: 0.7rem;
	}

	.media-video figcaption {
		padding: 0.8rem 0.55rem 0.45rem;
		border-top: 0;
		color: var(--choir-ivory);
		font-size: 0.64rem;
	}

	.prose,
	.vision-grid,
	.conductor-section blockquote {
		position: relative;
		padding: 1.35rem 1.2rem;
		border: 1px solid rgba(217, 170, 113, 0.38);
		border-radius: 1rem;
		background: rgba(2, 29, 38, 0.76);
		box-shadow: 0 1.2rem 2.5rem rgba(0, 0, 0, 0.14);
	}

	.prose p,
	.vision-item p {
		margin-bottom: 1.2rem;
		color: rgba(244, 239, 228, 0.9);
		font-size: 1rem;
		line-height: 1.9;
		text-align: left;
		text-indent: 0;
	}

	.prose p:last-child,
	.vision-item p:last-child {
		margin-bottom: 0;
	}

	.feature-image {
		margin: 1.5rem 0;
		padding: 0.35rem;
		border: 1px solid var(--choir-gold);
		border-radius: 1rem;
		background: rgba(2, 29, 38, 0.82);
		overflow: hidden;
	}

	.feature-image img {
		border-radius: 0.7rem;
	}

	.feature-image figcaption {
		padding: 0.8rem 0.55rem 0.45rem;
		border-top: 0;
		color: var(--choir-ivory);
		font-size: 0.64rem;
	}

	.feature-image figcaption span {
		color: var(--choir-gold);
	}

	.vision-grid {
		display: block;
	}

	.vision-item {
		margin-bottom: 2.2rem;
	}

	.vision-item:last-child {
		margin-bottom: 0;
	}

	.vision-item h3 {
		color: var(--choir-gold);
		font-size: 1.35rem;
	}

	.portrait-pair {
		gap: 0.8rem;
		margin-bottom: 1.5rem;
	}

	.portrait-pair figure {
		padding: 0.3rem;
		border: 1px solid var(--choir-gold);
		border-radius: 1rem;
		background: rgba(2, 29, 38, 0.82);
		overflow: hidden;
	}

	.portrait-pair figure:last-child {
		width: 100%;
		margin: 0;
		box-shadow: none;
	}

	.portrait-pair img {
		border-radius: 0.7rem;
	}

	.two-columns {
		columns: auto;
	}

	.conductor-section blockquote {
		margin: 1.5rem 0;
		background: var(--choir-copper);
		color: #fff;
		font-size: 1.45rem;
		text-align: left;
	}

	.brassify-section {
		background: linear-gradient(180deg, rgba(189, 134, 80, 0.1), transparent 25rem);
	}

	.brassify-section .section-heading h2 {
		color: var(--choir-gold);
	}

	.choir-page #copyright {
		margin: 0;
		padding: 2.5rem 1rem 5rem;
		width: 100%;
		max-width: none;
		box-sizing: border-box;
		background: #00141b;
		color: rgba(244, 239, 228, 0.5);
		font-size: 0.72rem;
		line-height: 1.7;
	}

	.choir-page #copyright ul li {
		display: block;
		margin: 0.55rem 0 0;
		padding: 0;
		border-left: 0;
	}

	.choir-page #copyright ul li:first-child {
		margin-top: 0;
	}

	.choir-page #copyright a {
		color: rgba(244, 239, 228, 0.72);
	}

	.choir-section > * {
		animation: choir-reveal 0.7s ease both;
	}
}

@keyframes choir-reveal {
	from { opacity: 0; transform: translateY(1rem); }
	to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.choir-section > * { animation: none; }
}