:root{
    --paper:#F4EFE6;
    --paper-2:#EDE6D6;
    --ink:#161513;
    --ink-soft:#3a3530;
    --muted:#7a716a;
    --rule:#cdc4b3;
    --accent:#A23A1F;        /* burnt sienna */
    --accent-soft:#D9874E;
  }

  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);}
  body{
    font-family:"Geist", system-ui, sans-serif;
    font-weight:400;
    font-size:16px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  ::selection{background:var(--accent);color:var(--paper)}

  .grain{
    position:fixed;inset:0;pointer-events:none;z-index:1;
    opacity:.35;mix-blend-mode:multiply;
    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='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }

  .wrap{max-width:1180px;margin:0 auto;padding:48px 56px 96px;position:relative;z-index:2}
  @media (max-width:780px){ .wrap{padding:28px 22px 64px} }

  /* --- TOP BAR --- */
  .topbar{
    display:flex;justify-content:space-between;align-items:baseline;
    border-bottom:1px solid var(--rule);
    padding-bottom:14px;margin-bottom:42px;
    font-family:"Geist Mono", ui-monospace, monospace;
    font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  }
  .topbar .left b{color:var(--ink);font-weight:500}
  .topbar a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
  .topbar a:hover{border-color:var(--ink)}

  /* --- HERO --- */
  .hero{
    display:grid;
    grid-template-columns: 1fr auto;
    gap:48px;
    margin-bottom:64px;
    position:relative;
    align-items:start;
  }
  .hero-text{display:grid;gap:18px;min-width:0}
  .hero-portrait{
    position:relative;
    margin-top:6px;
  }
  .hero-portrait img{
    display:block;
    width:200px;
    height:200px;
    object-fit:cover;
    filter:contrast(1.05);
    box-shadow:0 6px 20px rgba(0,0,0,.18);
  }
  .hero-portrait::after{
    content:"";
    position:absolute;
    inset:8px -8px -8px 8px;
    border:1px solid var(--accent);
    z-index:-1;
    pointer-events:none;
  }
  @media (max-width:780px){
    .hero{grid-template-columns:1fr;gap:24px}
    .hero-portrait{order:-1;justify-self:start}
    .hero-portrait img{width:120px;height:120px}
    .hero-portrait::after{inset:6px -6px -6px 6px}
  }

  /* Download CTA */
  .cv-download{
    display:inline-flex;align-items:center;gap:9px;
    margin-top:24px;
    padding:9px 16px;
    border:1px solid var(--accent);
    color:var(--accent);
    font-family:"Geist Mono",monospace;
    font-size:11px;letter-spacing:.16em;text-transform:uppercase;
    text-decoration:none;
    background:transparent;
    transition:background-color .2s ease, color .2s ease, transform .15s ease;
    justify-self:start;
  }
  .cv-download:hover, .cv-download:focus-visible{
    background:var(--accent);
    color:var(--paper);
    outline:none;
  }
  .cv-download:active{ transform:translateY(1px) }
  .cv-download-icon{
    flex-shrink:0;
    transition:transform .2s ease;
  }
  .cv-download:hover .cv-download-icon{
    transform:translateY(2px);
  }
  @media print{
    .cv-download{display:none}
  }
  .eyebrow{
    font-family:"Geist Mono",monospace;
    font-size:12px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--accent);
    display:flex;align-items:center;gap:14px;
  }
  .eyebrow::before{
    content:"";width:42px;height:1px;background:var(--accent);display:inline-block;
  }

  h1.name{
    font-family:"Fraunces",serif;
    font-variation-settings:"opsz" 144,"SOFT" 30;
    font-weight:380;
    font-size:clamp(56px, 11vw, 156px);
    line-height:.92;
    letter-spacing:-.035em;
    margin:8px 0 0;
    color:var(--ink);
  }
  h1.name em{
    font-style:italic;
    font-variation-settings:"opsz" 144,"SOFT" 60;
    color:var(--accent);
    font-weight:300;
  }

  .hero-sub{
    display:grid;
    grid-template-columns: 1.4fr 1fr;
    gap:48px;
    margin-top:36px;
    align-items:end;
  }
  @media (max-width:780px){ .hero-sub{grid-template-columns:1fr;gap:24px} }
  .hero-tag{
    font-family:"Fraunces",serif;
    font-variation-settings:"opsz" 36;
    font-weight:300;
    font-size:clamp(20px, 2.4vw, 28px);
    line-height:1.35;
    letter-spacing:-.01em;
    color:var(--ink-soft);
    max-width:32ch;
  }
  .hero-meta{
    font-family:"Geist Mono",monospace;
    font-size:11px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--muted);
    display:grid;gap:6px;
    border-left:1px solid var(--rule);
    padding-left:18px;
  }
  .hero-meta b{color:var(--ink);font-weight:500}

  /* --- METRICS --- */
  .metrics{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:0;
    margin:64px 0 80px;
    border-top:1px solid var(--rule);
    border-bottom:1px solid var(--rule);
  }
  @media (max-width:1100px){ .metrics{grid-template-columns:repeat(3,1fr)} }
  @media (max-width:780px){ .metrics{grid-template-columns:repeat(2,1fr)} }
  .metric{
    padding:28px 22px;
    border-right:1px solid var(--rule);
    position:relative;
  }
  /* Verwijder rechter rand bij laatste kolom in elke rij + onderlinge rand bij wrap */
  .metric:nth-child(5n){border-right:0}
  @media (max-width:1100px){
    .metric{border-right:1px solid var(--rule)}
    .metric:nth-child(5n){border-right:1px solid var(--rule)}
    .metric:nth-child(3n){border-right:0}
    .metric:nth-child(n+4){border-top:1px solid var(--rule)}
  }
  @media (max-width:780px){
    .metric:nth-child(3n){border-right:1px solid var(--rule)}
    .metric:nth-child(2n){border-right:0}
    .metric:nth-child(n+3){border-top:1px solid var(--rule)}
  }
  .metric .num{
    font-family:"Fraunces",serif;
    font-variation-settings:"opsz" 144;
    font-weight:300;
    font-size:clamp(44px,6vw,72px);
    line-height:1;
    letter-spacing:-.03em;
    color:var(--ink);
  }
  .metric .num sup{
    font-size:.45em;vertical-align:top;
    color:var(--accent);
    font-weight:400;
    margin-left:2px;
  }
  .metric .lbl{
    margin-top:8px;
    font-family:"Geist Mono",monospace;
    font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--muted);line-height:1.5;
  }

  /* --- SECTION HEADING --- */
  .section{
    margin:0 0 72px;
    display:grid;
    grid-template-columns:200px 1fr;
    gap:48px;
  }
  @media (max-width:780px){ .section{grid-template-columns:1fr;gap:18px} }
  .section h2{
    font-family:"Geist Mono",monospace;
    font-size:11px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--muted);
    font-weight:500;
    margin:6px 0 0;
    position:sticky;top:24px;align-self:start;
  }
  .section h2::before{
    content:"§ ";color:var(--accent);
  }

  /* --- PROFILE PARAGRAPH --- */
  .profile p{
    font-family:"Fraunces",serif;
    font-variation-settings:"opsz" 18;
    font-weight:350;
    font-size:21px;line-height:1.5;
    letter-spacing:-.005em;
    color:var(--ink);
    margin:0 0 16px;
    max-width:62ch;
  }
  .profile p strong{
    font-weight:500;
    color:var(--accent);
    font-style:italic;
  }
  .profile p:last-child{
    font-family:"Geist",sans-serif;
    font-size:15px;
    color:var(--ink-soft);
    line-height:1.6;
    margin-top:24px;
  }

  /* --- EXPERIENCE --- */
  .job{
    padding:24px 0;
    border-top:1px solid var(--rule);
    display:grid;
    grid-template-columns:130px 1fr;
    gap:32px;
  }
  .job:first-of-type{border-top:0;padding-top:0}
  @media (max-width:780px){ .job{grid-template-columns:1fr;gap:8px;padding:20px 0} }
  .job .when{
    font-family:"Geist Mono",monospace;
    font-size:11.5px;letter-spacing:.08em;
    color:var(--muted);
    padding-top:6px;
  }
  .job .when b{display:block;color:var(--ink);font-weight:500;margin-bottom:2px}
  .job .body h3{
    font-family:"Fraunces",serif;
    font-variation-settings:"opsz" 36;
    font-weight:400;
    font-size:26px;
    line-height:1.2;letter-spacing:-.015em;
    margin:0 0 4px;
    color:var(--ink);
  }
  .job .body .at{
    font-family:"Geist",sans-serif;
    font-size:14px;
    color:var(--accent);
    margin-bottom:14px;
    font-weight:500;
    letter-spacing:.02em;
  }
  .job .body p{
    margin:0 0 12px;font-size:15px;line-height:1.6;color:var(--ink-soft);
    max-width:64ch;
  }
  .job ul{
    list-style:none;padding:0;margin:14px 0 0;
    display:grid;gap:10px;
  }
  .job ul li{
    font-size:14.5px;line-height:1.55;color:var(--ink-soft);
    padding-left:22px;position:relative;
    max-width:64ch;
  }
  .job ul li::before{
    content:"→";
    position:absolute;left:0;top:0;
    color:var(--accent);
    font-weight:500;
  }
  .job ul li b{color:var(--ink);font-weight:500}

  /* --- HIGHLIGHTS / Pull quote --- */
  .pullquote{
    margin:24px 0 0;
    padding:20px 24px;
    background:var(--paper-2);
    border-left:3px solid var(--accent);
    font-family:"Fraunces",serif;
    font-variation-settings:"opsz" 24;
    font-weight:350;font-style:italic;
    font-size:17px;line-height:1.5;color:var(--ink);
    max-width:60ch;
  }
  .pullquote::before {
    content:"";display:block;
    width:24px;height:1px;background:var(--accent);
    margin-bottom:10px;
  }

    /* --- SKILLS GRID --- */
    .skills{
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:36px;
    }

    @media (max-width:980px) {
        .skills{
            grid-template-columns:1fr;
            gap:28px;
        }
    }

