/* Non-Tailwindable custom rules only — everything else is handled by Tailwind utilities */

/* Gallery infinite-scroll viewport */
.gallery-viewport {
  height: 100vh;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.gallery-viewport::-webkit-scrollbar {
  display: none;
}

/* Gallery image scroll animations */
.person-gallery img {
  opacity: 0;
  --animate-duration: 1s;
}

.person-gallery img.is-visible {
  opacity: 1;
}

.person-gallery img.is-leaving {
  --animate-duration: 0.8s;
}

/* Gallery image cursor */
.person-gallery img {
  cursor: zoom-in;
}

/* Lightbox overlay */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.85);
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}

.lightbox.is-open {
  display: flex;
}

.lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 1;
  cursor: zoom-out;
  display: block;
}

.lightbox-video-wrap {
  display: none;
  width: 90vw;
  max-width: 1100px;
  aspect-ratio: 16 / 9;
  position: relative;
}

.lightbox-video-wrap iframe,
.lightbox-video-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Scroll-to-top visibility toggle */
.scroll-top {
  opacity: 0;
  pointer-events: none;
}

.scroll-top.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Accordion chevron rotation */
.accordion-chevron {
  transition: transform 0.4s ease;
  display: block;
}

/* Accordion & archive caption visibility toggle */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s ease;
}

.accordion-content.is-visible {
  max-height: 2000px;
  transition: max-height 0.6s ease;
}

/* Archive image dim on caption reveal */
.archive-img.is-dimmed {
  filter: brightness(0.82);
}

/* Video embed 16/9 aspect ratio */
.video-wrap {
  position: relative;
  width: 100%;
  background: rgba(0, 0, 0, 0.03);
}

.video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Person gallery grid */
.person-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 80px;
  gap: 20px;
  width: 100%;
  padding: 50px;
  box-sizing: border-box;
  margin-bottom: 10vh;
}

.person-gallery img {
  width: 100%;
  height: auto;
  display: block;
  align-self: start;
}

/* Name/subtitle header placed after first portrait image */
.person-gallery .gallery-header-item {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  grid-row: 6;
}

/* Solo portrait (single image, no grid) */
.person-gallery .gimg-solo {
  grid-column: 3 / span 8;
  grid-row: 1 / span 7;
}




/* ─── Joni grid (24 images) ─── */

.person-gallery .joni-gimg-1 {
  grid-column: 5 / span 4;
  grid-row: 1 / span 7;
  margin-top: 20px;
}

.person-gallery .joni-gimg-2 {
  grid-column: 2 / span 4;
  grid-row: 8 / span 3;
}

.person-gallery .joni-gimg-3 {
  grid-column: 5 / span 2;
  grid-row: 10 / span 2;
  margin-top: -30px;
}

.person-gallery .joni-gimg-4 {
  grid-column: 1 / span 2;
  grid-row: 10 / span 3;
  margin-left: 30px;
  margin-top: -30px;
}

.person-gallery .joni-gimg-5 {
  grid-column: 9 / span 3;
  grid-row: 9 / span 2;
}

.person-gallery .joni-gimg-6 {
  grid-column: 9 / span 3;
  grid-row: 11 / span 2;
}

.person-gallery .joni-gimg-7 {
  grid-column: 2 / span 4;
  grid-row: 14 / span 2;
}

.person-gallery .joni-gimg-8 {
  grid-column: 8 / span 3;
  grid-row: 16 / span 2;
}

.person-gallery .joni-gimg-9 {
  grid-column: 6 / span 6;
  grid-row: 20 / span 4;
}

.person-gallery .joni-gimg-10 {
  grid-column: 2 / span 3;
  grid-row: 23 / span 3;
}

.person-gallery .joni-gimg-11 {
  grid-column: 1 / span 4;
  grid-row: 27 / span 3;
}

.person-gallery .joni-gimg-12 {
  grid-column: 9 / span 4;
  grid-row: 31 / span 4;
}

.person-gallery .joni-gimg-13 {
  grid-column: 9 / span 3;
  grid-row: 27 / span 3;
}

.person-gallery .joni-gimg-14 {
  grid-column: 6 / span 2;
  grid-row: 30 / span 3;
}

.person-gallery .joni-gimg-15 {
  grid-column: 7 / span 3;
  grid-row: 28 / span 3;
}

.person-gallery .joni-gimg-16 {
  grid-column: 1 / span 6;
  grid-row: 39 / span 8;
  margin-left: -50px;
}

