/* Resets */

* {
   box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6, p {
   font-size: inherit;
   font-weight: inherit;
   margin: 0;
}

ul, li {
   list-style: none;
   padding: 0;
   margin: 0;
}

a {
   color: inherit;
   text-decoration: inherit;
}

a:hover {
   text-decoration: underline;
}

/* Grid */
body {
   margin: 14px 28px;
}

.about-content {
   display: grid;
   grid-template-columns: repeat(8, 1fr);
   column-gap: 14px;
}

.about-text {
   grid-column: span 6;
   text-indent: calc((100% - 10*14px)/12 + 14px)
}

.about-details {
   display: contents;
}

.about-column {
   margin-top: 42px;
}

.column {
   grid-column: span var(--span);
}

.show-grid {
   position: relative;
   background: repeating-linear-gradient(
      #9D00FF15,
      #9D00FF15 14px,
      transparent 14px,
      transparent 28px
   );
}

.show-grid::before {
   content: '';
   display: block;
   position: fixed;
   top: 0;
   left: 28px;
   right: 28px;
   height: 100%;
   background: repeating-linear-gradient(
      to right,
      #9D00FF15,
      #9D00FF15 calc((100% - 15*14px)/16),
      transparent calc((100% - 15*14px)/16),
      transparent calc((100% - 15*14px)/16 + 14px)
   );
   z-index: -1;
}


/* Typography */

@font-face {
   font-family: 'Gamuth';
   src: url('/assets/fonts/GamuthText-Regular.woff2') format('woff2')
   
}

:root {
   font-family: 'Gamuth', serif;
   font-size: 23px;
   line-height: 28px;
}


/* Header */

.site-header {
   display: grid;
   grid-template-columns: 1fr 1fr;
   column-gap: 14px;
   margin-bottom: 70px;
}

.section {
   margin-bottom: 70px;
}

.heading {
   padding-bottom: 5px;
   border-bottom: 1px solid;
}

h1:first-child, h2:first-child, h3:first-child, h4:first-child, h4:first-child, h5:first-child, h6:first-child, p:first-child, .heading + p, .heading {
   padding-top: 8px;
}

h1:last-child, h2:last-child, h3:last-child, h4:last-child, h4:last-child, h5:last-child, h6:last-child, p:last-child {
   padding-bottom: 6px;
}

.type-sample {
   position: relative;
   height: 126px;
   width: 100%;
   border-bottom: 1px solid;
}

.scroller {
   overflow-x: auto;
   overflow-y: hidden;
   height: 100%;
   -ms-overflow-style: none;
   scrollbar-width: none;
}

.type-sample svg {
   display: block;
   height: 100%;
   width: auto;
}

.tooltip {
   display: none;
   overflow: hidden;
   pointer-events: none;
   position: absolute;
   border-radius: 5px;
   width: 395px;
   height: 240px;
   top: -255px;
   background-color: white;
   box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.2);
}

.scroller {
  overflow-x: auto;
  overflow-y: hidden;
  height: 100%;
  scrollbar-width: none;
}

.timeline {
	position: relative;
	padding: 5px 0;
	height: 130px;
	box-sizing: border-box;
}

.timeline .scroller {
	display: flex;
}

.timeline .video-wrapper {
	width: auto;
	height: 100%;
	margin-right: 5px;
	background: repeating-linear-gradient(90deg,  #cccccc, #cccccc, #d1d1d1, #dbdbdb, #dfdfdf, #dbdbdb, #d1d1d1, #cccccc, #cccccc);
	background-repeat:repeat-x;
	background-size: 400% 100%;
	animation: looping-gradient 1.5s linear infinite;
}

@keyframes looping-gradient {
    0% { background-position: 100% 50% }
    100% { background-position: -33% 50% }
}

.timeline video {
	width: auto;
	height: 100%;
	opacity: 0;
	aspect-ratio: 395/240;
	transition: opacity 0.35s;
}

.timeline .video-wrapper, .timeline video {
		border-radius: 2px;
	}

.timeline video.loaded {
	opacity: 1;
}

.timeline .tooltip video {
	display: block;
	border-radius: 5px;
}