/* ======================================================================
   Studio · keuzeronde 29-09 · alles gescoped onder .st-*
   1 Kop (optie B, drie achter de pas groter) · 2 De pas (optie I, Stapel)
   3 Hoe we werken (optie B, nachtblauw) · 4 Onze eigen merken (optie C,
   Rouchelli + Salento.com). Alle lichte vlakken op --paper.
   Beginstanden alleen met html.motion; zonder Motion zet studio.js
   html.st-still en staat alles meteen goed.
   ====================================================================== */

/* gedeeld */
.st-sent{font-family:var(--f-display);font-weight:700;font-stretch:90%;text-transform:none;letter-spacing:-.025em;line-height:1.04;text-wrap:balance;color:var(--ink)}
.st-sent>span{display:block}
.st-h2{font-size:clamp(2rem,1.2rem + 2.4vw,3.6rem);line-height:1.06}
.st-lede{font-size:1.1rem;line-height:1.6;color:var(--ink-soft);max-width:34em}
.st-ph{overflow:hidden}
.st-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 24%}
.st-role{font-size:.88rem;color:var(--delft);font-weight:600;margin-top:4px}
html.motion:not(.st-still) [data-st]{opacity:0}

/* ---------- 1 · Kop: twee vaste gezichten ---------- */
.st-kop-in{grid-column:2/12;display:flex;flex-direction:column;align-items:center;text-align:center}
.st-kop-h{font-size:clamp(2.3rem,1.2rem + 3.6vw,5rem);max-width:15em}
.page-head .st-kop-lead{margin:24px auto 0;color:var(--ink-soft);max-width:36em}
.st-duo{display:grid;grid-template-columns:repeat(2,minmax(0,300px));gap:clamp(24px,5vw,96px);justify-content:center;margin-top:clamp(40px,5vw,72px)}
.st-p{display:flex;flex-direction:column;align-items:center}
.st-p .st-ph{width:240px;max-width:100%;aspect-ratio:4/5}
.st-name{font-family:var(--f-display);font-weight:700;font-size:1.35rem;letter-spacing:-.015em;margin-top:18px;color:var(--ink)}
.st-what{font-size:.95rem;color:var(--ink-soft);margin-top:8px;line-height:1.5;max-width:20em}
.st-act{margin-top:clamp(36px,4vw,56px)}
/* de drie achter de pas: echt groter dan eerst, nog steeds duidelijk kleiner dan Stefan en Wouter */
.st-rest{display:flex;flex-direction:column;align-items:center;width:min(100%,640px);margin-top:clamp(40px,5vw,64px);padding-top:32px;border-top:1px solid var(--line)}
.st-rest-t{font-size:.95rem;color:var(--ink-soft)}
.st-trio{display:grid;grid-template-columns:repeat(3,minmax(0,148px));gap:clamp(16px,3vw,40px);justify-content:center;margin-top:24px}
.st-trio li{display:flex;flex-direction:column;align-items:center}
.st-trio .st-ph{width:100%;aspect-ratio:4/5}
.st-tn{font-family:var(--f-display);font-weight:700;font-size:1.05rem;letter-spacing:-.01em;margin-top:12px;color:var(--ink)}
.st-tr{font-size:.85rem;color:var(--delft);font-weight:500}
@media(max-width:899px){.st-kop-in{grid-column:1/-1}}
@media(max-width:560px){
  .st-duo{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .st-p .st-ph{width:100%;max-width:170px}
  .st-what{font-size:.9rem}
  .st-trio{grid-template-columns:repeat(3,minmax(0,104px));gap:14px}
}

/* ---------- 2 · De pas: optie I "Stapel" (29-09) ----------
   Vijf kaarten blijven een voor een staan en schuiven over elkaar. Elke kaart stopt 14 px lager
   dan de vorige, zodat de randen netjes zichtbaar blijven. Ruimte: de gewone .sec-ritme.
   De sticky-stand geldt alleen met html.motion; zonder beweging (html.st-still) is het een rustige lijst. */
.st-head{text-align:center;max-width:44rem;margin:0 auto}
.st-head .st-lede{margin:20px auto 0}
.st-stapel{--hdr:72px;--m-top:calc(var(--hdr) + 14px);--c-top:calc(var(--hdr) + 60px);--c-step:14px;
  position:relative;max-width:960px;margin:clamp(48px,6vw,88px) auto 0}
.st-stack{list-style:none;margin:0;padding:0;display:grid;gap:32px}
.st-card{position:relative;z-index:1}
.st-card-in{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,52px);align-items:center;
  padding:clamp(18px,2.4vw,28px);background:var(--paper);border:1px solid rgba(47,74,122,.24);
  box-shadow:0 1px 2px rgba(22,32,48,.06),0 30px 50px -38px rgba(22,32,48,.5);transform-origin:50% 0}
