/* ===== GENERAL ===== */

/* General */
:root {
	--appHeight : 100% ;
	
	--headerHeight : 80px ;
	
	--pageNavigationWidth : 250px ;
	--pageNavigationHeightMin : 0px ;
	
	--sliderMenuHeight : 0px ;
	
	/* Colors (inspired by apple.com) */
	--colorWhite : #F5F5F7 ;
	--backgroundBlack : #000000 ;
	
	--colorBlack : #1D1D1F ;
	--backgroundWhite : #FAFAFA ;

	--textColor : #F5F5F7 ;
	--backgroundColor : #000000 ;
	
	--musicVideoMinHeight : 250px ;
	
	--backdropBlurFilter : blur(4px) brightness(0.9) ;
	
	--previewBackgroundColor1 : 192, 192, 192 ;
	--previewBackgroundColor2 : 64, 64, 64 ;
	
	/* Accent : cold "X-ray film" blue, unifying the light blues used across the site */
	--colorAccent : #9CD1F0 ;
	--colorAccentGlow : rgba(156, 209, 240, 0.45) ;
	
	/* Neutral surfaces, borders and muted text */
	--colorMuted : #98989F ;
	--surface1 : #131316 ;
	--surface2 : #1D1D22 ;
	--surface3 : #27272E ;
	--borderSubtle : rgba(255, 255, 255, 0.08) ;
	--borderColor : rgba(255, 255, 255, 0.16) ;
	--borderStrong : rgba(255, 255, 255, 0.30) ;
	
	/* Radii and shadows */
	--radiusS : 6px ;
	--radiusM : 12px ;
	--radiusL : 22px ;
	--shadowSoft : 0 8px 24px rgba(0, 0, 0, 0.45) ;
	--shadowElevated : 0 24px 70px rgba(0, 0, 0, 0.75) ;
}

* {
	box-sizing : border-box ;
}

::selection {
	background : var(--colorAccent) ;
	color : var(--colorBlack) ;
	text-shadow : none ;
}

:focus {
	outline : none ;
}
:focus-visible {
	outline : 2px solid var(--colorAccent) ;
	outline-offset : 3px ;
}

@media (prefers-reduced-motion : no-preference) {
	html {
		scroll-behavior : smooth ;
	}
}

/* Removes the double-tap zoom delay on the interactive elements (touch devices) */
a,
button,
[role="button"] {
	touch-action : manipulation ;
}

a {
	color : inherit ;
	text-decoration : none ;
}

address {
	font-style : normal ;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin : 0 ;
	display : inherit ;
	font-size : inherit ;
	font-weight : inherit ;
}

img {
	text-align : center ;
}

video {
	background : rgba(0, 0, 0, 0.4) ;
	filter : brightness(0.9) ;
	
	cursor : pointer ;
	
	transition : background 0.1s ease, filter 0.1s ease ;
}
	video:hover {
		background : rgba(0, 0, 0, 0.5) ;
		filter : none ;
	}

.hidden {
	display : none ;
}

/* HTML & Body */
html {
	height : 100% ;
	margin : 0 ;
	padding : 0 ;
	display : block ;

	background-color : var(--backgroundColor) ;
	color : var(--textColor) ;

	font-family : system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif ;
	-webkit-tap-highlight-color : transparent ;
	font-size : 14pt ;
	line-height : 1.5 ;
	-webkit-font-smoothing : antialiased ;
	text-rendering : optimizeLegibility ;
	text-align : center ;
	
	scroll-behavior : smooth ;
}

body {
	margin : 0 ;
}

.no-pull-to-refresh {
	overscroll-behavior-y : contain ;
}

/* Page title heading */
.h2 {
	height : 0 ;
	overflow : hidden ;
	
	display : flex ;
	flex-direction : row ;
	flex-wrap : wrap ;
	justify-content : center ;
	align-items : center ;
	align-content : flex-start ;
	
	text-transform : uppercase ;
	letter-spacing : 1px ;
	font-weight : bold ;
	
	opacity : 0 ;
	
	user-select : none ;
	
	pointer-events : none ;
}


/* ===== BACK TO TOP ===== */

/* Back to top */
.back_to_top {
	width : 42px ;
	line-height : 42px ;
	overflow : hidden ;
	/* Above the side-menu swipe strip (z 10) that was eating the hover on the
	   right half of the button */
	z-index : 11 ;
	
	position : fixed ;
	bottom : calc(var(--pageNavigationHeightMin) + 15px) ;
	right : 20px ;
	
	background : var(--surface2) ;
	border : 1px solid ;
	border-color : var(--borderColor) ;
	border-radius : var(--radiusM) ;
	
	color : #D9D9DE ;
	text-align : center ;
	font-size : 24px ;
	text-decoration : none ;
	
	cursor : pointer ;
	
	transform : rotate(270deg) ;

	opacity : 0.75 ;
	
	user-select : none ;
	
	display : none ;
}
	.back_to_top.active.visible {
		display : initial ;
	}
	.back_to_top.active.visible:hover {
		color : var(--textColor) ;
		background : var(--backgroundColor) ;
		border-color : rgba(255, 255, 255, 0.5) ;
		text-shadow : 0 0 5px var(--textColor) ;
		box-shadow : 0 0 12px rgba(255, 255, 255, 0.25) ;
		opacity : 1 ;
	}

/* Text */
span.important {
	font-weight : bold ;
	color : orange ;
}

/* WebVTT cues */
video::cue {
	font-size : 0.8em ;
	opacity : 0.75 ;
}

video::cue(u) {
	font-weight : bold ;
	color : orange ;
	text-decoration : none ;
}

video::cue(b) {
	font-weight : bold ;
}


/* ===== HEADER ===== */

/* Header */
header {
	position : fixed ;
	top : 0 ;
	width : 100% ;
	height : var(--headerHeight) ;
	z-index : 11 ;
	overflow : hidden ;
	
	padding : 10px ;
	
	display : flex ;
	flex-direction : row ;
	flex-wrap : nowrap ;
	justify-content : flex-start ;
	align-items : center ;
	
	background : linear-gradient(0.25turn, rgba(16, 16, 16, 0.92) var(--pageNavigationWidth), rgba(16, 16, 16, 0.9) calc(var(--pageNavigationWidth) + 1px), rgba(16, 16, 16, 0.9)) ;
	border-bottom : 1px solid var(--borderColor) ;
	box-shadow : 0 10px 30px rgba(0, 0, 0, 0.55) ;
	
	background-position-x : calc((var(--pageNavigationWidth) + 1px) * -1) ;
	background-size : calc(100% + var(--pageNavigationWidth)) ;
	
	/*
	// The menu will not show if backdrop-filter enabled
	backdrop-filter : var(--backdropBlurFilter) ;
	*/
}
	header.equilibrium {
		animation : headerEquilibriumAnimation 1s ease-in-out forwards ;
	}
		@keyframes headerEquilibriumAnimation {
			0% {
				
			}
			100% {
				background-position-x : 0px ;
			}
		}

