:root{ --ink:#f2eae4; --dim:#b4a49d; --bg:#140d12; --bg2:#1e1420; --accent:#c98ba0; --rule:#392633; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--bg); color:var(--ink); font:16px/1.65 ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased; } .wrap{max-width:700px; margin:0 auto; padding:0 24px} header{padding:84px 0 40px; text-align:center} .mark{margin:0 0 14px; color:var(--accent); font-size:22px; line-height:1} h1{ margin:0 0 12px; font-weight:500; letter-spacing:.28em; text-transform:uppercase; font-size:clamp(22px,5.5vw,34px); } .tag{color:var(--dim); font-style:italic; margin:0} .back{display:inline-block; margin:0 0 8px; color:var(--dim); font-size:13px; letter-spacing:.12em; text-transform:uppercase; text-decoration:none} .back:hover{color:var(--accent)} .rule{height:1px; background:var(--rule); margin:42px 0} h2{ font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--accent); margin:0 0 18px; font-weight:600; } p{margin:0 0 16px} a{color:var(--accent)} .gate{background:var(--bg2); border:1px solid var(--rule); border-radius:10px; padding:18px 20px} .gate strong{color:var(--accent)} .list{list-style:none; margin:0; padding:0} .list li{padding:0 0 14px} .card{display:flex; gap:16px; align-items:center; text-decoration:none; color:inherit; background:var(--bg2); border:1px solid var(--rule); border-radius:12px; padding:14px 16px} .card:hover{border-color:var(--accent)} .av{width:64px; height:64px; border-radius:50%; object-fit:cover; object-position:50% 22%; flex:none} ul.books{list-style:none; margin:0; padding:0} ul.books li{padding:16px 0; border-bottom:1px solid var(--rule)} ul.books li:last-child{border-bottom:0} .t{display:block; font-size:17px} .m{display:block; color:var(--dim); font-size:14px; margin-top:4px} .portrait{display:block; width:150px; height:150px; border-radius:50%; object-fit:cover; object-position:50% 20%; margin:0 auto 22px; border:1px solid var(--rule)} footer{padding:44px 0 72px; color:var(--dim); font-size:13px} footer a{color:var(--dim)} img{max-width:100%} /* ---- leeftijdsmuur ------------------------------------------------------- Staat in de HTML en wordt door JS weggehaald zodra de bezoeker bevestigt. Zonder JS blijft hij dus staan: strenger falen, niet losser. Het inline script in zet .age-ok voordat de pagina tekent, zodat een terugkerende bezoeker de muur niet even ziet opflitsen. */ .agewall{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:24px; background:var(--bg); } html.age-ok .agewall{display:none} .agecard{ max-width:440px; width:100%; text-align:center; background:var(--bg2); border:1px solid var(--rule); border-radius:14px; padding:36px 28px; } .agecard .mark{margin:0 0 16px} .agename{ margin:0 0 22px; font-weight:500; letter-spacing:.28em; text-transform:uppercase; font-size:18px; } .agelead{margin:0 0 10px; font-size:19px} .agesub{margin:0 0 26px; color:var(--dim); font-size:14px; line-height:1.6} .agebtns{display:flex; gap:10px; justify-content:center; flex-wrap:wrap} .agebtn{ appearance:none; cursor:pointer; font:inherit; font-size:15px; padding:12px 20px; border-radius:999px; border:1px solid var(--rule); background:transparent; color:var(--dim); text-decoration:none; } .agebtn:hover{border-color:var(--accent); color:var(--ink)} .agebtn.primary{background:var(--accent); border-color:var(--accent); color:#1a0f16; font-weight:600} .agebtn.primary:hover{color:#1a0f16; filter:brightness(1.08)} .agefine{margin:22px 0 0; color:var(--dim); font-size:12px; line-height:1.6}