/* Journal · structuur naar de Rouchelli-journal (eigenaar 29-09: "meer in deze stijl, qua structuur,
   maar pas de Merkfundatie-stijl toe"). Archivo + DM Sans, één beige, accenten in blauw.
   .jn-idx = index (journal.html) · .ja = artikel (journal-commissie.html) · .jn-post = de Journal per e-mail.
   Beweging in pages/journal.js (alleen zachte onthullingen). */

.jn{--jn-hair:rgba(22,32,48,.16)}
.jn .wrap{max-width:1320px}   /* smaller dan de rest, zoals een tijdschriftpagina */
.jn-meta{margin:0;color:var(--ink-soft)}   /* maat uit .small */
.jn-meta i,.jn-by i,.jn-k i,.ja-krui i{font-style:normal;margin:0 .35em;color:var(--delft);opacity:.6}
.jn-soon{color:var(--delft)}
.jn-by{margin:10px 0 0;color:var(--ink-soft)}
.jn-pijl{display:inline-flex;align-items:center;gap:8px;min-height:44px}   /* tekstlink: letter en kleur uit .tl */
.jn-pijl .arr{transition:transform .25s var(--ease)}
.jn-pijl:hover .arr{transform:translateX(4px)}

/* ansichtkaartrand, zelfde maat en techniek als het blok onderaan knoppen.css */
.jn-pk{position:relative;display:block;overflow:hidden;border-radius:0;box-shadow:var(--pk-s);background:var(--ink)}
.jn-pk::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  box-shadow:inset 0 0 0 var(--pk-w) var(--pk-c),inset 0 0 0 calc(var(--pk-w) + 1px) rgba(22,32,48,.07)}
.jn-pk img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}

/* ================= INDEX ================= */
.jn-mast{padding-top:var(--ritme-kop);text-align:center}
.jn-h1,.ja-h1{font-size:clamp(2.3rem,1.2rem + 3.6vw,5rem);line-height:1.04;letter-spacing:-.025em;color:var(--ink)}   /* = h1 Over ons en Werkwijze */
.jn-h1{margin:0}
.jn-sub{margin:24px auto 0;max-width:34em;color:var(--ink-soft);text-wrap:balance}   /* maat uit .lead */

.jn-cats{margin-top:clamp(36px,4vw,56px)}
.jn-cats__rij{display:flex;flex-wrap:wrap;justify-content:center;gap:0 clamp(14px,2.4vw,36px);padding:6px 0;border-block:1px solid var(--jn-hair)}
.jn-cat{position:relative;min-height:44px;padding:0 2px;font-size:.95rem;font-weight:500;color:var(--ink-soft);transition:color .25s var(--ease)}
.jn-cat::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:1px;background:var(--delft);transform:scaleX(0);transition:transform .3s var(--ease)}
.jn-cat:hover,.jn-cat[aria-pressed="true"]{color:var(--ink)}
.jn-cat[aria-pressed="true"]::after{transform:scaleX(1)}
/* 14-10 mobieltest: op een smalle telefoon viel 'Verkoop' alleen op de tweede regel; nu twee rijen van drie */
@media(max-width:520px){.jn-cats__rij{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;justify-items:center;column-gap:clamp(20px,7vw,40px)}}

.jn-nu{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);margin-top:var(--ritme-std)}
.jn-feat{position:relative;padding-right:clamp(28px,4vw,64px);border-right:1px solid var(--jn-hair)}
.jn-feat__ph{aspect-ratio:3/2}
.jn-feat:hover .jn-feat__ph img{transform:scale(1.025)}
.jn-feat__tx{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--g) clamp(24px,3vw,48px);margin-top:clamp(22px,2.2vw,32px)}
.jn-feat__t{margin:10px 0 0;text-wrap:balance}   /* maat uit .statement.h2 */
.jn-feat__t a{color:inherit;text-decoration:none;transition:color .25s var(--ease)}
.jn-feat__t a::after{content:"";position:absolute;inset:0;z-index:6}
.jn-feat:hover .jn-feat__t a,.jn-feat__t a:focus-visible{color:var(--delft)}
.jn-feat__t a:focus-visible{outline:none}
.jn-feat:has(a:focus-visible){outline:2px solid var(--delft);outline-offset:10px}
.jn-dek{margin:0;color:var(--ink-soft);text-wrap:pretty}   /* maat uit .lead */