.container_title,
.top_navigation_menu {
	display : flex ;
	justify-content : center ;
	align-items : center ;
	
	user-select : none ;
}

.container_title {
	margin : 0 10px ;
	padding : 5px 10px ;
	
	flex-direction : column ;
	z-index : 19 ;
	
	letter-spacing : 0.5px ;
	
	transition : transform 0.2s ease ;
}

.real_name {
	padding : 0 5px ;
	
	font-size : 1.6em ;
	font-weight : normal ;
	letter-spacing : 0.5px ;
	word-spacing : 2px ;
}

h1 {
	--bg-size : 400% ;
	--color-one : #FFFFFF ;
	--color-two : #C0C0C0 ;

	background : linear-gradient(
		90deg,
		var(--color-one),
		var(--color-two),
		var(--color-one)
	)
	0 0 / var(--bg-size) 100% ;
	
	-webkit-background-clip : text ;
	background-clip : text ;
	color : transparent ;
	
	transition : text-shadow 0.2s ease ;
}
	@media (prefers-reduced-motion : no-preference) {
		h1 {
			animation : move-bg 8s linear infinite ;
		}
		@keyframes move-bg {
			to {
				background-position : var(--bg-size) 0 ;
			}
		}
	}
	.real_name:hover > h1 {
		text-shadow : 0 0 2px var(--textColor) ;
	}

.username {
	padding : 0 5px ;
	
	color : var(--colorAccent) ;
	
	font-size : 1.1em ;
	
	transition : text-shadow 0.2s ease ;
}
	a.username:hover {
		text-shadow : 0 0 3px ;
	}

/* Top navigation menu */
.top_navigation_menu {
	margin : 0 ;
	margin-left : min(4vw, 100px) ;
	padding : 0 ;
	
	gap : 10px max(2vw, 15px) ;
}

.top_navigation_menu_item {
	overflow : hidden ;
	position : relative ;
	
	display : flex ;
	flex-direction : row ;
	flex-wrap : nowrap ;
	justify-content : center ;
	align-items : center ;
	
	background : var(--surface2) ;
	border : 1px solid var(--borderColor) ;
	border-radius : var(--radiusL) ;
	
	cursor : pointer ;
	
	user-select : none ;
	
	transition : border 0.1s ease, box-shadow 0.1s ease, background 0.1s ease, transform 0.1s ease ;
}
	.top_navigation_menu_item.current {
		border : 1px solid var(--borderStrong) ;
		box-shadow : 0 0 12px var(--colorAccentGlow), inset 0 0 0 1px var(--borderStrong) ;
	}
	.top_navigation_menu_item:hover {
		background-color : #282828 ;
	}
		.top_navigation_menu_item:not(.current):hover:active {
			border-color : #A0A0A0 ;
			box-shadow : 0 0 3px #C0C0C0 ;
		}
	.top_navigation_menu_item:hover:active {
		background : var(--textColor) ;
		color : var(--backgroundColor) ;
		box-shadow : 0 0 5px var(--textColor) ;
		
		transform : translate(1px, 2px) ;
	}

.top_navigation_menu_item_background {
	height : 100% ;
	width : 100% ;
	
	position : absolute ;
	top : 0 ;
	left : 0 ;
	z-index : 0 ;
	
	border-radius : inherit ;
	
	opacity : 0.5 ;
	filter : blur(1px) ;
	
	transition : filter 0.1s ease, opacity 0.1s ease ;
	
	/* alt style */
	font-size : 0.9em ;
	font-style : italic ;
	color : #404040 ;
}
	.top_navigation_menu_item.current .top_navigation_menu_item_background {
		filter : blur(0) ;
		opacity : 0.75 ;
	}
	.top_navigation_menu_item:hover .top_navigation_menu_item_background {
		opacity : 1 ;
		filter : blur(0) ;
	}
	.top_navigation_menu_item:hover:active .top_navigation_menu_item_background {
		opacity : 0.1 ;
		filter : grayscale(1) ;
	}

.top_navigation_menu_item_foreground {
	height : 100% ;
	width : 100% ;
	
	z-index : 1 ;
	
	display : flex ;
	flex-direction : row ;
	flex-wrap : nowrap ;
	justify-content : flex-start ;
	align-items : center ;
	
	background : rgba(0, 0, 0, 0.5) ;
	border-radius : inherit ;
	
	transition : background 0.1s ease ;
}
	.top_navigation_menu_item.current .top_navigation_menu_item_foreground {
		background : rgba(0, 0, 0, 0.25) ;
	}
	.top_navigation_menu_item:hover .top_navigation_menu_item_foreground {
		background : transparent ;
	}

.top_navigation_menu_item_title {
	margin : 8px 15px ;
	padding : 3px 10px ;
	
	overflow : hidden ;
	
	border-radius : 10px ;
	
	font-size : 1.3em ;
	letter-spacing : 0.5px ;
	
	color : white ;
	
	transition : background 0.1s ease, color 0.1s ease, text-shadow 0.1s ease ;
}
	.top_navigation_menu_item:hover:not(:active) .top_navigation_menu_item_title {
		background : rgb(0, 0, 0, 0.75) ;
		text-shadow : 0 0 3px white ;
	}
	.top_navigation_menu_item:hover:active .top_navigation_menu_item_title {
		color : black ;
		text-shadow : 0 0 3px grey ;
	}

/* Side navigation menu */
.hamburger {
	position : absolute ;
	top : calc(var(--headerHeight) / 2) ;
	transform : translate(0, -50%) ;
	right : 15px ;
	padding : 10px ;
	z-index : 21 ;
	
	display : flex ;
	flex-direction : column ;
	flex-wrap : nowrap ;
	justify-content : center ;
	align-items : center ;
	gap : 5px ;
	
	background : rgba(24, 24, 24, 0.5) ;
	border-radius : 25% ;

	cursor : pointer ;
	
	transition : background 0.2s ease ;
	
	visibility : hidden ;
}
	.hamburger:hover {
		background : #202020 ;
	}

