/* ==========================================================================
   Ruben Dahmen — architectuur
   Zwart-wit, één accent. Alles wat je aan de stijl wilt veranderen,
   staat in het blok hieronder.
   ========================================================================== */

:root {
  /* kleur — de hele site staat op zwart met witte letters */
  color-scheme: dark;         /* laat de browser scrollbars en formulieren meekleuren */

  --paper:  #000000;          /* achtergrond van elke pagina */
  --ink:    #f4f4f4;          /* tekstkleur */
  --muted:  #8f8f8f;          /* bijschriften en labels — 6,5:1 op zwart */
  --rule:   #2b2b2b;          /* de haarlijntjes tussen blokken */
  --accent: #ff5230;          /* het enige accent: hover + taalwissel */

  --frame-bg: #0d0d0d;        /* het vlak achter een foto die niet vult */

  /* typografie */
  --font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Helvetica, Arial, sans-serif;

  /* maatvoering */
  --gutter: clamp(1.15rem, 3.2vw, 2.75rem);
  --head-h: 4.25rem;
  --measure: 34rem;           /* leesbreedte van de lopende tekst */

  /* home: hoe groot de foto in het zwarte vlak staat.
     65% = de foto beslaat tweederde van het scherm, de rest is zwart.
     Wil je ze anders, verander deze twee getallen samen. */
  --stage-bg: #000000;
  --shot-w: 65vw;
  --shot-h: 65vh;

  /* beweging */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --unfold: .62s;
}

/* --------------------------------------------------------------------------
   basis
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: clamp(0.9375rem, 0.86rem + 0.28vw, 1.0625rem);
  line-height: 1.62;
  font-weight: 400;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }

/* browsers zetten er standaard 40px marge omheen; die willen we niet */
figure { margin: 0; }

h1, h2, h3 { font-weight: 500; letter-spacing: -0.022em; line-height: 1.08; margin: 0; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

::selection { background: var(--accent); color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: .75rem 1rem; font-size: .8125rem;
}
.skip:focus { left: 0; }

.vh {                          /* alleen voor screenreaders */
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* kleine kapitalen-label: nav, meta, bijschriften */
.label {
  font-size: .75rem;
  letter-spacing: .085em;
  text-transform: uppercase;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   linkeffect — de streep wordt van links ingetekend en verlaat naar rechts
   -------------------------------------------------------------------------- */

.lk {
  position: relative;
  text-decoration: none;
  color: inherit;
  transition: color .32s var(--ease);
  padding-bottom: .12em;
}
.lk::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .42s var(--ease);
}
.lk:hover, .lk:focus-visible { color: var(--accent); }
.lk:hover::after, .lk:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}
.lk[aria-current="page"],
.lk[aria-expanded="true"] { color: var(--accent); }
.lk[aria-current="page"]::after,
.lk[aria-expanded="true"]::after { transform: scaleX(1); transform-origin: left center; }

/* tekstlink midden in een alinea */
.lk--inline { color: var(--accent); }
.lk--inline::after { transform: scaleX(1); transform-origin: left center; opacity: .38; }
.lk--inline:hover::after, .lk--inline:focus-visible::after { opacity: 1; }

/* --------------------------------------------------------------------------
   kop van de site
   -------------------------------------------------------------------------- */

.head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.6rem var(--gutter) 1.2rem;
  mix-blend-mode: normal;
}

