/* =========================================================================
   VERSIE 2 · "Van dak tot vloer"
   Een andere compositie, geen andere kleurstelling (LESSONS regel 24).

   V1 is donker, beeldgedreven en ingedeeld naar wat het doet: binnen warm
   tegenover buiten droog, met een grote kop naast een foto. V2 is licht,
   typografisch, en ingedeeld naar WAAR het zit. De pagina is een doorsnede
   van het huis en wordt van boven naar beneden gelezen: het dak, dan de
   ketel en de radiatoren, dan de vloer. Daarmee staat ook de volgorde van
   de secties op zijn kop ten opzichte van V1.

   Deelt geen letter met V1: Source Serif in plaats van Space Grotesk.

   TOKENS, gemeten voordat een component ze gebruikte:
     ink   #1e1d1b op papier 15,45 · papier2 14,00 · GEEL 12,91
     muted #55534d op papier  7,05 · papier2  6,39
   Het geel blijft ook hier op licht uitsluitend vulling, met bijna zwarte
   tekst erop. Dat is een eigenschap van de kleur, niet van de compositie.
   ========================================================================= */

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../font/serif-400.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../font/serif-600.woff2") format("woff2");
}

#version-v2 {
  --paper: #faf8f4;
  --paper-2: #f0ece4;
  --ink: #1e1d1b;
  --muted: #55534d;
  --line: #ddd8ce;
  --yellow: #f5e500;   /* vulling, draagt --ink */

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  --gut: clamp(18px, 4.4vw, 60px);
  --maxw: 1060px;

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

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

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

/* ---------- kop ---------------------------------------------------------
   Geen plakkende balk zoals V1. Een gewone koptekst die meescrolt.
   ----------------------------------------------------------------------- */

.v2-head { border-bottom: 1px solid var(--line); }

.v2-head__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 24px;
  padding-block: 20px;
}

.v2-brand { text-decoration: none; }
.v2-brand strong { display: block; font-weight: 600; font-size: 22px; letter-spacing: 0.04em; }
.v2-brand span { display: block; font-size: 14px; color: var(--muted); }

/* Het menu volgt de doorsnede: genummerd van boven naar beneden, met de
   nummers als leidraad in plaats van als versiering. */
.v2-nav {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  align-items: baseline;
}

.v2-nav a {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  min-height: 34px;
  font-size: 16px;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.v2-nav a:hover { border-bottom-color: var(--yellow); }

.v2-nav__n {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- hero, alleen type en de vier tekens ------------------------- */

.v2-open { padding-block: clamp(44px, 7vw, 92px) clamp(26px, 3.4vw, 44px); }

.v2-open__title {
  font-weight: 600;
  font-size: clamp(36px, 6.6vw, 72px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  max-width: 15ch;
}

.v2-open__title em { font-style: italic; }

.v2-open__lead {
  margin-top: 20px;
  font-size: clamp(17.5px, 1.8vw, 21px);
  color: var(--muted);
  max-width: 54ch;
}

/* De vier tekens uit zijn eigen logo, hier groot in plaats van als klein
   markertje zoals in V1. */
.v2-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.v2-marks span {
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: #ffffff;
}

.v2-marks svg { width: 26px; height: 26px; color: var(--ink); }
.v2-marks span:nth-child(2) { background: var(--yellow); border-color: var(--ink); }

/* ---------- de doorsnede ------------------------------------------------- */

.v2-house { padding-bottom: clamp(30px, 5vw, 60px); }

.v2-level {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 18px clamp(20px, 3vw, 44px);
  padding-block: clamp(30px, 4vw, 54px);
  border-top: 1px solid var(--line);
}

/* De linkerkolom is de plek in het huis. Hij draagt de verticale lijn die
   de doorsnede van boven naar beneden doorloopt. */
.v2-level__where {
  position: relative;
  min-width: 0;
  padding-left: 30px;
}

.v2-level__where::before {
  content: "";
  position: absolute;
  left: 8px;
  top: -1px;
  bottom: calc(-1 * clamp(30px, 4vw, 54px) - 1px);
  width: 2px;
  background: var(--line);
}

.v2-level:last-of-type .v2-level__where::before { bottom: 50%; }

.v2-level__dot {
  position: absolute;
  left: 0;
  top: 4px;
  width: 18px;
  height: 18px;
  background: var(--yellow);
  border: 2px solid var(--ink);
}

.v2-level__k {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.v2-level__body { min-width: 0; }

.v2-h2 {
  font-weight: 600;
  font-size: clamp(26px, 3.8vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.v2-level__body p { margin-top: 14px; color: var(--muted); max-width: 60ch; }

.v2-level__figure { margin-top: 22px; }
.v2-level__figure img { width: 100%; height: auto; }

.v2-tags { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }

.v2-tag {
  padding: 5px 13px;
  background: #ffffff;
  border: 1px solid var(--line);
  font-size: 15px;
}

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

.v2-contact { background: var(--paper-2); padding-block: clamp(40px, 6vw, 80px); }

.v2-contact__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(24px, 4vw, 52px);
  align-items: start;
}

.v2-contact p { color: var(--muted); max-width: 46ch; }
.v2-contact .v2-h2 { margin-bottom: 14px; }

.v2-fields { margin-top: 24px; border-top: 1px solid var(--line); }

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

.v2-fields dt {
  flex: none;
  width: 92px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

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

/* De opengelaten waarde. Een streep, geen verzonnen nummer. */
.v2-blank {
  display: block;
  height: 2px;
  width: min(220px, 100%);
  background: repeating-linear-gradient(90deg, var(--muted) 0 10px, transparent 10px 18px);
}

.v2-note { margin-top: 16px; font-size: 14.5px; }

.v2-what { min-width: 0; background: #ffffff; border: 1px solid var(--line); padding: 24px 22px; }
.v2-what__head { font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.v2-what ol { display: flex; flex-direction: column; gap: 12px; counter-reset: w; }

.v2-what li {
  counter-increment: w;
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-weight: 600;
  font-size: clamp(18px, 2.1vw, 22px);
}

.v2-what li::before {
  content: counter(w, decimal-leading-zero);
  flex: none;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

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

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

.v2-foot__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: space-between;
  align-items: baseline;
  font-size: 15px;
  color: var(--muted);
}

.v2-foot a { color: var(--ink); font-weight: 600; }

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

@media (max-width: 640px) {
  .v2-level { grid-template-columns: minmax(0, 1fr); }
  .v2-level__where { padding-left: 30px; }
  .v2-level__where::before { bottom: -18px; }
  .v2-level:last-of-type .v2-level__where::before { display: none; }
  .v2-fields dt { width: 100%; }
  .v2-nav { margin-left: 0; }
}