/* =========================================================================
   VERSIE 1 · "Van de dakrand naar de traptrede"

   Het idee komt niet van mij maar uit hun eigen beeldbank. De site van
   Harinck is één archief van eigen werk, gegroepeerd per vak, en in bijna
   elke buitenfoto staat het middel om erbij te komen: een ladder, een
   rolsteiger, een rupshoogwerker. Dat is wat dit bedrijf werkelijk verkoopt:
   ze komen aan elk deel van het huis, van de dakrand tot de onderste
   traptrede. De pagina is daarom een afdaling, en de duimstok links is geen
   versiering maar de maatlat waarlangs die afdaling loopt.

   TOKENS, gemeten tegen élk vlak waarop ze kunnen landen (LESSONS regel 1),
   vóórdat een component ze gebruikte:
     paper #f2f4f7 op ink 16,44 · ink2 14,81 · ink3 13,07
     dim   #a7b0bd op ink  8,27 · ink2  7,45 · ink3  6,58
     dim2  #8d97a5 op ink  6,13 · ink2  5,52 · ink3  4,87
     blue  #7cb3ea op ink  8,19 · ink2  7,38 · ink3  6,51
     green #58c193 op ink  8,16 · ink2  7,35 · ink3  6,49
     ink   #14161a op blue 8,19 (dus zwarte tekst op de gevulde knop)
   De pagina is donker omdat het logo dat zelf is: een zwarte H met een waaier
   van kleur erachter. Op zwart doen de foto's het werk en is de kleur een
   accent, precies zoals in dat logo.
   ========================================================================= */

#version-v1 {
  --ink: #14161a;
  --ink-2: #1d2026;
  --ink-3: #262a31;
  --line: #2e333c;
  --line-2: #3a4049;

  --paper: #f2f4f7;
  --dim: #a7b0bd;
  --dim-2: #8d97a5;
  --blue: #7cb3ea;
  --blue-deep: #4d84bb;
  --green: #58c193;

  --ui: "Archivo", system-ui, sans-serif;
  --mono: "Roboto Mono", ui-monospace, monospace;
  --gut: clamp(16px, 4.2vw, 56px);
  --maxw: 1240px;

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

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

.v1-shell {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gut);
}

/* Eén mono-label, overal waar de pagina maat aangeeft. */
.v1-tag {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ---------- kop ---------------------------------------------------------- */

.v1-top {
  border-bottom: 1px solid var(--line);
  background: var(--ink);
}

.v1-top__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 26px;
  padding-block: 14px;
}

/* Zonder script staat het menu open en in de flow; dan hoort het onder de
   kopregel te vallen in plaats van ernaast te dringen. */
html:not(.has-js) .v1-top__inner .burger-nav { width: 100%; }

.v1-logo { display: flex; align-items: baseline; gap: 8px; text-decoration: none; flex: none; }
.v1-logo__mark { font-weight: 800; font-size: 21px; letter-spacing: -0.02em; color: var(--paper); }
.v1-logo__sub { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim-2); }

.v1-menu { display: flex; gap: 4px 24px; }

.v1-menu a {
  font-size: 15px;
  font-weight: 600;
  color: var(--paper);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}

.v1-menu a:hover { color: var(--blue); border-bottom-color: var(--blue); }

/* In een gesloten <details> landt focus niet, dus de navigatie krijgt een
   expliciete ring bovenop de globale regel. */
.v1-menu a:focus { outline: 3px solid var(--paper); outline-offset: 2px; }

/* ---------- hero ---------------------------------------------------------
   Kop boven, daaronder een drieluik dat traps gewijs afdaalt: de eerste foto
   staat hoog, de tweede lager, de derde het laagst. De afdaling is dus al in
   het eerste scherm te zien en niet alleen te lezen.
   ------------------------------------------------------------------------- */

.v1-hero { padding-block: clamp(34px, 5.4vw, 76px) clamp(30px, 4vw, 54px); }

.v1-hero__kick { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.v1-hero__kick b { color: var(--blue); font-weight: 500; }

.v1-hero__title {
  margin-top: 16px;
  max-width: 15ch;
  font-weight: 800;
  font-size: clamp(37px, 7.6vw, 88px);
  line-height: 1.0;
  letter-spacing: -0.04em;
}

.v1-hero__title i { font-style: normal; color: var(--blue); }

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

.v1-hero__actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }

.v1-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 13px 24px;
  border-radius: 4px;
  border: 2px solid var(--blue);
  background: var(--blue);
  color: var(--ink);           /* zwart op blauw, 8,19 */
  font-weight: 800;
  font-size: 16px;
  text-decoration: none;
}

