/* Tessel Gervais — "Atelierwand"
   De site is de muur van haar atelier: gebroken wit, werk met ruimte eromheen,
   kleine getypte bordjes, één rood stipje dat alleen "verkocht" betekent. */

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;

  /* Kleur — afgeleid van de atelierwand en de grafietdruppels in het tweeluik */
  --muur: oklch(96.4% 0.004 75);
  --muur-diep: oklch(93.4% 0.005 75);
  --grafiet: oklch(29% 0.014 235);
  --grafiet-zacht: oklch(47% 0.012 235);
  --lijn: oklch(85% 0.006 235);
  --druppel: oklch(60% 0.012 235);
  --druppel-licht: oklch(80% 0.008 220);
  --grafiet-hover: oklch(38.5% 0.013 235);
  --grafiet-diep: oklch(23% 0.014 235);
  --rood: oklch(55% 0.2 27);          /* rood stipje: verkocht, nergens anders voor */
  --poederblauw: oklch(88% 0.03 240); /* alleen voor tekstselectie */

  /* Letters */
  --font-tekst: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-label: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --font-hand: "Reenie Beanie", "Bradley Hand", cursive; /* tijdelijk: wordt haar eigen gescande handschrift */

  --tekst-label: 0.875rem;
  --tekst-body: 1.0625rem;
  --tekst-groot: clamp(1.5rem, 1.05rem + 1.9vw, 2.375rem);
  --tekst-titel: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);

  /* Ruimte (4px-basis) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 192px;
  --rand: max(clamp(16px, 4vw, 56px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));

  /* Diepte: één lichtbron linksboven, getint naar de muur */
  --schaduw-doek:
    1px 2px 2px oklch(38% 0.012 75 / 0.10),
    3px 6px 8px oklch(38% 0.012 75 / 0.08),
    10px 20px 36px oklch(38% 0.012 75 / 0.08);

  /* Beweging */
  --uit: cubic-bezier(0.16, 1, 0.3, 1);
  --duur-mist: 1600ms;
  --duur-druppel: 2200ms;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--s-5); }
