/* Pattern agent X (2026-10-12): x1, w1 with the site's "+N" row as its foot (vouw/x.html, written by vouw/x.js; the
   recipe in vouw/x-recept.md). Every rule here is w1's (vouw/w.css: the part shared by all three and the w1 part),
   copied as it stands with its class names and rescoped to :root[data-s="x1"]; only the foot's rules are new. The
   site's own classes are reused as they are (tegel, label, pair, btn, caps, werk__head, duimen, duim, meer). Every
   colour is a token of ../style.css; the ground is the site's kalk. */

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

:root[data-s="x1"] .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 */
:root[data-s="x1"] .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));
}
:root[data-s="x1"] .svw-rij > .svw-foto { flex: calc(var(--w) / var(--h)) 1 0px; width: auto; min-width: 0; aspect-ratio: var(--w) / var(--h); }
:root[data-s="x1"] .svw-foto img { width: 100%; height: 100%; object-fit: cover; }
/* the place line under a row (.svw-plek) went 10-12: every photo carries its place now (fotomerk.css) */
@media (max-width: 560px) {
  /* a row of three or more: the first photo across, the rest under it at one height */
  :root[data-s="x1"] .svw-rij:has(> :nth-child(3)) { flex-wrap: wrap; }
  :root[data-s="x1"] .svw-rij:has(> :nth-child(3)) > :first-child { flex-basis: 100%; }
}

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

/* the sentence a stop turns on, large */
:root[data-s="x1"] .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 */
:root[data-s="x1"] .svw-vraag__lijsten { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; }
:root[data-s="x1"] .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;
}
:root[data-s="x1"] .svw-vraag__lijst .ico { width: 32px; height: 32px; fill: var(--dakpan); }
:root[data-s="x1"] .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);
}
:root[data-s="x1"] .svw-vraag__knop { width: 100%; margin-top: 14px; }
/* the other way in (10-13): "of" on a thin rule, then the call button, as wide as the one above it */
:root[data-s="x1"] .svw-vraag__of {
  display: flex; align-items: center; gap: 12px; margin: 10px 0; font-family: var(--f-tech); font-weight: 700;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--lood-grijs);
}
:root[data-s="x1"] .svw-vraag__of::before, :root[data-s="x1"] .svw-vraag__of::after { content: ''; flex: 1; height: 1px; background: var(--gips-diep); }
:root[data-s="x1"] .svw-vraag__bel { width: 100%; }
/* one photo asked for: a wide frame, not a tall one */
:root[data-s="x1"] :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(:root[data-s="x1"] .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(:root[data-s="x1"] .svw) a:where(:not(.btn, .tegel, .werk__open, .svw2__open, .svw2__duim)):hover { color: var(--dakpan); }
:root[data-s="x1"] .svw .svw-noot { margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: var(--lood-zacht); }
:root[data-s="x1"] .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 "+N" row. */
:root[data-s="x1"] .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);
}
:root[data-s="x1"] .svw1__kicker { margin-bottom: 16px; }
:root[data-s="x1"] .svw1-h { font-weight: 800; font-size: clamp(38px, 4.4vw, 62px); line-height: .98; letter-spacing: -.035em; text-wrap: balance; }
:root[data-s="x1"] .svw1-lead { max-width: 34em; }

:root[data-s="x1"] .svw1__route { margin: 0; padding: 0; list-style: none; }
:root[data-s="x1"] .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 */
:root[data-s="x1"] .svw1__stap::before {
  content: ""; position: absolute; left: calc(var(--nr) / 2 - 1.5px); top: 0; bottom: 0; width: 3px; background: var(--gips-diep);
}
:root[data-s="x1"] .svw1__route > .svw1__stap:first-child::before { top: var(--pad); }
/* a hairline between the stops, from the words on */
:root[data-s="x1"] .svw1__stap::after {
  content: ""; position: absolute; left: calc(var(--nr) + var(--gap)); right: 0; bottom: 0; height: 1px; background: var(--kalk-rand);
}
:root[data-s="x1"] .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;
}
:root[data-s="x1"] .svw1__n svg { width: 26px; height: 26px; fill: var(--kalk-wit); }
:root[data-s="x1"] .svw1__tekst { grid-column: 2; min-width: 0; }
:root[data-s="x1"] .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;
}
:root[data-s="x1"] .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; }
:root[data-s="x1"] .svw1__woorden p:last-child { margin-bottom: 0; }
:root[data-s="x1"] .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 */
:root[data-s="x1"] .svw1__stap--kaal .svw1__tekst { display: contents; }
:root[data-s="x1"] .svw1__stap--kaal .svw1-h3 { grid-column: 2; }
:root[data-s="x1"] .svw1__stap--kaal .svw1__woorden { grid-column: 3; padding-top: 12px; }
:root[data-s="x1"] .svw1-rij { --kap: 420px; }
/* one upright photo beside: its column is as wide as the photo, the words get the rest */
:root[data-s="x1"] .svw1__stap--smal { grid-template-columns: var(--nr) minmax(0, 1fr) min(42%, calc(420px * var(--som))); }
:root[data-s="x1"] .svw1__woorden .svw1-lijst { margin-top: 18px; }

