/* =====================================================================
   24 · PROJECT MODAL
   ===================================================================== */
.modal{
  position:fixed;inset:0;z-index:9500;
  display:grid;place-items:center;
  padding:var(--gutter);
  visibility:hidden;opacity:0;
  transition:opacity .45s var(--ease), visibility .45s;
}
.modal.is-open{visibility:visible;opacity:1}
.modal__backdrop{
  position:absolute;inset:0;
  background:rgba(0,0,0,.72);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
[data-theme="light"] .modal__backdrop{background:rgba(19,17,16,.5)}
.modal__panel{
  position:relative;z-index:1;
  width:min(720px,100%);
  max-height:min(84vh,760px);
  overflow-y:auto;
  background:var(--surface);
  border:1px solid var(--line-2);
  border-radius:var(--radius-lg);
  padding:clamp(1.5rem,3.4vw,2.6rem);
  box-shadow:var(--shadow);
  transform:translateY(22px) scale(.97);
  transition:transform .6s var(--ease);
  overscroll-behavior:contain;
}
.modal.is-open .modal__panel{transform:none}
.modal__close{
  position:absolute;top:1rem;right:1rem;
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);
  display:grid;place-items:center;
  color:var(--text-2);font-size:.8rem;
  transition:.4s var(--ease);
  z-index:2;
}
.modal__close:hover{background:var(--text);color:var(--bg);border-color:var(--text);transform:rotate(90deg)}
.modal__media{
  aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;
  background:var(--surface-3);margin-bottom:1.6rem;border:1px solid var(--line);
}
.modal__media img{width:100%;height:100%;object-fit:cover}
.modal__cat{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:500}
.modal__title{font-size:clamp(1.4rem,3vw,2rem);font-weight:400;letter-spacing:-.032em;margin:.5rem 0 1rem;line-height:1.15}
.modal__body{color:var(--text-2);font-size:.94rem;line-height:1.78;display:grid;gap:1rem}
.modal__body h4{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);font-weight:500;margin-top:.4rem}
.modal__meta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1.2rem;
  padding:1.4rem 0;margin:1.4rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.modal__meta dt{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);font-weight:500}
.modal__meta dd{margin:.35rem 0 0;font-size:.9rem;color:var(--text)}
.modal__actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}