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

:root {
	font-size: 16px;
	--color-text: #000;
	--color-bg: hsl(22deg 25% 73%);
	--color-text-alt: hsl(1deg 69% 50%);
	--color-link: #000;
	--color-link-hover: #000;
	/* Column/item variables */
	--ratio: 1.3; 				/* image ratio */
	--grid-item-width: 32vw;	/* image width */
	--justify: space-between;	/* spread columns or center */
	--gap: 2.5vw;				/* column gap and margin for items */
	--rotation: 0deg;			/* section rotation */
	--radius: 0px;				/* image border radius */
	--offset: -30vh;			/* offset of even columns */
	/* content section */
	--radius-small: 4px; 		/* border radius of small images */
}

body {
	margin: 0;
	text-transform: uppercase;
	color: var(--color-text);
	background-color: var(--color-bg);
	font-family: acumin-pro, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.demo-2 {
	--color-bg: #df6a26;
    --color-text-alt: #eaa750;
	--ratio: 1;
	--grid-item-width: 23vw;
	--radius: 8px;
}

.demo-3 {
	--color-bg: #ede9e6;
	--color-text-alt: hsl(10deg 69% 50%);
	--ratio: 1.1;
	--grid-item-width: 17vw;
	--radius: 12px;
	--justify: center;
	--gap: 2.5vw;
}

.demo-4 {
	--color-text: #fff;
	--color-link: #fff;
	--color-link-hover: #aaa;
	--color-bg: #0f0e0e;
	--color-text-alt: hsl(10deg 69% 50%);
	--ratio: 1;
	--grid-item-width: 25vw;
	--radius: 4px;
	--justify: center;
	--gap: 2.5vw;
	--rotation: -45deg;
	--offset: 20vh;
}

.demo-5 {
	--color-bg: hsl(1deg 15% 83%);
	--color-text-alt: hsl(10deg 69% 50%);
	--ratio: 0.8;
	--grid-item-width: 30vw;
	--radius: 0;
	--justify: center;
	--gap: 1.5vw;
	--offset: 0;
}

/* Page Loader */
.js .loading::before,
.js .loading::after {
	content: '';
	position: fixed;
	z-index: 1000;
}

.js .loading::before {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color-bg);
}

.js .loading::after {
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	border-radius: 50%;
	opacity: 0.4;
	background: var(--color-link);
	animation: loaderAnim 0.7s linear infinite alternate forwards;

}

@keyframes loaderAnim {
	to {
		opacity: 1;
		transform: scale3d(0.5,0.5,1);
	}
}

a {
	text-decoration: none;
	color: var(--color-link);
	outline: none;
	cursor: pointer;
}

a:hover {
	color: var(--color-link-hover);
	outline: none;
}

/* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */
a:focus {
	/* Provide a fallback style for browsers
	 that don't support :focus-visible */
	outline: none;
	background: lightgrey;
}

a:focus:not(:focus-visible) {
	/* Remove the focus indicator on mouse-focus for browsers
	 that do support :focus-visible */
	background: transparent;
}

a:focus-visible {
	/* Draw a very noticeable focus style for
	 keyboard-focus on browsers that do support
	 :focus-visible */
	outline: 2px solid red;
	background: transparent;
}

.unbutton {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	cursor: pointer;
}

.unbutton:focus {
	outline: none;
}

.frame {
	width: 100%;
	line-height: 1.2;
	font-size: 1rem;
	color: var(--color-title);
	padding: 1rem;
	display: grid;
	grid-template-columns: auto auto;
	grid-template-areas: 'title prev' 'nav nav' 'sponsor sponsor';
	grid-gap: 1rem;
	z-index: 100;
	position: absolute;
}

.frame a:not(.frame__title-back),
.row + p a {
	white-space: nowrap;
	overflow: hidden;
	position: relative;
}

.frame a:not(.frame__title-back)::before,
.row + p a::before {
	content: '';
	height: 1px;
	width: 100%;
	background: currentColor;
	position: absolute;
	top: 90%;
	transition: transform 0.3s;
	transform-origin: 0% 50%;
}

.frame a:not(.frame__title-back):hover::before,
.row + p a:hover::before {
	transform: scaleX(0);
	transform-origin: 100% 50%;
}

.frame__title {
	grid-area: title;
	display: flex;
	white-space: nowrap;
}

.frame__title-main {
	font-size: 1rem;
	margin: 0;
	font-weight: normal;
}

.frame__title-back {
	position: relative;
	display: flex;
	align-items: flex-end;
}

.frame__title-back span {
	display: none;
}

.frame__title-back svg {
	fill: currentColor;
}

.frame__prev {
	justify-self: end;
	grid-area: prev;
}

