/* ===== Jeroen van Geel — merklaag. Laadt NA built/style.css, werkt zonder rebuild. =====
   Kleuren uit het landschap: Kalk, Zand, Veen, Mos, Baksteen, Lucht.
   Letters: Schibsted Grotesk (alles) + IBM Plex Mono (labels, meta, bijschriften). */

/* ---------- Lettertypes (lokaal, geen externe requests) ---------- */
@font-face{
  font-family:"Schibsted Grotesk";
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url("../fonts/schibsted-grotesk.woff2") format("woff2");
}
@font-face{
  font-family:"Schibsted Grotesk";
  font-style:italic;
  font-weight:400 900;
  font-display:swap;
  src:url("../fonts/schibsted-grotesk-italic.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
}

:root{
  --jvg-sans:"Schibsted Grotesk", system-ui, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, monospace;
}

/* Typografie-keuze 'Schibsted Grotesk' (Ghost Admin -> Design -> Typography) */
:root:is([data-font="Schibsted Grotesk"]){
  --font-body:var(--gh-font-body, "Schibsted Grotesk", system-ui, sans-serif);
  --font-heading:var(--gh-font-heading, "Schibsted Grotesk", system-ui, sans-serif);
  --font-weight-variable:var(--gh-font-weight-variable, 500);
  --font-weight-weight-body:var(--gh-font-weight-body, 400);
  --font-weight-weight-heading:var(--gh-font-weight-heading, 500);
}

/* ---------- Kleurschema 'Jeroen van Geel' ---------- */
:root:is([data-theme="Jeroen van Geel"]){
  /* Merkkleuren — pas hier centraal aan */
  --jvg-kalk:#F7F5EF;      /* ondergrond                      */
  --jvg-zand:#E3D9C6;      /* lijnen, kaders                  */
  --jvg-lucht:#C9D3D3;     /* zachte tint                     */
  --jvg-veen:#1E231F;      /* koppen, donkere vlakken         */
  --jvg-ink:#2B302B;       /* bodytekst                       */
  --jvg-mos:#4F6150;       /* labels, metadata                */
  --jvg-steen:#5A5F58;     /* bijschriften                    */
  --jvg-mist:#B9BDB4;      /* scheidingsstip (·)              */
  --jvg-baksteen:#A04A2C;  /* accent: links, details          */
  --jvg-baksteen-licht:#E3A584; /* accent op donker           */
  --jvg-kop:var(--jvg-veen);    /* koppen in artikelen          */

  --base:var(--jvg-veen);
  --accent:var(--jvg-baksteen);
  --btn:var(--jvg-veen);
  --btn-text:var(--jvg-kalk);
  --link:var(--jvg-baksteen);
  --primary:var(--jvg-kalk);
  --secondary:#EFEBE1;
  --tertiary:var(--jvg-zand);
  --contrast:var(--jvg-kalk);
  --heading:var(--jvg-veen);
  --text:var(--jvg-ink);
  --meta:var(--jvg-mos);
  --submenu:var(--jvg-veen);
  --submenu-text:var(--jvg-kalk);
  --footer-primary:var(--jvg-veen);
  --footer-heading:var(--jvg-kalk);
  --footer-text:var(--jvg-kalk);
  --footer-btn:var(--jvg-baksteen-licht);
  --footer-btn-text:var(--jvg-veen);
  --border:var(--jvg-zand);
  --shadow:#141714;
  --overlay:#141714;
  --fancy-icon:"\2014";     /* — als ornament i.p.v. ruit */
  --ghost-accent-color:#A04A2C;

  /* Dark mode */
  --dark-primary:#1E231F;
  --dark-secondary:#2A302B;
  --dark-tertiary:#3D423C;
  --dark-heading:var(--jvg-kalk);
  --dark-text:#DAD6CC;
  --dark-meta:#B9BDB4;
  --dark-submenu:var(--dark-secondary);
  --dark-submenu-text:var(--jvg-kalk);
  --dark-footer-primary:#151915;
  --dark-footer-heading:var(--jvg-kalk);
  --dark-footer-text:#DAD6CC;
  --dark-footer-btn:var(--jvg-baksteen-licht);
  --dark-footer-btn-text:var(--jvg-veen);
  --dark-btn:var(--jvg-kalk);
  --dark-btn-text:var(--jvg-veen);
  --dark-link:var(--jvg-baksteen-licht);
  --dark-border:var(--dark-tertiary);
}
[data-theme="Jeroen van Geel"].dark{
  --accent:var(--jvg-baksteen-licht);
  --jvg-kop:#F7F5EF;       /* koppen in de tekst worden licht  */
  --jvg-ink:#DAD6CC;
  --jvg-mos:#B9BDB4;
  --jvg-steen:#B9BDB4;
  --jvg-mist:#5A5F58;
}

/* Gewichten: rustig. Bold/strong altijd 600 */
[data-theme="Jeroen van Geel"] b,
[data-theme="Jeroen van Geel"] strong{ font-weight:600; }

/* ---------- Knoppen: volle pil (veen), secundair omlijnd ---------- */
[data-theme="Jeroen van Geel"] .var-primary,
[data-theme="Jeroen van Geel"] .var-secondary,
[data-theme="Jeroen van Geel"] .var-footer{
  font-family:var(--jvg-sans);
  font-weight:500;
  font-size:15px;
  letter-spacing:0;
  text-transform:none;
  border-radius:999px;
  transition:background-color .16s, color .16s, border-color .16s;
}
[data-theme="Jeroen van Geel"] .var-primary{
  background-color:var(--color-btn);
  color:var(--color-btn-text);
  border:1.5px solid var(--color-btn);
}
[data-theme="Jeroen van Geel"] .var-primary:hover{
  opacity:1;
  background-color:var(--color-accent);
  border-color:var(--color-accent);
  color:var(--jvg-kalk);
}
[data-theme="Jeroen van Geel"] .var-secondary{
  background-color:transparent;
  color:var(--color-heading);
  border:1.5px solid color-mix(in srgb, var(--color-heading) 40%, transparent);
}
[data-theme="Jeroen van Geel"] .var-secondary:hover{
  opacity:1;
  border-color:var(--color-heading);
}
[data-theme="Jeroen van Geel"] .var-footer{
  background-color:var(--color-footer-btn);
  color:var(--color-footer-btn-text);
  border:1.5px solid var(--color-footer-btn);
}
[data-theme="Jeroen van Geel"] .var-footer:hover{
  opacity:1;
  background-color:var(--color-footer-text);
  border-color:var(--color-footer-text);
}

/* ---------- Mono (IBM Plex Mono) op labels, meta, bijschriften — altijd kapitalen ---------- */
[data-theme="Jeroen van Geel"] .fancy-title{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--jvg-mos);
}
[data-theme="Jeroen van Geel"] .text-meta{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
[data-theme="Jeroen van Geel"] .figcaption{
  font-family:var(--font-mono);
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* ---------- Hoogtelijnen (contourvelden) ---------- */
.jvg-contour{ position:absolute; pointer-events:none; z-index:0; }
.jvg-contour svg{ display:block; overflow:visible; }

/* ---------- Navigatie: rustig, gewone zinsletters ---------- */
[data-theme="Jeroen van Geel"] .navbar nav a,
[data-theme="Jeroen van Geel"] .navbar nav button{
  font-family:var(--jvg-sans);
  font-weight:400;
  font-size:15px;
  letter-spacing:0;
  text-transform:none;
}

/* ---------- Woordmerk: de naam zelf ---------- */
[data-theme="Jeroen van Geel"] .jvg-sitename{
  font-family:var(--jvg-sans);
  font-weight:500;
  font-size:22px;
  letter-spacing:-0.015em;
  text-transform:none;
  color:var(--color-heading);
  transition:color .16s;
}
[data-theme="Jeroen van Geel"] a:hover .jvg-sitename,
[data-theme="Jeroen van Geel"] .jvg-sitename:hover{
  opacity:1;
  color:var(--color-accent);
}

/* ---------- Homepage: hero, manifest, footer-CTA ---------- */
[data-theme="Jeroen van Geel"] .jvg-hero{ max-width:44rem; }
[data-theme="Jeroen van Geel"] .jvg-hero-title{
  font-family:var(--jvg-sans);
  font-weight:500;
  font-size:clamp(2.25rem, 7vw, 64px);
  line-height:1.04;
  letter-spacing:-0.03em;
}
[data-theme="Jeroen van Geel"].dark .jvg-hero-cta{
  background-color:var(--color-btn);
  color:var(--color-btn-text);
  border-color:var(--color-btn);
}

[data-theme="Jeroen van Geel"] .jvg-manifesto{ max-width:44rem; }
[data-theme="Jeroen van Geel"] .jvg-manifesto-text{
  font-family:var(--jvg-sans);
  font-weight:400;
  font-size:clamp(1.375rem, 4.5vw, 32px);
  line-height:1.3;
  letter-spacing:-0.015em;
}
/* Woord in baksteen in het manifest-veld: <span class="jvg-em">woord</span> */
[data-theme="Jeroen van Geel"] .jvg-em{ color:var(--color-accent); }

[data-theme="Jeroen van Geel"] .jvg-footer-cta{
  font-family:var(--jvg-sans);
  font-weight:400;
  font-size:clamp(1.375rem, 4.5vw, 32px);
  line-height:1.3;
  letter-spacing:-0.015em;
}

/* ---------- Artikel-typografie (post & page) ---------- */
[data-theme="Jeroen van Geel"] .gh-content > p,
[data-theme="Jeroen van Geel"] .gh-content > ul,
[data-theme="Jeroen van Geel"] .gh-content > ol,
[data-theme="Jeroen van Geel"] .gh-content > blockquote{ max-width:66ch; }

/* Metadata: één centrale regel, mono, mos, items met stip */
[data-theme="Jeroen van Geel"] .jvg-meta{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:baseline;
  font-family:var(--font-mono);
  font-weight:400;
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--jvg-mos);
}
[data-theme="Jeroen van Geel"] .jvg-meta .jvg-meta-item{ color:var(--jvg-mos); }
[data-theme="Jeroen van Geel"] .jvg-meta a{ color:inherit; }
[data-theme="Jeroen van Geel"] .jvg-meta .jvg-meta-item:not(:first-child)::before{
  content:"\00B7";
  color:var(--jvg-mist);
  margin:0 .6em;
  letter-spacing:0;
}

/* Koppen in de tekst */
[data-theme="Jeroen van Geel"] .prose :where(h2):not(:where(.kg-card *)){
  font-family:var(--jvg-sans);
  font-weight:600;
  font-size:28px;
  line-height:1.2;
  letter-spacing:-0.02em;
  color:var(--jvg-kop);
}
[data-theme="Jeroen van Geel"] .prose :where(h3):not(:where(.kg-card *)){
  font-family:var(--jvg-sans);
  font-weight:600;
  font-size:21px;
  line-height:1.25;
  letter-spacing:-0.01em;
  color:var(--jvg-kop);
}
[data-theme="Jeroen van Geel"] .prose :where(h4):not(:where(.kg-card *)){
  font-family:var(--jvg-sans);
  font-weight:600;
  font-size:17px;
  line-height:1.3;
  color:var(--jvg-kop);
}

/* Bodytekst */
[data-theme="Jeroen van Geel"] .prose :where(p):not(:where(blockquote *)):not(:where(.kg-card *)),
[data-theme="Jeroen van Geel"] .prose :where(li):not(:where(.kg-card *)){
  font-family:var(--jvg-sans);
  font-weight:400;
  font-size:18px;
  line-height:1.68;
  color:var(--jvg-ink);
}

/* Links: baksteen, dunne onderlijn die bij hover volledig oplicht */
[data-theme="Jeroen van Geel"] .prose :where(a):not(:where(.kg-card *)){
  color:var(--color-accent);
  text-decoration-line:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb, var(--color-accent) 35%, transparent);
  transition:text-decoration-color .16s ease;
}
[data-theme="Jeroen van Geel"] .prose :where(a):not(:where(.kg-card *)):hover{
  opacity:1;
  text-decoration-color:var(--color-accent);
}

