:root {
  --bg: #fbfaf6;
  --ink: #2c2925;
  --muted: #7a7468;
  --accent: #8ecae6;  /* aquarel blauw */
  --accent2: #f4a7a7; /* zacht koraal */
  --accent3: #cde8d7; /* zacht groen */
  --card: #fffdfa;
  --paper: #fbfaf6;
  --edge: rgba(0,0,0,.06);
}

* { box-sizing: border-box; }
body { margin:0; background: var(--paper); color:var(--ink); font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background:
    radial-gradient(1200px 800px at 10% 5%, rgba(158, 202, 225, .35), transparent 60%),
    radial-gradient(900px 700px at 90% 10%, rgba(246, 202, 202, .30), transparent 65%),
    radial-gradient(1000px 900px at 20% 90%, rgba(196, 234, 203, .28), transparent 65%),
    var(--paper);
}
.site-header { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding: 14px 20px; border-bottom: 2px solid rgba(0,0,0,.05); background: linear-gradient(90deg, rgba(255,255,255,.9), rgba(255,255,255,.65)); position: sticky; top:0; backdrop-filter: blur(6px); z-index: 10; box-shadow: 0 10px 30px rgba(0,0,0,.04); }
.brand { font-weight:800; font-size: 1.5rem; letter-spacing: .5px; text-decoration:none; color:var(--ink); font-family: "Segoe Script", "Brush Script MT", "Pacifico", system-ui, sans-serif; }
.topnav a { margin-right: 14px; color: var(--ink); text-decoration: none; padding:6px 10px; border-radius: 999px; }
.topnav a:hover { background: var(--accent); color:#0d1b2a; }
.topnav .logout { display:inline; }
.topnav .logout button { border:none; background: var(--accent2); padding:6px 12px; border-radius:999px; cursor:pointer; }

.container { max-width: 1100px; margin: 0 auto; padding: 20px; }
.flash { background: #fff; border-left: 6px solid var(--accent2); padding: 12px 14px; margin: 12px 0 0; border-radius: 12px; }

.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:16px; }
.card { background: var(--card); border:1px solid var(--edge); border-radius: 22px; overflow: hidden; box-shadow: 0 10px 18px rgba(0,0,0,.05); transition: transform .15s ease, box-shadow .15s ease; }
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 26px rgba(0,0,0,.10); }
.thumb { display:block; aspect-ratio: 4/3; width: 100%; object-fit: cover; background: #eee; filter: saturate(1.02) contrast(1.02); }
.card .meta { padding: 10px 12px; display:flex; justify-content:space-between; align-items:center; color: var(--muted); }
.name { font-weight: 700; color: var(--ink); }

.section-title { margin: 6px 0 14px; font-size: 1.7rem; font-weight: 800; letter-spacing:.3px; font-family: "Segoe Script", "Brush Script MT", "Pacifico", system-ui, sans-serif; }

.hero { position: relative; padding: 28px 20px 18px; margin: 6px 0 16px; border-radius: 24px;
  background: radial-gradient(600px 300px at 20% 20%, rgba(158,202,225,.35), transparent 60%),
             radial-gradient(500px 280px at 80% 10%, rgba(246,202,202,.28), transparent 65%),
             linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.65));
  border: 1px solid var(--edge); box-shadow: 0 12px 24px rgba(0,0,0,.06);
}
.hero h1 { margin: 0 0 6px; font-size: 2rem; line-height: 1.2; }
.hero p { margin: 0; color: var(--muted); }
.ribbon { height: 10px; margin: 14px 0 6px; background: linear-gradient(90deg, #9ecae1, #f6caca, #c4eacb); border-radius: 999px; opacity: .8; }

.gallery { columns: 260px; column-gap: 16px; }
.gallery .item { break-inside: avoid; margin: 0 0 16px; background: var(--card); border-radius: 16px; overflow: hidden; border:1px solid var(--edge); }
.gallery .item img { width:100%; height:auto; display:block; }
.gallery .item .cap { padding: 8px 10px; color: var(--muted); font-size:.95rem; display:flex; justify-content:space-between; align-items:center; }

form.box { background: var(--card); padding: 16px; border-radius: 16px; border:1px solid var(--edge); box-shadow: 0 8px 16px rgba(0,0,0,.04); }
.row { display:flex; gap:12px; flex-wrap: wrap; }
.row > * { flex:1; min-width: 220px; }
label { display:block; font-weight: 600; margin: 8px 0 6px; }
input[type=text], input[type=date], input[type=password], select { width:100%; padding:10px 12px; border:1px solid #ddd; border-radius: 10px; background:#fff; }
input[type=file] { width:100%; }
button.primary { background: var(--accent); border:none; padding: 10px 14px; border-radius: 12px; cursor:pointer; font-weight:700; }

.filters { display:flex; gap:12px; margin-bottom:12px; flex-wrap: wrap; }
.muted { color: var(--muted); }
.site-footer { margin-top: 40px; padding: 30px 0; text-align:center; color: var(--muted); }

/* Lightbox */
.lightbox.hidden { display: none; }
.lightbox { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.lightbox-content { position: relative; background: var(--card); border-radius: 16px; max-width: 92vw; max-height: 90vh; padding: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.lb-image-wrap { position: relative; display:flex; align-items:center; justify-content:center; }
.lb-image-wrap img { max-width: 85vw; max-height: 70vh; display:block; }
.lb-prev, .lb-next { position: absolute; top: 50%; transform: translateY(-50%); border: none; background: rgba(255,255,255,.7); padding: 8px 12px; border-radius: 999px; cursor: pointer; font-size: 22px; }
.lb-prev { left: 8px; } .lb-next { right: 8px; }
.lb-caption { margin-top: 8px; display:flex; gap:10px; align-items: baseline; }
.lb-student { font-weight: 700; }
.lb-text { flex: 1; }
.lb-close { position:absolute; top: 6px; right: 8px; border:none; background: transparent; font-size: 28px; line-height: 1; cursor:pointer; }

/* Watercolor enhancements */
body {
  background:
    radial-gradient(1200px 800px at 8% 4%, rgba(142,202,230,.35), transparent 60%),
    radial-gradient(1000px 700px at 92% 8%, rgba(244,167,167,.28), transparent 65%),
    radial-gradient(1100px 900px at 18% 92%, rgba(205,232,215,.28), transparent 65%),
    var(--paper);
}

.card {
  background:
    radial-gradient(400px 220px at 10% -10%, rgba(255,255,255,.9), rgba(255,255,255,.95)),
    var(--card);
  border: 1px solid rgba(0,0,0,.05);
  box-shadow: 0 12px 22px rgba(13, 27, 42, .06);
}

button.primary {
  background: linear-gradient(180deg, var(--accent), #6fb7dd);
  color: #0d1b2a;
}
button.primary:hover {
  filter: brightness(1.03);
  transform: translateY(-1px);
}
.site-header {
  background: linear-gradient(90deg, rgba(255,255,255,.92), rgba(255,255,255,.7));
  border: none;
  box-shadow: 0 14px 30px rgba(0,0,0,.05);
}
.hero {
  background:
    radial-gradient(600px 300px at 20% 20%, rgba(142,202,230,.35), transparent 60%),
    radial-gradient(500px 280px at 80% 10%, rgba(244,167,167,.28), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.65));
}
textarea { font-family: inherit; }
details > summary::marker { content: ''; }