/* Kommodoor · kommodoor.css
   GENERATED from tokens.json by tools/build.py. Edit tokens.json (values) or tools/components.css (components), then rebuild. */

:root {
  --kd-color-ink: #231F5C;
  --kd-color-pop: #D61A66;
  --kd-color-white: #FFFFFF;
  --kd-color-mist: #F0EFF4;
  --kd-color-line: #D7D7E2;
  --kd-color-pink: #F7D1E0;
  --kd-color-text-body: #4A4672;
  --kd-color-text-muted: #6E6A93;
  --kd-color-text-faint: #8784A6;
  --kd-color-text-on-ink: #CAC9D8;
  --kd-color-text-off: #CFCEDC;
  --kd-color-moment-apart-tint: #D5E3FF;
  --kd-color-moment-apart-deep: #0F2C6B;
  --kd-color-moment-together-tint: #FFE8A3;
  --kd-color-moment-together-deep: #574200;
  --kd-color-moment-sheet-tint: #F2A47C;
  --kd-color-moment-sheet-deep: #5B2107;
  --kd-font-family-display: 'Onest', sans-serif;
  --kd-font-family-body: 'Inter', sans-serif;
  --kd-font-weight-regular: 400;
  --kd-font-weight-medium: 500;
  --kd-font-weight-semibold: 600;
  --kd-font-weight-bold: 700;
  --kd-space-4: 4px;
  --kd-space-8: 8px;
  --kd-space-12: 12px;
  --kd-space-16: 16px;
  --kd-space-20: 20px;
  --kd-space-24: 24px;
  --kd-space-28: 28px;
  --kd-space-32: 32px;
  --kd-space-40: 40px;
  --kd-space-48: 48px;
  --kd-space-56: 56px;
  --kd-space-64: 64px;
  --kd-space-72: 72px;
  --kd-space-96: 96px;
  --kd-space-120: 120px;
  --kd-space-140: 140px;
  --kd-space-gutter-desktop: 96px;
  --kd-space-gutter-mobile: 20px;
  --kd-space-section-desktop: 120px;
  --kd-space-section-mobile: 56px;
  --kd-radius-base: 6px;
  --kd-radius-quarter-sm: 44px;
  --kd-radius-quarter-md: 140px;
  --kd-radius-quarter-lg: 200px;
  --kd-radius-quarter-xl: 320px;
  --kd-radius-avatar: 50%;
  --kd-border-screen: 1.5px;
  --kd-border-print: 1px;
  --kd-shadow-float: 0px 18px 40px 0px #231F5C1F;
  --kd-shadow-nav: 0px 10px 32px 0px #231F5C1F;
  --kd-motion-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --kd-motion-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --kd-motion-duration-fast: 300ms;
  --kd-motion-duration-base: 450ms;
  --kd-motion-duration-slow: 800ms;
  --kd-motion-duration-hero: 3000ms;
  --kd-motion-duration-drift: 12000ms;
  --kd-motion-distance-rise: 56px;
  --kd-motion-distance-nudge: 5px;
  --kd-motion-distance-lift: 6px;
  --kd-avatar-tile: var(--kd-color-moment-apart-tint);
  --kd-avatar-size-nav: 42px;
  --kd-avatar-size-button: 52px;
  --kd-avatar-size-mobile-nav: 38px;
  --kd-avatar-overflow: 1.25;
  --kd-avatar-hover-rise: 14%;
}

