/* =========================================================================
   smsgedicht.nl — designsysteem (redesign 2026)
   Moderne refresh, behoud rood/roze merk. Token-gebaseerd, mobiel-first.
   Vrije layout: sticky header, één contentkolom, masonry-kaarten,
   chips + taal-toggle i.p.v. zijmenu's, moderne footer. Advertenties via
   Google Auto Ads (geen handmatige slots meer in de opmaak).
   ========================================================================= */

:root{
  --brand-900:#6E0730; --brand-700:#A80B43; --brand-600:#BE094C;
  --brand-500:#D6266A; --brand-200:#F6C6D8; --brand-100:#FCE7EF;
  --brand-50:#FFF5F8;  --brand:var(--brand-600); --brand-ink:var(--brand-700);

  --ink-900:#241A1F; --ink-700:#4A3F45; --ink-500:#867A80; --ink-300:#C9BFC5;
  --line:#ECE3E8; --paper:#FFFFFF; --paper-2:#FBF6F9; --paper-3:#F7EEF3;

  --focus:#2C6FA6; --star:#E9B949; --star-empty:#E4D8DE;

  --font-ui:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-lit:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --fs-300:.8125rem; --fs-400:1rem; --fs-500:1.125rem; --fs-600:1.375rem;
  --fs-700:1.75rem; --fs-800:2.25rem;

  --radius:14px; --radius-sm:8px;
  --shadow-sm:0 1px 2px rgba(36,26,31,.05);
  --shadow:0 1px 2px rgba(36,26,31,.05),0 10px 30px rgba(36,26,31,.07);
  --container:1080px; --reading:760px;
}

/* --- reset/basis --- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper-3);color:var(--ink-700);
  font:var(--fs-400)/1.65 var(--font-ui);letter-spacing:.005em}
img{max-width:100%;height:auto;border:0}
form{margin:0}
a{color:var(--brand-ink);text-decoration:none;transition:color .15s ease}
a:hover{color:var(--ink-900)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}
h1,h2,h3,h4{color:var(--ink-900);line-height:1.2}
ul{margin:0;padding:0}
.topelement{position:absolute;top:0}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}

/* =========================================================================
   STICKY HEADER
   ========================================================================= */
#siteheader{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
  border-bottom:1px solid var(--line)}
.header-inner{max-width:var(--container);margin:0 auto;display:flex;align-items:center;
  gap:1.1rem;padding:.6rem 1rem}
.brand{display:flex;align-items:baseline;gap:.4rem;line-height:1;margin-right:auto}
.brand h1{margin:0;font:inherit;line-height:1}
.brand__name{font:700 italic 1.45rem/1 var(--font-lit);color:var(--brand-600);
  letter-spacing:-.01em;white-space:nowrap}
.brand__name .tld{color:var(--ink-300);font-weight:400}

.header-nav{display:none;align-items:center;gap:.15rem}
.header-nav a{padding:.5rem .8rem;border-radius:999px;color:var(--ink-700);
  font:600 var(--fs-300) var(--font-ui)}
.header-nav a:hover{background:var(--brand-50);color:var(--brand-ink)}
.header-nav a.active{background:var(--brand-100);color:var(--brand-900)}

.header-actions{display:flex;align-items:center;gap:.45rem}
.btn-pill{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1rem;
  border-radius:999px;border:1px solid var(--line);background:var(--paper);
  color:var(--ink-700);font:600 var(--fs-300) var(--font-ui);cursor:pointer;white-space:nowrap}
.btn-pill:hover{border-color:var(--brand-200);color:var(--brand-ink);background:var(--brand-50)}
.btn-pill--primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-pill--primary:hover{background:var(--brand-700);border-color:var(--brand-700);color:#fff}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:50%;border:1px solid var(--line);background:var(--paper);cursor:pointer;color:var(--ink-700)}
.iconbtn:hover{border-color:var(--brand-200);background:var(--brand-50);color:var(--brand-ink)}
.iconbtn svg{width:17px;height:17px}

.nav-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:38px;height:38px;padding:0 9px;border-radius:50%;border:1px solid var(--line);
  background:var(--paper);cursor:pointer}
.nav-burger span{display:block;height:2px;background:var(--ink-900);border-radius:2px;
  transition:transform .2s ease,opacity .2s ease}
