/* ============================================================
   DEB BARON - VOORSTEL 2 "TWEE REGISTERS, EEN PEN"
   Gedeelde stylesheet voor alle pagina's van het prototype
   Herzien 2026-07-19 na designreview: tokens, contrast (WCAG AA),
   dag-chrome, mobiele fixes, focus/motion-vangnet, verhogingsslag
   ============================================================ */
:root{
  /* registers */
  --day-bg:#f4ece2;
  --day-warm:#a8563f;      /* accent als vlak (knoppen, badges): witte tekst erop is AA */
  --day-warm-ink:#7e3d2b;  /* accent als tekst op lichte vlakken: AA op alle dag-tinten */
  --day-deep:#5f2e22;
  --night-bg:#10141d;
  --night-panel:#161c29;
  --night-cool:#8ba7d0;    /* nacht-accent, AA op night-bg en night-panel */
  --night-deep:#dde4ee;
  --night-soft:#aab3c2;    /* secundaire nacht-tekst */
  --paper:#faf6ef;
  --ink:#241f1c;
  /* lijnen en microtype */
  --line-day:#d8bfa6;
  --line-night:#2c3750;
  --line-soft:#d9cdbd;     /* decoratieve randen op licht */
  --line-strong:#97876d;   /* functionele randen (inputs): 3:1 op wit */
  --fine:#756a5c;          /* fine-print op paper/wit: AA */
  /* systeem */
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Outfit',sans-serif;
  --track-label:.3em;
  --track-wide:.26em;
  --gutter:3rem;
  --shadow-sm:0 8px 20px rgba(0,0,0,.25);
  --shadow-md:0 18px 40px rgba(0,0,0,.35);
  --shadow-lg:0 30px 70px rgba(0,0,0,.45);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-weight:300;background:var(--paper);color:var(--ink);line-height:1.7;font-size:1.03rem;
  display:flex;flex-direction:column;min-height:100vh}
main{flex:1 0 auto}
img{max-width:100%;height:auto;display:block}
.label{font-size:.72rem;letter-spacing:var(--track-label);text-transform:uppercase;font-weight:500}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* nachtregister: iets meer gewicht voor leesbaarheid op donker */
.theme-night p,.night p,.mercer-band .content p,.about-col.night-col p,.bridge .night-side p,.news--night p{font-weight:400}
.theme-night h1,.theme-night h2,.theme-night h3,.mercer-band h3,.night h2,.about-col.night-col h3,.bridge .night-side h3{font-weight:600}

/* toetsenbordfocus: zichtbaar en merk-consistent */
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px}
.btn:focus-visible,.news button:focus-visible,.cform button:focus-visible{outline-offset:2px}

/* ---------- NAVIGATIE ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:50;mix-blend-mode:difference;color:#fff;transition:background .3s ease}
header.scrolled{mix-blend-mode:normal;background:rgba(13,16,23,.92);backdrop-filter:blur(8px);
  box-shadow:0 1px 0 rgba(255,255,255,.07)}
.theme-day header.scrolled{background:rgba(250,246,239,.95);color:var(--ink);box-shadow:0 1px 0 rgba(36,31,28,.1)}
.theme-day header.scrolled a{color:var(--ink)}
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:1rem 2.4rem;gap:1.5rem}
.nav ul{display:flex;gap:1.9rem;list-style:none}
.nav ul.right{justify-content:flex-end}
.nav a{color:#fff;text-decoration:none}
.nav ul a{font-size:.7rem;letter-spacing:var(--track-wide);text-transform:uppercase;font-weight:400;opacity:.75;transition:opacity .2s;padding:.3rem 0}
.nav ul a:hover,.nav ul a[aria-current]{opacity:1;border-bottom:1px solid currentColor}
.logo{font-family:var(--serif);font-size:1.55rem;font-weight:500;letter-spacing:var(--track-wide);text-transform:uppercase;white-space:nowrap}
@media(max-width:820px){
  .nav{display:flex;flex-wrap:wrap;justify-content:center;padding:.65rem 1rem .5rem;gap:.15rem 1.1rem;line-height:1.25}
  .nav .logo{width:100%;text-align:center;order:-1;font-size:1.3rem}
  .nav ul{gap:1.1rem}
  .nav ul a{font-size:.64rem;padding:.2rem 0}
}

/* ---------- SPLIT HERO (home) ---------- */
.splitwrap{position:relative}
.split{display:flex;min-height:100vh}
.half{position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  padding:4.5rem 3.2rem 4.2rem;overflow:hidden;text-decoration:none;
  transition:flex 0.65s cubic-bezier(.6,.05,.25,1)}
