/*
	Helena Biosciences
	Core styles
	
	v0.02.02
	
	0.00.xx	:	Initial development versions
	0.01.xx	:	Near final layout and styling kit.
	0.02.xx	:	Now refining design and styling. Redundant items being removed.
*/

/*
	KEY USAGE NOTES
	---------------
	
	main > section elements adopt the standard page column design (with specific margins), unless overridden through the use of the .full-width class.
	
	<section>, and <nav class="primary"> are each defined as a full width element, with display: grid.

	All direct descendants of <section> (typically sub containers or headings) by default adopt the centre grid column, with columns 1 and 3 representing the page margins:
	
	+--------+----------------+--------+
	| gutter |     column     | gutter |
	+--------+----------------+--------+
	
	All direct descendants with .full-width will instead span all three columns.
	Internal layout is then up to them, with --content-preferred-width as an aid.
	The .context class is also available for internal alignment ().
	
	Device sizes
	------------
	Usual effects apply. Note the following two classes (usable on any element):
	
		.optionalbelow800
		.optionalbelow600
	
	These elements will gain display: none below the specified viewport width.
	
	
	Terminology
	-----------
	
	.open		An element is open and this impacts the whole experience (e.g. a navigation menu, modal or dialogue)
	.selected	An element which is selected but has no impact outside of its container, such as a menu item, an expanded summary or other UI item
	
	
	Slideshow design
	----------------
	For marketing and training slideshows, a .slide standard HTML structure which caters for mobile and desktop layouts:
	

	.slide:											.slide:
	+----------+-------------------------+			+----------+
	|          |                         |			|          |
	|  header  |                         |			|  header  |
	|          |                         |			|          |
	+----------+	                     |			+----------+
	|          |                         |			|          |
	|          |         gallery         |			|          |
	|          |                         |			| gallery  |
	|   text   |                         |			|          |
	|          |                         |			|          |
	|          |                         |			+----------+
	|          |                         |			|          |
	+----------+-------------------------+			|          |
													|          |
													|   text   |
													|          |
													|          |
													|          |
													|          |
													+----------+
	
	Multiple of these structures can be used to form a slideshow, and within each, multiple .slideshow > .slide elements can in turn form a sequence.
	
*/

*, *::before, *::after {
	box-sizing: border-box;
}

/* legacy/default path */
/* 
@font-face {
	font-family: "Archivo";
	src: url("/fonts/archivo/archivo-variablefont_wdthwght.woff2") format("woff2"), url("/fonts/archivo/archivo-variablefont_wdthwght.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Archivo";
	src: url("/fonts/helena-bold.woff2") format("woff2"), url("/fonts/helena-bold.woff") format("woff");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
 */

/* enhanced path */
@supports (font-variation-settings: normal) {
	@font-face {
		font-family: "LeagueSpartan";
		src: url("../fonts/LeagueSpartan-VF.woff2") format("woff2");
		font-weight: 100 900;
		font-style: normal;
		font-display: swap;
	}
}


:root {
	/* Our main look is a slightly off-white colour scheme, with lighter and dark variants. Modified by Dark Mode as necessary. */

	color-scheme: light dark;
	
	/* Watch out to not overwrite variable names, if you/I extend this list */
	
	/* Backgrounds */
	--rgb-bg-primary: 254,253,255;		/* Background */
	--rgb-bg-secondary: 251,247,255;	/* Lower-contrast */
	--rgb-bg-tertiary: 31,31,31;		/* For use over dark backgrounds, or for particular emphasis */
	--rgb-bg-grey: 191,191,191;			/* Mid */
	--rgb-glass: 15,15,15;				/* Specifically for hoverable glass elements, in the hovered state */
	--rgb-clean: 255,255,255;
	--rgb-bg-theme-highlight: 127,191,239;
    --rgb-contrast: 0,0,0;              /* Maximum contrast against the primary background */
	
	--bg-clean: rgb(var(--rgb-clean));
	--bg-primary: rgb(var(--rgb-bg-primary));
	--bg-secondary: rgb(var(--rgb-bg-secondary));
	--bg-tertiary: rgb(var(--rgb-bg-tertiary));	/* For use over dark backgrounds, or for particular emphasis */
	--bg-grey: rgb(var(--rgb-bg-grey));
    --bg-theme-highlight: rgb(var(--rgb-bg-theme-highlight));
	
	/* Foregrounds */
	--rgb-strong: 0,0,0;
	--rgb-fg-primary: 47,47,47;
	--rgb-fg-primary-soft: 71,71,71;	/* For primary reading text, ie main paragraphs */
	--rgb-fg-secondary: 63,63,63;		/* More prominent items such as headings */
	--rgb-fg-tertiary: 15,15,15;			/* Supplementary or optional content */
	--rgb-light: 247,247,247;
	--rgb-dark: 47,47,47;
	--rgb-theme-text: 63,95,159;
	--rgb-theme-element: 127,31,223;

	--fg-strong: rgb(var(--rgb-strong));
	--fg-primary: rgb(var(--rgb-fg-primary));
	--fg-primary-soft: rgb(var(--rgb-fg-primary-soft));	/* For primary reading text, ie paragraphs */
	--fg-secondary: rgb(var(--rgb-fg-secondary));
	--fg-tertiary: rgba(var(--rgb-fg-tertiary),0.65);
	--fg-light: rgba(var(--rgb-light),0.95);
	--fg-dark: rgba(var(--rgb-dark),0.95);
	--fg-theme-text: rgb(var(--rgb-theme-text));
	--fg-theme-element: rgb(var(--rgb-theme-element));
	
	/* Dimensions and misc */
	--bg-glass-blur: blur(15px);
	--bg-glass-thin-blur: blur(3px);
	--touch-diameter: 48px;
	--global-spacing: 25px;
	--global-compact-spacing: 15px;
	--global-tiny-spacing: 8px;
	--card-preferred-width: 350px;
	--card-min-width: calc(var(--card-preferred-width) * 0.85);
    --content-preferred-width: min(1200px, 90%);
	--content-min-width: 350px;
	--content-preferred-margin: max(16px,calc(100% - var(--content-preferred-width))/2);
	--thumbnail-compact-size: 8rem;
}