.hamburger_line {
	height : 4px ;
	width : 35px ;

	background-color : #C9C9D0 ;
	border-radius : 8px ;
	
	transition : background-color 0.2s ease, border-radius 0.2s ease, opacity 0.2s ease, transform 0.2s ease ;
}
	.hamburger:hover > .hamburger_line {
		background-color : var(--textColor) ;
	}
	.hamburger.active > .hamburger_line:nth-of-type(1) {
		border-radius : 50% ;
		transform : rotate(45deg) translate(6px, 7px) ;
	}
	.hamburger.active > .hamburger_line:nth-of-type(2) {
		opacity : 0 ;
		transform : scale(0.5) translate(5px, 0) ;
	}
	.hamburger.active > .hamburger_line:nth-of-type(3) {
		border-radius : 50% ;
		transform : rotate(-45deg) translate(6px, -7px) ;
	}

.side_navigation_menu {
	--navigationMenuWidth : 250px ;
	
	position : fixed ;
	top : 0 ;
	right : 0 ;
	
	height : 100vh ;
	width : var(--navigationMenuWidth) ;
	z-index : 20 ;
	
	overflow-x : visible ;
	overflow-y : auto ;

	background-color : var(--surface1) ;
	border-left : 1px solid var(--borderColor) ;
	
	transform : translateX(var(--navigationMenuWidth)) ;
	
	transition : transform 0.2s ease ;
	
	visibility : hidden ;
}
	.side_navigation_menu.active {
		transform : translateX(0) ;
	}
	.side_navigation_menu.dragging {
		transition : none ;
	}

.side_navigation_menu_items_list {
	--navigationMenuItemsListMarginTop : 100px ;
	
    margin-top : var(--navigationMenuItemsListMarginTop) ;
    height : calc(var(--appHeight) - var(--navigationMenuItemsListMarginTop)) ;
    overflow : auto ;
	
	/* For smooth transition when the user scrolls down in mobile and the height is adjusted */
	transition : height 0.1s ease ;
}

.side_navigation_menu_item {
	height : 80px ;
	overflow : hidden ;
	position : relative ;
	
	margin : 10px 5px ;
	
	display : flex ;
	flex-direction : row ;
	flex-wrap : nowrap ;
	justify-content : center ;
	align-items : center ;
	
	border-radius : 10px ;
	
	user-select : none ;
	
	transition : transform 0.1s ease ;
}
	.side_navigation_menu_item:last-of-type {
		margin-bottom : 20px ;
	}
	.side_navigation_menu_item.current {
		border : 2px solid grey ;
		border-left : 5px solid #C0C0C0 ;
		border-right : 0 ;
	}
	.side_navigation_menu_item:hover {
		transform : translateX(5px) ;
	}

.side_navigation_menu_item_background {
	height : 100% ;
	width : 100% ;
	
	position : absolute ;
	top : 0 ;
	left : 0 ;
	z-index : 0 ;
	
	border-radius : inherit ;
	
	filter : blur(1px) ;
	opacity : 0.5 ;
	
	transition : filter 0.1s ease, opacity 0.1s ease ;
	
	/* alt style */
	font-size : 0.9em ;
	font-style : italic ;
	color : #404040 ;
}
	.side_navigation_menu_item::after {
		content : "" ;
		height : 100% ;
		width : 100% ;
		
		z-index : 2 ;
		position : absolute ;
		top : 0 ;
		left : 0 ;
		
		background : linear-gradient(rgba(16, 16, 16, 1) 0%, rgba(16, 16, 16, 0) 5%, rgba(16, 16, 16, 0) 95%, rgba(16, 16, 16, 1) 100%) ;
	}
	.side_navigation_menu_item.current .side_navigation_menu_item_background {
		filter : blur(0) ;
		opacity : 0.75 ;
	}
	.side_navigation_menu_item:hover .side_navigation_menu_item_background {
		filter : blur(0) ;
		opacity : 1 ;
	}

.side_navigation_menu_item_foreground {
	height : 100% ;
	width : 100% ;
	
	z-index : 1 ;
	
	display : flex ;
	flex-direction : row ;
	flex-wrap : nowrap ;
	justify-content : flex-start ;
	align-items : center ;
	
	background : rgba(0, 0, 0, 0.5) ;
	border-radius : inherit ;
	
	transition : background 0.1s ease ;
}
	.side_navigation_menu_item.current .side_navigation_menu_item_foreground {
		background : rgba(0, 0, 0, 0.25) ;
	}
	
	.side_navigation_menu_item:hover .side_navigation_menu_item_foreground {
		background : rgba(0, 0, 0, 0) ;
	}

.side_navigation_menu_item_icon_container {
	height : 40px ;
	width : 40px ;
	min-height : 40px ;
	min-width : 40px ;
	overflow : hidden ;
	
	margin-left : 15px ;
	
	display : flex ;
	justify-content : center ;
	align-items : center ;
	
	/*
	background : radial-gradient(red 5%, yellow 15%, green 60%) ;
	*/
	background : radial-gradient(white 50%, rgba(255, 255, 255, 0) 100%) ;
	border-radius : 50% ;
	
	transition : box-shadow 0.1s ease ;
}
	.side_navigation_menu_item:hover .side_navigation_menu_item_icon_container {
		box-shadow : 0 0 5px white ;
	}

.side_navigation_menu_item_icon {
	height : 60% ;
	width : auto ;
	
	/* alt style */
	font-size : 0.9em ;
	font-style : italic ;
	color : #404040 ;
}

.side_navigation_menu_item_title {
	margin-left : 10px ;
	padding : 3px 10px ;
	
	border-radius : 10px ;
	
	font-size : 1.3em ;
	text-transform : uppercase ;
	letter-spacing : 2px ;
	
	color : white ;
	
	white-space : nowrap ;
	overflow : hidden ;
	text-overflow : ellipsis ;
	
	transition : background 0.1s ease, text-shadow 0.1s ease ;
}
	.side_navigation_menu_item:hover .side_navigation_menu_item_title {
		background : rgb(0, 0, 0, 0.75) ;
		text-shadow : 0 0 3px white ;
		
		text-overflow : unset ;
	}
	.side_navigation_menu_item_title_first_letter {
		font-size : 1.2em ;
	}

.side_navigation_menu_opener {
	position : fixed ;
	top : var(--headerHeight) ;
	right : 0 ;
	height : calc(100% - var(--headerHeight)) ;
	/* Narrow enough to clear the back-to-top button (edge swipes still work) */
	width : 14px ;
	z-index : 10 ;
	
	background : transparent ;
}


/* ===== MAIN ===== */

/* Main */
main {
	position : relative ;
	z-index : 1 ;
	margin-top : var(--headerHeight) ;
	/* min-height : calc(100vh - var(--headerHeight)) ; */
	overflow : hidden ;
	
	display : flex ;
	flex-direction : column ;
	flex-wrap : nowrap ;
}