.split:hover .half:not(:hover){flex:.72}
.half:hover{flex:1.28}
.day{background:linear-gradient(160deg,#f7efe4,#eadbc8 55%,#dfc2a8);color:var(--day-deep)}
.night{background:linear-gradient(200deg,#1a2130,#10141d 55%,#0a0d14);color:var(--night-deep)}
.half .covers{position:absolute;top:12%;left:50%;transform:translateX(-50%);display:flex;gap:1rem;opacity:.96}
.half .covers img{width:176px;border-radius:2px;box-shadow:var(--shadow-md),0 4px 10px rgba(0,0,0,.2)}
.day .covers img:first-child{transform:rotate(-5deg) translateY(12px)}
.day .covers img:last-child{transform:rotate(4deg)}
.night .covers img:first-child{transform:rotate(-4deg)}
.night .covers img:last-child{transform:rotate(5deg) translateY(14px)}
.half .label{opacity:.85}
.half h2{font-family:var(--serif);font-weight:500;font-size:clamp(2.2rem,3.8vw,3.6rem);line-height:1.05;margin-top:.7rem}
.night h2{font-weight:600}
.half h2 em{font-style:italic}
.half p{margin-top:.9rem;max-width:26rem;font-size:1rem;opacity:.9}
.half .go{margin-top:1.6rem;font-size:.74rem;letter-spacing:var(--track-label);text-transform:uppercase;font-weight:500;
  display:inline-flex;align-items:center;gap:.6rem}
.half .go::after{content:"";width:36px;height:1px;background:currentColor;transition:width .4s}
.half:hover .go::after{width:64px}
.day .go{color:var(--day-warm-ink)}
.night .go{color:var(--night-cool)}
/* de divider is een flex-kind van 0px breed tussen de twee helften:
   de cirkel blijft daardoor altijd exact op de naad, ook tijdens het schuiven */
.divider{flex:0 0 0;width:0;position:relative;z-index:5;pointer-events:none}
.divider .disc{position:absolute;left:0;top:50%;transform:translate(-50%,-50%);
  width:118px;height:118px;border-radius:50%;background:var(--paper);display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 40px rgba(0,0,0,.35),0 0 0 1px var(--line-soft),0 0 0 7px var(--paper),0 0 0 8px rgba(36,31,28,.14)}
.divider .disc span{font-family:var(--serif);font-size:2.2rem;font-weight:600;letter-spacing:.05em;color:var(--ink)}

/* ---------- STATEMENT ---------- */
.statement{padding:6rem 2rem;text-align:center;background:var(--paper)}
/* naad-motief als ornament: een dunne lijn die van dag- naar nachtkleur verloopt */
.statement::before{content:"";display:block;width:1px;height:54px;margin:0 auto 2.2rem;
  background:linear-gradient(180deg,var(--day-warm) 0 50%,#41546f 50% 100%)}
.statement .big{font-family:var(--serif);font-size:clamp(1.8rem,3.4vw,2.9rem);font-weight:500;line-height:1.25;max-width:56rem;margin:0 auto}
.statement .big em{font-style:italic}
.statement .big .warm{color:var(--day-warm-ink)}
.statement .big .cool{color:#41546f}
.statement .sub{margin-top:1.6rem;font-size:1.05rem;color:#6d6258;max-width:42rem;margin-left:auto;margin-right:auto}

/* ---------- SERIES BANDS (home) ---------- */
.band{display:grid;grid-template-columns:1fr 1fr;min-height:88vh}
.band .visual{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:4rem 2rem}
/* passe-partout-motief doorgetrokken: covers in een smal papieren kader, zoals de auteursfoto */
.band .visual .frame{position:relative;z-index:2;background:var(--paper);padding:10px;border-radius:2px;box-shadow:var(--shadow-lg)}
.band .visual .frame img{width:min(310px,62vw);border-radius:1px}
.band .visual img.back{position:absolute;width:min(300px,60%);opacity:.45;filter:blur(1px);z-index:1}
.byrne-band .visual img.back{transform:translate(36%,8%) rotate(6deg)}
.mercer-band .visual img.back{transform:translate(-38%,6%) rotate(-7deg);opacity:.5}
.band .visual::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,transparent 55%,rgba(0,0,0,.16))}
.band .content{display:flex;flex-direction:column;justify-content:center;padding:5rem 4.5rem}
.band h3{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,3.2vw,3rem);line-height:1.08;margin-top:.8rem}
.band h3 em{font-style:italic}
.band p{margin-top:1.05rem;max-width:30rem}
.band .titles{margin-top:1.6rem;list-style:none;border-top:1px solid currentColor;max-width:30rem;opacity:.92}
.band .titles li{border-bottom:1px solid currentColor;font-size:.95rem}
.band .titles a{text-decoration:none;color:inherit;display:flex;justify-content:space-between;width:100%;gap:1rem;padding:.68rem .2rem}
.band .titles .no{font-family:var(--serif);font-style:italic;opacity:.85}
.band .titles li:hover{opacity:.7}
.band .titles li.plain{padding:.68rem .2rem;display:flex;justify-content:space-between;gap:1rem}
.btn{font-size:.74rem;letter-spacing:var(--track-wide);text-transform:uppercase;font-weight:500;
  padding:1rem 1.6rem;text-decoration:none;transition:all .3s;display:inline-block}
.band .btn{margin-top:1.9rem;align-self:flex-start}
.byrne-band .visual{background:radial-gradient(circle at 30% 30%,#e9d3ba,#d9b795 60%,#c69a72)}
.byrne-band .content{background:var(--day-bg);color:var(--day-deep)}
.byrne-band .label{color:var(--day-warm-ink)}
.byrne-band .titles,.byrne-band .titles li{border-color:var(--line-day)}
.btn-day{background:var(--day-warm);color:#fff}
.btn-day:hover{background:var(--day-deep)}
.mercer-band .visual{background:radial-gradient(circle at 70% 25%,#232e44,#151b28 55%,#0b0e15)}
.mercer-band .content{background:var(--night-bg);color:var(--night-deep)}
.mercer-band .label{color:var(--night-cool)}
.mercer-band .titles,.mercer-band .titles li{border-color:var(--line-night)}
.btn-night{border:1px solid var(--night-cool);color:var(--night-deep)}
.btn-night:hover{background:var(--night-cool);color:var(--night-bg)}

/* ---------- BRIDGE (home, about) ---------- */
.bridge{position:relative;background:linear-gradient(90deg,var(--day-bg) 0 50%,var(--night-bg) 50% 100%);padding:6rem var(--gutter)}
.bridge-inner{max-width:1150px;margin:0 auto;display:grid;grid-template-columns:1fr 340px 1fr;gap:3rem;align-items:center}
.bridge .day-side{color:var(--day-deep);text-align:right}
.bridge .night-side{color:var(--night-deep)}
.bridge h3,.about-bridge h2{font-family:var(--serif);font-weight:500;font-size:1.65rem;line-height:1.2}
.bridge p{margin-top:.8rem;font-size:.98rem;opacity:.88}
/* gedeeld foto-met-passe-partout-component (home en about) */
.photo{position:relative;background:var(--paper);padding:12px 12px 14px;border-radius:2px;box-shadow:var(--shadow-lg)}
.photo img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 18%;border-radius:1px;filter:grayscale(1) contrast(1.05)}
.photo figcaption{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);
  width:max-content;max-width:96%;text-align:center;white-space:nowrap;background:var(--paper);color:var(--ink);
  font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;padding:.55rem 1rem;border:1px solid var(--line-soft)}

/* ---------- NEWSLETTER ---------- */
.news{background:var(--paper);padding:6rem var(--gutter)}
.news-inner{max-width:900px;margin:0 auto;text-align:center}
.news h2{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,3.4vw,3rem)}
.news h2 em{font-style:italic}
.news p{max-width:38rem;margin:1.2rem auto 0;color:#6d6258}
.gifts{display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap;border:0;padding:0;margin:0;min-inline-size:0}
.giftcard{display:flex;gap:1.1rem;align-items:center;border:1px solid var(--line-soft);background:#fff;padding:1.1rem 1.4rem;
  border-radius:3px;min-width:270px;max-width:340px;text-align:left;box-shadow:0 10px 24px rgba(36,31,28,.07)}
.giftcard img{width:52px;border-radius:2px}
.giftcard .t{font-weight:400;font-size:.95rem}
.giftcard .s{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fine)}
.giftcard.soon{border-style:dashed;background:transparent;box-shadow:none}
.giftcard.soon img{filter:grayscale(.6);opacity:.75}
/* selecteerbare gift-kaarten (nieuwsbrief-fieldset en contact-formulier) */
.gifts .giftcard{position:relative;display:flex;align-items:center;gap:1.1rem;cursor:pointer;margin:0;text-transform:none;letter-spacing:normal;transition:border-color .25s,box-shadow .25s}
.gifts .giftcard input[type=radio]{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.gifts .giftcard::after{content:"";flex:none;margin-left:auto;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line-strong);transition:border-color .25s,background .25s,box-shadow .25s}
.gifts .giftcard.is-selected,.gifts .giftcard:has(input:checked){border-color:var(--day-warm);box-shadow:0 12px 26px rgba(168,86,63,.16)}
.gifts .giftcard.is-selected::after,.gifts .giftcard:has(input:checked)::after{border-color:var(--day-warm);background:var(--day-warm);box-shadow:inset 0 0 0 3px #fff}
.gifts .giftcard:has(input:focus-visible){outline:2px solid var(--day-warm);outline-offset:2px}
.news form{margin-top:2.4rem;display:flex;flex-direction:column;align-items:center;gap:1.8rem}
.signup-row{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}
/* gift-keuze in het contactformulier, verschijnt bij aangevinkte nieuwsbrief */
.gift-choice{margin-top:1.4rem}
.gift-choice[hidden]{display:none}
.gift-choice-label{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:#6f6557;margin-bottom:.8rem}
.gift-choice .gifts{flex-direction:column;gap:.8rem}
.gift-choice .giftcard{max-width:none;width:100%}
.gift-note{font-size:.82rem;letter-spacing:.03em;margin-bottom:1rem;opacity:.85;font-style:italic}
.news input[type=email],.news .signup-name{padding:1rem 1.3rem;min-width:280px;border:1px solid var(--line-strong);background:#fff;font-family:var(--sans);font-size:.98rem;border-radius:2px}
.news button{font-size:.74rem;letter-spacing:var(--track-wide);text-transform:uppercase;font-weight:500;background:var(--ink);color:var(--paper);
  border:none;padding:1rem 1.8rem;cursor:pointer;border-radius:2px;transition:background .3s}
.news button:hover{background:var(--day-warm)}
.news .fine{margin-top:1rem;font-size:.74rem;letter-spacing:.08em;color:var(--fine)}
/* nachtvariant (mercer-seriepagina) */
.news--night{background:var(--night-panel)}
.news--night h2{color:var(--night-deep)}
.news--night p{color:var(--night-soft)}
.news--night input[type=email],.news--night .signup-name{border-color:var(--line-night);background:var(--night-bg);color:var(--night-deep)}
.news--night button{background:var(--night-cool);color:var(--night-bg)}
.news--night button:hover{background:var(--night-deep)}
.news--night .fine{color:#8b97ad}

/* ---------- FOOTER ---------- */
footer{background:var(--ink);color:#cfc6bb;padding:3.2rem 2rem 2.4rem;text-align:center}
footer .fdisc{width:46px;height:46px;border-radius:50%;background:var(--paper);margin:0 auto 1.2rem;
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px var(--line-soft),0 6px 16px rgba(0,0,0,.3)}
footer .fdisc span{font-family:var(--serif);font-weight:600;font-size:1rem;color:var(--ink);letter-spacing:.05em}
.theme-day footer{background:#46281e;color:#e9ddcd}
.theme-day footer .foot-links a{color:#d9c5ae}
.theme-night footer{background:#0a0d15;color:#8b96ab}
.theme-night footer .foot-links a{color:#a4aec1}
footer .flogo{font-family:var(--serif);font-size:1.25rem;letter-spacing:var(--track-label);text-transform:uppercase;color:#faf6ef;text-decoration:none}
.theme-night footer .flogo{color:#dde4ee}
.foot-links{margin-top:1.6rem;display:flex;gap:2rem;justify-content:center;list-style:none;flex-wrap:wrap}
.foot-links a{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;color:#cfc6bb;opacity:.85}
.foot-links a:hover{opacity:1}
.copyright{margin-top:2rem;font-size:.7rem;letter-spacing:.12em;opacity:.75}

/* ---------- SERIEPAGINA'S ---------- */
.page-hero{padding:9.5rem var(--gutter) 4.5rem;text-align:center}
.page-hero .label{display:block}
.page-hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.6rem,5.4vw,4.4rem);line-height:1.05;margin-top:.9rem}
.page-hero h1 em{font-style:italic}
.page-hero .lede{max-width:44rem;margin:1.4rem auto 0;font-size:1.12rem}
.theme-day{background:linear-gradient(175deg,#f7efe4,var(--day-bg) 40%)}
.theme-day{color:var(--day-deep)}
.theme-day .page-hero .label{color:var(--day-warm-ink)}
.theme-night{background:var(--night-bg);color:var(--night-deep)}
.theme-night .page-hero{background:radial-gradient(ellipse at 50% -10%,#232e44,transparent 65%)}
.theme-night .page-hero .label{color:var(--night-cool)}
.theme-night .page-hero .lede{color:var(--night-soft)}

.booklist{max-width:1080px;margin:0 auto;padding:2rem var(--gutter) 6rem;display:flex;flex-direction:column;gap:4.5rem}
.book{display:grid;grid-template-columns:300px 1fr;gap:3.2rem;align-items:center;scroll-margin-top:7rem}
/* Ankerlanding: de vaste header plus het genummerde schijfje boven de cover mogen
   niets afsnijden wanneer je vanaf de homepage naar een boek springt. */
[id]{scroll-margin-top:6rem}
.book:nth-child(even){grid-template-columns:1fr 300px}
.book:nth-child(even) .bookcover{order:2}
.bookcover{position:relative}
.bookcover a{display:block}
.bookcover img{border-radius:3px;box-shadow:0 24px 55px rgba(0,0,0,.4)}
.bookcover .no{position:absolute;top:-14px;left:-14px;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-style:italic;font-size:1.15rem;box-shadow:var(--shadow-sm)}
.theme-day .bookcover .no{background:var(--day-warm);color:#fff}
.theme-night .bookcover .no{background:var(--night-cool);color:var(--night-bg)}
.bookinfo .label{opacity:.9}
.bookinfo h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.8rem,3vw,2.5rem);line-height:1.1;margin-top:.5rem}
.theme-night .bookinfo h2{font-weight:600}
.bookinfo p{margin-top:1rem;max-width:34rem}
.theme-day .bookinfo p{color:#6e4a3c}
.theme-night .bookinfo p{color:var(--night-soft)}
.bookinfo .btn{margin-top:1.6rem}
.series-note{max-width:720px;margin:0 auto;padding:0 var(--gutter) 5rem;text-align:center;font-family:var(--serif);font-style:italic;font-size:1.35rem;line-height:1.5}
.theme-night .series-note{color:#c7cedb}
.theme-day .series-note{color:#7a4a38}
/* reader reviews: per-serie blok, dag/nacht-thema */
.reviews{padding:1rem var(--gutter) 5rem;text-align:center}
.reviews-kicker{display:block;margin-bottom:2.2rem}
.theme-day .reviews-kicker{color:var(--day-warm-ink)}
.theme-night .reviews-kicker{color:var(--night-cool)}
.reviews-grid{max-width:1080px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:2rem}
.review{flex:1 1 280px;max-width:340px;margin:0;display:flex;flex-direction:column;gap:1rem;padding:1.9rem 1.7rem;border-radius:3px;text-align:left}
.theme-day .review{background:#fff;box-shadow:0 10px 24px rgba(36,31,28,.07)}
.theme-night .review{background:var(--night-panel)}
.stars{letter-spacing:.12em;font-size:.92rem;color:var(--day-warm)}
.theme-night .stars{color:var(--night-cool)}
.review blockquote{margin:0;font-family:var(--serif);font-style:italic;font-size:1.14rem;line-height:1.45}
.review figcaption{margin-top:auto;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;opacity:.65}
.reviews-rating{display:inline-block;margin-top:2.6rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.theme-day .reviews-rating{color:var(--day-warm-ink)}
.theme-night .reviews-rating{color:var(--night-cool)}
/* homepage social-proof-regel */
.proof-line{margin-top:1.7rem;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase}
.proof-line .stars{margin-right:.5rem}
.proof-line a{color:var(--day-warm-ink);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}

/* ---------- ABOUT (twee-helften-motief, zoals de auteurssectie op de homepage) ---------- */
.about-split{background:linear-gradient(90deg,var(--day-bg) 0 50%,var(--night-bg) 50% 100%)}
.about-hero{position:relative;padding:9.5rem var(--gutter) 4rem;text-align:center}
.about-hero .label,.about-hero h1{mix-blend-mode:difference;color:#fff}
.about-hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.6rem,5.4vw,4.4rem);line-height:1.05;margin-top:.9rem}
.about-hero h1 em{font-style:italic}
.about-bridge{padding:0 var(--gutter) 5rem}
.about-bridge-inner{max-width:1150px;margin:0 auto;display:grid;grid-template-columns:1fr 340px 1fr;gap:3rem;align-items:start}
.about-bridge .day-side{color:var(--day-deep);text-align:right}
.about-bridge .night-side{color:var(--night-deep)}
.about-bridge p{margin-top:.8rem;font-size:.98rem;opacity:.9}
.about-bridge p.about-bridge-close{max-width:860px;margin:5.5rem auto 0;padding:2.6rem 2.8rem;text-align:center;font-family:var(--serif);font-style:italic;font-size:clamp(1.55rem,2.9vw,2.15rem);line-height:1.4;opacity:1;color:var(--day-bg);background:var(--night-panel);border-top:1px solid var(--night-cool);border-bottom:1px solid var(--night-cool)}
@media (max-width:760px){.about-bridge p.about-bridge-close{max-width:none;margin-top:3rem;padding:1.9rem 1.4rem;font-size:1.45rem}}
.about-cols{display:grid;grid-template-columns:1fr 1fr}
.about-col{padding:2rem 4.5rem 6.5rem}
.about-col .inner{max-width:520px;display:flex;flex-direction:column;height:100%}
.about-col.day-col .inner{margin-left:auto}
.about-col.night-col .inner{margin-right:auto}
.about-col.day-col{color:var(--day-deep)}
.about-col.night-col{color:var(--night-deep)}
.about-col .label{opacity:.9}
.about-col.day-col .label{color:var(--day-warm-ink)}
.about-col.night-col .label{color:var(--night-cool)}
.about-col h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.7rem,2.8vw,2.4rem);margin-top:.7rem;line-height:1.12}
.about-col h3 em{font-style:italic}
.about-col p{margin-top:1rem;max-width:32rem;font-size:1rem}
.about-col.day-col p{color:#6e4a3c}
.about-col.night-col p{color:var(--night-soft)}
.about-col .go{margin-top:auto;padding-top:1.8rem;font-size:.72rem;letter-spacing:var(--track-wide);text-transform:uppercase;font-weight:500;
  text-decoration:none;display:inline-flex;align-items:center;gap:.6rem}
.about-col .go::after{content:"";width:36px;height:1px;background:currentColor;transition:width .4s}
.about-col .go:hover::after{width:64px}
.about-col.day-col .go{color:var(--day-warm-ink)}
.about-col.night-col .go{color:var(--night-cool)}
.about-quote{background:var(--paper);padding:5rem var(--gutter);text-align:center}
.about-quote p{font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.4;color:var(--day-deep);max-width:52rem;margin:0 auto}
.about-quote .src{margin-top:1rem;font-size:.68rem;letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--fine)}

/* ---------- BLOG ---------- */
.postlist{max-width:760px;margin:0 auto;padding:1rem var(--gutter) 6rem}
.postcard{display:block;text-decoration:none;color:inherit;border:1px solid var(--line-day);background:#fff;border-radius:4px;
  padding:2.4rem 2.6rem;transition:transform .25s,box-shadow .25s}
.postcard:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(36,31,28,.12)}
.postcard .date{font-size:.7rem;letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--fine)}
.postcard h2{font-family:var(--serif);font-weight:500;font-size:1.9rem;margin-top:.5rem;line-height:1.15}
.postcard p{margin-top:.8rem;color:#6d6258}
.postcard .more{display:inline-block;margin-top:1.2rem;font-size:.72rem;letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--day-warm-ink)}
.article{max-width:700px;margin:0 auto;padding:1rem 2rem 5rem}
.article p{margin-top:1.25rem;font-size:1.08rem;color:#3d362f}
.article h2{font-family:var(--serif);font-weight:500;font-size:1.6rem;margin-top:2.4rem}
.article .backlink{display:inline-block;margin-top:2.6rem;font-size:.72rem;letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--day-warm-ink);text-decoration:none}

/* ---------- CONTACT ---------- */
.contact-grid{max-width:1050px;margin:0 auto;padding:1rem var(--gutter) 6rem;display:grid;grid-template-columns:1.1fr .9fr;gap:4rem}
.cform label{display:block;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:#6f6557;margin:1.4rem 0 .4rem}
.cform input,.cform textarea{width:100%;padding:.95rem 1.1rem;border:1px solid var(--line-strong);background:#fff;font-family:var(--sans);font-size:.98rem;border-radius:2px}
.cform textarea{min-height:150px;resize:vertical}
.cform .check{display:flex;gap:.7rem;align-items:flex-start;margin-top:1.4rem;font-size:.95rem;color:#6d6258}
.cform .check input{width:auto;margin-top:.3rem;accent-color:var(--day-warm)}
.cform button{margin-top:1.8rem;font-size:.74rem;letter-spacing:var(--track-wide);text-transform:uppercase;font-weight:500;
  background:var(--ink);color:var(--paper);border:none;padding:1rem 2rem;cursor:pointer;border-radius:2px}
.cform button:hover{background:var(--day-warm)}
.cform h2{font-family:var(--serif);font-weight:500;font-size:1.6rem;margin-top:2.4rem}
.cform h2:first-child{margin-top:0}
.cform p{margin-top:.7rem;color:#6d6258}
.cform .mailbtn{display:inline-block;margin-top:1.1rem;font-family:var(--sans);font-size:.86rem;
  letter-spacing:.06em;background:var(--ink);color:var(--paper);text-decoration:none;
  padding:.95rem 1.8rem;border-radius:2px}
.cform .mailbtn:hover{background:var(--day-warm)}
.cform .fine{font-size:.82rem}
.contact-aside h2{font-family:var(--serif);font-weight:500;font-size:1.6rem}
.contact-aside p{margin-top:.7rem;color:#6d6258}
.contact-aside .blockrow{margin-top:2rem}
.contact-aside a{color:var(--day-warm-ink)}
.contact-aside .giftcard{margin-top:1rem;min-width:0;max-width:none}
.contact-aside .giftcard img{width:84px}

/* ---------- ANIMATIE ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .half,.half .go::after,.about-col .go::after,.postcard{transition:none}
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1100px){
  .book{grid-template-columns:260px 1fr;gap:2.4rem}
  .book:nth-child(even){grid-template-columns:1fr 260px}
}
@media(max-width:960px){
  :root{--gutter:1.6rem}
  .split{flex-direction:column;min-height:auto}
  .half{min-height:74vh;flex:none}
  .split:hover .half:not(:hover){flex:none}
  .half:hover{flex:none}
  /* het DB-monogram blijft ook gestapeld op de naad tussen dag en nacht */
  .divider{display:block;flex:none;width:auto;height:0;overflow:visible}
  .divider .disc{left:50%;top:0;transform:translate(-50%,-50%);width:86px;height:86px}
  .divider .disc span{font-size:1.6rem}
  .band{grid-template-columns:1fr;min-height:auto}
  .band .visual{order:-1;padding:3.5rem 1.5rem}
  .band .content{padding:3rem 1.6rem 3.6rem}
  .bridge{background:linear-gradient(180deg,var(--day-bg) 0 50%,var(--night-bg) 50% 100%);padding:4rem 1.6rem}
  .bridge-inner{grid-template-columns:1fr;text-align:center}
  .bridge .day-side{text-align:center}
  .bridge .photo{max-width:300px;margin:0 auto}
  .photo figcaption{white-space:normal;max-width:88%}
  .news,.page-hero{padding-left:1.6rem;padding-right:1.6rem}
  .page-hero{padding-top:7rem}
  .about-hero{padding-top:7rem}
  .booklist{padding:1.5rem 1.6rem 4rem;gap:3rem}
  .contact-grid{grid-template-columns:1fr;padding:1rem 1.6rem 4rem;gap:2.5rem}
  .about-split{background:none}
  .about-hero{background:var(--day-bg)}
  .about-bridge{background:linear-gradient(180deg,var(--day-bg) 0 50%,var(--night-bg) 50% 100%);padding:0 1.6rem 4rem}
  .about-col .inner{max-width:none;margin:0}
  .about-col{padding:3rem 1.6rem}
  .about-col.day-col{background:var(--day-bg)}
  .about-col.night-col{background:var(--night-bg)}
  .about-bridge-inner{grid-template-columns:1fr;text-align:center}
  .about-bridge .day-side{text-align:center}
  .about-bridge .photo{max-width:300px;margin:0 auto}
  .about-cols{grid-template-columns:1fr}
  .about-quote{padding:3.5rem 1.6rem}
}
@media(max-width:820px){
  /* de gewrapte navigatie is ~105px hoog: hero's krijgen ruimte plus buffer */
  .page-hero,.about-hero{padding-top:8.75rem}
  .half{min-height:78vh;padding:3.5rem 1.6rem 3rem}
  .half .covers img{width:132px}
  .day .covers{top:130px}
  .night .covers{top:56px}
  .book,.book:nth-child(even){grid-template-columns:1fr}
  .book:nth-child(even) .bookcover{order:0}
  .bookcover{max-width:260px}
}

/* Formulier-feedback na aanmelding (redirect met ?signup=ok|error) */
.form-msg{margin-top:2.2rem;padding:1rem 1.4rem;border:1px solid var(--line-strong);border-radius:3px;background:#fff;color:var(--ink);font-size:.98rem;max-width:38rem;margin-left:auto;margin-right:auto}
.news--night .form-msg{background:var(--night-bg);border-color:var(--line-night);color:var(--night-deep)}