html, body {
	margin: 0;
	padding: 0;
	font-family: "LeagueSpartan", Arial, sans-serif;
	font-weight: 450;
	line-height: 1.50em;
	color-scheme: light dark;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-color: var(--bg-primary);
	color: var(--fg-primary, #2f2d2d);
	min-height: 100vh;
}
html {
	font-size: 100%;
	scroll-behavior: smooth;
}
body {
    /* Re-enable this when we have a NAV
	padding-top: var(--touch-diameter); */
}
body.modal-open {
	overflow: hidden;
}
body.home {
	padding-top: 0;
}

section > h2[id] {
	scroll-margin-top: calc( var(--touch-diameter) + var(--global-spacing) );
}

section, nav.primary > .inner {
	/* 	This defines the general margins for the whole page */
	display: grid;
	grid-template-columns: 1fr min( var(--content-preferred-width), 100% ) 1fr;
}
section > * {
	grid-column: 2;	/* Centre */
}
section > .full-width, .picker {
	/* Use the margins too */
	grid-column: 1 / -1;
}

section {
	padding-top: var(--global-spacing);
	padding-bottom: var(--global-spacing);
}
section.has-nav {
	/* Pull any nav closer to the content */
/* 	padding-bottom: 0; */
}
nav + section {
	margin-top: var(--global-spacing);
}

/* 
main > section,
body > footer,
main > h1,
main > h2,
.layout-default {
	width: 100%;
	max-width: var(--content-preferred-width);
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0em;
}
 */

section.secondary {
	background-color: var(--bg-secondary);
}

/* 
section.full-width {
	width: 100%;
	max-width: 100%;
	margin: 0;
}
 */

section.full-height {	/* Full screen */
	height: 100vh;
}

/* 10. Containers */

.hero {
	/* "full-screen" sized block, with larger type sizes */
	position: relative;
	width: 100vw;
	max-width: 100vw;
	/* min-height: 75svh; */
    /* max-height: 100svh; */
	/* height: 100vh; */
	/*overflow: hidden;*/
    min-height: clamp(26rem, 55svh, 40rem);
}

.hero.video {
	aspect-ratio: 2 / 1;
}

/* 
.video .channels {
	position: absolute;
	left: 50%;
	bottom: 2rem;
	translate: -50% 0;
	z-index: 2;
	display: flex;
	gap: 0.75rem;
	align-items: center;
	justify-content: center;
}
.video .channel {
	width: 3rem;
	height: 3rem;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,0.55);
	background: rgba(0,0,0,0.35);
	color: #fff;
	font: 600 1rem/1 system-ui, sans-serif;
	cursor: pointer;
	backdrop-filter: blur(6px);
	transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}
.channel:hover { transform: translateY(-2px); }
.channel.selected {
	background: rgba(255,255,255,0.2);
	border-color: rgba(255,255,255,0.85);
}
 */


/*
	Context
	-------
	Re-establishes the page column within a full-width parent.
	Provides a layout space in which block children can be spatially aligned (left-to-right, vertically).
	The .context class is generalised for multiple types of use, whereas the .slide class also makes use of most of the layout options.
	See Slideshows for more information.
	
	Structure:
	
		.context				A single container block. Width is 100% but height must be either implicitly or explicitly defined.
								Additional classes may be used to specify the horizontal alignment of .foreground elements.
								
			.background			One or more subcontainers for images or video which will fill the parent. Multiples would stack on top of each other.
			
			.foreground			One or more elements which can be aligned within the horizontal scheme adopted by .context.
								Further classes are available to vertically align each element.
								.foreground can also be used within .slide elements
*/


.context {
	display: grid;
	width: 100%;
	/*max-width: var(--content-preferred-width);
	margin: 0 auto;*/
}
.context.right, .slide.right {	/* .foreground elements will be positioned to the right */
	display: flex;
	justify-content: flex-end;
}
.context.left, .slide.left {
	display: flex;
	justify-content: flex-start;
}
.context.justify, .slide.justify {		/* Expect at least two .foreground children, which will fill the available space */
	display: flex;
	justify-content: space-between;
	column-gap: var(--global-spacing);
}
.background {
	/* A container for video, image or other content to fill, as a pseudo-background -- CANNOT BE USED TO SIZE THE PARENT CONTAINER */
	grid-column: 1 / -1;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
    overflow: hidden;
	z-index: 0;
}
.slide .background {
	border-radius: var(--global-spacing);
	overflow: hidden;
}
.background img,
.background picture img,
.background svg,
.background video {
	display: block;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
    max-width: none;
    max-height: none;
	object-fit: cover;
	object-position: center;
}
.foreground {
	/* A foreground section of content, probably in a larger container or context -- defaults to a set maximum width */
	position: relative;
	max-width: calc( var(--card-preferred-width) * 1.5 );
	max-width: 50%;
	padding: 0;
	margin: 0;
	z-index: 1;
}
.slide .foreground {
	max-width: 50%;
	padding: var(--global-spacing);
}

.foreground.middle {
	/* Vertically centred */
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.foreground.bottom {
	display: flex;
	flex-direction: column;
	justify-content: end;
}



/* 4. Typography */
h1, h2, h3, h4, h5, h6, p, ul, ol, dl {
	margin: 0 0 0.5rem 0;
}
h1, h2 {
	margin-top: 1rem;
	line-height: 0.9em;
}

h1 {
	margin-bottom: 1.25rem;
	font-size: 4.0rem;
	font-weight: 600;
	letter-spacing: -0.04em;
	color: var(--fg-primary-soft);
}
h2 {
	margin-bottom: 1.5rem;
	font-size: 2.5rem;
	font-weight: 600;
	letter-spacing: -0.025em;
	color: var(--fg-primary-soft);
}
h3 {
	margin-bottom: 1.5rem;
	font-size: 1.25rem;
	font-weight: 550;
	line-height: 1.1em;
	letter-spacing: -0.015em;
}
h4 {
	font-size: 1.25em;
	font-weight: 550;
}
h5, h6 {
	font-size: 1.25em;
	font-weight: 550;
}
p, caption, legend, td, th, ul, ol, dl, label {
	margin-bottom: 1rem;
	font-size: 1.25em;
	letter-spacing: -0.02em;
	color: var(--fg-primary-soft);
}
p:last-child, li:last-child, caption:last-child, legend:last-child, ul:last-child, ol:last-child, dl:last-child {
	margin-bottom: 0;
}
section > p,
section > caption,
section > legend,
section > ul,
section > ol,
section > dl {
	max-width: 75ch;
}

/* Text alignment */
.text-left {
	text-align: left;
}
.text-centre {
	text-align: center;
}
.text-right {
	text-align: right;
}

.hero h1 { font-size: 4.5rem; }
.hero h2 { font-size: 2.5rem; }
.hero h3 { font-size: 1.5rem; }
.hero p, .hero ul, .hero ol, .hero dl {
	font-size: 1.75rem;
    line-height: 1.15em;
	margin-bottom: 1.25rem;
	max-width: 75ch;
}
.hero p {
    font-weight: 500;
}


.dark, .dark * {
	color: var(--fg-light);
}
.light, .light * {
	color: var(--fg-dark);
}

.dark p, .dark ul, .dark ol {
	opacity: 0.9;
}

ul, ol {
/* 
	list-style: none;
	padding-left: 0;
	margin: 1em 0;
 */
}

a {
	color: inherit;
	text-decoration: underline;
	transition: color 0.1s;
	cursor: pointer;
}
/*
a:focus, a:hover {
	text-decoration: none;
	outline: 2px solid #0070f3;
	outline-offset: 2px;
}*/


/* 7. Image and media responsive */
img, picture, video, canvas, svg {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}

/* 8. Forms */

form {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--global-spacing);
}
label {
	width: 100%;
    font-weight: bold;
	color: var(--fg-primary-soft);
}
button, input, select, textarea {
	width: 100%;
	font: inherit;
	border: 1px solid var(--fg-theme-element);
	border-radius: var(--global-compact-spacing);
	padding: var(--global-compact-spacing);
	outline: none;
}
button, input, select, textarea {
	background: var(--bg-clean);
}
button {
	cursor: pointer;
	background-color: rgba(var(--rgb-bg-theme-highlight), 0.5);
	border: 1px solid rgba(var(--rgb-bg-theme-highlight), 0.75);
}
button:hover {
	background-color: rgba(var(--rgb-bg-theme-highlight), 0.6);
}
button:active {
	background-color: rgba(var(--rgb-bg-theme-highlight), 0.75);
}
form .wide {
	grid-column: span 2;
}
form label {
	margin: 0;
}


/* 9. Tables */
table {
	width: 100%;
	margin: var(--global-spacing) 0;
	border-collapse: collapse;
}

th, td {
	padding: 0.5em 0.5em 0.5em 0;
	border-bottom: 1px solid #ddd;
}
th {
	text-align: left;
	color: var(--fg-tertiary);
}

.media-container {
    /* Generic container for displaying images, video or any content */
    overflow: hidden;
    border-radius: var(--global-spacing);
}

 
/* Navigation menus */
nav.primary {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: var(--touch-diameter);
	overflow: visible;
	z-index: 10;
	--nav-primary-submenus-height: 320px;
	--nav-primary-submenu-item-height: var(--touch-diameter);
}
.home nav.primary {
	position: sticky;
	left: auto;
	right: auto;
}

nav.primary .inner {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var(--touch-diameter);
	overflow: hidden;
	border-bottom: 1px solid rgba(127,127,127,0);
	background-color: rgba(var(--rgb-bg-primary), 0.5);
	backdrop-filter: var(--bg-glass-blur);
	transition: height 0.2s ease 0.3s, background-color 0.3s ease 0.3s, border-bottom-color 0.3s ease 0.3s; /* closing delay */
}
nav.primary:hover .inner {
/* 	background-color: rgba( var(--rgb-bg-primary), 0.75); */
/* 	transition: background-color 0.3s, height 0.3s ease; */
}
nav.primary:focus-within .inner,
nav.primary.open .inner {
	height: calc(var(--touch-diameter) + var(--nav-primary-submenus-height));
	border-bottom: 1px solid rgba(127,127,127,0.25);
}

nav.primary ul {
	list-style: none;
	padding-left: 0;
	margin: 1em 0;
}
nav.primary li {
	margin: 0;
}

nav.primary a,
nav.primary button {
	display: flex;
	align-items: center;
	height: var(--touch-diameter);
	margin: 0;
	border: 0 none;
	padding: 0;
	text-decoration: none;
	color: var(--fg-theme-text);
}
nav.primary a:hover,
nav.primary button:hover {
	color: var(--fg-strong);
}
nav.primary a:active,
nav.primary button:active {
	color: var(--fg-strong);
}
nav.primary li.selected a,
nav.primary li.selected button {
	color: var(--fg-strong);
	cursor: default;
}

nav.primary .categories {
	grid-column: 2;
	display: flex;
	align-items: flex-start;
	gap: var(--touch-diameter);
	width: 100%;
	margin: 0;
	padding: 0;
	position: relative;
}
nav.primary .categories:after {
	content: "";
	position: absolute;
	top: var(--touch-diameter);
	width: 100%;
	height: 0;
	border-bottom: 1px solid rgba(127,127,127,0.25);
}
nav.primary .category {
	position: relative;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	font-weight: 550;
}
nav.primary .category > a{
	font-size: 1.1rem;
}
nav.primary .category > a::after{
	content: "";
	position: absolute;
	top: var(--touch-diameter);
	width: 100%;
	height: 0;
	border-bottom: 1px solid rgba( var(--rgb-theme-text), 0 );
	transition: border-color 0.3s ease;
}
nav.primary .category > a {
	display: flex;
	align-items: center;
	height: var(--touch-diameter);
	white-space: nowrap;
}

nav.primary .menu {
	display: none;
	position: absolute;
	top: var(--touch-diameter);
	left: 0;
	z-index: 2;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--touch-diameter);
	width: max-content;
	min-width: 16rem;
	max-width: calc(100vw - 2rem);
	margin: 0;
	padding: 0;
}

