@font-face {
	font-family:Kawaiink;
	src:url(../fonts/Kawaiink-Regular.woff2)format("woff2");
	font-weight:400;
	font-style:normal;
	font-display:swap
  }
@font-face {
	font-family:Lttrbrandfont;
	src:url(../fonts/LTTRBrandFont-Italic.woff2)format("woff2");
	font-weight:400;
	font-style:italic;
	font-display:swap
  }
@font-face {
	font-family:Lttrbrandfont;
	src:url(../fonts/LTTRBrandFont-Bold.woff2)format("woff2");
	font-weight:700;
	font-style:normal;
	font-display:swap
  }

  @font-face {
	font-family:Lttrbrandfont;
	src:url(../fonts/LTTRBrandFont-ItalicBold.woff2)format("woff2");
	font-weight:700;
	font-style:italic;
	font-display:swap
  }
  @font-face {
	font-family:Lttrbrandfont;
	src:url(../fonts/LTTRBrandFont-Regular.woff2)format("woff2");
	font-weight:400;
	font-style:normal;
	font-display:swap
  }


body {
	/* s optical corrections */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	
	/*	Fonts */
	--lttr-brand: "Lttrbrandfont",Arial , sans-serif;

	--font-normal: 400;
	--font-strong: 800;

	/* font features */
	--font-feature-settings: "ss01", "ss02";
	
	
	
	/* ligatures */
	font-variant-ligatures: common-ligatures historical-ligatures;
	

	/* text */
	--text-2xs: calc(var(--size) * 10);
	--text-xs: 	calc(var(--size) * 9.5);
	--text-s: 	calc(var(--size) * 11);
	--text-m: 	calc(var(--size) * 13);
	--text-l: 	calc(var(--size) * 17);

	--text-xl: 	calc(var(--size) * 23);
	--text-2xl: calc(var(--size) * 28);
	--text-3xl: calc(var(--size) * 32);
	--text-4xl: calc(var(--size) * 54);
	--text-5xl: calc(var(--size) * 72);




}

.slide--grid--typography {
	margin: 0 var(--viewport-margin);
}

.font-size-2xs {
	font-size:var(--text-2xs);
	line-height: var(--size-m);
}
.font-size-xs {
	font-size:var(--text-xs);
	line-height: var(--size-m);
}
.font-size-s {	
	font-size:var(--text-s);
	line-height: var(--size-s);
}
.font-size-m {
	font-size:var(--text-m);
	line-height: var(--size-m);
}
.font-size-l {
	font-size:var(--text-l);
	line-height: var(--size-m);
}
.font-size-xl {
	font-size:var(--text-xl);
	line-height: var(--size-l);
}
.font-size-2xl {
	font-size:var(--text-2xl);
	line-height: var(--size-xl);
}
.font-size-3xl {
	font-size:var(--text-3xl);
	line-height: var(--size-2xl);
}
.font-size-4xl {
	font-size:var(--text-4xl);
	line-height: var(--size-4xl);
}
.font-size-5xl {
	font-size:var(--text-5xl);
	line-height: var(--size-4xl);
}

body, button, input, select, textarea {
	font-family:var(--lttr-brand);
	font-weight:var(--font-normal);
}

body {
	margin-bottom:var(--size-m);
	font-size:var(--text-m);
	line-height:var(--size-m);
}

h1, h2, h3, h4, h5, h6, p, ul, ol {
	max-width: 60ch;
	word-break: normal;
	overflow-wrap: anywhere;
	scroll-margin-top: var(--size-xl);
}

h1:first-child,
h2:first-child {
	margin-top: 0;
}

h1 {
	margin-top:var(--size-m);
	margin-bottom:var(--size-s);
	font-size:var(--text-2xl);
	line-height:var(--size-xl);
	text-rendering: geometricPrecision;
  }
h2 {
	margin-top:var(--size-m);
	margin-bottom:var(--size-xs);
	font-size:var(--text-xl);
	line-height:var(--size-l);
	text-rendering: geometricPrecision;
	}
h3 {
	margin-top:var(--size-xs);
	margin-bottom:var(--size-2xs);
	font-size:var(--text-l);
	line-height:var(--size-m);
	text-rendering: geometricPrecision;
}
h4 {
	margin-top:var(--size-xs);
	margin-bottom:var(--size-2xs);
	font-size:var(--text-m);
	line-height:var(--size-m);
}
h5 {
	margin-top:var(--size-xs);
	margin-bottom:var(--size-2xs);
	font-size:var(--text-m);
	line-height:var(--size-m)
}
h6 {
	margin-top:var(--size-xs);
	margin-bottom:var(--size-2xs);
	font-size:var(--text-m);
	line-height:var(--size-m);
}
p {
	margin-top:var(--size-2xs);
	font-size:var(--text-m);
	line-height:var(--size-m);
	margin-bottom:var(--size-s);
}

@media screen and (min-width: 900px) {
	body {
		/* text */
		--text-2xs: calc(var(--size) * 10);
		--text-xs: 	calc(var(--size) * 9.5);
		--text-s: 	calc(var(--size) * 11);
		--text-m: 	calc(var(--size) * 13);
		--text-l: 	calc(var(--size) * 17);

		--text-xl: 	calc(var(--size) * 23);
		--text-2xl: calc(var(--size) * 28);
		--text-3xl: calc(var(--size) * 32);
		--text-4xl: calc(var(--size) * 100);
		--text-5xl: calc(var(--size) * 144);
	}
}