/* Opsommingen: em-dash en nummers in baksteen */
[data-theme="Jeroen van Geel"] .prose :where(ul)>li::marker{
  content:"\2014\00A0\00A0";
  color:var(--color-accent);
}
[data-theme="Jeroen van Geel"] .prose :where(ol)>li::marker{ color:var(--color-accent); }

/* Verticaal ritme: alles via margin-top */
[data-theme="Jeroen van Geel"] .prose>:not(:last-child){ margin-block-end:0; }
[data-theme="Jeroen van Geel"] .prose>*{ margin-top:24px; }
[data-theme="Jeroen van Geel"] .prose :where(h2):not(:where(.kg-card *)){ margin-top:52px; }
[data-theme="Jeroen van Geel"] .prose :where(h3):not(:where(.kg-card *)){ margin-top:36px; }
[data-theme="Jeroen van Geel"] .prose :where(h4):not(:where(.kg-card *)){ margin-top:28px; }
[data-theme="Jeroen van Geel"] .prose :where(h2):not(:where(.kg-card *))+*{ margin-top:16px; }
[data-theme="Jeroen van Geel"] .prose :where(h3):not(:where(.kg-card *))+*{ margin-top:12px; }
[data-theme="Jeroen van Geel"] .prose :where(h4):not(:where(.kg-card *))+*{ margin-top:10px; }
[data-theme="Jeroen van Geel"] .prose>:first-child{ margin-top:0; }

