/* Philip Ritterbecks — persoonlijke pagina. Wit, één scherm, geen praatjes. */

:root{
  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --bg:       #ffffff;
  --ink:      #0a0a0a;
  --muted:    #8e8e8e;
  --dim:      #a3a3a3;
  --hairline: rgba(10,10,10,.09);

  --ease: cubic-bezier(.22, 1, .36, 1);

  /* naamgrootte als variabele, zodat de foto exact op de letterhoogte kan uitlijnen */
  --name-fs: clamp(30px, 4.6vw, 62px);

  /* Apple-achtige, ultrasubtiele schaduw: dichtbij + ver, allebei zacht */
  --shadow-photo:
     0 1px 1px   rgba(10,10,10,.035),
     0 4px 10px  rgba(10,10,10,.040),
     0 14px 34px rgba(10,10,10,.050),
     0 40px 90px rgba(10,10,10,.055);
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html,body{ height:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

/* ---------- achtergrond: neutrale, bijna onzichtbare diepte ---------- */
.mesh{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(70% 60% at 10% 4%,   rgba(10,10,10,.016) 0%, rgba(10,10,10,0) 62%),
    radial-gradient(75% 65% at 94% 96%,  rgba(10,10,10,.020) 0%, rgba(10,10,10,0) 66%);
}
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.022;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

/* ---------- frame ---------- */
.frame{
  position:relative; z-index:2;
  height:100dvh;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(24px, 4.5vh, 56px) clamp(24px, 5vw, 80px);
  max-width:1280px; margin:0 auto;
}

/* Raster: kolom 1 = foto, kolom 2 = naam / lijst / taalknop.
   De foto overspant rij 1 + 2, dus:
   bovenkant foto = bovenkant van "Philip"
   onderkant foto = de onderste lijn van de bedrijvenlijst. */
.stage{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0, 0.42fr) minmax(0, 1fr);
  grid-template-rows:auto auto auto;
  align-items:stretch;
  column-gap:clamp(32px, 5.5vw, 76px);
}
.portrait { grid-column:1; grid-row:1 / 3; }
.name     { grid-column:2; grid-row:1; }
.ventures { grid-column:2; grid-row:2; }
.meta     { grid-column:2; grid-row:3; }

/* ---------- portret ---------- */
.portrait{ margin:0; min-height:0; position:relative; }
/* absoluut, zodat de foto de rijhoogte NIET bepaalt: het paneel doet dat.
   top-trim = de loze ruimte boven de hoofdletter P, zodat de bovenkant van de
   foto gelijk ligt met de bovenkant van "Philip". */
.portrait img{
  position:absolute;
  top:calc(var(--name-fs) * .13); right:0; left:0;
  display:block;
  /* hoogte expliciet: containerhoogte MINUS de top-trim. Met height:100%
     zou de foto onder de laatste lijn doorlopen, met height:auto zou hij
     terugvallen op zijn eigen pixelformaat. */
  width:100%; height:calc(100% - var(--name-fs) * .13);
  object-fit:cover; object-position:50% 20%;
  border-radius:clamp(18px, 1.9vw, 26px);
  box-shadow:var(--shadow-photo);
}

/* ---------- paneel ---------- */
.name{
  margin:0 0 clamp(24px, 4.5vh, 46px);
  font-size:var(--name-fs);
  line-height:.95;
  font-weight:700;
  letter-spacing:-.045em;
}

/* ---------- ventures ---------- */
.ventures{ list-style:none; margin:0; padding:0; border-top:1px solid var(--hairline); }
.ventures li{ border-bottom:1px solid var(--hairline); }

.ventures a{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding:clamp(14px, 3vh, 28px) 0;
  text-decoration:none; color:var(--ink);
  transition:padding-left .45s var(--ease), opacity .35s var(--ease);
}
.ventures a:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; }
@media (hover: hover) and (pointer: fine){
  .ventures a:hover{ padding-left:14px; }
}

.v-name{
  font-size:clamp(18px, 1.75vw, 25px); font-weight:700; letter-spacing:-.025em;
}
.v-what{
  flex:0 1 auto; text-align:right;
  font-size:clamp(12px, 1.02vw, 15px); font-weight:400;
  letter-spacing:0; color:var(--dim);
  transition:color .35s var(--ease);
}
@media (hover: hover) and (pointer: fine){
  .ventures a:hover .v-what{ color:var(--ink); }
}

