/* ==========================================================================
   ine boeijen — stylesheet
   Eén stylesheet voor de hele site. Opbouw:
   1. Lettertype
   2. Kleuren en maten (variabelen)
   3. Basis
   4. Menu (site-kop)
   5. Homepagina: startbeeld, filmpje, eindbeeld
   6. Overige pagina's (werk, over mij, ...)
   7. Werk: de tabel met alle werken
   8. Werk: pagina van één werk
   9. Over mij
   ========================================================================== */


/* 1. Lettertype ------------------------------------------------------------
   Courier New staat op vrijwel elke Mac, Windows-pc en iPhone.
   Op apparaten zonder Courier New (o.a. Android) valt de site terug op
   Courier Prime: een vrij te gebruiken lettertype dat er sterk op lijkt.
   Dat bestand wordt alléén gedownload als Courier New ontbreekt. */

@font-face {
  font-family: "Courier Prime";
  src: url("../fonts/courier-prime-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Courier Prime";
  src: url("../fonts/courier-prime-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* 2. Kleuren en maten ------------------------------------------------------ */

:root {
  --papier: #f0f0f0;        /* achtergrond pagina's: heel lichtgrijs */
  --inkt: #3a3a39;          /* tekst en menu: donkergrijs */
  --inkt-zacht: #7d7d7a;    /* bijschriften, minder belangrijke tekst */
  --lijn: #c6c6c2;          /* dunne lijnen */
  --tabel-lijn: #000;       /* lijntjes van de werk-tabel */
  --donker: #2b2b2a;        /* achtergrond achter het filmpje tijdens laden */

  /* Kleur van het filmpje:
     saturate(0.35) = 35% kleur (huidige keuze)
     saturate(0.6)  = 60% kleur
     grayscale(1)   = zwart-wit
     none           = originele kleuren */
  --intro-filter: saturate(0.35) contrast(1.03);

  --lettertype: "Courier New", "Courier Prime", Courier, monospace;
  --tekstgrootte: clamp(14px, 0.35vw + 12.5px, 17px);
  --kop-grootte: clamp(16px, 0.45vw + 13.5px, 20px);  /* menu en 'wandbeelden' / 'ruimtelijk werk' */

  --rand: clamp(16px, 3.2vw, 44px);   /* ruimte langs de randen van het scherm */
  --menu-afstand: 1.6em;               /* ruimte tussen menu-items */
}


/* 3. Basis ----------------------------------------------------------------- */

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--papier);
  color: var(--inkt);
  font-family: var(--lettertype);
  font-size: var(--tekstgrootte);
  line-height: 1.6;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

img,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

/* iPhone maakt soms zelf links van plaatsnamen, datums en nummers; die niet tonen */
a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  font: inherit !important;
}

.visueel-verborgen {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}


/* 4. Menu (site-kop) ------------------------------------------------------- */

.site-kop {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--menu-afstand);
  padding: var(--rand);
  padding-top: max(var(--rand), env(safe-area-inset-top));
  padding-left: max(var(--rand), env(safe-area-inset-left));
  padding-right: max(var(--rand), env(safe-area-inset-right));
  color: var(--inkt);
  font-size: var(--kop-grootte);
}

.site-kop a {
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
  white-space: nowrap;
}

.site-kop a:hover,
.site-kop a:focus-visible,
.site-kop a[aria-current="page"] {
  text-decoration-line: underline;
}

.site-kop a:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 0.35em;
}

.site-naam {
  letter-spacing: 0.04em;
}

/* 'ine boeijen' krijgt op de homepagina zelf geen streepje (ook niet bij
   aanwijzen); op de andere pagina's wel bij aanwijzen */
.site-kop a.site-naam[aria-current="page"],
.site-kop a.site-naam[aria-current="page"]:hover,
.site-kop a.site-naam[aria-current="page"]:focus-visible {
  text-decoration-line: none;
}

.site-menu ul {
  display: flex;
  gap: var(--menu-afstand);
  margin: 0;
  padding: 0;
  list-style: none;
}


/* 5. Homepagina: startbeeld -> filmpje -> stil op het laatste frame ------
   Eerst staat het startbeeld in beeld (het eerste frame van het filmpje).
   Het filmpje speelt eronder; zodra het beeld toont vervaagt het startbeeld.
   Omdat het filmpje de eerste seconden stilstaat op hetzelfde beeld, zie je
   die overgang niet. Aan het eind blijft het filmpje op het laatste frame.
   Kan het filmpje niet afspelen, dan wordt het eindbeeld getoond. */

.pagina-home {
  overflow: hidden;
  background: var(--donker);
}

.pagina-home .site-kop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

/* op de homepagina staan de menu-items in een kader, zodat ze goed leesbaar
   zijn op het filmpje */
.pagina-home .site-kop a {
  display: inline-block;
  padding: 0.15em 0.55em 0.3em;
  background: var(--papier);
  line-height: 1.3;
}

.intro {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--donker);
}

.intro-startbeeld,
.intro-startbeeld img,
.intro-eindbeeld,
.intro-eindbeeld img,
.intro-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.intro-startbeeld img,
.intro-eindbeeld img,
.intro-video {
  object-fit: cover;          /* schermvullend; op een telefoon wordt bijgesneden */
  object-position: 50% 50%;   /* welk deel in beeld blijft (links/rechts, boven/onder) */
  filter: var(--intro-filter);
}

