:root {
     --bg: #ffffff;
     --pink-pastel: #ffd9e8;
     --pink-strong: #ff6faa;
     --accent: #ff6faa;
     --text: #121212;
     --muted: #666;
     --card: #fff0f5;
     --gap: 24px;
     --radius: 8px;
     --container: 1100px;
 }

 * {
     box-sizing: border-box
 }

 html,
 body {
     height: 100%
 }

 body {
     background: linear-gradient(to right,
             #f8c8dc 10%,
             /* pastelroze links */
             white 10%,
             white 90%,
             #f8c8dc 90%);
     /* pastelroze rechts */
     background-attachment: fixed;
     margin: 0;
     padding: 0;
 }


 .video-wrapper {
     display: flex;
     justify-content: center;
     margin: 40px auto;
 }

 .video-wrapper video {
     width: 80%;
     /* past zich aan je scherm aan */
     max-width: 1000px;
     /* nooit breder dan 800px */
     border-radius: 12px;
     /* afgeronde hoeken */
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
     height: auto;
     /* behoudt de juiste verhoudingen */
     border: 10px solid var(--pink-strong)
 }

 body {
     margin: 0;
     font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial;
     color: var(--text);
     -webkit-font-smoothing: antialiased;
     line-height: 1.45;
 }


 a {
     color: inherit;
     text-decoration: none
 }

 .wrap {
     max-width: var(--container);
     margin: 0 auto;
     padding: 28px
 }

 /* NAV */
 header {
     position: sticky;
     top: 0;
     z-index: 40;
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6));
     backdrop-filter: blur(4px);
     border-bottom: 1px solid rgba(0, 0, 0, 0.04)
 }

 .nav-inner {
     max-width: var(--container);
     margin: 0 auto;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 10px 20px;
     gap: 12px
 }

 .brand {
     display: flex;
     align-items: center;
     gap: 12px
 }

 .logo {
     width: 56px;
     height: 56px;
     border-radius: 6px;
     background: linear-gradient(180deg, var(--pink-strong), #ff9fc7);
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-weight: 700;
     font-family: Playfair Display, serif;
     font-size: 20px;
     box-shadow: 0 6px 20px rgba(255, 105, 150, 0.12)
 }

 nav {
     display: flex;
     gap: 10px;
     align-items: center
 }

 nav a {
     padding: 8px 12px;
     border-radius: 6px;
     font-weight: 600;
     color: var(--muted);
     font-size: 14px
 }

 nav a:hover {
     background: var(--pink-pastel);
     color: var(--text)
 }

 .cta {
     background: var(--pink-strong);
     color: white;
     padding: 8px 12px;
     border-radius: 6px;
     font-weight: 700
 }

 /* Hero */
 .hero {
     display: flex;
     align-items: center;
     gap: 28px;
     padding: 60px 0;
     height: 500px;


 }

 .hero-left {
     flex: 1;
     background-color: #fff2f7;
     box-shadow: 0 12px 30px rgba(255, 110, 160, 0.12);
 }

 .eyebrow {
     font-family: Playfair Display, serif;
     color: #ff6ca4;
     font-size: 150px;
     font-weight: 25px;
     letter-spacing: 1p;
     height: 290px;
     box-shadow: 0 12px 30px rgba(255, 110, 160, 0.12)
 }

 .gallery {
     display: flex;
     justify-content: center;
     align-items: flex-start;
     gap: 30px;
     flex-wrap: nowrap;
     margin: 40px auto;
     text-align: center;
 }

 /* algemene stijl */
 .gallery img {
     border-radius: 12px;
     object-fit: cover;
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
     transition: transform 0.3s ease;
     border: 10px solid var(--pink-strong)
 }

 /* hover effect */
 .gallery img:hover {
     transform: scale(1.05);
 }

 /* liggende beelden (1 en 3) */
 .gallery img.wide {
     width: 340px;
     height: 240px;
     transform: translateY(+45px);
     border: 10px solid var(--pink-strong)
         /* hoger zetten */
 }

 /* staand beeld (middelste) */
 .gallery img.tall {
     width: 280px;
     height: 420px;
     align-items: center;
     transform: translateY(-45px);
     border: 10px solid var(--pink-strong)
         /* hoger zetten */
 }

 /* responsief gedrag op mobiel */
 @media (max-width: 900px) {
     .gallery {
         flex-wrap: wrap;
     }

     .gallery img.wide,
     .gallery img.tall {
         width: 90%;
         height: auto;
     }
 }

 /* PROJECT GALLERY */
 .project-gallery {
     display: flex;
     justify-content: center;
     align-items: flex-start;
     gap: 18px;
     flex-wrap: wrap;
     margin: 40px auto;
     max-width: 1100px;
 }

 .project-gallery img {
     width: 200px;
     height: 280px;
     object-fit: cover;
     border-radius: 12px;
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease;
 }

 .project-gallery img:hover {
     transform: scale(1.05);
 }

 /* Responsiveness: zorg dat ze op mobiel netjes onder elkaar komen */
 @media (max-width: 900px) {
     .project-gallery img {
         width: 45%;
         height: auto;
     }
 }

 @media (max-width: 600px) {
     .project-gallery img {
         width: 90%;
     }
 }

 h1 {
     font-family: Playfair Display, serif;
     font-size: 44px;
     margin: 8px 0 6px;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
     height: 70px;
     background-color: #ff6ca4;
     color: #ffffff;
 }

 p.lead {
     color: var(--muted);
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
     background-color: #ff6ca4;
     color: #ffffff;
 }

 .hero-right {
     width: 300px;
 }


 .title-band {
     background: linear-gradient(90deg, var(--pink-pastel), #ffeef6);
     padding: 18px;
     border-radius: 6px;
     border-left: 6px solid var(--pink-strong);
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 700
 }

 /* Sections */
 section {
     padding: 36px 0;
     border-bottom: 1px solid rgba(0, 0, 0, 0.03)
 }

 .section-inner {
     display: grid;
     grid-template-columns: 1fr 420px;
     gap: 24px;
     align-items: start
 }


 .about-text {
     padding: 18px;
     background: linear-gradient(180deg, #fff0f5, white);
     border-radius: 8px;
     border: 1px solid rgba(255, 110, 160, 0.06)
 }

 .about-text h2 {
     margin-top: 0;
     font-family: Playfair Display, serif;
     color: var(--pink-strong)
 }

 /* Projects vertical list */
 .projects {
     display: grid;
     gap: 22px
 }

 .project {
     display: grid;
     grid-template-columns: 220px 1fr;
     gap: 18px;
     align-items: center;
     background: white;
     padding: 12px;
     border-radius: 10px;
     box-shadow: 0 8px 24px rgba(17, 9, 24, 0.03);
     border: 1px solid rgba(255, 110, 160, 0.05);
 }

 .project .thumb {
     height: 160px;
     border-radius: 6px;
     overflow: hidden;
     cursor: pointer;
     background-size: cover;
     background-position: center;
     border: 6px solid var(--pink-pastel)
 }

 .project .meta h3 {
     margin: 0 0 8px;
     font-size: 20px;
     color: var(--pink-strong);
     font-family: Playfair Display, serif
 }

 .project .meta p {
     margin: 0;
     color: var(--muted)
 }

 .project .meta .more {
     margin-top: 10px;
     font-weight: 700;
     color: var(--pink-strong);
     font-size: 13px
 }

 /* Grid variant for smaller screens */
 @media (max-width:980px) {
     .section-inner {
         grid-template-columns: 1fr;
         gap: 18px
     }

     .project {
         grid-template-columns: 1fr;
         align-items: start
     }

     .project .thumb {
         height: 220px
     }
 }

 /* Contact */
 .contact-grid {
     display: flex;
     gap: 18px;
     align-items: center;
     flex-wrap: wrap
 }

 .contact-card {
     flex: 1;
     min-width: 240px;
     padding: 18px;
     border-radius: 8px;
     background: linear-gradient(180deg, #fff, #fff0f7);
     border: 1px solid rgba(255, 110, 160, 0.05)
 }

 .socials {
     display: flex;
     gap: 10px;
     padding-top: 6px
 }

 .skillbar {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
     margin-top: 12px
 }

 .chip {
     background: var(--pink-pastel);
     padding: 8px 10px;
     border-radius: 7px;
     font-weight: 700;
     color: var(--text)
 }

 footer {
     padding: 30px 0;
     text-align: center;
     color: var(--muted);
     font-size: 14px
 }