.head__mark {
  text-decoration: none;
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.nav {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .45rem clamp(.9rem, 2.4vw, 1.9rem);
}
/* een menu-item mag afbreken naar een volgende regel, maar nooit binnenin */
.nav > .lk, .nav .lang { white-space: nowrap; }

.nav__sep {
  width: 1px; height: .85em;
  background: currentColor;
  opacity: .28;
  align-self: center;
}

.lang { display: inline-flex; align-items: baseline; gap: .38rem; }
.lang a { text-decoration: none; opacity: .45; transition: opacity .3s var(--ease), color .3s var(--ease); }
.lang a:hover { opacity: 1; color: var(--accent); }
.lang a[aria-current="true"] { opacity: 1; color: var(--accent); }
.lang i { font-style: normal; opacity: .3; }

/* De kop op de home staat over het zwarte vlak. Sinds de hele site zwart is,
   hoeft daar niets meer voor te worden overschreven: de gewone witte tekst
   en het gewone accent bij hover kloppen al. */

/* op de binnenpagina's schuift de kop mee tot hij plakt */
.head--solid {
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.head--solid.is-stuck { border-bottom-color: var(--rule); }

/* --------------------------------------------------------------------------
   de uitklappende tekst — het hoverprincipe van de hele site
   -------------------------------------------------------------------------- */

/* De tekst staat er altijd, maar is van rechts naar links weggeknipt.
   Bij hover schuift de knip weg: hij rolt open tot precies de breedte
   van de tekst, hoe lang die ook is. Geen kader, alleen letters. */
.unfold {
  display: inline-flex;
  align-items: stretch;
  max-width: 100%;
  color: var(--ink);
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--unfold) var(--ease);
  will-change: clip-path;
}
.unfold__in {
  white-space: nowrap;
  padding: .68rem 0 .72rem;
  display: flex;
  align-items: baseline;
  gap: .7rem;
}
.unfold__title { font-weight: 500; letter-spacing: -0.012em; }
.unfold__meta { color: var(--muted); }

/* open bij hover of toetsenbordfocus op de drager */
[data-unfold]:hover .unfold,
[data-unfold]:focus-visible .unfold,
[data-unfold].is-open .unfold { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  .unfold { transition-duration: .01ms; }
}

/* --------------------------------------------------------------------------
   home — beeldvullende, langzaam wisselende reeks
   -------------------------------------------------------------------------- */

.stage {
  position: relative;
  height: 100svh;
  min-height: 30rem;
  overflow: hidden;
  background: var(--stage-bg);
}

.slide {
  position: absolute;
  inset: 0;
  display: grid;          /* houdt de foto gecentreerd in het zwarte vlak */
  place-items: center;
  /* De link beslaat het hele scherm, maar alleen de foto vangt de muis.
     Zo geldt hover pas als je écht op het beeld staat, en klik je niet
     per ongeluk door als je naast de foto in het zwart klikt. */
  pointer-events: none;
  /* Harde overgang: geen fade, het ene beeld vervangt het andere ineens. */
  opacity: 0;
  visibility: hidden;
  text-decoration: none;
}
.slide.is-on {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

/* De foto houdt zijn eigen verhouding: hij wordt nergens bijgesneden,
   alleen begrensd. Wat overblijft is zwart. Zie --shot-w / --shot-h. */
.slide img {
  width: auto;
  height: auto;
  max-width: var(--shot-w);
  max-height: var(--shot-h);
  object-fit: contain;
}
.slide.is-on img { pointer-events: auto; cursor: pointer; }

/* De titel linksonder: losse witte letters, geen kader.
   Hij rolt van de linkerschermrand uit zodra de cursor op de foto staat. */
.stage__unfold {
  position: absolute;
  left: 0;
  bottom: clamp(3.5rem, 7vh, 5.5rem);
  z-index: 6;
  pointer-events: none;
}
.stage__unfold .unfold {
  background: none;
  color: var(--ink);
}
.stage__unfold .unfold__in { padding: .68rem var(--gutter) .72rem; }
.stage__unfold .unfold__meta { color: var(--muted); }

/* de titel klapt alleen uit als de cursor op de foto zelf staat */
.slide.is-on:hover ~ .stage__unfold .unfold,
.slide.is-on:focus-visible ~ .stage__unfold .unfold { clip-path: inset(0 0 0 0); }

/* --------------------------------------------------------------------------
   home — de tekst is onzichtbaar tot de cursor in de buurt komt

   De klasse chrome-hidden wordt door site.js gezet, en alleen op de home en
   alleen op apparaten met een muis. Draait JavaScript niet, dan staat alles
   er gewoon: liever een zichtbaar menu dan geen menu.
   -------------------------------------------------------------------------- */

.chrome-hidden .head {
  opacity: 0;
  pointer-events: none;
  transition: opacity .55s var(--ease);
}

/* cursor bovenin: het menu licht op */
.chrome-hidden.chrome-top .head,
.chrome-hidden .head:focus-within,
.chrome-hidden.index-open .head {
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .chrome-hidden .head { transition-duration: .01ms; }
}

/* --------------------------------------------------------------------------
   index — het overzicht over de home heen
   -------------------------------------------------------------------------- */

body.index-open { overflow: hidden; }

.index {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--paper);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease), visibility 0s linear .5s;
}
.index.is-open { opacity: 1; visibility: visible; transition: opacity .5s var(--ease), visibility 0s; }

