/* De Spiegelbijbel.
   Alice heeft geen bold en geen cursief: gebruik formaat, wit en kleur
   voor nadruk. Snitten lopen via --serif / --sans / --serif-w. */

:root{
  --paper:#FAF6F0; --ink:#22201D; --muted:#756E63;
  --pad-x: clamp(1.25rem, 5vw, 3rem);
  --pad-y: clamp(1.75rem, 5vh, 3.5rem);
  --fs-title: clamp(2.15rem, 7.5vw, 3.7rem);
  --fs-sec:   clamp(1.35rem, 4.4vw, 1.9rem);
  --fs-body:  clamp(1.05rem, 3.45vw, 1.15rem);
  /* losstaand van elkaar te zetten, zodat de ene niet meeschuift met de andere */
  --fs-p-normal: var(--fs-body);
  --fs-p-story:  clamp(1.26rem, 4.4vw, 1.42rem);
  --fs-lab:   clamp(.68rem, 2.4vw, .78rem);
  --dur: .32s;
  --serif: Alice, Georgia, serif;
  --sans: Sora, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif-w: 400;
  --em-style: normal;
  --mirror: linear-gradient(100deg, #EFE9F3 0%, #D7D7D7 28%, #CED0CF 52%, #C5C9C8 76%, #C1C7C5 100%);
  --gold-brown: #55401F;
  --quote-gold: #D9BE84;
  --lab-gold: #977F52;
  /* hoekradii: small/medium/large voor kaarten, iconen en velden.
     Cirkels (50%) en pil-knoppen (999px) blijven los hiervan bestaan. */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  /* subtiel leer-reliëf, hergebruikt door .page/.q-card en hun varianten
     (.r/.ch/.tinted) — als losse custom property zodat geen enkele regel
     'm per ongeluk via de background-shorthand kan wegvegen (zie hieronder) */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.045' numOctaves='4' seed='7' stitchTiles='stitch' result='noise'/%3E%3CfeDiffuseLighting in='noise' lighting-color='%23ffffff' surfaceScale='2' diffuseConstant='1.1' result='light'%3E%3CfeDistantLight azimuth='235' elevation='55'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.15'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce){ :root{ --dur:.001s } *{scroll-behavior:auto !important} }

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#0C1016;touch-action:pan-x pan-y}
body{font-family:var(--sans);-webkit-font-smoothing:antialiased;letter-spacing:-.004em}

/* geen tekstselectie, uitleg-magnifier of callout-menu ergens in de app —
   dit is een boek/app-achtige interface, geen tekstdocument. Formuliervelden
   (typen in "Mijn verhaal", instellingen) blijven wel gewoon werken. */
*{
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}
input, textarea, select, option{
  -webkit-user-select:text; user-select:text; -webkit-touch-callout:default;
}

/* heel subtiel leer-reliëf over de achtergrondkleuren van pagina's en kaders.
   Dit vervangt de :before pseudo-elementen, die op iOS niet meescrollen.
   Let op: .page.r/.ch/.tinted en .q-card hieronder MOGEN de background NOOIT
   via de 'background' shorthand overschrijven — dat zet background-image
   (dus deze textuur) en background-attachment stilletjes terug naar hun
   initiële waarde, met als gevolg dat de textuur op iOS niet meescrolt en
   halverwege lijkt af te kappen. Gebruik altijd background-color/
   background-image apart, of neem var(--noise) op als extra laag. */
.page, .q-card {
  background-image: var(--noise);
  background-size: 300px 300px;
  background-blend-mode: overlay;
}

.book{
  display:flex; width:100vw; height:100vh; height:100svh; position:fixed; inset:0;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain; overscroll-behavior-y:none;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  /* GEEN transform/translateZ hier: .book is de horizontaal scrollende
     container met alle 76 paginapanelen (elk 100vw breed). Zodra dit
     element (of z'n voorouder) een transform krijgt, promoot iOS Safari
     de hele overflow-scroll-inhoud naar één GPU-laag i.p.v. alleen het
     zichtbare kijkvenster — bij ~76 volledige-viewport-paginas met
     zware afbeeldingen/textuur is die laag te groot voor het geheugen
     van het WebContent-proces, en crasht/herlaadt de pagina meteen.
     Een eerdere translateZ(0)-poging om dat te compenseren loste het
     niet op (zelfde soort laag, alleen geforceerd), dus nu geen enkele
     transform meer op .book. Zie ook body.menu-open hieronder: de
     "boek zoomt iets uit"-uitzoom-animatie is om dezelfde reden verwijderd. */
}
.book::-webkit-scrollbar{display:none}
.book.swipe-lock{touch-action:none}

.page{
  position:relative;
  flex:0 0 100vw; width:100vw;
  height:100vh; height:100svh;
  scroll-snap-align:start; scroll-snap-stop:always;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  /* alleen verticaal insluiten; horizontaal MOET doorschakelen naar .book */
  overscroll-behavior-y:contain; overscroll-behavior-x:auto;
  contain:layout paint;
  background-color:#16202C; color:#F6F1E9;
  /* Zorgt dat de achtergrond-textuur meescrolt met de inhoud, i.p.v. vast
     te blijven staan t.o.v. de viewport — lost het "afkappen" op iOS op. */
  background-attachment: local;
}
/* net als .book hierboven: de eigen verticale scrollbar van elke pagina
   verbergen. Zonder dit floepte er op Android/Chrome heel even een
   staafje van de native scrollbar op onderin beeld na het swipen naar
   een nieuwe pagina. */
.page::-webkit-scrollbar{display:none}
.page.r{background-color:var(--paper); color:var(--ink)}
/* getinte paginakleur: elk bijbelverhaal (.ch) en een handvol andere donkere
   pagina's (.tinted) krijgen een eigen kleurzweem i.p.v. het standaard
   #16202C. --c-l (lichte tint, los r g b t.b.v. rgba in q-card-schaduw) en
   --c-d (donkere tint, hex) komen als losse custom properties per pagina
   mee vanuit de HTML, zodat de gradient zelf maar op één plek hoeft te
   staan i.p.v. in elke pagina apart herhaald te worden. */
.page.ch, .page.tinted{
  background-image: var(--noise), linear-gradient(135deg, rgb(var(--c-l)) 0%, var(--c-d) 55%);
  background-size: 300px 300px, auto;
  background-blend-mode: overlay, normal;
}

.wrap{
  position:relative; z-index:2;
  max-width:640px; margin:0 auto; width:100%; min-height:100%;
  display:flex; flex-direction:column;
  padding: calc(var(--pad-y))
           calc(var(--pad-x) + env(safe-area-inset-right))
           calc(var(--pad-y) + 4.5rem + env(safe-area-inset-bottom))
           calc(var(--pad-x) + env(safe-area-inset-left));
}
.wrap.mid{justify-content:center}

/* de illustratie blijft staan terwijl de tekst eroverheen scrollt */
.art{
  position:sticky; top:0; z-index:0;
  height:100vh; height:100svh;
  margin-bottom:-100vh; margin-bottom:-100svh;
  overflow:hidden; background:#16202C; pointer-events:none;
}
.art img{
  width:100%; height:100%; object-fit:cover; object-position:center bottom;
  display:block; transition:transform var(--dur) ease;
}
.scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,14,20,.74) 0%, rgba(10,14,20,.30) 34%, rgba(10,14,20,.66) 100%);
  opacity:1; transition:opacity var(--dur) ease;
}
.scrim.deep{background:rgba(10,14,20,.88); opacity:0; transition:opacity var(--dur) ease}
.page.open .scrim.deep{opacity:1}
.page.open .art img{transform:scale(1.04)}

