/* Breaking news photo blended into the top of the homepage (hero, above Mission).
   Shared by index.html and the admin preview so the preview is the homepage at a smaller scale. */
.bn-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  /* Shape: the top-left corner is cut away by a gentle arc (part of a large ellipse centred on the
     bottom-right corner, flatter than a rounded corner) with a soft edge; the right side keeps square corners.
     A thin fade on the left and a short one at the bottom melt the photo into the black page. */
  -webkit-mask-image:
    radial-gradient(110% 115% at 100% 100%, #000 92%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 8%),
    linear-gradient(to bottom, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in, source-in;
  mask-image:
    radial-gradient(110% 115% at 100% 100%, #000 92%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 8%),
    linear-gradient(to bottom, #000 80%, transparent 100%);
  mask-composite: intersect;
}
.bn-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
/* Black filter so the photo sits in the dark theme and the white text stays readable */
.bn-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
}