/* Pattern agent W (2026-10-10): the ordered, numbered workflow three ways, w1–w3 (vouw/w.html, written by vouw/w.js;
   the recipe in vouw/w-recept.md). Every rule is scoped to the svw- classes the section carries, or to
   :root[data-s^="w"]; the site's own classes are reused as they are (tegel, label, pair, btn, caps, meer, werk__*).
   Every colour is a token of ../style.css; the grounds are the site's own: kalk, kalk-wit, gips-licht, lood. */

/* ==================================================== SHARED BY ALL THREE */

.svw { padding: clamp(72px, 8vw, 116px) 0; }

/* a row of his photos at one height, every photo whole: each photo as wide as its shape asks (--w/--h), so they share
   one height; the row is never wider than --kap × the sum of the shapes (--som), so it never stands taller than --kap */
.svw-rij {
  --gap: clamp(8px, .9vw, 12px);
  display: flex; gap: var(--gap);
  max-width: calc(var(--kap, 440px) * var(--som) + (var(--n) - 1) * var(--gap));
}
.svw-rij > .svw-foto { flex: calc(var(--w) / var(--h)) 1 0px; width: auto; min-width: 0; aspect-ratio: var(--w) / var(--h); }
.svw-foto img { width: 100%; height: 100%; object-fit: cover; }
.svw-plek {
  margin: 10px 0 0; font-family: var(--f-tech); font-weight: 700; font-size: 12.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dakpan);
}
@media (max-width: 560px) {
  /* a row of three or more: the first photo across, the rest under it at one height */
  .svw-rij:has(> :nth-child(3)) { flex-wrap: wrap; }
  .svw-rij:has(> :nth-child(3)) > :first-child { flex-basis: 100%; }
}

/* the lead: its first sentence (what you see) large, the rest under it */
.svw-lead p { margin: 0; text-wrap: pretty; }
.svw-lead__1 { font-weight: 600; font-size: clamp(20px, 1.75vw, 25px); line-height: 1.4; letter-spacing: -.012em; color: var(--lood); }
.svw-lead__2 { margin-top: 12px !important; font-size: clamp(17px, 1.3vw, 18.5px); line-height: 1.6; color: var(--lood-zacht); }
.svw-lead__2 b { font-weight: 700; color: var(--lood); }

/* the sentence a stop turns on, large */
.svw-pull {
  margin: 0 0 18px; padding: 2px 0 2px 18px; max-width: 24em; border-left: 4px solid var(--dakpan);
  font-weight: 700; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.32; letter-spacing: -.015em; color: var(--lood);
  text-wrap: balance;
}

/* the photos the section asks for: a dashed frame each, what to photograph in it, the button under them */
.svw-vraag__lijsten { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; }
.svw-vraag__lijst {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; aspect-ratio: 4 / 3;
  max-height: 210px; padding: 14px; border: 2px dashed var(--gips-diep); border-radius: 8px; background: var(--kalk-wit); text-align: center;
}
.svw-vraag__lijst .ico { width: 32px; height: 32px; fill: var(--dakpan); }
.svw-vraag__wat {
  font-family: var(--f-tech); font-weight: 700; font-size: 13px; letter-spacing: .14em; line-height: 1.3;
  text-transform: uppercase; color: var(--lood);
}
.svw-vraag__knop { width: 100%; margin-top: 14px; }
/* one photo asked for: a wide frame, not a tall one */
:is(.svw1-vraag, .svw2-vraag) .svw-vraag__lijst:only-child { aspect-ratio: auto; min-height: 150px; flex-direction: row; gap: 14px; }

/* links in the words (kept low in specificity, so the dark parts can set their own) */
:where(.svw) a:where(:not(.btn, .tegel, .werk__open, .svw2__open, .svw2__duim)) {
  color: var(--lood); text-decoration: underline; text-decoration-color: var(--dakpan);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}
:where(.svw) a:where(:not(.btn, .tegel, .werk__open, .svw2__open, .svw2__duim)):hover { color: var(--dakpan); }
.svw .svw-noot { margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: var(--lood-zacht); }
.svw .svw-buren { margin: 18px 0 0; font-size: 16px; line-height: 1.55; color: var(--lood-zacht); max-width: 36em; }