.index__in {
  padding: calc(var(--head-h) + 2.5rem) var(--gutter) 4rem;
}
.index__grid {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: clamp(1.6rem, 3.4vw, 3rem) clamp(1.1rem, 2.4vw, 2rem);
}
/* De titel staat onder de tegel op het zwart, niet als wit blokje over de
   foto. Daarom draagt de link zelf de positionering en houdt hij onderaan
   ruimte vrij; het bijschrift ontsnapt zo aan de uitsnede van de foto. */
.index__item a {
  display: block;
  position: relative;
  padding-bottom: 3.6rem;   /* ruimte voor een titel van twee regels */
  text-decoration: none;
}
.index__fig { display: block; overflow: hidden; background: var(--frame-bg); }
.index__fig img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform 1.1s var(--ease), filter .5s var(--ease);
}
.index__item a:hover .index__fig img { transform: scale(1.028); }
.index__unfold { position: absolute; left: 0; right: 0; bottom: 0; }
/* in het raster mag een lange titel over twee regels; op de home niet */
.index__unfold .unfold__in {
  padding: .45rem 0 0;
  font-size: .8125rem;
  white-space: normal;
  flex-wrap: wrap;
  gap: .1rem .55rem;
}

/* --------------------------------------------------------------------------
   binnenpagina's
   -------------------------------------------------------------------------- */

.page { padding-top: var(--head-h); }

.wrap { padding-inline: var(--gutter); }

.masthead {
  padding: clamp(2.5rem, 7vh, 5rem) var(--gutter) clamp(1.6rem, 4vh, 2.6rem);
  max-width: 60rem;
}
.masthead h1 {
  font-size: clamp(1.75rem, 1.15rem + 2.9vw, 3.5rem);
  margin-bottom: .55rem;
}
.masthead__meta { color: var(--muted); }
.masthead__meta .accent { color: var(--accent); }

/* het doorklikbare beeldvenster op een projectpagina */
.viewer { position: relative; margin-inline: var(--gutter); }
.viewer__frame {
  position: relative;
  aspect-ratio: var(--ratio, 3 / 2);
  max-height: 76svh;
  margin-inline: auto;      /* blijft gecentreerd als de hoogte begrenst */
  overflow: hidden;
  background: var(--frame-bg);
}
@media (max-width: 40rem) {
  .viewer__frame { aspect-ratio: var(--ratio-s, var(--ratio, 4 / 3)); max-height: 62svh; }
}

.viewer__shot {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .75s var(--ease), visibility 0s linear .75s;
}
.viewer__shot.is-on { opacity: 1; visibility: visible; transition: opacity .75s var(--ease), visibility 0s; }
.viewer__shot img { width: 100%; height: 100%; object-fit: contain; object-position: center; }

/* Een video in de reeks staat gecentreerd in hetzelfde kader als een foto.
   De speler houdt zijn eigen 16:9-verhouding; wat overblijft is de donkere
   achtergrond van het kader, niet het wit van de speler. */
.viewer__shot[data-video] { display: flex; align-items: center; justify-content: center; }
.viewer__shot iframe {
  display: block;
  border: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 100%;
}

.viewer__hit {
  position: absolute; inset: 0; z-index: 5;
  appearance: none; background: none; border: 0;
  cursor: e-resize;
}

/* staat er een video in beeld, dan mag de doorklik-laag er niet overheen
   liggen — anders kun je de speler niet bedienen. Bladeren gaat dan met
   de miniaturen eronder of met de pijltjestoetsen. */
.viewer.is-video .viewer__hit { display: none; }

/* miniatuur van de video krijgt een afspeeldriehoek */
.strip button.is-video { position: relative; }
.strip button.is-video::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 0; height: 0;
  transform: translate(-40%, -50%);
  border-left: .7rem solid var(--ink);
  border-top: .45rem solid transparent;
  border-bottom: .45rem solid transparent;
  filter: drop-shadow(0 0 3px rgba(0,0,0,.6));
}