.intro-video      { z-index: 1; }
.intro-startbeeld { z-index: 2; transition: opacity 0.8s ease; }
.intro-eindbeeld  { z-index: 3; display: none; }

/* het filmpje toont beeld: startbeeld vervaagt (filmpje staat dan nog stil
   op precies hetzelfde beeld) */
.intro.speelt .intro-startbeeld {
  opacity: 0;
}

/* filmpje kan niet afspelen, 'minder beweging' of geen JavaScript: alleen het eindbeeld */
.intro.toon-eindbeeld .intro-eindbeeld,
.intro-stil .intro-eindbeeld,
.no-js .intro-eindbeeld {
  display: block;
}

.intro.toon-eindbeeld .intro-video,
.intro.toon-eindbeeld .intro-startbeeld,
.intro-stil .intro-video,
.intro-stil .intro-startbeeld,
.no-js .intro-video,
.no-js .intro-startbeeld {
  display: none;
}


/* 6. Overige pagina's ------------------------------------------------------ */

.pagina-inhoud {
  padding: 0 var(--rand) calc(var(--rand) * 2);
}


/* 7. Werk: de tabel met alle werken ----------------------------------------
   Ziet eruit als een simpele tabel (zoals in Word): zwarte lijntjes.
   5 werken naast elkaar op een laptop, 3 op een tablet, 2 op een klein
   tablet en 1 op een telefoon. Lege vakjes maken de laatste rij vol;
   die worden door _gereedschap/bouw_werk.py toegevoegd. */

.werk-tabel {
  --vak-marge: clamp(6px, 0.7vw, 10px);   /* witruimte tussen foto en lijntjes */
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--tabel-lijn);
  border-left: 1px solid var(--tabel-lijn);
}

.werk-kopje,
.werk-vak {
  border-right: 1px solid var(--tabel-lijn);
  border-bottom: 1px solid var(--tabel-lijn);
}

/* rij met 'wandbeelden' / 'ruimtelijk werk': zo hoog als de tekst */
.werk-kopje {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0 var(--vak-marge);
  font-size: var(--kop-grootte);
  font-weight: 400;
  line-height: 1.4;
}

.werk-vak {
  display: block;
  padding: var(--vak-marge);
  min-width: 0;
}

.werk-vak img {
  width: 100%;
  height: auto;
  transition: opacity 0.2s ease;
}

a.werk-vak:hover img {
  opacity: 0.82;
}

a.werk-vak:focus-visible {
  outline: 1px solid var(--tabel-lijn);
  outline-offset: -5px;
}

.werk-vak--leeg {
  display: none;
}

@media (min-width: 560px) and (max-width: 799px) {
  .werk-tabel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leeg-2 { display: block; }
}

@media (min-width: 800px) and (max-width: 1023px) {
  .werk-tabel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .leeg-3 { display: block; }
}

@media (min-width: 1024px) {
  .werk-tabel { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .leeg-5 { display: block; }
}


/* 8. Werk: pagina van één werk --------------------------------------------- */

.werk-figuur {
  margin: 0;
}

.werk-figuur img {
  /* zo groot mogelijk, maar altijd helemaal in beeld */
  width: min(100%, calc(76vh * var(--verhouding, 1)));
  height: auto;
}

.werk-info {
  margin-top: 1em;
}

.werk-titel,
.werk-gegevens {
  margin: 0;
  font-size: inherit;
  font-weight: 400;
}

.werk-gegevens {
  color: var(--inkt-zacht);
}


/* 9. Over mij --------------------------------------------------------------
   Laptop: foto links (blijft staan tijdens scrollen), rechts tekst,
   contact en CV. Telefoon: alles onder elkaar. */

.over-mij {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}

.over-mij-foto {
  margin: 0;
  max-width: 480px;
}

.over-mij-foto img {
  width: 100%;
  height: auto;
}

.over-mij-kolom {
  max-width: 62ch;
}

.over-mij-tekst p {
  margin: 0 0 1.2em;
}

.over-mij-kolom a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.over-mij-kolom a:hover {
  color: var(--inkt-zacht);
}

.over-mij-contact {
  margin-top: 2.5em;
}

.over-mij-contact p {
  margin: 0;
}

/* CV: jaartal in een eigen kolom, omschrijving ernaast */
.cv {
  margin-top: 2.2em;
}

.cv-blok + .cv-blok {
  margin-top: 2.2em;
}

.cv-kop {
  margin: 0 0 0.5em;
  font-size: var(--kop-grootte);
  font-weight: 400;
}

.cv-lijst {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cv-regel {
  display: grid;
  grid-template-columns: 13ch minmax(0, 1fr);
  column-gap: 1.5ch;
}

.cv-regel + .cv-regel,
.cv-lijst--los li + li {
  margin-top: 0.25em;
}

.cv-regel dt {
  color: var(--inkt-zacht);
  white-space: nowrap;
}

.cv-regel dd {
  margin: 0;
}

@media (max-width: 420px) {
  .cv-regel {
    column-gap: 1ch;
  }
}

@media (min-width: 800px) {
  .over-mij {
    grid-template-columns: minmax(260px, 420px) minmax(0, 62ch);
  }

  .over-mij-foto {
    position: sticky;
    top: var(--rand);
  }
}