/* ======================================================================
   Aanpak · secties 5 tot en met 8 (keuzeronde 2, 29-09)
   5 Voor wie (optie A)  · 6 Atelier (optie A)  · 7 Zo begin je (optie E)
   8 Vragen aan de bar (optie C)
   Alle lichte secties op dezelfde beige als de pagina (--paper); alleen
   papieren objecten (de menukaart) zijn wit. Beweging: pages/aanpak-2.js.
   Zonder script of met reduced motion staat alles meteen goed.
   ====================================================================== */

/* ---------- 5 · Voor wie: de lijst van zaken ---------- */
.wie .grid{align-items:start}
.wie-pic{grid-column:1/6;position:sticky;top:96px;margin:0}
.wie-frame{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--paper)}
.wie-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wie-cap{display:flex;justify-content:space-between;gap:12px;margin-top:12px;font-size:.85rem;color:var(--ink-soft)}
.wie-count{font-variant-numeric:tabular-nums;color:var(--ink)}
.wie-body{grid-column:7/13}
.wie-h{font-size:clamp(2rem,1.2rem + 2.4vw,3.6rem);line-height:.98;max-width:13em;text-wrap:balance}
.wie-lead{margin-top:22px;color:var(--ink-soft)}
.wie-list{margin-top:clamp(36px,4vw,56px);border-top:1px solid var(--ink)}
.wie-list li{border-bottom:1px solid var(--line)}
.wie-list button{display:grid;grid-template-columns:2.4em minmax(0,1fr) auto;align-items:baseline;gap:12px;width:100%;min-height:54px;padding:12px 0 10px;text-align:left;color:var(--ink-soft);transition:color .3s var(--ease)}
.wie-list .n{font-size:.8rem;font-weight:500;letter-spacing:.04em;font-variant-numeric:tabular-nums;transition:color .3s var(--ease)}
.wie-list .t{font-family:var(--f-display);font-weight:800;font-stretch:72%;text-transform:uppercase;letter-spacing:-.005em;font-size:clamp(1.35rem,1rem + 1vw,2rem);line-height:1}
.wie-list small{font-size:.85rem;text-align:right;color:var(--ink-soft);opacity:0;transition:opacity .3s var(--ease)}
.wie-list button:hover,.wie-list button[aria-pressed="true"]{color:var(--ink)}
.wie-list button[aria-pressed="true"] .n{color:var(--delft)}
.wie-list button:hover small,.wie-list button:focus-visible small,.wie-list button[aria-pressed="true"] small{opacity:1}
.wie-list button:focus-visible{outline-offset:-2px}
.wie-close{margin-top:clamp(36px,4vw,56px);max-width:32em}
.wie-cta{margin-top:28px}
@media(max-width:899px){
  /* mobiel: foto direct onder de inleiding, zodat tikken op een naam zichtbaar iets doet */
  .wie-body{display:contents}
  .wie-body>*{grid-column:1/-1}
  .wie-h{order:1}.wie-lead{order:2}.wie-pic{order:3}.wie-list{order:4}.wie-close{order:5}.wie-cta{order:6}
  .wie-pic{position:static;margin-top:32px}
  .wie-frame{aspect-ratio:3/2}
  .wie-list{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--g);margin-top:28px}
  .wie-list button{grid-template-columns:1.9em minmax(0,1fr);gap:6px;min-height:52px}
  .wie-list .t{font-size:1.1rem;line-height:1.05}
  .wie-list small{display:none}
}

