/* ===== TACITURI — Ontdek ===== */
.ontdek-head{ padding:clamp(120px,15vw,180px) 0 clamp(40px,5vw,60px); background:var(--paper-2); }
.ontdek-title{ font-size:clamp(44px,8vw,96px); color:var(--text); line-height:.96; margin-bottom:1.2rem; }
.ontdek-intro{ font-size:clamp(21px,1.9vw,24px); color:var(--text-2); max-width:56ch; margin:0; }

.disc{ padding-block:clamp(56px,8vw,110px); }
.disc + .disc{ border-top:1px solid var(--line-soft); }
.disc-head{ margin-bottom:clamp(32px,4vw,56px); max-width:760px; }
.disc-head h2{ font-size:clamp(28px,4vw,52px); color:var(--text); line-height:1.06; margin-bottom:1rem; }
.disc-head p{ color:var(--text-2); margin:0; max-width:54ch; }

/* characters */
.chars{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,28px); }
.char{ display:flex; flex-direction:column; }
.char-img{ position:relative; overflow:hidden; border:1px solid var(--line-soft); background:var(--paper-card); padding:0; cursor:zoom-in; display:block; }
.char-img img{ width:100%; aspect-ratio:4/5; object-fit:cover; filter:grayscale(.15) contrast(1.02); transition:transform 1s var(--ease), filter .6s; }
.char-img:hover img{ transform:scale(1.04); filter:grayscale(0) contrast(1.04); }
.char-role{ font-family:var(--sans); text-transform:uppercase; letter-spacing:.2em; font-size:13.5px; color:var(--bronze-2); margin:20px 0 7px; }
.char-name{ font-family:var(--serif); font-size:clamp(22px,1.9vw,27px); color:var(--text); line-height:1.08; margin-bottom:12px; }
.char-bio{ font-size:18px; line-height:1.55; color:var(--text-2); margin:0 0 16px; }
.char-q{ font-family:var(--serif); font-style:italic; font-size:19px; color:var(--muted); line-height:1.4; margin:auto 0 0; padding-top:14px; border-top:1px solid var(--line-soft); }

/* lexicon */
.lex{ display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(14px,1.6vw,22px); }
.lex-card{ display:flex; flex-direction:column; cursor:zoom-in; background:none; border:0; padding:0; text-align:left; }
.lex-poster{ overflow:hidden; border:1px solid var(--line-soft); background:var(--paper-card); }
.lex-poster img{ width:100%; aspect-ratio:2/3; object-fit:cover; transition:transform 1s var(--ease); }
.lex-card:hover .lex-poster img{ transform:scale(1.04); }
.lex-num{ font-family:var(--mono); font-size:14px; color:var(--bronze-2); margin:16px 0 6px; letter-spacing:.06em; }
.lex-title{ font-family:var(--serif); font-size:clamp(19px,1.4vw,22px); color:var(--text); line-height:1.14; margin-bottom:6px; }
.lex-sub{ font-size:16px; color:var(--muted); line-height:1.45; margin:0; }
.lex-foot{ margin-top:clamp(30px,4vw,48px); display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.lex-foot .mono{ color:var(--muted); }

/* gallery */
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.4vw,18px); }
.gallery.scenes-grid{ grid-template-columns:repeat(4,1fr); }
.shot{ position:relative; overflow:hidden; border:1px solid var(--line-soft); cursor:zoom-in; background:var(--paper-card); padding:0; display:block; }
.shot img{ width:100%; object-fit:cover; transition:transform 1s var(--ease), filter .6s; filter:saturate(.94); }
.shot.scene img{ aspect-ratio:16/10; }
.shot.board img{ aspect-ratio:2/3; }
.shot:hover img{ transform:scale(1.045); filter:saturate(1); }
.shot-cap{ position:absolute; left:0; right:0; bottom:0; padding:24px 14px 12px; font-family:var(--mono); font-size:13.5px; letter-spacing:.06em; color:#f1ece1;
  background:linear-gradient(180deg, transparent, rgba(18,18,20,.82)); opacity:0; transition:opacity .4s; }
.shot:hover .shot-cap{ opacity:1; }

.boards{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(12px,1.4vw,18px); }

/* closing */
.ontdek-cta{ background:var(--ink); color:var(--d-text); padding-block:clamp(64px,8vw,110px); text-align:center; }
.ontdek-cta .eyebrow{ color:var(--d-muted); justify-content:center; display:flex; }
.ontdek-cta .eyebrow::before{ background:var(--bronze-lite); }
.ontdek-cta h2{ font-size:clamp(28px,4vw,48px); color:var(--d-text); margin-bottom:1.4rem; line-height:1.08; }
.ontdek-cta .ocb{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

@media (max-width:1040px){
  .chars{ grid-template-columns:repeat(2,1fr); }
  .lex{ grid-template-columns:repeat(3,1fr); }
  .gallery,.gallery.scenes-grid{ grid-template-columns:repeat(2,1fr); }
  .boards{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:560px){
  .chars{ grid-template-columns:1fr; }
  .lex{ grid-template-columns:repeat(2,1fr); }
  .boards{ grid-template-columns:repeat(2,1fr); }
}