/* ==================================================== w1 · THE ROUTE, BESIDE
   n2's route set firmer: words left, the stage's photos, list or photo request right; a bare stop sets its heading
   left and its words right. The list as ruled sentences. The call as a dark card. At the foot the projects row. */
.svw1__kop {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 22px clamp(40px, 5vw, 80px); align-items: end;
  padding-bottom: clamp(32px, 3.4vw, 48px); border-bottom: 2px solid var(--lood);
}
.svw1__kicker { margin-bottom: 16px; }
.svw1-h { font-weight: 800; font-size: clamp(38px, 4.4vw, 62px); line-height: .98; letter-spacing: -.035em; text-wrap: balance; }
.svw1-lead { max-width: 34em; }

.svw1__route { margin: 0; padding: 0; list-style: none; }
.svw1__stap {
  --nr: 60px; --pad: clamp(40px, 4.4vw, 64px); --gap: clamp(28px, 3.2vw, 52px);
  position: relative; display: grid; grid-template-columns: var(--nr) minmax(0, 5fr) minmax(0, 6fr);
  column-gap: var(--gap); align-items: start; padding: var(--pad) 0;
}
/* the line through the numbers, from the first to the house */
.svw1__stap::before {
  content: ""; position: absolute; left: calc(var(--nr) / 2 - 1.5px); top: 0; bottom: 0; width: 3px; background: var(--gips-diep);
}
.svw1__route > .svw1__stap:first-child::before { top: var(--pad); }
/* a hairline between the stops, from the words on */
.svw1__stap::after {
  content: ""; position: absolute; left: calc(var(--nr) + var(--gap)); right: 0; bottom: 0; height: 1px; background: var(--kalk-rand);
}
.svw1__n {
  position: relative; z-index: 1; display: grid; place-items: center; width: var(--nr); height: var(--nr); border-radius: 50%;
  background: var(--dakpan); color: var(--kalk-wit); box-shadow: 0 0 0 7px var(--kalk);
  font-family: var(--f-tech); font-weight: 700; font-size: 27px; line-height: 1; font-variant-numeric: tabular-nums;
}
.svw1__n svg { width: 26px; height: 26px; fill: var(--kalk-wit); }
.svw1__tekst { grid-column: 2; min-width: 0; }
.svw1-h3 {
  margin: 10px 0 16px; max-width: 17em;
  font-weight: 800; font-size: clamp(25px, 2.2vw, 32px); line-height: 1.12; letter-spacing: -.025em; text-wrap: balance;
}
.svw1__woorden p:not(.svw-pull) { margin: 0 0 1em; max-width: 34em; font-size: clamp(17px, 1.3vw, 18.5px); line-height: 1.62; text-wrap: pretty; }
.svw1__woorden p:last-child { margin-bottom: 0; }
.svw1__kant { grid-column: 3; min-width: 0; padding-top: 10px; }
/* nothing beside it: the heading on the left, the words where the photos would stand */
.svw1__stap--kaal .svw1__tekst { display: contents; }
.svw1__stap--kaal .svw1-h3 { grid-column: 2; }
.svw1__stap--kaal .svw1__woorden { grid-column: 3; padding-top: 12px; }
.svw1-rij { --kap: 420px; }
/* one upright photo beside: its column is as wide as the photo, the words get the rest */
.svw1__stap--smal { grid-template-columns: var(--nr) minmax(0, 1fr) min(42%, calc(420px * var(--som))); }
.svw1__woorden .svw1-lijst { margin-top: 18px; }

/* the list as sentences, ruled, the part that is broken in bold */
.svw1-lijst { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--lood); }
.svw1-lijst li {
  padding: 15px 0 16px; border-bottom: 1px solid var(--kalk-rand);
  font-size: clamp(18px, 1.45vw, 20.5px); line-height: 1.4; color: var(--lood-zacht); text-wrap: pretty;
}
.svw1-lijst li::first-letter { text-transform: uppercase; }
.svw1-lijst li b { font-weight: 700; color: var(--lood); }