html:has(dialog[open]) { overflow: hidden; }
body {
  min-height: 100svh;
  background: var(--muur);
  color: var(--grafiet);
  font-family: var(--font-tekst);
  font-size: var(--tekst-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  isolation: isolate;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-weight: 500; line-height: 1.15; text-wrap: balance; }
p { text-wrap: pretty; overflow-wrap: break-word; }
cite { font-style: italic; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
ul, ol { list-style: none; padding: 0; }
::selection { background: var(--poederblauw); color: var(--grafiet); }
:focus-visible { outline: 2px solid var(--grafiet); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.naar-inhoud {
  position: absolute; left: var(--rand); top: var(--s-2); z-index: 10;
  padding: var(--s-2) var(--s-4); background: var(--grafiet); color: var(--muur);
  font-family: var(--font-label); font-size: var(--tekst-label);
  transform: translateY(-160%);
}
.naar-inhoud:focus-visible { transform: none; }

/* Labels: het getypte bordje naast een werk */
.label, .bordje, .menu, .index, .legenda, .tag, .specs, .terug, .voet, .lichtbak__balk {
  font-family: var(--font-label);
  font-size: var(--tekst-label);
  line-height: 1.6;
}
.tag { color: var(--grafiet-zacht); white-space: nowrap; }
.nog-invullen { color: var(--grafiet-zacht); }

/* Status: rondje = beschikbaar, rood stipje = verkocht (vorm + tekst, nooit kleur alleen) */
.stip {
  display: inline-block; flex: none;
  width: 0.62em; height: 0.62em; border-radius: 50%;
  border: 1.5px solid currentColor;
  vertical-align: 0.02em;
}
.stip--verkocht { background: var(--rood); border-color: var(--rood); }
.status { display: inline-flex; align-items: center; gap: var(--s-2); }

/* ---------- Kop ---------- */
.kop {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  column-gap: var(--s-6); row-gap: var(--s-1);
  padding: var(--s-4) var(--rand) 0;
}
.logo {
  font-family: var(--font-hand);
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem);
  line-height: 1;
  text-decoration: none;
  padding-block: var(--s-2);
  letter-spacing: 0.01em;
}
.menu ul { display: flex; gap: var(--s-5); }
.menu a {
  display: inline-block; padding-block: var(--s-3);
  text-decoration: none;
}
.menu a:hover { text-decoration: underline; }
.menu a[aria-current] { text-decoration: underline; }

/* ---------- De muur (homepage-opening) ---------- */
.muur { padding: clamp(var(--s-7), 9vh, var(--s-10)) var(--rand) 0; }

.ophang {
  --doek: min(100%, 1060px, calc(68svh * 1.4406));
  display: grid;
  grid-template-columns: var(--doek);
  justify-content: center;
  row-gap: var(--s-5);
}
.ophang__doek { position: relative; }
.ophang__link {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 1262 / 876;
  box-shadow: var(--schaduw-doek);
}
/* De "mist": een piepklein, vervaagd voorbeeld dat onder het echte beeld ligt */
.ophang__link::before {
  content: ""; position: absolute; inset: -24px;
  background: var(--muur-diep) url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/4QC8RXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABIAAAAAQAAAEgAAAABAAeQAAAHAAAABDAyMjGRAQAHAAAABAECAwCgAAAHAAAABDAxMDCgAQADAAAAAQABAACgAgAEAAAAAQAAACCgAwAEAAAAAQAAABakBgADAAAAAQAAAAAAAAAA/8AAEQgAFgAgAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMABAQEBAQEBgQEBgkGBgYJDAkJCQkMDwwMDAwMDxIPDw8PDw8SEhISEhISEhUVFRUVFRkZGRkZHBwcHBwcHBwcHP/bAEMBBAUFBwcHDAcHDB0UEBQdHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHf/dAAQAAv/aAAwDAQACEQMRAD8A+zLZYJ7SKSLDIyggjmqN3BDtYYGQM1558Lvt0XhlPNuXMce4KjD7mCSQCeoru5WS6tmljm3pIpIdTkEHOCDWVry5Sr2jc5TU4t1q6EZYrkY69K8xuFupIg08OzOPrXbSxarpt7tnmFzbXLKsTNw0YC859cmsu/R5hIjAbu1U6MXugVVp6M//0NTw142uLPWm0ScytBcK8OFIwG3/AHueecc8177ofl2mlC0gLGGMkIGx8o/uj2HavkXTf+R0g/67t/6Mr630r/jyP+8ain8ZUtYC386m5jtJV3ARhwf6Vz195Yc7Vx3/ABrX1H/kKR/9cB/Wsa+++foa6ehgtz//2Q==") center / cover no-repeat;
  filter: blur(18px) saturate(0.7) brightness(1.06);
}
.ophang__beeld { position: relative; width: 100%; height: 100%; object-fit: cover; }

.bordje { display: grid; align-content: end; gap: 0; color: var(--grafiet); padding-left: calc(7% + var(--s-5)); }
.bordje__nr { color: var(--grafiet-zacht); }
.bordje__titel { font-family: var(--font-tekst); font-size: var(--tekst-body); margin-block: var(--s-1) var(--s-2); }
.bordje__titel a { text-decoration: none; }
.bordje__titel a:hover { text-decoration: underline; }
.bordje .status { margin-top: var(--s-2); }

/* De druppel: loopt vanonder het linkerpaneel de muur af, zoals op haar atelierfoto */
.druppel {
  position: absolute; left: 7%; top: 100%;
  width: 2px; height: clamp(120px, 26vh, 260px);
  /* dun en lichter waar hij het doek verlaat, voller naar het eind */
  background: linear-gradient(var(--druppel-licht), var(--druppel) 85%);
  border-radius: 1px;
  pointer-events: none;
}
.druppel::after {
  content: ""; position: absolute; left: 50%; bottom: -8px;
  width: 6px; height: 11px; translate: -50% 0;
  background: var(--druppel);
  border-radius: 50% 50% 50% 50% / 34% 34% 66% 66%;
}

/* Het ene bewegende moment: de mist trekt op, daarna druppelt er iets naar beneden */
.js:not(.na-laden) .ophang:not(.is-geladen) .ophang__beeld { opacity: 0; }
.js:not(.na-laden) .ophang:not(.is-geladen) .druppel { clip-path: inset(0 0 100% 0); }
.js .ophang.is-geladen .ophang__beeld { animation: mist var(--duur-mist) var(--uit) both; }
.js .ophang.is-geladen .druppel { animation: druppel var(--duur-druppel) cubic-bezier(0.5, 0, 0.3, 1) 900ms both; }
@keyframes mist { from { opacity: 0; } to { opacity: 1; } }
@keyframes druppel {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 -12px 0); }
}
@media (prefers-reduced-motion: reduce) {
  .js .ophang.is-geladen .ophang__beeld { animation-duration: 500ms; }
  .js .ophang.is-geladen .druppel,
  .js:not(.na-laden) .ophang:not(.is-geladen) .druppel { animation: none; clip-path: none; }
}

