:where(:root)
{
	--uniform-row-gap	: 5rem;
	--uniform-column-gap	: 5rem;
	--uniform-nav-column-gap	: 2rem;
}

:where(main)
{
	--hero-height	: 720px;
	--hero-mask-height	: 240px;
}

:where(.zone)
{
	--spacing-y	: var(--uniform-row-gap);
}

:where(.button)
{
	font-weight	: bold;
}

:where(#home-kv-banner.zone)
{
	----aspect-ratio	: 16 / 10;
}

:where(#hero.content)
{
	--height	: var(--hero-height);
	--mask-height	: var(--hero-mask-height);
	
	height	: var(--height);
	
	display	: grid;
	
	grid-template-rows	:
		[full-start]
			1fr
		[mask-start]
			var(--mask-height)
		[mask-end full-end]
	;
	
	grid-template-columns	: 1fr;
	
	justify-content	: stretch;
	align-items	: stretch;
	justify-items	: stretch;
	
	:where(&>*)
	{
		grid-column	: 1;
	}
	
	:where(&>img)
	{
		grid-row	: full;
		object-fit	: cover;
		overflow	: hidden;
	}
	
	:where(&>.text)
	{
		grid-row	: full;
		place-self	: center;
		text-align	: center;
		
		line-height	: 1.2;
		
		:where(.xs, .sm, .md) &
		{
			font-size	: 3.25rem;
		}
		
		:where(.lg, .xl, .xxl) &
		{
			font-size	: 3.5rem;
			font-size	: 4.25rem;
		}
	}
	
	
	:where(&>.mask)
	{
		grid-row	: mask;
		background	: linear-gradient(
			to top,
			var(--bs-secondary),
			transparent
		);
	}
}

:where(#intro.zone)
{
	background	: linear-gradient(
		to bottom,
		/*rgb(var(--bs-secondary-rgb), 85%),*/
		rgb(var(--bs-secondary-rgb), 100%),
		rgb(var(--bs-secondary-rgb), 50%)
	);
}

:where(#overview.content)
{
	display	: grid;
	grid-template-columns	: auto;
	grid-auto-rows	: min-content;
	
	text-align	: justify;
	
	:where(&>.button)
	{
		justify-self	: center;
	}
	
	row-gap	: var(--uniform-row-gap);
	row-gap	: 2.5rem;
	
	color	: white;
}




:where(#study-mask-title)
{
	grid-column	: full;
	grid-row	: full;
	
	--mask-title-font-size	: 133px;
	
	place-self	: center;
	
	:where(.lg, .xl, .xxl) &
	{
		justify-self	: start;
		align-self	: start;
		transform-origin	: bottom;
		transform	: translateY(calc(var(--mask-title-font-size) / (-2)));
	}
	
	pointer-events	: none;
	
	&>:where(.title)
	{
		font-family	: var(--title-font-family);
		font-weight	: var(--title-font-weight);
		
		color	: white;
		
		text-align	: center;
		
		font-size	: calc(var(--mask-title-font-size) / 2);
		
		:where(.xs, .sm, .md) &
		{
			transform-origin	: center;
		}
		
		:where(.lg, .xl, .xxl) &
		{
			transform-origin	: top left;
			font-size	: var(--mask-title-font-size);
		}
		
		opacity	: 0.5;
		line-height	: 1;
		z-index	: 1;
		pointer-events	: none;
		user-select	: none;
		-webkit-user-select: none;
		
		will-change	: transform;
		
		transition	: opacity 0.5s;
		
		overflow	: hidden;
		max-width	: 100%;
	}
	
}









:where(#study.content)
{
	display	: grid;
	grid-template-columns	: [full-start] 1fr 1fr [full-end];
	grid-template-rows	: [full-start] 1fr [full-end];
	grid-template-areas	: "item-1 item-2";
	
	column-gap	: var(--uniform-column-gap);
	row-gap	: var(--uniform-row-gap);
	
	:where(.xs, .sm, .md) &
	{
		grid-template-columns	: [full-start] 1fr [full-end];
		grid-template-rows	: [full-start] 1fr 1fr [full-end];
		grid-template-areas	: "item-1" "item-2";
		row-gap	: calc(var(--uniform-row-gap) * 1.5);
	}
	
	:where(.lg, .xl, .xxl) &
	{
		padding-top	: 5rem;
	}
	
	:where(&>.item:nth-child(1))
	{
		grid-area	: item-1;
	}
	
	:where(&>.item:nth-child(2))
	{
		grid-area	: item-2;
	}
	
	:where(&>.item)
	{
		aspect-ratio	: 6/5;
		
		color	: white;
		
		display	: grid;
		
		grid-template-columns	: 1fr;
		grid-template-rows	: 1fr;
		
		:where(&>*)
		{
			grid-column	: 1;
			grid-row	: 1;
		}
		
		:where(&>img)
		{
			place-self	: stretch;
		}
		
		:where(&>.title)
		{
			align-self	: end;
			justify-self	: stretch;
			
			display	: grid;
			
			grid-template-columns	: 1fr;
			grid-template-rows	: 1fr;
			
			:where(&>*)
			{
				grid-row	: 1;
				grid-column	: 1;
				
				transition	: all 0.5s;
			}
			
			place-items	: stretch;
			place-content	: stretch;
			
			:where(&>.bg-normal)
			{
				background	: linear-gradient(
					to top,
					var(--bs-dark),
					transparent
				);
			}
			
			:where(&>.bg-hover)
			{
				background	: linear-gradient(
					to top,
					var(--bs-secondary),
					transparent
				);
				
				opacity	: 0;
			}
			
			:where(&>.text)
			{
				place-self	: center;
				----font-size	: 1.5rem;
				padding	: 2em 0;
				font-weight	: bold;
				font-size	: larger;
			}
		}
		
		&:hover
		{
			& .bg-normal
			{
				opacity	: 0;
			}
			
			& .bg-hover
			{
				opacity	: 1;
			}
			
			& .text
			{
				transform	: scale(1.1);
			}
		}
	}
}













:where(#campuses.content)
{
	display	: grid;
	grid-template-rows	: auto auto;
	grid-template-columns	: auto;
	
	row-gap	: var(--uniform-row-gap);
	row-gap	: 2.5rem;
	
	/*
	--width		: 3409;
	--height	: 2726;
	*/
	--width		: 2495;
	--height	: 1255;

	
	
	:where(&>.refactoring)
	{
		grid-row	: 1;
		grid-column	: 1;
		
		place-self	: stretch;
		
		--visual-height-factor	: 0.8;
		--visual-height	: calc(var(--height) * var(--visual-height-factor, 1));
		aspect-ratio	: var(--width) / var(--visual-height);
		
		display	: grid;
		
		align-items	: stretch;
		justify-items	: stretch;
		
		overflow	: hidden;
		
		grid-template-columns	: 1fr;
		grid-template-rows	: 1fr;
		
		:where(&>.interactive-map)
		{
			----transform	: translateY( calc( -100% * ( 1 - var(--visual-height-factor, 1) ) / 2 ) );
		}
		
	}
	
	:where(&>a.button)
	{
		grid-row	: 2;
		grid-column	: 1;
		justify-self	: center;
	}
}

:where(.interactive-map)
{
	--center-x	: calc(var(--width) / 2);
	--center-y	: calc(var(--height) / 2);
	
	/*
	--harrow-x	: 753;
	--harrow-y	: 1952;
	--harrow-scale	: 2;
	
	--cavendish-x	: 1394;
	--cavendish-y	: 913;
	--cavendish-scale	: 2;
	
	--marylebone-x	: 668;
	--marylebone-y	: 831;
	--marylebone-scale	: 2;
	
	--regent-x	: 1258;
	--regent-y	: 1240;
	--regent-scale	: 2;
	*/
	
	--harrow-x	: 403;
	--harrow-y	: 582;
	--harrow-scale	: 2;
	
	--cavendish-x	: 1389;
	--cavendish-y	: 515;
	--cavendish-scale	: 2;
	
	--marylebone-x	: 1033;
	--marylebone-y	: 471;
	--marylebone-scale	: 2;
	
	--regent-x	: 1320;
	--regent-y	: 713;
	--regent-scale	: 2;
	
	aspect-ratio	: var(--width) / var(--height);
	
	--h-on-w	: calc(var(--height) / var(--width));
	
	overflow	: hidden;
	
	position	: relative;
	
	display	: grid;
	
	grid-template-columns	: 1fr;
	grid-template-rows	: 1fr;
	
	container-type	: size;
	
	/*container-type	: inline-size;*/
	
	:where(&>*)
	{
		grid-column	: 1;
		grid-row	: 1;
	}
	
	:where(&>*)
	{
		transition	: transform 0.5s;
	}
	
	:where(&[data-focus-to="center"]>.map)
	{
		transition	:
			transform-origin 0s 0.5s,
			transform 0.5s
		;
	}
	
	--tx	: calc(var(--center-x) - var(--focus-x));
	--ty	: calc(var(--center-y) - var(--focus-y));
	
	--tx-r	: calc(var(--tx) / var(--width));
	--ty-r	: calc(var(--ty) / var(--height));
	
/* 仅matrix；不origin、不translate */
/*
	:where(&>.map)
	{
		transform	: matrix(
			var(--scale), 0, 0, var(--scale),
			calc( ( 1-var(--scale) ) * var(--tx-r) * 100cqw),
			calc( ( 1-var(--scale) ) * var(--ty-r) * 100cqh)
		);
	}
*/

/* origin matrix；不translate */
	:where(&>.map)
	{
		transform-origin	:
			calc(var(--focus-x) / var(--width) * 100cqw)
			calc(var(--focus-y) / var(--height) * 100cqh)
			/*calc(var(--focus-y) / var(--height) * 100cqw * var(--h-on-w))*/
		;
		transform	: matrix(var(--scale), 0, 0, var(--scale), 0, 0);
	}
	
/* translate scale translate；不matrix、不origin */
/*
	:where(&>.map)
	{
		--focus-tx		: calc(var(--center-x) - var(--focus-x));
		--focus-ty		: calc(var(--center-y) - var(--focus-y));
		--focus-tx-r	: calc(var(--focus-tx) / var(--width));
		--focus-ty-r	: calc(var(--focus-ty) / var(--height));
		--focus-tx-q	: calc(var(--focus-tx-r) * 100%);
		--focus-ty-q	: calc(var(--focus-ty-r) * 100%);
		
		transform	:
			translate(var(--focus-tx-q), var(--focus-ty-q)) 
			scale(var(--scale)) 
			translate(calc(-1 * var(--focus-tx-q)), calc(-1 * var(--focus-ty-q)))
		;
	}
*/
	
	&>:where(.location[data-name="harrow"])
	{
		--x	: var(--harrow-x);
		--y	: var(--harrow-y);
	}
	
	&>:where(.location[data-name="regent"])
	{
		--x	: var(--regent-x);
		--y	: var(--regent-y);
	}
	
	&>:where(.location[data-name="cavendish"])
	{
		--x	: var(--cavendish-x);
		--y	: var(--cavendish-y);
	}
	
	&>:where(.location[data-name="marylebone"])
	{
		--x	: var(--marylebone-x);
		--y	: var(--marylebone-y);
	}
	
	&:where([data-focus-to="center"])
	{
		--focus-x	: var(--center-x);
		--focus-y	: var(--center-y);
		
		--scale		: 1;
	}
	
	&:where([data-focus-to="harrow"])
	{
		--focus-x	: var(--harrow-x);
		--focus-y	: var(--harrow-y);
		
		--scale		: var(--harrow-scale);
	}
	
	&:where([data-focus-to="regent"])
	{
		--focus-x	: var(--regent-x);
		--focus-y	: var(--regent-y);
		
		--scale		: var(--regent-scale);
	}
	
	&:where([data-focus-to="cavendish"])
	{
		--focus-x	: var(--cavendish-x);
		--focus-y	: var(--cavendish-y);
		
		--scale		: var(--cavendish-scale);
	}
	
	&:where([data-focus-to="marylebone"])
	{
		--focus-x	: var(--marylebone-x);
		--focus-y	: var(--marylebone-y);
		
		--scale		: var(--marylebone-scale);
	}
	
	:where(&>.location)
	{
		--hud-x-r	: calc(
			(var(--x) + (var(--x) - var(--focus-x)) * (var(--scale) - 1))
			/ var(--width)
		);
		--hud-y-r	: calc(
			(var(--y) + (var(--y) - var(--focus-y)) * (var(--scale) - 1))
			/ var(--height)
		);
		--hud-x-t	: calc(var(--hud-x-r) * 100cqw);
		--hud-y-t	: calc(var(--hud-y-r) * 100cqh);
		--------hud-y-t	: calc(var(--hud-y-r) * 100cqw * var(--h-on-w));
		position: absolute;
		transform-origin	: -50% -50%;
		transform: translate(var(--hud-x-t), var(--hud-y-t));
	}
	
	&:where([data-focus-to="center"])
	{
		
	}
	
	&:where(:not([data-focus-to="center"]))
	{
	}
	
	&:where([data-focus-to="center"])
	{
		
	}
	
	:where(&>.map)
	{
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		aspect-ratio	: var(--width) / var(--height);
		
		clip-path	: inset(0% 0% 0% 0%);
	}
	
	:where(&>.location)
	{
		
		&>:where(button)
		{
			cursor	: pointer;
			
			font-size	: 1.25rem;
			
			--pin-width	: 2em;
			--play-width	: 1.5em;
			
			display	: grid;
			border	: transparent;
			border-radius	: 0.5rem;
			background	: rgb(var(--bs-dark-rgb), 0.5);
			
			transform	: translate(
				calc(0.5 * var(--pin-width) + 0.25rem), -100%
			);
			position	: absolute;
			/*
			如果position保持默认static，button会撑开父div尺寸
			button平移变换后，已撑开的div视觉上不可见，但会产生遮挡
			会遮挡顺序位于其后的元素
			position设置为absolute后，button将离开div内的文档流
			无元素撑开div，则div尺寸为0x0
			遮挡关系仍存在，但0x0尺寸已无遮挡能力
			*/
			
			grid-template-columns	:
				[pin-start]
					0
				[pin-end play-start]
					var(--play-width)
				[play-end name-start]
					max-content
				[name-end dummy-start]
					0
				[dummy-end];
			;
			
			grid-template-rows	: 3em;
			;
			
			place-items	: stretch;
			place-content	: stretch;
			
			column-gap	: 0.75em;
			
			padding	: 0.5em 0;
			
			:where(&>*)
			{
				transition	: all 0.5s;
			}
			
			&>:where(.pin)
			{
				grid-column	: pin;
				
				/*transform	: translate(calc(-1 * var(--pin-width) - 0.5rem), 0);*/
				position	: absolute;
				left	: calc(-1 * var(--pin-width) - 0.5rem);
				width	: var(--pin-width);
				height	: 100%;
				fill	: red;
				opacity		: 0.5;
			}
			
			&>:where(.play, .circle-play)
			{
				grid-column	: play;
				grid-row	: 1;
				
				
				fill	: var(--bs-primary);
				object-fit	: contain;
			}
			
			&>:where(.name)
			{
				grid-column	: name;
				color	: var(--bs-primary);
				align-content	: center;
			}
			
			&>:where(.abbr)
			{
				grid-column	: abbr;
				color	: var(--bs-primary);
				align-content	: center;
				display	: none;
			}
			
			:where(.xs, .sm, .md) &
			{
				grid-template-rows	: 2em;
				font-size	: 1rem;
				padding	: 0.125em 0;
				--play-width	: 1em;
				
				grid-template-columns	:
					[pin-start]
						0
					[pin-end play-start]
						var(--play-width)
					[play-end abbr-start]
						max-content
					[abbr-end dummy-start]
						0
					[dummy-end];
				;
				
				&>:where(.circle-play, .name)
				{
					display	: none;
				}
				
				&>:where(.abbr)
				{
					display	: grid;
				}
				
				/*
				&:hover
				{
					grid-template-columns	:
						[pin-start]
							0
						[pin-end play-start]
							var(--play-width)
						[play-end name-start]
							max-content
						[name-end dummy-start]
							0
						[dummy-end];
					;
					
					&>:where(.abbr)
					{
						display	: none;
					}
					
					&>:where(.play, .circle-play, .name)
					{
						display	: block;
					}
					
				}*/
			}
			
			&:hover
			{
				&>:where(.pin)
				{
					fill	: var(--bs-primary);
					opacity		: 0.7;
					transform	: scale(1.1) translateY(-10%) rotateY(180deg);
				}
				
				&>:where(.play, .circle-play)
				{
					transform	: scale(1.1);
				}
				
				&>:where(.name, .abbr)
				{
					transform	: translateX(0.25em);
				}
			}
			
			&:active
			{
				&>:where(.pin)
				{
					opacity		: 0.9;
					transform	: scale(1.1) translateY(5%) rotateY(180deg);
				}
				
			}
		}
	}
}


























:where(#latest.content)
{
	--weibo-widget-scale	: 1.2;
	
	:where(.lg, .xl, .xxl) &
	{
		--visual-item-count	: 2;
	}
	
	:where(.md) &
	{
		--visual-item-count	: 2;
	}
	
	:where(.sm) &
	{
		--visual-item-count	: 2;
	}
	
	:where(.xs) &
	{
		--visual-item-count	: 1;
	}
	
	--column-gap	: 5rem;
	--row-gap	: var(--uniform-row-gap);
	--row-gap	: 1rem;
	
	display	: grid;
	
	/*
	grid-template-rows	:
		[title-start]
			auto
		[title-end content-start]
			auto
		[content-end]
	;
	*/
	grid-template-rows	:
		[content-start]
			auto
		[content-end]
	;
	
	min-height	: 0;
	
	grid-template-columns	:
		[news-start]
			2fr
		[news-end weibo-start]
			1fr
		[weibo-end]
	;
	
	column-gap	: var(--column-gap);
	row-gap	: var(--row-gap);
	
	place-items	: stretch;
	place-content	: stretch;
	
	:where(&>*)
	{
	}
	
	:where(&>.news)
	{
		grid-column	: news;
	}
	
	:where(&>.weibo)
	{
		grid-column	: weibo;
	}
	
	:where(&>.title)
	{
		grid-row	: title;
		
		/*****************/
		display	: none;
	}
	
	:where(&>.content)
	{
		grid-row	: content;
	}
	
	:where(&>.title)
	{
		color	: black;
		font-size	: 1.75em;
		font-weight	: normal;
	}
	
	:where(&>.weibo.content)
	{
		display	: grid;
		grid-template-columns	: 1fr;
		grid-template-rows	: auto;
		place-items	: stretch;
		place-content	: stretch;
		
		border-radius	: 0.5rem;
		overflow	: hidden;
		
		:where(&>iframe)
		{
			grid-column	: 1;
			grid-row	: 1;
			
			aspect-ratio	: var(--item-aspect-ratio);
			transform-origin	: top left;
			transform	: scale(var(--weibo-widget-scale));
			width	: calc(100% / var(--weibo-widget-scale));
			height	: 100%;
		}
	}
	
	:where(.xs, .sm, .md) &
	{
		:where(&>.weibo)
		{
			display	: none;
		}
		
		grid-template-columns	:
			[news-start]
				1fr
			[news-end]
		;
	}
	
	:where(.md) &
	{
		
	}
	
	:where(.sm) &
	{
		
	}
	
	:where(.xs) &
	{
		
	}
	

	
	:where(&>.news.content)
	{
		overflow	: hidden;
		
		display	: grid;
		grid-template-columns	: 1fr;
		grid-template-rows	: auto;
		place-items	: stretch;
		place-content	: stretch;
		
		display	: block;
		
		/*
		container-type	: inline-size;
		*/
		/*
		要么写inline-size而不是size，因为容器自身有明确宽度，无明确高度
		要么不写，让直接子代使用百分数
		*/
		
		min-height	: 0;
	}
	
	
	:where(&>.news.content>.loop)
	{
		min-height	: 0;
		
		grid-row	: 1;
		
		--item-gap		: var(--column-gap);
		--item-width	: 1fr;
		--loop-width	: calc( ( 100% + var(--item-gap) ) * var(--item-count) * 3 / var(--visual-item-count) );
		/*对于父为container-type: inline-size，也可使用cqw单位
		但父不能是container-type: size，会要求父自身具有或继承有明确数值的高度
		然而当前场景的高度是依赖子孙高度撑开的，不是从祖辈继承来的
		container-type: size无法将子孙决定的高度提供给子孙查询，有循环依赖风险
		当前场景可以使用百分数，这个好处的前提是，
		计算单项或总体宽度所依赖的上级宽度，此上级必须恰好是父级
		也就是，父级必须有效参与更外层的布局
		当发生冗余的嵌套时，此计算依赖百分数就不安全
		如果必须进行此类嵌套，就考虑container-type: inline-size搭配cqw
		*/
		
		/*
		--item-width	: calc( (100cqw - var(--item-gap) ) / var(--visual-item-count));
		*/
		
		width	: var(--loop-width);
		
		/*
		&::after
		{
			content	: "";
			width	: 0;
		}
		*/
		
		padding-right	: var(--column-gap);
		
		--item-aspect-ratio	: auto;
		--item-picture-aspect-ratio	: auto;
		--item-aspect-ratio	: 11/12;
		--item-picture-aspect-ratio	: 4/3;
		
		--highlight-color	: var(--bs-primary);
		
		:where(.xs, .sm, .md) &
		{
			--highlight-size	: 0.2rem;
			--item-font-size	: 1rem;
		}
		
		:where(.lg, .xl, .xxl) &
		{
			--highlight-size	: 0.25rem;
			--item-font-size	: 1.5rem;
		}
		
		display	: grid;
		grid-template-rows	: min-content;
		grid-auto-columns	: var(--item-width);
		
		grid-auto-flow	: column;
		
		column-gap	: var(--column-gap);
		
		place-items	: stretch;
		place-content	: stretch;
		
		:where(&>.item)
		{
			aspect-ratio	: var(--item-aspect-ratio);
			
			display	: grid;
			
			grid-template-columns	: 1fr;
			grid-template-rows	:
				[highlight-start]
					var(--highlight-size)
				[highlight-end picture-start]
					min-content
				[picture-end content-start]
					1fr
				[content-end]
			;
			
			:where(&>*)
			{
				grid-column	: 1;
			}
			
			:where(&>.highlight)
			{
				grid-row	: highlight;
				background	: var(--highlight-color);
			}
			
			:where(&>.picture)
			{
				grid-row	: picture;
				place-self	: stretch;
				align-self	: stretch;
				min-width	: 0;
				display	: grid;
				grid-template-columns	: 1fr;
				grid-template-rows	: 1fr;
				
				place-items	: stretch;
				place-content	: stretch;
				
				:where(&>img)
				{
					
				}
			}
			
			:where(&>.content)
			{
				grid-row	: content;
				place-self	: stretch;
				align-self	: stretch;
				background	: var(--content-background);
				color		: var(--content-color);
				font-size	: var(--item-font-size);
				padding		: 1rem;
			}
			
			:where(&>._badge)
			{
				grid-row	: picture;
				justify-self	: end;
				align-self	: start;
				padding	: 0.5rem;
			}
			
			:where(&>.picture)
			{
				aspect-ratio	: var(--item-picture-aspect-ratio);
			}
			
			:where(&>._badge)
			{
				background	: var(--badge-background);
				color		: var(--badge-color);
			}
			
			:where(&>*)
			{
				transition	: all 0.2s;
			}
			
			--content-color	: black;
			--content-background	: white;
			--badge-color	: black;
			--badge-background	: var(--bs-primary);
			
			&:hover
			{
				--content-color		: var(--bs-secondary);
				--content-background	: var(--bs-primary);
				--badge-color		: var(--bs-primary);
				--badge-background	: var(--bs-secondary);
				--highlight-color	: var(--bs-secondary);
			}
		}
	}
}

:where(#news-nav.content, #contrib-nav.content)
{
	display	: grid;
	
	grid-template-columns	: 1fr 1fr;
	grid-template-rows	: auto auto;
	
	column-gap	: var(--uniform-nav-column-gap);
	row-gap	: var(--uniform-row-gap);
	row-gap	: 2.5rem;
	
	:where(&>button)
	{
		border-radius	: 50rem;
		aspect-ratio	: 1/1;
		width	: auto;
		--font-size	: 2.5rem !important;
		
		--padding-x	: 0.375em;
		--padding-y	: 0.375em;
	}
	
	:where(&>button[data-step="prev"])
	{
		justify-self	: end;
	}
	
	:where(&>button[data-step="next"])
	{
		justify-self	: start;
	}
	
	:where(&>a.redirect)
	{
		grid-column	: 1/3;
		justify-self	: center;
	}
}

:where(#contribs-title.content)
{
	display	: grid;
	grid-template-rows	: auto;
	grid-template-columns	: auto;
	
	:where(&>.title)
	{
		grid-row	: 1;
		color	: black;
		font-size	: 1.75em;
		font-weight	: normal;
	}
	display	: none;
	
}

:where(#campuses-mask-title, #contribs-mask-title, #news-mask-title)
{
	position	: relative;
	
	--mask-title-font-size	: 160px;
	--mask-title-opacity	: 0.3;
	
	--mask-title-font-size-rate	: 1;
	--mask-title-font-size-rate-m	: 0.5;
	--mask-title-ty-pct	: 0%;
	--mask-title-ty-pct-m	: 50%;
	
	&:where(#campuses-mask-title)
	{
		--mask-title-font-size	: 125px;
		--mask-title-opacity	: 0.5;
		
		--mask-title-font-size-rate	: 1;
		--mask-title-font-size-rate-m	: 0.5;
		--mask-title-ty-pct	: 20%;
		--mask-title-ty-pct-m	: 75%;
	}
	
	:where(.xs, .sm, .md) &
	{
		--mask-title-font-size-rate	: var(--mask-title-font-size-rate-m);
		--mask-title-ty-pct	: var(--mask-title-ty-pct-m);
	}
	
	:where(.lg, .xl, .xxl) &
	{
	}
	
	&>:where(.title)
	{
		font-family	: var(--title-font-family);
		font-weight	: var(--title-font-weight);
		position	: absolute;
		color	: white;
		
		transform-origin	: top left;
		
		font-size	: calc( var(--mask-title-font-size-rate) * var(--mask-title-font-size) );
		transform	: translateY(var(--mask-title-ty-pct));
		
		opacity	: var(--mask-title-opacity);
		line-height	: 1;
		z-index	: 1;
		pointer-events	: none;
		user-select	: none;
		-webkit-user-select: none;
		
		will-change	: transform;
		
		transition	: opacity 0.5s;
		
		overflow	: hidden;
		max-width	: 100%;
	}
	
}


:where(#contribs.content)
{
	/*
	:where(.lg, .xl, .xxl) &
	{
		--visual-item-count	: 2.5;
	}
	
	:where(.md) &
	{
		--visual-item-count	: 2;
	}
	
	:where(.sm) &
	{
		--visual-item-count	: 1.5;
	}
	
	:where(.xs) &
	{
		--visual-item-count	: 1.5;
	}
	*/
	
	:where(.xl, .xxl) &
	{
		--visual-item-count	: 4;
	}
	
	:where(.lg) &
	{
		--visual-item-count	: 3;
	}
	
	:where(.md) &
	{
		--visual-item-count	: 2;
	}
	
	:where(.sm) &
	{
		--visual-item-count	: 1;
	}
	
	:where(.xs) &
	{
		--visual-item-count	: 1;
	}
	
	--row-gap	: var(--uniform-row-gap);;
	--column-gap	: var(--uniform-column-gap);
	--column-gap	: 3rem;
	
	display	: grid;
	
	grid-template-columns	: 1fr;
	grid-template-rows	: auto;
	
	row-gap	: var(--row-gap);
	
	:where(&>.content)
	{
		grid-row	: 1;
		
		overflow	: hidden;
		
		display	: grid;
		
		grid-template-columns	: 1fr;
		grid-template-rows	: auto;
		
		container-type	: inline-size;
		
		:where(&>.loop)
		{
			min-height	: 0;
			
			grid-row	: 1;
			
			--item-gap		: var(--column-gap);
			--item-width	: 1fr;
			--loop-width	: calc( ( 100cqw + var(--item-gap) ) * var(--item-count) * 3 / var(--visual-item-count) );
			
			width	: var(--loop-width);
			
			padding-right	: var(--item-gap);
			
			--item-aspect-ratio	: auto;
			--item-picture-aspect-ratio	: auto;
			--item-aspect-ratio	: 4/3;
			--item-picture-aspect-ratio	: 4/3;
			
			:where(.xs, .sm, .md, .lg) &
			{
				--item-font-size	: 1rem;
			}
			
			:where(.xl, .xxl) &
			{
				--item-font-size	: 1.125rem;
			}
			
			
			
			display	: grid;
			grid-template-rows	: min-content;
			grid-auto-columns	: var(--item-width);
			
			grid-auto-flow	: column;
			
			column-gap	: var(--item-gap);
			
			place-items	: stretch;
			place-content	: stretch;
			
			:where(&>.item)
			{
				margin-left	: 1em;
				margin-right	: 1em;
				
				aspect-ratio	: var(--item-aspect-ratio);
				
				display	: grid;
				
				grid-template-columns	: 1fr;
				grid-template-rows	: 1fr;
				
				:where(&>*)
				{
					grid-column	: 1;
					grid-row	: 1;
				}
				
				:where(&>.picture)
				{
					place-self	: stretch;
					align-self	: stretch;
					min-width	: 0;
					display	: grid;
					grid-template-columns	: 1fr;
					grid-template-rows	: 1fr;
					
					place-items	: stretch;
					place-content	: stretch;
					
					:where(&>img)
					{
						
					}
				}
				
				:where(&>.content)
				{
					align-self	: end;
					justify-self	: stretch;
					
					
					display	: grid;
					grid-template-columns	: 90fr 10fr;
					grid-template-rows	: 5rem;
					
					:where(&>*)
					{
						grid-column	: 1;
						grid-row	: 1;
						
						transition	: all 0.2s;
					}
					
					:where(&>.bg-normal)
					{
						background	: linear-gradient(
							to top,
							var(--bs-dark),
							transparent
						);
						opacity	: 1;
						
						
						background	: var(--bs-primary);
						background	: var(--bs-secondary);
						background	: linear-gradient(to right,var(--bs-secondary) 30%, rgb(var(--bs-secondary-rgb), 50%));
						
						clip-path	: polygon(0 0, 80% 0, 100% 100%, 0 100%);
					}
					
					:where(&>.bg-hover)
					{
						background	: linear-gradient(
							to top,
							var(--bs-secondary),
							transparent
						);
						
						opacity	: 0;
						opacity	: 1;
						
						background	: var(--bs-secondary);
						background	: var(--bs-primary);
						
						clip-path	: polygon(0 0, 80% 0, 100% 100%, 0 100%);
						
						transform	: translateX(var(--bg-hover-offset));
					}
					
					:where(&>.text)
					{
						justify-self	: start;
						align-self	: center;
						
						color		: var(--content-color);
						font-size	: var(--item-font-size);
						----padding		: 1rem;
						padding-left	: 1rem;
						padding-right	: 3.5rem;
						text-align	: start;
						
						z-index	: 1;
						
						transform	: translateX(var(--text-offset));
					}
				}
				
				:where(&>.picture)
				{
					aspect-ratio	: var(--item-picture-aspect-ratio);
				}
				
				:where(&, &>*)
				{
					transition	: all 0.2s;
				}
				
				&::after
				{
					font-family	: var(--glyph-font);
					content	: var(--glyph--play-video);
					
					grid-column	: 1;
					grid-row	: 1;
					
					font-size	: var(--glyph-size);
					
					color	: var(--glyph-color);
					
					transition	: all 0.2s;
					
					place-self	: center;
				}
				
				padding	: 0;
				border	: none;
				
				--item-color	: black;
				--item-background	: white;
				--content-color	: transparent;
				--content-color	: black;
				--content-color	: var(--bs-primary);
				
				--glyph-color	: var(--bs-light);
				--glyph-size	: 4rem;
				
				--text-offset	: 0;
				
				--bg-hover-offset	: -100%;
				
				&:hover
				{
					--content-color	: var(--bs-primary);
					--content-color	: black;
					
					&>.content>.bg-normal
					{
						opacity	: 0;
						opacity	: 1;
					}
					
					&>.content>.bg-hover
					{
						opacity	: 1;
					}
					
					--text-offset	: 0.5rem;
					--bg-hover-offset	: 0%;
				}
				
				&:hover::after
				{
					transform	: scale(1.1);
					--glyph-color	: var(--bs-primary);
				}
			}
		}
	}
}

































#video-player button.btn-close,
#splash button.btn-close
{
	position	: absolute;
	top		: 32px;
	right	: 32px;
}


#splash .card
{
	display	: flex;
	flex-direction	: column;
}

#splash .card-img-top
{
	flex	: 2;
}

#splash .card-body
{
	flex	: 3;
	background	: var(--bs-primary);
	color	: black;
}

#iframe-container iframe
{
	width	: 100%;
	height	: 100%;
}