/* Quote: groot, rustig, gecentreerd; dunne baksteen-lijn erboven */
[data-theme="Jeroen van Geel"] .prose .kg-blockquote-alt,
[data-theme="Jeroen van Geel"] .prose :where(blockquote):not(.kg-blockquote-alt){
  grid-column:regular;
  width:80%;
  margin-inline:auto;
  border-inline-start-width:0;
  padding-inline-start:0;
  font-family:var(--jvg-sans);
  font-style:normal;
  font-weight:400;
  font-size:30px;
  line-height:1.3;
  letter-spacing:-0.02em;
  color:var(--jvg-kop);
  text-align:center;
}
[data-theme="Jeroen van Geel"] .prose .kg-blockquote-alt::before,
[data-theme="Jeroen van Geel"] .prose :where(blockquote):not(.kg-blockquote-alt)::before{
  content:"";
  display:block;
  width:40px;
  height:2px;
  margin:0 auto 24px;
  background:var(--color-accent);
}
@media (max-width:640px){
  [data-theme="Jeroen van Geel"] .prose .kg-blockquote-alt,
  [data-theme="Jeroen van Geel"] .prose :where(blockquote):not(.kg-blockquote-alt){ font-size:23px; width:100%; }
}
[data-theme="Jeroen van Geel"] .prose :where(blockquote):not(.kg-blockquote-alt) :where(p){
  font-family:inherit; font-style:inherit; font-weight:inherit; font-size:inherit;
  line-height:inherit; letter-spacing:inherit; color:inherit; text-align:inherit;
}
/* Bronregel onder de quote: <cite> of <span class="jvg-quote-source"> */
[data-theme="Jeroen van Geel"] .prose .kg-blockquote-alt cite,
[data-theme="Jeroen van Geel"] .prose blockquote cite,
[data-theme="Jeroen van Geel"] .prose .jvg-quote-source{
  display:block;
  margin-top:16px;
  font-family:var(--font-mono);
  font-style:normal;
  font-weight:400;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--jvg-mos);
}
[data-theme="Jeroen van Geel"] .prose .kg-blockquote-alt cite::before,
[data-theme="Jeroen van Geel"] .prose blockquote cite::before,
[data-theme="Jeroen van Geel"] .prose .jvg-quote-source::before{ content:"\2014\00A0"; }