nav.primary .category:hover > .menu,
nav.primary .category:focus-within > .menu,
nav.primary[data-category='products'] .category[data-category='products'] > .menu,
nav.primary[data-category='about'] .category[data-category='about'] > .menu,
nav.primary[data-category='support'] .category[data-category='support'] > .menu,
nav.primary[data-category='search'] .category[data-category='search'] > .menu,
nav.primary[data-category='toc'] .category[data-category='toc'] > .menu {
	/* Show a category's menus */
	display: flex;
}
nav.primary .category:hover > a::after,
nav.primary .category:focus-within > a,
nav.primary[data-category='products'] .category[data-category='products'] > a::after,
nav.primary[data-category='about'] .category[data-category='about'] > a::after,
nav.primary[data-category='support'] .category[data-category='support'] > a::after,
nav.primary[data-category='search'] .category[data-category='search'] > a::after,
nav.primary[data-category='toc'] .category[data-category='toc'] > a::after {
	content: "";
	position: absolute;
	top: var(--touch-diameter);
	width: 100%;
	height: 0;
	border-bottom: 1px solid rgba( var(--rgb-theme-text), 0.85 );
}

nav.primary .menu > li {
	display: flex;
	flex-direction: column;
	margin: 0;
	font-size: 1.1rem;
}
nav.primary .menu > li > a {
	margin-top: var(--global-spacing);
	margin-bottom: 4px;
}
nav.primary .submenu {
	display: block;
	position: static;
	margin: 0;
	padding: var(--global-tiny-spacing) 0 var(--touch-diameter) 0;
	border-top: 1px solid rgba(0,0,0,0);
	font-weight: 450;
	opacity: 0.75;
}
nav.primary .submenu li {
	font-size: 1rem;
}
nav.primary .submenu a {
	height: calc( var(--touch-diameter) * 0.85 );
}
nav.primary .submenu.compact a {
	height: calc( var(--touch-diameter) * 0.75 );
}