/* ---------- 6 · Atelier: de kaart op tafel ---------- */
.atl .grid{align-items:center}
.atl-txt{grid-column:1/6}
.atl-obj{grid-column:7/13;margin:0}
.atl-h{font-family:var(--f-display);font-weight:700;font-stretch:90%;letter-spacing:-.02em;font-size:clamp(2rem,1.2rem + 2.6vw,3.8rem);line-height:1.06;max-width:11em;text-wrap:balance}
.atl-lead{margin-top:24px;max-width:28em}
.atl-kinds{margin-top:28px;font-size:.95rem;color:var(--ink-soft)}
.atl-cta{margin-top:36px}
.atl-note{margin-top:14px;font-size:.85rem;color:var(--ink-soft)}
.atl-stage{position:relative;padding-bottom:16%}
.atl-ph{width:80%;margin-left:auto;aspect-ratio:4/5;overflow:hidden;background:var(--paper)}
.atl-ph img{display:block;width:100%;height:112%;object-fit:cover;margin-top:-6%}
/* de kaart: katoenpapier met een dunne blauwe binnenlijn, iets scheef op tafel; eronder de wijnkaart */
.atl-card,.atl-sheet{position:absolute;left:0;bottom:0;width:56%;aspect-ratio:5/7}
.atl-sheet{background:#ECE4D6;translate:10% -4%;rotate:5deg;box-shadow:0 1px 2px rgba(22,32,48,.08),0 16px 34px -24px rgba(22,32,48,.4)}
.atl-card{container-type:inline-size;rotate:-2deg;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:5.4% 4.6%;color:var(--ink);
  /* padding in % (van de tafel): cqi op de kaart zelf zou naar het venster kijken, niet naar de kaart */
  background:linear-gradient(rgba(251,248,242,.72),rgba(251,248,242,.72)),#FBF8F2 url(../img/aanpak/atelier-katoen.webp) 0 0/280px 280px;
  box-shadow:0 1px 1px rgba(22,32,48,.08),0 2px 6px -2px rgba(22,32,48,.12),0 24px 48px -30px rgba(22,32,48,.5)}
.atl-card::before,.atl-sheet::before{content:"";position:absolute;inset:2.5% 3.4%;border:1px solid rgba(47,74,122,.3);pointer-events:none}
.atl-zaak{font-family:var(--f-display);font-weight:800;font-stretch:72%;text-transform:uppercase;letter-spacing:.2em;padding-left:.2em;font-size:5.4cqi;line-height:1}
.atl-sub{margin-top:1.8cqi;font-size:3.1cqi;font-style:italic;color:var(--ink-soft)}
.atl-ill{width:54%;height:auto;margin:3.4cqi 0 1cqi;color:var(--delft)}
.atl-ill path{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.atl-gang{width:100%;margin-top:3.6cqi;display:grid;gap:1.8cqi}
.atl-g{display:flex;align-items:center;justify-content:center;gap:2.4cqi;font-size:max(9px,2.5cqi);font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--delft)}
.atl-g::before,.atl-g::after{content:"";width:8cqi;height:1px;background:currentColor;opacity:.35}
.atl-dish b{display:block;font-family:var(--f-display);font-weight:600;font-stretch:92%;letter-spacing:-.005em;font-size:4.1cqi;line-height:1.2}
.atl-dish span{display:block;margin-top:.4cqi;font-size:max(10.5px,3.1cqi);font-style:italic;line-height:1.35;color:var(--ink-soft)}
.atl-foot{margin-top:4.4cqi;font-size:max(9.5px,2.6cqi);letter-spacing:.04em;color:var(--ink-soft)}
.atl-cap{margin-top:20px;font-size:.85rem;color:var(--ink-soft);text-align:right}
@media(max-width:899px){
  .atl-obj{margin-top:56px;max-width:460px;width:100%;justify-self:center}
  .atl-stage{padding-bottom:48%}
  .atl-ph{width:76%}
  .atl-card,.atl-sheet{width:72%}
  /* klein op de telefoon: gerechten groter, de omschrijvingen vallen weg */
  .atl-zaak{font-size:6.4cqi}.atl-sub{font-size:3.9cqi}.atl-g{font-size:max(9px,3.3cqi)}
  .atl-dish b{font-size:5.4cqi}.atl-dish span,.atl-foot{display:none}
  .atl-gang{margin-top:4.6cqi}
  .atl-cap{text-align:left}
}

/* ---------- 7 · Zo begin je: kies je moment (beige, 29-09) ---------- */
.begin .grid{align-items:center;row-gap:56px}
.begin-obj{grid-column:1/6;margin:0}
.begin-fr{aspect-ratio:4/5;overflow:hidden;background:var(--paper)}
.begin-fr img{width:100%;height:100%;object-fit:cover}
.begin-cap{margin-top:14px;font-size:.88rem;color:var(--ink-soft)}
.begin-tx{grid-column:7/13}
.begin-h{font-size:clamp(2.4rem,1.3rem + 3.2vw,4.4rem);line-height:.95;color:var(--ink);max-width:10em;text-wrap:balance}
.begin-lead{margin-top:20px;color:var(--ink-soft)}
.begin-ask{margin-top:34px;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--delft)}
.begin-keus{margin-top:12px;border-top:1px solid var(--ink);max-width:560px}
.begin-keus li{border-bottom:1px solid var(--line)}
.begin-keus a{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:baseline;gap:18px;min-height:72px;padding:20px 12px 16px;color:var(--ink);text-decoration:none;transition:background .3s var(--ease),color .3s var(--ease),padding .3s var(--ease)}
.begin-keus b{font-family:var(--f-display);font-weight:800;font-stretch:72%;text-transform:uppercase;letter-spacing:-.005em;font-size:clamp(1.6rem,1.2rem + 1.2vw,2.4rem);line-height:1}
.begin-keus span{font-size:.95rem;color:var(--ink-soft);transition:color .3s var(--ease)}
.begin-keus i{font-style:normal;font-size:1.2rem;color:var(--delft);transition:transform .3s var(--ease),color .3s var(--ease)}
.begin-keus a:hover,.begin-keus a:focus-visible{background:var(--ink);color:var(--on-ink);padding-left:20px;padding-right:20px}
.begin-keus a:hover span,.begin-keus a:focus-visible span{color:var(--on-ink-soft)}
.begin-keus a:hover i,.begin-keus a:focus-visible i{color:var(--riviera);transform:translateX(4px)}
.begin-keus a:focus-visible{outline:2px solid var(--delft);outline-offset:2px}
.begin-who{display:flex;align-items:center;gap:14px;margin-top:32px}
.begin-who img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none}
.begin-who b{display:block;font-weight:600;color:var(--ink)}
.begin-who span{display:block;font-size:.88rem;color:var(--ink-soft)}
.begin-note{margin-top:24px;max-width:34em;font-size:.9rem;line-height:1.6;color:var(--ink-soft)}
@media(prefers-reduced-motion:reduce){.begin-keus a,.begin-keus i,.begin-keus span{transition:none}.begin-keus a:hover i,.begin-keus a:focus-visible i{transform:none}}
@media(max-width:899px){
  .begin-obj{order:2}
  .begin-fr{aspect-ratio:4/3}
}
@media(max-width:480px){
  .begin-keus a{gap:12px;min-height:64px;padding:16px 8px 12px}
  .begin-keus span{font-size:.88rem}
}

