@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
	--fs--2: clamp(0.8rem, 0.6vw, 0.9rem);
	--fs--1: clamp(0.9rem, 0.9rem + 0.25vw, 1.05rem);
	--fs-0: clamp(0.95rem, 0.85rem + 0.4vw, 1.15rem);
	--fs-1: clamp(0.98rem, 0.88rem + 0.55vw, 1.55rem);
	--fs-2: clamp(1.763rem, 0.7212rem + 2.6923vw, 3.75rem);
	--fs-3: clamp(1.4rem, 0.1rem + 4.8vw, 7.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, 1400px);
	--view-outline: 4px;
	--foreground: #302320;
	--background: #fff;
	--primary: #a68a7d;
	--primary-subtle: #eae0da;
	--primary-mid: #ECE1D9;
	--accent: #8973F4;
	--mid-grey: #a6a6a6;
	--dark-foreground: VAR(--background);
	--dark-background: var(--foreground);
	--line-inline-size: 0.08rem;
	--gradient: transparent linear-gradient(180deg, var(--primary-subtle) 0%, var(--background) 100%) no-repeat scroll 50% 50% / cover;
	interpolate-size: allow-keywords;
}

@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;
}

/* header,
main,
footer,
div,
span,
h1,
h2,
h3,
h4,
ul,
svg,
details,
summary,
ul,
ol,
li,
audio,
p {
	outline: 1px dashed #e90037;
} */
html {
	color-scheme: light;
}
body {
	font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: var(--fs-0);
	font-weight: 300;
	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;
    transition-behavior: allow-discrete;
}
header {
	display: grid;
	justify-content: center;
	background: var(--gradient);
	border-block-end: var(--line-inline-size) solid var(--mid-grey);
}
footer {
	text-align: center;
	color: var(--dark-foreground);
	background-color: var(--primary);
	font-size: var(--fs--2);
	padding-block: 0.9lh;
}
footer:has(.logo) {
	background: transparent linear-gradient(180deg, var(--primary-mid) 0%, var(--background) 100%) no-repeat scroll 50% 50% / cover;
	padding-block: clamp(2rem, 2vw + 2vh, 10rem);
	padding-inline: clamp(3rem, 3vw + 3vh, 24rem);
}
strong {
	font-weight: 600;
}
a {
	color: #454545;
	color: color-mix(in srgb, var(--foreground) 60%, var(--primary-subtle));
	transition: 0.3s color linear;
	text-decoration: none;
}
a:hover {
	color: #676767;
	color: color-mix(in srgb, var(--foreground) 70%, var(--primary-subtle));
}
::selection {
	color: var(--dark-foreground);
	background-color: var(--accent);
}
h2,
h3,
summary,
button,
.button,
#timeline h3,
#timeline .statement {
	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-1);
	font-weight: 500;
	padding-block: clamp(1rem, 30dvh, 4rem);
}
h2 {
	font-size: var(--fs-3);
	padding-block: 0.5lh;
	line-height: 104%;
}
section h2:not(:has(.box)) {
	border-block-end: var(--line-inline-size) solid var(--mid-grey);
}
header,
header .logo,
footer .logo {
	display: grid;
	justify-content: center;
	align-items: center;
}
h1,
header .logo,
p {
	position: relative;
	margin-block: 0;
}
input,
select,
textarea,
button {
	font-family: inherit;
	font-size: inherit;
}
img {
	max-inline-size: 100%;
	block-size: auto;
	vertical-align: middle;
	font-style: italic;
	background-repeat: no-repeat;
	background-size: cover;
	shape-margin: 1rem;
}
main {
	display: grid;
	justify-content: center;
	overflow-x: hidden;
	overflow-y: auto; 
	scroll-behavior: smooth;
	scroll-snap-type: y proximity;
	max-inline-size: 100dvw;
}
section {
	position: relative;
	display: grid;
	align-items: center;
	text-align: center;
	inline-size: 100%;
	scroll-margin: 0;
	scroll-snap-align: start;
	margin-inline: auto;
}
#video {
	min-block-size: clamp(20rem, 90dvh, 100dvh - 9.7rem);
	grid-template-columns: 1fr;
	justify-content: center;
}
#why {
	padding-block: 0 clamp(2rem, 5vh, 15rem);
}
.full {
	inline-size: 100vw;
	min-block-size: clamp(30rem, 100dvh, 160rem);
	margin-inline: 0;
}
video {
	display: block;
	aspect-ratio: 16 / 9;
	inline-size: min(93% - 1rem, 1400px);
	block-size: auto;
	margin-block: clamp(3rem, 4vw + 4vh, 30rem);
	margin-inline: auto;
}
.dark,
.button {
	--foreground: #FFF;
	--background: #000;
	color: var(--foreground);
	background-color: var(--background);
}
button,
.button {
	padding-block: 0.6em;
	padding-inline: 1em;
}
button:hover,
.button:hover {
	text-decoration: none;
}
#video h2,
#video video,
#video .video-button {
	grid-area: 1 / 1 / -1 / -1;
}
.video-button {
	display: grid;
	justify-content: center;
}
#video .video-toggle {
	display: grid;
	align-items: center;
	background-color: transparent;
	border: 0 none;
	color: var(--dark-foreground);
	transition: 0.15s color linear 0.1s, 0.45s scale ease-in-out 0.1s;
}
#video .video-toggle svg {
	inline-size: 3rem;
}
#video video:hover + .video-button .video-toggle,
#video .video-button:hover .video-toggle,
#video .video-toggle:hover {
	color: var(--accent);
	scale: 1.2;
}
#video .video-toggle.play .pause,
#video .video-toggle.pause .play {
	display: none;
}
#video .video-toggle .play {
	translate: 0.4rem 0;
}
#video .video-toggle.play .pause {
	filter: opacity(0%);
	transition: 0.2s filter linear 0.3s;
}
#video .video-toggle.pause {
	color: transparent;
}
#video video:hover + .video-button .video-toggle.pause,
#video .video-button:hover .video-toggle.pause,
#video .video-toggle:hover.pause {
	color: var(--accent);
}
details {
	overflow: hidden;
	background: var(--gradient);
	background-position-y: -5em;
	box-shadow: 0 1rem 3rem color-mix(in lab, var(--primary) 2%, transparent) inset;
	transition: 0.6s background-position ease-in-out, 0.6s border-block-end-color linear, 0.6s box-shadow linear, 0.6s filter linear;
}
details:hover {
	background-position-y: -1.2em;
	box-shadow: 0 1rem 3rem color-mix(in lab, var(--primary) 15%, transparent) inset;
	filter: brightness(101.5%) invert(1%) contrast(104%);
}
details[open] {
	background-position-y: 0em;
	box-shadow: 0 1rem 3rem color-mix(in lab, var(--primary), transparent) inset;
}
details > * {
	margin-block: 0;
}
details :not(summary) {
	font-size: var(--fs-0);
	inline-size: min(100% - 3rem, 50ch);
	padding-block: 0.5em;
	margin-inline: auto;
	background-color: transparent;
}
details > :first-child + * {
	padding-block-start: 1.65em;
}
details > :not(summary):last-child {
	padding-block-end: 2.1em;
}
details[open]:last-child {
	border-block-end: var(--line-inline-size) solid var(--mid-grey);
}
summary {
	font-size: var(--fs-1);
	list-style-type: none;
	padding-block: 1lh;
	cursor: pointer;
	transition: 0.6s border-block-end-color linear, 0.3s filter linear;
}
details:not(:last-child) summary {
	margin-block-end: calc(-1 * var(--line-inline-size));
}
summary::-webkit-details-marker {
    display: none;
}
summary::after {
	position: relative;
	content: '↑';
	display: inline flow-root;
	color: transparent;
	background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAxOCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTUuOTk5OCA4LjQ5NDg3TDguOTk5ODggMS40ODQxNkwyLjAwMDAxIDguNDk0ODciIHN0cm9rZT0iIzMwMjMyMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbWl0ZXJsaW1pdD0iOCIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIvPjxwYXRoIGQ9Ik04Ljk5OTc2IDIyLjUxNjRMOC45OTk3NSAyLjY1MjY2IiBzdHJva2U9IiMzMDIzMjAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLW1pdGVybGltaXQ9IjgiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiLz48L3N2Zz4=") scroll no-repeat 50% 50% / 100% auto;
	font-size: 1.1em;
	margin-inline: 0.7ch 0;
	translate: 0 0.05em;
	transition: 0.5s translate ease 0.3s, 0.5s scale ease 0.3s;
}
summary.safari::after {
	display: initial;
}
details[open] summary {
	border-block-end-color: color-mix(in lab, var(--mid-grey) 80%, var(--background));
}
details[open] summary::after {
	scale: 1 -1;
}
details[open] summary.safari::after {
	scale: initial;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAxNSAxOSI+PHBhdGggc3Ryb2tlPSIjMzAyMzIwIiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBzdHJva2UtbWl0ZXJsaW1pdD0iOCIgc3Ryb2tlLXdpZHRoPSIyIiBkPSJtMiAxMi4wMTY4IDUuNDk5ODggNS41MDg0IDUuNDk5OTItNS41MDg0Ii8+PHBhdGggc3Ryb2tlPSIjMzAyMzIwIiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBzdHJva2UtbWl0ZXJsaW1pdD0iOCIgc3Ryb2tlLXdpZHRoPSIyIiBkPSJNNy41IDF2MTUuNjA3MSIvPjxwYXRoIHN0cm9rZT0iIzMwMjMyMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iOCIgc3Ryb2tlLXdpZHRoPSIyIiBkPSJNNy41IDE3LjUyNTZ2LS45MTgxIi8+PC9zdmc+");
}
details::details-content {
	block-size: 0;
	filter: opacity(0%);
    transition: 0.6s block-size ease-in-out 0.2s, 0.3s filter linear 0s, 0.9s content-visibility;
	transition-behavior: allow-discrete;
}
details[open]::details-content {
	block-size: auto;
	filter: none;
    transition: 0.6s block-size ease-in-out 0s, 0.6s filter linear 0.2s, 0.9s content-visibility;
}
details .logo {
	margin-block-end: 0.4rem;
}
details .logo svg {
	inline-size: min(100%, 12em);
}
details .controls {
	margin-block-end: 0.9rem;
}
details .logo-breakdown {
	inline-size: min(100% - 3rem, 40rem);
}
details .logo-breakdown svg {
	display: block;
	inline-size: 100%;
	margin-block: 0;
	padding-block: 0;
}
details .logo-breakdown .circle-zoom {
	cursor: pointer;
	transition: 0.5s scale ease-in-out, 0.9s filter linear 0.4s;
}
details .logo-breakdown .first-circle {
	transform-origin: 21.22% 71.1%;
}
details .logo-breakdown .second-circle {
	transform-origin: 40.3% 53.2%;
}
details .logo-breakdown .third-circle {
	transform-origin: 59.9% 59.2%;
}
details .logo-breakdown .fourth-circle {
	transform-origin: 77.6% 74.2%;
}
details .logo-breakdown .circle-zoom:hover {
	scale: 2;
}
details .logo-breakdown svg .main-logo {
	transition: 0.9s filter linear 0.4s;
}
details .logo-breakdown svg:has(.circle-zoom:hover) .main-logo,
details .logo-breakdown svg:has(.circle-zoom:hover) .circle-zoom:not(:hover) {
	filter: invert(22%) brightness(160%) grayscale(40%);
	transition-delay: 0s;
	transition-duration: 0.4s;
}
details .logo-breakdown svg:has(.circle-zoom:hover) .lines,
details .logo-breakdown svg:has(.circle-zoom:hover) .lines .bar {
	filter: opacity(50%) grayscale(100%);
	transition-delay: 0s;
	transition-duration: 0.4s;
}
details .logo-breakdown svg .lines {
	transition: 0.3s fill-opacity linear 0.4s, 0.3s stroke-opacity linear 0.4s, 0.2s filter linear 0.2s;
}
details .logo-breakdown svg:hover .lines {
	fill-opacity: 1;
	stroke-opacity: 1;
	transition-delay: 0s;
	transition-duration: 0.65s;
}
details .logo-breakdown svg .bar {
	translate: 0 15px;
	transition: 0.3s fill-opacity linear 0.4s, 0.3s stroke-opacity linear 0.4s, 0.4s translate ease-in-out 0.4s, 0.2s filter linear 0.2s;
}
details .logo-breakdown svg:hover .bar {
	fill-opacity: 1;
	stroke-opacity: 1;
	translate: none;
	transition-delay: 1.6s;
	transition-duration: 0.65s;
}
details .logo-breakdown svg:hover .bar:nth-child(2) {
	transition-delay: 1.8s;
}
details .logo-breakdown svg:hover .bar:nth-child(3) {
	transition-delay: 2s;
}
details .logo-breakdown svg:hover .lines.vertical-lines {
	transition-delay: 0.8s;
}
details .logo-breakdown svg:hover .lines.measurements {
	transition-delay: 1.6s;
}
#pronunciation-toggle {
	color: inherit;
	background-color: var(--background);
	font-weight: inherit;
	text-transform: inherit;
	box-shadow: 0 0.1em 1.3em color-mix(in lab, var(--foreground) 1%, transparent);
	inline-size: auto;
	padding-inline: 1.3em;
	border: 0 none;
	border-radius: 0.5rem;
	line-height: 140%;
}
#pronunciation-toggle em,
#pronunciation-toggle strong {
	color: var(--accent);
	text-transform: uppercase;
	font-weight: 600;
}
#pronunciation-toggle * {
	padding-block: 0;
}
#pronunciation-toggle .icon {
	position: relative;
	display: inline flow-root;
	color: var(--accent);
	background: transparent no-repeat scroll 63% 50% / 47%;
	aspect-ratio: 1;
	width: 1.1em;
	height: auto;
	inset: 0.25ch auto 0 0.25ch;
	border-radius: 50%;
	border: 1.5px solid;
}
#pronunciation-toggle.safari > .icon {
	display: inline-block;
}
#pronunciation-toggle.pause > .icon {
	background-position-x: 50%;
	background-size: 36%;
}
.line,
.box {
	display: grid;
	grid-template-columns: 1fr;
	margin-inline: 0;
}
.line {
	position: absolute;
	height: var(--line-inline-size);
	background-color: var(--mid-grey);
}
.box,
summary {
	position: relative;
	border-block: var(--line-inline-size) solid var(--mid-grey);
}
.box + .box {
	border-block-start: 0 none;
}
.line.center {
	inset: 50% 0;
}
h2:has(.box, .line) {
	color: var(--primary);
	line-height: 170%;
	padding-block: 0;
}
.gallery {
	--space: var(--fs-2);
	list-style: none;
	display: flex;
	flex-wrap: nowrap;
	margin-block: calc(var(--space) / 2);
	margin-inline: 0;
	padding-block: calc(var(--space) / 2);
	padding-inline: 0;
	gap: var(--space);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
}
.gallery li {
	display: flex;
	flex: 1 0 clamp(20rem, 80vw, 80rem);
	background: var(--dark-background);
	margin-block: 0;
	margin-inline: 0;
	padding-inline: 0;
	align-items: center;
	justify-content: center;
	scroll-snap-align: center;
	filter: opacity(50%);
	transition: 0.3s filter linear;
}
.gallery .current {
	filter: none;
}
.gallery .portrait {
	flex: 1 0 clamp(16rem, 70vw, 35.5rem);
}
.gallery img {
	display: block;
	object-fit: cover;
	block-size: 100%;
	inline-size: auto;
	aspect-ratio: 3 / 2;
}
.gallery .portrait img {
	aspect-ratio: 2 / 3;
}
#soundscape {
	inline-size: 100dvw;
	margin-block: 0 clamp(2rem, 5vh, 15rem);
}
#soundscape::before {
	position: absolute;
	inset: 0;
	content: '';
	background: transparent url("/images/photos/cliff-and-sea-blur.jpg") scroll no-repeat 50% 50% / cover;
	transform-origin: 50% 50%;
	z-index: -1;
}
#soundscape .player {
	display: grid;
	grid-template-columns: minmax(5.3rem, 1fr) minmax(11.6rem, 1fr) minmax(1.4rem, 1fr);
	margin-block: clamp(5rem, 4.5vw + 4.5vh, 11rem);
	inline-size: min(23rem, 95%);
	margin-inline: auto;
	justify-content: start;
	background-color: var(--background);
	padding: 0.85em;
	gap: 0 1.5em;
	border-radius: 0.8rem;
	align-items: center;
}
#soundscape img {
	display: block;
	aspect-ratio: 1;
	border-radius: 0.6rem;
	inline-size: 100%;
	block-size: auto;
	grid-area: 1 / 1 / 3 / 2;
}
#soundscape h3 {
	font-size: var(--fs--1);
	color: var(--accent);
	margin-block: 0;
	text-align: start;
	font-family: inherit;
	text-transform: inherit;
	font-weight: 700;
	font-stretch: inherit;
	grid-area: 1 / 2 / 3 / 3;
}
#soundscape .controls {
	grid-area: 1 / 3 / 3 / 4;
}
#soundscape .controls button {
	position: relative;
	display: inline-flex;
	font-size: 8px;
	color: transparent;
	background: transparent scroll no-repeat 50% 50% / 0.8rem auto;
	aspect-ratio: 1;
	inline-size: 1.7rem;
	border: 1.5px solid var(--accent);
	border-radius: 50%;
	block-size: auto;
	overflow: hidden;
	padding: 0;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	translate: 0 -0.1rem;
}
#why .controls .icon,
#soundscape .controls .play {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCA2MCA2OCI+PHBhdGggZmlsbD0iIzg5NzNGNCIgZD0iTTU5LjIyNjYgMzQuMTEzMy41NTY2ODMgNjcuOTg2My41NTY2ODYuMjQwMTc4IDU5LjIyNjYgMzQuMTEzM1oiLz48L3N2Zz4=");
}
#soundscape .controls .play {
	background-position-x: 69%;
}
#why .controls .pause > .icon,
#soundscape .controls .pause {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAzNiA1MyI+PHBhdGggZmlsbD0iIzg5NzNGNCIgZD0iTTAgMGgxMXY1M0gweiIvPjxwYXRoIGZpbGw9IiM4OTczRjQiIGQ9Ik0yNSAwaDExdjUzSDI1eiIvPjwvc3ZnPg==");
}
#soundscape .controls .pause {
	background-size: 0.5rem auto;
}
#why audio,
#soundscape audio {
	visibility: hidden;
    position: absolute;
    display: block;
    accent-color: var(--accent);
}
#soundscape audio {
    block-size: 2.4rem;
    inline-size: calc(100% + 2rem);
    margin-inline: -1.2rem -1rem;
    grid-area: 2 / 2 / 3 / 3;
	z-index: -1;
}
#soundscape audio.firefox {
	filter: invert(100%) hue-rotate(220deg) brightness(83%) contrast(168%);
}
#soundscape audio::-webkit-media-controls-enclosure {
    border-radius: 5px;
    background-color: var(--background);
}
#reveal {
	border-block-end: var(--line-inline-size) solid var(--mid-grey);
}
h2.gradient {
	background: var(--gradient);
}
.timeline {
	--dot-size: 0.8rem;
	--inline-margin-size: 3rem;
	display: flex;
	flex-wrap: wrap;
	gap: var(--inline-margin-size);
	list-style: none;
	margin-block: var(--inline-margin-size) 0;
	margin-inline: auto;
	padding-inline: 0;
	position: relative;
}
.timeline::before {
	inset: 0 auto 0 calc(var(--dot-size) * 2);
	position: absolute;
	background-image: linear-gradient(180deg, transparent 0%, var(--foreground) 40%);
	z-index: 1;
	inline-size: 1px;
	height: auto;
	content: '';
}
.timeline li {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	text-align: start;
	inline-size: min(100% - var(--inline-margin-size) * 2, 50rem);
	margin-block: clamp(1rem, 4vh, 3rem);
	margin-inline: 0;
	padding-inline: var(--inline-margin-size) 0;
	gap: 0.2rem;
}
.timeline p {
	font-size: var(--fs--1);
}
.timeline li.statement {
	margin-inline: auto;
	background-color: var(--background);
}
.timeline li:first-of-type {
	margin-block-start: clamp(5rem, 4.5vw + 4.5vh, 13rem);
}
.timeline li:last-of-type {
	margin-block-end: clamp(5rem, 4.5vw + 4.5vh, 13rem);
}
.timeline li::after {
	position: absolute;
	inline-size: var(--dot-size);
	block-size: var(--dot-size);
	inset-block: calc(var(--inline-margin-size) * 0.18) auto;
	inset-inline: calc(var(--dot-size) * 1.5) auto;
	z-index: 2;
}
.timeline li:not(.statement)::after {
	content: '';
    background-color: var(--foreground);
}
.timeline li.past:not(.statement)::after {
	background-color: color-mix(in lab, var(--foreground) 60%, var(--background));
}
#timeline .past {
	color: color-mix(in lab, var(--foreground) 60%, var(--background));
}
#timeline li.statement {
	flex: 1 0 10ch;
	font-size: var(--fs-2);
	background-color: var(--background);
	margin-inline: 0;
	padding-block: 0.5lh;
	padding-inline: 0;
	z-index: 2;
}
#timeline li.statement + li {
	margin-block-start: clamp(2rem, 5vh, 4rem);
}
#timeline .statement h3 {
	font-size: var(--fs-2);
	color: var(--primary);
	line-height: 104%;
}
.timeline .statement .box {
	border-block: 0 none;
}
footer .logo {
	line-height: 200%;
	font-size: var(--fs-5);
}
footer .logo svg {
	inline-size: min(30vw + 30vh, 100vw - 7rem);
	height: auto;
}
footer p,
footer a,
footer a:hover {
	color: inherit;
}
footer p {
	text-align: center;
}
footer a:hover {
	text-decoration: underline;
}
#access {
	align-content: center;
	gap: 3rem;
}
#access .introduction {
	inline-size: min(100% - 2rem, 50ch);
	margin-inline: auto;
}
#access .introduction h1 {
	font-size: var(--fs-1);
	margin-block: 0 2rem;
	padding-block: 0;
}
#access .introduction p {
	font-size: var(--fs--1);
}
#access form,
#access p {
	display: grid;
	gap: 1rem;
}
#access form {
	inline-size: min(80%, 50ch);
	margin-inline: auto;
}
#access p {
	transition: 0.3s block-size ease-in-out 0.2s, 0.3s filter linear 0.2s;
}
#access a {
	text-decoration: underline;
	text-decoration-color: var(--accent);
	color: inherit;
}
#access .event {
	display: block;
	font-size: var(--fs--1);
	line-height: 120%;
	text-wrap: balance;
}
#access .hide {
	position: absolute;
	block-size: 0.1rem;
	filter: opacity(0%);
	transition-delay: 0s;
	pointer-events: none;
	z-index: -1;
}
#access .hide input {
	pointer-events: none;
	display: none;
}
#access input[type="email"],
#access input[type="text"] {
	text-align: center;
	line-height: 150%;
	padding-block: 0.2lh;
	padding-inline: 1ex;
	border-radius: 0;
	border: var(--line-inline-size) solid var(--mid-grey);
	transition: 0.3s block-size ease-in-out, 0.3s padding-block ease-in-out;
}
#access .code input[type="text"]:not(:placeholder-shown) {
	font-family: monospace;
	text-transform: uppercase;
	letter-spacing: 1em;
	font-size: var(--fs-1);
	inline-size: 100%;
	box-sizing: border-box;
}
#access input[type="email"]:focus,
#access input[type="text"]:focus,
#access input[type="email"]:active,
#access input[type="text"]:active,
#access input[type="email"]:focus-visible,
#access input[type="text"]:focus-visible,
#access input[type="email"]:focus-within,
#access input[type="text"]:focus-within {
	outline: none;
	box-shadow: none;
}
#access button {
	color: var(--primary-subtle);
	background-color: var(--foreground);
	border: 0 none;
	line-height: 150%;
	padding-block: 0.3lh;
	transition: 0.3s filter linear;
}
#access button[disabled] {
	filter: opacity(40%) grayscale(35%);
}
#access button:hover,
#access button:focus-visible {
	outline: none;
	box-shadow: none;
	background-color: color-mix(in srgb, var(--foreground) 80%, var(--primary-subtle));
}
dialog {
	inline-size: min(100% - 2rem, 51.2ch);
	padding-inline: clamp(2rem, 2.8vw + 2.8vh, 5.8rem);
	padding-block: clamp(1.8rem, 2vw + 2vh, 3rem);
	text-align: center;
}
dialog.dark {
	color: var(--primary-subtle);
	background-color: color-mix(in lab, var(--background) 80%, var(--primary));
	border: 0 none;
}
dialog::backdrop {
	opacity: 0.9;
	background: var(--primary);
}
dialog h2 {
	font-size: var(--fs-2);
	margin-block: 0 0.7lh;
	padding-block: 0;
	line-height: 100%;
}
dialog h3 {
	font-size: var(--fs-1);
	margin-block: 0.3lh;
}
dialog h4 {
	font-size: var(--fs-0);
	margin-block: 0.3lh;
}
dialog p,
dialog ul,
dialog ol,
dialog li {
	font-size: var(--fs--1);
	margin-block: 0.1lh 0.3lh;
}
dialog p:has(.button) {
	margin-block-start: 2.2rem;
}
dialog.dark .button {
	color: inherit;
	background-color: transparent;
	outline: 1px solid var(--foreground);
}
.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;
}
@media (width >= 350px) {
	#timeline li.statement {
		padding-inline: max(var(--inline-margin-size), 50vw - 8ch);
	}
}
@media (width >= 450px) {
	#timeline .statement h3 {
		text-align: center;
	}
	.timeline::before {
		inset: 0 0 0 50%;
	}
	.timeline :not(.statement):is(li) {
		flex: 1 0 calc(50% - var(--inline-margin-size));
		padding-inline: 0;
	}
	.timeline li:not(.statement)::after {
		inset-inline: calc(var(--inline-margin-size) * -1 - var(--dot-size) * 0.5) auto;
	}
	.timeline :not(.statement):is(li):nth-of-type(2n-1),
	.timeline .statement ~ :not(.statement):is(li):nth-of-type(2n) {
		margin-inline: calc(50% + var(--inline-margin-size)) 0;
	}
	.timeline :not(.statement):is(li):nth-of-type(2n),
	.timeline .statement ~ :not(.statement):is(li):nth-of-type(2n-1) {
		margin-inline: 0 calc(50% + var(--inline-margin-size));
		text-align: end;
	}
	.timeline .statement ~ :not(.statement):is(li):nth-of-type(2n)::after {
		inset-inline: calc(var(--inline-margin-size) * -1) auto;
	}
	.timeline :not(.statement):is(li):nth-of-type(2n)::after,
	.timeline .statement ~ :not(.statement):is(li):nth-of-type(2n-1)::after {
		inset-inline: auto calc(var(--inline-margin-size) * -1 - var(--dot-size) * 0.5);
	}
	#timeline .future:not(.statement)::after {
		background-color: var(--accent);
	}
	.timeline p {
		font-size: var(--fs--1);
		inline-size: clamp(17.7ch, 30vw, 40ch);
		margin-inline: 0 auto;
		text-wrap: balance;
	}
	.timeline .current p {
		inline-size: fit-content;
	}
	.timeline :not(.statement):is(li):nth-of-type(2n) p,
	.timeline .statement ~ :not(.statement):is(li):nth-of-type(2n-1) p {
		margin-inline: auto 0;
	}
}
@media (width >= 1000px) {
	h2.gradient {
		background: var(--gradient);
	}
	.gallery li {
		background: none;
	}
}
@media (prefers-reduced-motion: no-preference) {
	.box {
		transition: 2s border-color linear, 2s margin-block ease-in-out, 2s inset ease-in-out;
	}
	h2 .box,
	h3 .box {
		overflow: hidden;
	}
	h2 .box .slide-up,
	h3 .box .slide-up {
		filter: opacity(0%);
		translate: 0% 100%;
		transition: 0.1s translate cubic-bezier(0.190, 1.000, 0.220, 1.000) 0.5s, 0.1s filter linear 0.5s;
	}
	.current h2 .box .slide-up,
	.current h3 .box .slide-up {
		filter: none;
		translate: none;
		transition-duration: 0.9s;
		transition-delay: 0.35s;
	}
	.current h2 .box:nth-of-type(2) .slide-up,
	.current h3 .box:nth-of-type(2) .slide-up {
		transition-delay: 0.45s;
	}
	.current h2 .box:nth-of-type(3) .slide-up,
	.current h3 .box:nth-of-type(3) .slide-up {
		transition-delay: 0.55s;
	}
	.current .statement h3 .box .slide-up {
		transition-delay: 0.75s;
	}
	.current .statement h3 .box:nth-of-type(2) .slide-up {
		transition-delay: 0.85s;
	}
	.current .statement h3 .box:nth-of-type(3) .slide-up {
		transition-delay: 0.95s;
	}
}