:root {
  --textcolor: #000;
  --csc-yellow: #ffd700;
  --csc-red: red;
  --sans: "helvetica neue", helvetica, arial, sans-serif;
}

html {
  scrollbar-color: var(--csc-red) #000;
  scrollbar-width: thin;
  scroll-snap-type: y mandatory;
}

@media (min-width: 1024px) {
  html {
    scrollbar-color: var(--csc-red) #000;
    scrollbar-width: thick;
  }
}

body,
html {
  background: var(--csc-yellow);
  margin: 0;
  font-family: var(--sans);
  color: var(--textcolor);
}

ul {
    border-left: 1vh solid var(--csc-red);
    padding-left: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

ul li {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 4vh;
  text-transform: uppercase;
  list-style-position: inherit;
  list-style-type: none;

}

ul li span {
  padding: 0.25rem;
  background: var(--csc-yellow);
}

h1 {
  top: 0;
  font-size: 100px;
  font-family: "Karnak Condensed";
  font-weight: 900;
  line-height: 1;
  text-align: left;
  position: absolute;
  max-width: 1100px;
  margin: 0;
  padding: 4rem;
  opacity: 1;
  z-index: 100;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes photoFadeIn {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0.25;
  }
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide {
  margin: 0;
  height: 100vh;
  display: block;
  scroll-snap-align: start;
  position: relative;
  background-color: black;
}

/* .yellow-border {
  border: 6px solid var(--csc-yellow);
} */

.fixed-border {
  z-index: 100;
  width: 100vw;
  height: 100vh;
  border: 1.5vh solid var(--csc-yellow);
  position: fixed;
}


div.red-matte {
  padding: 3vh;
  height: 100vh;
  background-color: var(--csc-red);
}

div.black-matte {
  padding: 3vh;
  height: 100vh;
  background-color: black;
}

figcaption {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;

  h2 {
    background: var(--csc-yellow);
    color: black;
    border: black 6px solid;
    padding: 2rem;
    opacity: 1;
    font-size: 7vh;
    text-transform: uppercase;
    line-height: 1.1;
    font-weight: 700;
  }
}

img.intro {
  animation: photoFadeIn 3s ease-out;
  -webkit-animation: photoFadeIn 3s ease-out;
  -moz-animation: photoFadeIn 3s ease-out;
  -o-animation: photoFadeIn 3s ease-out;
  -ms-animation: photoFadeIn 3s ease-out;
  opacity: 0.25;
  background-color: purple;
  background-color: color(display-p3 0.46 0 1);
}

img.outro {
  opacity: 0.25;
}

figure.inset,
figure.inset-white {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  height: 100vh;
  padding: 3vh;
  background-color: purple;
  background-color: color(display-p3 0.46 0 1);
}

figure.vertical {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

figure.vertical img {
  width: auto;
  height: 100%;
  object-fit: unset;
}

figure.vertical figcaption {
  position: unset;
}

figure.inset-white {
  background: white;
}

.collage-03 {
  padding: 3vh;
  width: 100%;
  min-height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  gap: 1vw;
  scroll-snap-align: start;
  box-sizing: border-box;
  background: #000;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  .pep {
    display: flex;
    gap: 2vh;
    flex-direction: column;
    width: 20vw;

    figure {
      width: 100%;
      height: auto;
      background: lime;
    }
  }

  .danny {
    display: flex;
    gap: 2vh;
    flex-direction: column;
    width: 80vw;

    .danny-top-row {
      display: flex;
      gap: 1vw;
      flex-direction: row;
      justify-content: space-between;

      figure img {
        object-fit: unset;
        height: auto;
      }

      figure.danny-lions-gate {
        width: 35vw;
        height: auto;
      }

      figure.hope {
        width: 21vw;
        height: auto;
      }

      figure.sword {
        width: 13vw;
        height: auto;
      }
    }

    .vero-bottom-row {
      display: flex;
      gap: 1vw;
      flex-direction: row;
      align-items: flex-end;
      justify-content: space-between;

      figure img {
        object-fit: unset;
        height: auto;
      }

      figure.vero {
        width: 20vw;
        height: auto;
      }

      figure.heart {
        width: 20vw;
        height: auto;
      }

      figure.amy {
        width: 30vw;
        height: auto;
      }
    }


  }
}

/* Portrait grid: 6×3, matching csc-desktop-04 layout */
.portrait-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, auto));
  gap: clamp(0.5rem, 2vmin, 1.25rem);
  padding: 3vh;
  width: 100%;
  min-height: 100vh;
  scroll-snap-align: start;
  box-sizing: border-box;
  background: #000;
}

.portrait-grid .grid-cell {
  min-width: 0;
  min-height: 0;
  width: 100%;
  max-width: 24vh;
}

.portrait-grid .grid-cell img {
  object-fit: cover;
  aspect-ratio: 4 / 5;
  height: 100%;
}