/* ============================================================
   SKIN: PORTFOLIO — "HET GELE VEL"

   Eén geel vlak, acht woorden, verder niets. Je gaat over een
   woord en het werk uit dat vak komt naar voren. Geen kopjes,
   geen bijschriften, geen knoppen: het beeld is de inhoud.

   Eén vak werkt anders: bij Websites komen de sites als schermen
   naar voren, met hun eigen vormgeving in beeld, en die kun je
   aanklikken om er echt naartoe te gaan.

   Wat er uit de trendlijst in zit:
   1  onregelmatige letters, met de hand bijgesteld
   2  ruw materiaal: elk beeld anders afgewerkt, naden zichtbaar
   4  losse voorwerpen op een leeg vlak
   5  plat, met diepte alleen waar het de rangorde helpt
   7  strak palet met één storende kleur, hier roze, alleen op
      wat aan staat
   8  brutalistisch met de structuur in het zicht, maar wel
      gewoon te bedienen
   ============================================================ */

body[data-skin="geel"] {
  --pg-bg:   #ffd23f;
  --pg-fg:   #16161a;
  --pg-mut:  #7a6410;
  --pg-lijn: rgba(22, 22, 26, .2);
  --display: var(--mono);

  background: var(--pg-bg);
  color: var(--pg-fg);
  overflow-x: hidden;
}

/* korrel over het geel, zodat het vlak niet plat digitaal oogt */
body[data-skin="geel"]::before {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .42; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='.36'/%3E%3C/svg%3E");
}

/* ---------- 1. HET VLAK ---------- */
.pw {
  position: relative; z-index: 2;
  min-height: 100vh;
  padding: calc(var(--nav-h) + clamp(20px, 4vh, 54px)) var(--pad-x) clamp(30px, 6vh, 70px);
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}