.v1-btn:hover { background: #a3ccf2; border-color: #a3ccf2; }

.v1-btn--ghost { background: transparent; color: var(--paper); border-color: var(--line-2); }
.v1-btn--ghost:hover { background: var(--ink-2); border-color: var(--dim-2); }

/* het drieluik */
.v1-drop {
  margin-top: clamp(34px, 4.6vw, 60px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 22px);
  align-items: start;
}

.v1-drop__cell { min-width: 0; }
.v1-drop__cell:nth-child(2) { margin-top: clamp(18px, 3.4vw, 54px); }
.v1-drop__cell:nth-child(3) { margin-top: clamp(36px, 6.8vw, 108px); }

.v1-drop__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.v1-drop__n { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--green); }
.v1-drop__lbl { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--dim); }

.v1-drop__fig { position: relative; }

.v1-drop__fig img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 3px;
  background: var(--ink-2);
}

.v1-drop__rule { height: 1px; background: var(--line-2); margin-bottom: 10px; }

/* ---------- het werk: de afdaling ---------------------------------------
   Vijf vakken, van hoog naar laag door het huis. Links loopt de duimstok mee:
   een echte maatlat met streepjes, geen rij bolletjes. Op smal scherm klapt
   die kolom weg en wordt de maat een liggend streepje boven elk vak.
   ------------------------------------------------------------------------- */

.v1-work { padding-block: clamp(44px, 6vw, 92px); border-top: 1px solid var(--line); }

.v1-work__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px clamp(24px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(30px, 4vw, 54px);
}

.v1-h2 {
  font-weight: 800;
  font-size: clamp(28px, 4.6vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.v1-work__intro p { color: var(--dim); max-width: 46ch; }

.v1-stop {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 0 clamp(20px, 3vw, 44px);
  padding-block: clamp(26px, 3.4vw, 44px);
}

.v1-stop + .v1-stop { border-top: 1px solid var(--line); }

/* de duimstok */
.v1-stop__scale {
  position: relative;
  min-width: 0;
  padding-left: 21px;
}

.v1-stop__scale::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  bottom: -1px;
  width: 9px;
  border-left: 2px solid var(--line-2);
  background-image: repeating-linear-gradient(to bottom, var(--line-2) 0 1px, transparent 1px 13px);
  background-position: 0 6px;
}

/* het merkstreepje van dit vak, langer en in de accentkleur */
.v1-stop__scale::after {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 21px;
  height: 2px;
  background: var(--green);
}

.v1-stop__n { display: block; font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--green); }
.v1-stop__where { display: block; margin-top: 4px; font-size: 14.5px; color: var(--dim); }

.v1-stop__body { min-width: 0; }

.v1-stop__t {
  font-weight: 800;
  font-size: clamp(21px, 2.6vw, 30px);
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.v1-stop__say { margin-top: 10px; color: var(--dim); max-width: 54ch; }

/* De strook is een mozaïek met een VASTE rijhoogte in plaats van een vaste
   beeldverhouding per cel. Dat is bewust: de beeldbank is een mengsel van
   staande en liggende foto's, en met een vaste verhouding wordt een liggende
   foto van een rij woningen tot een portret gesneden en is er niets meer van
   over. Nu krijgt elke foto een vak dat bij zijn eigen vorm past, en blijven
   de rijen toch strak uitgelijnd. */
.v1-strip {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: clamp(128px, 13.6vw, 196px);
  gap: clamp(8px, 1vw, 14px);
  /* Zonder `dense` laat een cel die twee kolommen breed is gaten achter zodra
     hij niet meer in de resterende ruimte van een rij past, en dan rafelt de
     rechterkant van het archief uit. */
  grid-auto-flow: row dense;
}

.v1-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
  background: var(--ink-2);
}

.v1-strip .is-lead { grid-column: span 2; grid-row: span 2; }
.v1-strip .is-wide { grid-column: span 2; }

/* ---------- wat wij doen -------------------------------------------------
   De zeven werkzaamheden die de bron zelf opsomt, als leesbare lijst met een
   doorlopende regel. Geen kaartraster: het zijn zeven regels tekst en die
   worden door een kaart niet duidelijker.
   ------------------------------------------------------------------------- */

.v1-do { padding-block: clamp(44px, 6vw, 92px); background: var(--ink-2); }

/* Opent met een groot cijfer in plaats van met het mono-labeltje dat de hero
   al gebruikt: drie secties die identiek openen laten de pagina als één lange
   lijst lezen, en de poort telt dat ook. */
.v1-do__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; margin-bottom: clamp(20px, 2.6vw, 32px); }

.v1-do__count {
  font-weight: 800;
  font-size: clamp(38px, 5.2vw, 62px);
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--green);
}

.v1-do__h h2 {
  font-weight: 800;
  font-size: clamp(23px, 3vw, 34px);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.v1-list { border-top: 1px solid var(--line-2); }

.v1-list li {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 4px 12px;
  align-items: baseline;
  padding-block: 15px;
  border-bottom: 1px solid var(--line-2);
}

.v1-list b {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--green);
}

