:root {
  --font-size: 21px;
}

@font-face {
  font-family: "Tallinn Grotesk";
  src: url("fonts/TallinnGroteskBeta-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tallinn Grotesk Mono";
  src: url("fonts/TallinnGroteskBeta-RegularMono.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tallinn Grotesk Mono Stencil";
  src: url("fonts/TallinnGroteskBeta-RegularMonoStencil.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Koekoek-Regular";
  src: url("Koekoek-Regular-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

html {
  background: black;
}

body {
  margin: 0;
  padding: 40px;
  font-family: "Tallinn Grotesk Mono", monospace;
  background: black;
  color: white;
  letter-spacing: 0.8pt;
}

button,
input,
textarea,
select {
  font-family: inherit;
}

/* Verberg de systeemcursor overal (html, body, links, video, tekst, ...) */

html,
html *,
html *::before,
html *::after {
  cursor: none !important;
}

/* De systeemcursor boven een scrollbalk is niet te verbergen; de scrollbalk verdwijnt dus
   (scrollen blijft werken met wiel, trackpad en toetsenbord). */

html {
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

/* Homepage op een gewoon scherm: niet scrollbaar (body-padding + volle hoogte gaf een overschot) */

@media (hover: hover) and (min-width: 769px) and (min-height: 560px) {
  body.page-home {
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    box-sizing: border-box;
  }
}

/* Slepen van een beeld toont de systeemcursor en een spookbeeld: uitzetten */

body.crosshair-cursor img,
body.crosshair-cursor video {
  -webkit-user-drag: none;
  user-select: none;
}

/* Little crosshair that substitutes the pointer */

.crosshair-cursor .cursor-crosshair {
  position: fixed;
  /* buiten beeld tot de eerste muisbeweging, anders staat hij linksboven */
  left: -100px;
  top: -100px;
  width: 16px;
  height: 16px;
  /* het midden van het kruisje komt precies op de muispunt */
  margin-left: -8px;
  margin-top: -8px;
  pointer-events: none;
  z-index: 99999;
  background:
    linear-gradient(
      to right,
      transparent 6px,
      currentColor 6px,
      currentColor 10px,
      transparent 10px
    ),
    linear-gradient(
      to bottom,
      transparent 6px,
      currentColor 6px,
      currentColor 10px,
      transparent 10px
    );
  background-size: 16px 16px;
  background-position: center;
  background-repeat: no-repeat;
  color: yellow;
  transition: background-size 0.25s ease;
}

/* Bolletje dat het kruisje vervangt bij hover over een link */

.crosshair-cursor .cursor-crosshair::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: currentColor;
  transform: scale(0);
  transition: transform 0.25s ease;
}

.crosshair-cursor .cursor-crosshair.is-hovering {
  background-size: 0 0;
}

.crosshair-cursor .cursor-crosshair.is-hovering::after {
  transform: scale(0.9);
}

/* Header bovenaan */

header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.name-home a {
  color: inherit;
  text-decoration: none;
  transition: 0.2s ease;
  font-size: var(--font-size);
}

.name-home a:hover {
  text-decoration: underline;
  text-underline-offset: 6px;
  font-family: "Tallinn Grotesk Mono Stencil", "Tallinn Grotesk Mono", monospace;
}

/* Navigatie rechtsboven */

nav {
  display: flex;
  gap: 100px;
  font-size: var(--font-size);
}

nav a {
  color: white;
  text-decoration: none;
  transition: 0.2s ease;
}

nav a:hover,
nav a.active:hover {
  font-family: "Tallinn Grotesk Mono Stencil", "Tallinn Grotesk Mono", monospace;
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* Andere navigatielinks dimmen terwijl we over één ervan hoveren (enkel met muis) */

@media (hover: hover) {
  nav:hover a:not(:hover) {
    opacity: 0.4;
  }
}

nav a.active {
  color: red;
  text-decoration: none;
}



/* Sidebar links */

.sidebar {
  margin-top: 60px;
  font-size: var(--font-size);
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* links zijn enkel zo breed als hun tekst */
  line-height: 0.8;
}

.sidebar a {
  color: white;
  text-decoration: none;
  transition: 0.2s ease;
}

.sidebar a:hover {
  font-family: "Tallinn Grotesk Mono Stencil", "Tallinn Grotesk Mono", monospace;
}

/* Pijltje (↗) aan het einde van elk project */

.sidebar .project-link::after {
  content: "\2197";
  margin-left: 0.4em;
}

/* Afbeelding bij hover in het midden */

.hover-image-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}

/* Alle previews: landschap = vaste breedte, portret = vaste hoogte */

.hover-image-container :is(img, video) {
  --preview-size: 578px; /* 525px + 10% */
  width: var(--preview-size);
  height: auto;
  opacity: 0;
  filter: blur(4px);
  transition:
    opacity 0.35s ease,
    filter 0.45s ease;
}

/* Na 1s wordt blur weggefade (klasse via JS op index) */

.hover-image-container :is(img, video).preview-sharp {
  filter: blur(0);
}

/* Fade-in + lichte zoom bij hover (standaard voor alle project-links) */

.hover-image-container :is(img, video).is-active {
  opacity: 1;
  transform: scale(1.05);

  animation: preview-fade-in 0.4s ease-out;
}

@keyframes preview-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.hover-image-container :is(img, video).preview-portrait {
  width: auto;
  height: var(--preview-size);
}

/* Lecture series en Koekoek blijven op de oorspronkelijke grootte */

.hover-image-container :is(img, video).preview-compact {
  --preview-size: 525px;
}

/* Extra stijlen voor projectpagina's */

.top-left {
  position: fixed;
  top: 40px;
  left: 40px;
  font-size: var(--font-size);
}

.top-left a {
  color: inherit;
  text-decoration: none;
}

.top-left a:hover {
  text-decoration: underline;
  text-underline-offset: 6px;
  font-family: "Tallinn Grotesk Mono Stencil", "Tallinn Grotesk Mono", monospace;
}

.gallery {
  display: flex;
  justify-content: center;
  gap: 80px;
  padding-top: 120px;
  padding-bottom: 60px;
}

.gallery img {
  width: 380px;
  height: auto;
  object-fit: cover;
  background: white;
}

.title {
  text-align: center;
  font-size: var(--font-size);
  margin-bottom: 40px;
}

/* Beschrijving */

.description {
  text-align: center;
  color: white;
  max-width: 600px;
  margin: 80px auto;
  font-size: var(--font-size);
  line-height: 1.6;
}

/* Beschrijving zwarte text */

.description-black {
  text-align: center;
  color: white;
  max-width: 600px;
  margin: 180px auto;
  font-size: var(--font-size);
  line-height: 1.6;
}

.black-section {
  background-color: black;
  color: white;
  margin-left: -40px;
  margin-right: -40px;
  padding: 4rem 0;
}

/* Home button */

.homebutton-link a {
  color: white;
  text-decoration: none;
  transition: 0.2s ease;
  display: flex;
  justify-content: center;
  margin-top: 80px;
  margin-bottom: 200px;
  font-size: var(--font-size);
}

.homebutton-black a {
  color: white;
  text-decoration: none;
  transition: 0.2s ease;
  display: flex;
  justify-content: center;
  margin-top: 80px;
  margin-bottom: 200px;
  font-size: var(--font-size);
}

/* Links die altijd onderlijnd staan (desktop en mobiel) */

.homebutton-link a.always-underlined {
  text-decoration: underline;
  text-underline-offset: 6px;
}

.homebutton-link a:hover {
  text-decoration: underline;
  text-underline-offset: 6px;
}

.homebutton-black a:hover {
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* Verticale galerij */

.vertical-gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  margin-top: 80px;
}

.vertical-gallery img,
.vertical-gallery video {
  width: 70%;
  height: auto;
  object-fit: cover;
}

/* Verticale galerij West Belgique */

.vertical-gallery-west {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  margin-top: 80px;
}

.vertical-gallery-west img {
  width: 85%;
  height: auto;
  object-fit: cover;
}

/* Twee kolommen galerij */

.vertical-gallery-2-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
  row-gap: 40px;
  margin-top: 80px;
  justify-content: center;
  justify-items: center;
}

.vertical-gallery-2-columns img {
  width: 80%;
  height: auto;
  object-fit: cover;
}

.vertical-gallery-koekoek {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  margin-top: 80px;
}

.vertical-gallery-koekoek img {
  width: 90%;
  height: auto;
  object-fit: cover;
}

.vertical-koekoek {
  justify-content: center;
  margin-left: 200px;
}

.vertical-koekoek img {
  width: 80%;
  height: auto;
  object-fit: cover;
}

/* Koekoek page: flex column so glyph grid is truly centered in the viewport */

body.page-koekoek {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

body.page-koekoek .homebutton-link {
  flex-shrink: 0;
  text-align: center;
}

body.page-koekoek .homebutton-link a {
  margin-top: 1rem;
  margin-bottom: 2rem;
}

/* Koekoek Modulaarne – 9 columns × 6 rows (fixed grid) */

.koekoek-glyph-page {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  padding: clamp(48px, 8vh, 88px) clamp(12px, 2.5vw, 32px);
  box-sizing: border-box;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.koekoek-glyph-grid {
  border-collapse: separate;
  border-spacing:
    clamp(0.4rem, 1.4vw, 1.1rem)
    clamp(0.5rem, 1.8vh, 1.35rem);
  table-layout: fixed;
  margin: 0 auto;
  width: min(80vw, 1600px);
}

.koekoek-glyph-grid col {
  width: calc(100% / 9);
}

.koekoek-glyph-grid td {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  padding: clamp(1rem, 4.5vh, 3.25rem)
           clamp(0.75rem, 2.8vw, 2.25rem);
  box-sizing: border-box;
}

.koekoek-glyph-grid .glyph {
  display: inline-block;
  font-family: "Koekoek-Regular", monospace;
  font-size: clamp(2rem, 7.5vw, 5.25rem);
  line-height: 1;
  color: #fff;
  transition: transform 0.2s ease;
  transform-origin: center center;
  will-change: transform;
  pointer-events: none;
}

/* Whole cell is hover target; one glyph “active” per cell */

.koekoek-glyph-grid td:hover .glyph {
  transform: scale(2.45);
}

/* info text pagina */

.info-text {
  text-align: left;
  font-size: var(--font-size);
  max-width: 40ch;
  line-height: 1.4;
  margin-top: 60px;
  margin-bottom: 60px;
}

.info-text a {
  color: white;
  text-decoration: underline;
  text-underline-offset: 6px;
  transition: 0.2s ease;
}


.resume-link a {
  color: white;
  text-decoration: none;
  transition: 0.2s ease;
  line-height: 1.8;
  font-size: var(--font-size);
}

.resume-link a:hover {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

/* contact me text pagina */

.contact-menu {
  text-align: left;
  font-size: var(--font-size);
  max-width: 40ch;
  line-height: 1.4;
  margin-top: 60px;
  margin-bottom: 40px;
}

.contact-menu-list {
  font-size: var(--font-size);
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 2.2em;
  list-style: disc;
}

.email-menu {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  color: white;
  font-size: var(--font-size);
  line-height: 1.9;
  display: inline-block;
  margin-top: 40px;
}

.email-menu-koekoek {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  color: white;
  font-size: var(--font-size);
  line-height: 1.9;
  display: inline-block;
  margin-top: 40px;
}

.email-menu:hover {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

.image-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
  margin: 40px 0;
  margin-top: 90px;
  margin-bottom: 90px;
}

.image-row img {
  height: 750px;
  width: auto;
  object-fit: cover;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  width: min(90%, 1100px);
  margin: 0 auto;
  padding-top: 80px;
  padding-bottom: 40px;
  box-sizing: border-box;
}

.image-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.image-grid.portrait-grid {
  width: 70%; /* gelijk aan de breedte van .vertical-gallery img */
  gap: 24px;
}

.image-grid.portrait-grid img {
  aspect-ratio: 3 / 4;
}

.absolute-links {
  align-items: right;
}

/* Mobile */

@media (max-width: 768px) {
  body {
    padding: 20px;
    font-size: var(--font-size);
  }

  /* Header stacken */

  header {
    flex-direction: column;
    gap: 20px;
  }

  nav {
    gap: 40px;
    font-size: var(--font-size);
  }

  /* Sidebar wordt gewone lijst */

  .sidebar {
    margin-top: 40px;
    line-height: 1.2;
  }

  .sidebar a {
    font-size: var(--font-size);
  }

  /* Hover images uitschakelen op mobiel */

  .hover-image-container {
    display: none;
  }

  /* Galerijen */

  .gallery {
    flex-direction: column;
    gap: 40px;
    padding-top: 60px;
  }

  .gallery img {
    width: 100%;
  }

  /* Vertical galleries */

  .vertical-gallery img,
  .vertical-gallery video {
    width: 100%;
  }

  .image-grid.portrait-grid {
    width: 100%;
  }

  .vertical-gallery-2-columns {
    grid-template-columns: 1fr;
  }

  /* Info / contact tekst */

  .info-text,
  .contact-menu {
    max-width: 100%;
    font-size: var(--font-size);
  }

  /* Grote beeldrij */

  .image-row {
    flex-direction: column;
    gap: 40px;
  }

  .image-row img {
    width: 100%;
    height: auto;
  }

  .image-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    width: 100%;
  }

  /* Header: kleinere marges, naam blijft leesbaar boven de beelden */

  .top-left {
    top: 16px;
    left: 20px;
    z-index: 100;
    mix-blend-mode: difference;
  }

  /* Homepage: royale tikzones in de projectlijst */

  .sidebar {
    line-height: 1;
  }

  .sidebar a {
    display: block;
    padding: 10px 0;
  }

  .sidebar br {
    display: none;
  }

  /* Meer ademruimte voor de content onder de vaste header */

  .gallery,
  .vertical-gallery,
  .vertical-gallery-west,
  .vertical-gallery-koekoek,
  .vertical-gallery-2-columns,
  .image-row,
  .image-grid {
    margin-top: 64px;
    padding-top: 0;
  }

  .vertical-gallery,
  .vertical-gallery-west,
  .vertical-gallery-koekoek {
    gap: 24px;
  }

  .vertical-gallery-west img,
  .vertical-gallery-koekoek img,
  .vertical-gallery-2-columns img,
  .vertical-koekoek img {
    width: 100%;
  }

  .vertical-koekoek {
    margin-left: 0;
  }

  .image-row {
    gap: 24px;
    margin-bottom: 40px;
  }

  .image-grid.portrait-grid {
    gap: 24px;
  }

  /* Beschrijvingen */

  .description,
  .description-black {
    margin: 48px auto;
    max-width: 100%;
    line-height: 1.5;
  }

  .black-section {
    margin-left: -20px;
    margin-right: -20px;
    padding: 2.5rem 20px;
  }

  .homebutton-link a,
  .homebutton-black a {
    margin-top: 40px;
    margin-bottom: 80px;
  }

  /* Koekoek: letterraster past op de schermbreedte */

  .koekoek-glyph-page {
    padding: 72px 0 24px;
    overflow-x: visible;
  }

  .koekoek-glyph-grid {
    width: 100%;
    border-spacing: 2px 10px;
  }

  .koekoek-glyph-grid td {
    padding: 0.5rem 0;
  }

  .koekoek-glyph-grid .glyph {
    font-size: 7vw;
  }

  /* Info / contact */

  .info-text,
  .contact-menu {
    margin-top: 40px;
  }

  /* Homepage: Info en Contact onderaan de pagina */

  body.page-home,
  body.page-textpage {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    box-sizing: border-box;
  }

  body.page-home header,
  body.page-textpage header {
    display: contents;
  }

  body.page-home .sidebar {
    order: 1;
  }

  /* nav stond in de HTML vóór de sidebar: met order komt hij erna */

  body.page-home nav,
  body.page-textpage nav {
    order: 2;
    flex-direction: column;
    gap: 0;
    margin-top: auto;
    padding-top: 60px;
  }

  body.page-home nav a,
  body.page-textpage nav a {
    display: block;
    padding: 10px 0;
  }
}

/* Touchschermen: geen hover, dus geen muis-crosshair of hover-zoom */

@media (hover: none) {
  .crosshair-cursor .cursor-crosshair {
    display: none;
  }

  .koekoek-glyph-grid td:hover .glyph {
    transform: none;
  }
}

/* Safe areas (notch / home-indicator) */

@media (max-width: 768px) {
  body {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }

  .top-left {
    left: max(20px, env(safe-area-inset-left));
    top: max(16px, env(safe-area-inset-top));
  }
}

/* Minder beweging op verzoek */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Touch: kleur tijdens het tikken (blauw voor links, rood voor naam, Info en Contact) */

a {
  -webkit-tap-highlight-color: transparent;
}

@media (hover: none) {
  a:active,
  a.tapped,
  .sidebar a:active,
  .info-text a:active,
  .resume-link a:active,
  .email-menu:active,
  .homebutton-link a:active,
  .homebutton-black a:active {
    transition: none;
    color: blue;
    text-decoration: underline;
    text-underline-offset: 6px;
  }

  nav a:active,
  nav a.active:active,
  nav a.tapped,
  nav a.active.tapped,
  .name-home a:active,
  .name-home a.tapped,
  .top-left a:active,
  .top-left a.tapped {
    transition: none;
    color: red;
    text-decoration: underline;
    text-underline-offset: 6px;
  }
}

/* Lange tekstdelen in Tallinn Grotesk Regular, de rest van de site in Tallinn Grotesk Mono */

.description,
.description-black,
.info-text,
.contact-menu,
.contact-menu-list {
  font-family: "Tallinn Grotesk", "Tallinn Grotesk Mono", monospace;
}

/* Lettertype-credit onderaan de infopagina */

.info-credit {
  font-family: "Tallinn Grotesk", "Tallinn Grotesk Mono", monospace;
  font-size: var(--font-size);
  line-height: 1.4;
  margin: 0;
}

.info-credit a {
  color: white;
  text-decoration: underline;
  text-underline-offset: 6px;
  transition: 0.2s ease;
}


@media (min-width: 769px) {
  .info-credit {
    position: fixed;
    left: 40px;
    bottom: 40px;
  }
}

@media (max-width: 768px) {
  /* De vermelding staat boven Info/Contact, die onderaan staan op dezelfde plek als op de contactpagina */
  body.page-textpage .info-credit {
    order: 1;
    margin-top: auto;
    padding-top: 40px;
  }

  body.page-info nav {
    margin-top: 0;
  }
}

/* Eerste beeld van een projectpagina: past volledig op het scherm en staat gecentreerd */

.vertical-gallery.hero-image {
  margin-top: 0;
  justify-content: center;
  min-height: calc(100vh - 80px);
  min-height: calc(100dvh - 80px);
}

.vertical-gallery.hero-image img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 80px);
  max-height: calc(100dvh - 80px);
  object-fit: contain;
}

@media (max-width: 768px) {
  .vertical-gallery.hero-image {
    margin-top: 64px;
    min-height: calc(100vh - 64px - 40px);
    min-height: calc(100dvh - 64px - 40px);
  }

  .vertical-gallery.hero-image img {
    max-height: calc(100vh - 64px - 40px);
    max-height: calc(100dvh - 64px - 40px);
  }
}

/* EKKM: twee video's naast elkaar, even hoog (breedte volgt de beeldverhouding) */

.vertical-gallery.ekkm-videos {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}

.vertical-gallery.ekkm-videos video {
  width: auto;
  min-width: 0;
  height: auto;
}

.vertical-gallery.ekkm-videos video:nth-child(1) {
  flex: 0.75 1 0;
}

.vertical-gallery.ekkm-videos video:nth-child(2) {
  flex: 1.017 1 0;
}

@media (max-width: 768px) {
  .vertical-gallery.ekkm-videos {
    flex-direction: column;
    gap: 24px;
    width: 100%;
  }

  .vertical-gallery.ekkm-videos video {
    flex: none !important;
    width: 100%;
  }
}

/* EKKM: raster van de Cloud-beelden. Elke rij is even hoog en vult de volle breedte,
   dus het geheel vormt een rechthoek (breedte van elk beeld volgt zijn beeldverhouding --r). */

.ekkm-grid {
  width: 70%;
  margin: 80px auto 0;
}

.ekkm-grid .grid-row {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
}

.ekkm-grid .grid-row:last-child {
  margin-bottom: 0;
}

/* Bijschriften rond het raster */

.description.ekkm-caption {
  margin: 40px auto;
}

.ekkm-grid.ekkm-grid-continued {
  margin-top: 0;
}

.ekkm-grid .grid-item {
  flex: var(--r) 1 0;
  min-width: 0;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}

.ekkm-grid .grid-item img {
  display: block;
  width: 100%;
  height: auto;
}

/* Vergrote weergave */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(64px, calc(env(safe-area-inset-bottom) + 44px)) max(20px, env(safe-area-inset-left));
  background: rgba(0, 0, 0, 0.96);
  cursor: zoom-out;
}

.lightbox[hidden],
.lightbox img[hidden],
.lightbox video[hidden] {
  display: none;
}

.lightbox:not([hidden]) {
  animation: page-fade-in 0.25s ease-out;
}

.lightbox img,
.lightbox video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

@media (max-width: 768px) {
  .ekkm-grid {
    width: 100%;
    margin-top: 64px;
  }

  .ekkm-grid .grid-row {
    gap: 12px;
    margin-bottom: 12px;
  }

  .description.ekkm-caption {
    margin: 32px auto;
  }
}

/* EKKM: witruimte tussen de twee identiteiten; de tweede start met een schermvullende poster */

.vertical-gallery.hero-image.ekkm-second {
  margin-top: 200px;
}

@media (max-width: 768px) {
  .vertical-gallery.hero-image.ekkm-second {
    margin-top: 140px;
  }
}

/* Eerste beeldpaar (twee beelden naast elkaar) past samen op het scherm, gecentreerd */

.image-row.hero-pair,
.gallery.hero-pair {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  align-items: center;
  justify-content: center;
  gap: 40px;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  min-height: calc(100vh - 80px);
  min-height: calc(100dvh - 80px);
}

.image-row.hero-pair img,
.gallery.hero-pair img {
  width: auto;
  height: auto;
  min-width: 0;
  max-width: calc(50% - 20px);
  /* ruimte boven en onder, zodat de beelden je naam linksboven niet raken */
  max-height: calc(100vh - 200px);
  max-height: calc(100dvh - 200px);
  object-fit: contain;
  background: none;
}

@media (max-width: 768px) {
  .image-row.hero-pair,
  .gallery.hero-pair {
    margin-top: 64px;
    padding-top: 0;
    gap: 24px;
    width: 100%;
    min-height: 0;
  }

  .image-row.hero-pair img,
  .gallery.hero-pair img {
    max-width: 100%;
    max-height: calc(100vh - 64px - 40px);
    max-height: calc(100dvh - 64px - 40px);
  }
}

/* West-Belgique: het paar foto's en de beelden eronder staan links en rechts gelijnd */

.image-row.west-row,
.vertical-gallery-west img {
  width: min(1113px, 100%);
}

.image-row.west-row {
  margin-left: auto;
  margin-right: auto;
}

.image-row.west-row img {
  width: auto;
  height: auto;
  min-width: 0;
  flex: var(--r) 1 0;
}

@media (max-width: 768px) {
  .image-row.west-row,
  .vertical-gallery-west img {
    width: 100%;
  }

  .image-row.west-row img {
    flex: none;
    width: 100%;
  }
}

/* Onderlijnde knoplinks (Visit website draft, Request font) worden blauw bij hover */


/* Screenprinting: elke rij met twee beelden is even hoog en even breed, dus alles staat gelijnd */

.image-row.aligned-row {
  width: min(1180px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.image-row.aligned-row img {
  width: auto;
  height: auto;
  min-width: 0;
  flex: var(--r) 1 0;
}

@media (max-width: 768px) {
  .image-row.aligned-row {
    width: 100%;
  }

  .image-row.aligned-row img {
    flex: none;
    width: 100%;
  }
}

/* Knoplinks binnen een beschrijving (Suva: Visit website draft) in Tallinn Grotesk Mono */

.description .homebutton-link a {
  font-family: "Tallinn Grotesk Mono", monospace;
}

/* Analog: beide rijen posters hebben dezelfde breedte, dus dezelfde marges links en rechts.
   De breedte is beperkt zodat de eerste rij (inclusief ruimte voor je naam) op het scherm past. */

.image-row.analog-row {
  width: min(70%, calc((100vh - 200px) * 1.398 + 40px));
  width: min(70%, calc((100dvh - 200px) * 1.398 + 40px));
  margin-left: auto;
  margin-right: auto;
  gap: 40px;
}

.image-row.analog-row img {
  width: auto;
  height: auto;
  min-width: 0;
  flex: var(--r) 1 0;
}

.image-row.analog-row.analog-hero {
  margin-top: 0;
  margin-bottom: 0;
  min-height: calc(100vh - 80px);
  min-height: calc(100dvh - 80px);
}

@media (max-width: 768px) {
  .image-row.analog-row {
    width: 100%;
    gap: 24px;
  }

  .image-row.analog-row img {
    flex: none;
    width: 100%;
  }

  .image-row.analog-row.analog-hero {
    margin-top: 64px;
    min-height: 0;
  }
}

/* Korte fade tussen pagina's */

@keyframes page-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

body {
  animation: page-fade-in 0.3s ease-out;
}

body.page-leaving {
  opacity: 0;
  transition: opacity 0.25s ease-in;
}

@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  body.page-leaving { opacity: 1; transition: none; }
}

/* Niet-geselecteerde projecten dimmen zodra er een geselecteerd is (enkel met muis) */

@media (hover: hover) {
  .sidebar.has-selection .project-link:not(.is-selected) {
    opacity: 0.4;
  }
}

/* Infotekst bij het geselecteerde project */

.project-info {
  position: fixed;
  right: 40px;
  top: 0;
  width: 260px;
  z-index: 2;
  font-size: 14px;
  line-height: 1.4;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}

.project-info.is-visible {
  opacity: 1;
  visibility: visible;
}

.project-info-year {
  margin-top: 2px;
  opacity: 0.6;
}

.project-info-description {
  margin-top: 12px;
}

.project-info-link {
  display: inline-block;
  margin-top: 12px;
  color: white;
  text-decoration: underline;
  text-underline-offset: 6px;
}

.project-info-link::after {
  content: "\2192";
  display: inline-block; /* pijltje blijft zonder underline */
  margin-left: 0.5em;
}

.project-info-link:hover {
  text-decoration: none;
  font-family: "Tallinn Grotesk Mono Stencil", "Tallinn Grotesk Mono", monospace;
}

@media (hover: none) {
  .project-info {
    display: none;
  }
}

/* Het getoonde beeld is een link naar het project (enkel klikbaar zolang het zichtbaar is) */

.hover-image-container a {
  display: block;
}

.hover-image-container :is(img, video).is-active {
  pointer-events: auto;
}

.hover-image-container video {
  display: block;
}

.hover-image-container :is(img, video)[hidden] {
  display: none;
}

/* Pijltjes naar vorig/volgend project */

.project-nav {
  position: fixed;
  top: 50%;
  z-index: 100;
  padding: 24px 16px;
  font-family: "Tallinn Grotesk Mono", monospace;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  mix-blend-mode: difference;
  transform: translateY(-50%);
  transition: transform 0.25s ease, color 0.25s ease;
}

.project-nav:hover {
  color: white;
}

.project-nav-prev {
  left: 12px;
}

.project-nav-next {
  right: 12px;
}

.project-nav-prev:hover {
  transform: translate(-4px, -50%);
}

.project-nav-next:hover {
  transform: translate(4px, -50%);
}

@media (max-width: 768px) {
  .project-nav {
    top: auto;
    bottom: max(8px, env(safe-area-inset-bottom));
    transform: none;
    padding: 12px;
    font-size: 22px;
  }

  .project-nav-prev:hover,
  .project-nav-next:hover {
    transform: none;
  }
}

/* Projectnaam bij hover over het pijltje */

.project-nav-label {
  position: absolute;
  top: 100%;
  margin-top: -8px;
  font-size: 14px;
  letter-spacing: 0.8pt;
  display: flex;
  flex-direction: column;
  gap: 8px;
  white-space: nowrap;
  color: white;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.project-nav:hover .project-nav-label,
.project-nav:focus-visible .project-nav-label {
  opacity: 1;
}

.project-nav-kicker {
  opacity: 0.4;
}

.project-nav-next .project-nav-label {
  align-items: flex-end;
}

.project-nav:hover .project-nav-name {
  font-family: "Tallinn Grotesk Mono Stencil", "Tallinn Grotesk Mono", monospace;
}

.project-nav-prev .project-nav-label {
  left: 16px;
}

.project-nav-next .project-nav-label {
  right: 16px;
}

@media (max-width: 768px), (hover: none) {
  .project-nav-label {
    display: none;
  }
}

/* Hovergedrag van tekstlinks gelijk aan de rest van de site: stencil-font, geen blauw */

@media (hover: hover) {
  .homebutton-link a:hover,
  .homebutton-black a:hover,
  .description .homebutton-link a:hover,
  .info-text a:hover,
  .info-credit a:hover,
  .resume-link a:hover,
  .email-menu:hover {
    font-family: "Tallinn Grotesk Mono Stencil", "Tallinn Grotesk Mono", monospace;
  }

  /* Links die al onderstreept zijn: de underline verdwijnt bij hoveren (zoals "Visit project") */
  .homebutton-link a.always-underlined:hover,
  .info-text a:hover,
  .info-credit a:hover {
    text-decoration: none;
  }
}

/* Bijschrift in de lightbox: projectnaam, jaartal en teller */

.lightbox-caption {
  position: absolute;
  left: max(20px, env(safe-area-inset-left));
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-size: 14px;
  color: white;
  pointer-events: none;
}

/* Scroll reveal */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* Pijlen in de lightbox */

.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 24px 16px;
  border: 0;
  background: none;
  font-family: "Tallinn Grotesk Mono", monospace;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1;
  color: rgba(255, 255, 255, 0.45);
  transition: color 0.25s ease, transform 0.25s ease;
}

.lightbox-arrow[hidden] {
  display: none;
}

.lightbox-arrow-prev {
  left: max(28px, env(safe-area-inset-left));
}

.lightbox-arrow-next {
  right: max(28px, env(safe-area-inset-right));
}

.lightbox-arrow:hover {
  color: white;
}

.lightbox-arrow-prev:hover {
  transform: translate(-4px, -50%);
}

.lightbox-arrow-next:hover {
  transform: translate(4px, -50%);
}

@media (max-width: 768px) {
  .lightbox-arrow {
    padding: 16px 10px;
    font-size: 22px;
  }
}

/* Ruimte naast het beeld zodat de pijlen het beeld niet overlappen */

@media (min-width: 769px) {
  .lightbox {
    padding-left: max(104px, env(safe-area-inset-left));
    padding-right: max(104px, env(safe-area-inset-right));
  }
}

@media (max-width: 768px) {
  .lightbox-arrow-prev { left: max(10px, env(safe-area-inset-left)); }
  .lightbox-arrow-next { right: max(10px, env(safe-area-inset-right)); }
}

/* Eén vaste tussenruimte voor alle beelden en tekstblokken op projectpagina's.
   Pas --space aan om de ritmiek van alle pagina's tegelijk te wijzigen. */

:root {
  --space: 60px;
}

@media (max-width: 768px) {
  :root {
    --space: 32px;
  }
}

/* Ruimte tussen blokken: elk blok heeft enkel een marge boven zich. Samenvallende marges
   (tekst + beeld) vallen samen tot precies één --space. */

.vertical-gallery,
.vertical-gallery-west,
.vertical-gallery-koekoek,
.vertical-gallery-2-columns,
.image-row,
.image-grid,
.ekkm-grid,
.ekkm-grid.ekkm-grid-continued {
  margin-top: var(--space);
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.description,
.description.ekkm-caption {
  margin: var(--space) auto;
}

.homebutton-link a,
.homebutton-black a {
  margin-top: var(--space);
}

/* Ruimte tussen beelden binnen een blok */

.vertical-gallery,
.vertical-gallery-west,
.vertical-gallery-koekoek,
.vertical-gallery.ekkm-videos,
.image-row,
.image-row.hero-pair,
.image-row.analog-row,
.gallery,
.gallery.hero-pair,
.image-grid,
.image-grid.portrait-grid,
.ekkm-grid .grid-row {
  gap: var(--space);
}

.vertical-gallery-2-columns {
  column-gap: var(--space);
  row-gap: var(--space);
}

.ekkm-grid .grid-row {
  margin-bottom: var(--space);
}

.ekkm-grid .grid-row:last-child {
  margin-bottom: 0;
}

/* Beeldblokken met een vaste schermhoogte (eerste beeld) houden hun eigen positie bovenaan */

.vertical-gallery.hero-image,
.image-row.hero-pair,
.gallery.hero-pair,
.image-row.analog-row.analog-hero {
  margin-top: 0;
}

@media (max-width: 768px) {
  .vertical-gallery.hero-image,
  .image-row.hero-pair,
  .gallery.hero-pair,
  .image-row.analog-row.analog-hero {
    margin-top: 64px;
  }

  .ekkm-grid .grid-row {
    gap: var(--space);
    margin-bottom: var(--space);
  }
}

/* Groot glyph in het midden bij hover over Info of Contact */

.nav-glyph {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 50;
  mix-blend-mode: difference; /* blijft leesbaar boven tekst op de info- en contactpagina */
}

.nav-glyph-item {
  position: absolute;
  width: clamp(120px, 28vmin, 300px);
  color: white;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nav-glyph-item.is-visible {
  opacity: 1;
}

.nav-glyph-item svg {
  display: block;
  width: 100%;
  height: auto;
}

@media (hover: none) {
  .nav-glyph {
    display: none;
  }
}

/* Analog Posters: de eerste rij is precies zo hoog als zijn beelden (geen vaste schermhoogte),
   zodat beeld → tekst → beeld overal exact --space tussenruimte hebben. */

.image-row.analog-row.analog-hero {
  min-height: 0;
  align-items: flex-start;
  margin-top: 80px;
}

@media (max-width: 768px) {
  .image-row.analog-row.analog-hero {
    margin-top: 64px;
  }
}

/* Het eerste beeld kan ook een video zijn (EKKM, TASE): dezelfde schermpassing als bij een afbeelding */

.vertical-gallery.hero-image video {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 80px);
  max-height: calc(100dvh - 80px);
  object-fit: contain;
}

@media (max-width: 768px) {
  .vertical-gallery.hero-image video {
    max-height: calc(100vh - 64px - 40px);
    max-height: calc(100dvh - 64px - 40px);
  }
}

/* TASE Identity Design: de titel flikkert bij hoveren in de kleuren van de gif (Lopuesitlus) */

@keyframes tase-flicker {
  0%   { color: #b19466; }
  25%  { color: #ed008d; }
  50%  { color: #0b825b; }
  75%  { color: #fef300; }
  100% { color: #b19466; }
}

@media (hover: hover) {
  .sidebar .project-link[href="tase.html"]:hover {
    animation: tase-flicker 0.8s steps(1, end) infinite; /* 4 kleuren, 0,2 s elk, net als de gif (5 fps) */
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar .project-link[href="tase.html"]:hover {
    animation: none;
    color: #ed008d;
  }
}

/* EKKM: de titel flikkert bij hoveren in de kleuren van de gif (Cloud_A3): geel, rood, blauw */

@keyframes ekkm-flicker {
  0%   { color: #f8c568; }
  33%  { color: #be0e0a; }
  66%  { color: #2874b5; }
  100% { color: #f8c568; }
}

@media (hover: hover) {
  .sidebar .project-link[href="ekkm.html"]:hover {
    animation: ekkm-flicker 0.8s steps(1, end) infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar .project-link[href="ekkm.html"]:hover {
    animation: none;
    color: #be0e0a;
  }
}

/* Lectures: het eerste beeldpaar is precies zo hoog als zijn beelden (geen vaste schermhoogte),
   zodat beeld → tekst → beeld overal exact --space tussenruimte hebben. */

.image-row.hero-pair {
  min-height: 0;
  align-items: flex-start;
  margin-top: 80px;
}

.image-row.hero-pair img {
  max-width: calc(50% - var(--space) / 2);
}

@media (max-width: 768px) {
  .image-row.hero-pair {
    margin-top: 64px;
  }

  .image-row.hero-pair img {
    max-width: 100%;
  }
}

/* West-Belgique: het eerste beeld is precies zo hoog als het beeld zelf (geen vaste schermhoogte),
   zodat beeld → tekst → beeld overal exact --space tussenruimte hebben. */

.vertical-gallery.hero-image.hero-compact {
  min-height: 0;
  justify-content: flex-start;
  margin-top: 80px;
}

.vertical-gallery.hero-image.hero-compact img {
  max-height: calc(100vh - 160px);
  max-height: calc(100dvh - 160px);
}

@media (max-width: 768px) {
  .vertical-gallery.hero-image.hero-compact {
    margin-top: 64px;
  }

  .vertical-gallery.hero-image.hero-compact img {
    max-height: calc(100vh - 64px - 40px);
    max-height: calc(100dvh - 64px - 40px);
  }
}

/* Alle previews staan meteen geladen in de pagina; enkel de huidige neemt ruimte in, de rest is onzichtbaar */

.hover-image-container :is(img, video):not(.is-current) {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  pointer-events: none;
}