/* Fonts */
	@font-face {
	font-family: 'RNS Physis';
	src: url(fonts/RNSPhysis-Black.woff2) format('woff2');
	font-weight: 600;
	}
	@font-face {
	font-family: 'RNS Physis';
	src: url(fonts/RNSPhysis-Bold.woff2) format('woff2');
	font-weight: 500;
	}
	@font-face {
	font-family: 'RNS Physis';
	src: url(fonts/RNSPhysis-Medium.woff2) format('woff2');
	font-weight: 400;
	}
	@font-face {
	font-family: 'RNS Physis';
	src: url(fonts/RNSPhysis-Light.woff2) format('woff2');
	font-weight: 300;
	}
	@font-face {
	font-family: 'RNS Physis';
	src: url(fonts/RNSPhysis-Thin.woff2) format('woff2');
	font-weight: 200;
	}

/* CSS Reset */
	html, body, b, u, i, center, h1, h2, h3, h4, h5, h6, p {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}

/* Variables */
	/* Colours */
		/* Dark mode */
			@media (prefers-color-scheme: dark){ :root{
				--bg-default: black;
				--bg-alt: #111;
				--bg-accent: #001aff;
				--bg-surface: rgba(255,255,255,0.08);
				--fg-default: white;
				--fg-subtle: rgba(255,255,255,0.64);
				--fg-accent: #EAFF00;
				--fg-border: rgba(255,255,255,0.12);
			}}

		/* Light mode */
			@media (prefers-color-scheme: light){ :root{
				--bg-default: white;
				--bg-alt: #f7f7f7;
				--bg-accent: #eaff00;
				--bg-surface: rgba(0,0,0,0.04);
				--fg-default: black;
				--fg-subtle: rgba(0,0,0,0.64);
				--fg-accent: #001aff;
				--fg-border: rgba(0,0,0,0.08);
			}}

	/* Dimensions */
		/* Type */
			:root{
				--xxxxxxlg: calc(1rem * var(--factor) * var(--factor) * var(--factor) * var(--factor) * var(--factor) * var(--factor) * var(--factor));
				--xxxxxlg: calc(1rem * var(--factor) * var(--factor) * var(--factor) * var(--factor) * var(--factor) * var(--factor));
				--xxxxlg: calc(1rem * var(--factor) * var(--factor) * var(--factor) * var(--factor) * var(--factor));
				--xxxlg: calc(1rem * var(--factor) * var(--factor) * var(--factor) * var(--factor));
				--xxlg: calc(1rem * var(--factor) * var(--factor) * var(--factor));
				--xlg: calc(1rem * var(--factor) * var(--factor));
				--lg: calc(1rem * var(--factor));
				--md: 1rem;
				--sm: calc(1rem / var(--factor));
				--xsm: calc(1rem / var(--factor) / var(--factor));
				--xxsm: calc(1rem / var(--factor) / var(--factor) / var(--factor));
				--letter-spacing-thighter: -.04em;
				--letter-spacing-thight: -.02em;
			}

	/* Breakpoints */
		/* Desktop */
			@media (min-width:1101px){ :root{
				--viewport-vpadding: 6rem;
				--viewport-hpadding: 6rem;
				--vgap: 4rem;
				--factor: 1.25;
				--radius: 1rem;
			}}

		/* Tablet */
			@media (max-width:1100px){ :root{
				--viewport-vpadding: 4rem;
				--viewport-hpadding: 4rem;
				--vgap: 3rem;
				--factor: 1.2;
				--radius: 1rem;
			}}

		/* Mobile */
			@media (max-width:400px){ :root{
				--viewport-vpadding: 3rem;
				--viewport-hpadding: 1.5rem;
				--vgap: 2rem;
				--factor: 1.125;
				--radius: .5rem;
			}}

		/* Small Mobile */
			@media (max-width:320px){ :root{
				--viewport-vpadding: 3rem;
				--viewport-hpadding: 1rem;
				--vgap: 2rem;
				--factor: 1.125;
				--radius: .5rem;
			}}
			
