/* Kleurenmonster: nachtblauw, zachte kleurvlekken en sterren uit de vorige site */
:root { --brand: #ffd23f; --brand-soft: #0d0d18; --brand-ink: #f5f5f5; --c1: #ff6b9d; --c2: #ffd23f; --c3: #06b6d4; --c4: #84cc16; --c5: #a855f7; }
body { background: #0d0d18; }
.project { overflow: hidden; padding-top: 0; }
.km-hero { position: relative; padding-top: clamp(40px, 8vh, 96px); padding-bottom: clamp(48px, 8vh, 96px); }
.km-bg-fx { margin: 0 calc(-1 * var(--gutter)); }
.p-kind, .p-deck em, .p-link { color: var(--brand); }
.km-bg-fx { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.km-blob { position: absolute; border-radius: 50%; filter: blur(100px); opacity: .4; animation: km-float 11s ease-in-out infinite; }
.km-blob.b1 { width: 45%; height: 55%; top: -15%; left: -10%; background: var(--c1); }
.km-blob.b2 { width: 35%; height: 45%; top: 30%; right: 10%; background: var(--c2); animation-delay: -2s; }
.km-blob.b3 { width: 38%; height: 50%; bottom: -10%; right: -10%; background: var(--c3); animation-delay: -4s; }
.km-blob.b4 { width: 30%; height: 40%; top: 10%; right: -8%; background: var(--c4); animation-delay: -6s; }
@keyframes km-float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -40px) scale(1.1); } 66% { transform: translate(-25px, 20px) scale(.92); } }
.km-star { position: absolute; color: var(--brand); font-size: 16px; z-index: 2; text-shadow: 0 0 20px var(--brand); animation: km-twinkle 3.4s ease-in-out infinite; }
.km-star.s1 { top: 10%; left: 18%; font-size: 24px; }
.km-star.s2 { top: 22%; left: 38%; animation-delay: .6s; }
.km-star.s3 { top: 55%; left: 8%; animation-delay: 1.2s; font-size: 22px; color: var(--c1); text-shadow: 0 0 20px var(--c1); }
.km-star.s4 { bottom: 18%; left: 32%; animation-delay: .3s; font-size: 26px; color: var(--c3); text-shadow: 0 0 20px var(--c3); }
.km-star.s5 { top: 70%; left: 22%; animation-delay: 1.8s; color: var(--c4); text-shadow: 0 0 20px var(--c4); }
@keyframes km-twinkle { 0%, 100% { opacity: .25; transform: scale(.85) rotate(0deg); } 50% { opacity: 1; transform: scale(1.25) rotate(180deg); } }
.km-visual { display: grid; place-items: center; }
.km-img { width: 100%; max-width: 520px; height: auto; filter: drop-shadow(0 30px 60px rgba(0,0,0,.55)) drop-shadow(0 0 80px rgba(255,210,63,.18)); animation: km-breathe 7s ease-in-out infinite; }
@keyframes km-breathe { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-14px) rotate(1deg); } }
.p-name { text-shadow: 0 2px 16px rgba(0,0,0,.5); font-size: clamp(52px, 7.4vw, 124px); }
.p-note { font-size: 15px; line-height: 1.6; color: rgba(245,245,245,.8); margin-bottom: 36px; border-left: 2px solid var(--brand); padding-left: 18px; }
@media (max-width: 900px) {
  .km-img { max-width: 320px; }
  .km-star.s3, .km-star.s4, .km-star.s5 { display: none; }
}

