@font-face {
	font-family: "Sycamore";
	src: url("/projects/sycamore-typeface/assets/fonts/Sycamore-Regular.woff2");
	font-weight: 400;
}

/* * {
	border: 1px solid #F00;
} */

body {
	overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

h1, h2, h3, p, small {
	margin: 0;
	font-family: "Sycamore";
	text-indent: var(--indent-none);
}

hr {
	margin-block: var(--gap-lg);
	opacity: 0.25;
	border: 1px solid var(--color-neutral-100);
	grid-column: span 8;
	width: var(--width-full);
}

small {
	font-size: var(--text-base);
	opacity: 0.35;
}

.body-container > div {
	scroll-snap-align: start;
  flex-shrink: 0;

  /* height: var(--height-screen); */
  width: 100%;
  padding: var(--gap-2xl);
  box-sizing: border-box;
}

.body-container {
	display: flex;
  flex-direction: column;
  max-width: var(--width-full);
}

.overview-hero {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-template-rows: repeat(5, 8rem);
	grid-gap: var(--gap-lg);	
}

.overview-hero .title {
	grid-column: 1 / 9;
	grid-row: 1 / 4;

	font-size: 12rem;
}

.overview-hero .subtitle {
	grid-column: span 4;
	grid-row: 4 / 4;
	
	font-size: 4rem;
}

.overview-hero .description {
	grid-column: span 2;
	grid-row: span 2;

	font-size: var(--text-base);
	line-height: 1.6;
}

.overview-hero .author {
	grid-column: span 1;
	grid-row: span 1;
	align-items: flex-end;
}

.title {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	gap: var(--gap-md);
	margin: 2rem 0;
}

.overview-glyphset .title h2 {
	opacity: 0.5;
}

.overview-glyphset .glyphs {
	text-indent: var(--indent-none);
	font-size: 8rem;
	line-height: var(--line-height-sm);
}

.overview-waterfall p {
	line-height: var(--line-height-sm);
}

.test-1 { font-size: var(--text-8xl) }
.test-2 { font-size: var(--text-6xl) }
.test-3 { font-size: var(--text-4xl) }
.test-4 { font-size: var(--text-2xl) }
.test-5 { font-size: var(--text-base) }

.overview-example {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-gap: var(--gap-lg);
}

.overview-example > div {
	grid-column: span 2;
	grid-row: span 3;
}

.overview-example .title {
	grid-column: span 2;
	grid-row: span 6;
	align-items: flex-start;
}

.overview-opentype {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-gap: var(--gap-lg);
}

.overview-opentype .title { grid-column: span 8;}
.overview-opentype .feature-head { grid-column: span 2;}
.overview-opentype .feature-on-head { grid-column: span 3;}
.overview-opentype .feature-off-head { grid-column: span 3;}
.overview-opentype .feature-name { grid-column: span 2; }
.overview-opentype .feature-on { grid-column: span 3; }
.overview-opentype .feature-off { grid-column: span 3; }

.overview-opentype .feature-on p,
.overview-opentype .feature-off p {
	font-size: var(--text-4xl);
}