#hero-container {
  width: 100%;
  position: relative;
  display: block;
}

#hero-image {
}

#hero-caption {
  font-family: 'Playfair Display', serif;
  font-weight: bold;
  font-size: clamp(0.563rem, round(0.25rem + 1.563vi, 0.05em), 1.5rem);
  /* min font 9px; max font 24px; min view 320px; max view 1280px; root 16px; round 0.05em */
  line-height: 125%;
  position: absolute;
  top: 0;
  text-align: center;
  width: 100%;
  background: rgba(255, 255, 255, 0.35);
  padding-block: clamp(0.5rem, 0.222rem + 0.889vw, 3rem);
  mask-image: linear-gradient(90deg, transparent, black 15%, black 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 15%, black 85%, transparent 100%);
  mask-mode: alpha;
}

.rotating-text {
  position: relative;
  height: clamp(11px, 2.188vw + 4px, 32px);
  left: 0px;
  width: 100%;
  /* overflow: hidden; */
}

.word {
  color: var(--sitename-color);
  position: absolute;
  opacity: 0; /* must reset */
  animation: rotateText 36s linear infinite;
}

/* Stagger animations for each word */
.word:nth-child(1)  { animation-delay: 0s; }
.word:nth-child(2)  { animation-delay: 3s; }
.word:nth-child(3)  { animation-delay: 6s; }
.word:nth-child(4)  { animation-delay: 9s; }
.word:nth-child(5)  { animation-delay: 12s; }
.word:nth-child(6)  { animation-delay: 15s; }
.word:nth-child(7)  { animation-delay: 18s; }
.word:nth-child(8)  { animation-delay: 21s; }
.word:nth-child(9)  { animation-delay: 24s; }
.word:nth-child(10) { animation-delay: 27s; }
.word:nth-child(11) { animation-delay: 30s; }
.word:nth-child(12) { animation-delay: 33s; }


/* Set horizontal shift for each word */
.word1  {--horz-shift: clamp(-30px, -1.875vw - 6px, -12px);}
.word2  {--horz-shift: clamp(-34px, -2.083vw - 7.333px, -14px);}
.word3  {--horz-shift: clamp(-100px, -6.354vw - 18.667px, -39px);}
.word4  {--horz-shift: clamp(-65px, -4.063vw - 13px, -26px);}
.word5  {--horz-shift: clamp(-95px, -6.042vw - 17.667px, -37px);}
.word6  {--horz-shift: clamp(-50px, -3.229vw - 8.667px, -19px);}
.word7  {--horz-shift: clamp(-45px, -2.183vw - 9px, -18px);}
.word8  {--horz-shift: clamp(-21px, -1.146vw - 6.333px, -10px);}
.word9  {--horz-shift: clamp(-80px, -5.208vw - 13.333px, -30px);}
.word10 {--horz-shift: clamp(-85px, -5.625vw - 13px, -31px);}
.word11 {--horz-shift: clamp(-48px, -3.125vw - 8px, -18px);}
.word12 {--horz-shift: clamp(-52px, -3.333vw - 9.333px, -20px);}

@keyframes rotateText {
  0% {
    opacity: 0;
    transform: translateY(30px) translateX(var(--horz-shift));
  }
  5% {
    opacity: 1;
    transform: translateY(0) translateX(var(--horz-shift));
  }
  9% {
    opacity: 1;
    transform: translateY(0) translateX(var(--horz-shift));
  }
  14% {
    opacity: 0;
    transform: translateY(-30px) translateX(var(--horz-shift));
  }
  100% {
    opacity: 0;
  }
}

.hero-button {
  font-family: 'Playfair Display', serif;
  font-weight: bold;
  font-size: clamp(1rem, round(0.833rem + 0.833vi, 0.05em), 1.5rem);
  /* padding: clamp(0.25rem, 5vw, 2rem) clamp(2rem, 50vw, 3rem); */ /* top-bottom left-right */
  width: clamp(15rem, round(9.583rem + 27.083vi, 0.05em), 31.25rem); 
  height: clamp(33px, 4.896vw + 17.333px, 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 85%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: solid 0.1vw var(--text-color);
  border-radius: clamp(5px, 1vw, 13px);
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
  background-color: var(--background-color);
  transition: background-color 1s ease;
  color: var(--text-color);
}

.hero-button:hover {
  color: var(--highlight-color-2);
  background-color: var(--sitename-color);
  border-color: var(--highlight-color-1);
}

.hero-button a {
  text-decoration: none;
  color: inherit;
}

.art-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(124px, 32%), 1fr));
  grid-template-rows: repeat(1, minmax(min(124px, 32%), 1fr));
  grid-auto-rows: 0;
  overflow: hidden;
}

.art-row-upper {
  margin-top: 1.56vw;
}

.art-row a {
  position: relative;
}

.art-row a img {
  aspect-ratio: 1;
  object-fit: cover;
  opacity: 0.5;
  padding: 2px;
  transition-duration: 0.75s;
}

.art-row a img:hover {
  opacity: 1;
  border: solid 3px var(--sitename-color);
}

.art-row a p {
  width: 100%; /* force descriptive text to be same width as square images */
  height: 100%;
  position: fixed;
  display: none;
  text-align: left;
  font-size: clamp(0.563rem, round(0.5rem + 0.313vi, 0.05em), 0.75rem);
  /* min font 9px; max font 12px; min view 320px; max view 1280px; root 16px; round 0.05em */
  padding: clamp(0.313rem, round(0.25rem + 0.313vi, 0.05em), 0.5rem);
  /* min font 5px; max font 8px; min view 320px; max view 1280px; root 16px; round 0.05em */
  line-height: 110%;
}

.art-row a:hover p {
  display: block;  /* transforms element into a box that occupies the full width of parent container */
  position: absolute;
  top: 0;
  left: -100%;
  height: 100%;
  background: var(--sitename-color);
  color: white;
  opacity: 1;
  pointer-events: none;
}

.art-row a.art1:hover p {
  display: block;  /* push text block to left, rather than right, for last cell in a row */
  position: absolute;
  top: 0;
  left: 100%;
  height: 100%;
  background: var(--sitename-color);
  color: white;
  opacity: 1;
}

.art-row a.art1:hover + a {
  opacity: 0;
}