@media (min-width: 1100px) {
  .ophang {
    --doek: min(calc(100% - 15rem - var(--s-7)), 1060px, calc(70svh * 1.4406));
    grid-template-columns: var(--doek) 15rem;
    column-gap: var(--s-7);
    align-items: end;
  }
  .bordje { padding-left: 0; padding-bottom: var(--s-1); }
}

/* ---------- Intro ---------- */
.intro {
  padding: clamp(var(--s-9), 26vh, 280px) var(--rand) 0;
  display: grid;
}
.intro__tekst {
  font-size: var(--tekst-groot);
  line-height: 1.25;
  letter-spacing: -0.012em;
  max-width: 26ch;
  justify-self: end;
  width: min(100%, 26ch);
}
@media (min-width: 760px) {
  .intro__tekst { justify-self: start; margin-left: 33%; }
}

/* ---------- Sectiekoppen ---------- */
.sectiekop {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--s-2) var(--s-5);
  padding-bottom: var(--s-4);
}
.sectiekop h2 { font-size: 1.25rem; }
.legenda { display: flex; gap: var(--s-5); color: var(--grafiet-zacht); }
.legenda .status { gap: var(--s-2); }

/* ---------- Werk (de index) ---------- */
.werk { position: relative; padding: clamp(var(--s-9), 18vh, var(--s-11)) var(--rand) 0; }
.index { border-top: 1px solid var(--lijn); }
.index > li { border-bottom: 1px solid var(--lijn); }
.index__link {
  display: grid;
  grid-template-columns: 3ch minmax(0, 1fr) auto;
  grid-template-areas:
    "nr titel status"
    ".  meta  meta";
  column-gap: var(--s-4); row-gap: var(--s-1);
  align-items: baseline;
  padding: var(--s-4) var(--s-2);
  margin-inline: calc(var(--s-2) * -1);
  text-decoration: none;
  transition: background-color 160ms ease-out;
}
.index__nr { grid-area: nr; color: var(--grafiet-zacht); }
.index__titel { grid-area: titel; font-family: var(--font-tekst); font-size: var(--tekst-body); }
.index__meta { grid-area: meta; color: var(--grafiet-zacht); display: flex; flex-wrap: wrap; gap: 0 var(--s-5); }
.index__status { grid-area: status; }
.index__voorproef { display: none; }
.index__leeg { margin-top: var(--s-5); color: var(--grafiet-zacht); font-family: var(--font-label); font-size: var(--tekst-label); }

@media (hover: hover) {
  .index__link:hover { background: var(--muur-diep); }
  .index__link:hover .index__titel { text-decoration: underline; }
}

@media (min-width: 1100px) {
  .werk__lijst { width: 66%; }
  .index__link {
    grid-template-columns: 3ch minmax(0, 1.3fr) 5ch minmax(0, 1fr) 2ch;
    grid-template-areas: "nr titel jaar meta status";
  }
  .index__meta { display: contents; }
  .index__jaar { grid-area: jaar; }
  .index__techniek { grid-area: meta; }
  /* Voorproef zoals een klein fotootje rechts naast de lijst */
  .index__voorproef {
    display: block; position: absolute;
    right: var(--rand); top: calc(clamp(var(--s-9), 18vh, var(--s-11)) + 3.25rem);
    width: min(24vw, 340px); height: auto;
    box-shadow: var(--schaduw-doek);
    opacity: 0; pointer-events: none;
    transition: opacity 240ms ease-out;
  }
  .index__link:hover .index__voorproef,
  .index__link:focus-visible .index__voorproef { opacity: 1; }
}

/* ---------- Atelier ---------- */
.atelier {
  padding: clamp(var(--s-9), 20vh, var(--s-11)) var(--rand) 0;
  display: grid; gap: var(--s-7);
}
.atelier figure { display: grid; gap: var(--s-3); }
.atelier figcaption { font-size: var(--tekst-label); font-family: var(--font-label); color: var(--grafiet-zacht); display: flex; gap: var(--s-3); flex-wrap: wrap; }
.atelier figcaption .tag { color: var(--grafiet); }
.atelier__tekst { display: grid; gap: var(--s-4); max-width: 34rem; }
.atelier__tekst h2 { font-size: 1.25rem; }
.atelier__foto--detail { width: 72%; justify-self: end; }

@media (min-width: 900px) {
  .atelier {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--s-5); row-gap: var(--s-8);
    align-items: start;
  }
  .atelier__foto--groot { grid-column: 1 / 7; grid-row: 1 / 3; }
  .atelier__tekst { grid-column: 8 / 12; grid-row: 1; padding-top: var(--s-9); }
  .atelier__foto--detail { grid-column: 9 / 13; grid-row: 2; width: auto; align-self: end; }
}