.person-gallery .joni-gimg-17 {
  grid-column: 5 / span 4;
  grid-row: 36 / span 3;
}

.person-gallery .joni-gimg-18 {
  grid-column: 10 / span 2;
  grid-row: 37 / span 2;
}

.person-gallery .joni-gimg-19 {
  grid-column: 10 / span 2;
  grid-row: 39 / span 2;
  display: none;
}

.person-gallery .joni-gimg-20 {
  grid-column: 2 / span 4;
  grid-row: 46 / span 2;
  padding-top: 30px;
}

.person-gallery .joni-gimg-21 {
  grid-column: 9 / span 3;
  grid-row: 44 / span 3;
}

.person-gallery .joni-gimg-22 {
  grid-column: 5 / span 4;
  grid-row: 61 / span 5;
}

.person-gallery .joni-gimg-23 {
  grid-column: 8 / span 2;
  grid-row: 64 / span 3;
  padding-top: 50px;
}

.person-gallery .joni-gimg-24 {
  grid-column: 3 / span 8;
  grid-row: 51 / span 5;
}




/* ─── Adrian grid (20 images) ─── */

.person-gallery .adrian-gimg-1 {
  grid-column: 5 / span 4;
  grid-row: 1 / span 7;
  margin-top: 20px;
}

.person-gallery .adrian-gimg-2 {
  grid-column: 3 / span 3;
  grid-row: 8 / span 2;
}

.person-gallery .adrian-gimg-3 {
  grid-column: 2 / span 2;
  grid-row: 9 / span 3;
  margin-left: -50px;
  margin-top: -40px;
}

.person-gallery .adrian-gimg-4 {
  grid-column: 3 / span 2;
  grid-row: 10 / span 3;
  padding-top: 30px;
  padding-left: 10px;
}

.person-gallery .adrian-gimg-5 {
  grid-column: 8 / span 2;
  grid-row: 10 / span 3;
}

.person-gallery .adrian-gimg-6 {
  grid-column: 10 / span 2;
  grid-row: 10 / span 3;
}

.person-gallery .adrian-gimg-7 {
  grid-column: 1 / span 4;
  grid-row: 15 / span 2;
}

.person-gallery .adrian-gimg-8 {
  grid-column: 2 / span 2;
  grid-row: 18 / span 2;
  padding-top: 40px;
}

.person-gallery .adrian-gimg-9 {
  grid-column: 5 / span 4;
  grid-row: 15 / span 2;
  padding-top: 50px;
}

.person-gallery .adrian-gimg-10 {
  grid-column: 5 / span 4;
  grid-row: 18 / span 4;
  padding-top: 50px;
}

.person-gallery .adrian-gimg-11 {
  grid-column: 9 / span 4;
  grid-row: 15 / span 2;
}

.person-gallery .adrian-gimg-12 {
  grid-column: 9 / span 4;
  grid-row: 18 / span 3;
  padding-top: 30px;
}

.person-gallery .adrian-gimg-13 {
  grid-column: 1 / span 2;
  grid-row: 24 / span 5;
}

.person-gallery .adrian-gimg-14 {
  grid-column: 3 / span 3;
  grid-row: 23 / span 4;
}

.person-gallery .adrian-gimg-15 {
  grid-column: 4 / span 3;
  grid-row: 25 / span 2;
  padding-top: 20px;
}

.person-gallery .adrian-gimg-16 {
  grid-column: 9 / span 3;
  grid-row: 26 / span 6;
}

.person-gallery .adrian-gimg-17 {
  grid-column: 9 / span 3;
  grid-row: 29 / span 3;
  padding-top: 60px;
}

.person-gallery .adrian-gimg-18 {
  grid-column: 2 / span 3;
  grid-row: 30 / span 2;
}

.person-gallery .adrian-gimg-19 {
  grid-column: 4 / span 3;
  grid-row: 32 / span 2;
  padding-top: 10px;
}

.person-gallery .adrian-gimg-20 {
  grid-column: 9 / span 3;
  grid-row: 31 / span 3;
  padding-left: 60px;
  padding-right: 60px;
  margin-top: 70px;
}




/* ─── annelies grid (20 images) ─── */

.person-gallery .annelies-gimg-1 {
  grid-column: 5 / span 4;
  grid-row: 1 / span 7;
  margin-top: 20px;
}