@media (hover: hover) and (pointer: fine) {
	nav.primary:hover .inner {
		/* expanded state */
		height: calc(var(--touch-diameter) + var(--nav-primary-submenus-height));
		border-bottom: 1px solid rgba(127,127,127,0.25);
		background-color: rgba( var(--rgb-bg-primary), 0.85);
		transition: height 0.2s ease 0s, background-color 0.3s ease 0, border-bottom-color 0.3s ease 0; /* opening delay */
	}
	nav.primary li:hover > .submenu {
		/* 	Secondary menu */
	/* 		background-color: rgba(var(--rgb-bg-primary), 0.5); */
		border-top: 1px solid rgba( var(--rgb-fg-primary-soft), 0.5);
		opacity: 1;
	}
}

#search-toggle {
	/* Lives inside primary nav menu */
	display: block;
	width: calc( var(--touch-diameter) / 2 );
	border: 0 none;
	background-color: transparent;
	/* 
		background: transparent url('../images/cegenie/icons/search.svg') 50% 50% no-repeat;
	 */

/* 	height: var(--touch-diamter); */
/* 
	margin: 0;
	border: 0 none;
	padding: 0;
 */
}
#search-toggle .glyph {
	width: 75%;
	height: 75%;
}

#toc {
	margin-left: auto;
}


/*
	Structured and modular content areas
	------------------------------------
	
		Cards
		-----
		A unit of content, optionally interactive.
		Comprises a poster image, and content block which together form the card. Additional classes control how these are arranged.
		Can be laid out in rows or grids to provide a browsable list.
		Numerous additional classes can provide alignment, colour and other refinements (depending on the type of card):
		
			These only make sense and work for .overlaid cards:
		
			.top		.content
			.middle		
			.bottom		
			.left		
			.right		
			
			.light		The card contains overall light content, regardless of the browser light-dark settings.
			.dark		The card contains overall dark content, regardless of the browser light-dark settings.
			

		.big
		Column-filling (horizontally) cards, expected to hold more foreground imagery.
		Therefore, the poster element relies on one or more <picture> and/or <img> elements to provide efficiently sized source images.
		
		.big.lateral
		As for .big, with the .content area overlaid on the right edge instead of flowing below the poster.
		
		.overlaid
		Overlay the content block directly on top of the poster image which forms the overall card background.
		Typography colour will need to be customised to match, either by applying .light or .dark classes to the card, or manually.
		
		.compact
		Only as high as the poster, with the content to the right of that.
		
		.mini
		Visually separate the poster and content, and do not have a background. NOT NEEDED, SEE NEXT POINT:
		
		.separated
		Modified so that the poster has rounded radii on each corner, and there is no card background, visually separating the caption.
				
		
		Grids
		-----
		Simple grids of cards, supporting up to 4 columns
		
		Pickers
		-------
		Browsable, horizontally-scrolling collection of cards. Unless contained in a card, scrolls horizontally off the page.
		
		Modal Presentations
		-------------------
		
		Popover-style overlays, dedicated either to standard HTML content (for more detail), or a single resource such as a movie.
		
		Structure:
		
			.modal					Overlays and fills viewport
				.content			Provides additional parent positioning and in some cases vertically scrolling viewport
					<context>		One of three types of container:
					
									.column
									-------
									A standard vertically scrolling column for any content, slightly narrower than the standard column width.
									
									.media
									------
									A fixed non-scrolling container designed to hold a single media element (typically a video).
									
									.explainer
									----------
									A three-pane layout (responsive) with three child elements:
									
										.header		Variable-height container for a title and intro.
										.text		Scrolling container for detailed (but still compact) explanatory content.
										.gallery	A large space for displaying either a single image, a slideshow, or other complex layout.
		
*/


.card {
	/*
		Interactive (usually) element of specific content.
		Can be a div, A or button element typically. If it is interactive, it must have the .interactive class.
	*/
	display: block;
	width: var(--card-preferred-width);
	max-width: var(--card-preferred-width);
	border: 0 none;
	border-radius: var(--global-spacing);
	padding: var(--global-spacing);
/* 	background-color: var(--bg-secondary); */
	background-color: rgba(var(--rgb-bg-secondary), 0.85);
	text-align: left;
	overflow: hidden;
	scroll-snap-align: start;
	/*outline: 1px solid rgba(255,255,255,0.1);*/
	outline: 0 none;
	transition: transform 0.3s cubic-bezier(.4,1.4,.6,1), background-color 0.3s, box-shadow 0.3s, outline 0.3s, backdrop-filter 0.3s;
}
button.card{
}
.card .card {
	/* Card somewhere inside a parent card */
	border-radius: calc( var(--global-spacing) / 2);
	background-color: rgba(var(--rgb-bg-tertiary), 0.55);
}
.foreground .card + .card{
	/* Multiple (but not the first) cards */
	margin-top: var(--global-spacing);
}
.picker .card + .card{
	/* Multiple (but not the first) cards */
	margin-top: inherit;
}

.card.big {
	/* Fills the column */
	width: 100%;
	max-width: 100%;
}
.card.big.lateral {
	position: relative;
	display: flex;
	flex-direction: row-reverse;
	padding: 0;
}

.card.compact {
	position: relative;
	height: 8em;
	max-height: 8em;
	padding: var(--global-compact-spacing);
}

.secondary .card {
	background-color: var(--bg-primary);
}

.card.top {
	/* For completeness */
	display: flex;
	align-items: start;
}
.card.bottom {
	display: flex;
	align-items: end;
}
.card.middle {
	display: flex;
	align-items: center;
}
.card.left {
	/* For completeness */
	display: flex;
	justify-content: start;
}
.card.right {
	display: flex;
	justify-content: end;
}

.card > .poster {
	/* Default pic at the top of a card */
	/* position: absolute; */
	display: grid;
	place-items: center;        /* keep image centred vertically */
	/* position: relative; */
	overflow: hidden;
	aspect-ratio: 2 / 1;
	margin: calc(var(--global-spacing) * -1);
	margin-bottom: var(--global-spacing);
	border-top-left-radius: var(--global-spacing);
	border-top-right-radius: var(--global-spacing);
	inset: 0;
	padding: 0;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	contain: paint;
}