.jn-nummer__h{padding:0 0 12px;border-bottom:1px solid var(--jn-hair)}   /* .side-h zoals op Werkwijze */
.jn-nummer__rij li{padding:18px 0;border-bottom:1px solid var(--jn-hair)}
/* tussenkop: Archivo 700 op 90%, 1.3rem, zoals .ai-st op Werkwijze */
.jn-nt,.jn-lt,.ja-kaart__t{font-family:var(--f-display);font-weight:700;font-stretch:90%;letter-spacing:-.01em;font-size:1.3rem;line-height:1.2;color:var(--ink);text-wrap:pretty}
.jn-nt{margin:6px 0 0}
.jn-nummer .jn-pijl{margin-top:10px}

/* gefilterd: wat buiten het onderwerp valt, wordt stil (index) of verdwijnt (alle stukken) */
.jn-feat,.jn-nummer__rij li{transition:opacity .35s var(--ease)}
.jn-idx .is-stil{opacity:.28!important}

.jn-alle{margin-top:calc(var(--ritme-kort) - 12px)}
.jn-alle__kop{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:12px;border-bottom:1px solid var(--ink)}
.jn-telt{margin:0;color:var(--ink-soft)}
.jn-lijst{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(28px,4vw,64px)}
.jn-lijst li{display:grid;grid-template-columns:40px 1fr;align-items:baseline;gap:12px;padding:20px 0;border-bottom:1px solid var(--jn-hair)}
.jn-lijst li[hidden]{display:none}
.jn-n{font-size:1.1rem;line-height:1.2;color:var(--ink-soft)}   /* = .aw-n.num op Werkwijze */
.jn-lt{margin:0}
.jn-lt a{color:inherit;text-decoration:underline;text-decoration-color:rgba(47,74,122,.35);text-underline-offset:.16em;transition:color .25s var(--ease)}
.jn-lt a:hover,.jn-lt a:focus-visible{color:var(--delft);text-decoration-color:currentColor}
.jn-k{margin:6px 0 0;color:var(--ink-soft)}

.jn-schrijvers{margin-top:calc(var(--ritme-std) / 2);padding-top:calc(var(--ritme-std) / 2);border-top:1px solid var(--jn-hair)}
.jn-h2{margin:0}
.jn-intro{margin:20px 0 0;color:var(--ink-soft);text-wrap:pretty}
.jn-duo{display:grid;grid-template-columns:repeat(2,minmax(0,26em));gap:clamp(32px,5vw,80px);margin-top:clamp(40px,4.4vw,64px)}
/* grote tussenkop (naam, tussenkop in het artikel): zoals .vrg-q op Werkwijze */
.jn-naam,.ja-body h2:not(.side-h){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)}
.jn-naam{margin:0}
.jn-rol{margin-top:4px;font-size:.88rem;font-weight:600;color:var(--delft)}   /* = .st-role op Over ons */
.jn-schr>p:not(.jn-rol){margin-top:14px;color:var(--ink-soft)}
.jn-schr .jn-pijl{margin-top:8px}

/* ================= DE JOURNAL PER E-MAIL (index en artikel) ================= */
/* TODO-koppeling staat als HTML-opmerking in de bron; pages/journal.js vangt het versturen af */
.jn-post{margin-top:var(--ritme-std)}
.jn-post__in{max-width:34rem;margin-inline:auto;padding-block:clamp(40px,4.4vw,56px);text-align:center;border-block:1px solid var(--jn-hair)}
.jn-post__h{margin:0;font-stretch:90%}   /* maat uit .statement.h3; .h3 zet 100%, koppen blijven op 90% */
.jn-post__s{margin:12px auto 0;max-width:28em;color:var(--ink-soft);line-height:1.6}
.jn-post__rij{display:flex;gap:10px;margin-top:24px}
.jn-post__rij input{flex:1;min-width:0;height:50px;padding:0 16px;border:1px solid var(--delft);border-radius:0;background:var(--paper);color:var(--ink);font:inherit;font-size:16px}
.jn-post__rij input::placeholder{color:var(--ink-soft);opacity:.8}
.jn-post__rij input:focus-visible{outline:2px solid var(--delft);outline-offset:2px}
.jn-post__rij .btn{flex:none;border:0;cursor:pointer}
.jn-post__p{margin:14px auto 0;max-width:30em;color:var(--ink-soft)}
.jn-post__ok{margin:10px 0 0;font-size:.9rem;color:var(--delft);min-height:1.4em}
.jn-post__ok:empty{min-height:0;margin:0}

