@layer reset, theme, layout, utilities, page, components;

@font-face {
	font-family: 'Radley';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/fonts/radley-v22-latin-regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Fustat';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/fonts/fustat-v1-latin-regular.woff2') format('woff2');
}

@layer reset {
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, tt, sup, sub, var,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed,
	figure, figcaption, footer, header, hgroup,
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font-weight: inherit;
		font-family: inherit;
		font-style: inherit;
		vertical-align: baseline;
	}
	sup, sub { font-size: smaller; }
	sup { vertical-align: super; }
	sub { vertical-align: sub; }

	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure,
	footer, header, hgroup, menu, nav, section {
		display: block;
	}

	ol, ul, menu {
		list-style: none;
	}

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

	a {
		color: inherit;
		text-decoration: none;
		cursor: pointer;
		
		* { cursor: pointer; }
	}

	button {
		background: none;
		color: inherit;
		border: none;
		outline: none;
		margin: 0;
		padding: 0;
		font-size: inherit;
		font-family: inherit;
	}

	hr {
		margin: 0;
		padding: 0;
		border: none;
		border-bottom: 1px solid;
	}

	/* landscape iOS */
	html {
		-webkit-text-size-adjust: 100%;
	}

	img, svg, video {
		display: block;
	}
}

@layer theme {
	:root {
		/* Color */
		--orange-dark: #faa221;
		--orange-mid: #fbaf18;
		--orange-light: #ffcb05;
		--peach: #fff9ef;
		--sky: #e7f7ff;
		--blue-dark: #018dd2;
		--blue-mid: #01aff0;
		--white: #ffffff;
		--black: #585858;
		--beige: #fffef8;

		/* Tokens */

		/* Typography */
		--font-serif: 'Radley', serif;
		--font-sans: 'Fustat', sans-serif;
		
		/* @link https://utopia.fyi/type/calculator?c=320,14,1.2,1440,16,1.4,5,0,&s=0.75|0.5,1.5|2|3|4|6,xl-3xl&g=s,l,2xl,12 */
		--type-0: clamp(0.875rem, 0.8393rem + 0.1786vw, 1rem);
		--type-1: clamp(1.05rem, 0.95rem + 0.5vw, 1.4rem);
		--type-2: clamp(1.26rem, 1.06rem + 1vw, 1.96rem);
		--type-3: clamp(1.512rem, 1.16rem + 1.76vw, 2.744rem);
		--type-4: clamp(1.8144rem, 1.2352rem + 2.896vw, 3.8416rem);
		--type-5: clamp(2.1773rem, 1.2627rem + 4.5728vw, 5.3782rem);

		/* Space */
		/* @link https://utopia.fyi/space/calculator?c=320,14,1.2,1440,16,1.4,5,0,&s=0.75|0.5,1.5|2|3|4|6,xl-3xl&g=s,l,2xl,12 */

		--space-2xs: clamp(0.4375rem, 0.4196rem + 0.0893vw, 0.5rem);
		--space-xs: clamp(0.6875rem, 0.6696rem + 0.0893vw, 0.75rem);
		--space-s: clamp(0.875rem, 0.8393rem + 0.1786vw, 1rem);
		--space-m: clamp(1.3125rem, 1.2589rem + 0.2679vw, 1.5rem);
		--space-l: clamp(1.75rem, 1.6786rem + 0.3571vw, 2rem);
		--space-xl: clamp(2.625rem, 2.5179rem + 0.5357vw, 3rem);
		--space-2xl: clamp(3.5rem, 3.3571rem + 0.7143vw, 4rem);
		--space-3xl: clamp(5.25rem, 5.0357rem + 1.0714vw, 6rem);

		/* One-up pairs */
		--space-2xs-xs: clamp(0.4375rem, 0.3482rem + 0.4464vw, 0.75rem);
		--space-xs-s: clamp(0.6875rem, 0.5982rem + 0.4464vw, 1rem);
		--space-s-m: clamp(0.875rem, 0.6964rem + 0.8929vw, 1.5rem);
		--space-m-l: clamp(1.3125rem, 1.1161rem + 0.9821vw, 2rem);
		--space-l-xl: clamp(1.75rem, 1.3929rem + 1.7857vw, 3rem);
		--space-xl-2xl: clamp(2.625rem, 2.2321rem + 1.9643vw, 4rem);
		--space-2xl-3xl: clamp(3.5rem, 2.7857rem + 3.5714vw, 6rem);

		/* Custom pairs */
		--space-xl-3xl: clamp(2.625rem, 1.6607rem + 4.8214vw, 6rem);


		/* Global */
		--layout-maxwidth: 1440px;
	}

	html {
		scroll-behavior: smooth;
	}
	body {
		color: var(--black);
		background: var(--white);
		font-family: var(--font-sans);
		font-size: var(--type-0);
	}

	.h1 {
		font-size: var(--type-4); 
		line-height: 0.9;
	}
	.h2 {
		font-size: var(--type-3);
		line-height: 1;
	}
	.h3 {
		font-size: var(--type-2);
		line-height: 1.1;
	}

	.serif {
		font-family: var(--font-serif);
	}
}

