/* Recovery must stay readable without fonts, textures, masks or animation. */
.zine-stage[data-load-state="loading"],
.zine-stage[data-load-state="unavailable"] { display: grid; place-items: center; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) !important; padding: 24px; }
.zine-stage[data-load-state="loading"] > :not([data-load-notice]),
.zine-stage[data-load-state="unavailable"] > :not([data-load-notice]) { display: none !important; }
.zine-stage [data-load-notice] {
  display: grid; grid-area: 1 / 1 / -1 / -1; gap: 18px; width: min(100%, 540px); padding: clamp(22px, 4vw, 44px);
  color: #252126; background: #f2e5cf; border: 2px solid #252126;
  box-shadow: 5px 7px 0 #25212633; text-align: center;
  font: 20px/1.4 var(--print-face, system-ui, sans-serif);
}
[data-load-notice] p, [data-load-notice] h2 { margin: 0; }
[data-load-notice] h2 { font-size: clamp(30px, 5vw, 44px); line-height: 1.1; }
.load-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.load-actions form { margin: 0; }
.load-actions button {
  display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; min-height: 48px;
  color: #f2e5cf; background: #252126; border: 2px solid #252126; text-decoration: none;
  font: inherit; cursor: pointer;
}
.load-actions button:not([data-zine-reload]) { color: #252126; background: transparent; }
.load-actions button:focus-visible { outline: 3px solid #252126; outline-offset: 4px; }
.zine-stage [data-load-notice][hidden], .load-actions [hidden] { display: none !important; }
@media (forced-colors: active) {
  .zine-stage [data-load-notice] { background: Canvas; color: CanvasText; border-color: CanvasText; box-shadow: none; }
  .load-actions button, .load-actions button:not([data-zine-reload]) { background: ButtonFace; color: ButtonText; border-color: ButtonText; }
  .load-actions button:focus-visible { outline-color: Highlight; }
}