/* ================= ARTIKEL ================= */
.ja-hero{margin:0;height:clamp(300px,42vw,620px);overflow:hidden;background:var(--ink)}
.ja-hero img{width:100%;height:100%;object-fit:cover;object-position:center 55%}
.ja-art{--kol:min(100%,44rem)}
.ja-kop,.ja-body{width:var(--kol);margin-inline:auto}
.ja-kop{padding-top:calc(var(--ritme-kort) - 13px)}
/* het enige kleine label van de Journal, zoals .dr-label ("De merkscan") op Contact */
.ja-krui{margin:0;font-size:.95rem;font-weight:500;letter-spacing:0;text-transform:none;line-height:1.4;color:var(--delft)}
.ja-krui a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.3em;transition:text-decoration-color .25s var(--ease)}
.ja-krui a:hover,.ja-krui a:focus-visible{text-decoration-color:currentColor}
.ja-h1{margin:4px 0 0;text-wrap:balance}
.ja-dek{margin:24px 0 0;color:var(--ink-soft);text-wrap:pretty}   /* maat uit .lead */
.ja-meta{display:flex;flex-wrap:wrap;gap:12px clamp(24px,3vw,44px);margin:28px 0 0;padding:14px 0;border-block:1px solid var(--jn-hair)}
.ja-meta dt{color:var(--ink-soft)}   /* maat uit .small, gewone zinsletter */
.ja-meta dd{margin:2px 0 0;color:var(--ink)}

.ja-body{padding-top:clamp(32px,3.6vw,48px)}
.ja-body{line-height:1.65}   /* broodtekst 17 px zoals .vrg-a; aanloop uit .lead */
.ja-body p,.ja-body li{color:var(--ink)}
.ja-body p+p{margin-top:1em}
.ja-body .ja-lead{max-width:none}
.ja-body h2:not(.side-h){margin:2em 0 .5em}
.ja-body ul{margin-top:.4em;padding-left:1.1em;list-style:none}
.ja-body ul li{position:relative;margin-bottom:.6em}
.ja-body ul li::before{content:"";position:absolute;left:-1.1em;top:.8em;width:6px;height:1px;background:var(--delft)}
.ja-body sup{font-size:.68em;line-height:0;color:var(--delft);font-weight:600;margin-left:1px}
.ja-body .ja-getal{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:32px 0 0;padding:16px 0;border-block:1px solid var(--jn-hair);font-size:.9rem;line-height:1.5;color:var(--ink-soft)}
.ja-getal .num{font-size:2rem;line-height:1;color:var(--delft)}
.ja-quote{margin:clamp(48px,5vw,72px) 0;text-align:center}
.ja-quote p{margin:0 auto;max-width:18em;font-family:var(--f-display);font-weight:700;font-stretch:90%;letter-spacing:-.02em;font-size:clamp(1.8rem,1.3rem + 1.6vw,2.7rem)!important;line-height:1.1!important;color:var(--ink)!important;text-wrap:balance}
.ja-quote cite{display:block;margin-top:16px;font-style:normal;font-size:.9rem;line-height:1.5;color:var(--ink-soft)}
.ja-cta{margin-top:clamp(40px,4.4vw,56px);padding-top:28px;border-top:1px solid var(--jn-hair)}
.ja-cta .btn{margin-top:6px}
.ja-body .ja-cta__n{color:var(--ink-soft)}
.ja-body .ja-bron-h{margin:3em 0 .6em;padding-top:0}   /* .side-h zoals op Werkwijze */
.ja-bronnen{list-style:decimal;padding-left:1.3em}
.ja-body .ja-bronnen li{line-height:1.5;margin-bottom:.45em;color:var(--ink-soft)}
.ja-bronnen a{color:var(--ink-soft);text-underline-offset:.16em;text-decoration-color:rgba(47,74,122,.35)}
.ja-bronnen a:hover{color:var(--delft)}

