/* salahajouaou.nl — cv/portfolio. Zie DESIGN.md voor de keuzes. */

@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap;
  src:url(../fonts/bricolage-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap;
  src:url(../fonts/bricolage-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 800;font-display:swap;
  src:url(../fonts/figtree-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 800;font-display:swap;
  src:url(../fonts/figtree-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Gloock";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/gloock-latin.woff2) format("woff2")}

:root{
  --table:oklch(94.6% .008 85);
  --paper:oklch(98.9% .003 95);
  --ink:oklch(19% .03 260);
  --ink-2:oklch(43% .02 255);
  --ink-3:oklch(55% .015 250);
  --line:oklch(90.5% .006 90);
  --line-2:oklch(93.5% .005 90);
  --green:oklch(37% .065 158);
  --green-2:oklch(31% .06 158);
  --green-ink:oklch(42% .08 155);
  --sage:oklch(92.5% .018 150);
  --sage-2:oklch(88% .025 150);
  --chip:oklch(95% .006 120);
  --warn:oklch(55% .17 40);

  --display:"Bricolage Grotesque","Figtree",system-ui,sans-serif;
  --sans:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Gloock",Georgia,"Times New Roman",serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --r-s:10px; --r-m:16px; --r-l:22px;
  --pad:clamp(20px,4.4vw,64px);
  --shadow-sheet:0 1px 0 oklch(100% 0 0 / .8) inset,0 1px 2px oklch(30% .02 80 / .05),0 24px 60px -24px oklch(30% .03 80 / .18);
  --shadow-lift:0 2px 4px oklch(30% .03 160 / .05),0 18px 40px -16px oklch(28% .05 160 / .28);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--table);-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{
  margin:0;min-height:100dvh;background:var(--table);color:var(--ink-2);
  font-family:var(--sans);font-size:1rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
}
/* papierkorrel op de tafel */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .32 0 0 0 0 .27 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{color:var(--ink);text-wrap:balance;margin:0}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--sage-2);color:var(--ink)}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--green);color:var(--paper);padding:10px 16px;border-radius:var(--r-s);text-decoration:none;transition:top .2s var(--ease)}
.skip:focus{top:16px}
svg[aria-hidden]{flex:none}
.btn svg,.bar svg,.pc__link svg,.contact__mail svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
svg.fill{fill:currentColor;stroke:none}

/* ------------------------------------------------------------ balk */
.bar{position:sticky;top:0;z-index:40;padding:14px clamp(12px,2.2vw,28px) 0;pointer-events:none}
.bar__in{
  pointer-events:auto;max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:24px;
  padding:12px 14px 12px 28px;border-radius:var(--r-m);
  background:color-mix(in oklch,var(--paper) 86%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid color-mix(in oklch,var(--line) 70%,transparent);
  transition:box-shadow .4s var(--ease),background-color .4s var(--ease);
}
.bar.is-scrolled .bar__in{box-shadow:0 10px 30px -18px oklch(30% .03 80 / .35)}
.logo{font-family:var(--serif);font-size:1.6rem;line-height:1;color:var(--ink);text-decoration:none;letter-spacing:-.02em}
.logo span{color:var(--green)}
.nav{margin-inline:auto}
.nav ul{display:flex;gap:4px}
.nav a{
  position:relative;display:block;padding:8px 14px;border-radius:999px;text-decoration:none;
  font-size:.95rem;color:var(--ink-2);transition:color .2s var(--ease),background-color .2s var(--ease);
}
.nav a:hover{color:var(--ink);background:var(--chip)}
.nav a.is-active{color:var(--green-2);background:var(--sage)}
.bar__end{display:flex;align-items:center;gap:12px;margin-left:auto}
.nav + .bar__end{margin-left:0}
.lang{display:flex;padding:3px;border-radius:999px;background:var(--chip);border:1px solid var(--line-2)}
.lang a{font:600 .75rem/1 var(--mono);letter-spacing:.06em;padding:7px 10px;border-radius:999px;text-decoration:none;color:var(--ink-3);transition:color .2s var(--ease),background-color .2s var(--ease)}
.lang a:hover{color:var(--ink)}
.lang a[aria-current]{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px oklch(30% .02 80 / .12)}
.burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;place-items:center}
.burger{position:relative}
.burger__l{position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:currentColor;transition:transform .45s var(--ease)}
.burger__l:first-child{transform:translateY(-4px)}
.burger__l:nth-child(2){transform:translateY(4px)}
.burger[aria-expanded="true"] .burger__l:first-child{transform:rotate(45deg)}
.burger[aria-expanded="true"] .burger__l:nth-child(2){transform:rotate(-45deg)}

