@import url("https://p.typekit.net/p.css?s=1&k=udr8zzm&ht=tk&f=49611.49613.49627&a=166593744&app=typekit&e=css");

:root {
	--fs--2: clamp(0.52rem, 0.6vw, 0.8rem);
	--fs--1: clamp(0.75rem, 0.579rem + 0.329vw, 0.98rem);
	--fs-0: clamp(0.9rem, 0.8482rem + 0.2857vw, 1.2rem);
	--fs-1: clamp(1.0625rem, 0.8393rem + 0.7143vw, 1.6rem);
	--fs-2: clamp(1.763rem, 0.7212rem + 2.6923vw, 3.75rem);
	--fs-3: clamp(1.575rem, 0.1923rem + 5.3846vw, 9rem);
	--fs-4: clamp(1.6875rem, 0.364rem + 8.0769vw, 11rem);
	--fs-5: clamp(2.625rem, 0.4rem + 9.7vw, 11.25rem);
	--content-size: min(100% - 2rem, 1100px);
	--view-outline: 4px;
	--foreground: #000;
	--background: #FFF;
	--line-width: 2px;
}

@font-face {
	font-family: Venn;
	src: url("https://use.typekit.net/af/f704af/00000000000000007735f77e/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),
		url("https://use.typekit.net/af/f704af/00000000000000007735f77e/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),
		url("https://use.typekit.net/af/f704af/00000000000000007735f77e/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
	font-display: auto;
	font-style: normal;
	font-weight: 400;
	font-stretch: normal;
}
@font-face {
	font-family: Venn;
	src: url("https://use.typekit.net/af/bb6092/00000000000000007735f77b/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),
		url("https://use.typekit.net/af/bb6092/00000000000000007735f77b/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),
		url("https://use.typekit.net/af/bb6092/00000000000000007735f77b/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
	font-display: auto;
	font-style: normal;
	font-weight: 700;
	font-stretch: normal;
}
@font-face {
	font-family: Venn;
	src: url("https://use.typekit.net/af/4e6af3/00000000000000007735f786/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n8&v=3") format("woff2"),
		url("https://use.typekit.net/af/4e6af3/00000000000000007735f786/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n8&v=3") format("woff"),
		url("https://use.typekit.net/af/4e6af3/00000000000000007735f786/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n8&v=3") format("opentype");
	font-display: auto;
	font-style: normal;
	font-weight: 800;
	font-stretch: expanded;
}

body {
	font-family: Venn, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: var(--fs-0);
	font-weight: 500;
	line-height: 160%;
	color: var(--foreground);
	background-color: var(--background);
	margin: 0;
	padding: 0;
	display: grid;
	grid-auto-columns: 1fr;
	min-block-size: 100dvh;
	scroll-behavior: smooth;
}
a {
	color: #454545;
	color: color-mix(in srgb, var(--foreground) 60%, var(--background));
	transition: 0.3s color linear;
	text-decoration: none;
}
a:hover {
	color: #676767;
	color: color-mix(in srgb, var(--foreground) 70%, var(--background));
}
h2,
h3 + p,
button,
.button {
	font-family: Venn, sans-serif;
	text-wrap: balance;
	font-weight: 800;
	font-stretch: expanded;
	text-transform: uppercase;
	line-height: 130%;
	margin-block: 0;
}
h1 {
	font-size: var(--fs-0);
	font-weight: 500;
	padding-block: clamp(0.8rem, 1.3lh, 2.2rem);
}
h1,
p {
	position: relative;
	margin-block: 0;
}
p,
h3 {
	font-weight: 500;
	font-stretch: normal;
}
input,
select,
textarea,
button {
	font-family: inherit;
	font-size: inherit;
}
main {
	--scroll: 0;
	--scroll-offset: 0;
	display: grid;
	justify-content: center;
	overflow-y: scroll;
	scroll-behavior: smooth;
/* 	scroll-snap-type: y proximity; */
}
section,
.gap {
	position: relative;
	display: grid;
	align-items: center;
	text-align: center;
	scroll-margin: 0;
}
section {
	scroll-snap-align: start;
	box-shadow: 0 0 0 var(--view-outline) var(--background) inset, 0 0 0 0 var(--foreground) inset;
	transition: 0.5s box-shadow ease-in-out 0.2s;
	min-block-size: clamp(30rem, 100dvh, 160rem);
}
.full {
	inline-size: 100vw;
}
.dark {
	--foreground: #FFF;
	--background: #000;
	color: var(--foreground);
	background-color: var(--background);
}
.icon.arrow {
	position: relative;
	display: inline-block;
	color: transparent;
	background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAxMiAxMiI+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTUuOTk5MTYgMTJjLjE3MTk0LS4wMDg5LjMwODE0LS4wNzAzLjM5My0uMTUxOGw1LjQzMDQ0LTUuMTQyNzhjLjIzNzgtLjIzNjYxLjIyNzctLjU5MDQuMDIyMy0uODA4MDItLjIwNTQtLjIxNzYzLS41OTA2LS4yMjc2OC0uODA4My0uMDIyMzJMNi41NzA4IDEwLjA5ODJWLjU3MTQyMkM2LjU3MDguMjU1NTY5IDYuMzE1MTMgMCA1Ljk5OTE3IDBjLS4zMTU5NiAwLS41NzE2Mi4yNTU1NzctLjU3MTYyLjU3MTQyMlYxMC4wOTgyTC45NjE3MyA1Ljg3NTA4Yy0uMjE3NzA5LS4yMDUzNi0uNTk1MDYyLS4xODc1LS44MDgzMDYuMDIyMzItLjIxOTk0MTQuMjE3NjMtLjE5NTM3ODcuNjAyNjguMDIyMzI5LjgwODAyTDUuNjA2MTkgMTEuODQ4MmMuMTM4NDQuMTM2Mi4yNTY3Ny4xNDI5LjM5Mjk3LjE1MThaIi8+PC9zdmc+") scroll no-repeat 50% 50% / 100% auto;
	aspect-ratio: 1;
	min-inline-size: 1ch;
	margin-inline: 0.9ch;
	transition: 0.3s translate ease;
}
a:hover .icon.arrow.down {
	translate: 0 0.3em;
}
.icon.arrow.down::after {
	content: '';
	position: absolute;
	inline-size: 0.1em;
	background-color: var(--foreground);
	inset: 0.5em calc(50% - 0.05em) 0.5em auto;
	transition: 0.3s inset ease;
}
a:hover .icon.arrow.down::after {
	inset: 0.2em calc(50% - 0.05em) 0.5em auto;
}
.line,
.box {
	display: grid;
	inline-size: 100dvw;
	grid-template-columns: 1fr;
}
.line {
	position: absolute;
	height: var(--line-width);
	background-color: #CCC;
}
.box {
	position: relative;
	border-block: var(--line-width) solid #CCC;
}
.box.start {
	border-block-end: 0 none;
}
.box.end {
	border-block-start: 0 none;
}
.line,
.current .line,
.gap .line {
	background-color: color-mix(in srgb, var(--foreground) 20%, transparent);
}
.box,
.current .box {
	border-block-color: color-mix(in srgb, var(--foreground) 20%, transparent);
}
.dark .line,
.dark.current .line,
.gap.dark .line {
	height: 2px;
	background-color: color-mix(in srgb, var(--foreground) 35%, transparent);
}
.dark .box,
.dark.current .box {
	border-block-color: color-mix(in srgb, var(--foreground) 35%, transparent);
}
section > .line {
	margin-block: 0;
	outline: 0;
	z-index: 0;
}
section > :is(h2, p):has(.line) {
	position: relative;
	z-index: 1;
}
section > :is(h2):has(.line.center) {
	line-height: 150%;
	padding-block: 0;
}
section > :is(h2, p):has(.line) {
	padding-block: 0.4lh;
}
h2 {
	font-size: var(--fs-4);
}
h2:has(.box,.line) {
	background-color: var(--background);
}
section:is(#momentun, #second, #reveal) h2 {
	line-height: 150%;
	margin-block: clamp(2rem, 5dvh, 10rem);
}
#momentum h2 {
	margin-block-start: clamp(2rem, 5dvh, 30rem);
	align-self: start;
}
#momentum .scroll {
	margin-block-start: clamp(1rem, 10dvh, 10rem);
}
@media (prefers-reduced-motion: no-preference) {
	.line {
		transition: 2s background-color linear, 2s margin-block ease-in-out, 2s inset ease-in-out;
	}
	.box {
		transition: 2s border-color linear, 2s margin-block ease-in-out, 2s inset ease-in-out;
	}
	h2.box,
	h2 .box {
		overflow: hidden;
	}
	h2.box .text,
	h2 .box .text {
		filter: opacity(0%);
		translate: 0% 100%;
		transition: 0.1s translate cubic-bezier(0.190, 1.000, 0.220, 1.000) 3s, 0.1s filter linear 3s;
	}
	.current h2.box .text,
	.current h2 .box .text {
		filter: none;
		translate: none;
		transition-duration: 0.9s;
		transition-delay: 0.35s;
	}
	.current h2 .box:nth-of-type(2) .text {
		transition-delay: 0.45s;
	}
	.current h2 .box:nth-of-type(3) .text {
		transition-delay: 0.55s;
	}
}
.countdown {
	font-size: var(--fs-5);
	font-stretch: expanded;
	background: url("/images/photos/01.jpg") scroll no-repeat 50% 100vh / cover,
		url("/images/photos/02.jpg") scroll no-repeat 50% 100vh / cover,
		url("/images/photos/03.jpg") scroll no-repeat 50% 100vh / cover,
		url("/images/photos/04.jpg") scroll no-repeat 50% 100vh / cover,
		url("/images/photos/05.jpg") scroll no-repeat 50% 100vh / cover,
		url("/images/photos/06.jpg") scroll no-repeat 50% 100vh / cover,
		url("/images/photos/07.jpg") scroll no-repeat 50% 100vh / cover;
}
#countdown .countdown:has(.line) {
	padding-block: 0.6em;
}
#countdown .countdown.units:has(.line) {
	padding-block-end: 0;
}
#countdown .countdown > .line:last-of-type {
	inset-block-end: 0;
}
#countdown .countdown.units > .line:last-of-type {
	display: none;
}
#countdown.current .countdown.photo {
	background-position-y: 50%;
}
#countdown.current .countdown.photo.photo-1 {
	background-image: url("/images/photos/02.jpg");
}
#countdown.current .countdown.photo.photo-2 {
	background-image: url("/images/photos/03.jpg");
}
#countdown.current .countdown.photo.photo-3 {
	background-image: url("/images/photos/04.jpg");
}
#countdown.current .countdown.photo.photo-4 {
	background-image: url("/images/photos/05.jpg");
}
#countdown.current .countdown.photo.photo-5 {
	background-image: url("/images/photos/06.jpg");
}
#countdown.current .countdown.photo.photo-6 {
	background-image: url("/images/photos/07.jpg");
}
.countdown time > span {
	display: grid;
	gap: 0.2lh 0;
}
.countdown time {
	display: flex inline;
	flex-wrap: wrap;
	align-content: center;
	line-height: 100%;
	gap: 0.1ch;
}
.countdown .unit {
	display: none;
	font-size: var(--fs--2);
	font-stretch: expanded;
	line-height: 300%;
	text-transform: uppercase;
	font-weight: 800;
	margin-block: 0.5lh 0;
}
.countdown.units .unit {
	display: block;
}
@media (width >= 600px) {
	#countdown .countdown:has(.line) {
		padding-block: 3.1lh;
	}
	.countdown .unit {
		font-size: var(--fs--1);
		margin-block-start: 1.1lh;
	}
}
.countdown .colon {
	font-size: 0.5em;
}
#countdown .countdown > .line:first-of-type {
	inset-block-start: 0;
}
#countdown .countdown > .line:last-of-type {
	inset-block-end: 0;
}
#countdown .unit .line {
	inset-inline: 0;
}
#countdown .countdown .unit .line:first-child::after {
	position: absolute;
	content: '';
	background-color: var(--background);
	height: 3em;
	z-index: -1;
}
#countdown .countdown:has(video) {
	overflow: hidden;
}
#countdown .countdown video {
	position: absolute;
	inset: 0;
	translate: 0 -50%;
	pointer-events: none;
	filter: brightness(1%) opacity(1);
	z-index: -1;
}
#countdown .countdown.video video {
	filter: none;
}
#join {
	align-content: start;
	justify-content: center;
	gap: 0;
	contain: content;
	height: fit-content;
}
#join h2 {
	margin-block: clamp(1.8rem, 7vw, 5rem);
}
#join h3,
#join p {
	margin-block: 0;
}
#join h3 {
	line-height: 240%;
}
#join p {
	line-height: 180%;
}
#join .locations {
	line-height: 120%;
}
#join h3 + p {
	font-size: var(--fs-2);
	border-block-start: 0 none;
}
#join h2 + h3 ~ *,
#join .locations > .box {
	border-block-start: 0 none;
}
#join .locations > .box {
	padding-block: 0.25lh;
}
#join .colon {
	position: relative;
	font-size: 0.8em;
	margin-inline: 0.12ch;
	inset-block-end: 0.15em;
}
@media (width >= 600px) {
	#join .locations {
		line-height: 150%;
		margin-block-end: clamp(2rem, 7vw, 5rem);
	}
	#join .locations > .box {
		padding-block: 0.18lh;
	  }
}
@media (prefers-reduced-motion: no-preference) {
	#join h3,
	#join p {
		filter: opacity(0%);
		transition: 0.1s filter linear 3s;
	}
	#join.current h3,
	#join.current p {
		filter: none;
		transition-duration: 0.4s;
		transition-delay: 0.7s;
	}
}
#access form,
#access p {
	display: grid;
	gap: 1rem;
}
#access form {
	inline-size: min(80%, 50ch);
	margin-inline: auto;
}
#access input[type="email"] {
	text-align: center;
	line-height: 150%;
	padding-block: 0.2lh;
	padding-inline: 1ex;
	border-radius: 0;
	border: var(--line-width) solid #CCC;
}
#access input[type="email"]:focus,
#access input[type="email"]:active,
#access input[type="email"]:focus-visible,
#access input[type="email"]:focus-within {
	outline: none;
	box-shadow: none;
}
#access button {
	color: var(--background);
	background-color: var(--foreground);
	border: 0 none;
	line-height: 150%;
	padding-block: 0.3lh;
}
#access button:hover,
#access button:focus-visible {
	outline: none;
	box-shadow: none;
	background-color: color-mix(in srgb, var(--foreground) 80%, var(--background));
}
#now,
#post {
	align-content: center;
}
#now h1,
#post h1,
#now h2,
#post h2,
#now p,
#post p {
	padding-block: clamp(3rem, 2vw + 3vh, 6rem);
}
#now h2,
#post h2 {
	font-size: var(--fs-5);
}
#now :is(h1,p),
#post :is(h1,p) {
	font-size: var(--fs-1);
}
#now .box + .box,
#post .box + .box,
#post hgroup .box:first-child {
	border-block-start: 0 none;
}
#now .button {
	display: inline-flex;
	color: var(--background);
	background-color: var(--foreground);
	margin-inline: auto;
	padding-block: 0.6lh;
	padding-inline: 4ex;
	transition: 0.3s padding-inline ease-in-out 0.5s;
}
#now .button:hover,
#now .button:focus-visible {
	padding-inline: 5ex;
	transition-delay: 0s;
}
.gap {
	height: clamp(20rem, 50dvh, 120rem);
}
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	inline-size: 1px;
	word-wrap: normal;
}

