/* Aanpak · secties 1 t/m 4 (keuzes eigenaar 29-09). Alleen deze vier secties; 5 t/m 8 staan in een eigen bestand.
   1 .ap-kop kop             gecentreerd: h1 en intro (29-09; de oude kop "Vier dingen" viel weg)
   2 .aw  wat je krijgt       optie A, nu vier rijen: merkgids, website, Instagram-advies (films) en atelier (foto)
   3 .ai  Instagram-advies    optie B "De weg van één post"
   4 .ad  een dag             optie A "De klok loopt mee"
   Alle lichte vlakken op --paper; nachtblauw alleen voor de dag. Beweging: pages/aanpak-1.js (Motion). */

/* 14-10 mobieltest: geen los woord op de laatste regel van lopende tekst (alleen in <main> van Werkwijze; geldt ook voor de secties in aanpak-2.css, niet in de voet).
   De lange vorm text-wrap-style, zodat een white-space:nowrap elders blijft staan; koppen houden hun text-wrap:balance. */
main :is(p,li,dd,figcaption,legend){text-wrap-style:pretty}
/* gedeeld: filmknop (tekstknop, ≥ 44 px hoog) */
.film-btn{min-height:44px;padding:0 2px;font-size:.86rem;color:var(--delft);text-decoration:underline;text-underline-offset:.2em;text-decoration-color:rgba(47,74,122,.4);flex:none;transition:text-decoration-color .25s var(--ease)}
.film-btn:hover,.film-btn:focus-visible{text-decoration-color:currentColor}

/* ---------- 1 · kop (29-09): gecentreerd, zelfde maat en ruimte als de kop van Over ons (.page-head) ---------- */
.ap-kop-in{grid-column:2/12;display:flex;flex-direction:column;align-items:center;text-align:center}
.ap-kop-h{font-family:var(--f-display);font-weight:700;font-stretch:90%;letter-spacing:-.025em;line-height:1.04;font-size:clamp(2.3rem,1.2rem + 3.6vw,5rem);max-width:13em;text-wrap:balance;color:var(--ink)}
.page-head .ap-kop-lead{margin:24px auto 0;color:var(--ink-soft);max-width:34em;text-wrap:balance}
@media(max-width:899px){.ap-kop-in{grid-column:1/-1}}
/* eerste scherm: de tekst wacht op het script (geen flits); valt het script weg, dan staat hij er na 3 s toch */
html.motion .ap-kop:not(.is-live) [data-ap]{opacity:0;animation:ap-safe 0s linear 3s forwards}
@keyframes ap-safe{to{opacity:1}}

