/* engine.css - written from scratch to replace Showit's runtime stylesheet.
   Layout primitives only; every visual value lives in site.css (Eli's design). */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{line-height:1;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
img{border:0}
a,a:link,a:visited,a:active,a:focus{color:inherit;text-decoration:none}
b,strong{font-weight:700}
em,i{font-style:italic}
nav,h1,h2,h3,h4,h5,h6,p{margin:0;font:inherit}
ol,ul{margin:0;padding:0;list-style:none}

/* page root.
   NOT overflow-x:hidden - per spec, setting one axis to `hidden` forces the
   other from `visible` to `auto`, which turned this element into a second
   scroll container: a nested scrollbar, and a wheel that had to exhaust the
   inner scroller before the page moved. `clip` clips without scrolling. */
.sp{position:relative;width:100%;min-width:320px;overflow-x:clip}
@supports not (overflow-x: clip){
  /* older Safari: clip the viewport instead, so .sp never becomes a scroller */
  .sp{overflow-x:visible}
  html,body{overflow-x:hidden}
}

/* block (a Showit "canvas") - full-bleed band, stacked vertically */
.sb{position:relative;width:100%}
.ss-s,.ss-bg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}
.ss-bg{background-repeat:no-repeat;background-size:cover;background-position:50% 50%}

/* the fixed-width design canvas, centred inside the band */
.sc{position:relative;height:100%;margin:0 auto;pointer-events:none}

/* element - absolutely positioned in design pixels */
.se{position:absolute;display:block;pointer-events:auto;outline:none;transform-origin:50% 50%}

/* element interiors */
.se-t{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;border:0;padding:0}
.se-img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;border-radius:inherit}
.se-icon,.se-line{width:100%;height:100%}
.se-icon svg,.se-line svg{width:100%;height:100%;vertical-align:top}
.se-simple{width:100%;height:100%;border:0 solid transparent}
.si-embed{width:100%;height:100%}
.si-embed iframe{border:0}
.se-rc a{text-decoration:underline}
.se-rc a:hover{opacity:.8}

/* locked blocks */
.sb[data-lock]{z-index:440}
.sb-overlay{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:500}
.sb-sticky{position:sticky;top:0}

/* entrance animations are opt-in: hide until observed */
.se[data-anim]{opacity:0}
.se[data-anim].sa-in{opacity:1}

/* block background media (Showit sets these on the block, not as elements) */
.sb-media{position:absolute;top:0;left:0;width:100%;height:100%;
  object-fit:cover;background-size:cover;background-position:50% 50%;
  background-repeat:no-repeat;pointer-events:none;z-index:0}
.sc{position:relative;z-index:1}