@keyframes line-position {
	0% {
		translate: none;
	}
	100% {
		translate: 0 -15rem;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.gap .line {
		animation-name: line-position;
		animation-play-state: paused;
		animation-delay: calc(-1s * (var(--scroll) + var(--scroll-offset)));
		animation-timing-function: linear;
		animation-duration: 1s;
		animation-iteration-count: 1;
		animation-fill-mode: both;
	}
}
#second > .line:first-of-type,
#reveal > .line:first-of-type {
	inset-block-start: clamp(5rem, 12% - 2rem, 30rem);
}
#second > .line:nth-of-type(2),
#reveal > .line:nth-of-type(2) {
	inset-block-end: clamp(5rem, 12% - 2rem, 30rem);
}
section > :is(h1,h2,p) .line.start {
	inset-block-start: 0;
}
section > :is(h1,h2,p) .line.center {
	position: relative;
}
section > :is(h1,h2,p) .line.end {
	inset-block-end: 0;
}
.gap .line:nth-child(1) {
	inset-block-start: 10%;
}
.gap .line:nth-child(2) {
	inset-block-start: 20%;
}
.gap .line:nth-child(3) {
	inset-block-start: 50%;
}
.gap .line:nth-child(4) {
	inset-block-end: 20%;
}
.gap .line:nth-child(5) {
	inset-block-end: 10%;
}