:root{
  --parchment:#efe4c8;
  --parchment-dark:#e2d4ae;
  --parchment-card:#f4ecd6;
  --ink:#2a2117;
  --ink-soft:#5b4a34;
  --brass:#9c6b23;
  --brass-dark:#7a5219;
  --verdigris:#55705a;
  --rust:#7c3b2a;
  --rule:#b39a68;
}

*{box-sizing:border-box;}

html,body{
  margin:0;
  padding:0;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255,255,255,0.25), transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(0,0,0,0.08), transparent 55%),
    var(--parchment);
  color:var(--ink);
  font-family:'EB Garamond', serif;
  -webkit-font-smoothing:antialiased;
}

.page{
  max-width:760px;
  margin:0 auto;
  padding:48px 24px 80px;
}

/* ---------- Header ---------- */

.masthead{ text-align:center; margin-bottom:40px; }

.masthead .eyebrow{
  font-family:'EB Garamond', serif;
  font-variant:small-caps;
  letter-spacing:0.18em;
  font-size:0.85rem;
  color:var(--brass-dark);
}

.masthead h1{
  font-family:'Cormorant SC', serif;
  font-weight:700;
  font-size:2.6rem;
  line-height:1.1;
  margin:10px 0 6px;
  letter-spacing:0.02em;
}

.masthead .subtitle{
  font-style:italic;
  color:var(--ink-soft);
  font-size:1.05rem;
  margin:0;
}

.rule{
  border:none;
  height:0;
  margin:22px auto;
  max-width:420px;
  border-top:1px solid var(--rule);
  position:relative;
}
.rule::after{
  content:"❦";
  position:absolute;
  left:50%;
  top:-0.7em;
  transform:translateX(-50%);
  background:var(--parchment);
  padding:0 12px;
  color:var(--brass);
  font-size:0.9rem;
}

/* ---------- Thema-toggle ---------- */

.theme-toggle-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin:0 0 28px;
  flex-wrap:wrap;
}

.theme-toggle-option{
  font-style:italic;
  font-size:0.9rem;
  color:var(--ink-soft);
  transition:color 0.2s ease;
}

.theme-toggle{
  position:relative;
  display:inline-block;
  width:52px;
  height:28px;
  cursor:pointer;
}
.theme-toggle input{
  position:absolute;
  opacity:0;
  width:100%;
  height:100%;
  margin:0;
  cursor:pointer;
}
.theme-toggle .track{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.12);
  border:1px solid var(--rule);
  border-radius:999px;
  transition:background 0.2s ease;
}
.theme-toggle .thumb{
  position:absolute;
  top:2px;
  left:2px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--brass);
  transition:transform 0.2s ease;
}
.theme-toggle input:checked ~ .track .thumb{
  transform:translateX(24px);
  background:#D4AF37;
}
.theme-toggle input:focus-visible ~ .track{
  outline:2px solid var(--verdigris);
  outline-offset:2px;
}

/* ---------- Upload card ---------- */

.specimen-intake{
  background:var(--parchment-card);
  border:1px solid var(--rule);
  box-shadow:0 1px 0 rgba(255,255,255,0.4) inset, 0 8px 24px rgba(42,33,23,0.10);
  padding:28px;
  margin-bottom:36px;
}

.specimen-intake .label{
  font-variant:small-caps;
  letter-spacing:0.1em;
  color:var(--ink-soft);
  font-size:0.95rem;
  margin-bottom:14px;
  display:block;
}

.dropzone{
  border:2px dashed var(--brass);
  background:rgba(156,107,35,0.05);
  border-radius:2px;
  padding:28px;
  text-align:center;
  cursor:pointer;
  transition:background 0.15s ease, border-color 0.15s ease;
}
.dropzone:hover, .dropzone.drag{
  background:rgba(156,107,35,0.12);
  border-color:var(--brass-dark);
}
.dropzone:focus-visible{ outline:2px solid var(--verdigris); outline-offset:3px; }

.dropzone svg{ width:34px; height:34px; stroke:var(--brass-dark); margin-bottom:8px; }

.dropzone .dz-text{ color:var(--ink-soft); font-size:0.98rem; }
.dropzone .dz-text b{ color:var(--ink); }

#fileInput{ display:none; }

.preview-wrap{ display:none; margin-top:18px; text-align:center; }
.preview-wrap.show{ display:block; }

.preview-wrap img{
  max-width:100%;
  max-height:320px;
  border:1px solid var(--rule);
  filter:sepia(0.12) saturate(0.95);
  box-shadow:0 6px 18px rgba(42,33,23,0.18);
}