/* the closing stop: the house on the line, the advice and the call on a dark card */
.svw1__stap--slot { padding-bottom: 0; }
.svw1__stap--slot::before { bottom: auto; height: calc(var(--pad) + 30px); }
.svw1__stap--slot::after { display: none; }
.svw1__slot {
  grid-column: 2 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 22px var(--gap); align-items: center;
  margin-top: -10px; padding: clamp(28px, 3.2vw, 44px) clamp(24px, 3.2vw, 48px); border-radius: 10px;
  background: var(--lood); color: var(--kalk-wit);
}
.svw1__slot .svw1-h3 { margin: 0 0 12px; color: var(--kalk-wit); }
.svw1__slottekst p { margin: 0; max-width: 30em; font-size: clamp(17px, 1.3vw, 18.5px); line-height: 1.55; color: var(--gips-licht); }
.svw1__slot .pair::after { box-shadow: 0 0 0 3px var(--lood); }
.svw1 .svw1__slot .svw-noot { color: var(--gips); }
.svw1 .svw1__slot .svw-buren { color: var(--gips-licht); }
.svw1 .svw1__slot .svw-buren a { color: var(--kalk-wit); text-decoration-color: var(--dakpan-licht); }

/* the projects row (the homepage's .werk, bound by script.js): every photo whole at one height, a caption under it */
.svw1 .svw1__werk { padding: clamp(72px, 7.6vw, 112px) 0 0; background: none; }
.svw1__werkkop { margin-bottom: clamp(22px, 2.4vw, 32px); }
.svw1__werkkop .caps { margin-bottom: 10px; }
.svw1-werkh { font-weight: 800; font-size: clamp(30px, 3vw, 44px); line-height: 1.04; letter-spacing: -.03em; }
.svw1__werkregel { margin: 12px 0 0; max-width: 40em; font-size: clamp(16.5px, 1.25vw, 18px); line-height: 1.55; color: var(--lood-zacht); text-wrap: pretty; }
.svw1__rij { --h: clamp(320px, 31vw, 450px); align-items: flex-start; }
.svw1__rij > .svw1__slide {
  height: auto; aspect-ratio: auto; max-width: none;
  width: min(calc(var(--h) * var(--fw) / var(--fh)), 86vw);
}
.svw1__slide .werk__open { height: auto; aspect-ratio: var(--fw) / var(--fh); }
.svw1__onder { margin: 12px 2px 0; font-size: 15.5px; line-height: 1.35; font-weight: 600; color: var(--lood); }
.svw1__waar {
  display: block; margin-top: 3px; font-family: var(--f-tech); font-weight: 700; font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dakpan);
}
.svw1 .werk__balk { margin-top: 18px; }