/* Bijschrift bij beeld */
[data-theme="Jeroen van Geel"] .prose figcaption,
[data-theme="Jeroen van Geel"] .gh-content figcaption,
[data-theme="Jeroen van Geel"] .figcaption{
  font-family:var(--font-mono);
  font-weight:400;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--jvg-steen);
  text-align:center;
  margin-top:13px;
}

/* ---------- Titels ---------- */
[data-theme="Jeroen van Geel"] .jvg-title-grotesk{ font-family:var(--jvg-sans); }

[data-theme="Jeroen van Geel"] .jvg-post-title,
[data-theme="Jeroen van Geel"] .jvg-post-title--journal,
[data-theme="Jeroen van Geel"] .jvg-page-title{
  font-family:var(--jvg-sans);
  font-weight:500;
  font-size:56px;
  line-height:1.06;
  letter-spacing:-0.03em;
}
@media (max-width:640px){
  [data-theme="Jeroen van Geel"] .jvg-post-title,
  [data-theme="Jeroen van Geel"] .jvg-post-title--journal,
  [data-theme="Jeroen van Geel"] .jvg-page-title{ font-size:36px; }
}

/* Excerpt onder een pagina-titel */
[data-theme="Jeroen van Geel"] .jvg-page-excerpt{
  font-family:var(--jvg-sans);
  font-weight:400;
  font-size:19px;
  line-height:1.6;
  color:var(--jvg-ink);
  text-align:center;
}

