/* Opt-in layout for an explicitly requested Mini App project case.
   The normal article shell remains the default for every other draft. */
body[data-article-format="miniapp-case"] .copy > section::after {
  content:"";
  display:table;
  clear:both;
}

body[data-article-format="miniapp-case"] .miniapp-case-screen {
  float:right;
  width:min(47%, 380px);
  margin:0 0 30px clamp(22px, 3vw, 38px);
  padding:10px;
  background:var(--paper-2);
  border:1px solid rgba(17,17,15,.14);
  box-shadow:12px 12px 0 rgba(17,17,15,.12);
}

body[data-article-format="miniapp-case"] .miniapp-case-screen img {
  display:block;
  width:100%;
  height:auto;
  border:1px solid rgba(17,17,15,.1);
  background:#e8e5df;
}

body[data-article-format="miniapp-case"] .miniapp-case-screen figcaption {
  display:grid;
  gap:6px;
  margin:0;
  padding:14px 4px 3px;
  color:var(--ink);
}

body[data-article-format="miniapp-case"] .miniapp-case-screen .visual-kicker {
  color:var(--violet);
}

@media (max-width:700px) {
  body[data-article-format="miniapp-case"] .miniapp-case-screen {
    float:none;
    width:min(100%, 340px);
    margin:0 auto 30px;
    box-shadow:9px 9px 0 rgba(17,17,15,.12);
  }
}