/* landings-animatie: bij het swipen naar een bijbelpagina (.page.ch, de
   enige pagina's met een .art-illustratie) zoomt de achtergrond van 120%
   naar 100% uit (ease-out, 5s). Tekst blijft direct zichtbaar (geen fade).
   Draait op een JS-class (.landed, zie app.js) via @keyframes i.p.v.
   transition, zodat 'ie los staat van de snelle var(--dur) hover-zoom
   hierboven bij .page.open. app.js zet de class elke keer opnieuw (met
   een geforceerde reflow) zodat de animatie ook bij heen-en-weer swipen
   telkens opnieuw afspeelt. */
@keyframes sb-art-zoom-out{ from{transform:scale(1.2)} to{transform:scale(1)} }
.page.ch .art img{transform:scale(1.2)}
.page.ch.landed .art img{animation:sb-art-zoom-out 5s cubic-bezier(0,0,.2,1) forwards}
@media (prefers-reduced-motion: reduce){
  .page.ch .art img{transform:none; animation:none}
}

.lab{font-family:var(--serif);font-size:1.1rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--lab-gold);opacity:1;line-height:1.25;margin:0 0 .85rem}
.page:not(.r) .lab{color:var(--quote-gold)}
h1.t{font-family:var(--serif);font-weight:var(--serif-w);font-size:var(--fs-title);line-height:1.12;letter-spacing:-.005em;margin:0 0 1.5rem}
/* alle titels (h1.t en h2.s) even groot, zoals "Herken jij dat?" */
h2.s{font-family:var(--serif);font-weight:var(--serif-w);font-size:var(--fs-title);line-height:1.12;letter-spacing:-.005em;margin:0 0 1.5rem}

/* uitzondering: naambijschrift onder de video ("Huibert Jan Versnel") —
   blijft op de kleinere sectiegrootte */
.author-frame-wrap + h2.s{
  font-size:var(--fs-title); line-height:1.12; letter-spacing:-.005em; margin:1.2rem 0 1.8rem;
}
/* "Kijk eens in de spiegel:" is een korte sub-inleiding bij de vragen, geen
   paginatitel — duidelijk lager in de hiërarchie dan "Herken jij dat?" */
.q-head h2.s{
  font-family:var(--serif); font-weight:var(--serif-w);
  font-size:clamp(1.3rem, 5vw, 2rem); line-height:1.25; letter-spacing:-.005em;
}
.rule{width:2.6rem;height:2px;background:var(--lab-gold);opacity:.9;margin:0 0 1.4rem}
.page:not(.r) .rule{background:var(--quote-gold)}

p{font-size:var(--fs-p-normal);line-height:1.7;margin:0 0 1.05rem;font-weight:300}
p.signoff{font-family:'Satisfy', var(--serif), cursive;font-size:calc(var(--fs-p-normal)*1.6);line-height:1.3;margin:0 0 .1rem}
em{font-style:var(--em-style);opacity:.88}
/* moeilijke/ongangbare woorden: stippellijn, tik voor uitleg in een modal (zie glossary.js) */
.gloss{
  font:inherit; color:inherit; background:none; border:0; margin:0; padding:0;
  display:inline; vertical-align:baseline; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  text-decoration:underline dotted; text-decoration-thickness:1px; text-underline-offset:1px;
  /* browsers zetten <button> standaard op text-transform:none — zonder
     deze regel bleven de omkaderde woorden in .lab (bv. "Genesis") onderuit
     staan terwijl de rest van het label uppercase is */
  text-transform:inherit;
}
.gloss:active{opacity:.6}
p.quote{font-family:var(--serif);font-weight:400;padding-left:1.05rem;border-left:2px solid currentColor;opacity:.9;margin-left:.1rem}
p.quote em{opacity:1}
/* alle serif-lopende tekst (bijbelverhaal + de andere donkere pagina's) deelt
   dezelfde, grotere, losstaande grootte — los van de "normale" p hierboven */
.page:not(.r) p:not(.lab):not(.hint):not(.swipe-hint){font-family:var(--serif);font-weight:400;line-height:1.66;font-size:var(--fs-p-story)}
/* iOS Safari-bugfix, zelfde familie als de .full-toelichting hieronder: de
   inleidende alinea zit direct vóór .full in de DOM en werd op iOS soms leeg
   (niet herschilderd) zodra .full daaronder van max-height 0 naar 4000px
   animeert. -webkit-transform:translateZ(0) dwingt een eigen compositing-
   layer af zodat WebKit deze alinea apart bijhoudt i.p.v. te vertrouwen op
   een herschilder-cyclus die na de sibling-layoutverandering soms uitbleef. */
p.lead{font-weight:400; -webkit-transform:translateZ(0); transform:translateZ(0)}
.kern{
  font-family:var(--serif);font-size:calc(var(--fs-body)*1.22);line-height:1.62;
  color:var(--quote-gold);opacity:1;margin:2.2rem 0;padding-left:1rem;border-left:2px solid currentColor;
}

ul.q{list-style:none;margin:0;padding:0}
ul.q li{
  display:flex; align-items:center; gap:.7rem;
  font-size:calc(var(--fs-body)*.97);font-weight:500;line-height:1.6;margin:0 0 1.7rem;
  padding:.3rem 0;
  cursor:pointer; -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none;
  -webkit-user-select:none; user-select:none;
}
ul.q li .q-ic{flex:0 0 auto; font-size:1.3em; line-height:1}
ul.q li:last-child{margin-bottom:0}
ul.q li:active{opacity:.7}

/* de hofnar-vraag: een tongue-in-cheek "kwade" vraag, los van de serieuze
   q-card hieronder — daarom bewust een ander soort kader (perkament,
   neutraal, geen chapter-tint) zodat meteen duidelijk is dat dit een
   knipoog is en geen echte reflectievraag. */
.hofnar{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.85rem;
  margin:1.4rem 0 1.6rem; padding:1.5rem 1.6rem 2.4rem;
  border-radius:var(--radius-md);
  background:
    radial-gradient(ellipse at center, rgba(120,90,50,0) 55%, rgba(120,90,50,.16) 100%),
    linear-gradient(160deg, #F4ECDC, #E9DDC2);
  box-shadow:0 1px 3px rgba(60,45,25,.16);
}
/* vanaf desktopbreedte weer naast elkaar, zoals op mobiel voorheen overal */
@media (min-width:1280px){
  .hofnar{flex-direction:row; align-items:flex-start; text-align:left}
}
.hofnar-ic{flex:0 0 auto; width:120px; height:120px; object-fit:contain}
.hofnar p{
  font-family:'Satisfy', var(--serif), cursive; font-weight:400;
  font-size:calc(var(--fs-body)*1.65); line-height:1.35; margin:0; opacity:.9;
}

/* de vragen staan in een eigen donker kader, zoals de "Over deze app"-kaart */
.q-card{
  position:relative; overflow:hidden; isolation:isolate;
  color:#F6F1E9; border-radius:var(--radius-lg);
  padding:2.3rem 2rem 2.1rem; margin:1.8rem 0 1.75rem;
  /* elke q-card heeft z'n eigen --c-l/--c-d (zie .page.ch/.tinted hierboven) */
  background-image: var(--noise), linear-gradient(135deg, rgb(var(--c-l)) 0%, var(--c-d) 55%);
  background-size: 300px 300px, auto;
  background-blend-mode: overlay, normal;
  box-shadow:0 22px 54px rgba(var(--c-l),.4), 0 8px 22px rgba(0,0,0,.35);
}
.q-card .q-head, .q-card ul.q li{color:#F6F1E9}
.q-card .q-head h2.s{color:var(--quote-gold)}
.q-card .q-ic{color:var(--quote-gold)}
.q-card .q-mirror-btn{
  background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.22);
  box-shadow:0 2px 8px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.22);
}
.q-card .q-mirror-btn:active{background:rgba(255,255,255,.16)}
.q-head{display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-bottom:1.6rem}
.q-head h2{margin-bottom:0}
.q-mirror-btn{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%; padding:0;
  background:rgba(0,0,0,.05); color:var(--ink); border:1px solid rgba(0,0,0,.18);
  -webkit-backdrop-filter:blur(9px) saturate(130%); backdrop-filter:blur(9px) saturate(130%);
  box-shadow:0 2px 7px rgba(0,0,0,.18), inset 0 1px 1px rgba(255,255,255,.5);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background var(--dur) ease;
}
.q-mirror-btn svg{width:22px; height:22px}
.q-mirror-btn:active{background:rgba(0,0,0,.1)}
.page:not(.r) .q-mirror-btn{
  background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.22);
  box-shadow:0 2px 8px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.22);
}
.page:not(.r) .q-mirror-btn:active{background:rgba(255,255,255,.16)}