/* Excerpt in een kaart: korte teaser */
[data-theme="Jeroen van Geel"] .jvg-card-excerpt{
  margin-top:6px;
  font-family:var(--jvg-sans);
  font-weight:400;
  font-size:15px;
  line-height:1.5;
  color:var(--jvg-mos);
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
[data-theme="Jeroen van Geel"] .jvg-card-excerpt:empty{ display:none; }

/* ---------- Hoofdnavigatie: • tussen de items, huidige pagina cursief en lichter ---------- */
[data-theme="Jeroen van Geel"] .jvg-nav{ column-gap:0; row-gap:.25rem; }
[data-theme="Jeroen van Geel"] .jvg-nav > li:not(:last-child)::after{
  content:"\2022";            /* • */
  margin-inline:.65em;
  color:var(--jvg-mist);
  font-style:normal;
}
[data-theme="Jeroen van Geel"].dark .jvg-nav > li:not(:last-child)::after{ color:#5A5F58; }
[data-theme="Jeroen van Geel"] .navbar nav a[aria-current="page"],
[data-theme="Jeroen van Geel"] [data-mobile-menu] nav a[aria-current="page"]{
  font-style:italic;
  color:color-mix(in srgb, var(--color-heading) 55%, var(--color-primary));
}
/* Inschrijfknop rechtsboven */
[data-theme="Jeroen van Geel"] .navbar .btn-sm.var-primary{ font-size:14px; }

/* ---------- Pagina Schrijven: intro + inschrijven boven de teksten ---------- */
[data-theme="Jeroen van Geel"] .jvg-writing-intro{ max-width:42rem; }
[data-theme="Jeroen van Geel"] .jvg-writing-description,
[data-theme="Jeroen van Geel"] .jvg-writing-description p{
  font-family:var(--jvg-sans);
  font-size:18px;
  line-height:1.65;
  color:var(--color-text);
}
[data-theme="Jeroen van Geel"] .jvg-writing-description p + p{ margin-top:1em; }
[data-theme="Jeroen van Geel"] .jvg-writing-description a{
  color:var(--color-accent);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}

/* ---------- Tag-overzichtspagina's (journal, struinsels, twil, artikel) ---------- */
/* Meer ruimte tussen de rijen */
[data-theme="Jeroen van Geel"] .jvg-tag-grid{ row-gap:3.5rem; }
@media (min-width:640px){
  [data-theme="Jeroen van Geel"] .jvg-tag-grid{ row-gap:5rem; }
}
/* Bij mouse-over verder inzoomen op het beeld, rustig en vloeiend */
[data-theme="Jeroen van Geel"] .jvg-tag-grid .group img{
  transition:scale .8s cubic-bezier(.2,.7,.2,1);
}
[data-theme="Jeroen van Geel"] .jvg-tag-grid .group:hover img,
[data-theme="Jeroen van Geel"] .jvg-tag-grid .group:focus-within img{
  scale:1.08;
}
@media (prefers-reduced-motion:reduce){
  [data-theme="Jeroen van Geel"] .jvg-tag-grid .group:hover img,
  [data-theme="Jeroen van Geel"] .jvg-tag-grid .group:focus-within img{ scale:1; }
}

/* ---------- Homepage: subheader-tekst onder de hero-titel ---------- */
[data-theme="Jeroen van Geel"] .jvg-hero-text,
[data-theme="Jeroen van Geel"] .jvg-hero-text p{
  font-family:var(--jvg-sans);
  font-weight:400;
  font-style:normal;
  font-size:19px;
  line-height:1.6;
  color:var(--color-text);
}
[data-theme="Jeroen van Geel"] .jvg-hero-text p + p{ margin-top:.9em; }
[data-theme="Jeroen van Geel"] .jvg-hero-text a{
  color:var(--color-accent);
  text-decoration-line:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb, var(--color-accent) 40%, transparent);
  transition:text-decoration-color .16s ease;
}
[data-theme="Jeroen van Geel"] .jvg-hero-text a:hover{
  opacity:1;
  text-decoration-color:var(--color-accent);
}

/* ---------- Homepage: sectietitel 'Vers van de pers' ---------- */
[data-theme="Jeroen van Geel"] .jvg-section-title{
  font-family:var(--jvg-sans);
  font-weight:500;
  font-size:clamp(1.75rem, 3.5vw, 2.5rem);
  line-height:1.1;
  letter-spacing:-0.025em;
  text-align:center;
  color:var(--color-heading);
}

/* Homepage: extra lucht boven 'Vers van de pers' */
[data-theme="Jeroen van Geel"] .jvg-home-latest{ padding-top:2rem; }
@media (min-width:640px){
  [data-theme="Jeroen van Geel"] .jvg-home-latest{ padding-top:3rem; }
}
/* Homepage: afstand tussen titel 'Vers van de pers' en de rij */
[data-theme="Jeroen van Geel"] .jvg-home-latest .jvg-section-title{ margin-bottom:2.25rem; }
@media (min-width:640px){
  [data-theme="Jeroen van Geel"] .jvg-home-latest .jvg-section-title{ margin-bottom:3.5rem; }
}