@charset "utf-8";
@import url('https://rsms.me/inter/inter.css');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');
@import url('reset.css');
@import url('colors.css');
@import url('media.css');
@font-face {
	font-family: "Source Sans 3 Commas";
	src: url("/fonts/subset-SourceSans3-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

body {
	--side-margins: 5vw;
	--space-XXL: 4em;
	--space-XL: 3em;
	--space-L: 2em;
	--space-M: 1.5em;
	--space-S: 1em;
	--space-XS: 0.75em;
	--space-XXS: 0.5em;
}

body {
	font-family: 'Inter var', sans-serif;
	font-weight: 380;
	font-size: clamp(18px, 16.4px + 0.42vw, 28px);
	line-height: 1.7em;
	font-variation-settings: "opsz" 16;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: 100%;
}

/*
////////////////////////////////////////////////////////////
//
//  TYPOGRAPHY
//
////////////////////////////////////////////////////////////
*/

h1 {
	font-family: 'Inter var', sans-serif;
	font-weight: 500;
	font-size: clamp(36px, 22.3px + 3.5vw, 160px);
	line-height: 1em;
	font-variation-settings: "opsz" 36;
	letter-spacing: -0.01em;
}

h1 .link, h2 .link {
	font-family: 'Lora', serif;
	font-weight: 500;
	font-style: italic;
	font-size: 1.08em;
	vertical-align: baseline;
	letter-spacing: -0.02em;
}

h2, button.full-width-button {
	font-family: 'Inter var', sans-serif;
	font-weight: 500;
	font-size: clamp(24px, 18px + 1.5vw, 60px);
	font-variation-settings: "opsz" 16;
	line-height: 1.1em;
	letter-spacing: -0.01em;
	margin-bottom: var(--space-XS);
}

h3 {
	font-size: 0.9em;
	line-height: 1em;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: var(--space-S);
}

/*
////////////////////////////////////////////////////////////
//
//  DETAILS
//
////////////////////////////////////////////////////////////
*/

a {
	text-decoration: none;
	cursor: pointer;
}

.comma {
	font-family: "Source Sans 3 Commas", sans; 
	font-weight: 500;
}

.arrow {
	font-size: 0.9em;
}

strong {
	font-weight: 600;
}

.year {
	font-size: 0.77em;
	font-weight: 570;
	letter-spacing: 0.02em;
}

.nowrap {
	white-space: nowrap;
}

.line-through {
  text-decoration: line-through;
}

.sub {
	vertical-align: sub;
}

/*
////////////////////////////////////////////////////////////
//
//  MENU
//
////////////////////////////////////////////////////////////
*/

.content {
	padding-top: calc(var(--space-M) * 2 + var(--space-L));
}

.menu {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background-color: rgba(255, 255, 255, 0.75); /* semi-transparent white */
	backdrop-filter: blur(40px); /* the key frost effect */
	-webkit-backdrop-filter: blur(40px); /* Safari support */
	transform: translateY(0);
	will-change: transform;
	backface-visibility: hidden;
	contain: layout paint;
	display: flex;
	flex-wrap: wrap;
	padding-left: var(--side-margins);
	padding-right: var(--side-margins);
}

.menu a {
	margin-top: var(--space-M);
	margin-bottom: var(--space-M);
	margin-right: var(--space-M);
	line-height: var(--space-L);
}

#theme-icon svg {
	position: absolute;
	top: var(--space-M);
	right: var(--side-margins);
	display: block;
	width: var(--space-L);
	height: var(--space-L);
	stroke-width: 3px;
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: auto;
	cursor: pointer;
}

/*
////////////////////////////////////////////////////////////
//
//  BLOCKS
//
////////////////////////////////////////////////////////////
*/

#intro {
	margin-top: 25vh;
}

img, video {
	width: 100%;
	display: block;
}

.block, .menu, .scrollable {
	padding-left: var(--side-margins);
	padding-right: var(--side-margins);
}

.block {
	margin-bottom: var(--space-XL);
}

.block > .col:not(:last-child),
.block > .col-desc:not(:last-child),
.block > .double:not(:last-child),
.col img:not(:last-child),
.col video:not(:last-child),
.block.fullwidth img:not(:last-child),
.block.fullwidth video:not(:last-child) {
	margin-bottom: var(--space-L);
}

.col p:not(:last-child),
.col ul:not(:last-child),
.col ol:not(:last-child) {
	padding-bottom: var(--space-S);
}

.block.desc .col {
	padding-top: var(--space-S);
}

.double {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: var(--space-L);
}

.double img, .double video {
	margin-bottom: 0 !important;
}

.col-desc p {
	margin-top: var(--space-S);
}

.block.footer {
	padding-top: var(--space-XXL);
	margin-bottom: var(--side-margins);
}

.scrollable {
	overflow-x: scroll;
}

.scrollable::-webkit-scrollbar {
	display: none; /* Hide scrollbar in Chrome, Safari and Opera */
}

.scrollable {
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}

/*
////////////////////////////////////////////////////////////
//
//  LISTS
//
////////////////////////////////////////////////////////////
*/

.navigation {
	border-radius: 1em;
	padding: var(--space-L);
}

.navigation a, p a {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

ol li {
	list-style: decimal;
	list-style-position: outside;
	margin-left: 1.5em;
}

ul li {
	list-style: disc;
	list-style-position: outside;
	margin-left: 1.5em;
}

.nobullet li {
	list-style: none;
	text-indent: -1.65em;
	padding-left: 1.5em;
}

/*
////////////////////////////////////////////////////////////
//
//  GALLERY
//
////////////////////////////////////////////////////////////
*/

.grid-container {
	display: grid;
	width: 100%;
	margin: auto;
}

.grid-item img {
	width: 100%;
	height: auto;
}

.grid-item h3 {
	margin-bottom: var(--space-XS);
}

.grid-item h2 {
	margin-bottom: 0;
}

.grid-item img {
	margin-bottom: var(--space-M);
}

.full-width-button {
	width: 100%;
	padding: var(--space-M);
	margin-top: var(--space-L);;
	border: 1px solid var(--contentSecondary);
	background: var(--backPrimary);
	cursor: pointer;
	border-radius: 10rem;
	text-align: center;
}

.archive {
	height: 0;
	overflow: hidden;
	opacity: 0;
	transition: opacity 1s ease;
	will-change: opacity;
}
  
.archive.visible-archived {
	height: auto;
	opacity: 1;
	margin-top: var(--space-XL);
	
}