/* Resets */

* {
   box-sizing: border-box;
}

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

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

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

a:hover {
   text-decoration: underline;
}

img, video {
   width: 100%;
   height: auto;
   display: block;
}

/* Typography */

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

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

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

@media (max-width: 960px) {
   :root {
      font-size: 20px;
      line-height: 24px;
      --unit: 8px;
   }
}

/* @media (max-width: 480px) {
   :root {
      font-size: 18px;
      line-height: 22px;
      --unit: 10px;
   }
} */

.small {
   font-size: 19px;
   line-height: 28px;
}

/* Grid */
body {
   margin: var(--unit) calc(var(--unit)*2);
}

.show-grid {
   position: relative;
   background: repeating-linear-gradient(
      #9D00FF15,
      #9D00FF15 var(--unit),
      transparent var(--unit),
      transparent calc(var(--unit)*2)
   );
}

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


/* Header */

.site-header {
   margin-bottom: calc(var(--unit)*5);
}

.menu-link.active {
   font-style: italic;
}

.section {
   margin-bottom: calc(var(--unit)*5);
}

.section-link {
   text-align: right;
}

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

.border-top {
   border-top: 1px solid;
}

.project-header {
   border-bottom: 1px solid;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   column-gap: var(--unit);
   padding-bottom: 4px;
   align-items: baseline;
}

.project-buttons {
   margin-left: auto;
   grid-column: 4;
}

.project-single .project-header .project-category {
   grid-column: 3;
}

@media (max-width: 960px) {
   .project-header {
      display: flex;
   }

   .project-category {
      display: none;
   }
}

.accordion-trigger {
	display: flex;
	align-items: center;
	cursor: pointer;
}

.accordion-panel {
	overflow: hidden;
}

.project-info {
	transition: border-bottom 0.1s;
}

.project-info.open {
	border-bottom: 1px solid;
}

.project-info-content {
	padding: 15px 0 35px;
}

.project-info-content p {
	margin-bottom: 1em;
}

.project-info-content p:last-of-type {
	margin-bottom: 0;
}

.section-link {
   margin-top: 6px;
}

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,
.work-gallery {
   position: relative;
   height: 126px;
   width: 100%;
   border-bottom: 1px solid;
}

@media (max-width: 960px) {
   .type-sample,
   .work-gallery {
      height: 108px;
   }
}

.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);
}

.tooltip-content {
   display: flex;
   gap: 4px;
   height: 100%;
}

.tooltip-content img, .tooltip-content video {
   height: 100%;
   width: auto;
}

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

.scroll-container::before {
   content: "";
   pointer-events: none;
   display: block;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   width: 80px;
   background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
   opacity: 0;
   transition: opacity 0.2s;
}

.scroll-container::after {
   content: "";
   pointer-events: none;
   display: block;
   position: absolute;
   top: 0;
   bottom: 0;
   right: 0;
   width: 80px;
   background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
   transition: opacity 0.2s;
}

.scroll-container.start::after {
   opacity: 1;
}

.scroll-container.end::before {
   opacity: 1;
}

.image-wrapper {
	width: auto;
	height: 100%;
	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;
}

.image-wrapper img,
.image-wrapper video {
   width: 100%;
   object-fit: cover;
}

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

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

.timeline .scroller {
	display: flex;
}

.timeline .image-wrapper {
   margin-right: 4px;
}

.timeline .image-wrapper:last-of-type {
   margin-right: 0;
}

.timeline img {
   width: auto;
   height: 100%;
}

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

/* Buttons */

.aqua-btn {
	--gradient-color1: rgba(196, 196, 196, 0.2);
	--gradient-color2: rgba(196, 196, 196, 0);
	--shadow-color: rgba(176, 176, 176, 0.75);
	--inner-shadow-color: #B9B9B9;
	--border-color: #C4C4C4;
	font-size: 16px;
	color: black;
	position: relative;
	top: -2px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 2.25em;
	box-sizing: border-box;
	padding: .4em .55em .4em;
	vertical-align: middle;
	background: linear-gradient(180deg, var(--gradient-color1) 0%, var(--gradient-color1) 64%, var(--gradient-color2) 100%);
	border: 1px solid var(--border-color);
	box-shadow: inset 0 0 .5em var(--inner-shadow-color);
	filter: drop-shadow(0px .35em .3em var(--shadow-color));
	text-shadow: 0px .125em .125em rgba(0, 0, 0, 0.3);
	cursor: pointer;
	white-space: nowrap;
	transition: top 0.1s;
}

.aqua-btn:has(> svg) {
   padding: .4em .4em .4em;
}

.aqua-btn::before {
	content: "";
	display: block;
	position: absolute;
	top: calc(.125em - 1px);
	left: .5em;
	right: .5em;
	height: .75em;
	background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.3) 41.15%, rgba(255, 255, 255, 0) 100%);
	border-radius: .667em;
	pointer-events: none;
}

.aqua-btn:hover {
	opacity: 0.85;
	text-decoration: none;
}

.aqua-btn:active {
	top: -2px;
	opacity: 1;
}
.aqua-green {
	--gradient-color1: rgba(47, 218, 53, 0.8);
	--gradient-color2: rgba(143, 255, 124, 0.544);
	--shadow-color: rgba(191, 237, 61, 0.5);
	--inner-shadow-color: #35A700;
	--border-color: #2FDA35;
}

.aqua-blue {
	--gradient-color1: rgba(0, 194, 234, 1);
	--gradient-color2: rgba(111, 229, 255, 0.75);
	--shadow-color: rgba(0, 194, 234, 0.5);
	--inner-shadow-color: #0084A0;
	--border-color: #00B8E0;
}

.aqua-red {
	--gradient-color1: rgba(255, 60, 0, 0.8);
	--gradient-color2: rgba(255, 111, 0, 0.64);
	--shadow-color: rgba(255, 81, 0, 0.5);
	--inner-shadow-color: #C52700;
	--border-color: #FF3C00;
}

.rounded {
   border-radius: .333rem;
}

.shadow {
   box-shadow: 0 .15em .3em rgba(0,0,0,0.25);
}

/* About */

.about-text p:not(:first-of-type) {
   text-indent: calc((100% - 10*var(--unit))/12 + var(--unit))
}

.about-image {
   position: relative
}

.about-image figcaption {
   white-space: nowrap;
   transform: rotate(-90deg);
   transform-origin: 0px 50%;
   position: absolute;
   left: calc(100% + var(--unit));
   bottom: -7px;
   font-size: 18px;
}