.ja-ook{margin-top:calc(var(--ritme-std) / 2);padding-top:calc(var(--ritme-std) / 2);border-top:1px solid var(--jn-hair)}
.ja-ook__kop{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.ja-ook__h{margin:0}   /* maat uit .statement.h2 */
.ja-kaarten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px);margin-top:clamp(36px,4vw,56px)}
.ja-kaart__ph{margin:0 0 20px;aspect-ratio:4/3}
.ja-kaart__t{margin:6px 0 0;text-wrap:balance}
.ja-kaart__d{margin:10px 0 0;color:var(--ink-soft);line-height:1.6;text-wrap:pretty}

@media (max-width:899px){
  .jn-nu{grid-template-columns:1fr}
  .jn-feat{padding-right:0;border-right:0}
  .jn-feat__tx{grid-template-columns:1fr;gap:16px}
  .jn-lijst{grid-template-columns:1fr}
  .jn-duo{grid-template-columns:1fr}
  .ja-kaarten{grid-template-columns:1fr}
  .jn-post__rij{flex-direction:column}
  .jn-post__rij input{flex:none}
  .jn-post__rij .btn{justify-content:center}
}

/* ---------- beginstand voor beweging (alleen met html.motion; zonder JS of bij reduced motion staat alles er meteen) ---------- */
html.motion .jn [data-jn]{opacity:0;transform:translateY(12px)}
html.motion .jn .jn-feat__ph{opacity:0}
html.motion:not(.jn-js) .jn [data-jn],html.motion:not(.jn-js) .jn .jn-feat__ph{animation:jn-toon 0s 2s forwards}
@keyframes jn-toon{to{opacity:1;transform:none}}
html.jn-still .jn [data-jn],html.jn-still .jn .jn-feat__ph{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .jn-pk img,.jn-cat::after,.jn-pijl .arr,.jn-feat,.jn-nummer__rij li{transition:none}
  .jn-feat:hover .jn-feat__ph img{transform:none}
}

/* 29-09 · lettertype gelijk aan de rest van de site (tweede ronde, eigenaar: "die lettertypes kloppen niet op de journal").
   Elke tekstrol gebruikt de rol van Over ons en Werkwijze, zoveel mogelijk met de gedeelde klassen uit v6.css:
   h1            .statement + maat van de h1 op Over ons/Werkwijze (Archivo 700, 90%, zinsletter)
   sectiekop     .statement.h2          nieuwsbriefkop .statement.h3
   tussenkop     Archivo 700 90%, 1.3rem (.ai-st) · grote tussenkop clamp tot 1.75rem (.vrg-q)
   aanloop       .lead                  brood 17 px, regel 1.65
   meta          .small, zinsletter, ink-soft    kolomkop .side-h (delft)    links .tl    knop .btn
   één klein label in kapitalen: het kruimelpad boven de artikelkop (zoals "De merkscan" op Contact). */

/* 14-10 mobieltest: 'Drie stukken in de maak' op tablet (600–899 px): beeld links, tekst rechts, in plaats van
   drie foto's van 700 px breed onder elkaar. De laatste rij (1fr) vangt de hoogte van het beeld op. */
@media (min-width:600px) and (max-width:899px){
  .ja-kaarten{gap:40px}
  .ja-kaart{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);grid-template-rows:auto auto auto auto 1fr;column-gap:clamp(24px,4vw,36px)}
  .ja-kaart__ph{grid-row:1/-1;margin:0;align-self:start}
  .ja-kaart>:not(.ja-kaart__ph){grid-column:2}
  .ja-kaart>.jn-meta{margin-top:-4px}
}

/* ritme (29-09, ritme-secties.md B6/B7) */
.ja-body .ja-bronnen li:last-child{margin-bottom:0}
@media(max-width:899px){.jn-nummer .jn-pijl{margin-bottom:-12px}}
@media(min-width:900px){.jn-schr .jn-pijl{margin-bottom:-12px}}

/* 20-10: Journal met één stuk; zonder "In dit nummer" krijgt het stuk van nu de hele breedte */
.jn-nu--solo{grid-template-columns:minmax(0,1fr)}