/* =====================================================================
   Reisdagboek – de definitieve stijl van Jumbo50 (gekozen november 2026)
   Papier, afdrukken met plakband, handschrift en een luchtpostrand.
   Bovenop style.css: de tokens en componentregels hieronder overschrijven de basis.
   ===================================================================== */

:root {
  --bg: #efe5d0;
  --bg-2: #e6d9bf;
  --ink: #33291f;
  --ink-soft: #57493b;
  --muted: #685c4d;
  --accent: #9c4420;
  --accent-2: #2a676c;
  --on-accent: #fff8ec;
  --line: rgba(51, 41, 31, 0.18);
  --overlay: 239, 229, 208;
  --mosaic-filter: sepia(.45) saturate(.9) contrast(.95) brightness(1.02);
  --display: "Playfair Display", Georgia, serif;
  --nick-font: "Caveat", cursive;
  --label-font: "Special Elite", "Courier New", monospace;
  --h-weight: 700;
  --radius: 3px;
}
:root body {
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(120,90,50,.06) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 80%, rgba(120,90,50,.05) 0 1px, transparent 2px);
  background-size: 7px 7px, 11px 11px;
}
:root .hero::after {
  background: radial-gradient(ellipse 55% 60% at center, rgba(239,229,208,.94) 0%, rgba(239,229,208,.86) 55%, rgba(239,229,208,.45) 100%);
}
:root .hero-mosaic { gap: 18px; padding: 18px; transform: rotate(-2deg) scale(1.08); }
:root .hero-mosaic img { border: 8px solid #fbf6ea; box-shadow: 0 4px 14px rgba(60,40,20,.25); }
:root .hero .nick { font-style: normal; font-size: 1.55em; line-height: 1; color: var(--accent); transform: rotate(-3deg); }
:root .stripes {
  grid-template-rows: 12px; gap: 0;
  background: repeating-linear-gradient(135deg, #c8342b 0 18px, #fbf6ea 18px 30px, #23507f 30px 48px, #fbf6ea 48px 60px);
}
:root .stripes i { display: none; }
:root .story-text h3 { font-family: "Caveat", cursive; font-style: normal; font-size: 2.1rem; font-weight: 700; margin-top: 2rem; }
:root .story-text em { font-family: "Caveat", cursive; font-size: 1.35em; font-style: normal; color: var(--accent); }
:root .portrait-frame { background: #fbf6ea; border-style: solid; border-width: 12px 12px 48px; border-color: #fbf6ea; outline: 1.5px dashed var(--accent); outline-offset: -12px; transform: rotate(-2deg); box-shadow: 0 6px 20px rgba(60,40,20,.2); }
:root .portrait-frame:has(img) { outline: 0; }
:root .portrait-frame img { box-shadow: none; }
:root .portrait figcaption { font-size: 1.5rem; text-align: center; transform: rotate(-2deg); margin-top: -2.6rem; position: relative; color: var(--ink-soft); font-style: normal; }
:root .travels { border: 0; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
:root .travels li, :root .travels li:nth-child(n) {
  border: 2px dashed var(--accent-2); padding: .7rem .8rem; background: rgba(251,246,234,.6); text-align: center; border-radius: 4px;
}
:root .travels li:nth-child(odd) { transform: rotate(-1.5deg); }
:root .travels li:nth-child(even) { transform: rotate(1.2deg); }
:root .gallery-section, :root .jumbo-section { background: transparent; }
:root .gallery { column-gap: 26px; }
:root .gallery.gallery--jumbo, :root .gallery.gallery--fijnedag { gap: 26px; }
:root .gallery.gallery--jumbo button, :root .gallery.gallery--fijnedag button { margin-bottom: 0; }
:root .gallery button { background: #fbf6ea; padding: 10px 10px 34px; margin-bottom: 26px; box-shadow: 0 4px 14px rgba(60,40,20,.22); overflow: visible; }
:root .gallery button:nth-child(3n+1) { transform: rotate(-1.6deg); }
:root .gallery button:nth-child(3n+2) { transform: rotate(1.1deg); }
:root .gallery button:nth-child(3n) { transform: rotate(-.6deg); }
:root .gallery button:hover { transform: rotate(0) scale(1.03); z-index: 2; box-shadow: 0 10px 30px rgba(60,40,20,.3); }
:root .gallery button:hover img { transform: none; }
:root .gallery button::after {
  opacity: 1; background: none; color: var(--ink-soft); padding: 0 10px 6px; font-family: "Caveat", cursive; font-size: 1.15rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
:root .gallery button::before {
  content: ""; position: absolute; top: -9px; left: 50%; width: 80px; height: 22px; transform: translateX(-50%) rotate(-3deg);
  background: rgba(230, 210, 160, .75); z-index: 1; box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
:root .card { background: rgba(251,246,234,.7); border-top-style: dashed; }
:root .footer-name { font-style: normal; font-size: 3.2rem; }

/* Herinneringen */
:root .memories-section { background: transparent; }
:root .memory { background: #fbf6ea; border: 0; box-shadow: 0 4px 14px rgba(60,40,20,.18); }
:root .memory:nth-child(odd) { transform: rotate(-.8deg); }
:root .memory:nth-child(even) { transform: rotate(.6deg); }
:root .memory blockquote { font-family: "Caveat", cursive; font-size: 1.45rem; }