/* Background : image (static) & playground (dynamic) */
.background {
	width : 100% ;
	/* height : calc(100vh - var(--headerHeight)) ; */
	height : 100% ;
	overflow : hidden ;
	
	position : fixed ;
	/* top : var(--headerHeight) ; */
	top : 0 ;
	left : 0 ;
	right : 0 ;
	
	z-index : -1 ;
	
	user-select : none ;
}

.background_image,
.background_playground,
.background_canvas {
	width : 100% ;
	height : 100% ;
	
	position : absolute ;
	top : 0 ;
	left : 0 ;
	right : 0 ;
}

.background_image {
	object-fit : cover ;
}

.background_playground {
	display : flex ;
	flex-direction : row ;
	flex-wrap : nowrap ;
	justify-content : center ;
	align-items : center ;
}


/* ===== PAGE NAVIGATION ===== */

/* Page navigation menu */
.container_page_navigation {
	position : fixed ;
	width : var(--pageNavigationWidth) ;
	height : calc(100vh - var(--headerHeight)) ;
	overflow-x : hidden ;
	
	display : flex ;
	flex-direction : column ;
	flex-wrap : nowrap ;
	justify-content : center ;
	align-items : center ;
	
	background : rgba(32, 32, 32, 0.2) ;	/* #202020 */
	
	backdrop-filter : var(--backdropBlurFilter) ;
	
	opacity : 0.1 ;
	translate : calc(var(--pageNavigationWidth) * -1) 0px ;
	
	user-select : none ;
}
	.container_page_navigation.equilibrium {
		opacity : 1 ;
		translate : 0px 0px ;
		
		transition : opacity 1s ease-in-out, translate 1s ease-in-out ;
	}

.page_navigation_header {
	width : 100% ;
	height : var(--pageNavigationHeightMin) ;
	
	display : flex ;
	flex-direction : column ;
	flex-wrap : nowrap ;
	justify-content : flex-start ;
	align-items : center ;
	
	display : none ;
}

.page_navigation_bar {
	width : 44px ;
	height : 4px ;
	margin-top : 8px ;
	
	background : #6E6E78 ;
	border-radius : 2px ;
}

.page_navigation_title {
	margin : 5px 0 10px 0 ;
	overflow : hidden ;
	
	font-size : 1.2em ;
	font-weight : bold ;
	text-transform : uppercase ;
	letter-spacing : 1.5px ;
	color : #D9D9DE ;
	
	transition : color 0.1s ease, text-shadow 0.1s ease ;
}

.page_navigation_close {
	height : 25px ;
	width : 25px ;
	
	position : absolute ;
	top : 15px ;
	right : 15px ;
	
	display : flex ;
	flex-direction : column ;
	flex-wrap : nowrap ;
	justify-content : center ;
	align-items : center ;
	
	background : grey ;
	border-radius : 50% ;
	
	font-size : 0.9em ;
	font-weight : bold ;
	
	cursor : pointer ;
	
	opacity : 0 ;
	
	user-select : none ;
		
	pointer-events : none ;
	transform : translateY(20px) ;
	transition : opacity 0.2s linear, transform 0.2s linear, background 0.2s linear, color 0.2s linear ;
}
	/* Enlarged tap target (the visible button stays 25px) */
	.page_navigation_close::after {
		content : "" ;
		position : absolute ;
		inset : -10px ;
	}
	.page_navigation_close:hover {
		background : var(--backgroundWhite) ;
		color : var(--colorBlack) ;
	}

.page_navigation_main {
	width : 100% ;
	height : 100% ;
	
	display : flex ;
	flex-direction : column ;
	
	overflow : auto ;
}

.page_navigation_list {
	margin : 20px 10px ;
	
	text-align : left ;
}

.page_navigation_heading {
	--backgroundColorActive : 255, 235, 167 ;		/* #FFEBA7 */
	--colorHover : var(--colorAccent) ;
	--colorActive : #102770 ;
	--colorActiveHover : #000000 ;
	
	margin : 0 ;
	padding : 5px 10px ;
	width : 100% ;
	
	display : inline-block ;
	
	border-radius : 5px ;
	
	transition : background 0.1s ease, color 0.1s ease ;
}
	.page_navigation_heading:hover {
		color : var(--colorHover) ;
	}
	.page_navigation_heading.active {
		background : rgba(var(--backgroundColorActive), 0.9) ;
		color : var(--colorActive) ;
	}
		.page_navigation_heading.active:hover {
			background : rgba(var(--backgroundColorActive), 1) ;
			color : var(--colorActiveHover) ;
		}
	
.page_navigation_heading.l1 {
	font-weight : bold ;
	text-transform : uppercase ;
	letter-spacing : 0.5px ;
}
	.page_navigation_heading.l1:not(:first-of-type) {
		margin-top : 10px ;
	}

.page_navigation_heading.l2 {
	padding-left : 20px ;
	
	font-style : italic ;
}
.page_navigation_heading.l3 {
	padding-left : 40px ;
	
	font-size : 0.95em ;
}

/* Page content */
.container_page {
	--transitionDelay : 0.5s ;
	
	margin-left : 0px ;
	
	transition : margin-left 0s ease-in-out var(--transitionDelay) ;
}
	.container_page.equilibrium {
		margin-left : var(--pageNavigationWidth) ;
	}


/* ===== HERO ===== */

/* Hero */
.hero {
	--paddingVertical : 5% ;
	--paddingHorizontal : 7.5% ;
	
	min-height : calc(90vh - var(--headerHeight)) ;
	width : 100% ;
	overflow : hidden ;
	
	padding : var(--paddingVertical) var(--paddingHorizontal) ;
	
	display : flex ;
	flex-direction : column ;
	flex-wrap : nowrap ;
	justify-content : flex-start ;
	align-items : center ;
	
	/*
	background : rgba(0, 0, 0, 0.5) ;
	*/
	background : linear-gradient(rgba(32, 32, 32, 0.1) 0%, rgba(32, 32, 32, 0.1) 90%, rgba(224, 224, 224, 0) 100%) ;
	
	font-size : 1.25em ;
	
	user-select : none ;
	
	transition : scale 0.2s ease ;
}
.hero_header {
	--heroHeaderZoomMax : 1.5 ;
	
	position : relative ;
	height : 100px ;
	width : min(100%, 600px) ;
	margin : 30px auto ;
	overflow : hidden ;
	
	display : flex ;
	flex-direction : row ;
	flex-wrap : nowrap ;
	justify-content : center ;
	align-items : center ;
	
	font-size : 1.5em ;
	
	backdrop-filter : var(--backdropBlurFilter) ;
}