body.menu-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .nav-burger span:nth-child(2){opacity:0}
body.menu-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (min-width:900px){.header-nav{display:flex}.nav-burger{display:none}}
@media (max-width:560px){
  .header-inner{gap:.55rem;padding:.55rem .8rem}
  .header-actions{gap:.35rem}
  .header-actions .btn-pill:not(.btn-pill--primary){display:none}
  .btn-pill--primary{padding:.5rem .8rem}
  .brand__name{font-size:1.3rem}
}

/* login-dropdown (functioneel behouden: toggle('header','keuzeLogin')) */
#headerinlog{position:relative}
#keuzeOptions{position:absolute;right:0;top:calc(100% + .5rem);z-index:60}
#keuzeLogin{display:none;width:270px;padding:1rem;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--paper);box-shadow:var(--shadow)}
#keuzeLogin ul{list-style:none}
#keuzeLogin li{margin:0 0 .6rem}
#keuzeLogin label{display:block;margin-bottom:.2rem;font:600 var(--fs-300) var(--font-ui);color:var(--ink-500)}
#l_submit{margin-top:.4rem;width:auto;padding:.55rem 1.4rem;border:0;border-radius:999px;
  background:var(--brand);color:#fff;font:600 var(--fs-400) var(--font-ui);cursor:pointer}
#l_submit:hover{background:var(--brand-700)}

/* mobiel overlay-menu */
.mobile-menu{position:fixed;inset:0;z-index:40;display:none;background:var(--paper);
  padding:5.5rem 1.5rem 2rem;overflow:auto}
body.menu-open .mobile-menu{display:block}
body.menu-open{overflow:hidden}
.mobile-menu a:not(.btn-pill){display:block;padding:.9rem .25rem;border-bottom:1px solid var(--line);
  font:600 italic var(--fs-600) var(--font-lit);color:var(--ink-900)}
.mobile-menu a:not(.btn-pill):hover{color:var(--brand-ink)}
.mobile-menu a:not(.btn-pill).active{color:var(--brand-600)}
.mobile-menu .mm-actions{display:flex;flex-direction:column;gap:.6rem;margin-top:1.5rem}
.mobile-menu .mm-actions a{width:100%;justify-content:center;padding:.85rem 1rem}

/* =========================================================================
   PAGINA-LAYOUT — één kolom
   ========================================================================= */
#content{max-width:var(--container);margin:0 auto;padding:1.5rem 1rem 3rem}
#content.reading,.reading{max-width:var(--reading);margin:0 auto}

/* breadcrumbs — slanke tekstregel */
.breadcrumbs{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;
  margin:0 0 1.25rem;font:var(--fs-300) var(--font-ui);color:var(--ink-500)}
.breadcrumbs a{color:var(--brand-ink)}
.breadcrumbs .bchelp{margin-left:auto}

/* =========================================================================
   CONTENT-KAARTEN — .kader/.standaard/.hoofd
   ========================================================================= */
.kader{position:relative;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper);box-shadow:var(--shadow-sm)}
.standaard{margin:0 0 1.1rem;padding:1.15rem 1.25rem}
.hoofd{margin:0 0 1.25rem;overflow:hidden;border-color:var(--brand-100);
  background:linear-gradient(135deg,var(--brand-50),var(--paper) 60%)}
.hoofdcontent{padding:1.35rem 1.4rem}
h2.titel,h3.titel{margin:0 0 .35rem;font:400 italic var(--fs-800)/1.08 var(--font-lit);color:var(--ink-900)}
h3.titel{font-size:var(--fs-700)}
.hoofdcontent p{margin:.35rem 0 0;color:var(--ink-500)}
.hoofdcontent a{color:var(--brand-ink)}

/* masonry-raster voor gedichtenlijsten */
.poem-grid{columns:1;column-gap:1.1rem}
@media (min-width:680px){.poem-grid{columns:2}}
@media (min-width:1020px){.poem-grid{columns:3}}
.poem-grid > .kader{break-inside:avoid;margin:0 0 1.1rem;width:100%;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.poem-grid > .kader:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--brand-200)}

h3.poem-title{margin:0 0 .5rem;font:700 italic var(--fs-600)/1.15 var(--font-lit)}
h3.poem-title a{color:var(--brand-ink)}
h3.poem-title a:hover{color:var(--brand-900)}
.poem{margin:0 0 .9rem;font:var(--fs-500)/1.7 var(--font-lit);color:var(--ink-900)}
.quote{margin:0 0 .9rem;padding-left:1rem;border-left:3px solid var(--brand-200);
  font:italic var(--fs-500)/1.6 var(--font-lit);color:var(--ink-900)}