/* ------------------------------------------------------------ knoppen */
.btn{
  --bg:transparent;display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 20px;
  border-radius:var(--r-s);font:600 .95rem/1 var(--sans);text-decoration:none;cursor:pointer;
  background:var(--bg);color:var(--ink);border:1px solid transparent;position:relative;isolation:isolate;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.btn:active{transform:scale(.97)}
.btn--sm{min-height:40px;padding:0 16px;font-size:.9rem}
.btn--solid{--bg:var(--green);color:oklch(98% .01 150)}
.btn--solid:hover{--bg:var(--green-2);transform:translateY(-1px);box-shadow:0 10px 24px -12px color-mix(in oklch,var(--green) 80%,transparent)}
.btn--solid svg{transition:transform .35s var(--ease)}
.btn--solid:hover svg{transform:translateY(2px)}
.btn--line{border-color:var(--ink);color:var(--ink);background:var(--paper)}
.btn--line svg:last-child{width:14px;height:14px;opacity:.7;transition:transform .3s var(--ease)}
.btn--line:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px);box-shadow:0 12px 24px -14px oklch(19% .03 260 / .6)}
.btn--line:hover svg:last-child{transform:translate(2px,-2px)}
.btn--ghost{border-color:var(--line);background:var(--paper)}

/* rand-straal op de pdf-knop onderaan (border beam) */
.btn--beam::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;z-index:-1;
  background:conic-gradient(from var(--beam,0deg),transparent 0 70%,oklch(85% .12 150) 82%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:beam 4.5s linear infinite;
}
@property --beam{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes beam{to{--beam:360deg}}

/* ------------------------------------------------------------ vel */
.desk{padding:22px clamp(12px,2.2vw,28px) 40px}
.sheet{
  max-width:1180px;margin:0 auto;background:var(--paper);border-radius:var(--r-l);
  box-shadow:var(--shadow-sheet);border:1px solid color-mix(in oklch,var(--line) 60%,transparent);
  padding:0 var(--pad) 28px;overflow:clip;
}

/* ------------------------------------------------------------ hero */
.hero{
  display:grid;grid-template-columns:minmax(0,1.45fr) minmax(260px,.85fr);gap:clamp(28px,5vw,72px);
  align-items:center;padding:clamp(40px,6vw,76px) 0 clamp(40px,5vw,60px);
}
.eyebrow{font:500 .76rem/1 var(--mono);letter-spacing:.32em;text-transform:uppercase;color:var(--green-ink);margin-bottom:18px}
.hero__name{
  font-family:var(--display);font-weight:800;font-size:clamp(3.1rem,8.4vw,6rem);line-height:.92;
  letter-spacing:-.038em;font-variation-settings:"opsz" 96;
}
.hero__name .ln{display:block;overflow:clip;padding-bottom:.06em;margin-bottom:-.06em}
.hero__name .ln>span{display:inline-block}
.hero__role{font-family:var(--display);font-weight:650;font-size:clamp(1.35rem,2.6vw,1.9rem);color:var(--green);letter-spacing:-.02em;margin-top:14px}
.hero__intro{font-size:clamp(1.02rem,1.3vw,1.14rem);max-width:58ch;margin-top:16px;color:var(--ink-2)}
.hero__links{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero__now{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:.9rem;color:var(--ink-3)}
.hero__now strong{color:var(--ink);font-weight:600}
.pulse{position:relative;width:8px;height:8px;border-radius:50%;background:oklch(62% .15 150)}
.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(3.2);opacity:0}}

