/* ============================================================
   EXPERIMENTS — thumbnail grid + preview popup
   ============================================================ */

.exp-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;
}
.exp-tile{
  background:var(--surface); border-radius:var(--r); box-shadow:var(--shadow-sm);
  overflow:hidden; cursor:pointer; border:none; text-align:left; padding:0;
  transition:box-shadow .25s, transform .25s var(--ease); font-family:var(--f-body);
  display:flex; flex-direction:column; color:var(--ink);
}
.exp-tile:hover{ box-shadow:var(--shadow-lg); transform:translateY(-4px); }
.exp-tile:hover .exp-tile-img{ transform:scale(1.045); }
.exp-tile-thumb{ aspect-ratio:4/3; overflow:hidden; background:var(--bg2); position:relative; }
.exp-tile-img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.exp-tile-zoom{
  position:absolute; bottom:.7rem; right:.7rem; width:32px; height:32px; border-radius:50%;
  background:rgba(20,20,26,.72); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:.85rem; backdrop-filter:blur(4px); opacity:0; transform:scale(.85);
  transition:opacity .2s, transform .2s var(--ease);
}
.exp-tile:hover .exp-tile-zoom{ opacity:1; transform:scale(1); }
.exp-tile-info{ padding:1.1rem 1.2rem; flex:1; }
.exp-tile-cat{ font-family:var(--f-mono); font-size:.68rem; color:var(--acc); text-transform:uppercase; letter-spacing:.05em; }
.exp-tile-info h3{ font-size:.95rem; font-weight:700; margin-top:.4rem; letter-spacing:-.01em; color:var(--ink); }
.exp-tile-info p{ font-size:.8rem; color:var(--muted); margin-top:.35rem; line-height:1.55; }

@media(max-width:820px){ .exp-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .exp-grid{ grid-template-columns:1fr; } }

/* ── Modal popup ── */
.exp-modal-overlay{
  position:fixed; inset:0; z-index:1000; background:rgba(10,10,12,.72);
  backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center;
  padding:2rem; opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
}
.exp-modal-overlay.open{ opacity:1; pointer-events:auto; }
.exp-modal{
  background:var(--surface); border-radius:20px; max-width:760px; width:100%;
  max-height:88vh; overflow-y:auto; box-shadow:0 30px 80px rgba(0,0,0,.35);
  transform:translateY(24px) scale(.97); transition:transform .32s var(--ease);
}
.exp-modal-overlay.open .exp-modal{ transform:translateY(0) scale(1); }
.exp-modal-img{ width:100%; aspect-ratio:16/10; overflow:hidden; background:var(--bg2); border-radius:20px 20px 0 0; }
.exp-modal-img img{ width:100%; height:100%; object-fit:cover; }
.exp-modal-body{ padding:1.8rem 2rem 2.1rem; }
.exp-modal-cat{ font-family:var(--f-mono); font-size:.72rem; color:var(--acc); text-transform:uppercase; letter-spacing:.06em; }
.exp-modal-body h3{ font-size:clamp(1.25rem,3vw,1.7rem); font-weight:900; letter-spacing:-.02em; margin-top:.5rem; }
.exp-modal-body p{ font-size:.94rem; color:var(--ink2); line-height:1.75; margin-top:.9rem; max-width:60ch; }
.exp-modal-actions{ display:flex; gap:.8rem; margin-top:1.5rem; align-items:center; flex-wrap:wrap; }
.exp-modal-close{
  position:absolute; top:1rem; right:1rem; width:38px; height:38px; border-radius:50%;
  background:rgba(20,20,26,.55); color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  backdrop-filter:blur(4px); transition:background .2s;
}
.exp-modal-close:hover{ background:var(--acc); }
.exp-modal-wrap{ position:relative; }

body.modal-open{ overflow:hidden; }

/* Custom SVG tile visuals — for entries with no photographic thumbnail */
.exp-visual-infographic, .exp-visual-illustration{
  display:flex; align-items:center; justify-content:center;
  background:var(--acc-s);
}
.exp-visual-svg{ width:62%; height:62%; }
.exp-modal-visual{ width:100%; height:100%; aspect-ratio:16/10; }
.exp-modal-visual .exp-visual-svg{ width:38%; height:38%; }

.filter-row{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:2rem; }
.filter-chip{
  font-family:var(--f-body); font-size:.82rem; font-weight:600; padding:.5em 1.15em;
  border-radius:100px; cursor:pointer; border:1px solid var(--line2); background:var(--surface); color:var(--muted);
  transition:background .2s, color .2s, border-color .2s;
}
.filter-chip:hover{ border-color:var(--acc); color:var(--ink); }
.filter-chip.active{ background:var(--ink); color:var(--bg); border-color:var(--ink); }