.st-card .st-ph{aspect-ratio:4/5;width:min(100%,calc((100svh - var(--c-top) - 4 * var(--c-step) - 88px) * .8));justify-self:center;margin:0}
.st-card .st-ph img{object-position:50% 50%}
.st-ct{padding-right:clamp(0px,2vw,24px)}
.st-num{display:flex;align-items:baseline;gap:14px;margin:0 0 18px}
.st-roll{display:inline-flex;overflow:hidden;height:1em;font-family:var(--f-display);font-weight:700;font-stretch:90%;font-size:clamp(2.6rem,1.8rem + 2vw,3.8rem);line-height:1;letter-spacing:-.03em;font-variant-numeric:lining-nums tabular-nums;color:var(--delft)}
.st-roll .st-dg{display:block;height:1em}
.st-roll .st-dg>span{display:block;height:1em}
.st-post{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--delft)}
.st-sh{font-family:var(--f-display);font-weight:700;font-stretch:90%;font-size:clamp(1.5rem,1.1rem + 1.1vw,2.1rem);letter-spacing:-.018em;line-height:1.1;text-wrap:balance;color:var(--ink)}
.st-t{margin-top:12px;line-height:1.6;color:var(--ink);max-width:30em;text-wrap:pretty}
.st-who{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);font-size:.84rem;color:var(--ink-soft)}
.st-veil{position:absolute;inset:-1px;z-index:6;background:var(--paper);opacity:0;pointer-events:none}
/* voortgang: "01 / 05", een delft lijn en de post; alleen in de bewegende stand */
.st-meter{display:none}
html.motion:not(.st-still) .st-meter{position:sticky;top:var(--m-top);z-index:0;display:flex;align-items:center;gap:16px;height:28px;margin-bottom:18px;
  font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.st-meter b{font-weight:700;color:var(--delft)}
.st-meter-l{position:relative;flex:1;height:1px;background:var(--line)}
.st-meter-l i{position:absolute;inset:0;background:var(--delft);transform:scaleX(0);transform-origin:left}
.st-meter-p{min-width:7.5em;text-align:right;color:var(--delft)}
/* de stapel */
html.motion:not(.st-still) .st-stack{gap:clamp(56px,12vh,120px);padding-bottom:10vh}
html.motion:not(.st-still) .st-end{margin-top:clamp(16px,2vw,32px)}   /* de rustruimte onder de laatste kaart telt al mee */
html.motion:not(.st-still) .st-card{position:sticky;top:calc(var(--c-top) + var(--i) * var(--c-step))}
html.motion:not(.st-still) .st-card-in{will-change:transform}
.st-end{text-align:center;margin-top:clamp(48px,6vw,80px);margin-bottom:-12px}
.st-end .tl,.st-side .tl{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:500}
@media(max-width:899px){
  .st-stapel{--m-top:calc(var(--hdr) + 8px);--c-top:calc(var(--hdr) + 48px);--c-step:8px}
  .st-card-in{grid-template-columns:1fr;gap:18px;padding:14px 14px 18px}
  .st-card .st-ph{aspect-ratio:1/1;width:100%}
  /* 14-10 mobieltest: met .st-card ervoor, anders won .st-card .st-ph img (50% 50%) en viel de onderste regel van de menukaart half weg;
     02 = nieuwe uitsnede van de merkgids (alleen de rechterpagina, woordmerk en vier logovlakken heel) */
  .st-card .st-ph-1 img{object-position:50% 40%}
  .st-card .st-ph-2 img{object-position:50% 65%}
  .st-card .st-ph-3 img{object-position:50% 50%}   /* website op de telefoon (keuken-04); 58% sneed de bovenkant van de telefoon af */
  .st-card .st-ph-4 img{object-position:50% 50%}   /* 20-10 nieuw: Instagram (filmposter Brasserie Ansjovis) */
  .st-card .st-ph-5 img{object-position:50% 100%}   /* atelier, de menukaart (keuken-03); 14-10 ronde 2: de onderrand heel in beeld */
  .st-ct{padding:0 4px}
  .st-num{margin-bottom:8px}
  .st-roll{font-size:2.2rem}
  .st-sh{font-size:1.45rem}
  .st-t{margin-top:8px;font-size:.97rem;line-height:1.55}
  .st-who{margin-top:12px;padding-top:10px}
  html.motion:not(.st-still) .st-meter{margin-bottom:12px;gap:12px;font-size:.74rem}
  .st-meter-p{min-width:6.5em}
  html.motion:not(.st-still) .st-stack{gap:48px;padding-bottom:8vh}
}
/* 14-10 mobieltest: tablet (600-899 px) als tussenvorm van desktop: beeld (4:5) en tekst naast elkaar.
   Vijf vierkante foto's van 690 px onder elkaar waren ruim 4.600 px scrollen. */
@media(min-width:600px) and (max-width:899px){
  .st-card-in{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:28px;padding:16px}
  .st-card .st-ph{aspect-ratio:4/5}
  .st-ct{padding:0 12px 0 0}
}

/* ---------- 3 · Hoe we werken: één huis, één gezicht (nachtblauw) ---------- */
.st-werk .st-fig{grid-column:1/6;margin:0;aspect-ratio:4/5;overflow:hidden}
.st-fig img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.st-body{grid-column:7/13;align-self:center}
.st-werk .st-h2{color:var(--on-ink)}
.st-p-lede{color:var(--on-ink-soft);margin-top:20px;font-size:clamp(1.05rem,1rem + .25vw,1.2rem);line-height:1.6;max-width:32em}
.st-tlw{position:relative;margin-top:clamp(32px,4vw,48px)}
.st-vrail{position:absolute;left:21px;top:24px;bottom:24px;   /* 14-10 mobieltest: studio.js zet top/bottom precies op het midden van 01 en 05 */
width:1px;background:rgba(47,74,122,.18)}
.st-vrail i{position:absolute;inset:0;background:var(--riviera);transform-origin:top}
html.motion:not(.st-still) .st-vrail i{transform:scaleY(0)}
.st-tlw li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:18px;align-items:start;padding:10px 0}   /* 14-10 mobieltest: rondje op de kop, niet op het midden van kop + omschrijving */
html.motion:not(.st-still) .st-tlw li{opacity:0}
/* 29-09: geen portretten meer onder de kop; een klein delft-nummer op de lijn */
.st-tlw .st-n{margin-top:-1px;position:relative;justify-self:center;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--paper);box-shadow:0 0 0 1px rgba(47,74,122,.3),0 0 0 6px var(--paper);font-style:normal;font-size:.72rem;font-weight:600;letter-spacing:.04em;font-variant-numeric:lining-nums tabular-nums;color:var(--riviera)}
.st-tlw b{display:block;font-weight:600;color:var(--on-ink);text-wrap:balance}   /* 14-10 mobieltest: geen los "website" op 320 */
.st-tlw span{display:block;color:var(--on-ink-soft);font-size:.95rem;line-height:1.45}
.st-werk-act{margin-top:clamp(32px,4vw,48px)}
.st-werk :focus-visible{outline-color:var(--riviera)}
@media(max-width:899px){
  .st-werk .st-fig,.st-body{grid-column:1/-1}
  .st-werk .st-fig{aspect-ratio:3/2}
  .st-fig img{object-position:50% 22%}
  .st-body{margin-top:40px}
}