.viewer__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  /* Het bijschrift hoort bij het beeld erboven, niet bij de strook eronder:
     daarom kort erop, met meer lucht naar de miniaturen. */
  padding: .45rem 0 0;
  color: var(--muted);
  font-size: .8125rem;
  line-height: 1.5;
}
.viewer__caption { max-width: 46rem; }
.viewer__count {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: .085em;
  font-weight: 500;
}
.viewer.is-single .viewer__hit,
.viewer.is-single .viewer__count { display: none; }

.strip {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 2.4rem var(--gutter) 0;
  padding: 0;
  list-style: none;
}
.strip button {
  appearance: none; border: 0; padding: 0; cursor: pointer;
  width: 4.75rem; background: none; line-height: 0;
  opacity: .42;
  transition: opacity .38s var(--ease);
}
.strip button:hover { opacity: .8; }
.strip button[aria-current="true"] { opacity: 1; }
.strip img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* tekst + feiten naast elkaar */
.body {
  display: grid;
  grid-template-columns: minmax(0, var(--measure)) minmax(0, 16rem);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: start;
  padding: clamp(3rem, 9vh, 6rem) var(--gutter) clamp(3rem, 8vh, 5rem);
  max-width: 74rem;
}
@media (max-width: 54rem) {
  .body { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
}

.prose { font-size: 1.0625em; }
.prose h2 {
  font-size: 1.0625rem;
  margin: 2.4em 0 .8em;
  letter-spacing: -0.008em;
}
.prose h2:first-child { margin-top: 0; }
.prose .lead {
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.44;
  letter-spacing: -0.014em;
  margin-bottom: 1.5em;
}

.facts { margin: 0; font-size: .875rem; }
.facts div {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 1rem;
  padding: .62rem 0;
  border-top: 1px solid var(--rule);
}
.facts div:last-child { border-bottom: 1px solid var(--rule); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }

/* over-pagina */
.about {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, var(--measure));
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
  padding: clamp(2rem, 6vh, 4rem) var(--gutter) clamp(3rem, 8vh, 5rem);
  max-width: 74rem;
}
@media (max-width: 54rem) {
  .about { grid-template-columns: minmax(0, 1fr); }
  .about__portrait { max-width: 22rem; }
}
.about__portrait figcaption { color: var(--muted); font-size: .8125rem; margin-top: .6rem; }

/* contact */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 28rem) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
  padding: clamp(2rem, 6vh, 4rem) var(--gutter) clamp(3rem, 8vh, 5rem);
  max-width: 74rem;
}
@media (max-width: 54rem) { .contact { grid-template-columns: minmax(0, 1fr); } }