/* ---------- 8 · Vragen aan de bar: het gesprek ---------- */
.vrg .grid{align-items:start}
.vrg-left{grid-column:1/6;position:sticky;top:96px}
.vrg-right{grid-column:7/13}
.vrg-h{font-family:var(--f-display);font-weight:700;font-stretch:90%;letter-spacing:-.02em;font-size:clamp(2rem,1.2rem + 2.2vw,3.4rem);line-height:1.06;max-width:12em;text-wrap:balance}
.vrg-fig{margin:clamp(28px,3vw,44px) 0 0}
.vrg-fr{aspect-ratio:4/5;overflow:hidden;background:var(--paper)}
.vrg-fr img{width:100%;height:100%;object-fit:cover}
.vrg-cap{margin-top:12px;font-size:.85rem;color:var(--ink-soft)}
.vrg-talk{border-top:1px solid var(--ink)}
.vrg-talk>li{padding:clamp(28px,3vw,40px) 0;border-bottom:1px solid var(--line)}
.vrg-who{font-size:.75rem;font-weight:600;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.vrg-q{margin-top:6px;max-width:22em;font-family:var(--f-display);font-weight:700;font-stretch:90%;letter-spacing:-.015em;font-size:clamp(1.3rem,1.05rem + .7vw,1.75rem);line-height:1.2;color:var(--ink);scroll-margin-top:96px}
.vrg-q:focus{outline:0}
.vrg-q:focus-visible{outline:2px solid var(--delft);outline-offset:4px}
.vrg-st{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;margin-top:20px}
.vrg-av{width:44px;height:44px;border-radius:50%;object-fit:cover}
.vrg-stefan{color:var(--delft)}
.vrg-a{margin-top:6px;max-width:36em;line-height:1.65;color:var(--ink-soft)}
/* de puntjes liggen over het (nog onzichtbare) antwoord heen, zodat er bij het typen niets verschuift */
.vrg-st>div{position:relative}
.vrg-dots{display:flex;position:absolute;left:0;top:calc(.72rem * 1.4 + 8px);align-items:center;gap:5px;height:12px;margin:0;visibility:hidden}
.vrg-dots.on{visibility:visible}
.vrg-dots i{width:6px;height:6px;border-radius:50%;background:var(--ink-soft);opacity:.25}
.vrg-more-p{margin-top:24px}
.vrg-more-b{display:inline-flex;align-items:center;gap:.4em;min-height:44px;font-weight:600}
.vrg-end{margin-top:clamp(40px,4.5vw,64px);display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.vrg-end>span{font-size:.9rem;color:var(--ink-soft)}
@media(max-width:899px){
  .vrg-left{position:static}
  .vrg-right{margin-top:48px}
  .vrg-fr{aspect-ratio:3/2}
}

/* 29-09 · mobiele review: soorten zaken op 320 px, de langste namen (TROUWLOCATIE) blijven binnen de kolom */
@media(max-width:359px){
  .wie-list button{grid-template-columns:1.7em minmax(0,1fr);gap:6px}
  .wie-list .t{font-size:.95rem}
}
/* 320 px: "tweehonderd kamers." samen op de laatste regel */
@media(max-width:359px){.wie-h{font-size:1.7rem}}

/* ritme (29-09, ritme-secties.md B4): RUIM rond de slot-oproep */
#atelier{--r-onder:var(--ritme-ruim)}
#stap{--r-boven:var(--ritme-ruim);--r-onder:var(--ritme-ruim)}
#vragen{--r-boven:var(--ritme-ruim)}

/* 20-10 mobieltest */
@media(max-width:599px){
  /* keuzelijst: "STRANDPAVILJOEN" brak af als "STRAND-PAVILJOEN"; nu past het woord heel in de kolom */
  .wie-list button{grid-template-columns:1.5em minmax(0,1fr)}
  .wie-list .t{font-size:min(1.1rem,4.1vw);hyphens:manual}
  /* vragen: Stefans gezicht en naam op één regel, het antwoord eronder over de volle breedte (was een smalle kolom van 8 tot 11 regels) */
  .vrg-st{position:relative;grid-template-columns:36px minmax(0,1fr);gap:0 12px;align-items:center}
  .vrg-av{width:36px;height:36px}
  .vrg-st>div{display:contents}
  .vrg-st .vrg-who{grid-column:2}
  .vrg-st .vrg-dots{top:44px;left:0}   /* typpuntjes zweven onder het gezicht, zonder eigen ruimte in te nemen */
  .vrg-st .vrg-a{grid-column:1/-1;margin-top:10px}
}