/* Beeld van Inge Groenen — eenvoudige statische site */
:root{
  --bg:#f6f4f1;
  --surface:#ffffff;
  --ink:#23262b;
  --ink-soft:#5c6169;
  --line:#e2ded8;
  --accent:#8a6a3f;        /* brons */
  --accent-dark:#6d5231;
  --header:#045184;         /* menubalk */
  --header-ink:#ffffff;
  --header-hover:#8dd1ca;   /* menu hover */
  --maxw:1120px;
  --radius:4px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.65;
}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* ---------- header ---------- */
.site-header{background:var(--header);color:var(--header-ink)}
.site-header a{color:var(--header-ink)}
.brand{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:22px 0 14px;
}
.brand__name{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.6rem,4vw,2.3rem);
  letter-spacing:.02em;margin:0;font-weight:400;
}
.brand__name a:hover{text-decoration:none}
.brand__tagline{color:#bcd7e8;font-size:.9rem}

.nav{border-top:1px solid rgba(255,255,255,.12)}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.nav li{position:relative}
.nav a{
  display:block;padding:14px 16px;font-size:.93rem;letter-spacing:.04em;
  text-transform:uppercase;background:none;border:0;color:var(--header-ink);
}
.nav a:hover{background:var(--header-hover);color:#045184;text-decoration:none}
.nav a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--header-hover)}

.nav .has-sub > ul{
  display:none;position:absolute;left:0;top:100%;z-index:20;
  background:var(--header);min-width:220px;
  box-shadow:0 1px 4px 0 rgba(0,0,0,.6);
}
.nav .has-sub:hover > ul,
.nav .has-sub:focus-within > ul{display:block}
.nav .has-sub > ul a{text-transform:none;letter-spacing:0;padding:10px 16px}

.nav-toggle{display:none}
.nav .has-sub > a::after{content:" ▾";font-size:.8em;opacity:.8}

/* ---------- content ---------- */
main{padding:44px 0 64px}
h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(1.7rem,3.5vw,2.2rem);margin:0 0 .6em}
h2{font-family:Georgia,serif;font-weight:400;font-size:1.35rem;margin:2em 0 .5em}
.lead{font-size:1.15rem;color:var(--ink-soft)}
.prose{max-width:70ch}
.prose p{margin:0 0 1.1em}
.prose ul{padding-left:1.2em}
.prose li{margin:.35em 0}

.cols{display:grid;grid-template-columns:1fr;gap:34px}
@media(min-width:820px){ .cols{grid-template-columns:1.6fr 1fr} }
.portrait img{width:100%;border:1px solid var(--line);background:#fff}

/* ---------- galerij ---------- */
.grid{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  list-style:none;margin:0;padding:0;
}
@media(min-width:700px){ .grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px} }
/* elke kaart vult de volledige rijhoogte, zodat een rij onderaan gelijk uitlijnt */
.card{margin:0;display:flex}
.card button{
  display:flex;flex-direction:column;flex:1;width:100%;padding:0;
  border:1px solid var(--line);
  background:var(--surface);cursor:zoom-in;text-align:left;font:inherit;color:inherit;
}
.card button:hover{border-color:var(--accent)}
.card .ph{display:block;flex:0 0 auto;aspect-ratio:3/4;overflow:hidden;background:#efedea}
.card .ph img{width:100%;height:100%;object-fit:contain}
.card .cap{display:block;flex:1;padding:9px 12px 11px;font-size:.85rem;color:var(--ink-soft)}

/* overzichtskaarten */
.cats{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));list-style:none;padding:0;margin:0}
.cats li{display:flex}
.cats a{
  display:flex;flex-direction:column;flex:1;
  border:1px solid var(--line);background:var(--surface);color:inherit;
}
.cats a:hover{border-color:var(--accent);text-decoration:none}
.cats .ph{display:block;flex:0 0 auto;aspect-ratio:3/4;overflow:hidden;background:#efedea}
.cats .ph img{width:100%;height:100%;object-fit:contain}
.cats .cap{display:block;flex:1;padding:12px 16px 14px}
.cats .cap strong{display:block;font-weight:600;margin-bottom:2px}
.cats .cap span{display:block;font-size:.85rem;color:var(--ink-soft)}

/* agenda */
.agenda{list-style:none;padding:0;margin:0;max-width:80ch}
.agenda li{border-top:1px solid var(--line);padding:14px 0}
.agenda li:last-child{border-bottom:1px solid var(--line)}
.agenda .when{display:block;font-weight:600}
.agenda .what{color:var(--ink-soft)}

/* ---------- lightbox ---------- */
.lb[hidden]{display:none}
.lb{
  position:fixed;inset:0;z-index:100;background:rgba(20,22,25,.94);
  display:flex;align-items:center;justify-content:center;padding:56px 16px 78px;
}
.lb img{max-width:100%;max-height:100%;object-fit:contain;margin:auto}
.lb__cap{
  position:absolute;left:0;right:0;bottom:22px;text-align:center;
  color:#e8e6e3;font-size:.95rem;padding:0 60px;
}
.lb button{
  position:absolute;background:rgba(255,255,255,.1);border:0;color:#fff;
  font-size:1.6rem;line-height:1;cursor:pointer;padding:12px 16px;border-radius:var(--radius);
}
.lb button:hover{background:rgba(255,255,255,.22)}
.lb__close{top:14px;right:14px}
.lb__prev{left:14px;top:50%;transform:translateY(-50%)}
.lb__next{right:14px;top:50%;transform:translateY(-50%)}

/* ---------- footer ---------- */
.site-footer{
  background:var(--header);color:#d4e4f0;font-size:.9rem;padding:26px 0;margin-top:40px;
}
.site-footer a{color:#ffffff}
.site-footer .row{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}

/* ---------- mobiel ---------- */
@media(max-width:780px){
  .nav-toggle{
    display:block;width:100%;text-align:left;background:none;border:0;
    color:var(--header-ink);font:inherit;text-transform:uppercase;letter-spacing:.06em;
    padding:13px 0;cursor:pointer;
  }
  .nav ul{display:none;flex-direction:column}
  .nav.open > ul{display:flex}
  .nav .has-sub > ul{display:block;position:static;box-shadow:none;background:rgba(0,0,0,.18);min-width:0}
  .nav a{padding:11px 0}
  .nav .has-sub > ul a{padding-left:16px}
}