/* Type: one class per role; mobile sizes under 720px */
.kd-hero { font-family: var(--kd-font-family-display); font-size: 80px; font-weight: 700; line-height: 1.02; letter-spacing: -0.045em; }
.kd-h1 { font-family: var(--kd-font-family-display); font-size: 72px; font-weight: 700; line-height: 1.02; letter-spacing: -0.045em; }
.kd-h2 { font-family: var(--kd-font-family-display); font-size: 64px; font-weight: 700; line-height: 1.02; letter-spacing: -0.04em; }
.kd-h3 { font-family: var(--kd-font-family-display); font-size: 32px; font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; }
.kd-statement { font-family: var(--kd-font-family-display); font-size: 58px; font-weight: 600; line-height: 1.2; letter-spacing: -0.03em; }
.kd-quote { font-family: var(--kd-font-family-display); font-size: 32px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; }
.kd-lead { font-family: var(--kd-font-family-body); font-size: 22px; font-weight: 400; line-height: 1.55; letter-spacing: 0; }
.kd-body { font-family: var(--kd-font-family-body); font-size: 18px; font-weight: 400; line-height: 1.55; letter-spacing: 0; }
.kd-small { font-family: var(--kd-font-family-body); font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0; }
.kd-label { font-family: var(--kd-font-family-body); font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.08em; }
.kd-button { font-family: var(--kd-font-family-body); font-size: 16px; font-weight: 600; line-height: 1; letter-spacing: 0; }
@media (max-width: 720px) {
  .kd-hero { font-family: var(--kd-font-family-display); font-size: 44px; font-weight: 700; line-height: 1.02; letter-spacing: -0.045em; }
  .kd-h1 { font-family: var(--kd-font-family-display); font-size: 42px; font-weight: 700; line-height: 1.02; letter-spacing: -0.045em; }
  .kd-h2 { font-family: var(--kd-font-family-display); font-size: 36px; font-weight: 700; line-height: 1.05; letter-spacing: -0.04em; }
  .kd-h3 { font-family: var(--kd-font-family-display); font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; }
  .kd-statement { font-family: var(--kd-font-family-display); font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.03em; }
  .kd-quote { font-family: var(--kd-font-family-display); font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; }
  .kd-lead { font-family: var(--kd-font-family-body); font-size: 17px; font-weight: 400; line-height: 1.55; letter-spacing: 0; }
  .kd-body { font-family: var(--kd-font-family-body); font-size: 16px; font-weight: 400; line-height: 1.55; letter-spacing: 0; }
}

/* ==========================================================================
   Base
   ========================================================================== */

.kd, .kd-page {
  font-family: var(--kd-font-family-body);
  color: var(--kd-color-ink);
  background: var(--kd-color-white);
  -webkit-font-smoothing: antialiased;
}
.kd a { color: var(--kd-color-ink); }
.kd a:hover { color: var(--kd-color-pop); }
.kd-label { text-transform: uppercase; }
.kd-dot { color: var(--kd-color-pop); }                 /* the magenta full stop: <span class="kd-dot">.</span> */
.kd-mark-word { color: var(--kd-color-pop); }           /* max ONE highlighted word per view */

/* ==========================================================================
   Surfaces
   ========================================================================== */