/* the list as sentences, ruled, the part that is broken in bold */
:root[data-s="x1"] .svw1-lijst { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--lood); }
:root[data-s="x1"] .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;
}
:root[data-s="x1"] .svw1-lijst li::first-letter { text-transform: uppercase; }
:root[data-s="x1"] .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 */
:root[data-s="x1"] .svw1__stap--slot { padding-bottom: 0; }
:root[data-s="x1"] .svw1__stap--slot::before { bottom: auto; height: calc(var(--pad) + 30px); }
:root[data-s="x1"] .svw1__stap--slot::after { display: none; }
:root[data-s="x1"] .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);
}
:root[data-s="x1"] .svw1__slot .svw1-h3 { margin: 0 0 12px; color: var(--kalk-wit); }
:root[data-s="x1"] .svw1__slottekst p { margin: 0; max-width: 30em; font-size: clamp(17px, 1.3vw, 18.5px); line-height: 1.55; color: var(--gips-licht); }
:root[data-s="x1"] .svw1__slot .pair::after { box-shadow: 0 0 0 3px var(--lood); }
:root[data-s="x1"] .svw1 .svw1__slot .svw-noot { color: var(--gips); }
:root[data-s="x1"] .svw1 .svw1__slot .svw-buren { color: var(--gips-licht); }
:root[data-s="x1"] .svw1 .svw1__slot .svw-buren a { color: var(--kalk-wit); text-decoration-color: var(--dakpan-licht); }
:root[data-s="x1"] .svw1__slottekst a { color: var(--kalk-wit); text-decoration-color: var(--dakpan-licht); }   /* a link in the band's own text (10-16) */

/* the foot left the section on 10-12: the job's series is the Projecten block after it (projecten.css) */

@media (max-width: 960px) {
  :root[data-s="x1"] .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 */
  :root[data-s="x1"] .svw1__stap { --nr: 46px; grid-template-columns: var(--nr) minmax(0, 1fr); }
  :root[data-s="x1"] .svw1__kant { grid-column: 2; padding-top: 22px; }
  :root[data-s="x1"] .svw1__stap--kaal .svw1__woorden { grid-column: 2; padding-top: 0; }
  :root[data-s="x1"] .svw1__n { font-size: 21px; box-shadow: 0 0 0 5px var(--kalk); }
  :root[data-s="x1"] .svw1__n svg { width: 21px; height: 21px; }
  :root[data-s="x1"] .svw1-h3 { margin-top: 6px; }
  :root[data-s="x1"] .svw1__slot { grid-template-columns: minmax(0, 1fr); }
  :root[data-s="x1"] .svw1__stap--smal { grid-template-columns: var(--nr) minmax(0, 1fr); }
}
@media (max-width: 560px) {
  :root[data-s="x1"] .svw1__stap { --nr: 38px; --gap: 14px; --pad: 34px; }
  :root[data-s="x1"] .svw1__n { font-size: 18px; box-shadow: 0 0 0 4px var(--kalk); }
  :root[data-s="x1"] .svw1__n svg { width: 18px; height: 18px; }
  :root[data-s="x1"] .svw1-h3 { margin-top: 3px; font-size: 23px; }
  :root[data-s="x1"] .svw1__stap--kaal .svw1-h3 { margin-bottom: 14px; }
  :root[data-s="x1"] .svw1-pull { font-size: 20px; }
  :root[data-s="x1"] .svw1-lijst li { font-size: 17.5px; padding: 13px 0 14px; }
  /* the call takes the whole width under the house */
  :root[data-s="x1"] .svw1__slot { grid-column: 1 / -1; margin-top: 18px; padding: 24px 18px 26px; }
  :root[data-s="x1"] .svw1__stap--slot .svw1__n { grid-column: 1; }
}