.hero_title {
	margin : 10px ;
	padding : 5px ;
}

.hero_description {
	--trueColor : var(--textColor) ;
	
	min-height : 250px ;
	max-height : 50% ;
	min-width : 400px ;
	max-width : 600px ;
	margin-top : 20px ;
	padding : 10px 50px ;
	overflow-y : auto ;
	
	display : flex ;
	flex-direction : column ;
	flex-wrap : nowrap ;
	justify-content : center ;
	align-items : center ;
	
	font-size : 1.2em ;
	line-height : 1.5em ;
	text-shadow : 0px 0px 10px ;
	
	opacity : 0 ;
}
	.hero_description.start {
		animation : heroDescriptionStartAnimation 1s ease forwards ;
	}
		@keyframes heroDescriptionStartAnimation {
			0% {
				
			}
			100% {
				opacity : 1 ;
				
				backdrop-filter : var(--backdropBlurFilter) ;
			}
		}
	.hero_description.equilibrium {
		animation : heroDescriptionEquilibriumAnimation 1s ease forwards ;
	}
		@keyframes heroDescriptionEquilibriumAnimation {
			0% {
				opacity : 1 ;
				
				backdrop-filter : var(--backdropBlurFilter) ;
			}
			75% {
				background : transparent ;
				
				backdrop-filter : unset ;
			}
			100% {
				background : transparent ;
				color : var(--trueColor) ;
				opacity : 1 ;
			}
		}

.hero_description p {
	display : flex ;
	flex-direction : row ;
	flex-wrap : wrap ;
	justify-content : center ;
	align-items : center ;
}

.hero_title_word,
.hero_description_word {
	display : flex ;
	flex-direction : row ;
	flex-wrap : nowrap ;
	justify-content : center ;
	align-items : center ;
}


/* ===== ARTICLE ===== */

/* Articles */
.articles_container {
	--gradientMargin : 10vh ;
	
	width : 100% ;
	padding-top : var(--gradientMargin) ;
	
	display : flex ;
	flex-direction : column ;
	flex-wrap : nowrap ;
	justify-content : center ;
	align-items : flex-start ;
	
	gap : 0vh ;
	
	background : linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.2) var(--gradientMargin)) ;
}

article {
	--paddingVertical : 5% ;
	--paddingHorizontal : 2.5% ;
	
	--textBackgroundColor : 64, 64, 64 ;
	
	min-height : calc(90vh - var(--headerHeight)) ;
	width : 100% ;
	padding : var(--paddingVertical) var(--paddingHorizontal) ;
	
	display : flex ;
	flex-direction : row ;
	flex-wrap : nowrap ;
	justify-content : center ;
	align-items : flex-start ;
	
	gap : 5% ;
	
	transition : background 0.2s ease ;
}
	article:hover {
		background : linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.05) 5% 95%, transparent) ;
	}

.article_preview {
	height : calc(100% - (2 * 10px)) ;
	max-height : 70vh ;
	min-width : 55% ;
	
	/* margin : 30px 1% 5px 1% ; */
	
	display : flex ;
    flex-direction : column ;
    flex-wrap : nowrap ;
    justify-content : center ;
    align-items : center ;
	
	user-select : none ;
}

.preview_with_background {
	position : relative ;
}
	.preview_with_background:before {
		content : " " ;
		position : absolute ;
		top : 50% ;
		left : 50% ;
		z-index : -1 ;
		
		height : 100% ;
		width : 100% ;
		
		background : linear-gradient(to bottom, rgba(var(--previewBackgroundColor1), 0.75), rgba(var(--previewBackgroundColor2), 0.75)) ;
		border-radius : 10px ;
		
		translate : -50% -50% ;
		rotate : 5deg ;
		
		transition : filter 0.2s ease, rotate 0.2s ease, scale 0.2s ease ;
	}
		.preview_with_background:hover:before {
			filter : brightness(1.25) ;
			rotate : 7deg ;
			scale : 1.02 ;
		}

.article_preview > iframe,
.article_preview > img,
.article_preview > video {
	height : auto ;
	max-height : inherit ;
	width : 100% ;
	
	background : black ;
	border : 1px solid var(--borderColor) ;
	border-radius : var(--radiusS) ;
	box-shadow : var(--shadowSoft) ;
	
	/* Reflection might be too much
	-webkit-box-reflect : below 10px linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)) ;
	*/
	
	transition : border 0.2s ease, box-shadow 0.2s ease ;
}
	.article_preview:hover > iframe,
	.article_preview:hover > img,
	.article_preview:hover > video {
		border-color : var(--borderStrong) ;
		box-shadow : var(--shadowSoft), 0 0 24px rgba(255, 255, 255, 0.35) ;
	}

.article_text {
	height : 100% ;
	min-width : 40% ;
	
	/* margin : 5px 1% ; */
	padding : 0 10px ;
	
	display : flex ;
	flex-direction : column ;
	flex-wrap : nowrap ;
	justify-content : flex-start ;
	align-items : center ;
	
	font-size : 1.1em ;
}

.article_title {
	margin : 10px ;
	padding : 5px ;
	
	background : radial-gradient(ellipse at center, rgba(var(--textBackgroundColor), 0.6) 25%, transparent 60%) ;
	
	font-size : 2.5em ;
	font-weight : bold ;
	letter-spacing : -0.5px ;
	line-height : 1.15 ;
	text-wrap : balance ;
	text-shadow : 0 0 5px ;
}

.article_chapter_number {
	margin-right : 25px ;
	font-size : 0.75em ;
	color : var(--colorMuted) ;
	
	user-select : none ;
}

.article_date {
	font-style : italic ;
	letter-spacing : 0.3px ;
	color : var(--colorMuted) ;
}

.article_description {
	margin-top : 20px ;
	margin-left : auto ;
	margin-right : auto ;
	max-width : 68ch ;		/* Comfortable reading measure (~68 characters per line) */
	overflow-y : auto ;
	max-height : 50% ;
	
	background : radial-gradient(ellipse at center, rgba(var(--textBackgroundColor), 0.6) 30%, transparent 70%) ;
	
	line-height : 2em ;
	text-align : left ;		/* Long paragraphs read better left-aligned (titles stay centered) */
}

article a:not(.article_button) {
	text-decoration : underline ;
	text-underline-offset : 3px ;
	text-decoration-color : var(--borderStrong) ;
	
	transition : color 0.15s ease, text-decoration-color 0.15s ease ;
}
	article a:not(.article_button):hover {
		color : var(--colorAccent) ;
		text-decoration-color : var(--colorAccent) ;
		text-shadow : 0 0 8px var(--colorAccentGlow) ;
	}