.v1-list span {
  font-weight: 600;
  font-size: clamp(17px, 2vw, 22px);
  letter-spacing: -0.015em;
}

.v1-do__note { margin-top: 20px; color: var(--dim); max-width: 56ch; }

/* ---------- het bedrijf --------------------------------------------------
   Opent niet met een kop maar met de zin zelf, en zet de kop als klein label
   ernaast. Zo begint deze sectie anders dan alle andere.
   ------------------------------------------------------------------------- */

.v1-firm { padding-block: clamp(44px, 6vw, 92px); }

.v1-firm__grid {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 14px clamp(20px, 3vw, 44px);
  align-items: start;
}

/* Ook hier bewust geen mono-uppercase label: die vorm is van de hero. */
.v1-firm h2 { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; color: var(--dim); }

.v1-firm__say {
  font-weight: 600;
  font-size: clamp(20px, 2.8vw, 30px);
  line-height: 1.24;
  letter-spacing: -0.02em;
  max-width: 26ch;
}

.v1-firm__body { margin-top: 18px; color: var(--dim); max-width: 54ch; }
.v1-firm__body p + p { margin-top: 12px; }

.v1-social { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }

.v1-social a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 17px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
}

.v1-social a:hover { border-color: var(--blue); color: var(--blue); }

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

.v1-contact { padding-block: clamp(40px, 5.2vw, 78px); border-top: 1px solid var(--line); }

.v1-contact__h {
  font-weight: 800;
  font-size: clamp(34px, 6.4vw, 74px);
  line-height: 1.0;
  letter-spacing: -0.04em;
}

.v1-contact__lead { margin-top: 16px; color: var(--dim); max-width: 46ch; }

.v1-calls { margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 12px; }

.v1-call {
  min-width: 0;
  display: block;
  padding: 18px 20px;
  border: 1px solid var(--line-2);
  border-radius: 5px;
  text-decoration: none;
  background: var(--ink-2);
}

.v1-call:hover { border-color: var(--blue); background: var(--ink-3); }
.v1-call__k { display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--dim); }
.v1-call__v { display: block; margin-top: 6px; font-weight: 800; font-size: clamp(19px, 2.6vw, 26px); letter-spacing: -0.025em; }

.v1-where { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px 40px; align-items: baseline; }
.v1-where address { font-style: normal; color: var(--dim); }

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

.v1-foot { border-top: 1px solid var(--line); padding-block: 22px; }

.v1-foot__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14.5px;
  color: var(--dim);
}

.v1-foot__inner a { color: var(--paper); font-weight: 700; }

/* ---------- beweging ------------------------------------------------------
   Alleen opacity en transform in de verborgen staat, nooit clip-path
   (LESSONS regel 7). De .js klasse wordt bovendien alleen gezet wanneer
   beweging gewenst is (regel 8), dus bij motion-uit bestaat deze regel niet
   en staat alles er gewoon.
   -------------------------------------------------------------------------- */

.js #version-v1 [data-rise] { opacity: 0; transform: translateY(14px); }

.js #version-v1 [data-rise].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* ---------- breekpunten ---------------------------------------------------- */

@media (max-width: 900px) {
  .v1-work__intro { grid-template-columns: minmax(0, 1fr); align-items: start; }

  /* De ondertitel van het logo is bijna 250 px breed en breekt niet; naast de
     hamburger past dat op een telefoon niet en schuift de hele kop opzij. Hij
     staat verderop nog twee keer voluit, dus hier weglaten kost geen enkel
     feit. */
  .v1-logo__sub { display: none; }

  /* De duimstok is een verticale maatlat; op smal scherm is er geen kolom om
     hem in te zetten, dus wordt hij een liggend streepje boven het vak. */
  .v1-stop,
  .v1-firm__grid { grid-template-columns: minmax(0, 1fr); }

  .v1-stop__scale { padding-left: 0; padding-bottom: 14px; display: flex; align-items: baseline; gap: 12px; }
  .v1-stop__scale::before { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 9px; border-left: 0; border-top: 2px solid var(--line-2); background-image: repeating-linear-gradient(to right, var(--line-2) 0 1px, transparent 1px 13px); background-position: 6px 0; }
  .v1-stop__scale::after { top: auto; bottom: 0; left: 0; width: 42px; height: 2px; }
  .v1-stop__where { margin-top: 0; }
}

@media (max-width: 560px) {
  .v1-drop { grid-template-columns: minmax(0, 1fr); }
  .v1-drop__cell:nth-child(2),
  .v1-drop__cell:nth-child(3) { margin-top: 0; }

  /* Onder de 560 moet het raster nog altijd twee kolommen halen, anders maakt
     een cel met `grid-column: span 2` een impliciete tweede kolom aan en
     schuift de hele pagina opzij (LESSONS regel 10). Bij 320 px is de inhoud
     288 px breed, dus 104 px als ondergrens laat er gegarandeerd twee in. */
  .v1-strip { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}