/* ==========================================================
   ruwbauw — gedeelde stylesheet
   Combine (display) + Euripides (lopende tekst), zwart op wit.
   ========================================================== */

/* Beide fonts bestaan enkel in één gewicht (400). We declareren dat
   eerlijk en zetten font-synthesis uit, zodat de browser nooit een
   uitgesmeerde nep-vet of nep-cursief tekent. */
@font-face {
  font-family: 'Combine';
  src: url('fonts/Combine.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Euripides';
  src: url('fonts/Euripides.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #000;
  --paper: #fff;
  --line: #000;

  /* Het bolletje dat de muisaanwijzer vervangt. Als variabele, zodat één
     regel volstaat om het overal wit te maken bij omgekeerde kleuren. */
  --dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7' fill='%23000'/%3E%3C/svg%3E") 10 10, auto;

  /* 0 = afbeeldingen normaal, 1 = afbeeldingen in negatief */
  --img-invert: 0;

  --display: 'Combine', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --body: 'Euripides', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --pad-x: 25px;
  --pad-y: 18px;
  --nav-h: 96px;

  --logo-size: clamp(22px, 4.4vw, 36px);
  --nav-size: 16px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 400;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── gedeelde kop: identiek op elke pagina ─────────────── */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: var(--pad-y) var(--pad-x) 0;
  pointer-events: none;
}

.site-header > * {
  pointer-events: auto;
}

.logo-text {
  font-family: var(--display);
  font-size: var(--logo-size);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  display: block;
  min-width: 0;
}

.logo-text:hover { opacity: 0.6; }

.nav-right {
  display: flex;
  gap: 18px;
  align-items: baseline;
  flex-shrink: 0;
  /* optisch uitlijnen met de bovenlijn van het logo */
  padding-top: calc((var(--logo-size) - var(--nav-size)) * 0.62);
}

.nav-btn {
  font-family: var(--body);
  font-size: var(--nav-size);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: var(--ink);
  background: transparent;
  border: none;
  padding: 0;
  text-decoration: none;
}

.nav-btn:hover { opacity: 0.6; }

.nav-btn[aria-current='page'] { text-decoration: underline; text-underline-offset: 4px; }

/* ── paginaraster ──────────────────────────────────────── */

.page {
  padding: var(--nav-h) var(--pad-x) 60px;
}

/* index + info: inhoud gecentreerd in het blad */
.page--centred {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* De tekstkolom hangt aan deze wikkel, niet aan .page: bij .page zou
   top:0 de paddingrand zijn en schoof de tekst achter de navigatie. */
.page-inner {
  position: relative;
}

/* ── custom cursor ─────────────────────────────────────────
   Browsers zetten uit zichzelf een handje neer boven links en knoppen.
   Deze regel geldt voor élk element en houdt het bolletje dus overal
   staan. Tekstvelden houden hun schrijfstreepje, anders is de
   adminpagina niet meer te gebruiken. */

body,
body *:not(input):not(textarea):not(select) {
  cursor: var(--dot);
}

/* ── zwevende compositie (homepage + projectpagina) ────── */

.floating-canvas {
  position: relative;
  width: 100%;
}

/* ── het kader op de mobiele homepagina ──────────────────
   Alleen daar. Op een breed scherm is .floating-frame een gewoon blok en
   gedraagt de compositie zich zoals altijd: volle breedte, eigen hoogte,
   pagina scrollt mee. De regels die het kader maken staan verderop, bij
   html[data-page='home'][data-size='mobile']. */

.floating-item {
  position: absolute;
  top: 0;
  left: 0;
  line-height: 0;
  transform-origin: center center;
  will-change: transform;
  /* zachte overgang voor blur + schaal tegelijk */
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.floating-item img {
  display: block;
  width: 100%;
  height: auto;
  filter: invert(var(--img-invert));
  transition: filter 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  transform-origin: center center;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Transparante overlay over elke afbeelding — blokkeert rechtsklik en drag */
.floating-item::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* hover: licht vergroot */
.floating-item:hover img {
  transform: scale(1.035);
}

/* homepage-blur: alleen actief als body.home-blur.
   De omkering staat vooraan zodat blur en negatief samengaan. */
body.home-blur .floating-item img {
  filter: invert(var(--img-invert)) blur(3px);
}

body.home-blur .floating-item:hover img {
  filter: invert(var(--img-invert)) blur(0px);
  transform: scale(1.035);
}

@media (hover: none) {
  body.home-blur .floating-item img { filter: invert(var(--img-invert)); }
}

.floating-item[data-interactive='true'] { cursor: var(--dot); }

/* ── mobiel: geen hover-effecten ───────────────────────── */
@media (hover: none) {
  .floating-item:hover img { transform: none; }
  .floating-item, .floating-item img { transition: none; }
}

/* ── tekstkolom rechts ─────────────────────────────────── */

.side-text {
  position: absolute;
  top: 0;
  right: 0;
  width: 260px;
  max-width: 38vw;
  z-index: 10;
  font-size: 15px;
  line-height: 1.6;
  white-space: pre-wrap;
  color: var(--ink);
  transition: top 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.side-text a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Op de projectpagina valt er niets te scrollen. De kolom staat daar dus
   vast bovenaan en krijgt zo nodig zijn eigen schuifruimte. */
html[data-page='project'] .side-text {
  top: 0;
  max-height: calc(100% - 20px);
  overflow-y: auto;
}

.side-close {
  display: block;
  margin-bottom: 10px;
  font-family: var(--body);
  font-size: 15px;
  line-height: 1;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  padding: 4px 10px;
}

.side-close:hover { background: var(--ink); color: var(--paper); }

/* ── info ──────────────────────────────────────────────── */

.info-content {
  max-width: 640px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
  margin: 0 auto;
}

.info-body { font-size: 19px; line-height: 1.7; white-space: pre-wrap; }
.info-contact { font-size: 19px; margin-top: 16px; }
.info-contact a { color: var(--ink); text-decoration: underline; }
.info-body a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ── index / lijst ─────────────────────────────────────── */

.index-list { max-width: 560px; margin: 0 auto; }

.index-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  transform-origin: left center;
}

.index-row:first-child { border-top: 1px solid var(--line); }

.index-row:hover {
  transform: scale(1.018);
}

@media (hover: none) {
  .index-row:hover { transform: none; }
}

.ir-title {
  font-size: 20px;
  line-height: 1.2;
  text-transform: lowercase;
  flex: 1 1 220px;
  min-width: 0;
}

.ir-location,
.ir-year {
  font-size: 16px;
  text-transform: lowercase;
  flex: 0 0 auto;
}

/* tekstkolom + afbeelding rechts op de lijstpagina — absoluut gepositioneerd */
.index-side {
  position: fixed;
  top: 50%;
  right: var(--pad-x);
  transform: translateY(-50%);
  width: 260px;
  max-width: 30vw;
  font-size: 17px;
  line-height: 1.6;
  white-space: pre-wrap;
  color: var(--ink);
  pointer-events: none;
}

.index-side-img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 16px;
  filter: invert(var(--img-invert));
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* ── projectkop ────────────────────────────────────────── */

.project-title { font-size: 20px; line-height: 1.2; text-transform: lowercase; margin-bottom: 2px; }
.project-meta { font-size: 16px; text-transform: lowercase; margin-bottom: 8px; }

/* ── lege staat ────────────────────────────────────────── */

.empty {
  display: none;
  font-size: 17px;
  text-transform: lowercase;
  color: var(--ink);
  padding: 40px 0;
}

.empty[data-visible='true'] { display: block; }

.empty--centred { text-align: center; padding: 180px 20px; }

/* ── enkel voor schermlezers ───────────────────────────── */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ── uitklapbare tekst ───────────────────────────────────
   De hoogte loopt van 0fr naar 1fr, zodat de tekst zichzelf opmeet en
   het wiel eronder netjes meeschuift. */

/* Twee kenmerken op het html-element sturen de opmaak:
     data-page  = home | project
     data-size  = mobile | desktop
     data-mode  = images | essay   (alleen op een projectpagina)
   De index- en infopagina zetten ze niet en blijven dus ongemoeid. */

.disclosure { display: none; }

/* op een smal scherm vervangt de uitklaptekst de tekstkolom rechts */
html[data-size='mobile'] .disclosure { display: block; }
html[data-size='mobile'] .side-text { display: none; }

/* een essay staat al gecentreerd in beeld; kolom en uitklaptekst zouden
   diezelfde tekst een tweede keer tonen */
html[data-mode='essay'] .side-text,
html[data-mode='essay'] .disclosure { display: none; }

/* ── mobiele homepagina: één scherm, nergens scrollen ────
   Enkel hier. De hoogte van html en body wordt vastgezet op het venster,
   zodat het kader weet hoeveel ruimte het heeft; het kader staat daar
   gecentreerd in en snijdt weg wat erbuiten valt. */

html[data-page='home'][data-size='mobile'],
html[data-page='home'][data-size='mobile'] body {
  height: 100%;
  overflow: hidden;
}

html[data-page='home'][data-size='mobile'] .page {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 20px;
  /* De knop hoort strak onder de kop te staan, niet halverwege het blad.
     De kop is daar zo'n 36px hoog, dus een smalle marge volstaat. */
  padding-top: 50px;
}

html[data-page='home'][data-size='mobile'] .page-inner {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

html[data-page='home'][data-size='mobile'] .floating-frame {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

html[data-page='home'][data-size='mobile'] .floating-canvas {
  width: auto;
  overflow: hidden;
}

.disclosure-btn {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 0 0 9px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  text-align: left;
}

.disclosure-mark { font-size: 17px; line-height: 1; }

.disclosure-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.disclosure-btn[aria-expanded='true'] + .disclosure-panel {
  grid-template-rows: 1fr;
}

/* min-height 0 is nodig, anders houdt het vak zijn inhoudshoogte vast */
.disclosure-body {
  overflow: hidden;
  min-height: 0;
}

.disclosure-text {
  padding: 12px 0 2px;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  /* een lange tekst mag de pagina niet uit elkaar duwen */
  max-height: 32vh;
  overflow-y: auto;
}

.disclosure-text a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── projectpagina: één scherm, nergens scrollen ─────────
   Zowel op een telefoon als op een breed scherm. De afbeelding past zich
   aan de overgebleven ruimte aan in plaats van dat de pagina meegroeit. */

html[data-page='project'],
html[data-page='project'] body {
  height: 100%;
  overflow: hidden;
}

html[data-page='project'] .page {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 20px;
}

html[data-page='project'][data-size='mobile'] .page { padding-top: 50px; }

html[data-page='project'] .page-inner {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ── de diavoorstelling ──────────────────────────────────
   Eén afbeelding tegelijk, met een pijl links en rechts. */

.viewer {
  display: none;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  padding-top: 10px;
}

html[data-mode='images'] .viewer { display: flex; }

/* Op een breed scherm blijft de tekstkolom rechts vrij staan. De marge is
   gekoppeld aan de werkelijke kolombreedte (dezelfde formule als .side-text)
   plus wat lucht, zodat de foto in een smal venster niet meer ruimte
   inlevert dan nodig. */
html[data-size='desktop'] .viewer {
  padding-right: calc(min(260px, 38vw) + 36px);
}

.viewer-row {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.viewer-arrow {
  flex: 0 0 auto;
  width: 30px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--ink);
  line-height: 0;
}

/* De pijl is een vorm, geen letterteken: zo volgt ze de inktkleur mee met
   het rode bolletje, en is ze niet afhankelijk van wat het lettertype
   toevallig in huis heeft. */
.viewer-arrow svg {
  display: block;
  width: 100%;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.viewer-arrow:hover { opacity: 0.45; }

/* Op een telefoon is de breedte kostbaar: smallere pijlen en een kleinere
   tussenruimte laten de foto een stuk groter staan. Vegen werkt daar ook. */
html[data-size='mobile'] .viewer-arrow { width: 20px; }
html[data-size='mobile'] .viewer-row { gap: 6px; }

.viewer-stage {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* vegen mag de pagina niet meeslepen */
  touch-action: pan-y;
}

.viewer-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: invert(var(--img-invert));
  user-select: none;
  -webkit-user-drag: none;
}

.viewer-caption {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  white-space: pre-wrap;
}

.viewer-count {
  margin-top: 5px;
  font-size: 13px;
  text-align: center;
  opacity: 0.45;
}

/* ── project zonder afbeeldingen: het essay ──────────────
   Op leesbreedte in het midden. De pagina zelf scrollt niet; een lange
   tekst krijgt daarom zijn eigen schuifruimte binnen dit vak. */

.essay {
  display: none;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 14px 0 4px;
  font-size: 17px;
  line-height: 1.75;
  white-space: pre-wrap;
}

.essay[data-visible='true'] { display: block; }

.essay a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── rood bolletje: kleuren omkeren ──────────────────────
   Zelfde maat als de muisaanwijzer: die tekent een cirkel met straal 7
   in een vakje van 20, dus 14px doorsnede. */

.invert-dot {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  align-self: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #e30613;
}

.invert-dot:hover { opacity: 0.6; }

/* ── omgekeerde kleuren ──────────────────────────────────
   Alleen de kleurvariabelen wisselen. De rest van de stylesheet
   gebruikt die al, dus tekst, randen en achtergrond volgen vanzelf —
   op élke pagina, niet alleen de infopagina. */

body.inverted {
  --ink: #fff;
  --paper: #000;
  --line: #fff;
  --img-invert: 1;
  --dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7' fill='%23fff'/%3E%3C/svg%3E") 10 10, auto;
}

/* ── klein scherm ──────────────────────────────────────── */

@media (max-width: 600px) {
  :root {
    --pad-x: 16px;
    --pad-y: 14px;
    --nav-h: 88px;
    --nav-size: 15px;
  }

  .nav-right { gap: 14px; }

  .side-text {
    position: static;
    width: 100%;
    max-width: none;
    margin: 16px 0 24px;
  }

  .ir-title { flex-basis: 100%; }
  .info-body, .info-contact { font-size: 17px; }

  .index-side { display: none; }

}