.skill-block h4{
  font-family:"Geist Mono",monospace;
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 16px;
  font-weight:500;

  min-height:32px;
  display:flex;
  align-items:flex-start;
}

    .skill-block ul{
    list-style:none;
    padding:0;
    margin:0;
    }

    .skill-block li{
    padding:10px 0 12px;
    border-bottom:1px dashed var(--rule);
    }

    .skill-block li span:first-child{
    display:block;
    font-size:15px;
    line-height:1.4;
    color:var(--ink);
    }

    .skill-block li span:last-child{
    display:block;
    margin-top:4px;

    font-family:"Geist Mono",monospace;
    font-size:10px;
    line-height:1.5;
    letter-spacing:.1em;
    text-transform:uppercase;

    color:var(--muted);
    }


  /* --- LANGUAGES BAR --- */
  .lang-row{
    display:grid;grid-template-columns:120px 1fr 90px;
    align-items:center;gap:18px;
    padding:14px 0;
    border-bottom:1px solid var(--rule);
  }
  .lang-row:last-child{border-bottom:0}
  .lang-row .lname{
    font-family:"Fraunces",serif;font-style:italic;
    font-weight:400;font-size:18px;color:var(--ink);
  }
  .lang-row .bar{
    height:2px;background:var(--rule);position:relative;border-radius:2px;
  }
  .lang-row .bar i{
    position:absolute;left:0;top:0;height:100%;
    background:var(--accent);border-radius:2px;
  }
  .lang-row .pct{
    font-family:"Geist Mono",monospace;
    font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--muted);text-align:right;
  }

  /* --- EDU --- */
  .edu{
    display:grid;grid-template-columns:1fr 1fr;gap:32px;
  }
  @media (max-width:780px){ .edu{grid-template-columns:1fr;gap:18px} }
  .edu-card{
    padding:0;
  }
  .edu-card h3{
    font-family:"Fraunces",serif;
    font-variation-settings:"opsz" 36;
    font-weight:400;font-size:22px;line-height:1.2;
    margin:0 0 4px;color:var(--ink);
    letter-spacing:-.01em;
  }
  .edu-card .yrs{
    font-family:"Geist Mono",monospace;
    font-size:11px;letter-spacing:.1em;color:var(--muted);
    margin-bottom:8px;
  }
  .edu-card p{margin:6px 0 0;font-size:14.5px;color:var(--ink-soft);line-height:1.55}
  .edu-card .badge{
    display:inline-block;margin-top:10px;
    font-family:"Geist Mono",monospace;
    font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--accent);
    border:1px solid var(--accent);
    padding:5px 10px;border-radius:1px;
  }
  .edu-card .edu-list{
    list-style:none;padding:0;margin:10px 0 0;
  }
  .edu-card .edu-list li{
    font-size:14.5px;color:var(--ink-soft);line-height:1.7;
    padding-left:14px;position:relative;
  }
  .edu-card .edu-list li::before{
    content:"·";position:absolute;left:0;top:-1px;
    color:var(--accent);font-weight:700;
  }
  .edu-card .edu-list li b{color:var(--ink);font-weight:500}

  /* Publication highlight */
  .publication{
    margin-top:32px;
    padding:18px 22px;
    border-left:3px solid var(--accent);
    background:rgba(162,58,31,.04);
    display:grid;
    grid-template-columns:auto 1fr;
    gap:22px;
    align-items:baseline;
  }
  .pub-label{
    font-family:"Geist Mono",monospace;
    font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--accent);font-weight:600;
    white-space:nowrap;
  }
  .pub-body{
    font-size:14.5px;line-height:1.55;color:var(--ink-soft);
  }
  .pub-body em{font-style:italic;color:var(--ink);font-weight:500}
  .pub-body a{
    color:var(--accent);text-decoration:none;
    border-bottom:1px solid var(--accent);
  }
  .pub-body a:hover{opacity:.7}
  @media (max-width:780px){
    .publication{grid-template-columns:1fr;gap:6px;padding:14px 16px}
  }

  /* --- FOOTER --- */
  footer{
    margin-top:80px;
    padding-top:24px;
    border-top:1px solid var(--rule);
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;
    font-family:"Geist Mono",monospace;
    font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--muted);
  }
  footer a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
  footer a:hover{border-color:var(--accent);color:var(--accent)}

  /* --- ENTRANCE --- */
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .hero,.metrics,.section,footer{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
  .metrics{animation-delay:.1s}
  .section:nth-of-type(1){animation-delay:.15s}
  .section:nth-of-type(2){animation-delay:.2s}
  .section:nth-of-type(3){animation-delay:.25s}
  .section:nth-of-type(4){animation-delay:.3s}
  .section:nth-of-type(5){animation-delay:.35s}
  footer{animation-delay:.4s}

  /* --- PRINT --- */
  @page{
    size:A4;
    margin:14mm 12mm;
  }
  @media print{
    /* Reset bg/decoration */
    .grain{display:none}
    html,body{background:#fff;color:#000}
    body{font-size:10pt;line-height:1.4}
    .wrap{max-width:none;padding:0;margin:0}

    /* Headings: keep with following content */
    h1,h2,h3,h4{break-after:avoid;page-break-after:avoid}
    .section{break-inside:avoid-page}
    .job{break-inside:avoid;page-break-inside:avoid;margin-bottom:14pt}
    .pullquote{break-inside:avoid}
    .edu-card,.skill-block,.lang-row{break-inside:avoid}

    /* Sticky disable */
    .section h2{position:static}

    /* Cleaner lines */
    .topbar{border-color:#888;padding-bottom:8pt;margin-bottom:18pt}
    footer{border-color:#888}

    /* Sizing for print */
    h1.name{font-size:48pt;line-height:.92;margin:6pt 0 0}
    .hero{gap:20pt;margin-bottom:18pt}
    .hero-portrait img{width:96pt;height:96pt;box-shadow:none}
    .hero-portrait::after{inset:4pt -4pt -4pt 4pt}
    .hero-tag{font-size:13pt;line-height:1.3}
    .hero-meta{font-size:8pt}
    .eyebrow{font-size:9pt}

    .metrics{margin:8pt 0;padding:8pt 0}
    .metric .num{font-size:24pt}
    .metric .lbl{font-size:7pt}

    .section{margin-bottom:14pt}
    .section h2{font-size:9pt;margin:10pt 0 8pt}
    .job h3{font-size:13pt}
    .skill-block h4{font-size:9pt}
    .edu-card h3{font-size:14pt}

    /* Show URLs after links */
    a[href^="http"]::after{
      content:" (" attr(href) ")";
      font-size:8pt;color:#666;font-weight:normal;
    }
    a[href^="mailto:"]::after,a[href^="tel:"]::after{content:""}

    /* Hide animation no-effect */
    *{animation:none !important;transition:none !important}

    /* Force colors to print */
    *{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  }