/* ---------- 4 · Onze eigen merken: de vraag aan tafel ---------- */
.st-merken>.sec{padding-bottom:0}
.st-top{grid-column:3/11;text-align:center}
.st-q{font-size:clamp(2.2rem,1.2rem + 3vw,4.4rem);line-height:.95}
.st-top .st-lede{margin:22px auto 0;max-width:30em}
.st-stage{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(24px,5vw,96px);align-items:center;margin-top:clamp(48px,5vw,88px)}
.st-side{max-width:22em}
.st-sl{justify-self:end;text-align:right}
.st-sr{justify-self:start}
.st-th{width:clamp(104px,9vw,136px);aspect-ratio:4/5;overflow:hidden;margin-bottom:22px}
.st-sl .st-th{margin-left:auto}
.st-th img{width:100%;height:100%;object-fit:cover}
.st-big{font-family:var(--f-display);font-weight:800;font-stretch:72%;text-transform:uppercase;letter-spacing:-.005em;font-variant-numeric:lining-nums tabular-nums;font-size:clamp(2.6rem,1.4rem + 3.2vw,5rem);line-height:.9;color:var(--ink)}
/* 29-09: beide kolommen gelijk: duimnagel, grote naam, kernregel, één feitregel, tekst, link */
.st-stat{margin-top:18px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.st-stat-n{display:block;font-family:var(--f-display);font-weight:700;font-stretch:90%;font-size:clamp(1.35rem,1.1rem + .6vw,1.7rem);letter-spacing:-.015em;line-height:1.1;font-variant-numeric:lining-nums tabular-nums;color:var(--ink)}
.st-arr{color:var(--delft);font-weight:500}
.st-stat .st-count{display:inline-block;min-width:5.3ch;text-align:right}
/* de twee kanten delen hun rijen (subgrid), zodat duimnagel, naam, kernregel, feitregel, tekst en link op één hoogte staan */
@media(min-width:900px){
  .st-stage{grid-template-rows:repeat(6,auto);row-gap:0}
  .st-side{display:grid;grid-row:1/span 6;grid-template-rows:subgrid;align-self:center}
  .st-side>.st-th{align-self:end}
  .st-sp{align-self:start;text-wrap:balance}
  .st-side>.tl{align-self:start;justify-self:start}
  .st-sl>.tl{justify-self:end}
  .st-phw{grid-row:1/span 6;grid-column:2;align-self:center}
  .st-sl{grid-column:1}.st-sr{grid-column:3}
}
.st-stat-l{display:block;margin-top:4px;font-size:.88rem;color:var(--ink-soft)}
.st-k{margin-top:10px;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--delft);font-weight:600}
.st-sp{margin-top:12px;color:var(--ink-soft)}
.st-side .tl{margin-top:6px}
.st-phw{margin:0}
.st-phone{margin-inline:auto;width:clamp(220px,20vw,290px);border:10px solid var(--ink);border-radius:34px;overflow:hidden;background:var(--ink)}
.st-phone img{width:100%;height:auto;border-radius:24px}
.st-cap{margin-top:14px;text-align:center;font-size:.8rem;color:var(--ink-soft)}
html.motion:not(.st-still) .st-stage>*{opacity:0}
@media(max-width:899px){
  .st-top{grid-column:1/-1}
  .st-stage{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:48px}
  .st-sl,.st-sr{justify-self:center;text-align:center}
  .st-phw{order:-1}
  .st-sl .st-th,.st-sr .st-th{margin-inline:auto}
}