.code-row{
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.code-row label{
  font-variant:small-caps;
  letter-spacing:0.06em;
  color:var(--ink-soft);
  font-size:0.9rem;
}
.code-row input{
  font-family:'EB Garamond', serif;
  border:1px solid var(--rule);
  background:rgba(255,255,255,0.5);
  padding:6px 10px;
  font-size:0.95rem;
  color:var(--ink);
  width:160px;
}
.code-row input:focus-visible{ outline:2px solid var(--verdigris); outline-offset:1px; }

.peculiarity-row{
  margin-top:18px;
  max-width:320px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.peculiarity-row label{
  font-variant:small-caps;
  letter-spacing:0.06em;
  color:var(--ink-soft);
  font-size:0.9rem;
  display:block;
  margin-bottom:6px;
}
.peculiarity-row input[type=range]{
  width:100%;
  accent-color:var(--brass);
}
.peculiarity-scale{
  display:flex;
  justify-content:space-between;
  font-size:0.78rem;
  font-style:italic;
  color:var(--ink-soft);
  margin-top:2px;
}

.actions{
  margin-top:20px;
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}

button{ font-family:'EB Garamond', serif; cursor:pointer; }

.btn{
  background:var(--brass);
  color:var(--parchment);
  border:1px solid var(--brass-dark);
  padding:11px 22px;
  font-variant:small-caps;
  letter-spacing:0.08em;
  font-size:1rem;
  border-radius:1px;
  transition:transform 0.1s ease, background 0.15s ease;
}
.btn:hover:not(:disabled){ background:var(--brass-dark); }
.btn:active:not(:disabled){ transform:translateY(1px); }
.btn:disabled{ opacity:0.5; cursor:not-allowed; }
.btn:focus-visible{ outline:2px solid var(--verdigris); outline-offset:2px; }

.btn.ghost{ background:transparent; color:var(--ink-soft); border:1px solid var(--rule); }
.btn.ghost:hover:not(:disabled){ background:rgba(0,0,0,0.04); color:var(--ink); }

.status-line{
  text-align:center;
  font-style:italic;
  color:var(--ink-soft);
  min-height:1.4em;
  margin-top:14px;
  font-size:0.95rem;
}

/* ---------- Result card ---------- */

.entry-card{
  background:var(--parchment-card);
  border:1px solid var(--rule);
  box-shadow:0 10px 28px rgba(42,33,23,0.15);
  padding:32px 30px 26px;
  position:relative;
  margin-bottom:28px;
}
.entry-card.stamped{ animation:stampIn 0.35s ease forwards; }
@media (prefers-reduced-motion: reduce){
  .entry-card.stamped{ animation:none; }
}
@keyframes stampIn{
  0%{ opacity:0; transform:scale(1.08) rotate(-1.5deg); }
  60%{ opacity:1; transform:scale(0.99) rotate(0.4deg); }
  100%{ opacity:1; transform:scale(1) rotate(0deg); }
}

.entry-stamp{
  position:absolute;
  top:-14px;
  right:22px;
  background:var(--rust);
  color:var(--parchment-card);
  font-family:'Cormorant SC', serif;
  font-weight:700;
  letter-spacing:0.06em;
  font-size:0.82rem;
  padding:6px 14px;
  transform:rotate(2.5deg);
  box-shadow:0 3px 8px rgba(0,0,0,0.25);
  white-space:nowrap;
}

.entry-world{
  font-variant:small-caps;
  letter-spacing:0.06em;
  color:var(--verdigris);
  font-size:1rem;
  margin:6px 0 2px;
}

.entry-title{
  font-family:'Cormorant Garamond', serif;
  font-weight:700;
  font-style:italic;
  font-size:1.6rem;
  color:var(--ink);
  margin:0 0 16px;
  line-height:1.25;
}

.entry-text{
  font-size:1.15rem;
  line-height:1.65;
  color:var(--ink);
  text-align:justify;
  hyphens:auto;
}

.entry-thumb{
  float:left;
  width:110px;
  margin:2px 16px 8px 0;
  border:1px solid var(--rule);
  filter:sepia(0.15) saturate(0.9);
  cursor:zoom-in;
}

.footnotes{
  margin-top:22px;
  padding-top:14px;
  border-top:1px solid var(--rule);
  font-size:0.95rem;
  color:var(--ink-soft);
  font-style:italic;
  clear:both;
}
.footnotes .fn{ margin-bottom:6px; }
.footnotes .fn sup{ font-style:normal; color:var(--brass-dark); margin-right:4px; }

.entry-actions{
  margin-top:20px;
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.btn.small{ padding:7px 16px; font-size:0.88rem; }

/* ---------- Register ---------- */

.register{ margin-top:52px; }

.register h2{
  font-family:'Cormorant SC', serif;
  font-size:1.3rem;
  font-weight:700;
  color:var(--ink);
  text-align:center;
  margin-bottom:4px;
}
.register .register-sub{
  text-align:center;
  color:var(--ink-soft);
  font-style:italic;
  font-size:0.92rem;
  margin-bottom:22px;
}

.register-empty{
  text-align:center;
  color:var(--ink-soft);
  font-style:italic;
  font-size:0.95rem;
  padding:20px 0;
}

.register-item{
  border:1px solid var(--rule);
  background:rgba(255,255,255,0.25);
  padding:14px 16px;
  margin-bottom:10px;
  cursor:pointer;
}
.register-item:hover{ background:rgba(255,255,255,0.45); }

.register-item-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
}
.register-item-head .num{
  font-family:'Cormorant SC', serif;
  color:var(--rust);
  font-weight:700;
  font-size:0.9rem;
  white-space:nowrap;
}
.register-item-head .title{
  font-style:italic;
  color:var(--ink);
  font-size:1.02rem;
  flex:1;
}
.register-item .world{
  font-variant:small-caps;
  color:var(--verdigris);
  font-size:0.85rem;
  margin-top:2px;
}

.register-item-body{ display:none; margin-top:12px; }
.register-item.open .register-item-body{ display:block; }

footer.pagefoot{
  text-align:center;
  margin-top:60px;
  color:var(--ink-soft);
  font-style:italic;
  font-size:0.85rem;
}

/* ---------- Recensies ---------- */

/* .specimen-frame breekt bewust uit de smalle .page/.register-item kolom
   zodat de recensiekaartjes ernaast genoeg breedte krijgen. */
.specimen-frame{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  margin-bottom:28px;
}
.specimen-frame-inner{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  align-items:start;
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
  box-sizing:border-box;
}
@media (min-width:980px){
  .specimen-frame-inner{ grid-template-columns:240px minmax(0,1fr) 240px; gap:28px; }
}
.specimen-frame .entry-card{ margin-bottom:0; }

.recensie-slot{ display:flex; flex-direction:column; gap:14px; }

.recensie-card{
  background:rgba(255,255,255,0.35);
  border:1px solid var(--rule);
  padding:16px 18px;
  font-size:1.05rem;
}
.recensie-card .recensie-tekst{
  font-style:italic;
  color:var(--ink-soft);
  line-height:1.6;
  font-size:1.02rem;
}
.recensie-card .recensie-more{
  background:none;
  border:none;
  padding:6px 0 0;
  font-size:0.92rem;
  color:var(--verdigris);
  text-decoration:underline;
  cursor:pointer;
  font-style:italic;
}
.recensie-card .recensie-auteur{
  margin-top:10px;
  font-variant:small-caps;
  letter-spacing:0.04em;
  color:var(--rust);
  font-size:0.88rem;
}

.recensie-card .recensie-verwijder{
  display:block;
  margin-top:10px;
  background:none;
  border:none;
  padding:0;
  font-size:0.72rem;
  color:var(--ink-soft);
  opacity:0.55;
  text-decoration:underline;
  cursor:pointer;
}
.recensie-card .recensie-verwijder:hover{ opacity:1; color:var(--rust); }
.recensie-card .recensie-verwijder:disabled{ opacity:0.4; cursor:default; }

.recensie-form-section{ margin-top:52px; }
.recensie-form-section h2{
  font-family:'Cormorant SC', serif;
  font-size:1.3rem;
  font-weight:700;
  color:var(--ink);
  text-align:center;
  margin-bottom:4px;
}
.recensie-textarea-row{
  margin-top:18px;
  max-width:520px;
  margin-left:auto;
  margin-right:auto;
}
.recensie-textarea-row label{
  font-variant:small-caps;
  letter-spacing:0.1em;
  color:var(--ink-soft);
  font-size:0.95rem;
  display:block;
  margin-bottom:8px;
}
.recensie-textarea-row textarea{
  width:100%;
  font-family:'EB Garamond', serif;
  font-size:1rem;
  color:var(--ink);
  background:rgba(255,255,255,0.5);
  border:1px solid var(--rule);
  padding:10px 12px;
  resize:vertical;
  box-sizing:border-box;
}
.recensie-textarea-row textarea:focus-visible{ outline:2px solid var(--verdigris); outline-offset:1px; }

.recensie-status{
  text-align:center;
  font-style:italic;
  color:var(--ink-soft);
  min-height:1.4em;
  margin-top:14px;
  font-size:0.92rem;
}
.recensie-status code{
  display:inline-block;
  margin:6px 0;
  padding:4px 8px;
  background:rgba(0,0,0,0.06);
  font-size:0.82rem;
  word-break:break-all;
}

/* ---------- Lightbox ---------- */

.lightbox{
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(10,8,8,0.88);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
  cursor:zoom-out;
}
.lightbox[hidden]{ display:none; }
.lightbox img{
  max-width:90vw;
  max-height:90vh;
  box-shadow:0 10px 40px rgba(0,0,0,0.5);
  cursor:default;
}
.lightbox-close{
  position:absolute;
  top:18px;
  right:24px;
  background:none;
  border:none;
  color:#f4ecd6;
  font-size:2.4rem;
  line-height:1;
  cursor:pointer;
  padding:6px 10px;
}
.lightbox-close:hover{ color:var(--brass, #d4af37); }