/* Studio66 Infographics — core */
.s66a-inf-root{
  max-width: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;

  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}
.s66a-inf-wrap{ width:100%; }

/* Reveal engine */
html.s66a-js .s66a-reveal{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
html.s66a-js .s66a-reveal.is-visible{
  opacity: 1;
  transform: none;
}

/* Failsafe */
.s66a-inf-error{
  padding: 12px 14px;
  border-left: 4px solid #EC0000;
  background: #fff6f6;
}
.s66a-inf-empty{
  padding: 16px;
  border: 1px dashed #c3c4c7;
  border-radius: 12px;
}

/* Baseline: make layouts behave */
.s66a-inf-root, .s66a-inf-root *{ box-sizing: border-box; }
.s66a-inf-root img{ max-width: 100%; height: auto; }

.s66a-inf-scope{ width:100%; display:block; }

/* Full-bleed (break out of theme containers) */
.s66a-inf-root.s66a-fullbleed{ width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

/* Centering stage */
.s66a-inf-stage{width:100%; display:flex; justify-content:center;}
.s66a-inf-stage > .s66a-inf-scope{width:100%; max-width:1400px;}