/* de structuur in het zicht: een paar kale hulplijnen, verder niets */
.pw-lijnen { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.pw-lijnen i {
  position: absolute; background: var(--pg-lijn);
}
.pw-lijnen i:nth-child(1) { left: 0; right: 0; top: 18%;  height: 1px; }
.pw-lijnen i:nth-child(2) { left: 0; right: 0; bottom: 16%; height: 1px; }
.pw-lijnen i:nth-child(3) { top: 0; bottom: 0; left: clamp(14px, 6vw, 120px); width: 1px; }
.pw-lijnen i:nth-child(4) { top: 0; bottom: 0; right: 8%; width: 1px; }

/* ---------- 2. DE ACHT WOORDEN ----------
   Elk woord krijgt zijn eigen graad en zijn eigen inspringing. Vijf
   letters mogen enorm, twintig letters kunnen dat niet: dan valt het
   van de bladzijde af. De inspringing loopt met opzet niet netjes op;
   dat is precies wat de lijst een vorm geeft in plaats van een tabel. */
.pw-lijst {
  position: relative; z-index: 4;
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: clamp(1px, .4vh, 8px);
}
.pw-lijst li:nth-child(1) { padding-left: 0; }
.pw-lijst li:nth-child(2) { padding-left: 6%; }
.pw-lijst li:nth-child(3) { padding-left: 2%; }
.pw-lijst li:nth-child(4) { padding-left: 14%; }
.pw-lijst li:nth-child(5) { padding-left: 8%; }
.pw-lijst li:nth-child(6) { padding-left: 20%; }
.pw-lijst li:nth-child(7) { padding-left: 11%; }

.pw-lijst li:nth-child(1) .pw-woord { font-size: clamp(2.4rem, 11vw,   8.8rem); }
.pw-lijst li:nth-child(2) .pw-woord { font-size: clamp(2.1rem, 9.2vw,  7.4rem); }
.pw-lijst li:nth-child(3) .pw-woord { font-size: clamp(2rem,   8.6vw,  6.8rem); }
.pw-lijst li:nth-child(4) .pw-woord { font-size: clamp(1.5rem, 5.8vw,  4.6rem); }
.pw-lijst li:nth-child(5) .pw-woord { font-size: clamp(1.4rem, 5.4vw,  4.3rem); }
.pw-lijst li:nth-child(6) .pw-woord { font-size: clamp(1.1rem, 4.3vw,  3.4rem); }
.pw-lijst li:nth-child(7) .pw-woord { font-size: clamp(2.6rem, 12vw,   9.6rem); }

.pw-woord {
  appearance: none; border: 0; background: none; padding: 0;
  cursor: pointer; display: block; text-align: left; position: relative;
  font-family: var(--mono); font-weight: 700; text-transform: uppercase;
  line-height: .86; letter-spacing: -.055em;
  color: var(--ink); white-space: nowrap;
  transition: transform .3s var(--ease);
}
.pw-woord:hover, .pw-woord:focus-visible { transform: translateX(clamp(4px, 1vw, 20px)); }

/* onregelmatige letters: elke letter staat net even anders. Vaste
   waarden, geen toeval, zodat het er elke keer hetzelfde uitziet. */
.pw-woord .k {
  display: inline-block;
  transform: translateY(var(--y, 0)) scaleY(var(--sy, 1)) scaleX(var(--sx, 1)) rotate(var(--r, 0deg));
  transform-origin: bottom;
}

/* de storende kleur: roze, en alleen op het vak dat aan staat */
.pw-woord::after {
  content: ""; position: absolute; z-index: -1;
  left: -.06em; right: -.06em; bottom: .12em; height: .16em;
  background: var(--roze);
  transform: scaleX(0) rotate(-.6deg); transform-origin: left center;
  transition: transform .34s var(--ease);
}
.pw-woord.aan::after { transform: scaleX(1) rotate(-.6deg); }

/* de andere zeven worden hol zodra er iets aan staat */
body[data-actief] .pw-woord { color: transparent; -webkit-text-stroke: 2px var(--ink); }
body[data-actief] .pw-woord.aan { color: var(--ink); -webkit-text-stroke: 0; }

/* ---------- 3. HET WERK ----------
   Losse voorwerpen op een leeg vlak. Elk beeld heeft een vaste
   plek, hoek en maat, en elk beeld is anders afgewerkt: het een
   hard afgesneden, het ander gescheurd, het derde alleen met
   een schaduw. Dat verschil is precies de bedoeling. */
.pw-beelden { position: absolute; inset: 0; z-index: 6; pointer-events: none; }

/* Het vak krijgt geen vaste vorm mee. In plaats daarvan geeft elke
   plek een maximale breedte en hoogte, en past het beeld daar zelf
   binnen: een lange groeimeter blijft lang en smal, een vierkante tas
   blijft vierkant. Het vak krimpt om het beeld heen, zodat de rand en
   de schaduw er strak omheen zitten. Zo wordt er nooit iets
   afgesneden en staat alles heel in beeld. */
.pw-beeld {
  position: absolute;
  opacity: 0; visibility: hidden;
  transform: scale(.9) rotate(var(--dr, 0deg)) translateY(16px);
  transition: opacity .4s var(--ease), transform .5s var(--ease), visibility .4s;
}
/* Breedte en hoogte staan allebei los. Dan krimpen ze samen zodra een
   van de twee grenzen wordt geraakt, en blijft de verhouding kloppen:
   de groeimeter blijft lang en smal, de tas blijft vierkant.

   Een beeld dat nog moet laden heeft zo geen afmeting, waardoor lui
   laden nooit op gang zou komen. Daarom zet de bediening in de
   opmaak het laden aan zodra een vak wordt gekozen. */
.pw-beeld img {
  display: block;
  width: auto; height: auto;
  max-width: var(--bw); max-height: var(--bh);
}

/* visibility haalt wat uit staat ook uit de tabvolgorde, dus de
   verborgen sites zijn niet per ongeluk met de toetsen te bereiken */
.pw-beeld.aan {
  opacity: 1; visibility: visible;
  transform: scale(1) rotate(var(--dr, 0deg)) translateY(0);
}
.pw-beeld.p2 { transition-delay: .05s; }
.pw-beeld.p3 { transition-delay: .10s; }
.pw-beeld.p4 { transition-delay: .15s; }
.pw-beeld.p5 { transition-delay: .20s; }
.pw-beeld.p6 { transition-delay: .25s; }

/* drie afwerkingen, met opzet niet gelijk */
.pw-beeld.hard {
  border: 3px solid var(--ink);
  box-shadow: 12px 12px 0 var(--ink);
}
.pw-beeld.scheur {
  filter: drop-shadow(6px 8px 0 rgba(22,22,26,.9));
}
.pw-beeld.scheur img {
  clip-path: polygon(0 3%, 12% 0, 26% 4%, 43% 0, 60% 4%, 77% 0, 91% 4%, 100% 1%,
                     97% 25%, 100% 49%, 97% 73%, 100% 98%, 83% 100%, 66% 96%,
                     48% 100%, 30% 96%, 13% 100%, 2% 96%, 0 73%, 3% 49%, 0 26%);
}
.pw-beeld.zacht {
  box-shadow: 0 14px 30px rgba(22,22,26,.34), 0 40px 70px rgba(22,22,26,.24);
}

/* De zes plekken liggen in twee kolommen van drie, allemaal in de
   rechterhelft, want de woorden staan links.

   De volgorde is niet willekeurig: 1 en 2 staan naast elkaar, 3 en 4
   eronder, 5 en 6 daar weer onder. Werk van dezelfde klant krijgt in
   de opmaak achtereenvolgende nummers, en komt zo vanzelf bij elkaar
   te staan. De voor- en achterkant van hetzelfde kaartje liggen dus
   naast elkaar, en de hele set van ToekomstMakers vormt één blok.

   Elk beeld staat een tikje scheef en de rijen zijn iets verspringend,
   zodat het een stapel blijft en geen tabel wordt. De bovenste rij
   begint onder de menubalk en de onderste blijft uit de
   rechterbenedenhoek, waar de WhatsApp-knop zweeft. */
.pw-beeld.p1 { top: calc(var(--nav-h) + clamp(6px, 1.2vh, 16px)); right: 1%;
  --bw: clamp(140px, 19vw, 255px); --bh: clamp(115px, 23vh, 210px); --dr: -3deg; }
.pw-beeld.p2 { top: calc(var(--nav-h) + clamp(16px, 3vh, 34px));  right: 25%;
  --bw: clamp(120px, 16vw, 220px); --bh: clamp(110px, 22vh, 200px); --dr: 4deg;  }
.pw-beeld.p3 { top: 38%; right: 1%;
  --bw: clamp(130px, 18vw, 235px); --bh: clamp(115px, 23vh, 210px); --dr: 2deg;  }
.pw-beeld.p4 { top: 35%; right: 25%;
  --bw: clamp(135px, 18vw, 245px); --bh: clamp(120px, 24vh, 220px); --dr: -5deg; }
.pw-beeld.p5 { bottom: 13%; right: 1%;
  --bw: clamp(125px, 17vw, 225px); --bh: clamp(112px, 22vh, 205px); --dr: 3deg;  }
/* Plek zes krijgt bewust meer hoogte mee. Daar staat in elk vak het
   losse stuk, en in merch is dat de groeimeter: een ding van bijna
   vijf keer zo hoog als breed. Met de hoogte van de andere plekken
   zou daar een streepje van overblijven. */
.pw-beeld.p6 { bottom: 9%;  right: 25%;
  --bw: clamp(130px, 18vw, 235px); --bh: clamp(120px, 30vh, 270px); --dr: -4deg; }

/* ---------- 4. DE WEBSITES ----------
   Dit vak werkt anders dan de rest. Een site is geen plaatje maar een
   ding dat je kunt openen, dus hier komt hij als scherm naar voren:
   een balk met een adres erboven en de vormgeving eronder. Ze staan
   bijna recht, want je moet de site zelf kunnen lezen, en ze zijn
   groter dan de andere beelden.

   Klikken kan pas als het vak vaststaat. Op een muis zet je dat vast
   door op het woord te klikken, op een telefoon door het aan te tikken. */
a.pw-site {
  display: inline-flex; flex-direction: column;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 14px 14px 0 var(--ink);
  text-decoration: none; color: var(--ink);
  overflow: hidden;
}
a.pw-site.aan { pointer-events: auto; }

/* de balk bovenaan: drie stipjes en het adres, net genoeg om te
   laten zien dat dit een venster is en geen foto */
.ps-balk {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px;
  border-bottom: 3px solid var(--ink);
  background: var(--geel);
  font-family: var(--mono); font-size: clamp(.56rem, .9vw, .72rem);
  font-weight: 700; letter-spacing: .04em;
}
.ps-balk i {
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid var(--ink); flex: none;
}
/* een lang adres mag de balk niet uit elkaar duwen op een klein
   scherm: dan wordt hij achteraan gewoon afgekapt */
.ps-balk b {
  margin-left: 6px; font-weight: 700; min-width: 0;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

/* het scherm zelf houdt zijn eigen verhouding, net als de rest van
   het werk: een breed scherm blijft breed, er gaat niets vanaf */
.ps-doek { position: relative; display: block; overflow: hidden; }
.ps-doek img { display: block; width: auto; height: auto; max-width: var(--bw); max-height: var(--bh); }

/* het regeltje dat zegt dat je erop kunt klikken. Het schuift pas
   omhoog als je erover gaat, zodat het beeld voorgaat. */
.ps-open {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 9px 12px;
  background: var(--roze); color: #fff;
  font-family: var(--mono); font-size: clamp(.58rem, .95vw, .76rem);
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  transform: translateY(101%);
  transition: transform .28s var(--ease);
}
a.pw-site:hover .ps-open,
a.pw-site:focus-visible .ps-open { transform: translateY(0); }
a.pw-site:focus-visible { outline: 4px solid var(--roze); outline-offset: 6px; }

/* De zes sites liggen als een stapel vensters over elkaar heen, met
   steeds de balk en een stuk van het scherm vrij. Ze staan bijna
   recht, want je moet de vormgeving kunnen lezen. */
/* De tegenoverliggende rand gaat er telkens expliciet af. Een venster
   draagt namelijk ook de klasse van een gewone plek, en als daar top
   én bottom vandaan komen wordt de kaart uitgerekt tot over de hele
   hoogte in plaats van dat hij om het beeld heen krimpt. */
a.pw-site.p1 { top: calc(var(--nav-h) + clamp(4px, 1vh, 14px)); bottom: auto; right: 1%;
  --bw: clamp(210px, 27vw, 360px); --bh: clamp(115px, 22vh, 200px); --dr: -1.6deg; }
a.pw-site.p2 { top: 24%;   bottom: auto; right: 27%;
  --bw: clamp(170px, 22vw, 295px); --bh: clamp(95px, 18vh, 165px);  --dr: 2deg;    }
a.pw-site.p3 { top: 41%;   bottom: auto; right: 2%;
  --bw: clamp(190px, 24vw, 320px); --bh: clamp(105px, 20vh, 180px); --dr: -2.4deg; }
a.pw-site.p4 { top: 60%;   bottom: auto; right: 25%;
  --bw: clamp(160px, 21vw, 275px); --bh: clamp(88px, 17vh, 155px);  --dr: 3deg;    }
a.pw-site.p5 { bottom: 13%; top: auto;   right: 5%;
  --bw: clamp(180px, 23vw, 305px); --bh: clamp(100px, 19vh, 172px); --dr: -3deg;   }
a.pw-site.p6 { top: 20%;   bottom: auto; right: 41%;
  --bw: clamp(150px, 19vw, 255px); --bh: clamp(82px, 16vh, 145px);  --dr: 4deg;    }

/* ---------- 5. KLEIN SCHERM ----------
   Op een telefoon is twintig letters op één regel altijd te klein.
   Daar mogen de woorden dus wél afbreken, en gaan ze fors omhoog. */
@media (max-width: 820px) {
  /* Op een telefoon is er geen ruimte voor zes. Er komen er vier in
     beeld, groter, en de rechterbenedenhoek blijft vrij voor de
     WhatsApp-knop.

     Weg vallen de vierde en vijfde, niet de laatste twee: plek zes is
     in elk vak juist het losse stuk dat bij niemand anders hoort, en
     dat wil je op een telefoon net zo goed zien. */
  figure.pw-beeld.p4, figure.pw-beeld.p5 { display: none; }
  .pw-beeld.p1 { right: 1%;   --bw: 46vw; --bh: 26vh; }
  .pw-beeld.p2 { top: 25%;    right: 10%; --bw: 40vw; --bh: 24vh; }
  .pw-beeld.p3 { top: 43%;    right: 1%;  --bw: 42vw; --bh: 25vh; }
  .pw-beeld.p6 { top: auto; bottom: 12%; right: 22%; --bw: 34vw; --bh: 32vh; }
  .pw-beeld.hard { box-shadow: 7px 7px 0 var(--ink); border-width: 2px; }

  a.pw-site { box-shadow: 8px 8px 0 var(--ink); border-width: 2px; }
  a.pw-site.p5, a.pw-site.p6 { display: none; }
  a.pw-site.p1 { right: 1%;  bottom: auto; --bw: 60vw; --bh: 22vh; }
  a.pw-site.p2 { top: 27%;   bottom: auto; right: 22%; --bw: 52vw; --bh: 19vh; }
  a.pw-site.p3 { top: 47%;   bottom: auto; right: 2%;  --bw: 56vw; --bh: 20vh; }
  a.pw-site.p4 { top: auto;  bottom: 13%;  right: 12%; --bw: 50vw; --bh: 18vh; }
  /* op de kleinste kaart moet een lang adres nog heel in de balk passen */
  .ps-balk { font-size: .5rem; padding: 6px 8px; gap: 4px; }
  .ps-balk i { width: 6px; height: 6px; }
  .ps-balk { border-bottom-width: 2px; }
  /* op aanraking is er geen erover-gaan, dus het regeltje staat vast */
  .ps-open { transform: translateY(0); }
}

@media (max-width: 620px) {
  .pw-lijst li { padding-left: 0 !important; }
  .pw-lijst li:nth-child(1) .pw-woord { font-size: clamp(2.8rem, 16vw,   4.6rem); }
  .pw-lijst li:nth-child(2) .pw-woord { font-size: clamp(2.5rem, 14.2vw, 4rem);   }
  .pw-lijst li:nth-child(3) .pw-woord { font-size: clamp(2.4rem, 13.6vw, 3.8rem); }
  .pw-lijst li:nth-child(4) .pw-woord { font-size: clamp(1.8rem, 10vw,   2.9rem); }
  .pw-lijst li:nth-child(5) .pw-woord { font-size: clamp(1.7rem, 9.4vw,  2.7rem); }
  .pw-lijst li:nth-child(6) .pw-woord { font-size: clamp(1.4rem, 7.8vw,  2.3rem); }
  .pw-lijst li:nth-child(7) .pw-woord { font-size: clamp(3rem,   17vw,   5rem);   }
  body[data-actief] .pw-woord { -webkit-text-stroke-width: 1.4px; }
}

/* ---------- 6. BEDIENING ---------- */
.pw-woord:focus-visible { outline: 4px solid var(--ink); outline-offset: 10px; }
@media (prefers-reduced-motion: reduce) {
  .pw-beeld, .pw-woord, .pw-woord::after, .ps-open { transition-duration: .01ms; }
}

/* Deze staat bewust helemaal onderaan: de regel .pw-woord hierboven
   zet white-space op nowrap, en een mediaregel wint alleen als hij
   later in het bestand staat. Op een telefoon moeten de lange
   woorden juist wél kunnen afbreken. */
@media (max-width: 620px) {
  .pw-woord { white-space: normal; line-height: .95; }
}