/*
  Floral border — fixed 158px height, tiles horizontally at native scale.

  Main content keeps a minimum height; the page scrolls if the viewport
  is too short to fit florals + content.

  Hard-refresh after edits. No rebuild.
*/

:root {
  --floral-band-h: 158px;
  --page-main-min-h: 0;
}

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

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

.floral {
  flex-shrink: 0;
  width: 100%;
  height: var(--floral-band-h);
  pointer-events: none;
  z-index: 0;
  background-repeat: repeat-x;
  background-size: auto var(--floral-band-h);
}

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

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

.page-frame .help-link,
.page-frame-help {
  position: absolute;
  right: clamp(1rem, 4vw, 1.5rem);
  bottom: calc(var(--floral-band-h) + 0.625rem);
  z-index: 2;
  pointer-events: auto;
}