:root {
	--background: hsl(240, 0%, 100%);
	--nav-height: 64px;
	--safe-top: env(safe-area-inset-top);
	--safe-bottom: env(safe-area-inset-bottom);
}
* {
	-webkit-tap-highlight-color: transparent;
}
@media (prefers-color-scheme: dark) {
	:root {
		--background: hsl(240, 5%, 13%);
		--card: hsl(240, 5%, 13%);
		--surface: hsl(240, 5%, 10%);
		--selection: hsl(240, 5%, 15%);
		--selection-active: hsl(240, 5%, 18%);
		--text-primary: hsl(0, 0%, 100%);
		--text-secondary: hsl(0, 0%, 75%);
		--shading: 255,255,255;
	}
}
* {
	box-sizing: border-box;
}
body {
	background-color: var(--background);
}
h1, h2, #page-content .intro {
	font-family: "Söhne", sans-serif;
}

#app-nav {
	display: none;
}
#wrapper {
	width: 100%;
	height: 100%;
	display: flex;
	position: absolute;
	top: 0;
	left: 0;
}
#sidebar {
	width: 288px;
	box-sizing: border-box;
	overflow-y: auto;
	position: relative;
	.heading {
		padding: 2em 1.5em;
		h1 {
			font-size: 1.5em;
			font-weight: 600;
			letter-spacing: -0.0125em;
			cursor: pointer;
		}
	}
	.footer {
		display: flex;
		flex-direction: row;
		position: absolute;
		bottom: 0;
		width: 100%;
		border-top: 1px solid rgba(var(--shading), 0.08);
		.item {
			flex: 1;
			cursor: pointer;
			a {
				display: block;
				width: 100%;
				padding: 1em 1.5em;
				text-align: center;
				border: none;
			}
			&:hover {
				background-color: var(--selection);
			}
		}
	}
	.navigation {
		& > div {
			padding: 1em 1.5em;
			cursor: pointer;
		}
		.item {
			display: flex;
			flex-direction: column;
			margin-bottom: 1px;
			transition: background-color 0.05s ease-out;
			&.active, &:hover {
				background-color: var(--selection);
			}
			&:active {
				background-color: var(--selection-active);
			}
		}
		.sub {
			color: var(--text-secondary);
		}
	}
}
#preview {
	background: var(--surface);
	flex: 1;
	display: flex;
	overflow-y: auto;
	box-shadow: var(--elevation-1);
	z-index: 1;
	padding-bottom: 1px;
}
#page-content {
	width: 100%;
	max-width: 1280px;
	padding: calc(var(--base-gap) * 2);
	margin: 0 auto;
	opacity: 1;
	transition: opacity 1.25s 0.15s var(--ease-normal),
		translate 1.25s var(--ease-normal);
	&.hidden {
		transition: all 0s;
		opacity: 0;
		translate: 0 12px;
	}
	& > * {
		margin-bottom: var(--base-gap);
		&:not(#welcome-grid):last-child {
			padding-bottom: calc(var(--base-gap) * 4);
		}
	}
	.spacer {
		height: var(--base-gap);
	}
	h1 {
		font-size: 7em;
		line-height: 1;
		font-weight: 700;
		letter-spacing: -0.02em;
		margin-bottom: 7rem;
	}
	h2 {
		font-size: 2em;
		font-weight: 700;
		letter-spacing: -0.0125em;
		text-wrap: pretty;
		line-height: 1.35;
	}
	p {
		margin-bottom: calc(var(--base-gap) / 2);
		&.title {
			font-weight: 600;
		}
		&.signoff {
			padding-top: var(--base-gap);
			color: var(--text-tertiary);
		}
		&.footnote {
			font-size: 0.8em;
			color: var(--text-secondary);
			margin-top: var(--base-gap);
			a {
				color: inherit;
			}
		}
		.highlight {
			/* background: var(--highlight); */
			text-decoration: underline;
		}
		.scroll-up {
			border-bottom: 1px dotted;
			cursor: pointer;
		}
	}
	h2 + p {
		margin-top: var(--base-gap);
	}
	h1 + .block {
		margin-bottom: 6rem;
	}
	& > img, & > video {
		width: 100%;
		border-radius: var(--radius-large);
		object-fit: cover;
	}
	.container {
		width: 100%;
		border-radius: var(--radius-large);
		overflow: hidden;
		padding: 0;
		text-align: center;
		box-sizing: border-box;
		video {
			width: 80%;
			padding: calc(var(--base-gap) * 3) 0;
			border-radius: var(--radius-mid);
			overflow: hidden;
		}
		img {
			max-width: 100%;
			max-height: 800px;
			margin: auto;
		}
		&.fill video {
			padding: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		}
		
	}
	.block {
		&.two-col {
			display: flex;
			gap: var(--base-gap);
			& > * {
				flex: 1;
			}
		}
		&.six-col {
			display: grid;
			grid-template-columns: repeat(6, 1fr);
			gap: 1em;
			.brief {
				grid-column: 1 / 4;
			}
			.info {
				grid-column: 5 / 7;
			}
			.center {
				grid-column: 2 / 6;
			}
			.annotation {
				grid-column: 2 / 6;
			}
		}
		&.image-grid {
			gap: calc(var(--base-gap) / 2);
			display: flex;
			flex-direction: row;
			height: 800px;
			& > div {
				flex: 1;
				position: relative;
				border-radius: var(--radius-large);
				overflow: hidden;
			}
			.wrapper {
				position: relative;
				border-radius: var(--radius-large);
				overflow: hidden;
			}
			img, video {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
			.stack-two {
				display: flex;
				flex-direction: column;
				gap: calc(var(--base-gap) / 2);
				.wrapper {
					flex: 1;
					overflow: hidden;
				}
			}
		}
	}
}
#page-content {
	&[data-page="welcome"] {
		position: relative;
		width: 100%;
		height: auto;
		.intro {
			margin-bottom: calc(var(--base-gap) * 2);
			p {
				font-size: 2em;
				font-weight: 600;
				line-height: 1.4;
				letter-spacing: -0.0125em;
				margin: 0;
				&:last-child {
					color: var(--text-tertiary);
				}
			}
		}
	}
	&[data-page="edia"] {
		.container {
			background: linear-gradient(180deg, hsl(60, 10%, 70%) 25%, hsl(60, 10%, 80%) 100%);
		}
	}
	&[data-page="airs"] {
		.container {
			background: linear-gradient(180deg,hsl(228, 40%, 12%) 25%, hsl(228, 65%, 32%) 100%);
		}
		.container.neutral {
			background: var(--card);
		}
	}
	&[data-page="citizen"] {
		.container {
			background: #111;
			position: relative;
			video {
				display: block;
				width: auto;
				box-sizing: border-box;
				padding: 0;
				position: relative;
				left: 50%;
				transform: translateX(-50%);
				height: 520px;
			}
			img {
				max-height: 600px;
			}
		}
	}
	&[data-page="google"] {
		.container {
			background: var(--card);
			img {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}
	&[data-page="venmo"] {
		.container {
			background: linear-gradient(180deg,
			hsl(207, 100%, 50%) 35%, hsl(207, 100%, 63%) 100%);
			img {
				min-height: 640px;
				max-height: 85vh;
			}
		}
	}
}
#welcome-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
	width: 100%;
	gap: calc(var(--base-gap) / 2);
	padding-bottom: calc(var(--base-gap) * 2);
	.box {
		border-radius: var(--radius-large);
		position: relative;
		transition: all 0.15s var(--ease-normal);
		cursor: pointer;
		user-select: none;
		height: 400px;
		overflow: hidden;
		box-sizing: border-box;
		&:active {
			scale: 0.98;
		}
		img, video {
			width: 100%;
			height: 100%;
			object-fit: cover;
			position: absolute;
			top: 0;
			left: 0;
			transition: all 0.15s var(--ease-normal);
		}
		.info {
			position: absolute;
			width: 50%;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			text-align: center;
			opacity: 0;
			pointer-events: none;
			transition: all 0.15s var(--ease-normal);
			line-height: 1.4;
			text-wrap: pretty;
			z-index: 2;
			.title {
				font-weight: 600;
				margin-bottom: 0.25em;
			}
			.description {
				opacity: 0.8;
			}
		}
	}
}
#reading-list {
	max-width: 720px;
	li {
		list-style-type: none;
		margin-bottom: var(--base-gap);
		p.title {
			margin-bottom: calc(var(--base-gap) / 4);
		}
		p:not(.title){
			opacity: 0.85;
		}
	}
}

