/* "Hoa trắng xanh": ivory paper, sage ink, watercolour magnolias and eucalyptus.
   Ornaments are painted on white and multiplied onto the paper, so the white disappears. */

body[data-theme-id="floral"] {
  --font-script: "Ephesis", "Great Vibes", cursive;
  --paper: #f6f1e7;
  --ink: #3a4435;
  --muted: #7c8572;
  --accent: #6b7d55;
  --accent-ink: #fbf8f1;
  --rule: rgba(79, 95, 59, 0.24);
  --backdrop: #e3dccb;
  --field-bg: rgba(255, 255, 255, 0.6);
  --cover-bg: radial-gradient(120% 90% at 50% 20%, #eef0e4 0%, #d9dcc9 100%);
  --cover-card-bg: #fbf7ef;
  background-image: radial-gradient(90% 60% at 50% 0%, #ece6d6 0%, transparent 70%);
}

[data-theme-id="floral"] .orn { mix-blend-mode: multiply; }
[data-theme-id="floral"] .page {
  background-image:
    radial-gradient(60% 40% at 10% 0%, rgba(167, 184, 140, 0.12), transparent 70%),
    radial-gradient(50% 30% at 100% 55%, rgba(201, 162, 143, 0.1), transparent 70%);
}
[data-theme-id="floral"] .page > section { background: transparent; }
[data-theme-id="floral"] .script { color: #4f5f3b; }

/* cover */
[data-theme-id="floral"] .cover-card { padding-top: 96px; padding-bottom: 88px; }
[data-theme-id="floral"] .cover-corner-a { top: -8px; left: -16px; width: 74%; }
[data-theme-id="floral"] .cover-corner-b { bottom: -10px; right: -14px; width: 68%; }
[data-theme-id="floral"] .cover-names { font-size: 56px; }
[data-theme-id="floral"] .cover-guest { color: #8a6a5a; }

/* hero: the photo sits inside the painted rose arch; the arch is multiplied over its edges */
[data-theme-id="floral"] .hero-photo { width: 100%; }
[data-theme-id="floral"] .hero-overlay { position: relative; width: 100%; z-index: 1; }
[data-theme-id="floral"] .hero-img {
  position: absolute; left: 17%; top: 12%; width: 66%; height: 80%; aspect-ratio: auto;
  border-radius: 50% 50% 4px 4px / 34% 34% 4px 4px;
}

/* portraits sit inside the painted wreath */
[data-theme-id="floral"] .portrait-frame { z-index: 1; }

[data-theme-id="floral"] .between-ceremonies { width: 70px; }
[data-theme-id="floral"] .families-motif { width: 110px; top: -6px; right: -26px; transform: rotate(28deg); }