/* ---------- 2 · wat je krijgt ---------- */
.aw-list{grid-column:1/7}
.aw-rows{border-bottom:1px solid var(--line)}
.aw-row{display:grid;grid-template-columns:3.2em minmax(0,1fr);column-gap:var(--g);padding:34px 0 38px;border-top:1px solid var(--line)}
.aw-n{font-family:var(--f-display);font-weight:800;font-stretch:72%;font-size:1.1rem;color:var(--ink-soft);padding-top:.35em;transition:color .4s var(--ease)}
.aw-t{font-family:var(--f-display);font-weight:800;font-stretch:72%;text-transform:uppercase;letter-spacing:-.005em;line-height:.95;font-size:clamp(2rem,1.4rem + 1.8vw,3.2rem);color:var(--ink-soft);transition:color .4s var(--ease)}
.aw-row.is-on .aw-t,.aw-row.is-on .aw-n{color:var(--ink)}
.aw-pl{font-family:var(--f-display);font-weight:700;font-size:1.15rem;color:var(--delft);margin-top:12px;text-wrap:balance}   /* 14-10 mobieltest: geen los woord ("geeft.", "gast.") */
.aw-row p{max-width:32em}
.aw-row p+p{margin-top:8px}
.aw-row ul{margin-top:16px}
.aw-row ul li{padding:7px 0 7px 22px;position:relative;border-top:1px solid rgba(214,202,181,.6)}
.aw-row ul li::before{content:"";position:absolute;left:0;top:1.05em;width:10px;height:1px;background:var(--delft)}
.aw-mob{display:none}
.aw-end{margin-top:36px;margin-bottom:-12px}
.aw+.wrap{padding-block:calc(var(--ritme-std) / 2)}
.aw+.wrap>.huis:first-child{margin-top:0}
.aw-end .tl,.aw-more .tl{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.aw-row .aw-more{margin-top:14px}
.aw-fig{grid-column:8/13;margin:0}
.aw-stick{position:sticky;top:104px}
.aw-frame{position:relative;aspect-ratio:4/5;background:var(--paper);overflow:hidden}
.aw-frame>video,.aw-frame>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.aw-frame>video.is-on,.aw-frame>img.is-on{opacity:1}
/* de atelierfoto is een foto, geen film: de ansichtkaartrand (knoppen.css, --pk-*) als rand op de foto zelf */
.aw-frame>img,.aw-mob.aw-foto{outline:var(--pk-w,10px) solid var(--pk-c,#FBF7F0);outline-offset:calc(-1 * var(--pk-w,10px))}
.aw-prog{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:14px}
.aw-prog span{height:2px;background:var(--line);overflow:hidden}
.aw-prog i{display:block;height:100%;background:var(--ink);transform-origin:left;transform:scaleX(0)}
.aw-prog span.is-done i{transform:scaleX(1)}
.aw-fig figcaption{display:flex;justify-content:space-between;gap:16px;align-items:center;font-size:.86rem;color:var(--ink-soft);margin-top:6px}
@media(max-width:899px){
  .aw-list{grid-column:1/-1}
  .aw-fig{display:none}
  .aw-mob{display:block;width:min(100%,340px);height:auto;margin:20px auto 0;aspect-ratio:4/5;object-fit:cover}   /* 14-10 mobieltest: gecentreerd in de kolom (was links) */
  .aw-row{grid-template-columns:1fr;row-gap:6px}
  .aw-n{padding-top:0}
  .aw-t,.aw-n{color:var(--ink)}
}
/* 14-10 mobieltest: op de tablet stonden de beelden links met een lege rechterhelft; nu gecentreerd en iets groter,
   even breed als de film bij Instagram-advies (.ai-film) */
@media(min-width:600px) and (max-width:899px){.aw-mob{width:min(100%,420px)}}

/* ---------- 3 · Instagram-advies ---------- */
.ai{scroll-margin-top:72px}
/* 14-10 mobieltest: de knop "Speel af" hing half over de hoek van de telefoon. Nu staat hij onder het beeld, rechts naast het
   onderschrift (zoals de filmknop bij "Wat je krijgt"). Daarom plakt de hele figuur (beeld, onderschrift en knop) en niet alleen
   het beeld; op een laag scherm wordt de figuur smaller, zodat de knop in beeld blijft. */
.ai-film{grid-column:1/6;margin:0;position:sticky;top:104px;align-self:start;width:min(100%,calc((100svh - 184px) * .8))}
.ai-box{position:relative;aspect-ratio:4/5;background:var(--paper);overflow:hidden}
.ai-box video{width:100%;height:100%;object-fit:cover}
.ai-pp{min-width:44px;min-height:44px;padding:0 14px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.ai-pp:hover{background:var(--ink);color:var(--paper)}
.ai-film figcaption{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:12px;font-size:.86rem;color:var(--ink-soft)}
.ai-body{grid-column:7/13}
.ai-label{padding-top:0}
.ai-h{margin-top:24px;font-family:var(--f-display);font-weight:700;font-stretch:90%;letter-spacing:-.02em;font-size:clamp(2rem,1.2rem + 2.4vw,3.6rem);line-height:1.06;text-wrap:balance}
.ai-lead{font-size:clamp(1.08rem,1rem + .3vw,1.25rem);line-height:1.6;color:var(--ink-soft);max-width:34em;margin-top:24px}
.ai-close{color:var(--ink)}
.ai-cta{margin-top:clamp(28px,3vw,40px)}
.ai-stepw{position:relative;margin-top:clamp(40px,5vw,64px)}
.ai-rail{position:absolute;left:23px;top:60px;bottom:60px;width:1px;background:var(--line)}
.ai-rail i{position:absolute;inset:0;background:var(--delft);transform-origin:top}
.ai-steps{border-top:1px solid var(--ink);position:relative}
.ai-steps li{display:grid;grid-template-columns:3.2em minmax(0,1fr);padding:28px 0;border-bottom:1px solid var(--line)}
/* het cijfer ligt op de lijn; de stap die je leest kleurt vol op (blauw vlak), de rest blijft leesbaar (AA) */
.ai-n{font-family:var(--f-display);font-weight:800;font-stretch:72%;font-size:2rem;line-height:1.2;color:var(--delft);background:var(--paper);width:1.45em;text-align:center;align-self:start;transition:background-color .4s var(--ease),color .4s var(--ease)}
.ai-st{font-family:var(--f-display);font-weight:700;font-stretch:90%;letter-spacing:-.01em;font-size:1.3rem;line-height:1.2;transition:color .4s var(--ease)}
.ai-steps p{margin-top:8px;color:var(--ink-soft);line-height:1.6;max-width:32em}
.motion .ai.is-live .ai-rail i{transform:scaleY(0)}
.motion .ai.is-live .ai-steps li .ai-st{color:var(--ink-soft)}
.motion .ai.is-live .ai-steps li.is-on .ai-st{color:var(--ink)}
.motion .ai.is-live .ai-steps li.is-on .ai-n{background:var(--delft);color:var(--paper)}
@media(max-width:899px){
  .ai-film,.ai-body{grid-column:1/-1}
  .ai-film{position:relative;top:auto;width:100%;max-width:420px;justify-self:center}   /* 14-10 mobieltest: gecentreerd, zoals de beelden bij "Wat je krijgt" */
  .ai-body{margin-top:48px}
}

/* ---------- 4 · een dag ---------- */
.ad-left{grid-column:1/6}
.ad-rows{grid-column:7/13}
.ad-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;color:var(--on-ink);text-wrap:balance}
.ad-lead{margin-top:18px;color:var(--on-ink-soft);max-width:26em;font-size:clamp(1.08rem,1rem + .3vw,1.25rem)}
.ad-stick{position:sticky;top:104px;margin-top:clamp(32px,4vw,56px)}
.ad-stack{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ink)}
.ad-stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.ad-stack img.is-on{opacity:1;z-index:1}
.ad-clock{display:flex;align-items:baseline;gap:18px;padding-top:16px}
.ad-digits{display:block;overflow:hidden;height:.95em;font-family:var(--f-display);font-weight:800;font-stretch:72%;letter-spacing:-.005em;line-height:.95;font-size:clamp(3.6rem,1.8rem + 4.4vw,6.8rem);color:var(--riviera)}
.ad-digits span{display:block}
.ad-place{font-weight:500;font-size:1rem;color:var(--on-ink)}
/* 29-09 · eigenaar: "iets korter op elkaar": rijen ± 45 % lager (was 44vh + 28 px), één rustige lijst.
   Ritme 29-09: tekst bovenaan de rij (flex-start), zodat elk tijdstip even ver onder zijn lijn staat. */
.ad-rows li{min-height:24vh;display:flex;flex-direction:column;justify-content:flex-start;padding:18px 0;border-bottom:1px solid rgba(244,238,228,.14)}
.ad-rows li:first-child{min-height:20vh}
.ad-t{font-size:.9rem;color:var(--on-ink-soft)}
.ad-t b{color:var(--on-ink);font-weight:600;margin-left:10px}
.ad-g{margin-top:6px;font-family:var(--f-display);font-weight:700;font-stretch:90%;letter-spacing:-.02em;font-size:clamp(1.3rem,1rem + .8vw,1.75rem);line-height:1.3;color:var(--on-ink)}
.ad-hh{margin-top:6px;color:var(--on-ink-soft);max-width:32em}
.ad-g,.ad-hh{text-wrap:pretty}   /* 14-10 mobieltest: geen los woord op de laatste regel ("duimpjes.") */
.ad-rows li.is-last .ad-g{color:var(--riviera)}
.ad-end{grid-column:7/13;display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:clamp(48px,6vw,88px)}
.ad-end small{font-size:.88rem;color:var(--on-ink-soft)}
@media(max-width:899px){
  .ad-left{display:contents}
  .ad-left>*,.ad-rows,.ad-end{grid-column:1/-1}
  .ad-stick{top:72px;z-index:2;background:var(--ink);display:flex;align-items:center;gap:16px;margin-top:28px;padding:10px 0 12px;border-bottom:1px solid rgba(244,238,228,.16)}
  .ad-stack{flex:0 0 76px;width:76px;aspect-ratio:1}
  .ad-clock{padding-top:0}
  .ad-digits{font-size:3.2rem}
  .ad-rows{margin-top:8px}
  .ad-rows li,.ad-rows li:first-child{min-height:0;padding:18px 0}
}

/* 29-09 · mobiele review: de plakkende klok op smalle telefoons; de plaatsnaam valt niet meer buiten de rand */
@media(max-width:420px){
  .ad-stick{gap:12px}
  .ad-stack{flex-basis:56px;width:56px}
  .ad-clock{min-width:0;flex-wrap:wrap;gap:0 10px}
  .ad-digits{font-size:2.6rem}
  .ad-place{font-size:.85rem}
}

/* 20-10 mobieltest: op de telefoon staat de Instagram-film ná de kop en de inleiding van "Zo komt één post op je Instagram"
   (stond ervoor en leek bij "Van het huis" te horen). Zelfde opbouw als de keuzelijst (.wie-body in aanpak-2.css). */
@media(max-width:899px){
  .ai-body{display:contents}
  .ai-body>*{grid-column:1/-1}
  .ai-label{order:1}.ai-h{order:2}.ai-lead{order:3}.ai-film{order:4;margin-top:36px}.ai-stepw{order:5}.ai-close{order:6}.ai-cta{order:7}
}