@media (max-width: 960px) {
  .svw1__kop { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 860px) {
  /* the photos, the list and the request go under the words; a bare stop stacks */
  .svw1__stap { --nr: 46px; grid-template-columns: var(--nr) minmax(0, 1fr); }
  .svw1__kant { grid-column: 2; padding-top: 22px; }
  .svw1__stap--kaal .svw1__woorden { grid-column: 2; padding-top: 0; }
  .svw1__n { font-size: 21px; box-shadow: 0 0 0 5px var(--kalk); }
  .svw1__n svg { width: 21px; height: 21px; }
  .svw1-h3 { margin-top: 6px; }
  .svw1__slot { grid-template-columns: minmax(0, 1fr); }
  .svw1__stap--smal { grid-template-columns: var(--nr) minmax(0, 1fr); }
}
@media (max-width: 720px) {
  /* the row's buttons under its words */
  .svw1__werkkop { flex-direction: column; align-items: stretch; gap: 18px; }
  .svw1__werkkop .werk__nav { align-self: flex-end; }
}
@media (max-width: 560px) {
  .svw1__stap { --nr: 38px; --gap: 14px; --pad: 34px; }
  .svw1__n { font-size: 18px; box-shadow: 0 0 0 4px var(--kalk); }
  .svw1__n svg { width: 18px; height: 18px; }
  .svw1-h3 { margin-top: 3px; font-size: 23px; }
  .svw1__stap--kaal .svw1-h3 { margin-bottom: 14px; }
  .svw1-pull { font-size: 20px; }
  .svw1-lijst li { font-size: 17.5px; padding: 13px 0 14px; }
  /* the call takes the whole width under the house */
  .svw1__slot { grid-column: 1 / -1; margin-top: 18px; padding: 24px 18px 26px; }
  .svw1__stap--slot .svw1__n { grid-column: 1; }
  .svw1__rij { --h: min(380px, 100vw); }
  .svw1__rij > .svw1__slide { width: min(calc(var(--h) * var(--fw) / var(--fh)), 80vw); }
}

/* ==================================================== w2 · THE ROUTE, BACK AND FORTH
   On a changed ground, white cards left and right of one line down the middle, each next one rising halfway beside
   the one before. The list as tiles. The closing card across the line. At the foot the gallery on a dark stage. */
.svw2 { background: var(--gips-licht); }
.svw2__kop { max-width: 820px; margin: 0 auto clamp(48px, 5vw, 72px); text-align: center; }
.svw2__kop .caps { margin-bottom: 16px; }
.svw2-h { font-weight: 800; font-size: clamp(38px, 4.4vw, 62px); line-height: .98; letter-spacing: -.035em; text-wrap: balance; }
.svw2-lead { max-width: 38em; margin: 22px auto 0; }

.svw2__route {
  --mid: 76px; --nr: 54px;
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--mid) minmax(0, 1fr);
  row-gap: clamp(22px, 2.4vw, 32px); margin: 0; padding: 0; list-style: none;
}
/* the line down the middle, from the first number; the closing card covers its foot */
.svw2__route::before {
  content: ""; position: absolute; left: 50%; top: 40px; bottom: 60px; width: 3px; margin-left: -1.5px; background: var(--dakpan-licht);
}
.svw2__stap { position: relative; grid-row: var(--i) / span 2; min-width: 0; }
.svw2__stap--l { grid-column: 1; }
.svw2__stap--r { grid-column: 3; }
.svw2__kaart {
  position: relative; padding: clamp(24px, 2.6vw, 36px); border-radius: 10px;
  background: var(--kalk-wit); box-shadow: var(--shadow-1);
}
/* the number on the line, level with the card's heading; a little arm from the card to it */
.svw2__n {
  position: absolute; top: clamp(18px, 2vw, 30px); z-index: 1; display: grid; place-items: center;
  width: var(--nr); height: var(--nr); border-radius: 50%; background: var(--dakpan); color: var(--kalk-wit);
  box-shadow: 0 0 0 6px var(--gips-licht);
  font-family: var(--f-tech); font-weight: 700; font-size: 25px; line-height: 1; font-variant-numeric: tabular-nums;
}
.svw2__stap--l .svw2__n { right: calc(-1 * (var(--mid) / 2) - var(--nr) / 2); }
.svw2__stap--r .svw2__n { left: calc(-1 * (var(--mid) / 2) - var(--nr) / 2); }
.svw2__n svg { width: 24px; height: 24px; fill: var(--kalk-wit); }
.svw2-h3 {
  margin: 0 0 14px; max-width: 18em;
  font-weight: 800; font-size: clamp(24px, 2.1vw, 30px); line-height: 1.12; letter-spacing: -.025em; text-wrap: balance;
}
.svw2__woorden p:not(.svw-pull) { margin: 0 0 1em; max-width: 34em; font-size: clamp(17px, 1.25vw, 18px); line-height: 1.62; text-wrap: pretty; }
.svw2__woorden p:last-child { margin-bottom: 0; }
.svw2__woorden .svw-pull { font-size: clamp(19px, 1.55vw, 22px); }
.svw2__kant { margin-top: 22px; }
/* one photo: across the card's head, cropped around its focus, its place and date on it */
.svw2__beeld { margin: calc(-1 * clamp(24px, 2.6vw, 36px)) calc(-1 * clamp(24px, 2.6vw, 36px)) clamp(22px, 2.4vw, 30px); }
.svw2__beeld .svw-foto { aspect-ratio: 5 / 4; border-radius: 10px 10px 0 0; box-shadow: none; }
.svw2__beeld .svw-foto img { position: absolute; inset: 0; }
.svw2__kaart--beeld .svw2__n { top: calc(clamp(24px, 2.6vw, 36px) + 18px); }
.svw2-rij { --kap: 400px; }
.svw2 .svw-vraag__lijst { background: var(--kalk); }