/* rustig dimmen van de andere regels bij hover */
@media (hover: hover) and (pointer: fine){
  .ventures:hover a{ opacity:.4; }
  .ventures:hover a:hover{ opacity:1; }
}

/* ---------- meta ---------- */
.meta{
  margin-top:clamp(14px, 2vh, 20px);
  display:flex; align-items:center; justify-content:flex-end; gap:16px;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
}
.lang{ display:inline-flex; gap:12px; }
.lang-btn{
  appearance:none; background:none; border:0; padding:0; cursor:pointer;
  font-family:inherit; font-size:12px; font-weight:600; letter-spacing:.14em;
  color:var(--dim); transition:color .25s var(--ease);
}
.lang-btn:hover{ color:var(--muted); }
.lang-btn.is-active{ color:var(--ink); }
.lang-btn:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; border-radius:3px; }

/* ---------- entree ---------- */
.reveal{ opacity:0; transform:translateY(12px); }
body.is-ready .reveal{
  opacity:1; transform:none;
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}

/* ---------- responsive ---------- */
@media (max-width: 860px){
  body{ overflow-y:auto; }
  .frame{ height:auto; min-height:100dvh; padding:clamp(28px,6vh,48px) 24px; }

  /* Mobiel is GEEN uitgeknepen desktop: foto + naam vormen samen één kopregel,
     daaronder de lijst over de volle breedte. Zo geen halflege regels meer. */
  .stage{
    grid-template-columns:auto minmax(0,1fr);
    grid-template-rows:auto auto auto;
    column-gap:clamp(14px, 4.5vw, 20px);
    row-gap:clamp(22px, 3.6vh, 32px);
    align-items:center;
  }
  .portrait{ grid-column:1; grid-row:1; position:static; align-self:center; }
  .name    { grid-column:2; grid-row:1; margin:0; align-self:center;
             font-size:clamp(26px, 7.4vw, 34px); line-height:1.04;
             letter-spacing:-.035em; }
  /* mobiel: voornaam en achternaam onder elkaar */
  .name span{ display:block; }
  .ventures{ grid-column:1 / -1; grid-row:2; }
  .meta    { grid-column:1 / -1; grid-row:3; margin-top:0;
             justify-content:flex-start; }

  .portrait img{
    position:static;
    width:clamp(78px, 22vw, 98px);
    height:auto; aspect-ratio:4 / 5;
    object-position:50% 16%;
    border-radius:14px;
  }

  /* Touch kent geen hover, dus moet zichtbaar zijn dat een regel aantikbaar is:
     een haarfijne chevron rechts, plus een zachte reactie bij het tikken. */
  .ventures a{
    flex-direction:column; align-items:flex-start; gap:3px;
    position:relative; padding-right:28px;
    transition:opacity .25s var(--ease);
  }
  .v-what{ text-align:left; }
  .ventures a::after{
    content:""; position:absolute; right:5px; top:50%;
    width:7px; height:7px;
    border-right:1.5px solid var(--dim);
    border-top:1.5px solid var(--dim);
    transform:translateY(-50%) rotate(45deg);
    transition:border-color .25s var(--ease);
  }
  .ventures a:active{ opacity:.5; }
  .ventures a:active::after{ border-color:var(--ink); }

  /* Harde uitschakeling van elk hover-gedrag op smalle schermen. Sommige
     touch-apparaten melden onterecht "ik kan hoveren", waardoor een regel
     na het tikken in de hover-stand blijft hangen. */
  .ventures a:hover{ padding-left:0; }
  .ventures a:hover .v-what{ color:var(--dim); }
  .ventures:hover a,
  .ventures:hover a:hover{ opacity:1; }
  .v-name{ font-size:18px; }
  .v-what{ font-size:13px; }
}

/* korte, brede schermen */
@media (min-width: 861px) and (max-height: 700px){
  :root{ --name-fs: clamp(26px, 3.4vw, 42px); }
  .name{ margin-bottom:22px; }
  .ventures a{ padding-top:11px; padding-bottom:11px; }
  .meta{ margin-top:22px; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
}