/* monogramtegel: het kenmerkende element */
.tile{
  --x:50%;--y:50%;position:relative;margin:0;aspect-ratio:1;border-radius:var(--r-l);overflow:hidden;
  background:var(--sage);isolation:isolate;cursor:pointer;
  box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--sage-2) 70%,transparent);
  -webkit-tap-highlight-color:transparent;
}
.tile::before{ /* fijn stippenpatroon */
  content:"";position:absolute;inset:0;z-index:-1;opacity:.7;
  background:radial-gradient(circle at 1px 1px,color-mix(in oklch,var(--green) 22%,transparent) 1px,transparent 1.4px) 0 0/18px 18px;
  -webkit-mask:radial-gradient(70% 70% at 50% 50%,#000 30%,transparent 100%);mask:radial-gradient(70% 70% at 50% 50%,#000 30%,transparent 100%);
}
.tile__mono{position:absolute;inset:0;margin:auto;width:84%;height:auto;overflow:visible}
.tile__mono text{font-family:var(--serif);fill:var(--green);stroke:var(--green);stroke-width:1.2}
.tile__s{font-size:232px}
.tile__a{font-size:206px}
.tile__rule{stroke:var(--green);stroke-width:3;stroke-linecap:round}
.tile__photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  clip-path:circle(0% at var(--x) var(--y));transition:clip-path .9s var(--ease);
}
.tile:hover .tile__photo,.tile.is-open .tile__photo{clip-path:circle(150% at var(--x) var(--y))}
.tile__hint{
  position:absolute;left:14px;bottom:14px;display:flex;gap:7px;align-items:center;padding:7px 12px;border-radius:999px;
  font:500 .72rem/1 var(--mono);letter-spacing:.06em;color:var(--green-2);
  background:color-mix(in oklch,var(--paper) 80%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.tile__hint span{font-size:.5rem;color:oklch(62% .15 150)}
.tile__hint em{font-style:normal}
.h-tap{display:none}
@media (hover:none){
  .h-hover{display:none}.h-tap{display:inline}
  .pc article:hover{transform:none;box-shadow:none;border-color:var(--line)}
  .pc article:hover .pc__img img{transform:none}
  .chips li:hover{transform:none}
}
.tile:hover .tile__hint,.tile.is-open .tile__hint{opacity:0;transform:translateY(6px)}

/* ------------------------------------------------------------ kolommen */
.cols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:0 clamp(32px,5vw,64px);padding-top:clamp(36px,5vw,56px)}
.cols__side{border-left:1px solid var(--line);padding-left:clamp(28px,4vw,48px)}
.block{padding-bottom:clamp(36px,4.5vw,52px)}
.cols__main .block + .block{border-top:1px solid var(--line);padding-top:clamp(36px,4.5vw,52px)}
.cols__side .block + .block{border-top:1px solid var(--line);padding-top:clamp(32px,4vw,44px)}
.sh{display:flex;align-items:baseline;gap:22px;margin-bottom:28px}
.sh__nr{font:600 1rem/1 var(--mono);color:var(--green);font-variant-numeric:tabular-nums}
.sh__t{font-family:var(--display);font-weight:750;font-size:clamp(1.65rem,2.6vw,2.1rem);letter-spacing:-.03em;line-height:1.05}

/* tijdlijn */
.tl{--p:0;position:relative;padding-left:44px}
.tl::before,.tl::after{content:"";position:absolute;left:11px;top:10px;bottom:24px;width:2px;border-radius:2px}
.tl::before{background:var(--line)}
.tl::after{background:var(--green);transform-origin:top;transform:scaleY(var(--p))}
html:not(.js) .tl::after{transform:none}
.tl__item{position:relative;padding-bottom:34px}
.tl__item:last-child{padding-bottom:0}
.tl__item::before{
  content:"";position:absolute;left:-38px;top:7px;width:14px;height:14px;border-radius:50%;
  background:var(--green);box-shadow:0 0 0 5px var(--paper);
}
.tl__item.is-now::after{
  content:"";position:absolute;left:-38px;top:7px;width:14px;height:14px;border-radius:50%;
  background:var(--green);animation:pulse 2.4s var(--ease) infinite;
}
.tl__item--muted::before{background:oklch(72% .03 155)}
.tl__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 18px}
.tl__head h3{font-family:var(--display);font-weight:700;font-size:1.28rem;letter-spacing:-.02em}
.tl__when{font-size:.88rem;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.tl__org{font-size:1.02rem;margin-top:2px;color:var(--ink-2)}
.tl__pts{margin-top:12px;display:grid;gap:7px;max-width:68ch}
.tl__pts li{position:relative;padding-left:22px}
.tl__pts li::before{content:"";position:absolute;left:3px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--green)}
.tl__note{font-size:.92rem;color:var(--ink-3);margin-top:14px}
.stack{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.stack li{font:500 .72rem/1 var(--mono);letter-spacing:.02em;padding:6px 9px;border-radius:7px;background:var(--chip);color:var(--ink-2);border:1px solid var(--line-2)}
.other{margin-top:14px;display:grid;gap:14px}
.other li{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding-bottom:14px;border-bottom:1px solid var(--line-2)}
.other li:last-child{border-bottom:0;padding-bottom:0}
.other strong{color:var(--ink);font-weight:600}
.other span{color:var(--ink-3)}
.other p{grid-column:1;font-size:.93rem}
.other__when{grid-column:2;grid-row:1;font-size:.82rem;white-space:nowrap;font-variant-numeric:tabular-nums}

.grades{display:grid;grid-template-columns:1fr 1fr;margin-top:18px;border-radius:var(--r-m);background:var(--sage);padding:22px 0}
.grades div{padding:0 28px;display:grid;gap:4px}
.grades div + div{border-left:1px solid var(--sage-2)}
.grades b{font-family:var(--display);font-weight:750;font-size:2.4rem;line-height:1;color:var(--ink);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.grades span{font-size:.92rem;color:var(--ink-2)}

/* vaardigheden */
.sk + .sk{margin-top:24px}
.sk h3{font-family:var(--display);font-size:1.06rem;font-weight:650;letter-spacing:-.01em;margin-bottom:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips li{
  padding:9px 16px;border-radius:var(--r-s);background:var(--chip);border:1px solid var(--line-2);
  font-size:.92rem;color:var(--ink);transition:background-color .2s var(--ease),border-color .2s var(--ease),transform .25s var(--ease);
}
.chips li:hover{background:var(--sage);border-color:var(--sage-2);transform:translateY(-2px)}
.lines li{padding:11px 0;border-bottom:1px solid var(--line-2);color:var(--ink-2)}
.lines li:last-child{border-bottom:0}
.lines--pair li{display:flex;justify-content:space-between;gap:12px}
.lines--pair span{color:var(--ink)}
.lines--pair em{font-style:normal;color:var(--ink-3);font-size:.9rem}
.certs{display:grid;gap:10px}
.cert{display:flex;gap:18px;align-items:center;padding:18px 22px;border-radius:var(--r-m);background:var(--sage)}
.cert__ic{flex:none}
.cert__ic svg{width:34px;height:34px;fill:none;stroke:var(--green);stroke-width:1.5;stroke-linejoin:round}
.cert__n{font-family:var(--display);font-weight:650;color:var(--ink);font-size:1.08rem}
.cert__s{font-size:.9rem;color:var(--ink-3)}

/* ------------------------------------------------------------ projecten */
.block--wide{border-top:1px solid var(--line);padding-top:clamp(40px,5vw,64px)}
.pj__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:12px 48px;align-items:end;margin-bottom:26px}
.pj__head .sh{margin-bottom:0}
.pj__intro{max-width:60ch;color:var(--ink-2)}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.f{
  display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px;border-radius:999px;cursor:pointer;
  font:500 .92rem/1 var(--sans);color:var(--ink-2);background:var(--paper);border:1px solid var(--line);
  transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .2s var(--ease);
}
.f span{font:600 .7rem/1 var(--mono);padding:4px 6px;border-radius:6px;background:var(--chip);color:var(--ink-3);transition:inherit}
.f:hover{border-color:var(--ink-3);color:var(--ink)}
.f:active{transform:scale(.96)}
.f[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.f[aria-pressed="true"] span{background:oklch(100% 0 0 / .14);color:var(--paper)}
.pj{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.pc[hidden]{display:none}
.pc article{
  height:100%;display:flex;flex-direction:column;border-radius:var(--r-m);background:var(--paper);
  border:1px solid var(--line);overflow:hidden;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s var(--ease);
}
.pc article:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);border-color:var(--sage-2)}
.pc__img{position:relative;aspect-ratio:4/3;background:var(--sage);overflow:hidden;border-bottom:1px solid var(--line-2)}
.pc__img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.pc article:hover .pc__img img{transform:scale(1.045)}
.pc__cat{
  position:absolute;left:12px;top:12px;font:600 .68rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  padding:7px 10px;border-radius:999px;color:var(--green-2);background:color-mix(in oklch,var(--paper) 88%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.pc__body{display:flex;flex-direction:column;flex:1;padding:20px 22px 20px;position:relative;isolation:isolate}
.pc__meta{font:500 .76rem/1.3 var(--mono);color:var(--ink-3);letter-spacing:.02em}
.pc h3{font-family:var(--display);font-weight:700;font-size:1.22rem;letter-spacing:-.02em;margin-top:8px}
.pc__desc{font-size:.95rem;margin-top:8px}
.pc .stack{margin-top:14px}
.pc__link{
  display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:18px;align-self:flex-start;
  font-weight:600;font-size:.92rem;color:var(--green);text-decoration:none;
}
.pc__link span{font-weight:400;color:var(--ink-3);font-size:.86rem}
.pc__link svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.pc__link:hover svg{transform:translate(2px,-2px)}
.pc__link:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.pc__link--off{color:var(--ink-3);font-weight:500}
.pc__link--off svg{width:15px;height:15px}
/* de hele kaart klikbaar maken als er een link is */
.pc article{position:relative}
.pc__link:not(.pc__link--off)::after{content:"";position:absolute;inset:0;border-radius:var(--r-m)}

/* ------------------------------------------------------------ slot */
.cta{
  display:flex;align-items:center;gap:18px;margin-top:clamp(28px,4vw,44px);padding:18px 18px 18px 24px;
  border-radius:var(--r-m);background:var(--sage);
}
.cta__ic svg{width:34px;height:34px;fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round}
.cta__t{flex:1}
.cta__q{font-family:var(--display);font-weight:650;font-size:1.12rem;color:var(--ink)}
.cta__s{font-size:.9rem;color:var(--ink-2)}
.contact{padding:clamp(48px,7vw,88px) 0 clamp(28px,4vw,40px);text-align:center}
.contact__q{font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,6vw,4.4rem);letter-spacing:-.035em;line-height:1;color:var(--ink)}
.contact__s{margin-top:12px}
.contact__mail{
  display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding-bottom:4px;max-width:100%;
  font-family:var(--display);font-weight:600;font-size:clamp(1.05rem,2.4vw,1.6rem);color:var(--green);text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .5s var(--ease);
  overflow-wrap:anywhere;
}
.contact__mail:hover{background-size:100% 2px}
.contact__links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 36px}
.contact__tel{color:var(--ink);font-variant-numeric:tabular-nums}
.contact__site{display:none}
.contact__mail svg{width:22px;height:22px;transition:transform .35s var(--ease)}
.contact__mail:hover svg{transform:translate(3px,-3px)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;padding-top:22px;border-top:1px solid var(--line);font-size:.84rem;color:var(--ink-3)}
.foot a{text-decoration:none;color:var(--ink-2)}
.foot a:hover{color:var(--green)}

/* ------------------------------------------------------------ mobiel menu (vaste laag, altijd in de body) */
.menu{position:fixed;inset:0;z-index:30;background:var(--paper);padding:104px 24px 32px;display:flex;flex-direction:column}
.menu[hidden]{display:none}
.menu__in{display:flex;flex-direction:column;justify-content:space-between;height:100%;max-width:520px;width:100%;margin:0 auto}
.menu ul{display:grid}
.menu li a{
  display:flex;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--line-2);text-decoration:none;
  font-family:var(--display);font-weight:700;font-size:2rem;letter-spacing:-.03em;color:var(--ink);
}
.menu .num{font:600 .8rem/1 var(--mono);color:var(--green)}
.menu__foot{display:grid;gap:10px}
.menu__foot .btn{justify-content:center}

/* ------------------------------------------------------------ motion (alleen met js) */
.js [data-load]{opacity:0;transform:translateY(10px);filter:blur(5px)}
.js .hero__name [data-load]{filter:none}
.js .hero__name [data-load]{opacity:1;transform:translateY(105%)}
.js.is-loaded [data-load]{opacity:1;transform:none;filter:none;transition:opacity .9s var(--ease),transform 1.05s var(--ease),filter .8s var(--ease);transition-delay:calc(var(--d,0) * 1ms)}
.js .tile{opacity:0;transform:scale(.96)}
.js.is-loaded .tile{opacity:1;transform:none;transition:opacity 1s var(--ease) .15s,transform 1.2s var(--ease) .15s}
.js .tile__mono text{fill-opacity:0;stroke-dasharray:900;stroke-dashoffset:900}
.js.is-loaded .tile__mono text{fill-opacity:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.8s var(--ease-io) .35s,fill-opacity .9s var(--ease) 1.5s}
.js.is-loaded .tile__a{transition-delay:.6s,1.7s !important}
.js .tile__rule{stroke-dasharray:140;stroke-dashoffset:140}
.js.is-loaded .tile__rule{stroke-dashoffset:0;transition:stroke-dashoffset 1s var(--ease) 1.9s}

.js [data-reveal]{opacity:0;transform:translateY(12px);filter:blur(6px)}
.js [data-reveal].is-in{opacity:1;transform:none;filter:blur(0);transition:opacity .8s var(--ease),transform .9s var(--ease),filter .7s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
.js .chips[data-stagger] li{opacity:0;transform:translateY(8px) scale(.96)}
.js .is-in .chips[data-stagger] li{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .6s var(--ease),background-color .2s var(--ease),border-color .2s var(--ease);transition-delay:calc(var(--c,0) * 40ms + 120ms)}
.js .is-in .chips[data-stagger] li:hover{transition-delay:0s;transform:translateY(-2px)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important;transition-delay:0s !important}
  .js [data-load],.js [data-reveal],.js .tile,.js .chips[data-stagger] li,.js .hero__name [data-load]{opacity:1 !important;transform:none !important}
  .js .tile__mono text,.js .tile__rule{fill-opacity:1;stroke-dashoffset:0}
  .tl::after{transform:none}
}

/* ------------------------------------------------------------ breakpoints */
@media (max-width:1100px){
  .pj{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .nav{display:none}
  .burger{display:grid}
  .bar__end,.nav + .bar__end{margin-left:auto}
  .cols{grid-template-columns:1fr}
  .cols__side{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:clamp(36px,4.5vw,52px)}
  .pj__head{grid-template-columns:1fr}
}
@media (max-width:760px){
  .hero{grid-template-columns:1fr}
  .tile{order:-1;width:min(260px,70%);justify-self:start}
  .bar__cv{display:none}
  .bar__in{padding:8px 8px 8px 20px}
}
@media (max-width:640px){
  .desk{padding:10px 8px 24px}
  .bar{padding:8px 8px 0}
  .sheet{border-radius:18px;padding:0 18px 22px}
  .pj{grid-template-columns:1fr}
  .tl{padding-left:34px}
  .tl::before,.tl::after{left:6px}
  .tl__item::before,.tl__item.is-now::after{left:-33px}
  .grades div{padding:0 18px}
  .grades b{font-size:2rem}
  .other li{grid-template-columns:1fr}
  .other__when{grid-column:1;grid-row:auto}
  .cta{flex-wrap:wrap;padding:18px}
  .cta .btn{width:100%;justify-content:center}
  .hero__links .btn{flex:1 1 auto;justify-content:center}
  .lang a{padding:7px 9px}
}

/* ------------------------------------------------------------ print = de cv-pdf */
@page{size:A4;margin:14mm 14mm 14mm}
@media print{
  :root{--paper:#fff}
  html,body{background:#fff}
  body{font-size:9.6pt;line-height:1.45;color:#333}
  body::before,.bar,.menu,.skip,.tile__hint,.filters,.cta,.hero__links,.pc__img,.pc__link,.pc .stack,.contact__mail svg,.hero__now .pulse{display:none !important}
  .desk{padding:0}
  .sheet{box-shadow:none;border:0;border-radius:0;padding:0;max-width:none;overflow:visible}
  [data-load],[data-reveal],.tile,.chips li,.hero__name [data-load]{opacity:1 !important;transform:none !important;filter:none !important}
  *{filter:none !important;animation:none !important}
  .tile__mono text{fill-opacity:1 !important;stroke-dashoffset:0 !important}
  .tile__rule{stroke-dashoffset:0 !important}
  .tl::after{transform:none !important}
  .hero{grid-template-columns:minmax(0,1fr) 112px !important;padding:0 0 12px;gap:24px}
  .tile{order:2 !important;width:112px !important;border-radius:12px;align-self:start;justify-self:end}
  .tile__photo{clip-path:none !important}
  .eyebrow{margin-bottom:6px;font-size:7pt}
  .hero__name{font-size:30pt}
  .hero__name .ln{display:inline;overflow:visible}
  .hero__name .ln + .ln::before{content:" "}
  .hero__role{font-size:13pt;margin-top:4px}
  .hero__intro{font-size:9.6pt;margin-top:6px;max-width:none}
  .hero__now{display:block;margin-top:6px}
  .hero__now::after{content:" · salah.aj3211@gmail.com · 06 84 03 17 96 · linkedin.com/in/salah-ajouaou-9a579a2b3 · github.com/Salah3211 · salahajouaou.nl";white-space:pre-wrap}
  .cols{padding-top:14px;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) !important;gap:0 22px}
  .cols__side{padding-left:18px !important;border-top:0 !important;padding-top:0 !important;border-left:1px solid var(--line) !important}
  .block{padding-bottom:12px}
  .cols__main .block + .block,.cols__side .block + .block{padding-top:12px}
  .sh{margin-bottom:10px;gap:10px;break-after:avoid}
  .block{break-inside:auto}
  #education{break-before:page}
  #cert{break-inside:avoid}
  #projects{display:none !important}
  .sh__t{font-size:14pt}
  .sh__nr{font-size:8pt}
  .tl{padding-left:22px}
  .tl::before,.tl::after{left:4px}
  .tl__item{padding-bottom:10px;break-inside:avoid}
  .tl__item::before{left:-22px;width:9px;height:9px;top:5px;box-shadow:none}
  .tl__item.is-now::after{display:none}
  .tl__head h3{font-size:10.5pt}
  .tl__org{font-size:9pt}
  .tl__pts{margin-top:4px;gap:2px}
  .stack{margin-top:5px}
  .stack li{font-size:6.5pt;padding:2px 5px}
  .other{gap:5px;margin-top:5px}
  .other li{padding-bottom:5px}
  .other p{font-size:8.5pt}
  .grades{padding:8px 0;margin-top:8px}
  .grades b{font-size:15pt}
  .grades span{font-size:8pt}
  .sk + .sk{margin-top:10px}
  .sk h3{font-size:9.5pt;margin-bottom:5px}
  .chips{gap:4px}
  .chips li{font-size:8pt;padding:3px 7px}
  .lines li{padding:3px 0}
  .cert{padding:6px 10px;break-inside:avoid}
  .certs{gap:5px}
  .cert__ic svg{width:22px;height:22px}
  .block--wide{border-top:1px solid var(--line);padding-top:12px}
  .pj__head{break-after:avoid}
  .pj__head{grid-template-columns:1fr;margin-bottom:8px}
  .pj{grid-template-columns:1fr 1fr !important;gap:8px 18px}
  .other li{grid-template-columns:1fr auto !important}
  .other__when{grid-column:2 !important;grid-row:1 !important}
  .tl{padding-left:22px !important}
  .pc[hidden]{display:block}
  .pc article{border:0;border-radius:0;border-bottom:1px solid var(--line-2)}
  .pc__body{padding:0 0 6px}
  .pc h3{font-size:10pt;margin-top:2px}
  .pc__desc{font-size:8.5pt;margin-top:2px}
  .pc{break-inside:avoid}
  .contact{padding:14px 0 6px;text-align:left}
  .contact__q{font-size:16pt}
  .contact__mail{font-size:11pt;margin-top:4px}
  .contact__links{justify-content:flex-start;gap:0 24px}
  .contact__site{display:block;margin-top:8px;font-size:10pt;color:var(--ink-2)}
  .contact__site a{color:var(--green);font-weight:600;text-decoration:none}
  .foot{display:none}
}

/* ------------------------------------------------------------ Magic UI-effecten (vanilla) */
/* scroll-progress */
.progress{position:fixed;inset:0 0 auto;z-index:60;height:2px;transform-origin:0 50%;transform:scaleX(var(--sp,0));
  background:linear-gradient(90deg,var(--green),oklch(62% .12 155),var(--sage-2));pointer-events:none}
html:not(.js) .progress{display:none}

/* animated-shiny-text op de eyebrow */
.shiny{
  --shiny-width:90px;color:color-mix(in oklch,var(--green-ink) 72%,transparent);
  background:linear-gradient(90deg,transparent,var(--green-2) 50%,transparent) no-repeat;
  background-size:var(--shiny-width) 100%;background-position:calc(-100% - var(--shiny-width)) 0;
  -webkit-background-clip:text;background-clip:text;animation:shiny-text 8s infinite;
}
@keyframes shiny-text{0%,90%,100%{background-position:calc(-100% - var(--shiny-width)) 0}30%,60%{background-position:calc(100% + var(--shiny-width)) 0}}

/* marquee met de stack */
.band{
  --gap:14px;--duration:46s;display:flex;gap:var(--gap);overflow:hidden;padding:18px 0;
  border-block:1px solid var(--line);
  -webkit-mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.band__row{display:flex;flex-shrink:0;justify-content:space-around;gap:var(--gap);min-width:100%;animation:marquee var(--duration) linear infinite}
.band:hover .band__row{animation-play-state:paused}
.band li{display:flex;align-items:center;gap:var(--gap);font:500 .82rem/1 var(--mono);letter-spacing:.04em;color:var(--ink-3);white-space:nowrap}
.band li::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--sage-2)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(calc(-100% - var(--gap)))}}

/* magic-card op de projectkaarten */
.pc article{
  --mx:-300px;--my:-300px;border-color:transparent;
  background:linear-gradient(var(--paper) 0 0) padding-box,
    radial-gradient(240px circle at var(--mx) var(--my),oklch(55% .11 155),var(--sage-2) 45%,var(--line) 100%) border-box;
}
.pc article:hover{border-color:transparent}
.pc__body::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  background:radial-gradient(260px circle at var(--mx) calc(var(--my) - var(--img-h,0px)),color-mix(in oklch,var(--sage) 80%,transparent),transparent 100%);
  transition:opacity .3s var(--ease);
}
.pc article:hover .pc__body::before{opacity:1}

@media (prefers-reduced-motion:reduce){
  .band{flex-wrap:wrap;-webkit-mask:none;mask:none}
  .band__row{animation:none;flex-wrap:wrap;justify-content:center;min-width:0;flex-shrink:1;width:100%;row-gap:10px}
  .band__row[aria-hidden]{display:none}
  .shiny{animation:none;color:var(--green-ink);background:none}
  .js [data-reveal],.js [data-load]{filter:none !important}
  .progress{display:none}
}
@media (hover:none){.pc article{--mx:-300px;--my:-300px}}
@media print{.band,.progress{display:none !important}.shiny{animation:none;background:none;color:var(--green-ink)}}