/* Homepage hero: the painting fills the hero at every window shape.
 *
 * The markup gives the hero image no size of its own, so it fell back to the
 * Tailwind preflight, `max-width: 100%; height: auto`, which caps it at its
 * intrinsic 1672 x 941. Under 1672px wide that reads correctly: the painting
 * spans the window and the fade at the foot of the section covers the strip it
 * leaves at the bottom, which is why the laptop view has always looked right.
 * Above 1672px it stopped dead. At 1920 it left 248px of bare background down
 * the right, at 2560 it left 888px, and the headline sat across the seam.
 *
 * Two layouts, because a 16:9 painting cannot be both full-bleed and
 * un-magnified in a window that is not itself wide. This is the same split
 * /content.json sets out under theme.heroMobile:
 *
 *   wide window   the painting covers the hero box. Anchored left so the pika,
 *                 which sits at the far left of the frame, survives the crop on
 *                 windows narrower than 16:9; anchored top so the sky behind
 *                 the headline survives it on windows wider than 16:9. What an
 *                 ultrawide window loses is the foreground at the bottom, which
 *                 the fade to #f6f6f6 already covers.
 *   everything    the painting is a band across the top at the full width of
 *   else          the window, whatever that width is, and the copy sits below
 *                 it on clean background.
 *
 * The switch is 3:2 rather than a width breakpoint or plain orientation,
 * because what decides it is the shape of the window and not the class of
 * device. Covering a box narrower than the painting crops the sides, which
 * walks the pika inward: it ends at 30% of the frame, and the centred headline
 * starts at about 36% of the window. Below 3:2 the two collide and the copy
 * sits on the animal. At 3:2 and wider they clear each other, so that is where
 * the band takes over. A 1280x1024 desktop window gets the band, as a tablet
 * held upright does.
 *
 * The source art is 1672px wide, so anything wider upscales it: 1.5x at 2560,
 * 2.1x at 3440. It is a soft illustration and it carries, but a wider master is
 * worth commissioning before this runs on a 4K display.
 *
 * Unlayered on purpose, as buttons.css and ledger.css are. Tailwind's preflight
 * sits in @layer base, and an unlayered declaration beats a layered one whatever
 * the specificity.
 */

.hero-bg-image {
  width: 100%;
  height: auto;
}

@media (min-aspect-ratio: 3/2) {
  .hero-bg-image {
    height: 100%;
    object-fit: cover;
    object-position: left top;
  }
}