.field { margin-bottom: 1.4rem; }
.field label { display: block; margin-bottom: .35rem; color: var(--muted); }
.field input, .field textarea {
  width: 100%;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: .55rem 0;
  border-radius: 0;
  transition: border-color .3s var(--ease);
}
.field input:hover, .field textarea:hover { border-bottom-color: #555555; }
.field input:focus, .field textarea:focus {
  outline: none;
  border-bottom-color: var(--accent);
}
.field textarea { resize: vertical; min-height: 8rem; }
.pot { position: absolute; left: -9999px; }

.btn {
  appearance: none;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  padding: .82rem 1.6rem;
  border-radius: 0;
  transition: background .34s var(--ease), color .34s var(--ease), border-color .34s var(--ease);
}
.btn:hover { background: var(--accent); border-color: var(--accent); }

.note {
  font-size: .8125rem;
  color: var(--muted);
  border-left: 2px solid var(--rule);
  padding-left: .9rem;
  margin-top: 1.6rem;
}

/* --------------------------------------------------------------------------
   projectenlijst — één regel per project, gemaakt om lang te worden
   -------------------------------------------------------------------------- */

.worklist {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 64rem;
}
.worklist li {
  display: grid;
  /* eerste kolom breed genoeg voor een jaarreeks als 2022–2023; de plaats
     is meestal één woord, de omschrijving de langste tekst */
  grid-template-columns: 6.5rem minmax(0, 1.25fr) minmax(0, 0.8fr) minmax(0, 1.55fr);
  gap: .2rem clamp(1rem, 2.6vw, 2.25rem);
  align-items: baseline;
  padding: .8rem 0;
  border-top: 1px solid var(--rule);
}
.worklist li:last-child { border-bottom: 1px solid var(--rule); }

/* de koprij: zelfde raster, maar zonder lijn en in kleinkapitaal */
.worklist__head {
  border-top: 0 !important;
  padding-bottom: .35rem !important;
  color: var(--muted);
}

.worklist__year { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.worklist__name { font-weight: 500; letter-spacing: -0.012em; }
.worklist__place,
.worklist__type { color: var(--muted); font-size: .9375rem; }

@media (max-width: 54rem) {
  .worklist li {
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: .1rem 1rem;
    padding: .9rem 0;
  }
  .worklist__place,
  .worklist__type { grid-column: 2; font-size: .875rem; }
  .worklist__head { display: none; }   /* kolomkoppen slaan nergens op als het stapelt */
}

/* nieuws en publicaties */
.entries { list-style: none; margin: 0; padding: 0; max-width: 46rem; }
.entries li { border-top: 1px solid var(--rule); padding: clamp(1.4rem, 3vh, 2.2rem) 0; }
.entries li:last-child { border-bottom: 1px solid var(--rule); }
.entries h2 { font-size: 1.25rem; margin: .35rem 0 .6rem; }
.entries time { color: var(--muted); }

/* de bronregel onder een publicatie: waar het verschenen is */
.pub__where {
  color: var(--muted);
  font-size: .875rem;
  margin-bottom: .7em;
}

/* volgende / vorige project */
.pager {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  border-top: 1px solid var(--rule);
  padding: 1.5rem var(--gutter);
}
.pager a { display: block; font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.012em; }
.pager span {
  display: block;
  color: var(--muted);
  margin-bottom: .15rem;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .085em;
  text-transform: uppercase;
}
.pager a:hover span, .pager a:focus-visible span { color: inherit; }

/* voet */
.foot {
  border-top: 1px solid var(--rule);
  padding: clamp(2rem, 5vh, 3rem) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  justify-content: space-between;
  color: var(--muted);
  font-size: .8125rem;
}
.foot a { text-decoration: none; }
.foot__links { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* --------------------------------------------------------------------------
   telefoon
   -------------------------------------------------------------------------- */

@media (max-width: 46rem) {
  :root {
    --head-h: 3.6rem;
    /* op een telefoon is 50% te klein om nog iets te zien */
    --shot-w: 92vw;
    --shot-h: 66vh;
  }

  .head { padding: 1.05rem var(--gutter) .9rem; flex-wrap: wrap; gap: .35rem 1rem; }
  .nav { gap: .3rem .8rem; font-size: .6875rem; justify-content: flex-start; }
  .nav__sep { display: none; }

  .stage__unfold { bottom: 1.6rem; }
  .unfold__in { font-size: .8125rem; gap: .5rem; }
}

/* Zonder muis valt er niets te hoveren, dus daar blijven de titels staan.
   Dat hangt af van het aanwijsapparaat, niet van de breedte van het venster:
   een smal venstertje op een laptop hoort zich als een laptop te gedragen. */
@media (hover: none) {
  .index__unfold.unfold { clip-path: inset(0 0 0 0); }
  .index__unfold .unfold__meta { display: none; }
}

/* een losse regel uit het werk zelf, tussen de tekst door */
.prose .pull {
  margin: 2.2em 0;
  padding-left: 1.1rem;
  border-left: 1px solid var(--rule);
  color: var(--muted);
}
.prose .pull p {
  margin: 0;
  font-size: 1.0625em;
  font-style: italic;
  line-height: 1.5;
}

/* genummerde lijst in de lopende tekst (de dogma's) */
.prose .dogmas {
  margin: 1.4em 0 1.8em;
  padding: 0;
  list-style: none;
  counter-reset: dogma;
}
.prose .dogmas li {
  counter-increment: dogma;
  position: relative;
  padding: .75rem 0 .75rem 2.6rem;
  border-top: 1px solid var(--rule);
}
.prose .dogmas li:last-child { border-bottom: 1px solid var(--rule); }
.prose .dogmas li::before {
  content: counter(dogma);
  position: absolute; left: 0; top: .78rem;
  color: var(--muted);
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .085em;
}
.prose .dogmas b { font-weight: 500; }

/* Op een breed scherm hooguit drie tegels naast elkaar: meer beelden op één
   rij worden te klein om nog iets te zien. Daaronder vult het raster zichzelf. */
@media (min-width: 62rem) {
  .index__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* onder het raster de verwijzing naar de volledige lijst */
.index__all {
  margin: clamp(2.5rem, 6vh, 4rem) 0 0;
  font-size: .875rem;
  color: var(--muted);
}

/* publicaties: het omslag naast de vermelding */
.entries li article {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.2rem);
  align-items: start;
}
.entries li article > .pub__cover { grid-row: 1 / span 4; }
.entries li article > :not(.pub__cover) { grid-column: 2; }
.pub__cover { margin: 0; }
.pub__cover img {
  width: 100%;
  height: auto;
  display: block;
  background: var(--frame-bg);
}
@media (max-width: 44rem) {
  .entries li article { grid-template-columns: minmax(0, 1fr); }
  .entries li article > .pub__cover { grid-row: auto; max-width: 9rem; }
  .entries li article > :not(.pub__cover) { grid-column: 1; }
}

/* een film in de beeldenreeks, net als een foto ingepast in het kader */
/* Een eigen film staat rechtop; hij past zich in het kader in plaats van
   het te vullen, zodat er niets wordt afgesneden. */
.viewer__shot video {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  background: var(--frame-bg);
}

/* ---------------------------------------------------------------------------
   Pijltjes naast het beeld

   Ze staan binnen het kader, verticaal in het midden, en zijn rustig van
   zichzelf: pas als je met de cursor over het kader gaat worden ze goed
   zichtbaar. Zonder muis staan ze er altijd, want daar valt niets te hoveren.
   --------------------------------------------------------------------------- */
.viewer__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  appearance: none;
  border: 0;
  padding: 0;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: none;
  color: var(--ink);
  opacity: .35;
  transition: opacity .35s var(--ease);
}
.viewer__nav--prev { left: .35rem; }
.viewer__nav--next { right: .35rem; }

.viewer__nav svg {
  width: 1.6rem;
  height: 1.6rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* een randje schaduw, zodat het pijltje ook op een licht beeld leesbaar is */
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, .55));
}