button:not(.lty-playbtn),
.article_button {
	margin : 0 20px ;
	padding : 10px 25px ;
	min-height : 44px ;		/* Recommended minimum touch target */
	
	display : flex ;
	flex-direction : row ;
	flex-wrap : nowrap ;
	justify-content : center ;
	align-items : center ;
	
	background : linear-gradient(180deg, #FFFFFF, #E4E4EA) ;
	border : 1px solid rgba(255, 255, 255, 0.55) ;
	border-radius : var(--radiusL) ;
	color : var(--colorBlack) ;
	
	box-shadow : 0 2px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.9) ;
	
	font-size : 1em ;
	font-weight : 600 ;
	letter-spacing : 0.2px ;
	font-family : inherit ;
	
	cursor : pointer ;
	
	user-select : none ;
	
	transition : box-shadow 0.1s ease, background 0.1s ease, transform 0.1s ease ;
}
	button:not(.lty-playbtn):hover,
	.article_button:hover {
		background : linear-gradient(180deg, #FFFFFF, #F2F2F6) ;
		box-shadow : 0 6px 18px rgba(0, 0, 0, 0.55), 0 0 12px var(--colorAccentGlow), inset 0 1px 0 rgba(255, 255, 255, 0.9) ;
		transform : translateY(-1px) ;
	}
	button:not(.lty-playbtn):active,
	.article_button:active {
		box-shadow : 0 1px 4px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.9) ;
		transform : translateY(1px) ;
	}

/* Headings : the anchors land below the fixed header, with some breathing room */
.big_anchor {
	scroll-margin-top : calc(var(--headerHeight) + 40px) ;
}
/* The cards themselves are the anchors : one uniform landing gap for all */
article[id] {
	scroll-margin-top : calc(var(--headerHeight) + 24px) ;
}
.anchor {
	scroll-margin-top : calc(var(--headerHeight) + 20px) ;
}


/* ===== DIALOG ===== */

/* Dialogs */
body.dialog_opened {
	overflow : hidden ;
}

dialog {
	min-height : 400px ;
	max-height : 85% ;
	min-width : 600px ;
	max-width : 80% ;
	
	/* Find a way for the height and width to be responsive of the content AND for the dialog_main to adapt to its parent's height (even without defining it) */
	height : 90% ;
	width : 90% ;
	
	overflow : hidden ;
	
	padding : 0 ;
	
	border : 1px solid var(--borderStrong) ;
	border-radius : var(--radiusM) ;
	outline : none ;
	
	box-shadow : var(--shadowElevated), 0 0 0 1px rgba(255, 255, 255, 0.05) ;
}
	dialog::backdrop {
		background : rgba(0, 0, 0, 0.75) ;
		backdrop-filter : var(--backdropBlurFilter) ;	/* Not working */
	}

.dialog {
	height : 100% ;
	width : 100% ;
	overflow : auto ;
	
	display : flex ;
	flex-direction : column ;
	flex-wrap : nowrap ;
	justify-content : flex-start ;
	align-items : center ;
}

.dialog_header {
	height : 70px ;
	width : 100% ;
	
	display : flex ;
	flex-direction : row ;
	flex-wrap : nowrap ;
	justify-content : space-between ;
	align-items : center ;
	
	background : linear-gradient(45deg, var(--backgroundColor), var(--surface3) 60%, transparent) ;
	border-bottom : 1px solid var(--borderColor) ;
	
    color : var(--textColor) ;
}

.dialog_title {
	height : 100% ;
	max-width: calc(100% - 30px - (20px * 2) - 35px) ;
	margin-left : 30px ;
	padding : 10px 0 ;
	overflow-x : hidden ;
	overflow-y : auto ;
	
	display : flex ;
	flex-direction : row ;
	flex-wrap : nowrap ;
	justify-content : flex-start ;
	align-items : flex-start ;	/* If multiple lines */
	align-items : center ;		/* If one line only */
	
	text-align : left ;
	font-size : 1.75em ;
	font-weight : bold ;
	
	letter-spacing : 0.5px ;
	text-shadow : 2px 2px 5px grey ;
}

.dialog_close {
	height : 35px ;
	width : 35px ;
	
	margin-right : 20px ;
	padding : 10px ;
	overflow : hidden ;
	
	display : flex ;
	flex-direction : row ;
	flex-wrap : nowrap ;
	justify-content : center ;
	align-items : center ;
	
	background : var(--surface2) ;
	border : 1px solid var(--borderColor) ;
	border-radius : 50% ;
	
	color : var(--textColor) ;
	font-weight : bold ;
	
	cursor : pointer ;
	
	user-select : none ;
	
	transition : background 0.1s ease, box-shadow 0.1s ease, color 0.1s ease, transform 0.1s ease ;
}
	.dialog_close:hover {
		background : white ; 
		color : black ;
	}
	.dialog_close:active {
		background : var(--textColor) ;
		color : var(--backgroundColor) ;
		box-shadow : 0 0 5px grey ;
		
		transform : translate(1px, 2px) ;
	}

.dialog_main {
	height : 100% ;
	/* height : -webkit-fill-available ; */
	width : 100% ;
	
	padding : 10px 20px ;
	overflow-x : hidden ;
	overflow-y : auto ;
	
	display : flex ;
    flex-direction : column ;
    flex-wrap : nowrap ;
    justify-content : flex-start ;
    align-items : center ;
	
	text-align : left ;
	font-size : 0.95em ;
}

.dialog_h1 {
	margin-top : 10px ;
	margin-left : 20px ;
	
	font-size : 1.1em ;
	font-weight : bold ;
}

/* Slider - Hide some elements by default, when not on small screens (mobile) */
.slider_menu {
	display : none ;
}

section:not(:last-child) footer {
	display : none ;
}

/* Collapsible */
.collapsible {
	cursor : pointer ;
}

.collapsible:after {
	content : "\2212" ;
	
	height : 20px ;
	width : 20px ;
	padding : 5px ;
	position : absolute ;
	right : calc(25% + 10px) ;
	z-index : 2 ;
	
	display : flex ;
	justify-content : center ;
	align-items : center ;
	float : right ;
	
	background : var(--backgroundColor) ;
	border : 2px solid grey ;
	border-radius : 50% ;
	
	font-size : 1.25em ;
}
	.collapsible:hover:after {
		border : 2px solid var(--textColor) ;
		text-shadow : 0 0 10px var(--textColor) ;
		box-shadow : 0 0 10px var(--textColor) ;
	}