.mirror{margin-top:auto;padding-top:1.75rem;display:flex;flex-direction:column;align-items:center;text-align:center}
.mirror .cap{font-family:var(--serif);font-size:calc(var(--fs-lab)*.95);letter-spacing:.18em;text-transform:uppercase;color:var(--lab-gold);margin:0 0 .5rem}
.mirror .zin{
  font-family:var(--serif);font-size:calc(var(--fs-body)*1.4);display:inline-block;
  transform:scaleX(-1);
}
.mirror .zin.unmirrored{transform:scaleX(1)}
.mirror .zin.flipping{animation:zinBlur .45s ease}
.zin-toggle{
  margin-top:1rem;
  flex:0 0 auto; width:40px; height:40px; border-radius:50%; padding:0;
  background:rgba(0,0,0,.05); color:var(--ink); border:1px solid rgba(0,0,0,.18);
  -webkit-backdrop-filter:blur(9px) saturate(130%); backdrop-filter:blur(9px) saturate(130%);
  box-shadow:0 2px 7px rgba(0,0,0,.18), inset 0 1px 1px rgba(255,255,255,.5);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background var(--dur) ease;
}
.zin-toggle svg{width:19px; height:19px}
.zin-toggle:active{background:rgba(0,0,0,.1)}
@keyframes zinBlur{
  0%{filter:blur(0)}
  48%{filter:blur(5px)}
  100%{filter:blur(0)}
}

.more-row{align-self:flex-start;margin:.4rem 0 0;display:flex;align-items:center;gap:.6rem}
.page.open .more-row{margin-top:1.4rem}
.more{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#fff;
  padding:.72rem 1.35rem;border-radius:999px;font:inherit;font-size:calc(var(--fs-body)*.92);font-weight:500;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  -webkit-backdrop-filter:blur(9px) saturate(130%);backdrop-filter:blur(9px) saturate(130%);
  box-shadow:0 1px 1px rgba(255,255,255,.22) inset;
  transition:background var(--dur) ease,border-color var(--dur) ease,transform var(--dur) ease;
}
.more:active{background:rgba(255,255,255,.17);transform:scale(.97)}
.fav-toggle{
  flex:0 0 auto;width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#fff;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  -webkit-backdrop-filter:blur(9px) saturate(130%);backdrop-filter:blur(9px) saturate(130%);
  box-shadow:0 1px 1px rgba(255,255,255,.22) inset;
  transition:background var(--dur) ease,border-color var(--dur) ease,transform var(--dur) ease;
}
.fav-toggle:active{transform:scale(.9)}
.fav-toggle svg{width:20px;height:20px}
.fav-toggle.is-fav{background:#F4C430;border-color:#F4C430;color:#16202C}
.fav-toggle.is-fav svg{fill:currentColor}
.theme-tags{margin:4.5rem 0 0}
.theme-tags-cap{font-family:var(--serif);font-size:calc(var(--fs-lab)*.95);letter-spacing:normal;text-transform:none;color:#fff;margin:0 0 .6rem}
.theme-tags-row{display:flex;flex-wrap:wrap;gap:.5rem}
.theme-tag{
  font:inherit;font-size:calc(var(--fs-body)*.74);font-weight:500;letter-spacing:.01em;
  color:rgba(255,255,255,.72);background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);border-radius:999px;
  padding:.4rem .95rem;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background var(--dur) ease,border-color var(--dur) ease,color var(--dur) ease;
}
.theme-tag:active{background:rgba(255,255,255,.14);color:#fff}
/* max-height i.p.v. grid-template-rows: sommige iOS/Safari-versies animeren
   grid-template-rows niet betrouwbaar, waardoor het verhaal leeg bleef na
   een tik op "Lees verhaal" */
/* -webkit-transform:translateZ(0) dwingt een eigen compositing-layer af:
   zonder dit kan iOS Safari deze tekst na de open-transitie soms niet meer
   correct herschilderen tijdens het scrollen (bekende WebKit-bug), waardoor
   het verhaal ineens leeg lijkt. overflow:visible zodra de pagina open is
   voorkomt dat dezelfde clip-context daarna nog een rol speelt. */
.full{
  max-height:0;overflow:hidden;transition:max-height var(--dur) ease,opacity var(--dur) ease;
  opacity:0;margin-top:0;
  -webkit-transform:translateZ(0);transform:translateZ(0);
}
.page.open .full{max-height:4000px;opacity:1;margin-top:1.4rem;overflow:visible}

.cover{background:#0F1721;text-align:center}
.disc-hit{
  display:block; width:fit-content; margin:0 auto 3.4rem; padding:1.3rem;
}
.disc{
  position:relative; overflow:hidden;
  width:min(46vw,205px);aspect-ratio:998/987;border-radius:50%;margin:0 auto;
  background:var(--mirror);border:3px solid rgba(255,255,255,.3);
  box-shadow:0 18px 50px rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,255,255,.35);
}
.mirror-press{
  position:absolute; right:.3rem; bottom:.3rem; z-index:6;
  width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 1px 1px rgba(255,255,255,.22) inset;
  color:#fff; display:flex; align-items:center; justify-content:center; padding:0;
  cursor:pointer; -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none; touch-action:manipulation;
  transition:background var(--dur) ease;
}
.mirror-press svg{width:22px; height:22px}
.mirror-press:active{background:rgba(255,255,255,.17)}
.disc video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scaleX(-1);
  filter:grayscale(.2) sepia(.12) contrast(1.08) saturate(1.05) brightness(.95);
  opacity:0; transition:opacity .6s ease;
}
.disc.live video{opacity:1}
.disc:after{
  content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  box-shadow:inset 0 0 26px rgba(0,0,0,.55), inset 0 0 0 2px rgba(255,255,255,.22);
}
.disc .hint{
  position:absolute; left:14%; right:14%; top:50%; transform:translateY(-50%);
  z-index:2; pointer-events:none; margin:0;
  text-align:center; font-family:var(--sans); font-weight:400;
  font-size:.56rem; letter-spacing:.01em;
  line-height:1.15;
  color:rgba(30,26,20,.78);
  opacity:1; transition:opacity .3s ease;
}
.disc.live .hint, .disc.denied .hint{opacity:0}

/* ---------- vraag-spiegel overlay ---------- */
.mirror-overlay{
  position:fixed; inset:0; z-index:300;
  background:rgba(8,10,14,.94);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.5rem;
  padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.mirror-overlay.show{opacity:1; visibility:visible}
.mo-close{
  position:fixed; top:.8rem; right:.9rem; z-index:2;
  width:2.4rem; height:2.4rem; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); color:#fff;
  -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 1px 1px rgba(255,255,255,.22) inset;
  font-size:1.3rem; line-height:1; display:flex; align-items:center; justify-content:center;
  cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background var(--dur) ease;
}
.mo-close:active{background:rgba(255,255,255,.17)}
.mo-stage{display:flex; align-items:center; justify-content:center; gap:clamp(.5rem, 2.5vw, 1.4rem); width:100%; max-width:520px}
.mo-disc{
  position:relative; flex:0 1 auto; min-width:0; width:min(56vw,320px); aspect-ratio:998/987; border-radius:50%; overflow:hidden;
  background:var(--mirror); border:2px solid rgba(255,255,255,.28);
  box-shadow:0 18px 50px rgba(0,0,0,.5), inset 0 0 0 2px rgba(255,255,255,.3);
}
.mo-disc video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scaleX(-1);
  filter:grayscale(.2) sepia(.12) contrast(1.08) saturate(1.05) brightness(.88);
  opacity:0; transition:opacity .6s ease;
}
.mo-disc.live video{opacity:1}
.mo-scrim{
  position:absolute; inset:0;
  background:radial-gradient(circle, rgba(10,14,20,.12) 0%, rgba(10,14,20,.7) 76%, rgba(10,14,20,.86) 100%);
}
.mo-q{
  position:absolute; inset:9%; margin:0; display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--serif); font-weight:var(--serif-w); color:#fff;
  font-size:clamp(1.02rem,4.4vw,1.42rem); line-height:1.34;
  opacity:0; transition:opacity .25s ease;
}
.mo-disc.ready .mo-q{opacity:1}
.mo-nav{
  position:relative; z-index:6;
  flex:0 0 auto; width:2.6rem; height:2.6rem; border-radius:50%;
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.08); color:#fff;
  -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 1px 1px rgba(255,255,255,.22) inset;
  font-size:1.2rem; line-height:1; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background var(--dur) ease;
}
.mo-nav:active{background:rgba(255,255,255,.17)}
.mo-nav:disabled{opacity:.22; cursor:default}
.mo-dots{display:flex; gap:.4rem}
.mo-dots i{width:.4rem; height:.4rem; border-radius:50%; background:rgba(255,255,255,.3)}
.mo-dots i.on{background:#fff}
.cover h1.mirror-title{
  font-family:var(--serif);font-weight:var(--serif-w);font-size:clamp(2.6rem,11vw,4.6rem);line-height:1.04;margin:0 0 1.1rem;color:#fff;
  display:inline-block; transform:scaleX(1);
  transition:transform .45s cubic-bezier(.4,0,.2,1);
  cursor:pointer; -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none;
}
.cover h1.mirror-title.on{transform:scaleX(-1)}
.cover h1.mirror-title.flipping{animation:zinBlur .45s ease}
.cover .sub{font-size:clamp(1.1rem,4vw,1.35rem);font-weight:300;line-height:1.55;color:var(--quote-gold);max-width:22ch;margin:0 auto}
.swipe-hint{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  margin:3.6rem 0 0; font-family:var(--serif); font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.62);
  pointer-events:none;
}
.swipe-hint svg{width:2.1rem; height:.8rem; flex:0 0 auto}
@media (min-width:1280px){ .swipe-hint{display:none} }
/* op pagina's die in gewone leesflow staan (i.p.v. de verticaal gecentreerde
   voorpagina) staat de hint anders vlak onder de laatste alinea geplakt —
   deze variant geeft een ruimere marge erboven zodat hij duidelijk als een
   los, afsluitend element leest. */
