/* =====================================================================
   Stijlvarianten voor de demo. Kies er één voor het definitieve design;
   de rest (en de stijlkiezer) gaat er voor livegang uit.
   ===================================================================== */

/* ---------------------------------------------------------------------
   2. In Memoriam – licht, sober en klassiek
   --------------------------------------------------------------------- */
[data-style="memoriam"] {
  --bg: #f7f2ea;
  --bg-2: #eee6d9;
  --ink: #2b2521;
  --ink-soft: #5b5047;
  --muted: #8c8074;
  --accent: #8d6a3a;
  --accent-2: #7a8a72;
  --s1: #c9b89c; --s2: transparent; --s3: transparent; --s4: transparent;
  --on-accent: #fffaf2;
  --line: rgba(43, 37, 33, 0.13);
  --overlay: 247, 242, 234;
  --mosaic-filter: grayscale(1) contrast(.9) brightness(1.05);
  --display: "Cormorant Garamond", Georgia, serif;
  --label-font: "Karla", system-ui, sans-serif;
  --h-weight: 500;
  --radius: 2px;
}
[data-style="memoriam"] .hero::after {
  background: radial-gradient(ellipse at center, rgba(247,242,234,.82) 0%, rgba(247,242,234,.93) 55%, var(--bg) 100%);
}
[data-style="memoriam"] .hero h1 { font-weight: 400; }
[data-style="memoriam"] .hero .nick { font-weight: 500; }
[data-style="memoriam"] .stripes { grid-template-rows: 1px; gap: 0; }
[data-style="memoriam"] .stripes i:not(:first-child) { display: none; }
[data-style="memoriam"] .hero > .stripes { left: 50%; right: auto; width: min(420px, 60%); transform: translateX(-50%); bottom: 3rem; }
[data-style="memoriam"] .footer .stripes { width: min(420px, 60%); margin: 0 auto 3rem; }
[data-style="memoriam"] .story-text h3 { font-size: 1.75rem; }
[data-style="memoriam"] .gallery button { background: #fff; padding: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 8px 24px rgba(60,40,20,.08); }
[data-style="memoriam"] .gallery button:hover img { transform: none; }
[data-style="memoriam"] .gallery button:hover { box-shadow: 0 2px 6px rgba(0,0,0,.1), 0 16px 40px rgba(60,40,20,.14); }
[data-style="memoriam"] .gallery img { filter: saturate(.85); }
[data-style="memoriam"] .portrait-frame img { border: 12px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 12px 32px rgba(60,40,20,.12); }
[data-style="memoriam"] .card { border-top-width: 1px; }
[data-style="memoriam"] .lightbox::backdrop { background: rgba(30, 26, 22, .92); }

/* ---------------------------------------------------------------------
   3. Rock 'n' Roll – concertposter, neon en dambord
   --------------------------------------------------------------------- */
[data-style="rock"] {
  --bg: #0e0d0c;
  --bg-2: #181615;
  --ink: #f6efdf;
  --ink-soft: #cdc3b0;
  --muted: #8d8578;
  --accent: #ef3b2d;
  --accent-2: #f4c534;
  --s4: #ef3b2d;
  --on-accent: #fff6e8;
  --line: rgba(246, 239, 223, 0.16);
  --overlay: 14, 13, 12;
  --mosaic-filter: grayscale(1) contrast(1.25) brightness(.5);
  --display: "Anton", Impact, sans-serif;
  --nick-font: "Yellowtail", cursive;
  --label-font: "Oswald", "Karla", sans-serif;
  --h-weight: 400;
  --h-transform: uppercase;
  --h-spacing: .01em;
  --radius: 0;
}
[data-style="rock"] .stripes {
  grid-template-rows: 26px; gap: 0;
  background: repeating-conic-gradient(#f6efdf 0 25%, #0e0d0c 0 50%) 0 0 / 26px 26px;
}
[data-style="rock"] .stripes i { display: none; }
[data-style="rock"] .hero h1 { font-size: clamp(2.8rem, 9vw, 7rem); line-height: .95; }
[data-style="rock"] .hero .nick {
  font-style: normal; font-weight: 400; font-size: 1.25em; line-height: 1.2; margin: .1em 0 .05em;
  color: #ff5a4a; text-shadow: 0 0 6px rgba(239,59,45,.9), 0 0 22px rgba(239,59,45,.65), 0 0 48px rgba(239,59,45,.4);
}
[data-style="rock"] .years { font-family: var(--label-font); letter-spacing: .3em; color: var(--accent-2); }
[data-style="rock"] .tagline { font-family: var(--label-font); text-transform: uppercase; letter-spacing: .18em; font-size: .9rem; }
[data-style="rock"] .story-text h3 { font-style: normal; font-size: 1.6rem; letter-spacing: .04em; }
[data-style="rock"] .story-text .lead { font-family: var(--sans); font-weight: 700; }
[data-style="rock"] .travels li { font-family: var(--label-font); text-transform: uppercase; letter-spacing: .05em; }
[data-style="rock"] .portrait figcaption, [data-style="rock"] .footer-name { font-style: normal; color: #ff5a4a; text-shadow: 0 0 14px rgba(239,59,45,.6); }
[data-style="rock"] .footer-name { font-size: 3.2rem; }
[data-style="rock"] .filters button { text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; border-width: 2px; }
[data-style="rock"] .gallery button { border: 3px solid #f6efdf; }
[data-style="rock"] .portrait-frame img { border: 4px solid #f6efdf; box-shadow: 10px 10px 0 var(--accent); }
[data-style="rock"] .gallery button:hover { transform: rotate(-1deg) scale(1.01); box-shadow: 8px 8px 0 var(--accent); }
[data-style="rock"] .gallery button:hover img { transform: none; }
[data-style="rock"] .card { border-top-color: var(--accent); }
[data-style="rock"] .card:nth-child(2) { border-top-color: var(--accent-2); }

/* ---------------------------------------------------------------------
   4. Reisdagboek – papier, afdrukken en handschrift
   --------------------------------------------------------------------- */
[data-style="reisdagboek"] {
  --bg: #efe5d0;
  --bg-2: #e6d9bf;
  --ink: #33291f;
  --ink-soft: #57493b;
  --muted: #8a7a66;
  --accent: #b24e25;
  --accent-2: #2d6e73;
  --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;
}
[data-style="reisdagboek"] 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;
}
[data-style="reisdagboek"] .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%);
}
[data-style="reisdagboek"] .hero-mosaic { gap: 18px; padding: 18px; transform: rotate(-2deg) scale(1.08); }
[data-style="reisdagboek"] .hero-mosaic img { border: 8px solid #fbf6ea; box-shadow: 0 4px 14px rgba(60,40,20,.25); }
[data-style="reisdagboek"] .hero .nick { font-style: normal; font-size: 1.55em; line-height: 1; color: var(--accent); transform: rotate(-3deg); }
[data-style="reisdagboek"] .stripes {
  grid-template-rows: 12px; gap: 0;
  background: repeating-linear-gradient(135deg, #c8342b 0 18px, #fbf6ea 18px 30px, #23507f 30px 48px, #fbf6ea 48px 60px);
}
[data-style="reisdagboek"] .stripes i { display: none; }
[data-style="reisdagboek"] .story-text h3 { font-family: "Caveat", cursive; font-style: normal; font-size: 2.1rem; font-weight: 700; margin-top: 2rem; }
[data-style="reisdagboek"] .story-text em { font-family: "Caveat", cursive; font-size: 1.35em; font-style: normal; color: var(--accent); }
[data-style="reisdagboek"] .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); }
[data-style="reisdagboek"] .portrait-frame:has(img) { outline: 0; }
[data-style="reisdagboek"] .portrait-frame img { box-shadow: none; }
[data-style="reisdagboek"] .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; }
[data-style="reisdagboek"] .travels { border: 0; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
[data-style="reisdagboek"] .travels li, [data-style="reisdagboek"] .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;
}
[data-style="reisdagboek"] .travels li:nth-child(odd) { transform: rotate(-1.5deg); }
[data-style="reisdagboek"] .travels li:nth-child(even) { transform: rotate(1.2deg); }
[data-style="reisdagboek"] .gallery-section, [data-style="reisdagboek"] .jumbo-section { background: transparent; }
[data-style="reisdagboek"] .gallery { column-gap: 26px; }
[data-style="reisdagboek"] .gallery button { background: #fbf6ea; padding: 10px 10px 34px; margin-bottom: 26px; box-shadow: 0 4px 14px rgba(60,40,20,.22); overflow: visible; }
[data-style="reisdagboek"] .gallery button:nth-child(3n+1) { transform: rotate(-1.6deg); }
[data-style="reisdagboek"] .gallery button:nth-child(3n+2) { transform: rotate(1.1deg); }
[data-style="reisdagboek"] .gallery button:nth-child(3n) { transform: rotate(-.6deg); }
[data-style="reisdagboek"] .gallery button:hover { transform: rotate(0) scale(1.03); z-index: 2; box-shadow: 0 10px 30px rgba(60,40,20,.3); }
[data-style="reisdagboek"] .gallery button:hover img { transform: none; }
[data-style="reisdagboek"] .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;
}
[data-style="reisdagboek"] .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);
}
[data-style="reisdagboek"] .card { background: rgba(251,246,234,.7); border-top-style: dashed; }
[data-style="reisdagboek"] .footer-name { font-style: normal; font-size: 3.2rem; }