.h4.collapsible:after,
.h5.collapsible:after {
	height : 15px ;
	width : 15px ;
	position : static ;
	margin-left : 50px ;
	
	font-size : 1.1em ;
}
.h5.collapsible:after {
	height : 12px ;
	width : 12px ;
	font-size : 1.05em ;
}
	.h4.collapsible:hover:after,
	.h5.collapsible:hover:after {
		border : 2px solid var(--textColor) ;
		text-shadow : 0 0 4px var(--textColor) ;
		box-shadow : 0 0 4px var(--textColor) ;
	}

.collapsible.collapsed:after {
	content : "\002B" ;
}


/* ===== FOOTER ===== */

/* Footer */
footer {
	position : relative ;
	
	padding : 50px 16px calc(12px + env(safe-area-inset-bottom, 0px)) 16px ;
	width : 100% ;
	z-index : 1 ;
	
	background : linear-gradient(rgba(16, 16, 16, 0.05) 0%, rgba(16, 16, 16, 0.75) 5%, rgba(16, 16, 16, 1) 100%) ;
	
	backdrop-filter : var(--backdropBlurFilter) ;
}

.social_networks {
	display : flex ;
	flex-direction : row ;
	flex-wrap : wrap ;
	justify-content : center ;
	align-items : center ;
	align-content : flex-start ;
}

.social_networks .username {
	margin : 5px 30px 5px 10px ;
	
	font-size : 0.9em ;
}

.social_networks a {
	margin : 4px 9px ;
	padding : 6px ;		/* 36px icon + padding = 48px touch target */
	display : flex ;
	
	user-select : none ;
}

.social_networks img {
	width : 36px ;
	height : 36px ;
	
	filter : grayscale(1) ;
	opacity : 0.85 ;

	transition : filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease ;
}
	.social_networks a:hover img {
		filter : grayscale(0) ;
		opacity : 1 ;
		transform : translateY(-2px) ;
	}

/* The X icon is pure white while the others are brand-colored : grayscale(1)
   leaves it white when the rest turns mid-grey. The brightness compensation
   puts it in the same passive family ; hover restores the full white. */
.social_networks a[href*="x.com"] img {
	filter : grayscale(1) brightness(0.55) ;
}
.social_networks a[href*="x.com"]:hover img {
	filter : grayscale(0) brightness(1) ;
}

.copyright {
	margin : 20px auto 10px auto ;
	padding : 5px ;

	display : flex ;
	text-align : center ;
	justify-content : center ;
	align-items : center ;
	vertical-align : middle ;

	font-size : 0.8em ;
	letter-spacing : 0.3px ;
	color : var(--colorMuted) ;
	
	user-select : none ;
}

/* Accessibility : disable decorative animations and transitions for users who prefer reduced motion */
/* The JavaScript scheduling still relies on the CSS time variables, which are left untouched */
@media (prefers-reduced-motion : reduce) {
	*,
	*::before,
	*::after {
		animation-duration : 0.01ms !important ;
		animation-iteration-count : 1 !important ;
		transition-duration : 0.01ms !important ;
		scroll-behavior : auto !important ;
	}
}


/* ===== DIALOGS : modern surface ===== */

/* The dialog receives the focus programmatically when it opens (for the [Escape]
   shortcut) : the global :focus-visible outline must not appear around it */
dialog:focus,
dialog:focus-visible {
	outline : none ;
}

dialog {
	min-height : 0 ;
	min-width : 0 ;
	height : min(88dvh, 900px) ;
	width : min(760px, 94vw) ;
	max-height : none ;
	max-width : none ;
	
	background : var(--surface2) ;
	color : var(--textColor) ;
	border : 1px solid var(--borderColor) ;
	border-radius : 16px ;
	box-shadow : 0 24px 64px rgba(0, 0, 0, 0.6) ;
}

dialog::backdrop {
	background : rgba(0, 0, 0, 0.55) ;
	backdrop-filter : blur(3px) ;
}

.dialog {
	height : 100% ;
	width : 100% ;
	
	display : flex ;
	flex-direction : column ;
	overflow : hidden ;
}

.dialog_header {
	height : auto ;
	min-height : 56px ;
	flex : none ;
	padding : 6px 10px 6px 20px ;
	
	align-items : center ;
	
	border-bottom : 1px solid var(--borderSubtle) ;
}

.dialog_title {
	height : auto ;
	margin-left : 0 ;
	padding : 0 ;
}

.dialog_main {
	flex : 1 ;
	min-height : 0 ;
	height : auto ;
	padding : 16px 20px calc(16px + env(safe-area-inset-bottom, 0px)) 20px ;
	overflow : auto ;
	
	display : flex ;
	flex-direction : column ;
}


/* ===== DIALOGS : light surface (design preference) ===== */

dialog {
	background : #F4F4F6 ;
	color : #17171A ;
	border : 1px solid rgba(0, 0, 0, 0.14) ;
	height : min(82dvh, 820px) ;
	width : min(680px, 92vw) ;
}

.dialog_header {
	min-height : 48px ;
	padding : 4px 8px 4px 16px ;
	border-bottom : 1px solid rgba(0, 0, 0, 0.1) ;
}

.dialog_title {
	overflow : visible ;	/* No scrollbar on a one-line title */
	color : inherit ;
}

.dialog_close {
	color : #17171A ;
}

.dialog_main {
	padding : 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) 16px ;
}

/* The header title follows the side-menu drag without its transition */
.container_title.dragging {
	transition : none ;
}


/* ===== ARTICLES : editorial cards (information first) =====
   The decorative backgrounds recede, and each article sits on a quiet,
   consistent surface : the information is readable at a glance, the articles
   take their natural height, and the layout direction stays constant
   (no left / right alternation) for a predictable scanning pattern. */

.background_image,
.background_canvas,
.background_playground {
	filter : brightness(0.72) ;
}

article {
	min-height : 0 ;
	width : min(1060px, 94%) ;
	margin : 36px auto ;
	padding : 30px clamp(20px, 4vw, 46px) ;
	
	background : rgba(22, 22, 27, 0.92) ;
	-webkit-backdrop-filter : blur(14px) ;
	backdrop-filter : blur(14px) ;
	border : 1px solid var(--borderStrong) ;
	border-radius : 20px ;
	box-shadow : 0 18px 48px rgba(0, 0, 0, 0.42) ;
	
	align-items : center ;
	gap : clamp(20px, 3vw, 40px) ;
}

/* The card surface provides the contrast : the halo behind the titles goes */
.article_title {
	background : none ;
}

/* Articles take their natural height : no more inner scrolling */
.article_description {
	max-height : none ;
	overflow : visible ;
	color : #DEDEE3 ;
}