/* 29-09 · mobiele review */
/* Stefan en Wouter op smalle telefoons onder elkaar (kolommen van 130 px braken de rol over drie regels) */
@media(max-width:374px){
  .st-duo{grid-template-columns:minmax(0,1fr);max-width:240px;margin-inline:auto}
}

/* 29-09: echte woordmerken i.p.v. getypte namen; zelfde kaphoogte in beide kolommen, in inkt op beige */
.st-merken{--wm-cap:clamp(2.2rem,1rem + 2.6vw,3rem)}
.st-big .st-wm{display:block;width:auto;color:var(--ink);overflow:visible}
.st-wm-r{height:calc(var(--wm-cap)*142/120)}
.st-wm-s{height:var(--wm-cap);margin-block:calc(var(--wm-cap)*11/120)}
.st-sl .st-wm{margin-left:auto}
.st-links{display:flex;flex-wrap:wrap;column-gap:24px;align-self:start}
@media(max-width:899px){.st-side .st-wm{margin-inline:auto}.st-links{justify-content:center}}

/* 29-09 (eigenaar): beide merken even groot geschreven. De duimnagels vallen weg (Salento stond er
   dubbel, Rouchelli alleen als foto); de woordmerken dragen de kolom. 18.400 staat groot als kerngetal
   onder Rouchelli, gespiegeld aan Puglia. De tweede merkscan-knop vlak boven die van de voet vervalt. */
.st-merken .st-th{display:none}
.st-merken .st-stat-n{font-size:clamp(1.7rem,1.2rem + 1.3vw,2.4rem)}
@media(max-width:899px){.st-merken .st-links{margin-bottom:-12px}}