/* the list as tiles: the part large, what is wrong with it under it */
.svw2-tegels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.svw2-tegels li {
  display: flex; flex-direction: column; gap: 4px; padding: 15px 16px 16px;
  border-radius: 8px; background: var(--kalk); border-top: 4px solid var(--dakpan);
}
.svw2-tegels b { font-weight: 800; font-size: clamp(17.5px, 1.4vw, 19.5px); line-height: 1.2; letter-spacing: -.01em; color: var(--lood); }
.svw2-tegels span { font-size: 15.5px; line-height: 1.4; color: var(--lood-zacht); }
.svw2-tegels li:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* the closing stop: one card across the line, the house on it */
.svw2__stap--slot { grid-column: 1 / -1; grid-row: var(--i); margin-top: clamp(26px, 3vw, 40px); }
.svw2__slot {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 22px clamp(28px, 3.4vw, 56px); align-items: center;
  padding-top: clamp(44px, 4.4vw, 56px); border-top: 5px solid var(--dakpan);
}
.svw2__n--huis { top: calc(-1 * var(--nr) / 2 - 3px); left: 50%; margin-left: calc(-1 * var(--nr) / 2); background: var(--lood); }
.svw2__slot .svw2-h3 { margin-bottom: 12px; }
.svw2__slottekst p { margin: 0; max-width: 30em; font-size: clamp(17px, 1.3vw, 18.5px); line-height: 1.55; }

/* the gallery: the job as one photo large on a dark stage, the whole series under it as thumbnails */
.svw2__galerij {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); grid-template-areas: "tekst podium" "onder podium";
  grid-template-rows: auto 1fr; gap: 0 clamp(28px, 3.4vw, 56px); align-items: start;
  margin-top: clamp(64px, 7vw, 104px); padding: clamp(24px, 3vw, 44px); border-radius: 12px;
  background: var(--lood); color: var(--kalk-wit);
}
.svw2__galtekst { grid-area: tekst; }
.svw2__galtekst .caps { margin-bottom: 10px; }
.svw2-werkh { color: var(--kalk-wit); font-weight: 800; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.05; letter-spacing: -.03em; }
.svw2__galregel { margin: 12px 0 0; font-size: 16.5px; line-height: 1.55; color: var(--gips-licht); text-wrap: pretty; }
.svw2__podium {
  grid-area: podium; position: relative; aspect-ratio: var(--vorm, 4 / 3); max-height: min(640px, 76vh); width: 100%; border-radius: 8px; overflow: hidden; background: var(--lood-diep);
}
.svw2__open { position: absolute; inset: 0; display: block; cursor: zoom-in; }
.svw2__open img { width: 100%; height: 100%; object-fit: contain; }
.svw2__pijl {
  position: absolute; top: 50%; width: 48px; height: 48px; margin-top: -24px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer; background: rgba(26, 36, 41, .58); color: var(--kalk-wit);
  box-shadow: 0 0 0 1px rgba(255, 252, 247, .22);
  transition: background-color .15s;
}
.svw2__pijl:hover { background: var(--dakpan); }
.svw2__pijl .ico { width: 20px; height: 20px; }
.svw2__pijl--terug { left: 12px; }
.svw2__pijl--terug .ico { transform: rotate(180deg); }
.svw2__pijl--door { right: 12px; }
html:not(.js) .svw2__pijl { display: none; }
.svw2__onder { grid-area: onder; align-self: end; padding-top: 26px; }
.svw2__bij { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 14px; min-height: 2.6em; }
.svw2__tel { font-family: var(--f-tech); font-weight: 700; font-size: 15px; letter-spacing: .08em; color: var(--dakpan-licht); font-variant-numeric: tabular-nums; }
.svw2__kort { font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--kalk-wit); }
.svw2__waar { flex-basis: 100%; font-family: var(--f-tech); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gips); }
.svw2__waar:empty { display: none; }
.svw2__duimen { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.svw2__duim {
  position: relative; display: block; aspect-ratio: 1; border-radius: 5px; overflow: hidden; background: var(--lood-diep);
  opacity: .5; transition: opacity .15s;
}
.svw2__duim img { width: 100%; height: 100%; object-fit: cover; }
.svw2__duim:hover, .svw2__duim.is-nu { opacity: 1; }
.svw2__duim::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 3px transparent; transition: box-shadow .15s; }
.svw2__duim.is-nu::after { box-shadow: inset 0 0 0 3px var(--kalk-wit); }

