/* =========================================================================
   VERSIE 1 · "Het schakelbord"
   Art direction: een installatiebedrijf leest zijn werk van een paneel af,
   niet van een folder. Vandaar een staande zijbalk als menu, harde lijnen,
   en het geel van zijn eigen logo als signaallijn in plaats van als vulling.

   BEWUST ANDERS DAN DE REST VAN HET PORTFOLIO. Gemeten met
   `node .claude/skills/design/audit/portfolio.mjs`, die uitwees dat zes van
   de elf eerste versies een hero met beeld rechts hadden, acht tweede versies
   een kop zonder beeld, bijna elke pagina met `hero > kaartraster` begon en
   bijna elke tweede versie helemaal geen menu had. Deze versie wijkt daar op
   vier punten van af:
     1. het menu is een STAANDE zijbalk, niet een balk bovenin
     2. de hero zet de kop bovenaan en het beeld als band eronder
     3. het accent is een lijn en een blokje, nooit een gevulde knop
     4. de diensten staan als definitielijst, niet als kaartraster

   TOKENS, gemeten voordat een component ze gebruikte:
     ink   #16150f op papier 15,9 · wit 17,3 · GEEL 12,7
     muted #55544c op papier  7,0 · wit  7,6
     paper #f4f4f1 op ink    15,9
   Het geel blijft op licht uitsluitend vulling of lijn, nooit letterkleur.
   ========================================================================= */

#version-v1 {
  --paper: #f4f4f1;
  --card: #ffffff;
  --ink: #16150f;
  --ink-soft: #2a2822;
  --muted: #55544c;
  --line: #dcdbd3;
  --yellow: #f5e500;

  --ui: "Chivo", system-ui, sans-serif;
  --rail: 236px;

  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 16.5px;
  line-height: 1.6;
}

#version-v1 ::selection { background: var(--yellow); color: var(--ink); }

/* ---------- het raamwerk: zijbalk plus inhoudskolom --------------------- */

.v1-frame { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); }

.v1-rail {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 26px 22px;
  border-right: 2px solid var(--ink);
  background: var(--paper);
}

.v1-brand { text-decoration: none; display: block; margin-bottom: 30px; }

.v1-brand__name {
  display: block;
  font-weight: 900;
  font-size: 27px;
  letter-spacing: 0.02em;
  line-height: 1;
}

.v1-brand__name em { font-style: normal; background: var(--yellow); padding: 0 2px; }

.v1-brand__sub {
  display: block;
  margin-top: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Het menu. Staand, met het pictogram uit zijn eigen logo per regel. */
.v1-menu { display: flex; flex-direction: column; }

.v1-menu a {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 46px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: 15.5px;
  font-weight: 700;
  text-decoration: none;
}

.v1-menu a:last-child { border-bottom: 1px solid var(--line); }
.v1-menu a svg { width: 17px; height: 17px; flex: none; color: var(--muted); }
.v1-menu a:hover { color: var(--ink); }
.v1-menu a:hover svg { color: var(--ink); }

/* het gele blokje schuift bij hover naar binnen, als een schakelaar */
.v1-menu a::before {
  content: "";
  width: 0;
  height: 12px;
  background: var(--yellow);
  transition: width 0.16s ease;
}

.v1-menu a:hover::before { width: 12px; }

.v1-rail__foot { margin-top: auto; font-size: 12.5px; color: var(--muted); }

.v1-body { min-width: 0; }
.v1-inner { padding: clamp(26px, 4vw, 64px) clamp(20px, 4vw, 64px); max-width: 1080px; }

/* ---------- tekst -------------------------------------------------------- */

.v1-h2 {
  font-weight: 900;
  font-size: clamp(26px, 3.6vw, 40px);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.v1-eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--yellow);
  display: inline-block;
}

/* ---------- knop: omlijnd, niet gevuld ----------------------------------
   Het portfolio zat vol met gevulde accentknoppen. Deze is omlijnd in inkt,
   met het geel als schuif eronder. --------------------------------------- */

.v1-btn {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 14px 26px;
  border: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  position: relative;
}

.v1-btn::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: -6px;
  height: 6px;
  background: var(--yellow);
}

.v1-btn:hover { background: var(--ink); color: var(--paper); }
.v1-btn--plain::after { display: none; }
.v1-btn--plain { border-color: var(--line); }

/* ---------- hero: kop boven, beeldband eronder --------------------------- */

.v1-hero { padding-bottom: clamp(24px, 3vw, 40px); }

.v1-hero__title {
  font-weight: 900;
  font-size: clamp(38px, 6.6vw, 78px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  max-width: 16ch;
}

.v1-hero__lead {
  margin-top: 20px;
  font-size: clamp(16.5px, 1.6vw, 19px);
  color: var(--muted);
  max-width: 52ch;
}

.v1-hero__actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px 18px; }

.v1-hero__band { margin-top: clamp(28px, 4vw, 52px); position: relative; }

