/* Flower ornaments (SVG masks, so each page colours them with its own palette).
   .orn-divider  sprig divider: leaves in --orn-leaf, blossom in --orn-flower
   .flowers      on <body>: faint corner sprigs, top right and bottom left
   .orn-flower   a small inline flower (e.g. a list bullet), in currentColor */
:root{--orn-leaf:var(--sage,#8fa88a);--orn-flower:var(--pink,#d9a7c0)}
.orn-divider{position:relative;display:block;width:150px;height:28px;margin:12px auto;border:0}
.orn-divider::before,.orn-divider::after{content:"";position:absolute;inset:0;
  -webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.orn-divider::before{--m:url(/assets/ornaments/sprig-leaves.svg);background:var(--orn-leaf)}
.orn-divider::after{--m:url(/assets/ornaments/sprig-flower.svg);background:var(--orn-flower)}
.orn-divider{animation:orn-bloom 1s .2s cubic-bezier(.2,.8,.2,1) both}
@keyframes orn-bloom{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
.flowers::before,.flowers::after{content:"";position:fixed;z-index:0;width:min(26vw,115px);aspect-ratio:1;pointer-events:none;opacity:.42;
  background:var(--orn-leaf);-webkit-mask:url(/assets/ornaments/corner.svg) center/contain no-repeat;mask:url(/assets/ornaments/corner.svg) center/contain no-repeat}
.flowers::before{top:0;right:0}
.flowers::after{bottom:0;left:0;transform:rotate(180deg)}
.flowers > main{position:relative;z-index:1}
.orn-flower{display:inline-block;width:.8em;height:.8em;flex:none;background:currentColor;vertical-align:-.05em;
  -webkit-mask:url(/assets/ornaments/flower.svg) center/contain no-repeat;mask:url(/assets/ornaments/flower.svg) center/contain no-repeat}
@media (prefers-reduced-motion:reduce){.orn-divider{animation:none}}