.frame__demos {
	grid-area: nav;
	display: flex;
	flex-wrap: wrap;
	justify-self: stretch;
	justify-content: space-between;
}

.frame__demos-title {
	font-weight: 400;
	margin: 0;
	font-size: 1rem;
	width: 100%;
	color: var(--color-text-alt);
}

.frame__demos-item {
	grid-row: 2;
}

.section {
	line-height: 1;
	position: static;
    top: 0;
    z-index: 4;
    width: 100%;
    min-height: 100vh;
    background: var(--color-bg);
}

.section--intro {
	margin-bottom: 250vh;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	justify-content: center;
	padding: 8rem 0 2rem;
	cursor: default;
}

.section__title {
	font-family: kudryashev-d-excontrast-sans, sans-serif;
	font-weight: 300;
	font-size: clamp(2rem,17vw,12.5rem);
	margin: 5vh 0 6vh;
	line-height: 0.9;
	text-transform: none;
	-moz-font-feature-settings: "swsh";
	-webkit-font-feature-settings: "swsh";
	font-feature-settings: "swsh";
}

.section__title--medium {
	font-size: clamp(1.5rem,12vw,9rem);
}

.section__text {
	margin: 0;
	max-width: 400px;
}

.section__text--alt {
	margin-top: auto;
	color: var(--color-text-alt);
}

.section__arrow {
	transform: translateY(3px) rotate(135deg);
	fill: currentColor;
}

.section--columns {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	width: 100%;
	height: 100vh;
}

.columns {
	width: 100%;
	position: relative;
	display: flex;
	justify-content: var(--justify);
	gap: var(--gap);
	height: 100%;
	transform: rotate(var(--rotation));
	align-items: center;
	will-change: transform, opacity;
}

.column-wrap {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	padding: 5vh 0 15vh;
	will-change: transform;
}

.column-wrap:nth-child(even) {
	margin-top: var(--offset);
}

.column {
	position: relative;
	display: block;
	will-change: transform;
}

.column__item {
	--grid-item-height: calc(var(--grid-item-width) * var(--ratio));
	width: var(--grid-item-width);
	height: var(--grid-item-height);
	position: relative;
	overflow: hidden;
	border-radius: var(--radius);
	cursor: pointer;
	margin: 0 0 var(--gap) 0;
	z-index: 1;
	will-change: transform, filter;
}


.column__item-img {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: 50% 50%;
	will-change: transform;
}

.section--showcase {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	justify-content: center;
	padding: 8rem 5vw 10vh;
	cursor: default;
}

.section__header {
	display: flex;
	border-bottom: 1px solid #000;
	width: 100%;
	align-items: center;
	justify-content: space-around;
	padding: 4vh 8vw;
	margin-bottom: 4rem;
}

.section__year {
	color: var(--color-text-alt);
}

.row {
	text-align: left;
	width: 100%;
}

.row__header {
	width: 100%;
	display: grid;
	grid-template-columns: 4ch 1fr;
	grid-template-rows: auto auto;
	grid-gap: 2rem;
	justify-content: start;
	padding: 6rem 0 3rem;
}

.row__header span:last-child {
	grid-column: 1 / span 2;
}

.row__content {
	display: grid;
	width: 100%;
	grid-auto-flow: column;
	grid-gap: 1rem;
	justify-content: start;
}

.row__content-imgwrap {
	overflow: hidden;
	position: relative;
	border-radius: var(--radius-small);
}

.row__content-img {
	aspect-ratio: 2;
	height: 100px;
	background-size: cover;
	background-position: 50% 50%;
}

.row__content-imgwrap:nth-child(even) .row__content-img{
	aspect-ratio: 1;
}

.row__content-imgwrap:nth-child(4n) .row__content-img{
	aspect-ratio: 1.5;
}

.row__content-imgwrap:last-child {
	justify-content: end;
}

.row__content-imgwrap:last-child .row__content-img {
	aspect-ratio: 2.75;
}

.row + p {
	margin-top: 40vh;
}

@media screen and (min-width: 53em) {
	.frame {
		grid-template-columns: 15% 15% 1fr 15% 15%;
		grid-template-rows: auto;
		padding: 2rem 3rem;
		grid-template-areas: 'title prev nav sponsor sponsor';
		justify-content: start;
		grid-gap: 2rem;
		align-items: center;
		justify-items: start;
	}
	.frame__prev {
		justify-self: start;
	}
	.frame__demos {
		text-align: center;
		justify-self: center;
	}
	.section, 
	.row {
		font-size: 1.45rem;
	}
	.row__header {
		display: grid;
		grid-template-columns: 4ch auto 1fr;
		grid-template-rows: auto;
	}
	.row__header span:last-child {
		justify-self: end;
		grid-column: revert;
	}
}