/* Alleen het EERSTE beeld vult de band. Zonder deze scoping pakte de vlam
   hieronder ook width:100% mee en werd een 520px bestand tot 965px uitgerekt;
   de portfoliocheck image-upscaled ving dat. */
.v1-hero__band > img:first-child { width: 100%; height: auto; border: 2px solid var(--ink); }

.v1-hero__flame {
  position: absolute;
  left: -12px;
  bottom: -22px;
  width: clamp(74px, 8vw, 108px);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.35));
}

/* ---------- diensten als definitielijst ---------------------------------- */

.v1-block { padding-block: clamp(38px, 5vw, 72px); border-top: 2px solid var(--ink); }

.v1-defs { margin-top: 26px; }

.v1-def {
  display: grid;
  grid-template-columns: 30px minmax(0, 22ch) minmax(0, 1fr);
  gap: 14px clamp(16px, 2.4vw, 34px);
  align-items: start;
  padding-block: 22px;
  border-top: 1px solid var(--line);
}

.v1-def:last-child { border-bottom: 1px solid var(--line); }

.v1-def__mark { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: var(--yellow); }
.v1-def__mark svg { width: 17px; height: 17px; color: var(--ink); }

.v1-def__t { font-weight: 900; font-size: clamp(19px, 2.2vw, 25px); letter-spacing: -0.02em; line-height: 1.14; }
.v1-def__d { min-width: 0; color: var(--muted); }
.v1-def__d p + p { margin-top: 10px; }

/* ---------- comfort: beeld naast tekst, op inkt -------------------------- */

.v1-dark { background: var(--ink); color: var(--paper); padding-block: clamp(38px, 5vw, 72px); }
.v1-dark .v1-eyebrow { color: #b9b8b0; border-bottom-color: var(--yellow); }
.v1-dark p { color: #b9b8b0; }

.v1-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(22px, 3.4vw, 48px);
  align-items: center;
  margin-top: 24px;
}

.v1-split__copy { min-width: 0; }
.v1-split__copy p { margin-top: 14px; max-width: 50ch; }
.v1-split__fig { min-width: 0; }
.v1-split__fig img { width: 100%; height: auto; }

/* ---------- contact ------------------------------------------------------ */

.v1-fields { margin-top: 24px; border-top: 1px solid var(--line); max-width: 560px; }

.v1-fields > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}

.v1-fields dt {
  flex: none;
  width: 96px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.v1-fields dd { flex: 1 1 140px; min-width: 0; }

.v1-blank {
  display: block;
  height: 2px;
  width: min(220px, 100%);
  background: repeating-linear-gradient(90deg, var(--muted) 0 10px, transparent 10px 18px);
}

.v1-note { margin-top: 16px; font-size: 14.5px; color: var(--muted); max-width: 48ch; }

/* ---------- voet ---------------------------------------------------------- */

.v1-foot {
  border-top: 2px solid var(--ink);
  padding: 22px clamp(20px, 4vw, 64px);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14.5px;
  color: var(--muted);
}

.v1-foot a { color: var(--ink); font-weight: 700; border-bottom: 3px solid var(--yellow); text-decoration: none; }

/* ---------- reveal --------------------------------------------------------
   Alleen opacity en transform (regel 7), achter een .js klasse die alleen
   wordt gezet als beweging gewenst is (regel 8).
   -------------------------------------------------------------------------- */

.js [data-rise] { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.js [data-rise].is-in { opacity: 1; transform: none; }

/* ---------- breekpunten ----------------------------------------------------
   Onder 960 px wordt de staande balk een gewone kop met een horizontaal
   scrollend menu. Dat blijft een echt menu, alleen liggend.
   -------------------------------------------------------------------------- */

@media (max-width: 960px) {
  .v1-frame { grid-template-columns: minmax(0, 1fr); }

  .v1-rail {
    position: static;
    height: auto;
    flex-direction: column;
    padding: 18px clamp(18px, 4vw, 30px);
    border-right: 0;
    border-bottom: 2px solid var(--ink);
  }

  .v1-brand { margin-bottom: 16px; }

  .v1-menu {
    flex-direction: row;
    gap: 18px;
    overflow-x: auto;
    max-width: 100%;
    min-width: 0;
    padding-bottom: 4px;
  }

  .v1-menu a {
    border-top: 0;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    min-height: 44px;
    padding: 6px 0;
  }

  .v1-menu a:last-child { border-bottom: 3px solid transparent; }
  .v1-menu a::before { display: none; }
  .v1-menu a:hover { border-bottom-color: var(--yellow); }
  .v1-menu a svg { display: none; }
  .v1-rail__foot { display: none; }

  .v1-def { grid-template-columns: 30px minmax(0, 1fr); }
  .v1-def__d { grid-column: 2; }
}

@media (max-width: 560px) {
  .v1-hero__actions .v1-btn { width: 100%; justify-content: center; }
  .v1-fields dt { width: 100%; }
}