/* =========================================================
   RESPONSIVE — tablet & mobile
   ========================================================= */

/* Tablet */
@media (max-width: 900px) {
  .stage { padding: 48px 24px 96px; }
  .scene { min-height: auto; padding: 60px 24px; }
  .scene-inner,
  .scene.side-right .scene-inner { grid-template-columns: 1fr; gap: 40px; }
  .scene.side-right .scene-copy { order: 2; }
  .scene.side-right .scene-plate { order: 1; }
  .scene-copy { padding: 0; }
  .scene-aside { text-align: left; margin-left: 0; }
  .masthead { padding: 96px 20px 56px; }
  .foot-scene { padding: 64px 24px; }
  /* Stacked layout makes the plate caption redundant with the eyebrow above
     the title; drop the figure label, keep the section eyebrow. */
  .plate-caption { display: none; }
}

/* Hide the desktop-only token button label on narrow bars */
@media (max-width: 780px) {
  .sys-link-inline.tokenbtn { display: none; }
}

/* Phone */
@media (max-width: 600px) {
  .hud-top { padding: 16px 20px; gap: 12px; }
  .hud-top .brand b { font-size: 14px; }
  .hud-top .meta { gap: 12px; font-size: 9px; }

  .mh-seal { width: 104px; height: 104px; margin-bottom: 18px; }
  .mh-folio { margin-bottom: 22px; }
  .mh-lede { margin-top: 32px; }
  .mh-descend { margin-top: 36px; }

  .scene-facts { grid-template-columns: 1fr 1fr; gap: 18px 24px; }

  /* Gate modal becomes a near-full-width sheet */
  .gated-envelope { padding: 40px 22px 32px; width: 94vw; }
  .gated-envelope h4 { font-size: 26px; }
  .gated-envelope .wax { right: auto; left: 22px; }

  /* Expanded panel becomes a full-width sheet */
  .expanded-panel { width: 100vw; padding: 72px 22px 64px; }
  .expanded-panel h3 { font-size: 34px; }
  .expanded-panel .lede { font-size: 18px; }
  .expanded-panel .gate-card { flex-direction: column; gap: 14px; }

  .foot-colophon { font-size: 16px; }
}

/* Very small */
@media (max-width: 380px) {
  .scene-facts { grid-template-columns: 1fr; }
}