@layer layout {
	.container, .container-full {
		width: 100%;
		max-width: var(--layout-maxwidth);
		margin-inline: auto;
	}
	.container {
		padding-inline: var(--space-xs);
	}
	.content-inset {
		max-width: clamp(320px, 80vw, 100%);
	}

	@media (min-width: 768px) {
		.content-inset {
			max-width: unset;
			padding-inline: var(--space-3xl);
		}
	}

	.flow > * + * {
		margin-top: var(--space-xs);
	}
}

@layer utilities {
	.wrap-pretty {
		/* fallback to balance, more widely supported in 2024 */
		text-wrap: balance;
		text-wrap: pretty;
	}
	.ellipsis {
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.text-center { text-align: center; }
	.text-left { text-align: left; }
	.text-right { text-align: right; }
	
	.mx-auto { margin-inline: auto; }
	
	.hidden { display: none; }
	.block { display: block; }
	.inline { display: inline; }
	.inline-block { display: inline-block; }
	.flex-x { display: flex; flex-direction: row; }
	.flex-y { display: flex; flex-direction: column; }
	.flex-x-rev { display: flex; flex-direction: row-reverse; }
	.flex-y-rev { display: flex; flex-direction: column-reverse; }
	
	.justify-start { justify-content: start; }
	.justify-end { justify-content: end; }
	.justify-center { justify-content: center; }
	.justify-between { justify-content: space-between; }
	.items-start { align-items: start; }
	.items-end { align-items: end; }
	.items-center { align-items: center; }
	.scroll-snap { scroll-snap-align: start; }
	.no-scroll-snap { scroll-snap-align: none; }
	
	@media (min-width: 768px) {
		.md\:text-center { text-align: center; }
		.md\:text-left { text-align: left; }
		.md\:text-right { text-align: right; }
		
		.md\:hidden { display: none; }
		.md\:block { display: block; }
		.md\:inline { display: inline; }
		.md\:inline-block { display: inline-block; }
	
		.md\:flex-x { display: flex; flex-direction: row; }
		.md\:flex-y { display: flex; flex-direction: column; }
		.md\:flex-y-rev { display: flex; flex-direction: column-reverse; }
		.md\:flex-x-rev { display: flex; flex-direction: row-reverse; }
	
		.md\:justify-start { justify-content: start; }
		.md\:justify-end { justify-content: end; }
		.md\:justify-center { justify-content: center; }
		.md\:justify-between { justify-content: space-between; }
		.md\:items-start { align-items: start; }
		.md\:items-end { align-items: end; }
		.md\:items-center { align-items: center; }
	
		.md\:scroll-snap { scroll-snap-align: start; }
		.md\:no-scroll-snap { scroll-snap-align: none; }
	}
	@media (min-width: 1024px) {
		.lg\:text-center { text-align: center; }
		.lg\:text-left { text-align: left; }
		.lg\:text-right { text-align: right; }
		
		.lg\:hidden { display: none; }
		.lg\:block { display: block; }
		.lg\:inline { display: inline; }
		.lg\:inline-block { display: inline-block; }
	
		.lg\:flex-x { display: flex; flex-direction: row; }
		.lg\:flex-y { display: flex; flex-direction: column; }
		.lg\:flex-x-rev { display: flex; flex-direction: row-reverse; }
		.lg\:flex-y-rev { display: flex; flex-direction: column-reverse; }
		
		.lg\:justify-start { justify-content: start; }
		.lg\:justify-end { justify-content: end; }
		.lg\:justify-center { justify-content: center; }
		.lg\:justify-between { justify-content: space-between; }
		.lg\:items-start { align-items: start; }
		.lg\:items-end { align-items: end; }
		.lg\:items-center { align-items: center; }
	
		.lg\:scroll-snap { scroll-snap-align: start; }
		.lg\:no-scroll-snap { scroll-snap-align: none; }
	}
	
}

@layer components {
	.nav {
		color: var(--blue-dark);
		padding: var(--space-xs);
	}
	.nav menu > *:not(:last-child) {
		display: none;
	}
	@media (min-width: 512px) {
		.nav {
			border-radius: var(--space-s);
			background: #fffef880;
			backdrop-filter: blur(30px);
		}
		.nav menu > *:not(:last-child) {
			display: inline;
		}
	}

	.button {
		border-radius: 100px;
		background-color: var(--blue-dark);
		transition: background-color 0.2s;
		color: var(--white);
		display: inline-flex;
		flex-direction: row;
		gap: var(--space-s);
		padding: var(--space-2xs) var(--space-m);
		align-items: center;
	}
	.button:hover {
		background-color: var(--orange-dark);
	}

	@keyframes marquee {
		from { transform: translateX(0); }
		to { transform: translateX(-16.666666%); }
	}
	
	em-marquee {
		user-select: none;
		overflow: hidden;
		display: block;
		background: var(--orange-dark);
		color: var(--white);
		font-size: var(--type-3);
	}
	
	em-marquee > * {
		white-space: nowrap;
		display: flex;
		width: min-content;
		flex-direction: row;
		gap: var(--space-m);
		padding-right: var(--space-m);
		padding-block: var(--space-s);
		animation-name: marquee;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		animation-duration: calc(8s * var(--item-count));
	}

	.tag {
		border-radius: 8px;
		background-color: var(--sky);
		padding: var(--space-2xs) var(--space-xs);
		display: inline-block;
		margin-bottom: var(--space-2xs);
		margin-right: var(--space-2xs);
	}

	.taglist {
		list-style-type: none;
		display: block;
	}
}