/* ===== DIALOGS : refinements ===== */

.dialog_title {
	font-size : 1.05em ;
	font-weight : 600 ;
}

/* The legacy close kept a dark background on the light surface */
.dialog_close {
	width : auto ;
	height : auto ;
	margin-right : 6px ;
	padding : 8px 12px ;
	display : flex ;
	align-items : center ;
	justify-content : center ;
	border-radius : 8px ;
	background : none ;
	color : rgba(0, 0, 0, 0.55) ;
	font-size : 1.05em ;
	line-height : 1 ;
}
.dialog_close:hover {
	background : rgba(0, 0, 0, 0.05) ;
	color : #17171A ;
}

/* ===== DENSITY : tighter articles ===== */

article {
	margin : 22px auto ;
	width : min(900px, 92%) ;
	padding : 20px clamp(16px, 2.5vw, 32px) ;
	gap : clamp(14px, 2vw, 26px) ;
}

/* Flex children may not shrink below their content : long strings (research
   author lists) were overflowing the card */
article > * {
	min-width : 0 ;
}
.article_description,
.research_articles {
	overflow-wrap : break-word ;
}

.article_title {
	font-size : 1.5em ;
}

.article_preview {
	max-width : min(460px, 100%) ;
}

/* ===== HERO DESCRIPTIONS : quiet lede card ===== */

.hero_description {
	min-height : 0 ;
	max-height : none ;
	overflow : visible ;
	max-width : min(56ch, 92vw) ;
	padding : 26px 34px ;
	
	background : rgba(20, 20, 24, 0.55) ;
	-webkit-backdrop-filter : blur(10px) ;
	backdrop-filter : blur(10px) ;
	border : 1px solid var(--borderSubtle) ;
	border-radius : 14px ;
	
	text-shadow : none ;
	font-size : 1.05em ;
	line-height : 1.65 ;
}


/* ===== TITLE ROW : the article action lives beside the title ===== */

.article_title_row {
	width : 100% ;
	
	display : flex ;
	flex-direction : row ;
	/* nowrap : in a wrapping container, items wrap before they shrink - here the
	   title must shrink (and wrap its own text) so the action stays beside it */
	flex-wrap : nowrap ;
	justify-content : center ;
	align-items : center ;
	gap : 0 4px ;
}

.article_title_row .article_title {
	width : auto ;
	max-width : 100% ;
	margin : 10px 0 ;		/* The action hugs the title */
	flex : 0 1 auto ;
	min-width : 0 ;		/* Long titles wrap their text, the action stays beside them */
}

/* Icon-only action : the label stays in the markup for assistive technologies
   (font-size 0 hides it visually), a circled arrow marks the link */
.article_title_row .article_button {
	margin : 0 ;
	padding : 0 ;
	white-space : nowrap ;
	width : 30px ;
	height : 30px ;
	min-height : 0 ;
	background : none ;
	border : none ;
	box-shadow : none ;
	color : var(--colorAccent) ;
	font-size : 0 ;
}
.article_title_row .article_button:hover {
	background : none ;
	box-shadow : none ;
	transform : none ;
	text-decoration : underline ;
	color : var(--colorAccent) ;
}
.article_title_row .article_button::after {
	content : "\2197" ;
	font-size : 1.15rem ;
	line-height : 1 ;
}
.article_title_row .article_button:hover {
	translate : 1px -1px ;
	text-decoration : none ;
}


/* ===== CARDS v2 : explicit column floors and a compact date chip ===== */

/* The generic "min-width : 0" (needed so long texts wrap) removed the preview
   column implicit floor : on narrower screens the flex row crushed it to zero
   (the research book vanished). Text shrinks, the preview keeps its size. */
article > .article_text {
	flex : 1 1 0 ;
	min-width : 0 ;
}
article > .article_preview {
	flex : 0 1 auto ;
	min-width : min(300px, 42%) ;
}

/* The date is an editorial kicker above the title : minimal space, never covered.
   In the markup the date FOLLOWS the title : the column flex order lifts it. */
article .article_text {
	display : flex ;
	flex-direction : column ;
}
article .article_date {
	order : -1 ;
	position : static ;
	margin : 0 0 2px 0 ;
	padding : 0 ;
	font-size : 0.75em ;
	letter-spacing : 0.14em ;
	text-transform : uppercase ;
	opacity : 0.7 ;
}


/* ===== HOMOGENEOUS ILLUSTRATION COLUMN ===== */

/* Every article reserves the same visual room for its illustration, and the
   common media types fill it */
article > .article_preview {
	flex : 0 0 min(430px, 46%) ;
	min-height : 390px ;
	display : flex ;
	flex-direction : column ;
	justify-content : center ;
	align-items : center ;
}
.article_preview > img {
	width : 100% ;
	height : auto ;
}
.article_preview > iframe,
.article_preview > video {
	width : 100% ;
	height : 390px ;
	border : none ;
}

/* ===== HERO DESCRIPTIONS : one voice on every page =====
   (main .hero .hero_description outranks the per-page ".page .hero_description"
   rules, whatever their order : the tints stay, the metrics unify) */
main .hero .hero_description {
	font-size : 1.05em ;
	line-height : 1.65 ;
	padding : 28px 38px ;
	min-height : 140px ;
	min-width : min(38ch, 90vw) ;
}


/* Optical compensation : the page typefaces render at different apparent sizes */
main.radiology .hero_description {
	font-size : 0.85em ;
}
main.programming .hero_description {
	font-size : 0.95em ;
}
main.music .hero_description {
	font-size : 1.22em ;
}

/* Header lettering : Radiology wrote a touch too large, Music a touch too small */
main.radiology .hero_title {
	zoom : 0.92 ;
}
main.music .hero_title {
	zoom : 1.12 ;
}

/*===== BACKGROUND PARALLAX =====*/

/* Subtle drift of the fixed background while the page scrolls
Progressive enhancement : browsers without scroll-driven animations keep the static background
On Music, the window scrolls too, except in the small-screen slider mode (<= 480px),
where the sections scroll instead : there, sl_d.js mirrors the effect */
@media (prefers-reduced-motion : no-preference) {
	@supports (animation-timeline : scroll(root)) {
		.programming .background,
		.radiology .background,
		.music .background {
			animation : background_parallax linear both ;
			animation-timeline : scroll(root) ;
		}
	}
}

/* The slight permanent scale hides the edge revealed by the upward drift */
@keyframes background_parallax {
	from {
		transform : scale(1.06) translateY(0) ;
	}
	to {
		transform : scale(1.06) translateY(-3%) ;
	}
}