.person-gallery .annelies-gimg-2 {
  grid-column: 1 / span 5;
  grid-row: 8 / span 3;
}

.person-gallery .annelies-gimg-3 {
  grid-column: 5 / span 2;
  grid-row: 10 / span 3;
  margin-left: -50px;
  /* margin-top : -40px; */
}

.person-gallery .annelies-gimg-4 {
  grid-column: 9 / span 4;
  grid-row: 9 / span 3;
  /* padding-top: 30px;
  padding-left: 10px; */
}

.person-gallery .annelies-gimg-5 {
  grid-column: 3 / span 8;
  grid-row: 14 / span 3;
  z-index: 0;
}

.person-gallery .annelies-gimg-6 {
  grid-column: 1 / span 3;
  grid-row: 15 / span 3;
  padding-right: 40px;
}

.person-gallery .annelies-gimg-7 {
  grid-column: 10 / span 2;
  grid-row: 13 / span 2;
  margin-top: 40px;
  margin-left: 30px;
}

.person-gallery .annelies-gimg-8 {
  grid-column: 9 / span 3;
  grid-row: 18 / span 2;
  margin-top: -50px;
  padding-right: 20px;
}

.person-gallery .annelies-gimg-9 {
  grid-column: 1 / span 7;
  grid-row: 20 / span 2;
}

.person-gallery .annelies-gimg-10 {
  grid-column: 11 / span 2;
  grid-row: 20 / span 4;
  margin-right: 50px;
  padding-left: 20px;
}

.person-gallery .annelies-gimg-11 {
  grid-column: 7 / span 2;
  grid-row: 23 / span 2;
}

.person-gallery .annelies-gimg-12 {
  grid-column: 9 / span 2;
  grid-row: 23 / span 3;
  /* margin-left: 30px; */
}

.person-gallery .annelies-gimg-13 {
  grid-column: 1 / span 7;
  grid-row: 27 / span 5;
}

.person-gallery .annelies-gimg-14 {
  grid-column: 9 / span 3;
  grid-row: 27 / span 4;
}

.person-gallery .annelies-gimg-15 {
  grid-column: 1 / span 8;
  grid-row: 32 / span 2;
  padding-top: 20px;
}

.person-gallery .annelies-gimg-16 {
  grid-column: 10 / span 3;
  grid-row: 33 / span 6;
  padding-right: 30px;
}

.person-gallery .annelies-gimg-17 {
  grid-column: 2 / span 4;
  grid-row: 39 / span 3;
  /* padding-top: 60px; */
  margin-left: -40px;
  padding-right: 50px;
}

.person-gallery .annelies-gimg-18 {
  grid-column: 4 / span 4;
  grid-row: 37 / span 2;
  margin-top: 30px;
}

.person-gallery .annelies-gimg-19 {
  grid-column: 5 / span 2;
  grid-row: 40 / span 2;
  margin-top: 15px;
  /* margin-left: 50px; */
  padding-right: 40px;
}

.person-gallery .annelies-gimg-20 {
  grid-column: 9 / span 4;
  grid-row: 38 / span 3;
  padding-left: 30px;
  padding-right: 30px;
  /* margin-top: 30px; 
  margin-left: -30px; */
}

/* ─── Gallery question text items ─── */
.gallery-question {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(20, 20, 20);
  align-self: start;
  margin: 0;
  cursor: pointer;
}

/* ─── Joni question positions ─── */
.person-gallery .joni-gtext-1 {
  grid-column: 2 / span 3;
  grid-row: 6;
  display: none;
}

.person-gallery .joni-gtext-2 {
  grid-column: 8 / span 4;
  grid-row: 12;
  display: none;
}

.person-gallery .joni-gtext-3 {
  grid-column: 1 / span 3;
  grid-row: 18;
  display: none;
}

.person-gallery .joni-gtext-4 {
  grid-column: 8 / span 4;
  grid-row: 22;
  display: none;
}

.person-gallery .joni-gtext-5 {
  grid-column: 2 / span 4;
  grid-row: 26;
  display: none;
}

.person-gallery .joni-gtext-6 {
  grid-column: 1 / span 4;
  grid-row: 33;
  display: none;
}

.person-gallery .joni-gtext-7 {
  grid-column: 7 / span 4;
  grid-row: 38;
  display: none;
}

.person-gallery .joni-gtext-8 {
  grid-column: 2 / span 4;
  grid-row: 43;
  display: none;
}