/* Typography */
	/* Text sizes */
		.display, .headline-lg{
			line-height: 1.1;
			font-kerning: auto;
		}

		.headline-md, .headline-sm{
			line-height: 1.3;
			font-kerning: auto;
		}

		.body-lg, .body-md, .body-sm{
			line-height: 1.5;
		}

		.display{
			font-size: var(--xxxxxlg);
			letter-spacing: var(--letter-spacing-thighter);
			font-weight: 400;
		} 

		.headline-lg{
			font-size: var(--xxxxlg);
			letter-spacing: var(--letter-spacing-thight);
			font-weight: 400;
		}

		.headline-md{
			font-size: var(--xxxlg);
			letter-spacing: var(--letter-spacing-thight);
			font-weight: 400;
		}

		.headline-sm{
			font-size: var(--xxlg);
			letter-spacing: var(--letter-spacing-thight);
			font-weight: 400;
		}

		.body-xlg{
			font-size: var(--xlg);
		}

		.body-lg{
			font-size: var(--lg);
		}

		.body-md{
			font-size: var(--md);
		}

		.body-sm{
			font-size: var(--sm);
		}

	/* Text colors */
		::selection{
			background: var(--bg-accent);
			color: var(--fg-default)
		}
		.subtle{
			color:var(--fg-subtle);
		}
		.disabled{
			color:var(--fg-subtle);
		}

	/* Text weights */
		strong{
			font-weight: 400;
		}
		.regular{
			font-weight: 300;
		}

/* Style */
	body{
		background: var(--bg-default);
		color: var(--fg-default);
		font-family: "RNS Physis";
		text-wrap: pretty;
	}

	a{
		text-decoration: none;
		color: var(--fg-default);
		word-wrap: break-word;
	}

	.play-pause{
		min-height: 3rem;
		min-width: 3rem;;
		font-size: var(--lg);
		border-radius: 3rem;
		outline: none;
		border:none;
		position: absolute; bottom:1rem; right:1rem;

		transition: scale .5s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.volt{
		background-color: #EAFF00;
		color:#000;
	}
	.volt .link, .volt .link:hover{
		color: #000;
	}
	.volt svg{
		fill:#000;
	}
	.volt ::selection{
		background: white;
		color: #000;
	}


/* Structure */
	body > section:nth-child(2n+3){
		background: var(--bg-alt);
	}

	body > section{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: var(--viewport-vpadding) var(--viewport-hpadding);
		gap: var(--vgap);
		/* border-top: 1px solid var(--fg-border); */
	}

	body > section > * {
		width: 100%;
		max-width: 1000px;
	}


/* Header */
	#header{
		padding-bottom:2rem;
	}

	#header-row{
		width: 100%;
		max-width: 1000px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-content: center;
		position: relative;
		overflow: visible;
	}

	#menu{
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 32px;
	}

/* Companies */
	.company-logos{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 32px;
		justify-content: space-evenly;
		align-items: center;
	}

	@media (max-width:400px) {
		.company-logos{
			scale:.75;
		}
	}