.kd-card        { border-radius: var(--kd-radius-base); padding: var(--kd-space-40); background: var(--kd-color-mist); }
.kd-card--white { background: var(--kd-color-white); border: var(--kd-border-screen) solid var(--kd-color-line); }
.kd-card--ink   { background: var(--kd-color-ink); color: var(--kd-color-white); }
.kd-card--apart    { background: var(--kd-color-moment-apart-tint);    color: var(--kd-color-moment-apart-deep); }
.kd-card--together { background: var(--kd-color-moment-together-tint); color: var(--kd-color-moment-together-deep); }
.kd-card--sheet    { background: var(--kd-color-moment-sheet-tint);    color: var(--kd-color-moment-sheet-deep); }
/* the signature corner: one per view, always top-right */
.kd-corner-md { border-top-right-radius: var(--kd-radius-quarter-md); }
.kd-corner-lg { border-top-right-radius: var(--kd-radius-quarter-lg); }
.kd-corner-xl { border-top-right-radius: var(--kd-radius-quarter-xl); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.kd-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 16px/1 var(--kd-font-family-body);
  padding: 14px 22px; border-radius: var(--kd-radius-base);
  text-decoration: none; white-space: nowrap; border: 0; cursor: pointer;
}
.kd-btn--pop   { background: var(--kd-color-pop); color: #fff !important; }
.kd-btn--ink   { background: var(--kd-color-ink); color: #fff !important; }
.kd-btn--ghost { background: transparent; color: #fff !important; border: 1.5px solid rgba(255,255,255,.4); }
.kd-btn--big   { font-size: 18px; padding: 18px 28px; }

/* "Bel met Ruben": the only button with a face */
.kd-btn--ruben { padding: 4px 20px 4px 4px; gap: 14px; }
.kd-btn--ruben.kd-btn--big { padding: 4px 26px 4px 4px; }

/* ==========================================================================
   Avatar: Ruben cut-out on a soft-blue tile, head rises above the tile.
   Markup:
   <span class="kd-avatar" style="--s:52px" role="img" aria-label="Ruben">
     <span class="kd-avatar__clip"><img class="kd-avatar__img" src="assets/avatar/ruben-cutout-torso.png" alt=""></span>
   </span>
   ========================================================================== */
.kd-avatar {
  --s: 42px;
  position: relative; display: block; flex-shrink: 0;
  width: var(--s); height: var(--s);
  border-radius: var(--kd-radius-base); border-top-right-radius: calc(var(--s) / 2);
  background: var(--kd-color-moment-apart-tint);
}
.kd-avatar__clip {
  position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--s) * 1.6);
  overflow: hidden; border-radius: 0 0 var(--kd-radius-base) var(--kd-radius-base);
}
.kd-avatar__img {
  position: absolute; left: 50%; bottom: calc(var(--s) * -0.38);
  width: calc(var(--s) * 1.25); height: auto; transform: translateX(-50%);
  transition: transform var(--kd-motion-duration-base) var(--kd-motion-ease-out);
}
@media (hover: hover) { a:hover .kd-avatar__img { transform: translate(-50%, -14%); } }

/* ==========================================================================
   Moment chip (elk apart / twee dagen samen / één blad)
   ========================================================================== */
.kd-chip {
  display: inline-flex; align-items: center; gap: .35em; vertical-align: .12em;
  font-size: .62em; line-height: 1.2; letter-spacing: -.01em; white-space: nowrap;
  padding: .18em .45em; border-radius: var(--kd-radius-base);
}
.kd-chip--apart    { background: var(--kd-color-moment-apart-tint);    color: var(--kd-color-moment-apart-deep); }
.kd-chip--together { background: var(--kd-color-moment-together-tint); color: var(--kd-color-moment-together-deep); }
.kd-chip--sheet    { background: var(--kd-color-moment-sheet-tint);    color: var(--kd-color-moment-sheet-deep); }

/* ==========================================================================
   Motion: the rules
   1. One curve family (--kd-motion-ease-out / -inout). No bounce.
   2. Two kinds: PLAY ONCE (hero intro, first visit only) and FOLLOW SCROLL
      (rise-in, full-stop drop, statement colouring, closing block).
   3. Hover details only on devices that hover.
   4. Only one thing moves on its own: the slow drift in the closing block.
   5. prefers-reduced-motion: everything is simply there, nothing moves.
   ========================================================================== */

/* -- hover details -- */
.kd-arrow { display: inline-block; transition: transform var(--kd-motion-duration-fast) var(--kd-motion-ease-out); }
a:hover .kd-arrow { transform: translateX(var(--kd-motion-distance-nudge)); }
.kd-lift { transition: transform var(--kd-motion-duration-base) var(--kd-motion-ease-out), box-shadow var(--kd-motion-duration-base) ease; }
@media (hover: hover) {
  .kd-lift:hover { transform: translateY(calc(var(--kd-motion-distance-lift) * -1)); box-shadow: var(--kd-shadow-float); }
  .kd-lift:hover .kd-shape { transform: rotate(-8deg); }
}
.kd-shape { transition: transform 500ms var(--kd-motion-ease-out); }
.kd-zoom { transition: transform var(--kd-motion-duration-slow) var(--kd-motion-ease-out); }
a:hover .kd-zoom { transform: scale(1.05); }

/* -- FAQ: <details class="kd-faq"><summary>…<span class="kd-plus"><span class="kd-plus__v"></span></span></summary><div class="kd-faq__a">…</div></details> -- */
.kd-faq summary { list-style: none; cursor: pointer; }
.kd-faq summary::-webkit-details-marker { display: none; }
.kd-plus { position: relative; flex-shrink: 0; width: 18px; height: 18px; }
.kd-plus::before, .kd-plus__v { content: ''; position: absolute; background: currentColor; border-radius: 2px; }
.kd-plus::before { left: 0; right: 0; top: 8px; height: 2px; }
.kd-plus__v { top: 0; bottom: 0; left: 8px; width: 2px; transition: transform 350ms var(--kd-motion-ease-out); }
.kd-faq[open] .kd-plus { color: var(--kd-color-pop); }
.kd-faq[open] .kd-plus__v { transform: scaleY(0); }
.kd-faq[open] .kd-faq__a { animation: kd-faq-in var(--kd-motion-duration-base) var(--kd-motion-ease-out) both; }
@keyframes kd-faq-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* -- ambient drift (closing block only) -- */
.kd-drift { animation: kd-drift var(--kd-motion-duration-drift) ease-in-out infinite alternate; }
@keyframes kd-drift { from { transform: translate(0, 0) rotate(0); } to { transform: translate(-26px, 18px) rotate(-5deg); } }

/* -- follow scroll (needs scroll-driven animations; otherwise content is simply visible) -- */
@supports (animation-timeline: view()) {
  /* rise-in for cards; stagger with style="--d:0|1|2" */
  .kd-rise { animation: kd-rise linear both; animation-timeline: view();
             animation-range: entry calc(var(--d, 0) * 12%) entry calc(70% + var(--d, 0) * 12%); }
  @keyframes kd-rise { from { opacity: 0; transform: translateY(var(--kd-motion-distance-rise)); } to { opacity: 1; transform: none; } }

  /* the full stop drops onto its heading */
  .kd-dot--drop { display: inline-block; animation: kd-dot-drop linear both; animation-timeline: view(); animation-range: entry 80% cover 40%; }
  @keyframes kd-dot-drop { 0% { opacity: 0; transform: translateY(-.7em) scale(.5); } 55%, 100% { opacity: 1; transform: none; } }

  /* statement that colours in word by word:
     <section style="view-timeline-name: --kd-statement"> … <span class="kd-word" style="animation-range: cover 22% cover 25%">word</span> …
     (the render script / component spreads the ranges from 22% to 62%) */
  .kd-word { animation: kd-word linear both; animation-timeline: --kd-statement; }
  @keyframes kd-word { from { color: var(--kd-color-text-off); } to { color: var(--kd-color-ink); } }
  .kd-word-chip { animation: kd-word-chip linear both; animation-timeline: --kd-statement; }
  @keyframes kd-word-chip { from { opacity: .35; filter: grayscale(1); transform: scale(.94); } to { opacity: 1; filter: none; transform: none; } }

  /* closing block: corner opens, second line arrives, avatar peeks once */
  .kd-corner-open { animation: kd-corner-open linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
  @keyframes kd-corner-open { from { border-top-right-radius: var(--kd-radius-base); } }
  .kd-line-in { display: inline-block; animation: kd-line-in linear both; animation-timeline: view(); animation-range: entry 60% cover 42%; }
  @keyframes kd-line-in { from { opacity: 0; transform: translateY(.4em); } }
  .kd-peek .kd-avatar__img { animation: kd-peek linear both; animation-timeline: view(); animation-range: cover 42% cover 62%; }
  @keyframes kd-peek { 0%, 100% { transform: translate(-50%, 0); } 45%, 60% { transform: translate(-50%, -16%); } }
}

/* -- hero intro (play once, first visit): see reference/hero-intro.html for the full choreography -- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}