/* Slaghek Courant — ouderwetse familiekrant in kleur.
   De krant bestaat uit A4-vellen met twee familieberichten per vel. Eén (papieren) thema. */
:root{
  --paper:#ffffff;
  --paper-deep:#f3f1ec;
  --desk:#cdb68c;
  --ink:#2b1d12;
  --ink-soft:#5c4632;
  --red:#a8231c;
  --blue:#1d4a7a;
  --ochre:#c98d26;
  --green:#3f6b3a;
  --rule:#8a6d4c;
  --field:#ffffff;
  --font-mast:"UnifrakturMaguntia","Old English Text MT",Georgia,serif;
  --font-head:"Old Standard TT","Times New Roman",Georgia,serif;
  --font-body:"IM Fell English",Georgia,"Times New Roman",serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--desk);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.5}
img{max-width:100%}
[hidden]{display:none!important}
.desk{
  max-width:1000px;margin:0 auto;
  padding-block:18px 48px;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
}
.loading{text-align:center;font-style:italic;margin-top:40px}

/* ---------- Knoppen & balk ---------- */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px}
.editions{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-family:var(--font-head);font-size:13px}
.editions .lbl{letter-spacing:.1em;text-transform:uppercase;margin-right:4px}
.chip{font:inherit;border:1px solid var(--ink);background:var(--paper);color:var(--ink);padding:3px 9px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.actions{display:flex;flex-wrap:wrap;gap:10px}
.btn{
  font-family:var(--font-head);font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;
  background:var(--red);color:var(--paper);border:2px solid var(--ink);
  padding:9px 16px;cursor:pointer;box-shadow:3px 3px 0 var(--ink);
}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn.ghost{background:var(--paper);color:var(--ink)}
.btn[disabled]{opacity:.55;cursor:wait;transform:none}
button:focus-visible,input:focus-visible,textarea:focus-visible,label.drop:focus-within{outline:3px solid var(--ochre);outline-offset:2px}
.link{font:inherit;background:none;border:0;color:var(--ink-soft);text-decoration:underline;cursor:pointer;padding:2px 0}
.link.danger{color:var(--red);font-weight:700}
.notice{font-style:italic;font-size:15px;margin:0 0 10px;background:var(--paper);border-left:4px solid var(--ochre);padding:6px 10px}
.whoami{font-family:var(--font-head);font-size:13px;margin:0 0 10px;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}
.whoami b{color:var(--red)}
.whoami .link{color:var(--ink)}

/* ---------- Vellen ---------- */
.pages{display:grid;gap:28px}
.page{
  background:
    var(--paper);
  box-shadow:0 1px 0 rgba(90,60,30,.25),0 12px 30px rgba(60,40,20,.25);
  padding:clamp(16px,4vw,40px);
  display:flex;flex-direction:column;gap:18px;
  min-width:0;
}
.colorstrip{display:flex;height:5px;margin-top:3px}
.colorstrip span{flex:1}
.colorstrip span:nth-child(1){background:var(--red)}
.colorstrip span:nth-child(2){background:var(--ochre)}
.colorstrip span:nth-child(3){background:var(--blue)}
.colorstrip span:nth-child(4){background:var(--green)}

.mast{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.ear{
  justify-self:start;border:2px solid var(--blue);padding:6px 10px;
  font-family:var(--font-head);font-size:12px;line-height:1.3;text-align:center;color:var(--blue);
  max-width:150px;background:rgba(29,74,122,.06);
}
.ear b{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.title{
  font-family:var(--font-mast);font-weight:400;color:var(--red);
  font-size:clamp(44px,9vw,96px);line-height:1;margin:0;text-align:center;
  text-shadow:1px 1px 0 rgba(43,29,18,.25);text-wrap:balance;
}
/* Fraktur-k lijkt op een f/t; deze k uit een leesbaardere gotische letter. */
.title .k,.runhead .name .k,.ownbanner .who .k,.form h2 .k{font-family:"Pirata One","UnifrakturMaguntia",Georgia,serif;font-size:1.04em;letter-spacing:.01em}
.motto{text-align:center;font-style:italic;color:var(--ink-soft);font-size:15px;margin:6px 0 10px}
.bar{
  border-top:4px double var(--ink);border-bottom:1px solid var(--ink);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding:5px 2px;
  font-family:var(--font-head);font-size:13px;letter-spacing:.08em;text-transform:uppercase;
}
@media(max-width:620px){
  .mast{grid-template-columns:1fr}
  .mast .spacer{display:none}
  .ear{justify-self:center;max-width:none}
}
.runhead{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border-bottom:4px double var(--ink);padding-bottom:4px;
  font-family:var(--font-head);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
}
.runhead .name{font-family:var(--font-mast);font-size:28px;letter-spacing:0;text-transform:none;color:var(--red)}
.folio{margin-top:auto;text-align:center;font-family:var(--font-head);font-size:13px;color:var(--ink-soft);letter-spacing:.2em}

/* ---------- Eigen pagina van één familielid ---------- */
.ownbanner{
  display:grid;justify-items:center;gap:2px;text-align:center;
  border-top:3px solid var(--ochre);border-bottom:3px solid var(--ochre);
  background:rgba(201,141,38,.10);padding:8px 12px;
}
.ownbanner .pre{font-family:var(--font-head);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.ownbanner .who{font-family:var(--font-mast);font-size:clamp(30px,5vw,44px);line-height:1.05;color:var(--blue)}
.ownbanner .post{font-family:var(--font-head);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}

/* Meer dan twee berichten van één persoon: twee kolommen op één pagina */
.page.many{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px;row-gap:18px;align-items:start}
.page.many > header,.page.many > .ownbanner,.page.many > .folio,.page.many > .vacant{grid-column:1/-1}
.page.many .art{border-top:1px solid var(--rule);padding-top:14px}
.page.many .art-grid.one{grid-template-columns:1fr}
.page.many .kop{font-size:clamp(22px,3vw,28px)}
@media(max-width:640px){.page.many{display:flex}}

/* ---------- Berichten ---------- */
.art{display:flex;flex-direction:column;gap:8px;min-width:0}
.art.just-posted{outline:3px solid var(--ochre);outline-offset:8px;transition:outline-color 1s}
.art{scroll-margin-top:16px}
.art + .art{border-top:1px solid var(--rule);padding-top:18px}
.kop{font-family:var(--font-head);font-weight:700;line-height:1.12;margin:0;font-size:clamp(26px,4vw,36px);text-wrap:balance}
.byline{font-family:var(--font-head);font-size:12px;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin:0}
.byline .rel{color:var(--blue)}
.byline time{color:var(--ink-soft)}
.art-grid{display:grid;gap:20px;align-items:start}
.art-grid.one{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media(max-width:640px){.art-grid.one{grid-template-columns:1fr}}
.photos{display:grid;gap:10px;min-width:0}
.photos.two{grid-template-columns:1fr 1fr}
.photos figure{margin:0;background:var(--paper-deep);border:1px solid var(--ink);padding:5px;box-shadow:2px 2px 0 rgba(43,29,18,.25);display:grid;place-items:center}
.photos img{display:block;width:auto;height:auto;max-width:100%;max-height:400px}
.photos .missing{aspect-ratio:4/3;width:100%;display:grid;place-items:center;font-style:italic;color:var(--ink-soft);font-size:14px;text-align:center;padding:10px}
.body{min-width:0;max-width:68ch}
.body p{margin:0 0 .6em;text-align:left;overflow-wrap:break-word;line-height:1.55}
.body p:last-child{margin-bottom:0}
.dropcap{float:left;font-family:var(--font-head);font-weight:700;font-size:3.3em;line-height:.9;margin:4px 8px 0 0;color:var(--blue)}
.art-actions{display:flex;gap:8px;flex-wrap:wrap;font-family:var(--font-head);font-size:13px}
.vacant{
  font:inherit;width:100%;border:2px dashed var(--rule);background:transparent;padding:22px;text-align:center;
  font-style:italic;color:var(--ink-soft);display:grid;gap:6px;place-items:center;cursor:pointer;
  transition:border-color .15s,background-color .15s;
}
.vacant b{font-family:var(--font-head);font-style:normal;font-size:20px;color:var(--blue)}
.vacant span{font-family:var(--font-head);font-style:normal;font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  background:var(--red);color:var(--paper);border:2px solid var(--ink);padding:7px 14px;box-shadow:3px 3px 0 var(--ink)}
.vacant:hover{border-color:var(--red);background:rgba(168,35,28,.04)}
.vacant:hover span{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.empty{max-width:640px;margin:10px auto 0;display:grid;gap:8px;justify-items:center;text-align:center}
.empty .kop{color:var(--blue)}
.empty .body{text-align:left}
.empty .dropcap{color:var(--red)}

/* ---------- Voorpagina ---------- */
.landing-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
@media(max-width:760px){.landing-grid{grid-template-columns:1fr}}
.intro{display:flex;flex-direction:column;gap:8px}
.intro .kop{color:var(--blue)}
.authbox{border:3px double var(--ink);background:var(--paper)}
.tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--ink)}
.tabs button{
  font-family:var(--font-head);font-weight:700;font-size:15px;letter-spacing:.08em;text-transform:uppercase;
  background:transparent;border:0;padding:12px;cursor:pointer;color:var(--ink-soft);
}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper)}

/* ---------- Formulieren ---------- */
dialog{
  border:3px double var(--ink);background:var(--paper);color:var(--ink);
  width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;box-shadow:6px 6px 0 var(--ink);
}
dialog::backdrop{background:rgba(43,29,18,.55)}
.form{padding:20px;display:grid;gap:14px}
.form h2{font-family:var(--font-mast);font-weight:400;color:var(--red);font-size:36px;margin:0;line-height:1}
.form p.sub{margin:-8px 0 0;font-style:italic;color:var(--ink-soft);font-size:15px}
.field{display:grid;gap:4px;min-width:0}
.field label,.field .lbl{font-family:var(--font-head);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.field input[type=text],.field input[type=email],.field input[type=password],.field textarea{
  font-family:var(--font-body);font-size:17px;color:var(--ink);background:var(--field);
  border:1px solid var(--rule);padding:8px 10px;width:100%;
}
.field textarea{min-height:130px;resize:vertical}
.pair{display:grid;grid-template-columns:2fr 1fr;gap:10px}
@media(max-width:480px){.pair{grid-template-columns:1fr}}
.relations{display:flex;flex-wrap:wrap;gap:6px}
.relations button{font-family:var(--font-head);font-size:14px;border:1px solid var(--rule);background:var(--field);color:var(--ink);padding:4px 10px;cursor:pointer}
.relations button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:var(--paper)}
.drop{display:grid;place-items:center;gap:4px;border:2px dashed var(--rule);padding:16px;cursor:pointer;text-align:center;font-style:italic;color:var(--ink-soft);background:rgba(201,141,38,.07);position:relative}
.drop .small{font-size:13px}
.drop input{position:absolute;width:1px;height:1px;opacity:0}
.thumbs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.thumbs:empty{display:none}
.thumb{position:relative;border:1px solid var(--ink);padding:4px;background:var(--paper-deep)}
.thumb img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.thumb button{position:absolute;top:8px;right:8px;background:var(--ink);color:var(--paper);border:0;font-family:var(--font-head);font-size:12px;padding:3px 7px;cursor:pointer}
.formrow{display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap}
.formrow.spread{justify-content:space-between}
.err{color:var(--red);font-weight:700;font-size:15px;margin:0}
.ok{color:var(--green);font-weight:700;font-size:15px;margin:0}
.count{font-size:13px;color:var(--ink-soft);text-align:right}
.from{font-family:var(--font-head);font-size:14px;margin:-6px 0 0}
.from b{color:var(--red)}
.members{display:grid;gap:10px}
.member{border-top:1px solid var(--rule);padding-top:10px;display:grid;gap:2px}
.member .nm{font-family:var(--font-head);font-weight:700;font-size:19px}
.member .rl{font-family:var(--font-head);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.member .ad,.member .em{font-size:15px;overflow-wrap:anywhere}
.member .em{color:var(--ink-soft)}

/* ---------- Beheer ---------- */
.storagewarn{font-family:var(--font-head);font-size:15px;margin:0 0 12px;padding:10px 12px;border:2px solid var(--red);background:var(--paper);color:var(--red);display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;justify-content:space-between}
.storagewarn.high{background:var(--red);color:var(--paper)}
.storagewarn .link{color:inherit;font-weight:700}
.meter{height:14px;border:1px solid var(--ink);background:var(--field)}
.meter span{display:block;height:100%;width:0;background:var(--green)}
.meter span.warn{background:var(--ochre)}
.meter span.full{background:var(--red)}
.meterText{margin:2px 0 0;font-size:15px;font-variant-numeric:tabular-nums}
.edlist{display:grid;gap:4px;max-height:220px;overflow:auto;border:1px solid var(--rule);padding:8px;background:var(--field)}
.edlist label{display:flex;gap:8px;align-items:baseline;font-size:15px;cursor:pointer}
.edlist .sz{margin-left:auto;color:var(--ink-soft);font-variant-numeric:tabular-nums;font-size:13px}
.danger{border:2px solid var(--red);padding:12px;display:grid;gap:10px;background:rgba(168,35,28,.06)}
.danger p{margin:0;font-size:15px}
.danger input{font-family:var(--font-head);font-size:16px;padding:7px 10px;border:1px solid var(--rule);background:var(--field);color:var(--ink);flex:1;min-width:0}

/* ---------- Printen: elk vel precies één A4 ---------- */
@media print{
  @page{size:A4;margin:0}
  html,body{background:var(--paper);padding:0}
  .desk{padding:0;max-width:none}
  .toolbar,.notice,.whoami,.storagewarn,.art-actions,.vacant,.loading,dialog{display:none!important}
  .pages{display:block}
  .page{
    width:210mm;height:297mm;padding:14mm 14mm 10mm;box-shadow:none;
    break-after:page;page-break-after:always;overflow:hidden;
  }
  .page:last-child{break-after:auto;page-break-after:auto}
  .mast{grid-template-columns:1fr auto 1fr}
  .mast .spacer{display:block}
  .ear{justify-self:start;max-width:150px}
  .title{font-size:64pt}
  .kop{font-size:20pt}
  .body{font-size:14px}
  .byline{font-size:10px}
  .dropcap{font-size:3em}
  .page.many .kop{font-size:15pt}
  .page.many .art-grid.one{grid-template-columns:1fr}
  .page.many{display:grid;grid-template-rows:var(--rows);align-items:stretch}
  .art{flex:1 1 0;min-height:0;overflow:hidden}
  .art-grid.one{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .body{max-width:none}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* Dezelfde A4-maten op het scherm, vlak voor het printen: zo kan de site
   foto's en letters laten krimpen tot elk bericht op zijn halve pagina past. */
body.printing .desk{max-width:none}
body.printing .page{width:210mm;height:297mm;padding:14mm 14mm 10mm;overflow:hidden}
body.printing .mast{grid-template-columns:1fr auto 1fr}
body.printing .mast .spacer{display:block}
body.printing .ear{justify-self:start;max-width:150px}
body.printing .title{font-size:64pt}
body.printing .kop{font-size:20pt}
body.printing .body{font-size:14px}
body.printing .byline{font-size:10px}
body.printing .dropcap{font-size:3em}
body.printing .art{flex:1 1 0;min-height:0;overflow:hidden}
body.printing .art-grid.one{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
body.printing .body{max-width:none}
body.printing .art-actions,body.printing .vacant{display:none!important}
body.printing .ownbanner .who{font-size:30pt}
body.printing .page.many{display:grid;grid-template-rows:var(--rows);align-items:stretch}
body.printing .page.many .art-grid.one{grid-template-columns:1fr}
body.printing .page.many .kop{font-size:15pt}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}