.person-gallery .joni-gtext-9 {
  grid-column: 8 / span 4;
  grid-row: 47;
  display: none;
}

.person-gallery .joni-gtext-10 {
  grid-column: 2 / span 4;
  grid-row: 54;
  display: none;
}

.person-gallery .joni-gtext-11 {
  grid-column: 2 / span 4;
  grid-row: 45;
  display: none;
}

.person-gallery .joni-gtext-12 {
  grid-column: 2 / span 4;
  grid-row: 45;
  display: none;
}

.person-gallery .joni-gtext-13 {
  grid-column: 2 / span 4;
  grid-row: 45;
  display: none;
}

.person-gallery .joni-gtext-13 {
  grid-column: 2 / span 4;
  grid-row: 45;
  display: none;
}

/* ─── Adrian question positions ─── */
.person-gallery .adrian-gtext-1 {
  grid-column: 8 / span 4;
  grid-row: 6;
  display: none;
}

.person-gallery .adrian-gtext-2 {
  grid-column: 1 / span 3;
  grid-row: 12;
  display: none;
}

.person-gallery .adrian-gtext-3 {
  grid-column: 6 / span 4;
  grid-row: 13;
  display: none;
}

.person-gallery .adrian-gtext-4 {
  grid-column: 1 / span 4;
  grid-row: 19;
  display: none;
}

.person-gallery .adrian-gtext-5 {
  grid-column: 8 / span 4;
  grid-row: 22;
  display: none;
}

.person-gallery .adrian-gtext-6 {
  grid-column: 2 / span 4;
  grid-row: 26;
  display: none;
}

.person-gallery .adrian-gtext-7 {
  grid-column: 6 / span 4;
  grid-row: 28;
  display: none;
}

.person-gallery .adrian-gtext-8 {
  grid-column: 1 / span 4;
  grid-row: 31;
  display: none;
}

.person-gallery .adrian-gtext-9 {
  grid-column: 6 / span 4;
  grid-row: 33;
  display: none;
}

.person-gallery .adrian-gtext-10 {
  grid-column: 2 / span 4;
  grid-row: 36;
  display: none;
}

.person-gallery .adrian-gtext-11 {
  grid-column: 2 / span 4;
  grid-row: 45;
  display: none;
}

.person-gallery .adrian-gtext-12 {
  grid-column: 2 / span 4;
  grid-row: 45;
  display: none;
}

.person-gallery .adrian-gtext-13 {
  grid-column: 2 / span 4;
  grid-row: 45;
  display: none;
}

/* ─── Annelies question positions ─── */
.person-gallery .annelies-gtext-1 {
  grid-column: 8 / span 4;
  grid-row: 6;
  display: none;
}

.person-gallery .annelies-gtext-2 {
  grid-column: 10 / span 3;
  grid-row: 22;
}

.person-gallery .annelies-gtext-3 {
  grid-column: 6 / span 4;
  grid-row: 17;
  display: none;
}

.person-gallery .annelies-gtext-4 {
  grid-column: 1 / span 4;
  grid-row: 21;
  display: none;
}

.person-gallery .annelies-gtext-5 {
  grid-column: 8 / span 4;
  grid-row: 12;
}

.person-gallery .annelies-gtext-6 {
  grid-column: 2 / span 4;
  grid-row: 28;
  display: none;
}

.person-gallery .annelies-gtext-7 {
  grid-column: 4 / span 4;
  grid-row: 31;
  margin-top: 30px;
}

.person-gallery .annelies-gtext-8 {
  grid-column: 1 / span 4;
  grid-row: 36;
  display: none;
}

.person-gallery .annelies-gtext-9 {
  grid-column: 7 / span 4;
  grid-row: 40;
  display: none;
}

.person-gallery .annelies-gtext-10 {
  grid-column: 2 / span 4;
  grid-row: 45;
  display: none;
}

.person-gallery .annelies-gtext-11 {
  grid-column: 2 / span 4;
  grid-row: 45;
  display: none;
}

.person-gallery .annelies-gtext-12 {
  grid-column: 2 / span 4;
  grid-row: 45;
  display: none;
}

.person-gallery .annelies-gtext-13 {
  grid-column: 2 / span 4;
  grid-row: 45;
  display: none;
}

.person-gallery .annelies-gtext-14 {
  grid-column: 9 / span 3;
  grid-row: 30;
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
}