.swipe-hint.loose{margin-top:5.5rem}
.about-link{
  position:fixed; top:.7rem; left:50%; transform:translateX(-50%); z-index:60;
  height:2.6rem; display:inline-flex; align-items:center; gap:.4rem;
  background:transparent; border:1px solid rgba(255,255,255,.28); color:rgba(255,255,255,.78);
  font:inherit; font-size:.72rem; letter-spacing:.06em; border-radius:999px; padding:0 1rem;
  cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .2s ease,border-color .2s ease;
}
.about-link:active{background:rgba(255,255,255,.1)}
.about-link .ic{
  width:1.05rem; height:1.05rem; border-radius:50%; border:1px solid rgba(255,255,255,.6);
  font-family:var(--serif); font-style:italic; font-size:.68rem; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
}

/* ---------- jouw verhaal: emotie kiezen, schrijven, bekijken, bewaren, wissen ---------- */
/* grid van 6 gelijke opties, precies 1 tegelijk actief. Elke optie heeft nu
   een eigen witte achtergrond en subtiele grijze border (niet alleen de
   actieve) — de actieve optie onderscheidt zich met een iets donkerdere
   border en een lichte schaduw i.p.v. een andere achtergrondkleur. */
.emo-title{
  font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); text-align:center; margin:2.2rem 0 .9rem;
}
/* grid i.p.v. 1 rij flex: op mobiel (dus hier, de standaardstijl) 3 kolommen
   x 2 rijen, flexibel qua breedte (1fr per kolom, wrapt vanzelf naar rij 2) —
   ruimere gap zodat de subtiele border van elke optie duidelijk los blijft
   staan van zijn buren i.p.v. bijna aan te raken */
.emo-picker{display:grid; grid-template-columns:repeat(3, 1fr); gap:.9rem .7rem; margin:0 0 3.4rem}
.emo-opt{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.35rem;
  min-width:0; aspect-ratio:3/4; background:#fff; border:1px solid rgba(0,0,0,.12); border-radius:var(--radius-sm);
  padding:.5rem .2rem; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background .2s ease, border-color .2s ease;
}
.emo-opt img{width:100%; height:auto; display:block; border-radius:var(--radius-sm)}
.emo-opt span{font-family:var(--sans); font-size:.62rem; letter-spacing:.05em; color:var(--muted); text-align:center; text-transform:uppercase}
.emo-opt.active{border-color:rgba(0,0,0,.2); box-shadow:0 1px 4px rgba(0,0,0,.18)}
.emo-opt.active span{color:var(--ink); font-weight:600}

.story-input{
  display:block; width:100%; min-height:11rem; margin:.4rem 0 1.1rem; padding:.7rem .15rem .2rem;
  font-family:'Satisfy', var(--serif), cursive; font-size:calc(var(--fs-body)*1.5); line-height:3rem;
  color:var(--ink); background:transparent; border:0; border-top:1px solid rgba(0,0,0,.16);
  resize:vertical; outline:none;
  background-image:repeating-linear-gradient(to bottom, transparent 0, transparent 2.99rem, rgba(0,0,0,.16) 2.99rem, rgba(0,0,0,.16) 3.05rem);
  background-attachment:local;
}
.story-input::placeholder{color:var(--muted); opacity:.75}
/* op mobiel (standaardstijl) gestapeld en 100% breed i.p.v. naast elkaar —
   op een smal scherm zijn twee pil-knoppen naast elkaar al snel krap; vanaf
   1280px (zie media query onderaan het bestand) weer een gewone rij */
