/* FONTS */

/* Johnston ITC Pro */

@font-face {
  font-family: 'Johnston';
  src: url('../fonts/JohnstonITCPro-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Johnston';
  src: url('../fonts/JohnstonITCPro-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}

/* Transitions */

.crystal {
  -webkit-transition: background-color 0.15s ease-in-out;
  -moz-transition: background-color 0.15s ease-in-out;
  -ms-transition: background-color 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out;
}

.clip {
  -webkit-transition: -webkit-mask-size 0.15s, width 0.15s, height 0.15s;
  -moz-transition: mask-size 0.15s, width 0.15s, height 0.15s;
  -ms-transition: mask-size 0.15s, width 0.15s, height 0.15s;
  transition: mask-size 0.15s, width 0.15s, height 0.15s;
}

.photo {
  -webkit-transition: width 0.15s, height 0.15s;
  -moz-transition: width 0.15s, height 0.15s;
  -ms-transition: width 0.15s, height 0.15s;
  transition: width 0.15s, height 0.15s;
}

p a {
  -webkit-transition: color 0.15s;
  -moz-transition: color 0.15s;
  -ms-transition: color 0.15s;
  transition: color 0.15s;
}

/* Interactions */

.no-select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 {font-weight: 300} h1 {font-size: 26px} h1 {line-height: 30px} 
h2 {font-weight: 500} h2 {font-size: 16px} h2 {line-height: 20px} 

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

html, 
body {
  width: 100%;
  height: auto;
  min-height: 100%;
  margin: 0;
  padding: 0;
  background-color: rgb(25, 28, 28);
  color: rgb(171, 194, 202);
}

body {
  display: flex;
  flex-direction: column;
  font-family: 'Johnston';
  font-weight: 300;
  font-size: 1rem;
  font-size: 16px;
  line-height: 20px;
}

header {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3rem;
  margin: 2rem 5vw 2rem 6vw;
}

hgroup {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2rem;
}

#fathom {
  width: 4rem;
  height: auto;
}

#fathom, 
#fathom:visited {
  color: inherit;
  text-decoration: none;
}

#heading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
}

#description {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  /* font-family: 'MD Nichrome'; */
  /* margin: 0 5vw 30px; */
}

p {
  max-width: 30rem;
  font-size: 18px;
  line-height: 22px;
  margin: 0 auto;
}

p a,
p a:visited {
  color: inherit;
  text-decoration: none;
  font-weight: 500;
}

#gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0;
  margin: 30px 4vw 60px;
}

.crystal {
  position: relative;
  width: 10vw;
  height: 10vw;
  background-color: transparent;
  pointer-events: none;
  /* opacity: 0.9; */
}

/* .crystal:hover {
  opacity: 1;
} */

.clip {
  position: absolute;
  top: 50%;
  left: 50%;
  width: inherit;
  height: inherit;
  transform: translate(-50%, -50%);
  -webkit-mask-image: url(../assets/shapes/hexagon.svg#fill);
  -webkit-mask-position: 0 0;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-image: url(../assets/shapes/hexagon.svg#fill);
  mask-position: 0 0;
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  overflow: hidden;
  pointer-events: none;
}

.link {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: 88.8333%; /* aspect ratio of hexagon clip shape */
  height: inherit;
  transform: translate(-50%, -50%);
  overflow: hidden;
  background-color: inherit;
  pointer-events: auto;
}

.photo {
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 80%;
  transform: translate(-50%, -50%);
}

body[data-theme="dark"] .photo {
  filter: grayscale(0);
  mix-blend-mode: screen;
}

body[data-theme="light"] .photo {
  filter: grayscale(0) contrast(1.5) invert(1);
  opacity: 0.8;
  mix-blend-mode: multiply;
}

body[data-theme="light"] .link:hover .photo {
  opacity: 1;
}

/* NINE-EIGHT */

#gallery[data-grid="nine-eight"] .crystal {
  width: 10.2222vw;
  height: 10.2222vw;
}

#gallery[data-grid="nine-eight"] .crystal:nth-child(17n - 7) {
  margin-left: 5.1111vw;
}

/* EIGHT-SEVEN */

#gallery[data-grid="eight-seven"] .crystal {
  width: 11.5vw;
  height: 11.5vw;
}

#gallery[data-grid="eight-seven"] .crystal:nth-child(15n - 6) {
  margin-left: 5.75vw;
}

/* SEVEN-SIX */

#gallery[data-grid="seven-six"] .crystal {
  width: 13.1429vw;
  height: 13.1429vw;
}

#gallery[data-grid="seven-six"] .crystal:nth-child(13n - 5) {
  margin-left: 6.5715vw;
}

/* FIVE-FOUR */

#gallery[data-grid="five-four"] .crystal {
  width: 18.4vw;
  height: 18.4vw;
}

#gallery[data-grid="five-four"] .crystal:nth-child(9n - 3) {
  margin-left: 9.2vw;
}

/* THREE-TWO */

#gallery[data-grid="three-two"] .crystal {
  width: 30.6667vw;
  height: 30.6667vw;
}

#gallery[data-grid="three-two"] .crystal:nth-child(5n - 1) {
  margin-left: 15.3333vw;
}

/* ONE-ONE */

#gallery[data-grid="one-one"] {
  flex-direction: column;
  gap: 10vw;
}

#gallery[data-grid="one-one"] .crystal {
  width: 92vw;
  height: 92vw;
}

/* Constraints */

#gallery[data-grid="seven-six"][data-total="60"] .crystal:nth-child(59) + .crystal {display: none}
#gallery[data-grid="five-four"][data-total="60"] .crystal:nth-child(59) + .crystal {display: none}

/* Queries */

@media (max-width: 699px) {

  header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.25rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2vw;
    max-width: 90vw;
  }

  hgroup {
    width: 100%;
    gap: 2.5rem;
  }

  #heading {
    flex: 1;
    gap: 0.25rem;
  }

  p {
    max-width: unset;
  }

}

@media (min-width: 1400px) {

  header {
    gap: 8rem;
  }

  #description {
    flex: unset;
  }

}