.modal-overlay{
  position:fixed;inset:0;z-index:90;
  background:rgba(15,42,51,.5);
  backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  padding:20px;animation:fadein .25s ease;
}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.modal{
  background:var(--surface);
  border-radius:var(--r-xl);
  width:min(980px,100%);
  max-height:92vh;overflow:hidden;
  display:grid;grid-template-columns:.95fr 1.05fr;
  box-shadow:var(--shadow-3);
  animation:rise .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes rise{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:none}
}
@media(max-width:780px){
  .modal{grid-template-columns:1fr;max-height:96vh}
}
.modal-media{
  position:relative;background:var(--lagoon-3);
  min-height:280px;
}
.modal-media > .ph,.modal-media > img,.modal-media > svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.modal-media .chip{position:absolute;top:18px;left:18px;background:var(--surface)}
.modal-close{position:absolute;top:16px;right:16px;z-index:2;background:var(--surface)}
.modal-body{padding:32px;overflow-y:auto;display:flex;flex-direction:column;gap:20px}
.modal-body h2{font-size:30px;line-height:1.1}
.modal-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--ink-2)}
.modal-meta span{display:inline-flex;align-items:center;gap:6px}
.modal-section h4{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--lagoon-2);margin-bottom:12px;font-weight:600;
}
[data-theme="dark"] .modal-section h4{color:var(--lagoon)}
.modal-incl{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:13px}
.modal-incl li{list-style:none;display:flex;gap:8px;align-items:flex-start}
.modal-incl li svg{flex-shrink:0;color:var(--lagoon);margin-top:2px}
.modal-foot{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  border-top:1px solid var(--line);padding-top:18px;margin-top:auto;
}