.story-btnrow{display:flex; flex-direction:column; gap:.6rem}
.story-btn{
  width:100%; font:inherit; font-size:calc(var(--fs-body)*.86); font-weight:500; border-radius:999px;
  padding:.62rem 1.25rem; cursor:pointer; -webkit-tap-highlight-color:transparent;
  border:1.5px solid var(--gold-brown); color:#F6F1E9;
  background:linear-gradient(135deg, #705F43 0%, var(--gold-brown) 55%);
  transition:background .2s ease, opacity .2s ease;
}
.story-btn:active{background:#432E15}
.story-btn.ghost{border-color:rgba(0,0,0,.3); background:rgba(0,0,0,.04); color:var(--ink); opacity:.72}
.story-btn.ghost:active{background:rgba(0,0,0,.1)}
@media (min-width:1280px){
  .story-btnrow{flex-direction:row; flex-wrap:wrap}
  .story-btn{width:auto}
}
.story-btn:disabled{opacity:.35; cursor:default}

.story-reveal{
  position:fixed; inset:0; z-index:270;
  background:rgba(8,10,14,.94);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.2rem;
  padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.story-reveal.show{opacity:1; visibility:visible}
.story-reveal .x{
  position:fixed; top:.8rem; right:.9rem; z-index:2;
  width:2.4rem; height:2.4rem; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); color:#fff;
  -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 1px 1px rgba(255,255,255,.22) inset;
  font-size:1.3rem; line-height:1; display:flex; align-items:center; justify-content:center;
  cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background var(--dur) ease;
}
.story-reveal .x:active{background:rgba(255,255,255,.17)}
.story-canvas-wrap{max-width:92vw; max-height:78vh; display:flex}
#storyCanvas{
  width:auto; height:auto; max-width:92vw; max-height:78vh;
  border-radius:var(--radius-sm); box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.story-actions{display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center}
.story-actions .go{
  font:inherit; font-size:.8rem; font-weight:500; border-radius:999px; cursor:pointer;
  -webkit-tap-highlight-color:transparent; padding:.65rem 1.3rem;
  background:#F6F1E9; color:#16202C; border:1.5px solid #F6F1E9;
  transition:background var(--dur) ease, opacity var(--dur) ease;
}
.story-actions .go:active{background:#E4DDD1}
.story-actions button:disabled{opacity:.35; cursor:default}
.story-sand{pointer-events:none}

.hud{position:fixed;left:0;right:0;bottom:0;z-index:50;pointer-events:none;
  padding:0 0 calc(.55rem + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:.45rem}
.bar-hit{
  width:100%;padding:.85rem 0 .5rem;margin:-.85rem 0 -.5rem;
  pointer-events:auto;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;
}
.bar{width:100%;height:2px;background:rgba(255,255,255,.14)}
.bar i{display:block;height:100%;width:0;background:var(--quote-gold);transition:width .18s linear}
.bar-hit.scrubbing .bar i{transition:none}
.bar-hit.scrubbing .bar{background:rgba(255,255,255,.24)}
.count{
  font:inherit;font-size:.66rem;letter-spacing:.16em;color:rgba(255,255,255,.62);
  background:rgba(0,0,0,.42);padding:.34rem .85rem;border-radius:999px;border:1px solid rgba(255,255,255,.16);
  pointer-events:none;
}
.nav{position:fixed;top:50%;z-index:50;transform:translateY(-50%);width:2.6rem;height:2.6rem;border-radius:50%;
  border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(9px) saturate(130%);backdrop-filter:blur(9px) saturate(130%);
  box-shadow:0 1px 1px rgba(255,255,255,.6) inset, 0 1px 4px rgba(0,0,0,.2);
  color:var(--ink);font-size:1.1rem;line-height:1;cursor:pointer;display:none;
  transition:background var(--dur) ease}
.nav:active{background:rgba(255,255,255,.65)}
.nav.p{left:.6rem} .nav.n{right:.6rem}
@media (hover:hover) and (min-width:1280px){ .nav{display:block} }

.toc-filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.2rem}
.toc-filter{
  font:inherit;font-size:.72rem;font-weight:500;letter-spacing:.01em;
  border-radius:999px;cursor:pointer;-webkit-tap-highlight-color:transparent;
  padding:.5rem 1rem;background:#fff;color:var(--ink);
  border:1px solid rgba(0,0,0,.1);
  transition:background var(--dur) ease, color var(--dur) ease, border-color var(--dur) ease;
}
.toc-filter:active{background:#F0EDE7}
.toc-filter.is-active{background:#16202C;color:#fff;border-color:#16202C}
.toc-filter-count{font-weight:500;opacity:.5}

.toc-filter-toggle{
  display:flex;align-items:center;gap:.35rem;
  font:inherit;font-size:.72rem;font-weight:500;letter-spacing:.01em;
  border-radius:999px;cursor:pointer;-webkit-tap-highlight-color:transparent;
  padding:.5rem 1rem;background:none;color:var(--muted);
  border:1px dashed rgba(0,0,0,.22);
  transition:background var(--dur) ease, color var(--dur) ease, border-color var(--dur) ease;
}
.toc-filter-toggle:active{background:#F0EDE7}
.toc-filter-toggle .chev{width:14px;height:14px;transition:transform var(--dur) ease}
.toc-filter-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
.toc-filters-more{margin-top:-.5rem}
.toc-filters-more[hidden]{display:none}

.toc-intro{font-size:.86rem;line-height:1.5;font-weight:300;color:var(--muted);margin:0 0 1.3rem}

.toc-random{
  display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;
  font:inherit;font-size:.82rem;font-weight:500;letter-spacing:.01em;
  border-radius:999px;cursor:pointer;-webkit-tap-highlight-color:transparent;
  padding:.75rem 1rem;margin:0 0 1.4rem;
  background:rgba(0,0,0,.05);color:var(--ink);border:1px solid rgba(0,0,0,.18);
  -webkit-backdrop-filter:blur(9px) saturate(130%);backdrop-filter:blur(9px) saturate(130%);
  box-shadow:0 1px 1px rgba(255,255,255,.5) inset;
  transition:background var(--dur) ease;
}
.toc-random:active{background:rgba(0,0,0,.1)}
.toc-random .dice-ic{width:18px;height:18px;flex:0 0 auto}

ul.toc{list-style:none;margin:0;padding:0}
ul.toc li{margin:0 0 .1rem}
ul.toc li[hidden]{display:none}
.toc-reveal{opacity:0;transform:translateY(28px);transition:opacity .55s ease,transform .55s ease}
.toc-reveal.toc-reveal-in{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion: reduce){
  .toc-reveal{opacity:1;transform:none;transition:none}
}
.tocb{display:flex;align-items:center;gap:.9rem;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid rgba(0,0,0,.09);
  padding:1.05rem 0;cursor:pointer;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
.toc-thumb-wrap{position:relative;flex:0 0 auto;width:64px;height:64px}
.toc-thumb{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;background:rgba(0,0,0,.06)}
.toc-thumb-fallback{background:var(--c)}
.toc-fav-badge{
  display:none;position:absolute;inset:0;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(0,0,0,.38);
}
.toc-fav-badge svg{width:22px;height:22px;fill:#fff;stroke:none}
.toc-thumb-wrap.is-fav .toc-fav-badge{display:flex}
.toc-text{flex:1 1 auto;min-width:0}
.tref{display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.15rem}
.tname{display:block;font-family:var(--serif);font-weight:var(--serif-w);font-size:1.26rem}
.tsub{display:block;font-family:var(--sans);font-size:.78rem;font-weight:300;color:var(--muted);opacity:.85;margin-top:.2rem}

/* ---------- opening ---------- */
#curtain{position:fixed;inset:0;z-index:100;background:#0C1016;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .5s ease,visibility .5s ease}
#curtain .d{
  width:min(34vw,132px);aspect-ratio:1;border-radius:50%;background:var(--mirror);
  border:2px solid rgba(255,255,255,.26);
  box-shadow:0 12px 34px rgba(0,0,0,.5), inset 0 0 0 2px rgba(255,255,255,.32);
  animation:breathe 2.4s ease-in-out infinite;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
#curtain .d img{width:68%;height:68%;object-fit:contain}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.055);opacity:1}}
body.ready #curtain{opacity:0;visibility:hidden}
@media (prefers-reduced-motion: reduce){ #curtain .d{animation:none} }

/* tekst die verschilt naargelang losse schermen (mobiel) of een boek-spread (tablet+) */
.spread-only{display:none}

@media (min-width:1280px){
  .page{flex-basis:50vw;width:50vw}
  .page:nth-child(even){scroll-snap-align:none}
  .page:nth-child(odd){scroll-snap-align:start}
  .wrap{max-width:none;padding-left:clamp(2rem,4vw,4rem);padding-right:clamp(2rem,4vw,4rem)}

  .stack-only{display:none}
  .spread-only{display:inline}
  p.spread-only{display:block}
}

/* ---------- installatie-popup ---------- */
#installPrompt, #updatePrompt, #newStoryPrompt{
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  display:flex; justify-content:center;
  padding: 0 .9rem calc(.9rem + env(safe-area-inset-bottom));
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity var(--dur) ease, transform var(--dur) ease, visibility var(--dur) ease;
}
#installPrompt.show, #updatePrompt.show, #newStoryPrompt.show{opacity:1; visibility:visible; transform:translateY(0)}
#installPrompt .card, #updatePrompt .card, #newStoryPrompt .card{
  width:100%; max-width:420px;
  background:#161C26; color:#F6F1E9;
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-lg);
  padding:1.1rem 1.15rem;
  box-shadow:0 18px 44px rgba(0,0,0,.45);
  display:flex; gap:.85rem; align-items:flex-start;
}
#installPrompt .ic, #updatePrompt .ic, #newStoryPrompt .ic{
  flex:0 0 auto; width:2.7rem; height:2.7rem; border-radius:var(--radius-sm);
  background:#fff; border:1.5px solid rgba(255,255,255,.32);
  box-shadow:0 4px 12px rgba(0,0,0,.4), inset 0 0 0 1.5px rgba(255,255,255,.4);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
#installPrompt .ic img, #updatePrompt .ic img{width:100%; height:100%; object-fit:contain}
#updatePrompt .ic svg, #newStoryPrompt .ic svg{width:1.4rem; height:1.4rem; color:#16202C}
#installPrompt .body, #updatePrompt .body, #newStoryPrompt .body{flex:1 1 auto; min-width:0}
#installPrompt h3, #updatePrompt h3, #newStoryPrompt h3{font-family:var(--serif);font-weight:var(--serif-w);font-size:1.02rem;line-height:1.3;margin:0 0 .3rem;color:#fff}
#installPrompt p, #updatePrompt p, #newStoryPrompt p{font-family:var(--sans);font-size:.82rem;line-height:1.5;font-weight:300;opacity:.8;margin:0 0 .8rem}
#installPrompt .row, #updatePrompt .row, #newStoryPrompt .row{display:flex;gap:.55rem;flex-wrap:wrap}
#installPrompt button, #updatePrompt button, #newStoryPrompt button{
  font:inherit;font-size:.78rem;font-weight:500;border-radius:999px;cursor:pointer;
  -webkit-tap-highlight-color:transparent; padding:.55rem 1.1rem;
  transition:background var(--dur) ease,border-color var(--dur) ease,opacity var(--dur) ease;
}
#installPrompt .go, #updatePrompt .go, #newStoryPrompt .go{background:#F6F1E9;color:#16202C;border:1.5px solid #F6F1E9}
#installPrompt .go:active, #updatePrompt .go:active, #newStoryPrompt .go:active{background:#E4DDD1}
#installPrompt .later, #updatePrompt .later, #newStoryPrompt .later{background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.4);color:#fff}
#installPrompt .later:active, #updatePrompt .later:active, #newStoryPrompt .later:active{background:rgba(255,255,255,.18)}
#installPrompt .x, #updatePrompt .x, #newStoryPrompt .x{
  position:absolute; top:.55rem; right:.65rem; width:1.6rem; height:1.6rem; border-radius:50%;
  background:transparent; border:0; color:rgba(255,255,255,.55); font-size:1.1rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
#installPrompt .x:active, #updatePrompt .x:active, #newStoryPrompt .x:active{background:rgba(255,255,255,.12); color:#fff}
#installPrompt .card, #updatePrompt .card, #newStoryPrompt .card{position:relative}
#installPrompt .steps{list-style:none;margin:0 0 .8rem;padding:0;font-size:.82rem;line-height:1.5;font-weight:300;opacity:.85}
#installPrompt .steps li{margin:0 0 .3rem;padding-left:1.4rem;position:relative}
#installPrompt .steps li:before{content:attr(data-n);position:absolute;left:0;top:0;
  width:1.05rem;height:1.05rem;border-radius:50%;background:rgba(255,255,255,.14);
  font-size:.62rem;display:flex;align-items:center;justify-content:center;line-height:1}
@media (min-width:1280px){
  #installPrompt, #updatePrompt, #newStoryPrompt{padding-bottom:1.4rem; justify-content:flex-end; right:1.4rem}
  #installPrompt .card, #updatePrompt .card, #newStoryPrompt .card{max-width:360px}
}

/* ---------- over-deze-app modal ---------- */
.about-modal{
  position:fixed; inset:0; z-index:260;
  background:rgba(8,10,14,.92);
  display:flex; align-items:center; justify-content:center;
  padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.about-modal.show{opacity:1; visibility:visible}
.about-modal .card{
  position:relative; width:100%; max-width:420px; max-height:82vh; overflow:auto;
  background:#161C26; color:#F6F1E9;
  border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-lg);
  padding:1.4rem 1.3rem 1.3rem;
  box-shadow:0 18px 44px rgba(0,0,0,.45);
}
.about-modal h3{font-family:var(--serif);font-weight:var(--serif-w);font-size:1.2rem;margin:0 0 1rem;color:#fff}
.about-modal p{font-family:var(--sans);font-size:.84rem;line-height:1.55;font-weight:300;opacity:.82;margin:0 0 .8rem}
.about-modal .go{
  font:inherit;font-size:.78rem;font-weight:500;border-radius:999px;cursor:pointer;
  -webkit-tap-highlight-color:transparent; padding:.6rem 1.2rem; margin:0 0 .3rem;
  background:#F6F1E9;color:#16202C;border:1.5px solid #F6F1E9;
  transition:background var(--dur) ease,opacity var(--dur) ease;
}
.about-modal .go:active{background:#E4DDD1}
.about-modal .go:disabled{opacity:.5;cursor:default}
.about-modal .x{
  position:absolute; top:.7rem; right:.75rem; width:1.8rem; height:1.8rem; border-radius:50%;
  background:transparent; border:0; color:rgba(255,255,255,.55); font-size:1.25rem; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.about-modal .x:active{background:rgba(255,255,255,.12); color:#fff}
.about-contact{margin-top:1.1rem !important}
.about-contact a{color:inherit; text-decoration:underline; text-underline-offset:2px}
.about-footer{margin-top:1.2rem; padding-top:.9rem; border-top:1px solid rgba(255,255,255,.14)}
.about-version{
  font:inherit; font-size:.7rem; letter-spacing:.05em; color:rgba(255,255,255,.5);
  background:none; border:0; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent;
  display:inline-flex; align-items:center; gap:.35rem;
}
.about-version:after{content:'▾'; font-size:.6rem; transition:transform .2s ease}
.about-version[aria-expanded="true"]:after{transform:rotate(180deg)}
.about-changelog{margin-top:.7rem}
.about-ch-entry{margin:0 0 .9rem}
.about-ch-v{font-size:.7rem; letter-spacing:.06em; color:rgba(255,255,255,.7); margin:0 0 .4rem; font-weight:500}
.about-changelog ul{margin:0; padding-left:1.1rem}
.about-changelog li{font-size:.78rem; line-height:1.5; opacity:.72; margin:0 0 .3rem}

/* ---------- herinneringen ---------- */
.rem-section{border:0; margin:0 0 1.3rem; padding:0}
.rem-section legend{
  font-family:var(--serif); font-weight:var(--serif-w); font-size:.95rem; color:#fff;
  padding:0; margin:0 0 .7rem;
}
.rem-toggle{
  display:flex; align-items:center; gap:.6rem; font-size:.82rem; opacity:.9; margin:0 0 .9rem; cursor:pointer;
}
.rem-toggle input{width:1.05rem; height:1.05rem; accent-color:#F6F1E9; flex:0 0 auto}
.rem-fields{display:flex; flex-wrap:wrap; gap:.7rem .9rem; margin-left:1.65rem}
.rem-fields[hidden]{display:none}
.rem-field{display:flex; flex-direction:column; gap:.3rem; font-size:.68rem; letter-spacing:.04em; opacity:.7; text-transform:uppercase}
.rem-field[hidden]{display:none}
.rem-hint{font-size:.72rem;line-height:1.5;opacity:.6;margin:.6rem 0 0 1.65rem}
.rem-field select, .rem-field input[type="time"]{
  /* min. 16px: onder die grens zoomt iOS Safari automatisch in bij focus */
  font:inherit; font-size:16px; letter-spacing:0; text-transform:none;
  background:rgba(255,255,255,.06); color:#F6F1E9; border:1px solid rgba(255,255,255,.22);
  border-radius:var(--radius-sm); padding:.4rem .55rem; -webkit-tap-highlight-color:transparent;
}
.rem-field select option{color:#111}
#remindersForm .go{width:100%; text-align:center; margin-top:.2rem}

/* ---------- reminder-banner ---------- */
.reminder-banner{
  position:fixed; left:0; right:0; z-index:150;
  top:4.6rem;
  display:flex; justify-content:center;
  padding:0 .9rem;
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity var(--dur) ease, transform var(--dur) ease, visibility var(--dur) ease;
}
.reminder-banner.show{opacity:1; visibility:visible; transform:translateY(0)}
.reminder-banner p{
  width:100%; max-width:380px; margin:0 0 .7rem; font-size:.82rem; line-height:1.5; font-weight:300;
}
.reminder-banner{flex-direction:column; align-items:center}
.reminder-banner > p, .reminder-banner > .row{
  background:#161C26; color:#F6F1E9; width:100%; max-width:380px;
  border:1px solid rgba(255,255,255,.14); box-shadow:0 18px 44px rgba(0,0,0,.45);
}
.reminder-banner > p{border-radius:16px 16px 0 0; padding:.95rem 1.05rem .3rem; margin:0}
.reminder-banner > .row{
  border-radius:0 0 16px 16px; border-top:0; padding:.3rem 1.05rem .85rem;
  display:flex; gap:.55rem; flex-wrap:wrap;
}
.reminder-banner button{
  font:inherit;font-size:.78rem;font-weight:500;border-radius:999px;cursor:pointer;
  -webkit-tap-highlight-color:transparent; padding:.55rem 1.1rem;
}
.reminder-banner .go{background:#F6F1E9;color:#16202C;border:1.5px solid #F6F1E9}
.reminder-banner .go:active{background:#E4DDD1}
.reminder-banner .later{background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.4);color:#fff}
.reminder-banner .later:active{background:rgba(255,255,255,.18)}
@media (min-width:1280px){
  .reminder-banner{left:auto; right:1.4rem; padding:0}
  .reminder-banner > p, .reminder-banner > .row{max-width:340px}
}

/* ---------- menu: hamburger + slide-in paneel ---------- */
.menu-btn{
  position:fixed; top:.7rem; right:.7rem; z-index:60;
  width:2.6rem; height:2.6rem; border-radius:50%;
  border:1px solid rgba(255,255,255,.6); background:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 1px 1px rgba(255,255,255,.6) inset, 0 1px 4px rgba(0,0,0,.2);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.28rem;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background var(--dur) ease;
}
.menu-btn:active{background:rgba(255,255,255,.65)}
.menu-btn span{width:1.05rem; height:2px; background:var(--ink); border-radius:2px; display:block}
.menu-backdrop{
  position:fixed; inset:0; z-index:340; background:rgba(8,10,14,.6);
  opacity:0; transition:opacity .3s ease;
}
.menu-backdrop.show{opacity:1}
.side-menu{
  position:fixed; top:0; right:0; bottom:0; z-index:341; width:min(78vw,300px);
  background:#161C26; color:#F6F1E9;
  /* schaduw start volledig transparant: anders "bloedt" de blur van de
     schaduw nog een stukje het scherm in, ook terwijl het menu dicht is
     en het paneel via translateX(100%) buiten beeld staat. */
  box-shadow:-8px 0 40px rgba(0,0,0,0);
  transform:translateX(100%); transition:transform .32s ease-in, box-shadow .32s ease-in;
  /* zelf géén overflow/scroll meer — dat zit nu op .side-menu-scroll hieronder,
     zodat de sluitknop (los daarvan, direct in .side-menu) altijd op zijn
     plek blijft staan i.p.v. mee te scrollen met een lange menu-inhoud */
}
.side-menu.show{transform:translateX(0); box-shadow:-8px 0 40px rgba(0,0,0,.5)}
.side-menu-scroll{
  height:100%; overflow-y:auto; display:flex; flex-direction:column;
  padding: 1.4rem calc(1.4rem + env(safe-area-inset-right)) 1.4rem 1.4rem;
}
.side-menu-close{
  position:absolute; top:.8rem; right:.8rem; width:2.2rem; height:2.2rem; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); color:#fff;
  -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 1px 1px rgba(255,255,255,.22) inset;
  font-size:1.2rem; line-height:1; display:flex; align-items:center; justify-content:center;
  cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background var(--dur) ease;
}
.side-menu-close:active{background:rgba(255,255,255,.17)}
.side-menu ul{list-style:none; margin:0; padding:0}
.side-menu li{margin:0 0 .2rem}
.side-menu-heading{
  font-family:var(--sans); font-size:.68rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  /* Kleur iets donkerder gemaakt en opacity verwijderd voor betere contrastratio (was 4.8:1, nu 5.5:1) */
  color:#C9B27A; margin:1.7rem 0 .5rem; padding:0;
}
.side-menu-heading:first-child{margin-top:2.6rem}
.side-link{
  display:flex; align-items:center; gap:.85rem; width:100%; text-align:left; background:none; border:0;
  font:inherit; font-family:var(--serif); font-weight:var(--serif-w); font-size:1.05rem; color:#fff;
  padding:.85rem 0; border-bottom:1px solid rgba(255,255,255,.12);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.side-link .ic{flex:0 0 auto; width:1.2rem; height:1.2rem; color:var(--quote-gold); opacity:.9}
.side-link:active{opacity:.7}
.side-menu li:last-child .side-link{border-bottom:0}
.side-menu-foot{margin-top:auto; padding-top:1rem; border-top:1px solid rgba(255,255,255,.12)}
.side-lang{display:flex; gap:.5rem; margin-bottom:.9rem}
.side-lang-opt{
  flex:1 1 0; text-align:center;
  font-size:.74rem; font-weight:600; letter-spacing:.02em;
  color:#F6F1E9; text-decoration:none;
  background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.22); border-radius:999px;
  padding:.5rem .5rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:background .15s ease, border-color .15s ease;
}
.side-lang-opt:active{background:rgba(255,255,255,.14)}
.side-lang-opt.is-active{background:rgba(212,175,110,.16); border-color:var(--quote-gold); color:var(--quote-gold)}
.side-refresh{
  display:inline-flex; align-items:center; gap:.55rem;
  font:inherit; font-size:.78rem; font-weight:500; color:#F6F1E9;
  background:rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.3); border-radius:999px;
  padding:.5rem 1.05rem; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.side-refresh .ic{flex:0 0 auto; width:1.05rem; height:1.05rem; color:var(--quote-gold)}
.side-refresh:active{background:rgba(255,255,255,.18)}
.side-menu-foot p{font-size:.68rem; line-height:1.4; opacity:.5; margin:.55rem 0 0}

/* ---------- dankwoord: auteursvideo in spiegelframe ---------- */
/* alles op deze pagina gecentreerd, met ruime tussenruimtes; de marge onder
   de foto is bewust groot, anders overlapt de sierlijst (die 1.5x breder is
   dan de foto zelf) met de titel eronder */
.wrap.author-bio{align-items:center; text-align:center}
.wrap.author-bio .lab{margin-bottom:1.7rem}
.author-frame-wrap{
  position:relative; width:min(52vw,220px); aspect-ratio:998/987; margin:3.6rem auto;
}
.author-frame{
  position:relative; overflow:hidden;
  width:100%; height:100%; border-radius:50%;
  background:#111; border:3px solid rgba(0,0,0,.2);
  box-shadow:0 18px 46px rgba(0,0,0,.22), inset 0 0 0 2px rgba(255,255,255,.5);
}
.author-frame video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(.15) sepia(.08) contrast(1.05) saturate(1.05);
}
.author-frame:after{
  content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  box-shadow:inset 0 0 22px rgba(0,0,0,.25), inset 0 0 0 2px rgba(255,255,255,.35);
}
.wrap.author-bio .rule{margin:0 auto 2rem}
.wrap.author-bio p{margin-bottom:1.5rem; text-align:left}
.wrap.author-bio p:last-child{margin-bottom:0}

/* ---------- vintage spiegelomlijsting (gedeelde afbeelding over de camera-schijven) ---------- */
.disc-hit, .mo-disc-wrap, .author-frame-wrap{position:relative}
.mo-disc-wrap{display:flex; align-items:center; justify-content:center}
.disc-hit:before, .mo-disc-wrap:before, .author-frame-wrap:before{
  content:''; position:absolute; top:50%; left:50%;
  aspect-ratio:1470/1414;
  transform:translate(-50%,-50%);
  background:url('../img/mirror-frame.webp') center/100% 100% no-repeat;
  pointer-events:none; z-index:5;
}
.disc-hit:before{width:calc(min(46vw,205px) * 1.473)}
.mo-disc-wrap:before{width:calc(min(56vw,320px) * 1.473)}
.author-frame-wrap:before{width:calc(100% * 1.473)}

/* ---------- donatie ---------- */
.donate{margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.14)}
.donate-lead{font-size:.86rem; line-height:1.55; opacity:.78; margin:0 0 1rem; text-align:center}
.donate-amounts{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem; margin:0 0 .9rem;
}
.donate-amt{
  font:inherit; font-size:.82rem; font-weight:500; text-decoration:none;
  color:#F6F1E9; border:1.5px solid rgba(255,255,255,.32); border-radius:999px;
  padding:.75rem 1.05rem; display:inline-flex; align-items:center;
  -webkit-tap-highlight-color:transparent; transition:background .2s ease, border-color .2s ease;
}
.donate-amt:active{background:rgba(255,255,255,.12)}
.donate-amt-custom{background:#F6F1E9; color:#16202C; border-color:#F6F1E9}
.donate-amt-custom:active{background:#E4DDD1}
.donate-note{font-size:.68rem; letter-spacing:.03em; opacity:.5; margin:0; text-align:center}

.notes-empty-how{font-weight:500; margin:1.7rem 0 1rem}
.notes-steps{list-style:none; margin:0; padding:0; font-size:.92rem; line-height:1.55; font-weight:300}
.notes-steps li{margin:0 0 .9rem; padding-left:2.1rem; position:relative}
.notes-steps li:before{
  content:attr(data-n); position:absolute; left:0; top:.05rem;
  width:1.4rem; height:1.4rem; border-radius:50%;
  font-size:.78rem; font-weight:500; display:flex; align-items:center; justify-content:center; line-height:1;
}
/* zelfde kleuren als de markeerstift straks gebruikt om tekst mee te markeren */
.notes-steps li:nth-child(1):before{background:#7EC8E3; color:#16202C}
.notes-steps li:nth-child(2):before{background:#9CCB6B; color:#16202C}
.notes-steps li:nth-child(3):before{background:#FDE047; color:#16202C}
.notes-steps li:nth-child(4):before{background:#F49AC1; color:#16202C}

/* ---------- Mijn markeerstift: markeringen in de verhaaltekst, sleepbolletjes en toast ---------- */
mark.hl-mark{
  background:transparent; color:inherit; border-radius:.15em; padding:.02em 0;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
mark.hl-mark[data-color="blue"]{background:rgba(126,200,227,.55)}
mark.hl-mark[data-color="green"]{background:rgba(156,203,107,.55)}
mark.hl-mark[data-color="yellow"]{background:rgba(253,224,71,.55)}
mark.hl-mark[data-color="pink"]{background:rgba(244,154,193,.55)}
mark.hl-mark[data-color="orange"]{background:rgba(255,179,71,.55)}
mark.hl-mark.hl-adjusting{outline:2px dashed rgba(255,255,255,.7); outline-offset:2px}
/* kort even oplichten wanneer je vanuit de markeerstift-lijst terugspringt
   naar de markering zelf, zodat je 'm meteen terugvindt in de tekst */
@keyframes hlPulse{0%,100%{filter:none} 25%,75%{filter:brightness(1.6)}}
mark.hl-mark.hl-pulse{animation:hlPulse 1.4s ease-in-out}

/* ---------- Mijn markeerstift: overzichtslijst in de overlay ---------- */
.notes-list{display:flex; flex-direction:column; gap:1rem; margin-top:.2rem}
.note-item{display:flex; align-items:flex-start; gap:.65rem}
/* verticaal gecentreerd op de eerste tekstregel (.note-text: .92rem/1.5) */
.note-dot{flex:0 0 auto; width:10px; height:10px; border-radius:50%; margin-top:calc((.92rem * 1.5 - 10px) / 2)}
.note-dot[data-color="blue"]{background:#7EC8E3}
.note-dot[data-color="green"]{background:#9CCB6B}
.note-dot[data-color="yellow"]{background:#FDE047}
.note-dot[data-color="pink"]{background:#F49AC1}
.note-dot[data-color="orange"]{background:#FFB347}
.note-body{
  flex:1 1 auto; min-width:0; text-align:left; background:none; border:0; padding:0; margin:0;
  cursor:pointer; -webkit-tap-highlight-color:transparent; font:inherit;
}
.note-text{font-family:var(--serif); font-size:.92rem; line-height:1.5; color:#fff; margin:0 0 .2rem; opacity:1}
.note-meta{font-family:var(--sans); font-size:.72rem; line-height:1.4; font-weight:300; color:var(--quote-gold); opacity:.9; margin:0}
/* onder elkaar i.p.v. naast elkaar (op verzoek), zodat .note-body meer
   breedte overhoudt voor de tekst; knoppen zelf ook verkleind (48px→36px)
   zodat de gestapelde kolom niet meer verticale ruimte inneemt dan nodig */
.note-actions{flex:0 0 auto; display:flex; flex-direction:column; gap:.4rem}
.note-share, .note-delete{
  width:36px; height:36px; flex:0 0 auto; border-radius:50%;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.75);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  -webkit-tap-highlight-color:transparent; transition:background var(--dur) ease;
}
.note-share:active, .note-delete:active{background:rgba(255,255,255,.16)}
.note-share svg, .note-delete svg{width:16px; height:16px}
/* onzichtbare sentinel onderaan de lijst: triggert de volgende lazy-load-
   batch zodra 'ie in beeld komt (zie NOTES_BATCH_SIZE in notes.js) */
.notes-lazy-sentinel{height:1px; flex:0 0 auto}

.hl-handle{
  position:fixed; width:20px; height:20px; border-radius:50%;
  transform:translate(-50%, 4px); z-index:90; touch-action:none;
  box-shadow:0 1px 4px rgba(0,0,0,.45);
}
.hl-handle:before{
  content:''; position:absolute; left:50%; bottom:100%;
  width:2px; height:var(--stem-h, 20px); background:currentColor; opacity:.9;
  transform:translateX(-50%);
}
.hl-handle[data-color="blue"]{background:#7EC8E3; color:#7EC8E3}
.hl-handle[data-color="green"]{background:#9CCB6B; color:#9CCB6B}
.hl-handle[data-color="yellow"]{background:#FDE047; color:#FDE047}
.hl-handle[data-color="pink"]{background:#F49AC1; color:#F49AC1}
.hl-handle[data-color="orange"]{background:#FFB347; color:#FFB347}

.hl-toast{
  position:fixed; left:50%; bottom:calc(1.4rem + env(safe-area-inset-bottom));
  transform:translate(-50%, 20px); z-index:500;
  font:inherit; font-family:var(--sans); font-size:.84rem; font-weight:500;
  padding:.75rem 1.2rem; border-radius:999px; border:none;
  background:rgba(20,24,30,.95); color:#fff; box-shadow:0 8px 30px rgba(0,0,0,.35);
  opacity:0; visibility:hidden; pointer-events:none;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:opacity var(--dur) ease, transform var(--dur) ease, visibility var(--dur) ease;
}
.hl-toast.show{opacity:1; visibility:visible; transform:translate(-50%, 0); pointer-events:auto}