/* One shared brand background for every V4 subpage, including saved layouts
   and editor previews. Home scenes retain their independently composed backgrounds. */
.v4-body :is(.v4-brand-backdrop,.v4-inner-page) {
  --v4-brand-pattern:url('/static/v4/flower-pattern.png');
  --v4-brand-banner-height:390px;
  --v4-brand-pattern-size:600px;
  --v4-pattern-clearance:clamp(85px,14vw,180px);
  position:relative; isolation:isolate; overflow:clip;
  background-color:#fffaf6;
  background-image:radial-gradient(ellipse 70% 520px at 100% 0,#ffe8bb99,transparent),
    radial-gradient(ellipse 65% 650px at 0 600px,#fce6df99,transparent),
    radial-gradient(ellipse 50% 850px at 100% 1600px,#ffeac899,transparent),
    linear-gradient(180deg,#fff9ef 0,#fff8f5 650px,#fffdf9 100%);

}
/* Continuous small-flower texture, faded around the two larger accents. */
.v4-body :is(.v4-brand-backdrop,.v4-inner-page)::before {
  content:""; position:absolute; inset:0; filter:grayscale(1) brightness(.84);
  z-index:-1; pointer-events:none;
  background-image:var(--v4-brand-pattern);
  background-size:var(--v4-brand-pattern-size) var(--v4-brand-pattern-size);
  mask-image:
    radial-gradient(circle at 0 calc(var(--v4-brand-banner-height) - 80px),transparent var(--v4-pattern-clearance),#000 calc(var(--v4-pattern-clearance) + 100px)),
    radial-gradient(circle at 100% 0,transparent var(--v4-pattern-clearance),#000 calc(var(--v4-pattern-clearance) + 100px));
  mask-composite:intersect;
}
.v4-body :is(.v4-brand-backdrop,.v4-inner-page) .v4-brand-banner {
  display:grid; place-items:center; isolation:isolate; overflow:visible;
  height:var(--v4-brand-banner-height); padding:56px 8% 84px;
  background:transparent; border-bottom:0;
}
.v4-body :is(.v4-brand-backdrop,.v4-inner-page) .v4-brand-banner::before,
.v4-body :is(.v4-brand-backdrop,.v4-inner-page) .v4-brand-banner::after {
  content:""; position:absolute; z-index:-1; pointer-events:none;
  width:clamp(160px,20vw,280px); aspect-ratio:1; opacity:1;
  background-position:center; background-size:contain; background-repeat:no-repeat;
}
.v4-body :is(.v4-brand-backdrop,.v4-inner-page) .v4-brand-banner::before {
  left:-80px; top:calc(var(--v4-brand-banner-height) - clamp(160px,20vw,280px) + 30px); transform:rotate(-14deg);
  background-image:url('/static/v4/mission-flower-red.png');
}
.v4-body :is(.v4-brand-backdrop,.v4-inner-page) .v4-brand-banner::after {
  right:-60px; top:-100px; transform:rotate(18deg);
  background-image:url('/static/v4/mission-flower-yellow.png');
}
.v4-body :is(.v4-brand-backdrop,.v4-inner-page) .v4-brand-banner>:is(.v4-banner-red,.v4-banner-yellow) { display:none; }
.v4-body :is(.v4-brand-backdrop,.v4-inner-page) .v4-brand-banner h1 { width:100%; margin:0; }
.v4-body :is(.v4-brand-backdrop,.v4-inner-page) .v4-about-title-artwork { width:min(100%,827px); }
.v4-body :is(.v4-brand-backdrop,.v4-inner-page) :is(.v4-panel,.v4-module-appearance--sections,.v4-tabs) {
  border:1px solid #efdfd8; box-shadow:0 8px 28px #8d453008;
}
.v4-body :is(.v4-brand-backdrop,.v4-inner-page) .v4-about-intro-brand {
  background:linear-gradient(105deg,#fff5eb80,#fff 55%,#fff1ed80);
  border-bottom:1px solid #f5ebe5; margin-bottom:24px;
}
@media(max-width:1199px),(pointer:coarse) {
  .v4-body :is(.v4-brand-backdrop,.v4-inner-page) { --v4-brand-banner-height:300px; --v4-brand-pattern-size:480px; }
  .v4-body :is(.v4-brand-backdrop,.v4-inner-page) .v4-brand-banner { padding:44px 6% 72px; }
}
@media(max-width:600px) {
  .v4-body :is(.v4-brand-backdrop,.v4-inner-page) { --v4-brand-banner-height:230px; }
  .v4-body :is(.v4-brand-backdrop,.v4-inner-page) .v4-brand-banner { padding:32px 6% 60px; }
  .v4-body :is(.v4-brand-backdrop,.v4-inner-page) .v4-brand-banner::before { width:116px; left:-38px; top:calc(var(--v4-brand-banner-height) - 96px); }
  .v4-body :is(.v4-brand-backdrop,.v4-inner-page) .v4-brand-banner::after { width:88px; right:-26px; top:-26px; }
  .v4-body :is(.v4-brand-backdrop,.v4-inner-page) .v4-about-intro-brand { margin-bottom:20px; }
}

/* Article and photo-banner pages have no large corner flowers to clear. */
.v4-body :is(.v4-brand-backdrop,.v4-inner-page):not(:has(.v4-brand-banner))::before { mask-image:none; }

/* Versioned background layers shared by the public pages and editor previews. */
.v4-inner-page:has(>.v4-background)::before,
.v4-body .v4-inner-page:has(>.v4-background) .v4-brand-banner::before,
.v4-body .v4-inner-page:has(>.v4-background) .v4-brand-banner::after {display:none;}
.v4-background {position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.v4-background--warm {background-image:radial-gradient(ellipse 70% 520px at 100% 0,#ffe8bb99,transparent),radial-gradient(ellipse 65% 650px at 0 600px,#fce6df99,transparent),radial-gradient(ellipse 50% 850px at 100% 1600px,#ffeac899,transparent);}
.v4-background-layer {position:absolute;opacity:var(--bg-opacity);pointer-events:none;}
.v4-background-layer--texture {inset:0;background-repeat:repeat;background-size:var(--bg-size) var(--bg-size);background-position:var(--bg-x) var(--bg-y);}
.v4-background-layer--decoration {width:var(--bg-size);height:var(--bg-size);background-size:contain;background-position:center;background-repeat:no-repeat;transform:rotate(var(--bg-rotation));}
.v4-background-layer--decoration:is(.v4-background-layer--top-left,.v4-background-layer--banner-left,.v4-background-layer--bottom-left) {left:var(--bg-x);}
.v4-background-layer--decoration:is(.v4-background-layer--top-right,.v4-background-layer--banner-right,.v4-background-layer--bottom-right) {right:var(--bg-x);}
.v4-background-layer--decoration:is(.v4-background-layer--top-left,.v4-background-layer--top-right) {top:var(--bg-y);}
.v4-background-layer--decoration:is(.v4-background-layer--banner-left,.v4-background-layer--banner-right) {top:calc(var(--v4-brand-banner-height,390px) - var(--bg-size) + var(--bg-y));}
.v4-background-layer--decoration:is(.v4-background-layer--bottom-left,.v4-background-layer--bottom-right) {bottom:var(--bg-y);}
.v4-inner-page:not(:has(.v4-brand-banner)) .v4-background-layer--banner {display:none;}
@media(max-width:600px) {
 .v4-background-layer {--bg-size:var(--bg-mobile-size)!important;--bg-x:var(--bg-mobile-x)!important;--bg-y:var(--bg-mobile-y)!important;}
}

.v4-background-asset--pattern {filter:grayscale(1) brightness(.84);}
/* Wide floral assets retain their proportions rather than occupying a square. */
.v4-background-layer--decoration.v4-background-asset--garden{height:calc(var(--bg-size) * 555 / 2172);background-size:100% auto;background-position:50% 45.56%}
/* Unconfigured pages use only the gradient; saved layers still render explicitly. */
.v4-body :is(.v4-brand-backdrop,.v4-inner-page)::before,
.v4-body :is(.v4-brand-backdrop,.v4-inner-page) .v4-brand-banner::before,
.v4-body :is(.v4-brand-backdrop,.v4-inner-page) .v4-brand-banner::after{display:none}
