/*
  Floral border — single centered strip at native scale (no horizontal tiling).

  Assets are 1024×128. Tiling caused visible seams/overlaps on wide screens;
  upscaling caused blur. We show one strip, centered, cropped on narrow viewports.

  Hard-refresh after edits. No rebuild.
*/

:root {
  --floral-band-h: 128px;
  --floral-band-w: 1024px;
  --page-main-min-h: 0;
}

.page-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: #fff;
}

.page-frame-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  z-index: 1;
}

.floral {
  flex-shrink: 0;
  width: 100%;
  height: var(--floral-band-h);
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  background-repeat: no-repeat;
  /* Native height — width follows aspect ratio; never tile or upscale */
  background-size: auto var(--floral-band-h);
}

.floral-top {
  background-image: url("/img/floral-border.png?v=floral2");
  background-position: center top;
}

.floral-bottom {
  background-image: url("/img/floral-border-bottom.png?v=floral2");
  background-position: center bottom;
}

@media (max-width: 480px) {
  :root {
    --floral-band-h: 88px;
  }
}