/* Aspect ratio overrides */
.poster.aspect-1-1 {
	aspect-ratio: 1 / 1;
}
.poster.aspect-2-1 {
	aspect-ratio: 2 / 1;
}
.poster.aspect-3-1 {
	aspect-ratio: 3 / 1;
}
.poster.aspect-3-2 {
	aspect-ratio: 3 / 2;
}
.poster.aspect-1-2 {
	aspect-ratio: 1 / 2;
}
.poster.aspect-16-9 {
	aspect-ratio: 16 / 9;
}

.card .card > .poster {
	border-top-left-radius: calc( var(--global-spacing) / 2);
	border-top-right-radius: calc( var(--global-spacing) / 2);
}
.card.big > .poster {
	/* Fills the area of the card */
	max-width: initial;
}
.card.overlaid {
	position: relative;
}
.card.overlaid > .poster,
.card.lateral > .poster {
	position: absolute;
	max-width: initial;
	aspect-ratio: initial;
	inset: 0;
	margin: 0;
	border-radius: var(--global-spacing);
}


.card.compact > .poster {
	position: absolute;
	width: var(--thumbnail-compact-size);
	aspect-ratio: 1;
	top: 0;
	right: auto;
	bottom: 0;
	left: 0;
	margin: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: var(--global-compact-spacing);
}
.card > .content{
	position: relative;
	/*z-index: 1;*/
}
.card.big.overlaid > .content {
	max-width: var(--card-preferred-width);
}
.card.big.lateral > .content {
	max-width: var(--card-preferred-width);
	border-top-right-radius: var(--global-spacing);
	border-bottom-right-radius: var(--global-spacing);
	padding: var(--global-spacing);
}
.card.compact > .content {
	margin-left: calc( var(--thumbnail-compact-size) );
}

.card.separated {
	background: 0 transparent;
}
.card.separated .poster {
	border-radius: var(--global-spacing);
}
.card .card.separated > .poster {
	border-radius: calc( var(--global-spacing) / 2);
}

.card > .content p,
.card > .content li {
	font-size: 1.2em;
	line-height: 1.25em;
	opacity: 0.8;
}
.card > .content h3 {
	font-size: 1.35rem;
	font-weight: 650;
}
.card .badge + h3 {
	margin-top: 0.2rem;
	font-size: 1.25em;
}
.badge {
	font-size: 1.0rem;
	font-weight: bold;
	text-transform: uppercase;
	color: var(--fg-theme-text);
	opacity: 1.0;
}
a.card{
	text-decoration: none;
}
.card.interactive {
	cursor: pointer;
}
.card.interactive:hover,
.card.interactive:active {
	transform: scale(1.02);
	box-shadow:
		0 1px 1px 0 rgba(191,95,47,0.5),
		0 -1px 1px 0 rgba(47,95,191,0.5);
}
.dark .card, .card.dark {
	background-color: var(--bg-tertiary);
}
.dark .card:hover, .card.dark:active {
	background-color: var(--bg-tertiary);
	box-shadow:
		0 -1px 0px 0 rgba(255,239,223,0.5),
		0 1px 1px 0 rgba(127,191,255,0.35),
		0 1px 0px 1px rgba(127,223,255,0.1) inset;
}

.card.interactive > .content::after {
	content: 'Learn more';
	display: block;
	height: 2em;
	margin: var(--global-compact-spacing) 0 0 0;
	padding: 0 0 0 2em;
	font-size: 1.2em;
	line-height: 2em;
	background: transparent url('../images/cegenie/icons/link-black.svg') 0 50%;
	background-size: 1.5em 1.5em;
	background-repeat: no-repeat;
	opacity: 0.65;
	transition: opacity 0.5s;
}
.card.interactive:hover > .content::after {
	opacity: 1;
}
.card.interactive.compact > .content::after {
	margin:  0;
	padding-left: 1.75em;
	margin-bottom: var(--global-compact-spacing);
	height: 1.5em;
	font-size: 0.9em;
	line-height: 1.5em;
	background-size: 1.2em 1.2em;
}
.card.interactive.play > .content::after {
	content: 'Watch';
	background-image: url('../images/cegenie/icons/play-black.svg');
}
.card.interactive.external > .content::after {
	content: 'Visit';
	background-image: url('../images/cegenie/icons/external-black.svg');
}
.card.interactive.previous > .content::after {
	content: 'Previous';
	background-image: url('../images/cegenie/icons/previous-black.svg');
}
.card.interactive.next > .content::after {
	content: 'Next';
	background-image: url('../images/cegenie/icons/next-black.svg');
}
.card.interactive.expand > .content::after {
	content: 'Explore';
	background-image: url('../images/cegenie/icons/expand-black.svg');
}
.card.interactive.download > .content::after {
	content: 'Download';
	background-image: url('../images/cegenie/icons/download-black.svg');
}



/* Grid card sections */
.grid {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(min(100%, var(--card-min-width)), 1fr) );
  gap: var(--global-spacing);
  /* padding-block: var(--global-spacing); */
}
.grid > * {
  width: auto;
  max-width: none;
  min-width: 0;
}

.grid.features {
	/* Properties are added at smaller display sizes */
}
.grid .feature {
	position: relative;
    margin: 0;
    padding: var(--global-spacing);
}
.grid .feature::before {
	content: "";
	display: block;
	position: absolute;
	top: var(--global-spacing);
	left: 0;
	bottom: var(--global-spacing);
	width: 0.25em;
	border-radius: 0.125em;
	background-color: rgb(var(--rgb-bg-theme-highlight));
}

/* Pickers */
.picker {
	display: flex;
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	padding-top: var(--global-spacing);
	padding-bottom: var(--global-spacing);
	padding-left: max(var(--global-spacing), calc(100% - var(--content-preferred-width))/2);
	padding-right: max(var(--global-spacing), calc(100% - var(--content-preferred-width))/2);
	gap: var(--global-spacing);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	overscroll-behavior-inline: contain;
	scroll-snap-type: x mandatory;
	scroll-snap-stop: always;
	scrollbar-width: none;
	scroll-padding: max(var(--global-spacing), calc(100% - var(--content-preferred-width))/2);
}

.card > .picker {
	/* Special case, a picker at the bottom of a card */
	position: relative;
	width: 100%;
	max-width: 100%;
	width: calc(100% + var(--global-spacing)*2);
	max-width: calc(100% + var(--global-spacing)*2);
	margin: calc(var(--global-spacing) * -1);
	margin-top: 0;
	margin-right: 0;
	padding-right: var(--global-spacing);
	border-bottom-left-radius: var(--global-spacing);
	border-bottom-right-radius: var(--global-spacing);
	border-bottom-left-radius: var(--global-spacing);
	scroll-padding: var(--global-spacing);
}