@media (hover: hover) {
	/* #welcome-grid .box:hover {
		img, video {
			opacity: 0.15;
		}
		.info {
			opacity: 1;
		}
	} */
}

@media screen and (max-width: 640px){
	:root {
		--base-gap: 1rem;
		--nav-height: calc(var(--safe-top) + 64px);
	}
	#wrapper {
		overflow: hidden;
	}
	#app-nav {
		display: flex;
		flex-direction: row;
		height: var(--nav-height);
		z-index: 2;
		position: absolute;
		top: var(--safe-top);
		left: 0;
		width: 100%;
		padding: 0 1.5em;
		box-sizing: border-box;
		align-items: center;
		h1 {
			flex: 1;
			text-align: center;
			font-weight: 600;
		}
		span:last-child {
			opacity: 0;
			pointer-events: none;
		}
	}
	#sidebar {
		width: 100%;
		padding-top: var(--nav-height);
		.heading {
			display: none;
		}
	}
	#preview {
		position: absolute;
		top: var(--nav-height);
		left: 0;
		width: 100%;
		height: calc(100% - var(--nav-height));
		transition: translate 0.4s var(--ease-normal);
		border-radius: 0;
		box-shadow: 0px 0px 8px rgba(0,0,0,0.1);
		overflow: auto;
		overscroll-behavior: contain;
		&.hidden {
			translate: 0 calc(100% - 64px - var(--safe-bottom));
		}
	}
	#page-content {
		padding: 0;
		h1 {
			font-size: 3em;
			padding: calc(var(--base-gap) * 2);
			margin-bottom: 0;
			padding-bottom: 0;
		}
		& > .block {
			padding: calc(var(--base-gap) * 2);
			&.six-col {
				display: flex;
				flex-direction: column;
			}
			&.image-grid {
				display: flex;
				flex-direction: column;
				height: 720px;
				padding: 0;
				& > div {
					border-radius: 0;
				}
				& > div:last-child {
					flex: 2;
				}
				.wrapper {
					border-radius: 0;
				}
			}
		}
		h1 + .block {
			margin-bottom: var(--base-gap);
		}
		.container {
			border-radius: 0;
		}
		.spacer {
			display: none;
		}
		& > img, & > video {
			border-radius: 0;
		}
		&[data-page="venmo"] {
			.container {
				img {
					min-height: auto;
				}
			}
		}
		&[data-page="welcome"]{
			.intro {
				padding: calc(var(--base-gap) * 2);
				margin-bottom: 0;
				p {
					font-size: 1.65em;
					display: inline;
				}
			}
		}
		&[data-page="citizen"] {
			.container {
				video {
					height: 288px;
				}
			}
		}
	}
	#welcome-grid {
		display: flex;
		flex-direction: column;
		gap: var(--base-gap);
		padding-bottom: var(--base-gap);
		margin-bottom: 0;
		.box {
			height: auto;
			min-height: 320px;
			max-height: 50vh;
			border-radius: 0;
			.info {
				width: calc(80%);
			}
		}
	}
	#reading-list {
		padding: calc(var(--base-gap) * 2);
	}
}

@media screen and (min-width: 641px) and (max-width: 1200px) {
	body {
		overflow: hidden;
	}
	#app-nav {
		--nav-gap: calc(var(--base-gap) / 1);
		display: grid;
		place-items: center;
		position: absolute;
		bottom: var(--nav-gap);
		left: calc(288px + var(--nav-gap));
		width: 64px;
		height: 64px;
		background: black;
		color: white;
		border-radius: 100%;
		box-shadow: var(--elevation-1);
		z-index: 10;
		cursor: pointer;
		& > :not(:first-child) {
			display: none;
		}
	}
	#wrapper {
		width: calc(100% + 288px);
		translate: -288px 0;
		transition: translate 0.45s var(--ease-normal);
		&:has(#preview.hidden) {
			translate: 0 0;
		}
	}
}