/* Packaging artwork: generous, asymmetric opening illustrations and one
   centered closing signature. These backgrounds never intercept interaction. */

.page-intro{
  --intro-left:url('/assets/experiments/packaging-leaf-corner.svg');
  --intro-right:url('/assets/experiments/packaging-arches.svg');
  --intro-left-inset:-25px;
  --intro-right-inset:-22px;
  min-height:430px;
  padding:96px 6% 92px;
  background-image:var(--intro-left),var(--intro-right);
  background-repeat:no-repeat;
  background-position:left var(--intro-left-inset) bottom,right var(--intro-right-inset) bottom;
  background-size:clamp(270px,26vw,395px) auto,clamp(285px,28vw,430px) auto;
}

/* A family of forms rather than the same pair repeated on every page. */
body[data-page='/collections'] .page-intro,
body[data-page='/family-moments'] .page-intro{
  --intro-left:url('/assets/experiments/packaging-arches.svg');
  --intro-right:url('/assets/experiments/packaging-bloom.svg?v=6');
  --intro-right-inset:12px;
  background-size:clamp(270px,26vw,395px) auto,clamp(290px,28vw,420px) auto;
}
body[data-page='/our-story'] .page-intro,
body[data-page='/journal'] .page-intro,
body[data-page^='/journal/'] .page-intro{
  --intro-left:url('/assets/experiments/packaging-bloom.svg?v=6');
  --intro-right:url('/assets/experiments/packaging-petal-corner.svg');
  --intro-left-inset:12px;
  background-size:clamp(245px,23vw,355px) auto,clamp(285px,28vw,430px) auto;
}
body[data-page='/packaging'] .page-intro,
body[data-page='/faq'] .page-intro,
body[data-page='/privacy'] .page-intro{
  --intro-left:url('/assets/experiments/packaging-leaf-corner.svg');
  --intro-right:url('/assets/experiments/packaging-bloom.svg?v=6');
  --intro-right-inset:12px;
}

/* Give the short invitation its own calm space; no duplicate corner art
   immediately above the footer signature. */
.closing{background-image:none}
.closing:before{content:none}

footer{
  padding-bottom:180px;
  background-image:url('/assets/experiments/packaging-meadow.svg');
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:min(650px,76vw) auto;
}

/* Decorative forms stay outside the text column. Small text keeps its contrast. */
.page-intro h1,.page-intro p{position:relative}
.page-intro p:not(.eyebrow),footer .image-disclosure{color:#4c5d50}

@media(min-width:761px) and (max-width:1050px){
  .page-intro,
  body[data-page] .page-intro{
    padding:86px 9% 130px;
    --intro-left-inset:-80px;
    --intro-right-inset:-80px;
    background-size:290px auto,300px auto;
  }
}

@media(max-width:760px){
  .page-intro,
  body[data-page] .page-intro{
    min-height:0;
    padding:65px 7% 196px;
    --intro-left-inset:-40px;
    --intro-right-inset:-35px;
    background-size:205px auto,220px auto;
  }
  footer{
    padding-bottom:132px;
    background-size:min(470px,96vw) auto;
  }
}

@media(max-width:420px){
  .page-intro,
  body[data-page] .page-intro{
    padding-bottom:180px;
    --intro-left-inset:-45px;
    --intro-right-inset:-45px;
    background-size:190px auto,205px auto;
  }
  footer{padding-bottom:112px}
}

/* Keep the entire flower inside its banner at every breakpoint. Only the
   abstract edge shapes are cropped; petals and leaf tips need breathing room. */
body[data-page='/our-story'] .page-intro,
body[data-page='/journal'] .page-intro,
body[data-page^='/journal/'] .page-intro{--intro-left-inset:12px}
body[data-page='/collections'] .page-intro,
body[data-page='/family-moments'] .page-intro,
body[data-page='/packaging'] .page-intro,
body[data-page='/faq'] .page-intro,
body[data-page='/privacy'] .page-intro{--intro-right-inset:12px}

@media(forced-colors:active){
  footer,.page-intro{background-image:none}
}

@media print{
  footer,.page-intro{background-image:none;min-height:0}
  footer{padding-bottom:28px}
  .page-intro{padding-bottom:50px}
}