.picker::-webkit-scrollbar {
	display: none;
	width: 0;
	background: rgba(0, 0, 0, 0);
}

.picker > .card {
	min-width: var(--card-preferred-width);	/* Ensure cards in a carousel extend off-screen and are sized properly in their flex parent */
}

.picker > h3, .picker > h4 {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	margin: var(--global-spacing) var(--global-spacing) 0;
}
.picker > .items {
	display: grid;
	grid-gap: var(--global-spacing);
	grid-auto-flow: column;
	grid-template-columns: unset;
	grid-auto-columns: 1fr;
	width: fit-content;
	margin: 0;
	padding: 0;
	padding-top: var(--global-spacing);
	padding-bottom: var(--global-spacing);
	padding-left: var(--content-preferred-margin);
	padding-right: var(--content-preferred-margin);
}
.card > .picker > .items {
	padding-left: var(--global-spacing);
	padding-right: var(--global-spacing);
}

/* Controls -- appearance (positioning of the parent .controls element is handled elsewhere) */
.control {
	position: relative;
	width: var(--touch-diameter);
	height: var(--touch-diameter);
	margin: 0;
	border-radius: calc( var(--touch-diameter) * 0.5 );
	border: 0 none;
	outline: 1px solid rgba(255, 255, 255, 0.5);
	padding: 0;
	background-color: rgba(var(--rgb-contrast), 0.75);
	background-position: center center;
	background-size: 50% 50%;
	background-repeat: no-repeat;
	opacity: 1;
	backdrop-filter: var(--bg-glass-thin-blur);
	transition: opacity 0.5s ease-out;
	cursor: pointer;
}
.control:hover {
    background-color: rgba(var(--rgb-contrast), 1);;
}
.control:active {
	background-color: rgba(var(--rgb-bg-theme-highlight), 1);
}
.control[disabled],
.control[disabled]:hover,
.control[disabled]:active {
	opacity: 0.5;
	background-color: rgba(var(--rgb-contrast), 0.5);
	cursor: default;
}

/* General utility/accessibility class */
.control .hide {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	margin: -1px;
	padding: 0;
	border: 0 none;
	white-space: nowrap;
}

.close.control {
	background-image: url(../images/cegenie/icons/close-white-glyph.svg);
}
.next.control {
	background-image: url(../images/cegenie/icons/next-white-glyph.svg);
}
.previous.control {
	background-image: url(../images/cegenie/icons/previous-white-glyph.svg);
}

/*
	Modals
	------
	Multi-purpose structure for focusing on specific content within the flow of the page (and avoiding linking out to a secondary page).
*/

.modal {
/* 
	display: none;
 */
	display: grid;
 	visibility: hidden;
	position: fixed;
	inset: 0;
	top: 100%;	/* Hide the modals on initial page load */
	opacity: 0;
	background-color: rgba(var(--rgb-bg-secondary), 0.95);
	backdrop-filter: var(--bg-glass-thin-blur);
	z-index: 20;
	transition:
		display 0.35s ease-out allow-discrete,
		visibility 0.35s ease-out allow-discrete,
		opacity 0.35s ease-out,
		top 1s ease-out 1s;
	place-items: center;
	pointer-events: none;
/* 
	overflow-x: hidden;
	overflow-y: auto;
 */
}
.modal > .content {
	/* Vertically scrolling container, filling its parent */
	position: absolute;
	width: 100%;
	inset: 0;
	overflow-y: auto;
	scroll-behavior: smooth;
	overscroll-behavior: contain;
/* 
	max-width: calc( var(--content-preferred-width) * 0.75 );
 */
	translate: 0 0.5em;
	transition:
		translate 0.5s ease-out;
}
.modal .content > .column {
	/* A variable-height single column of simple HTML content */
	width: calc( var(--content-preferred-width) * 0.9 );
	margin: 10dvh auto 15dvh auto;
}

.modal .content img {
	margin: 2em 0;
}

.modal .content > .media {
	/* Does not scroll, content is centred vertically */
	display: grid;
	height: 100%;
	overflow-y: hidden;
	place-items: center;
}
.modal .content > .media > * {
	width: auto;
	height: auto;
	max-width: 90dvw;
	max-height: 90dvh;
	max-width: calc( 100dvw - ( var(--touch-diameter) * 6 ) );			/* FIX THESE */
	max-height: calc( 100dvh - ( var(--touch-diameter) * 6 ) );
	object-fit: contain;
}

.modal.open {
	visibility: visible;
	opacity: 1;
	top: 0;
	pointer-events: auto;
	transition:
		display 0.4s ease-out allow-discrete,
		visibility 0.4s ease-out allow-discrete,
		opacity 0.4s ease-out,
		top 0s;
	@starting-style {
    	opacity: 0;
		visibility: hidden;
	}
}
.modal.open > .content {
	translate: 0 0;
	@starting-style {
		translate: 0 0.5em;
	}
}
.modal .column img, .modal .column picture, .modal .column canvas, .modal .column svg {
	width: 100%;
	height: auto;
	max-width: 100%;
	max-height: 65dvh;
	object-fit: scale-down;
	object-position: left center;
}
.modal .column p, .modal .column h2, .modal .column h3, .modal .column ul, .modal .column ol {
	max-width: 75ch;
}
.modal media {
}

.modal .close {
	position: static;
	opacity: 0;
	right: var(--touch-diameter);
	top: var(--touch-diameter);
/* 
	left: 50%;
 */
	z-index: 21;
	translate: -0 2.5em;
	transition:
		translate 0.5s ease-out 0.5s,
		opacity 0.5s ease-out 0.5s;
}
.modal.open .close {
	position: absolute;
	opacity: 1;
	translate: 0 0;
}
/* 
dialog {
	opacity: 0;
	transform: scale(0);
	transition:
		opacity 0.7s ease-out,
		transform 0.7s ease-out,
		overlay 0.7s ease-out allow-discrete,
		display 0.7s ease-out allow-discrete;
	Equivalent to
	transition: all 0.7s allow-discrete;}
dialog[popover-open] {
	opacity: 1;
	transform: scale(1);
}

dialog::backdrop {
	background-color: transparent;	background-color: rgba(var(--rgb-bg-tertiary), 0.65);
	backdrop-filter: var(--bg-glass-thin-blur);
	transition:
		display 0.7s allow-discrete,
		overlay 0.7s allow-discrete,
		background-color 0.7s;
	Equivalent to
	transition: all 0.7s allow-discrete;}

dialog[popover-open]::backdrop {
	background: rgb(0 0 0 / 75%);
	backdrop-filter: var(--bg-glass-blur);
}

@starting-style {
	dialog[popover-open] {
		opacity: 0;
		transform: scaleY(0);
	}
}


@starting-style {
	dialog[open]::backdrop {
		background-color: transparent;
	}
}
 */


