:root{
  --bg: #f1efe8;
  --text: #2f2f2f;
  --heading: #1f1f1f;
  --muted: #5a5a5a;
  --rule: rgba(0,0,0,.10);

  --red: #e02f07;
  --redLine: #b82505;

  --portraitW: 260px;
  --portraitH: 320px;
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  line-height: 1.7;
}

.wrap{
  width: min(760px, 92vw);
  margin: 0 auto;
}

/* ===== TOP BAR ===== */

.top{
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--red);
  border-bottom: 1px solid var(--redLine);
}

.top__inner{
  position: relative;
  min-height: 86px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: min-height .25s ease;
}

.top__nav{
  position: absolute;
  left: 12px;
  display: flex;
  gap: 18px;
  align-items: center;
  height: 100%;
  flex-wrap: wrap;
  max-width: 55vw;
  transition: bottom .25s ease, gap .25s ease;
}

.top__cta{
  position: absolute;
  right: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  height: 100%;
  transition: bottom .25s ease;
}

.top a{
  color: #000;
  text-decoration: none;
}

.top__nav a{
  font-size: 0.9rem;
  font-weight: 600;
}

.top__nav a:hover{
  text-decoration: underline;
}

.brand{
  text-decoration: none;
  transition: left .25s ease, top .25s ease, transform .25s ease;
}

.brand__name{
  font-family: "DM Mono", monospace;
  font-size: 3rem;
  letter-spacing: 0.02em;
  position: relative;
  transition: font-size .25s ease;
}

.brand__name::after{
  content: "_";
  margin-left: 6px;
  animation: blink 1s steps(1,end) infinite;
}

@keyframes blink{
  0%,50%{opacity:1;}
  51%,100%{opacity:0;}
}

.btn{
  font-size: 0.9rem;
  padding: 6px 12px;
  border: 1px solid #000;
  border-radius: 999px;
}

.btn:hover{
  background:#000;
  color:#fff;
}

/* ===== CONTENT ===== */

.content{
  padding: 32px 0 18px;
}

/* HERO */

.hero{
  display:grid;
  grid-template-columns:1fr var(--portraitW);
  gap:32px;
  align-items:start;
}

/* tekst */

.hero__text{
  max-width:520px;
}

/* intro */

.intro{
  font-size:1.2rem;
  line-height:1.9;
  letter-spacing:.01em;
  margin:0;
}

/* bio */

.bio{
  font-size:1rem;
  line-height:2.1;      /* belangrijk: grotere verticale spacing */
  margin-top:18px;      /* ruimte tussen intro en bio */
  letter-spacing:.01em;
}

/* PORTRET */

.portrait{
  margin:0;
}

.portrait img{
  width:var(--portraitW);
  height:var(--portraitH);
  object-fit:cover;
  border-radius:6px;
  filter:grayscale(100%);
  box-shadow:0 12px 32px rgba(0,0,0,.10);
}

/* SECTIONS */

.section{
  padding:22px 0 10px;
}

.section + .section{
  border-top:1px solid var(--rule);
  margin-top:18px;
  padding-top:24px;
}

.section h2{
  font-size:1rem;
  font-weight:600;
  margin-bottom:12px;
  color:var(--heading);
}

/* items */

.card{
  margin-bottom:14px;
}

.card__title{
  font-weight:600;
  color:var(--text);
  text-decoration:none;
}

.card__title:hover{
  text-decoration:underline;
}

.card__meta{
  color:var(--muted);
  font-size:.9rem;
  margin-top:4px;
}

.card__link{
  color:var(--muted);
  text-decoration:underline;
}

/* onderwijs */

.year{
  margin-bottom:16px;
}

.year h3{
  font-size:.95rem;
  margin-bottom:8px;
}

.teach{
  list-style:none;
  padding:0;
}

.teach li{
  margin:6px 0;
}

.teach a{
  color:var(--text);
  text-decoration:underline;
}

.note{
  color:var(--muted);
  font-size:.9rem;
}

/* footer */

.footer{
  padding:20px 0 60px;
  color:var(--muted);
}

/* responsive */

@media(max-width:720px){

.hero{
grid-template-columns:1fr;
}

.portrait img{
width:220px;
height:280px;
}

}

@media(max-width:1100px) and (min-width:561px){

.top__inner{
min-height: clamp(96px, calc(140px - 4vw), 118px);
align-items: stretch;
}

.brand{
position: absolute;
left: 50%;
top: clamp(6px, calc(-10px + 2vw), 12px);
transform: translateX(calc(-50% - clamp(0px, calc((1100px - 100vw) * .035), 18px)));
}

.brand__name{
font-size: clamp(2rem, calc(1rem + 2vw), 3rem);
white-space: nowrap;
}

.top__nav{
height: auto;
bottom: clamp(12px, calc(24px - 1vw), 18px);
max-width: calc(100% - 170px);
flex-wrap: nowrap;
}

.top__nav a{
white-space: nowrap;
}

.top__cta{
height: auto;
bottom: clamp(12px, calc(24px - 1vw), 18px);
}

}

@media(max-width:560px){

.top__inner{
min-height: 0;
padding: 10px 12px 12px;
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"brand"
"nav"
"cta";
gap: 8px;
align-items: center;
justify-content: stretch;
}

.brand{
grid-area: brand;
min-width: 0;
text-align: center;
}

.brand__name{
font-size: 2rem;
white-space: nowrap;
}

.top__nav{
grid-area: nav;
position: static;
height: auto;
max-width: none;
min-width: 0;
gap: 14px;
overflow-x: auto;
flex-wrap: nowrap;
padding-bottom: 2px;
scrollbar-width: none;
}

.top__nav::-webkit-scrollbar{
display: none;
}

.top__nav a{
font-size: .82rem;
white-space: nowrap;
}

.top__cta{
grid-area: cta;
position: static;
height: auto;
gap: 6px;
justify-content: center;
}

.btn{
font-size: .78rem;
padding: 4px 8px;
}

}

@media(max-width:380px){

.brand__name{
font-size: 1.65rem;
}

.top__nav{
gap: 10px;
}

.top__nav a{
font-size: .74rem;
}

.btn{
font-size: .74rem;
padding: 3px 8px;
}

}