/* ---------------------------------------------------------------------
   5. Pasar Malam – tropische avond met lampionnen
   --------------------------------------------------------------------- */
[data-style="pasar"] {
  --bg: #121530;
  --bg-2: #191d3d;
  --ink: #f8eedb;
  --ink-soft: #d5c9b4;
  --muted: #9690a6;
  --accent: #f3ad3a;
  --accent-2: #e8574a;
  --s4: #2fb3a3;
  --on-accent: #1a1430;
  --line: rgba(248, 238, 219, 0.15);
  --overlay: 18, 21, 48;
  --mosaic-filter: saturate(1.1) brightness(.5) hue-rotate(-8deg);
  --display: "DM Serif Display", Georgia, serif;
  --h-weight: 400;
}
[data-style="pasar"] .hero::after {
  background:
    radial-gradient(ellipse at 50% 35%, rgba(243,173,58,.16) 0%, transparent 45%),
    radial-gradient(ellipse at center, rgba(18,21,48,.6) 0%, rgba(18,21,48,.9) 60%, var(--bg) 100%);
}
[data-style="pasar"] .hero .nick { text-shadow: 0 0 30px rgba(243,173,58,.45); }
/* Snoer met lampionnetjes */
[data-style="pasar"] .stripes {
  grid-template-rows: 34px; gap: 0;
  background:
    radial-gradient(circle at 20px 22px, #f3ad3a 0 6px, rgba(243,173,58,.35) 7px, transparent 15px) 0 0 / 40px 34px,
    radial-gradient(circle at 20px 22px, #e8574a 0 6px, rgba(232,87,74,.35) 7px, transparent 15px) 20px 0 / 80px 34px,
    linear-gradient(to bottom, transparent 13px, rgba(248,238,219,.25) 13px 14px, transparent 14px);
}
[data-style="pasar"] .stripes i { display: none; }
[data-style="pasar"] .story-text h3 { font-style: normal; }
[data-style="pasar"] .gallery button { border-radius: 10px; }
[data-style="pasar"] .portrait-frame img { border-radius: 12px; box-shadow: 0 0 60px rgba(243,173,58,.25); }
[data-style="pasar"] .gallery button:hover { box-shadow: 0 0 0 2px var(--accent), 0 0 40px rgba(243,173,58,.35); }
[data-style="pasar"] .card { border-radius: 10px; border-top-color: var(--accent); }
[data-style="pasar"] .card:nth-child(2) { border-top-color: var(--s4); }
[data-style="pasar"] .todo-block { border-radius: 10px; }

/* =====================================================================
   Stijlkiezer (alleen demo)
   ===================================================================== */
.style-picker {
  position: fixed; z-index: 50; left: 50%; bottom: 16px; transform: translateX(-50%);
  width: min(760px, calc(100vw - 24px));
  background: #fffaf1; color: #231c16; border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.06);
  font: 500 .92rem/1.4 "Karla", system-ui, sans-serif;
}
.style-picker header { display: flex; align-items: center; gap: .75rem; padding: .7rem .9rem .2rem 1rem; }
.style-picker .sp-title { font-weight: 700; }
.style-picker .sp-badge { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; background: #231c16; color: #fffaf1; padding: .15rem .45rem; border-radius: 4px; }
.style-picker .sp-toggle { margin-left: auto; background: none; border: 0; font: inherit; color: #6b5d4f; cursor: pointer; padding: .3rem .4rem; }
.style-picker .sp-options { display: flex; gap: .45rem; padding: .5rem .9rem .3rem; overflow-x: auto; scrollbar-width: thin; }
.style-picker .sp-options button {
  flex: 0 0 auto; display: flex; align-items: center; gap: .5rem; font: inherit; color: inherit; cursor: pointer;
  background: #fff; border: 1.5px solid #e3d9c9; border-radius: 999px; padding: .35rem .8rem .35rem .4rem;
}
.style-picker .sp-options button:hover { border-color: #b8a88f; }
.style-picker .sp-options button[aria-pressed="true"] { border-color: #231c16; background: #231c16; color: #fffaf1; }
.style-picker .sp-swatch { width: 22px; height: 22px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.style-picker .sp-desc { margin: 0; padding: .1rem 1rem .8rem; color: #6b5d4f; font-size: .88rem; }
.style-picker.is-collapsed .sp-options, .style-picker.is-collapsed .sp-desc { display: none; }
.style-picker.is-collapsed { width: auto; }
.style-picker.is-collapsed header { padding-bottom: .7rem; }
body.has-picker .footer { padding-bottom: 11rem; }
@media (max-width: 600px) {
  .style-picker { bottom: 8px; }
  .style-picker .sp-desc { display: none; }
}