/* Any type of slideshow */
.slides {
	/* The container (typically immediate parent) of a collection of slides, which provides the CSS and JS context */
/* 	position: relative; */
	position: relative;
	background-color: transparent;
}
section > .slides {
	min-height: 75svh;
	border-radius: var(--global-spacing);
}
.modal .slides {
	width: 100%;
	height: 100%;
}
.slide {
	display: flex;
	/* 
	inset: 0;
	justify-content: center;
	align-items: center;
 */
	position: absolute;
/* 
	position: absolute;
 */
	inset: 0;
	opacity: 0;
	border-radius: var(--global-spacing);
	background-color: white;
	z-index: 0;
	transition:
		translate 0.5s ease-out,
		background-color 0.5s ease,
		opacity 0.5s ease-out 0.5s;
}
.modal .content > .slides .slide {
	/* Specifically for full-screen modal slideshows */
	border-radius: 0;
}
/* 
section > .slides .slide {
	border-radius: var(--global-spacing);
}
 */
.slide.selected {
	opacity: 1;
	z-index: 1;
	transition:
		translate 0.5s ease-out,
		background-color 0.5s ease,
		opacity 0.5s ease-out;
}

/* Picker, slideshow (or any other) transport controls */
.transport.controls {
	display: flex;
	gap: var(--global-spacing);
	width: auto;
}
.slides .transport.controls {
	position: absolute;
	bottom: var(--global-spacing);
	left: 50%;
	translate: -50% 0;
	z-index: 2;
}


/*
	Diagrams
	A block containing positioning and sizing contexts, allowing an inner media element to be overlaid with annotations:
	
	.diagram					The outer sizing context, which sets the sizing context for the .inner:
		.content				The media context, providing positioning (absolute) capabilities.
			<media>				img, picture, svg or video element.
			.annotation			Optional notes or features.
	
	An image or picture element (or any content), wrapped in an element which provides positioning context.
	The diagram element provides only a positioning context. To position the diagram itself, its parent context must be utilised.
	The diagram element itself is sized and positioned, typically centrally, by styling it based on its parent (typically .slide) element.
	Optionally also containing .annotation elements which will point items out on the content.
	THE CONTENT IS INTENDED TO BE SQUARE, and must be directly inside the diagram element.
*/


.diagram {
	display: grid;
	place-items: center;
	overflow: hidden;
	position: absolute;
	inset: 0;
	min-width: 0;
	min-height: 0;
	margin: 0;
}
.diagram > .content {
	display: block;
	position: relative;
	place-items: center;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
}
.annotations {
	display: block;
}
.annotations li {
	position: absolute;
	width: var(--global-spacing);
	height: var(--global-spacing);
	translate: -50% -50%;
	border-radius: calc( var(--global-spacing) / 2 );
	border: 1px solid rgb(255,255,255);
	outline: 1px solid rgb(0,0,0) 1px;
}
.annotations li::after {
	display: block;
	content: "";
	position: absolute;
}
.annotations li.south::after {
	height: 2em;
/* 	margin-left: calc( var(--global-spacing) / 2 ); */
	translate: calc( var(--global-spacing) / 2 ) var(--global-spacing);
	border-left: 1px solid rgb(127,127,127);
	border-right: 1px solid rgb(127,127,127);
}

.diagram img,
.diagram picture img,
.diagram svg,
.diagram video {
	display: block;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	object-fit: contain;
	object-position: center;
}

.explainer .gallery,
.slides,
.slide {
	min-width: 0;
	min-height: 0;
}

/* 
.diagram > img, .diagram > picture, .diagram > svg, .diagram > video {
 	width: 100%;
 	height: 100%;
 	object-fit: contain;
			opacity: 0.5;
}
 */

/*
	Explainers, a specific element of modals which provides a rich, structured environment in which to interactively explain and explore concepts.
	When inside a .modal, the .header module is displayed; otherwise it is hidden.
*/

.explainer {
	/* A fixed-height 3-section structured layout for explanations or "all on one screen" sections (text area scroll on mobile phone sizes) */
	width: 100%;
	height: 100%;
	max-height: 75svh;
	position: relative;
	display: grid;
	grid-gap: var(--global-spacing);
	grid-template-columns: var(--card-preferred-width) auto;
	grid-template-rows: auto;
/* 
	grid-auto-rows: minmax(100px, auto);
 */
	grid-template-areas:
		"explainer-text   explainer-gallery"
		"explainer-text   explainer-gallery";
	font-size: 0.9rem;
	line-height: 1.5em;
}
section > .explainer {
	/* On the main content part of the page */
	min-height: 75svh;
}
.modal .explainer {
	grid-template-rows: auto 1fr;
	padding: var(--global-spacing);
	grid-template-areas:
		"explainer-header explainer-gallery"
		"explainer-text   explainer-gallery";
	max-height: 100%;
}
.explainer .header {
	display: none;
	visibility: hidden;
}
.modal .explainer .header {
	display: block;
	visibility: visible;
	grid-area: explainer-header;
}
.explainer .gallery {
	grid-area: explainer-gallery;
	border-radius: var(--global-spacing);
}
.explainer .text {
	grid-area: explainer-text;
	overflow-y: auto;
	scroll-behavior: smooth;
	overscroll-behavior: contain;
}

