/* Keep Safari's safe-area strips continuous with the BEAUX footer. */
html {
  background: #39352e;
}

body.beaux-material-index {
  background: #39352e;
}

#beaux-material-index .fixed-field {
  z-index: 0;
}

#beaux-material-index > .intro,
#beaux-material-index > .sequence,
#beaux-material-index > .material-footer {
  position: relative;
  z-index: 1;
}

#beaux-material-index > .masthead {
  position: fixed;
  inset: 0 0 auto;
  z-index: 4;
}

/* With viewport-fit=cover these strips occupy only the iPhone safe areas. */
#beaux-material-index::before,
#beaux-material-index::after {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 5;
  background: #39352e;
  content: '';
  pointer-events: none;
}

#beaux-material-index::before {
  top: 0;
  height: env(safe-area-max-inset-top, env(safe-area-inset-top, 0px));
}

#beaux-material-index::after {
  bottom: 0;
  height: env(safe-area-max-inset-bottom, env(safe-area-inset-bottom, 0px));
}