/* ---------- Contact & voet ---------- */
.contact {
  padding: clamp(var(--s-10), 26vh, 280px) var(--rand) var(--s-9);
  display: grid; gap: var(--s-4);
}
.contact__vraag { font-size: 1.25rem; font-weight: 400; color: var(--grafiet-zacht); max-width: 30ch; }
.contact__mail {
  justify-self: start;
  font-size: clamp(1.35rem, 0.8rem + 3.4vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  padding-block: var(--s-1);
}
.contact__mail:hover { text-decoration-thickness: 2px; }

.voet {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-5);
  padding: var(--s-5) var(--rand) var(--s-6);
  border-top: 1px solid var(--lijn);
  margin-inline: var(--rand);
  padding-inline: 0;
  color: var(--grafiet-zacht);
}

/* ---------- Werkpagina ---------- */
.terug { display: inline-block; margin: var(--s-6) var(--rand) 0; padding-block: var(--s-2); text-decoration: none; }
.terug:hover { text-decoration: underline; }

.werkblad {
  padding: var(--s-6) var(--rand) 0;
  display: grid; gap: var(--s-7);
  grid-template-areas: "beeld" "info" "meer";
}
.werkblad__beeld { grid-area: beeld; }
.werkblad__info { grid-area: info; display: grid; gap: var(--s-5); align-content: start; }
.werkblad__meer { grid-area: meer; display: grid; gap: var(--s-7); }
.werkblad figure { display: grid; gap: var(--s-3); }
.werkblad figcaption { font-family: var(--font-label); font-size: var(--tekst-label); color: var(--grafiet-zacht); display: flex; gap: var(--s-3); flex-wrap: wrap; }
.werkblad figcaption .tag { color: var(--grafiet); }

.vergroot { display: block; cursor: zoom-in; box-shadow: var(--schaduw-doek); }
.vergroot img { width: 100%; }

.werkblad__nr { font-family: var(--font-label); font-size: var(--tekst-label); color: var(--grafiet-zacht); }
.werkblad__titel { font-size: var(--tekst-titel); letter-spacing: -0.02em; margin-top: var(--s-1); }
.werkblad__titel cite { font-weight: 500; }

.specs { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-2) var(--s-5); border-top: 1px solid var(--lijn); padding-top: var(--s-4); }
.specs dt { color: var(--grafiet-zacht); }

.knop {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: var(--s-3) var(--s-5);
  background: var(--grafiet); color: var(--muur);
  font-family: var(--font-tekst); font-size: 1rem; font-weight: 500;
  text-decoration: none;
  transition: background-color 160ms ease-out;
}
.knop:hover { background: var(--grafiet-hover); }
.knop:active { background: var(--grafiet-diep); }
.vraag { display: grid; gap: var(--s-3); justify-items: start; }
.vraag__hulp { font-size: 0.9375rem; color: var(--grafiet-zacht); max-width: 34ch; }

.over-werk { display: grid; gap: var(--s-3); border-top: 1px solid var(--lijn); padding-top: var(--s-4); }
.over-werk h2 { font-family: var(--font-label); font-size: var(--tekst-label); font-weight: 400; color: var(--grafiet-zacht); }
.over-werk p { max-width: 42ch; }

@media (min-width: 760px) {
  .werkblad__meer { grid-template-columns: 1fr 1fr; gap: var(--s-5); align-items: start; }
  .werkblad__meer figure:last-child { margin-top: var(--s-10); }
}
@media (min-width: 1100px) {
  .werkblad {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    grid-template-areas: "beeld info" "meer info";
    column-gap: var(--s-8); row-gap: var(--s-8);
  }
  .werkblad__info { position: sticky; top: var(--s-6); align-self: start; }
}

/* ---------- Lichtbak ---------- */
.lichtbak {
  width: 100%; max-width: none; height: 100dvh; max-height: none;
  margin: 0; padding: var(--s-4) var(--rand) var(--s-5);
  border: 0; background: var(--muur); color: var(--grafiet);
}
.lichtbak[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--s-4); }
.lichtbak::backdrop { background: var(--muur); }
.lichtbak__balk { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); }
.lichtbak__sluit {
  min-height: 44px; padding: var(--s-2) var(--s-4);
  background: none; border: 1px solid var(--grafiet); color: var(--grafiet);
  font: inherit; cursor: pointer;
}
.lichtbak__sluit:hover { background: var(--muur-diep); }
.lichtbak img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-out; }
.lichtbak[open] img { animation: mist 320ms var(--uit) both; }