/* Components */
	/* Articles */
		.article{
			display: flex;
			flex-direction: row;
			gap:8px;
			padding:8px;
			background:var(--bg-surface);
			border-radius: var(--radius);
			transition: scale .5s cubic-bezier(0.22, 1, 0.36, 1);
		} 

		.content{
			flex: 50%;
			display:flex;
			flex-direction: column;
			justify-content: center;
			width: 60%;
			gap: var(--xxlg);
			padding: var(--xxxxlg);
		}

		.thumbnail{
			background: var(--bg-surface);
			object-fit: cover;
			flex:40%;
			min-width:0;
			overflow: hidden;
			border-radius: calc(var(--radius) - .5rem);
		}

		/* Desktop */
			@media (min-width:801px){
				.thumbnail{
					aspect-ratio: 1;
				}
				.article:nth-child(odd){
					flex-direction: row-reverse;
				}
			}

		/* Mobile */
			@media (max-width:800px){
				.article{
					flex-direction: column;
					gap: .25rem;
					padding: .25rem;
				}
				.thumbnail{
					width:auto;
					aspect-ratio: 1.618;
					border-radius: calc(var(--radius) - .25rem);	
				}
				.content{
					padding: var(--xxxlg);
					width:auto;
				}
			}

	.link {
		display: inline-block;
		width: fit-content;
		text-decoration: none;
		position: relative;
		font-weight: 400;
		color: var(--fg-accent);
		transition: scale .5s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.link::after{
		content:"\00a0→";
	}
	.menu::after{
		content:"";
	}
	.external::after{
		content: "\00a0↗";
	}

	.logo{
		display: block;
		position: absolute;
		padding: 2rem;
		width: 2rem; height: /* Realignment */ 2rem; left:-2rem;top:-2rem; 
		border-radius: 100%;
		transition: scale .5s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.tag{
		display: flex;
		align-items: center;
		padding: 0 .5rem;
		background-color: var(--bg-surface);
		border-radius: 4px;
		text-transform: uppercase;
		font-size: 11px;
		line-height: 11px;
		letter-spacing: .04rem;
		height:24px;
	}

	.tag-row{
		display: inline-flex;
		flex-wrap: wrap;
		gap: .5rem;
	}

	/* Interactions */
		/* Link */
			.link:hover {
				color: var(--fg-accent);
				text-decoration: underline;
				text-underline-offset: .4rem;
			}

			.link:focus {
				outline: none;
				text-decoration: underline;
				text-underline-offset: .4rem;
			}

			.link:active {
				scale: .9;
			}

		/* Logo & Article */
			.logo:hover, .article:hover{
				scale: 1.1;
				background-color: var(--bg-surface);
			}

			.article:focus, .logo:focus, .play-pause:focus{
				outline: solid 2px var(--fg-accent);
				scale:1.1;
			}

			.logo:active, .article:active, .play-pause:active{
				scale:.95;
			}

			.volt:focus{
				outline:solid 2px#000;
			}

/* About me page */

	#namecard{
		display: flex;
		gap: 2rem;
	}

	.namecard-description{
		display: flex;
		flex-direction: column;
		gap: .5rem;
		margin-right: 2rem;

	}

	.avatar{
		border-radius: var(--radius);
		object-fit: cover;
		max-width: 50%;
		aspect-ratio: 1;
		position: sticky;
	}

	.occupation{
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	.gallery{
		display: flex;
		flex-direction: row;
		gap: 2rem;
		padding: 2rem 0;
	}

	.gallery-img{
		width: 50%;
		height: 560px;
		object-fit:cover;
		border-radius: var(--radius);
		background-color: var(--bg-surface);
	}

	@media (max-width:1100px) {
		#namecard {
			flex-direction: column-reverse;
			gap:var(--vgap)
		}

		.avatar{
			max-width: 100%;
			position: relative;
			width: auto;
			aspect-ratio: 1.618;
			left: auto; right: auto;
		}

		.gallery{
			flex-direction: column;
		}

		.gallery-img{
			width: 100%;
			aspect-ratio: 1.618;
			height: auto;
		}
	}


/* Article page */ 

	#article-hero{
		aspect-ratio: 1.618;
		object-fit: cover;
		border-radius: var(--radius);
	}


	/* Article Content */ 	
		
		#article-content{
			display: flex;
			flex-direction: column;
			align-items: center;
			gap:0;
		}

		#article-content img, #article-content video{
			border-radius: var(--radius);
			border: 1px solid var(--fg-border);
		}

		#article-content > h2, #article-content > h3, #article-content > h4, #article-content > p, #article-content > ul, #article-content > ol, #article-content > li, #article-content > table, #article-content > th, #article-content > td, #article-content > hr, .inline-img{
			width: 100%;
			max-width: 720px;
		}

		#article-heading-block{
			display: flex;
			flex-direction: column;
			gap: var(--vgap);
		}

		ul, ol{
			margin-block: 0;
		}

		/* #article-content > .break-img, .inline-img{
			border-radius: var(--radius);
			margin: calc(var(--vgap)/2) -20px var(--vgap) -20px;
			width: 100%;
		} */

		.break-img, .inline-img{
			display: flex; flex-direction: column; position: relative;
			width: 100%;
			gap:1rem;
			margin: calc(var(--vgap)/2) -20px var(--vgap) -20px;
		}

		#article-content > h2{
			font-size: var(--xxlg);
			line-height: 1.3;
			font-weight: var(--medium);
			margin: 2rem 0 .5rem 0;
		}

		#article-content > h3{
			font-size: var(--xlg);
			line-height: 1.4;
			margin: 2rem 0 .5rem 0;
		}

		#article-content > h4{
			font-size: var(--lg);
			line-height: 1.5;
			margin: 1rem 0 .5rem 0;
		}

		#article-content > p{
			font-size: var(--lg);
			font-weight: 300;
			line-height: 1.5;
			margin: .5rem 0;
		}

		.note{
			font-size: var(--xsm);
			color: var(--fg-subtle);
			position: relative;
			bottom: calc(var(--vgap)*.75);
			font-style: italic;
			text-align: center;
		}

		li{
			font-size: var(--lg);
			font-weight: 300;
			line-height: 1.5;
			margin: .5rem 0;
		}

		hr{
			border: .5px solid var(--fg-border);
			margin: 2rem 0 1rem 0;
		}

		table, th, td{
			font-weight: 300;
			border: 1px solid var(--fg-border);
			border-collapse: collapse;
			border-spacing: 0;
			margin: 2rem 0 1rem 0;
		}
		
		td, th{
			padding: .5rem;
			text-align: left;
		}