.viewer__frame:hover .viewer__nav { opacity: .75; }
.viewer__nav:hover,
.viewer__nav:focus-visible { opacity: 1; }

@media (hover: none) {
  .viewer__nav { opacity: .8; }
}

/* Bij één beeld valt er niets te bladeren. */
.viewer.is-single .viewer__nav { display: none; }

/* ---------------------------------------------------------------------------
   De verwijzing naar de volledige werklijst

   Stond eerst als een klein regeltje onder het raster. Nu een band met het
   aantal erbij, want dat aantal is het verhaal: wie twintig jaar werk in één
   lijst ziet staan, leest ervaring waar losse projectpagina's dat niet doen.
   --------------------------------------------------------------------------- */
.index__all {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem 1.5rem;
  margin: clamp(2.5rem, 6vh, 4rem) 0 0;
  padding: clamp(1.1rem, 2.5vh, 1.6rem) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .4s var(--ease);
}
.index__all:hover,
.index__all:focus-visible { border-color: var(--ink); }

.index__all__kop {
  font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  letter-spacing: -0.015em;
}
.index__all__tel { color: var(--muted); }

/* het pijltje verschijnt bij hover, net als elders op de site */
.index__all__kop::after {
  content: " \2192";
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.index__all:hover .index__all__kop::after,
.index__all:focus-visible .index__all__kop::after { opacity: 1; }

/* Een tweede portret onderaan de over-pagina. Staat in de kolom van de
   tekst, niet ernaast, zodat het de leesbreedte niet verstoort. */
.about__tweede {
  grid-column: 2;
  margin: clamp(2.5rem, 6vh, 4rem) 0 0;
  max-width: 22rem;
}
.about__tweede img { width: 100%; height: auto; display: block; }

@media (max-width: 54rem) {
  .about__tweede { grid-column: 1; max-width: 100%; }
}