/*
	Discloser, a small tile or widget analogous to a summary/details element, designed to allow more content to fit into limited spaces.
	It has two children: .summary and .details
	.summary when clicked toggles its .details div, but other classes can override the interactivity and visibility.
	The discloser itself, rather than its child elements, gains any state or options classes or data:
	
		.exclusive		Only one item may be selected, and can only be deselected by clicking on another item
	
	Data attributes on the discloser facilitate interactions with distant elements (slides):
	
		data-target-slide		The ID of the slide which will become selected. All other .slide elements in the context will be deselected.
								Only supported with .exclusive mode.
*/
.discloser {
/* 	height: var(--touch-diameter); */
	min-height: var(--touch-diameter);
	max-width: 60ch;
	margin-bottom: calc( var(--global-spacing) / 2);
	border-radius: calc( var(--global-spacing) / 2);
	padding: 0;
	padding: calc( var(--global-spacing) / 2);
	background-color: rgba(var(--rgb-bg-grey), 0.2);
	transition:
		height 0.25s ease-out,
		background-color 0.15s;
}
.discloser.selected {
/* 	border: 1px solid rgba(var(--rgb-theme-element), 0.95); */
	background-color: rgba(var(--rgb-theme-element), 0.95);
	background-color: var(--bg-secondary);
	background-color: rgba(var(--rgb-bg-grey), 0.5);
}
.discloser:not(.exclusive.selected) {
	cursor: pointer;	
}
.discloser:not(.exclusive.selected):hover {
	background-color: rgba(var(--rgb-bg-grey), 0.3);
}
.discloser:not(.exclusive.selected):active {
	background-color: rgba(var(--rgb-bg-grey), 0.4);
}
.discloser .summary {
/* 	height: var(--touch-diameter); */
/* 	min-height: var(--touch-diameter); */
/* 	padding: calc( var(--global-spacing) / 2); */
	overflow-y: hidden;
/* 	transform: scale(1); */
	opacity: 1;
	transition:
		height 0.25s ease-out,
		opacity 0.25s ease-out;
/* 	will-change: transform; */
}
.discloser .summary h3 {
	font-size: 1.15rem;
	font-weight: 600;
}
.discloser .details {
/* 	padding: calc( var(--global-spacing) / 2); */
	/* 	padding-top: 0; */
	overflow-y: hidden;
	font-size: 0.85rem;
	opacity: 0;
	transition:
		height 0.25s ease-out,
		opacity 0.25s ease-out 0.2s;
}
.discloser.selected .details > * {
	color: var(--fg-primary-soft);
}
.discloser .summary * {
	margin: 0;
}
.discloser.selected .summary{
	transform: scale(0);
	opacity: 0;
/* 
	height: 0;
	min-height: 0;
 */
}
.discloser.selected .details {
	opacity: 1;
}



/* Material overrides */

.glass {
	background-color: rgba(var(--rgb-bg-secondary), 0.75);
	backdrop-filter: var(--bg-glass-blur);
	/* -webkit-backdrop-filter: var(--bg-glass-blur); */
}
a.glass:hover, .glass a:hover {
	background-color: rgba(var(--rgb-bg-secondary), 0.35);
}

.dark .glass, .dark.glass {
	background-color: rgba(var(--rgb-bg-tertiary), 0.65);
	backdrop-filter: var(--bg-glass-blur);
}
.dark a.glass:hover, .dark .glass a:hover, .dark.glass a:hover {
	background-color: rgba(var(--rgb-glass), 0.65);
	backdrop-filter: var(--bg-glass-thin-blur);
}






/* 11. Light/Dark mode via media query */
@media (prefers-color-scheme: dark) {
	:root {
		--rgb-clean: 0,0,0;
		--rgb-bg-primary: 23,15,15;
		--rgb-bg-secondary: 37,29,27;
		--rgb-bg-tertiary: 63,55,55;	/* For use over dark backgrounds, or for particular emphasis */
		--rgb-bg-grey: 95,91,87;		/* Mid */
        --rgb-contrast: 255,255,255;
		
		--rgb-strong: 255,255,255;
		--rgb-fg-primary: 255,247,243;
		--rgb-fg-primary-soft: 223,219,215;
		--rgb-fg-secondary: 223,215,215;
		--rgb-fg-tertiary: 255,247,247;
		--rgb-theme-text: 255,207,175;
		--rgb-theme-element: 255,191,159;
	}
	
	.card.interactive:hover, .card.interactive:active {
		/* Receive dark glass styling */
		transform: scale(1.02);
		box-shadow:
			0 -1px 0px 0 rgba(255,239,223,0.5),
			0 1px 1px 0 rgba(127,191,255,0.35),
			0 1px 0px 1px rgba(127,223,255,0.1) inset;
	}
	.card.interactive > .content::after {
		background-image: url('../images/cegenie/icons/link-white.svg');
		opacity: 0.5;
	}
	.card.interactive.play > .content::after {
		background-image: url('../images/cegenie/icons/play-white.svg');
	}
	.card.interactive.external > .content::after {
		background-image: url('../images/cegenie/icons/external-white.svg');
	}
	.card.interactive.previous > .content::after {
		background-image: url('../images/cegenie/icons/previous-white.svg');
	}
	.card.interactive.next > .content::after {
		background-image: url('../images/cegenie/icons/next-white.svg');
	}
	.card.interactive.expand > .content::after {
		background-image: url('../images/cegenie/icons/expand-white.svg');
	}
	.card.interactive.download > .content::after {
		background-image: url('../images/cegenie/icons/download-white.svg');
	}
	.modal {
	}
    .close.control {
    	background-image: url(../images/cegenie/icons/close-black-glyph.svg);
    }
    .next.control {
    	background-image: url(../images/cegenie/icons/next-black-glyph.svg);
    }
    .previous.control {
    	background-image: url(../images/cegenie/icons/previous-black-glyph.svg);
    }
}

/* 12. Hide scrollbars on touch devices (optional) */
body {
	-ms-overflow-style: none;	/* IE and Edge */
	scrollbar-width: thin;		 /* Firefox */
}
body::-webkit-scrollbar {
	display: none;						 /* Chrome, Safari, Opera */
}


/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	
	.modal, .control, .slide {
		transition: none;
	}
	
	html {
		scroll-behavior: auto;
	}
}


/* Medium devices */
@media (max-width: 1200px) {
	.grid.features {
		grid-template-columns: 1fr;
	    margin-bottom: var(--global-spacing);
	}
	.grid.features .feature {
		padding-right: 0;
		padding-top: 0;
		padding-bottom: 0;
	}
	.grid .feature::before {
		top: 0;
		bottom: 0
	}
}


/* Small-ish devices */
@media (max-width: 800px) {
	.context.justify {
		display: inherit;
	}
	.optionalbelow800 {
		display: none;
	}
	.explainer {
/* 
		grid-template-columns: auto;
		grid-template-rows: auto auto auto;
		grid-template-areas:
			"explainer-header"
			"explainer-gallery"
			"explainer-text";
 */
	}
	form {
		grid-template-columns: 1fr;
	}
	form .wide {
		grid-column: initial;
	}
	/*
		TODO:
		Give explainer gallery a minimum height.
	*/
}

/* Mobile phones */
@media (max-width: 600px) {

	:root {
		--card-preferred-width: 100%;
	}
	html {
		font-size: 98%; /* Slightly smaller on phones */
	}
	h1 {
		font-size: 3.0rem;
	}
	.picker .card {
		--card-preferred-width: 80%;
	}
	.optionalbelow600 {
		display: none;
	}
    .grid {
        grid-auto-flow: row;
        grid-template-columns: 1fr;
    }

	
	/* To do: */
	/*
		Hero area (uses grid and flex, needs to revert to more portrait)
		Grid (needs to be single column)
		Lateral big cards (need to revert to standard layout)
	*/
	
}