@media (max-width: 960px) {
  .svw2__galerij { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tekst" "podium" "onder"; grid-template-rows: none; }
  .svw2__podium { margin-top: 22px; }
  .svw2__onder { padding-top: 16px; }
}
@media (max-width: 860px) {
  /* one column: the line on the left, the cards on its right, one under the other */
  .svw2__kop { text-align: left; margin-left: 0; }
  .svw2-lead { margin-left: 0; }
  .svw2__route { --mid: 0px; --nr: 42px; grid-template-columns: var(--nr) minmax(0, 1fr); column-gap: 14px; }
  .svw2__route::before { left: calc(var(--nr) / 2); top: 30px; }
  .svw2__stap, .svw2__stap--l, .svw2__stap--r { grid-column: 2; grid-row: auto; }
  .svw2__stap--l .svw2__n, .svw2__stap--r .svw2__n { left: calc(-14px - var(--nr)); right: auto; top: 22px; font-size: 20px; }
  .svw2__n svg { width: 20px; height: 20px; }
  .svw2__stap--slot { grid-column: 1 / -1; }
  .svw2__slot { grid-template-columns: minmax(0, 1fr); }
  .svw2__n--huis { left: calc(var(--nr) / 2); }
}
@media (max-width: 560px) {
  .svw2__route { --nr: 36px; column-gap: 10px; }
  .svw2__stap--l .svw2__n, .svw2__stap--r .svw2__n { left: calc(-10px - var(--nr)); font-size: 17px; box-shadow: 0 0 0 4px var(--gips-licht); }
  .svw2__kaart { padding: 20px 16px 22px; }
  .svw2-h3 { font-size: 22px; }
  .svw2-tegels { grid-template-columns: minmax(0, 1fr); }
  .svw2-tegels li:last-child:nth-child(odd) { grid-column: auto; }
  .svw2__galerij { padding: 18px 14px 20px; margin-left: calc(-1 * var(--gut) + 8px); margin-right: calc(-1 * var(--gut) + 8px); }
  .svw2__pijl { width: 42px; height: 42px; margin-top: -21px; }
  .svw2 .svw-vraag__lijsten { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svw2 .svw-vraag__lijst { aspect-ratio: 1; }
}

/* ==================================================== w3 · THE LOGBOOK
   Ruled ledger rows: the number large in the margin on the line, the heading left, the words right, the stage's photos
   as one row across under them. The list as one plain paragraph. The route ends on a dark band: the call, and the
   job as one block of photos with the "+N" tile. */
.svw3 { padding-bottom: 0; }
.svw3__kop { max-width: 46em; padding-bottom: clamp(36px, 4vw, 56px); }
.svw3-h { font-weight: 800; font-size: clamp(38px, 4.4vw, 62px); line-height: .98; letter-spacing: -.035em; text-wrap: balance; }
.svw3-lead { margin-top: 22px; max-width: 36em; }

.svw3__route, .svw3__band { --nr: clamp(64px, 7.4vw, 112px); --gap: clamp(24px, 3vw, 48px); }
.svw3__route { margin: 0; padding: 0; list-style: none; }
.svw3__stap {
  position: relative; display: grid; grid-template-columns: var(--nr) minmax(0, 4fr) minmax(0, 7fr);
  grid-template-areas: "n h w" "n o o"; column-gap: var(--gap); align-items: start;
  padding: clamp(24px, 2.6vw, 34px) 0 clamp(48px, 5vw, 76px);
}
/* the rule over each stop, as over the page's questions */
.svw3__stap::after { content: ""; position: absolute; top: 0; left: calc(var(--nr) + var(--gap)); right: 0; height: 2px; background: var(--lood); }
/* the line down the margin, through the numbers, on into the band */
.svw3__stap::before { content: ""; position: absolute; left: calc(var(--nr) / 2 - 1.5px); top: 0; bottom: 0; width: 3px; background: var(--gips-diep); }
.svw3__route > .svw3__stap:first-child::before { top: 40px; }
.svw3__n {
  grid-area: n; position: relative; z-index: 1; justify-self: center; padding: 6px 0 10px; background: var(--kalk);
  font-family: var(--f-tech); font-weight: 700; font-size: clamp(48px, 5vw, 76px); line-height: .9; color: var(--dakpan);
  font-variant-numeric: tabular-nums;
}
.svw3-h3 {
  grid-area: h; margin: 2px 0 0; max-width: 15em;
  font-weight: 800; font-size: clamp(25px, 2.3vw, 33px); line-height: 1.12; letter-spacing: -.025em; text-wrap: balance;
}
.svw3__woorden { grid-area: w; min-width: 0; padding-top: 6px; }
.svw3__woorden p:not(.svw-pull) { margin: 0 0 1em; max-width: 36em; font-size: clamp(17px, 1.3vw, 18.5px); line-height: 1.62; text-wrap: pretty; }
.svw3__woorden p:last-child { margin-bottom: 0; }
/* the list as running text, a size up, the parts in bold */
.svw3__woorden .svw3-proza { font-size: clamp(19px, 1.55vw, 21.5px) !important; line-height: 1.58 !important; max-width: 32em !important; }
.svw3-proza b { font-weight: 700; color: var(--lood); }
.svw3__onder { grid-area: o; min-width: 0; margin-top: clamp(26px, 2.8vw, 38px); }
/* one or two upright photos would fill only part of the width: they stand under the words, the column's width */
.svw3__onder--smal { grid-column: 3; }
/* one upright photo: under the heading, beside the words */
.svw3__stap--kopfoto { grid-template-areas: "n h w" "n o w"; grid-template-rows: auto 1fr; }
.svw3__onder--kop { margin-top: 26px; max-width: 340px; }
.svw3__onder--kop .svw-rij { --kap: 420px; }
.svw3-rij { --kap: 460px; }
/* the photo request: one strip, what to photograph and the button */
.svw3-vraag {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; padding: 18px 22px;
  border: 2px dashed var(--gips-diep); border-radius: 10px; background: var(--kalk-wit);
}
.svw3-vraag .svw-vraag__lijsten { display: flex; flex-wrap: wrap; gap: 10px; }
.svw3-vraag .svw-vraag__lijst { flex-direction: row; aspect-ratio: auto; gap: 10px; padding: 10px 16px; border: 0; border-radius: 6px; background: var(--gips-licht); }
.svw3-vraag .svw-vraag__lijst .ico { width: 22px; height: 22px; }
.svw3-vraag .svw-vraag__knop { width: auto; margin: 0 0 0 auto; }

/* the band: the closing stop on the dark ground, the job beside it */
.svw3__band { --bandpad: clamp(56px, 6vw, 92px); padding: var(--bandpad) 0; background: var(--lood); color: var(--kalk-wit); }
.svw3__bandgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px clamp(40px, 5vw, 80px); align-items: start; }
.svw--zonder-reeks .svw3__bandgrid { grid-template-columns: minmax(0, 1fr); }
.svw3__slot {
  position: relative; display: grid; grid-template-columns: var(--nr) minmax(0, 1fr); column-gap: var(--gap); align-content: start;
}
.svw3__slot > :not(.svw3__n) { grid-column: 2; }
/* the line comes in over the band's top edge to the house */
.svw3__slot::before { content: ""; position: absolute; left: calc(var(--nr) / 2 - 1.5px); top: calc(-1 * var(--bandpad)); height: var(--bandpad); width: 3px; background: var(--gips-diep); }
.svw3__n--huis {
  grid-column: 1; grid-row: 1 / span 3; justify-self: center; display: grid; place-items: center; width: 58px; height: 58px; padding: 0;
  border-radius: 50%; background: var(--dakpan);
}
.svw3__n--huis svg { width: 26px; height: 26px; fill: var(--kalk-wit); }
.svw3-sloth { margin: 6px 0 12px; max-width: 15em; color: var(--kalk-wit); font-weight: 800; font-size: clamp(26px, 2.4vw, 35px); line-height: 1.1; letter-spacing: -.025em; text-wrap: balance; }
.svw3__slotp { margin: 0 0 26px; max-width: 30em; font-size: clamp(17px, 1.3vw, 18.5px); line-height: 1.55; color: var(--gips-licht); }
.svw--zonder-reeks .svw3__slot { grid-template-columns: var(--nr) minmax(0, 4fr) minmax(0, 7fr); }
.svw--zonder-reeks .svw3__slot > .svw3-sloth { grid-column: 2; grid-row: 1 / span 3; }
.svw--zonder-reeks .svw3__slot > :not(.svw3__n):not(.svw3-sloth) { grid-column: 3; }
.svw3__slot .pair::after { box-shadow: 0 0 0 3px var(--lood); }
@media (min-width: 961px) { .svw3:not(.svw--zonder-reeks) .svw3__slot .pair .hide-s { display: none; } }   /* beside the photos the column is narrow */
.svw3 .svw3__slot .svw-noot { color: var(--gips); }
.svw3 .svw3__slot .svw-buren { color: var(--gips-licht); }
.svw3 .svw3__slot .svw-buren a { color: var(--kalk-wit); text-decoration-color: var(--dakpan-licht); }

.svw3__werk .caps { margin-bottom: 10px; }
.svw3-werkh { color: var(--kalk-wit); font-weight: 800; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.05; letter-spacing: -.03em; }
.svw3__werkregel { margin: 10px 0 22px; max-width: 40em; font-size: 16.5px; line-height: 1.55; color: var(--gips-licht); text-wrap: pretty; }
/* the block of photos: the principal two cells wide and two high, the others square, the fifth the "+N" tile */
.svw3__mozaiek { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.svw3-cel { width: 100%; aspect-ratio: 1; box-shadow: none; }
.svw3-cel img { position: absolute; inset: 0; }
.svw3-cel:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.svw3__mozaiek:has(> :nth-child(2):last-child) > .svw3-cel { grid-column: span 2; grid-row: auto; aspect-ratio: 4 / 5; }
.svw3__mozaiek:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svw3__mozaiek:has(> :nth-child(4):last-child) > .svw3-cel:nth-child(4) { grid-column: span 2; aspect-ratio: 2 / 1; }

@media (max-width: 960px) {
  .svw3__bandgrid { grid-template-columns: minmax(0, 1fr); }
  .svw3__werk { padding-left: calc(var(--nr) + var(--gap)); }
  .svw--zonder-reeks .svw3__slot { grid-template-columns: var(--nr) minmax(0, 1fr); }
  .svw--zonder-reeks .svw3__slot > :not(.svw3__n) { grid-column: 2 !important; grid-row: auto !important; }
}
@media (max-width: 860px) {
  .svw3__route, .svw3__band { --nr: 48px; --gap: 16px; }
  .svw3__stap { grid-template-columns: var(--nr) minmax(0, 1fr); grid-template-areas: "n h" "n w" "n o"; padding-bottom: 44px; }
  .svw3__woorden { padding-top: 14px; }
  .svw3__onder--smal { grid-column: 2; }
  .svw3__stap--kopfoto { grid-template-areas: "n h" "n w" "n o"; grid-template-rows: none; }
  .svw3__n { font-size: 44px; }
  .svw3-vraag .svw-vraag__knop { margin-left: 0; }
}
@media (max-width: 560px) {
  .svw3__route, .svw3__band { --nr: 34px; --gap: 12px; }
  .svw3__n { font-size: 36px; padding: 4px 0 8px; }
  .svw3-h3 { font-size: 23px; }
  .svw3__route > .svw3__stap:first-child::before { top: 34px; }
  .svw3__woorden .svw3-proza { font-size: 18.5px !important; }
  .svw3-vraag { padding: 16px; }
  .svw3-vraag .svw-vraag__knop { width: 100%; }
  .svw3__n--huis { width: 34px; height: 34px; }
  .svw3__n--huis svg { width: 17px; height: 17px; }
  .svw3__slot > :not(.svw3__n) { grid-column: 1 / -1; }
  .svw3__slot > .svw3-sloth { grid-column: 2; }
  .svw3__werk { padding-left: 0; }
  .svw3__mozaiek { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .svw3-cel:first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }
  .svw3__mozaiek:has(> :nth-child(2):last-child) > .svw3-cel { grid-column: auto; aspect-ratio: 3 / 4; }
  .svw3__mozaiek:has(> :nth-child(3):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svw3__mozaiek:has(> :nth-child(4):last-child) > .svw3-cel:nth-child(4) { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
}