/* De reis: zelfde opbouw als de BHAG-pagina op driesbultynck.com */
.km-journey { position: relative; z-index: 4; max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(72px, 11vh, 128px); padding-top: clamp(64px, 10vh, 112px); }
.km-journey::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(245,245,245,.28), transparent); }
.km-h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(48px, 7vw, 104px); line-height: .92; letter-spacing: -.035em; }
.km-h2 em { font-style: italic; color: var(--brand); }
.km-h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 4.4vw, 60px); line-height: .98; letter-spacing: -.03em; margin: 14px 0 22px; max-width: 18ch; }
.km-date { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #0d0d18; background: var(--brand); padding: 5px 10px; border-radius: 999px; }
.km-journey p { color: rgba(245,245,245,.86); max-width: 64ch; margin-bottom: 16px; font-size: 17px; line-height: 1.75; }
.km-journey p em { color: #f5f5f5; font-family: var(--serif); font-size: 1.12em; }

.km-story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.km-story-head { position: sticky; top: 24px; }
.km-story-head .p-kind { color: var(--brand); }
.km-tagline { font-family: var(--serif); font-size: clamp(22px, 2vw, 28px) !important; line-height: 1.35 !important; color: #f5f5f5 !important; margin-top: 24px; }
.km-story-body p:first-child::first-letter { float: left; font-family: var(--serif); font-size: 4.2em; line-height: .82; padding: 6px 10px 0 0; color: var(--c1); }

.km-show { display: flex; flex-direction: column; align-items: flex-start; }
.km-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; width: 100%; }
.km-journey img { width: 100%; height: auto; display: block; border-radius: 18px; cursor: zoom-in; background: rgba(245,245,245,.06); box-shadow: 0 18px 40px rgba(0,0,0,.35); transition: transform .3s ease; }
.km-journey img:hover { transform: translateY(-4px) rotate(-.6deg); }
.km-single { max-width: 720px; margin-top: 16px; }

.km-tbd { position: relative; text-align: center; }
.km-tbd span { position: relative; z-index: 1; display: inline-block; padding: 14px 30px; border: 2px dashed rgba(255,210,63,.7); border-radius: 999px; background: #0d0d18; font-family: var(--serif); font-style: italic; font-size: 24px; color: #f5f5f5; }
.km-tbd::before { content: ""; position: absolute; left: 50%; top: -40px; bottom: -40px; width: 2px; transform: translateX(-1px); background: linear-gradient(transparent, rgba(255,210,63,.6), transparent); }

.km-timeline { position: relative; display: flex; flex-direction: column; gap: 64px; padding-left: 44px; }
.km-timeline::before { content: ""; position: absolute; left: 12px; top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--c2), var(--c1), var(--c3), var(--c4), var(--c5)); opacity: .8; }
.km-step { position: relative; }
.km-step h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3vw, 42px); line-height: 1.02; letter-spacing: -.025em; margin: 14px 0 14px; }
.km-dot { position: absolute; left: -42px; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 5px #0d0d18, 0 0 22px rgba(255,210,63,.75); }
.km-step:nth-child(3n+2) .km-dot { background: var(--c1); box-shadow: 0 0 0 5px #0d0d18, 0 0 22px rgba(255,107,157,.75); }
.km-step:nth-child(3n) .km-dot { background: var(--c3); box-shadow: 0 0 0 5px #0d0d18, 0 0 22px rgba(6,182,212,.75); }
.km-stack { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; max-width: 420px; }
.km-step > img { margin-top: 18px; max-width: 520px; }
@media (min-width: 900px) {
  .km-timeline { padding-left: 0; }
  .km-timeline::before { left: 50%; transform: translateX(-1px); }
  .km-step { width: 50%; padding-right: 56px; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
  .km-step p { margin-left: auto; }
  .km-step:nth-child(even) { margin-left: 50%; padding-right: 0; padding-left: 56px; align-items: flex-start; text-align: left; }
  .km-step:nth-child(even) p { margin-left: 0; }
  .km-dot { left: auto; right: -11px; }
  .km-step:nth-child(even) .km-dot { right: auto; left: -11px; }
}

.km-sub { position: relative; overflow: hidden; border-radius: 28px; padding: clamp(32px, 5vw, 64px); background: linear-gradient(135deg, rgba(255,107,157,.22), rgba(6,182,212,.18) 55%, rgba(132,204,22,.2)); border: 1px solid rgba(245,245,245,.16); }
.km-sub .km-h3 { margin-top: 0; }
.km-form { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; max-width: 580px; }
.km-form input { flex: 1 1 240px; min-width: 0; padding: 16px 20px; border-radius: 999px; border: 1.5px solid rgba(245,245,245,.4); background: rgba(13,13,24,.7); color: #f5f5f5; font: inherit; font-size: 16px; }
.km-form input::placeholder { color: rgba(245,245,245,.6); }
.km-form input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(255,210,63,.3); }
.km-form button { padding: 16px 26px; border-radius: 999px; border: 0; background: var(--brand); color: #0d0d18; font: inherit; font-weight: 600; font-size: 16px; cursor: pointer; }
.km-form button:hover { box-shadow: inset 0 0 0 2px #0d0d18; }
.km-form button:disabled { opacity: .7; cursor: default; }
.km-thanks { margin-top: 18px; padding: 16px 20px; border-radius: 16px; background: rgba(13,13,24,.6); color: #f5f5f5; }
.km-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.km-lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(13,13,24,.95); display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.km-lightbox[hidden] { display: none; }
.km-lightbox img { max-width: 95vw; max-height: 92vh; object-fit: contain; border-radius: 14px; }
@media (max-width: 900px) {
  .km-story { grid-template-columns: minmax(0, 1fr); }
  .km-story-head { position: static; }
  .km-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .km-stack, .km-step > img { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .km-journey img:hover { transform: none; } }