/* geneste info-strook onder een gedicht (.kader.info) */
.kader.info{border:0;border-top:1px solid var(--line);border-radius:0;background:none;
  box-shadow:none;margin-top:.4rem;padding-top:.7rem;overflow:hidden}
.info-span{display:block;color:var(--ink-500);font:var(--fs-300) var(--font-ui);margin:.15rem 0 .5rem}
.info-span a{color:var(--ink-500)}
.info-span a:hover{color:var(--brand-ink)}
.info-span strong{color:var(--ink-700)}
a.comments,a.views,.views{color:var(--ink-500)}
a.comments::before{content:"\1F4AC\FE0E  "}
a.views::before,.views::before{content:"\1F441\FE0E  "}
a.weblink{font-size:0}
a.weblink::before{content:"\1F517";font-size:.8125rem}

/* actie-panel onder gedicht (view/doorsturen/rapporteer) */
.panel-user,.panel-mod,.panel-admin{display:flex;gap:.5rem;float:right;margin:-.2rem 0 .3rem .6rem}
.panel-user a,.panel-mod a,.panel-admin a{width:30px;height:30px;border-radius:50%;
  border:1px solid var(--line);background:var(--paper) center/16px no-repeat;overflow:hidden;text-indent:-999px}
.panel-user a:hover,.panel-mod a:hover,.panel-admin a:hover{border-color:var(--brand-200);background-color:var(--brand-50)}
.panel-user a.view{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23867A80' stroke-width='2'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
.panel-user a.sendmail{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23867A80' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E")}
.panel-user a.inappropriate{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23867A80' stroke-width='2'%3E%3Cpath d='M4 22V4h13l-1.5 4L17 12H4'/%3E%3C/svg%3E")}

/* =========================================================================
   STER-RATING — SVG data-URI, 100px-baan (functionele inline width)
   ========================================================================= */
.star-rating{position:relative;display:block;width:100px;height:20px;margin:.25rem 0;padding:0;
  list-style:none;background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath fill='%23E4D8DE' d='M10 1.6l2.47 5 5.53.8-4 3.9.94 5.5L10 14.2 5.06 16.8l.94-5.5-4-3.9 5.53-.8z'/%3E%3C/svg%3E") repeat-x left center}
.star-rating li{margin:0;padding:0;float:left}
.star-rating .current-rating,.star-rating .current-voted{position:absolute;left:0;top:0;height:20px;
  overflow:hidden;white-space:nowrap;text-indent:-9999px;
  background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath fill='%23E9B949' d='M10 1.6l2.47 5 5.53.8-4 3.9.94 5.5L10 14.2 5.06 16.8l.94-5.5-4-3.9 5.53-.8z'/%3E%3C/svg%3E") repeat-x left center}
.star-rating li a{position:absolute;top:0;height:20px;display:block;text-indent:-9999px;z-index:5}
.star-rating a.one-star{left:0;width:20px}
.star-rating a.two-stars{left:20px;width:20px}
.star-rating a.three-stars{left:40px;width:20px}
.star-rating a.four-stars{left:60px;width:20px}
.star-rating a.five-stars{left:80px;width:20px}
.star-rating a.one-star:hover{left:0;width:20px;background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath fill='%23E9B949' d='M10 1.6l2.47 5 5.53.8-4 3.9.94 5.5L10 14.2 5.06 16.8l.94-5.5-4-3.9 5.53-.8z'/%3E%3C/svg%3E") repeat-x left center}
.star-rating a.two-stars:hover{left:0;width:40px}
.star-rating a.three-stars:hover{left:0;width:60px}
.star-rating a.four-stars:hover{left:0;width:80px}
.star-rating a.five-stars:hover{left:0;width:100px}
.votestxt{position:absolute;left:114px;top:1px;float:none;white-space:nowrap;
  color:var(--ink-500);font:var(--fs-300) var(--font-ui)}

/* =========================================================================
   GEDICHT-DETAIL — het gedicht op een podium
   ========================================================================= */
.poem-page{margin:0 0 1.25rem;overflow:hidden;border-radius:calc(var(--radius) + 6px);
  background:linear-gradient(160deg,var(--brand-50),var(--paper) 55%);border-color:var(--brand-100)}
.poem-page::before{content:"\201D";position:absolute;top:-3.2rem;right:.25rem;z-index:0;
  font:700 11rem/1 var(--font-lit);color:var(--brand-100);pointer-events:none}
.poem-page__inner{position:relative;z-index:1;padding:1.7rem 1.5rem 1.5rem}
.poem-page h2.titel{margin:0 0 1rem}
.poem-page .poem{font-size:var(--fs-600);line-height:1.8;margin-bottom:1.1rem}
.poem-page .kader.info{margin-top:1rem}
.poem-page .star-rating{transform:scale(1.3);transform-origin:left center;margin:.6rem 0 .3rem}
.poem-page .votestxt{left:118px}
@media (min-width:760px){.poem-page__inner{padding:2.4rem 2.6rem 2rem}}

/* =========================================================================
   FORMULIEREN — .inp/.txt/.sbm/.borte
   ========================================================================= */
.inp,.txt,textarea.txt,input[type=text],input[type=password],input[type=email],select,textarea{
  width:100%;max-width:100%;padding:.6rem .75rem;border:1px solid var(--ink-300);
  border-radius:var(--radius-sm);background:var(--paper);color:var(--ink-900);
  font:var(--fs-400) var(--font-ui)}
.inp:focus,.txt:focus,textarea:focus,select:focus,input:focus{border-color:var(--brand-500);
  outline:none;box-shadow:0 0 0 3px var(--brand-100)}
textarea.txt,textarea{min-height:7rem;line-height:1.6}
.borte{position:absolute;left:-9999px;width:1px;height:1px}
.sbm{display:inline-block;width:auto;padding:.6rem 1.15rem;border:1px solid var(--brand);
  border-radius:999px;background:var(--brand);color:#fff;font:600 var(--fs-400) var(--font-ui);cursor:pointer}
.sbm:hover{background:var(--brand-700);border-color:var(--brand-700)}
fieldset{border:1px solid var(--line);border-radius:var(--radius-sm);margin:0 0 1rem;padding:.9rem 1rem}
legend{padding:0 .4rem;color:var(--ink-500);font:600 var(--fs-300) var(--font-ui)}
label{color:var(--ink-700)}
.add-option,.newpart{margin:0 0 1rem}

/* profiel-tabel */
#mydataupdate,#mystatistics{width:100%;border-collapse:collapse}
#mydataupdate td,#mystatistics td{padding:.5rem .4rem;border-bottom:1px solid var(--line);vertical-align:top}
.datainfo{color:var(--ink-500);font:600 var(--fs-300) var(--font-ui);width:35%}

/* =========================================================================
   PAGINATIE — .navbar/.navi
   ========================================================================= */
.navbar{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;margin:1.25rem 0}
.navbar .add_message{margin-right:auto}
.add_message{padding:.55rem 1rem;border-radius:999px;background:var(--brand-50);
  border:1px solid var(--brand-100);color:var(--brand-ink);font:600 var(--fs-300) var(--font-ui)}
.add_message:hover{background:var(--brand-100)}
.navi{display:inline-block;padding:.4rem .75rem;border-radius:999px;background:var(--paper);
  border:1px solid var(--line);color:var(--brand-ink);font:600 var(--fs-300) var(--font-ui)}
.navi:hover{border-color:var(--brand-200);background:var(--brand-50)}
.navi_active{background:var(--brand);border-color:var(--brand);color:#fff}

/* =========================================================================
   CHIPS & TAAL-TOGGLE — categorie-navigatie
   ========================================================================= */
.cat-chips{display:flex;gap:.5rem;margin:.35rem 0 0;overflow-x:auto;padding-bottom:.35rem;scrollbar-width:none}
.cat-chips::-webkit-scrollbar{display:none}
@media (min-width:760px){.cat-chips{flex-wrap:wrap;overflow:visible;padding-bottom:0}}
.chip{display:inline-flex;align-items:center;gap:.4rem;flex:0 0 auto;padding:.45rem .85rem;
  border-radius:999px;background:var(--paper);border:1px solid var(--line);
  color:var(--brand-ink);font:600 var(--fs-300) var(--font-ui)}
.chip:hover{background:var(--brand-50);border-color:var(--brand-200);color:var(--brand-900)}
.chip.active{background:var(--brand-100);border-color:var(--brand-200);color:var(--brand-900)}
.chip span{color:var(--brand-500);font-weight:400;font-size:.72rem}
.seg{display:inline-flex;gap:.15rem;background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:.2rem}
.seg a{padding:.35rem .9rem;border-radius:999px;color:var(--ink-500);font:600 var(--fs-300) var(--font-ui)}
.seg a:hover{color:var(--brand-ink)}
.seg a.active{background:var(--paper);color:var(--brand-ink);box-shadow:var(--shadow-sm)}
.filters{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:1rem}
/* categorie-navigatie op listing-pagina's (overzicht + interne links) */
.cat-nav{margin:0 0 1.25rem}
.cat-nav .seg{margin-bottom:.7rem;flex-wrap:wrap}
.cat-more{margin:0}
.cat-more>summary{cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;width:auto;
  padding:.5rem .9rem;border-radius:999px;border:1px solid var(--line);background:var(--paper);
  font:600 var(--fs-300) var(--font-ui);color:var(--brand-ink);list-style:none}
.cat-more>summary::-webkit-details-marker{display:none}
.cat-more>summary::after{content:"\25BE";color:var(--ink-500)}
.cat-more[open]>summary{margin-bottom:.7rem}
.cat-more[open]>summary::after{content:"\25B4"}
.cat-more>summary:hover{border-color:var(--brand-200);background:var(--brand-50)}
.cat-chips--wrap{flex-wrap:wrap;overflow:visible}

/* =========================================================================
   ZOEKFORMULIER
   ========================================================================= */
.zoekform ul{list-style:none}
.zoek-grid{display:grid;gap:.9rem;grid-template-columns:1fr}
@media (min-width:760px){.zoek-grid{grid-template-columns:1fr 1fr 1fr}}
.zoek-grid p{margin:0}
.zoek-grid label{display:block;margin-bottom:.25rem;font:600 var(--fs-300) var(--font-ui);color:var(--ink-500)}
.zoek-opts{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;margin:.9rem 0 0}
.zoek-opts .opt-label{min-width:6.5rem;font:600 var(--fs-300) var(--font-ui);color:var(--ink-500)}
label.check{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .8rem;
  border:1px solid var(--line);border-radius:999px;background:var(--paper-2);
  font:var(--fs-300) var(--font-ui);color:var(--ink-700);cursor:pointer}
label.check:hover{border-color:var(--brand-200);background:var(--brand-50)}
label.check input{accent-color:var(--brand-600)}
.zoekform .sbm{margin-top:1.1rem}

/* =========================================================================
   SEO-haken (Fase 2) — hub-intro & gerelateerd
   ========================================================================= */
.hub-intro{background:linear-gradient(135deg,var(--brand-50),var(--paper) 70%);border-color:var(--brand-100)}
.hub-intro p{margin:0 0 .5rem;color:var(--ink-700)}
.hub-intro h2,.hub-intro h3{margin:1rem 0 .35rem;font:700 var(--fs-500) var(--font-ui);color:var(--ink-900)}
.popular-poems,.related-poems{list-style:none;margin:.25rem 0 0;columns:2;column-gap:1.5rem}
.popular-poems li,.related-poems li{margin:0 0 .3rem;break-inside:avoid}
.popular-poems a,.related-poems a{color:var(--brand-ink)}
.related{margin-top:.5rem}.related-more{margin:.6rem 0 0}
@media (max-width:640px){.popular-poems,.related-poems{columns:1}}

/* =========================================================================
   DEEL-KNOP + actionbar
   ========================================================================= */
.actionbar{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.btn-share{display:inline-flex;align-items:center;gap:.45rem;padding:.6rem 1.15rem;border:0;
  border-radius:999px;background:var(--brand);color:#fff;font:600 var(--fs-400) var(--font-ui);cursor:pointer}
.btn-share:hover{background:var(--brand-700);color:#fff}
.btn-share::before{content:"";width:17px;height:17px;
  background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cline x1='8.6' y1='13.5' x2='15.4' y2='17.5'/%3E%3Cline x1='15.4' y1='6.5' x2='8.6' y2='10.5'/%3E%3C/svg%3E") center/contain no-repeat}
.btn-share--plain::before{display:none}
a.btn-share{text-decoration:none}
.doorsturen{display:inline-flex;align-items:center;padding:.6rem 1.05rem;border-radius:999px;
  background:var(--paper);border:1px solid var(--line);color:var(--ink-700);font:600 var(--fs-400) var(--font-ui)}
.doorsturen:hover{border-color:var(--brand-200);color:var(--brand-ink);background:var(--brand-50)}
.share-toast{margin-left:.5rem;color:var(--brand-ink);font:var(--fs-300) var(--font-ui)}
.goback{display:inline-flex;align-items:center;gap:.3rem;color:var(--ink-500);font:var(--fs-300) var(--font-ui)}
.goback::before{content:"\2039";font-size:1.2em;line-height:1}
.morelink{display:inline-block;margin-top:.4rem;color:var(--brand-ink);font:600 var(--fs-300) var(--font-ui)}

/* =========================================================================
   REACTIES
   ========================================================================= */
.reactie{margin:0 0 .75rem;padding:.85rem 1rem;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--paper-2);box-shadow:none}
.reactieheader{margin:0 0 .25rem;font:600 var(--fs-300) var(--font-ui);color:var(--ink-500)}
.reactieheader a{color:var(--ink-700)}
.reactietext{margin:0;color:var(--ink-900)}

/* =========================================================================
   HOME-SECTIES
   ========================================================================= */
.sect{margin:2.25rem 0 0}
.sect-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:0 0 1rem}
.sect-head h2{margin:0;font:400 italic var(--fs-700)/1.1 var(--font-lit)}
.sect-head .more{font:600 var(--fs-300) var(--font-ui);white-space:nowrap}

.hero{position:relative;overflow:hidden;border:1px solid var(--brand-100);
  border-radius:calc(var(--radius) + 6px);box-shadow:var(--shadow-sm);padding:2.4rem 1.5rem;
  background:linear-gradient(150deg,var(--brand-50) 0%,var(--paper) 55%,var(--brand-100) 130%)}
.hero::before{content:"\201D";position:absolute;top:-4.5rem;right:.5rem;z-index:0;
  font:700 18rem/1 var(--font-lit);color:var(--brand-100);pointer-events:none}
.hero > *{position:relative;z-index:1}
.hero h1{margin:0 0 .6rem;max-width:18ch;font:400 italic clamp(2rem,5vw,3rem)/1.08 var(--font-lit);color:var(--ink-900)}
.hero p{margin:0;max-width:52ch;color:var(--ink-700)}
.hero .hero-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.hero .stats{margin-top:1.2rem;color:var(--ink-500);font:var(--fs-300) var(--font-ui)}
@media (min-width:760px){.hero{padding:3.4rem 2.6rem}}

.day-card{position:relative;overflow:hidden;display:block;border-radius:calc(var(--radius) + 6px);color:#fff;
  padding:1.9rem 1.6rem;box-shadow:var(--shadow);
  background:linear-gradient(140deg,var(--brand-700),var(--brand-600) 60%,var(--brand-500));
  transition:transform .15s ease,box-shadow .15s ease}
.day-card:hover{transform:translateY(-2px);color:#fff}
.day-card::before{content:"\201D";position:absolute;top:-3.4rem;right:.4rem;
  font:700 12rem/1 var(--font-lit);color:rgba(255,255,255,.14);pointer-events:none}
.day-card .label{display:inline-block;margin:0 0 .8rem;padding:.25rem .7rem;border-radius:999px;
  background:rgba(255,255,255,.16);color:#fff;font:600 var(--fs-300) var(--font-ui);letter-spacing:.04em;text-transform:uppercase}
.day-card .poem{color:#fff;font-size:var(--fs-600);line-height:1.6;margin:0 0 .8rem;max-width:34ch}
.day-card .by{color:var(--brand-200);font:var(--fs-300) var(--font-ui);margin:0}
@media (min-width:760px){.day-card{padding:2.4rem 2.4rem}}

.dichter-strip{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.dichter-card{display:flex;flex-direction:column;gap:.1rem;padding:.9rem 1rem;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--paper);box-shadow:var(--shadow-sm)}
.dichter-card:hover{border-color:var(--brand-200)}
.dichter-card .rank{color:var(--brand-500);font:700 var(--fs-300) var(--font-ui)}
.dichter-card .naam{font:700 italic var(--fs-500) var(--font-lit);color:var(--ink-900);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dichter-card .score{color:var(--ink-500);font:var(--fs-300) var(--font-ui)}

/* =========================================================================
   POPUP-VENSTERS (reacties/mail/report) — losse mini-pagina's
   ========================================================================= */
.closeme{float:right;color:var(--ink-500);font:600 var(--fs-300) var(--font-ui)}

/* =========================================================================
   FAQ-ACCORDEON (help)
   ========================================================================= */
.faq-list{margin-top:1rem}
.faq-question{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.85rem 1.1rem;margin:.5rem 0 0;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--paper-2);font:600 var(--fs-400) var(--font-ui);color:var(--ink-900);cursor:pointer}
.faq-question:hover{border-color:var(--brand-200);background:var(--brand-50)}
.faq-question::after{content:"+";color:var(--brand-500);font-size:1.3rem;line-height:1}
.faq-answer{display:none;padding:.85rem 1.1rem;margin:0;border:1px solid var(--line);border-top:0;
  border-radius:0 0 var(--radius-sm) var(--radius-sm);background:var(--paper);color:var(--ink-700);box-shadow:none}
.faq-answer a{color:var(--brand-ink)}

/* =========================================================================
   TOPDICHTERS-LIJST (podium-kaarten)
   ========================================================================= */
.topdichters-lijst{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));margin:.5rem 0 1.5rem}
.td-row{display:flex;align-items:center;gap:.85rem;padding:.7rem .9rem;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--paper);box-shadow:var(--shadow-sm)}
.td-row:hover{border-color:var(--brand-200)}
.td-rank{flex:0 0 2rem;height:2rem;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--brand-50);color:var(--brand-700);font:700 var(--fs-300) var(--font-ui)}
.td-row:nth-child(1) .td-rank{background:var(--brand-600);color:#fff}
.td-row:nth-child(2) .td-rank{background:var(--brand-200);color:var(--brand-900)}
.td-row:nth-child(3) .td-rank{background:var(--brand-100);color:var(--brand-900)}
.td-body{min-width:0;flex:1}
.td-naam{display:block;font:700 italic var(--fs-500) var(--font-lit);color:var(--ink-900);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-naam a{color:var(--ink-900)}.td-naam a:hover{color:var(--brand-ink)}
.td-meta{color:var(--ink-500);font:var(--fs-300) var(--font-ui)}
.td-meta .ster{color:var(--star)}

/* =========================================================================
   FOOTER
   ========================================================================= */
#footer{background:var(--ink-900);color:#B9ACB3;margin-top:3.5rem}
.footer-inner{max-width:var(--container);margin:0 auto;display:grid;gap:2rem;
  grid-template-columns:1fr;padding:2.6rem 1rem 2.2rem}
@media (min-width:760px){.footer-inner{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.footer-brand .brand__name{color:#fff;font-size:1.5rem}
.footer-brand .brand__name .tld{color:var(--brand-200)}
.footer-brand p{margin:.6rem 0 0;font:var(--fs-300)/1.6 var(--font-ui);color:#B9ACB3;max-width:32ch}
#footer h4{margin:0 0 .6rem;color:#fff;font:600 var(--fs-300) var(--font-ui);letter-spacing:.06em;text-transform:uppercase}
#footer ul{list-style:none}#footer li{margin:0 0 .35rem}
#footer a{color:#B9ACB3;font:var(--fs-300) var(--font-ui)}
#footer a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.09);padding:1rem;text-align:center;
  font:var(--fs-300) var(--font-ui);color:#8A7D84}

/* naar-boven */
#toparrow{position:fixed;right:1rem;bottom:1rem;width:44px;height:44px;border-radius:50%;
  background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow);font-size:0;z-index:30}
#toparrow::before{content:"\2191";font-size:1.2rem}
.toplink{display:inline-block;margin-top:.5rem;color:var(--ink-500);font:var(--fs-300) var(--font-ui)}

/* =========================================================================
   UTILITIES
   ========================================================================= */
.center{text-align:center}
.cleardiv{clear:both}
.red{color:var(--brand-600)}
.blue{color:var(--focus)}
.grey,.light{color:var(--ink-500)}
.va-bottom{vertical-align:bottom}
.sim_underline{text-decoration:underline}
.sim_std_link{color:var(--brand-ink);cursor:pointer;text-decoration:underline}
.ext::after{content:" \2197";color:var(--ink-300);font-size:.85em}