/* Magnolia Arch: names in Corinthia inside an arch, photos cut to the arch, Cormorant italics for the quiet lines.
   Corinthia is too fine for small text: numbers and small headings stay in the other two fonts. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,400;1,500&display=swap');
.esite-skin-magnolia-arch {
  --sk-accent-font: "Cormorant Garamond", Georgia, serif;
  --sk-photo-ratio: 4 / 5;
  --sk-photo-shape: inset(0 round 50% 50% 0 0 / 40% 40% 0 0);
}
.esite-skin-magnolia-arch .ss-h { font-size: calc(clamp(2.875rem, 5vw, 4.25rem) * var(--s-hscale, 1)); letter-spacing: 0; }
.esite-skin-magnolia-arch .cl-names, .esite-skin-magnolia-arch .ss-closing-names { letter-spacing: 0; }
.esite-skin-magnolia-arch .cl-brand { font-size: 1.75rem; }
.esite-skin-magnolia-arch .cl-panel .h-kicker { font-weight: 500; }
.esite-skin-magnolia-arch .ss-countdown .cd-n { font-family: var(--s-fbody) !important; font-weight: 300; letter-spacing: 0; }
.esite-skin-magnolia-arch .ss-location .ss-loc-venue { font-family: var(--sk-accent-font) !important; font-size: 1.875rem; letter-spacing: 0; }
.esite-skin-magnolia-arch .ss-faq .ss-faq-q { font-family: var(--sk-accent-font); font-size: 1.5rem; font-style: italic; letter-spacing: 0; }
.esite-skin-magnolia-arch .cl-btn, .esite-skin-magnolia-arch .ss-btn, .esite-skin-magnolia-arch .ss-rsvp-form .btn-rsvp { border-radius: 999px; }
.esite-skin-magnolia-arch .ss-location .ss-dir { border-radius: 999px !important; }
/* the arch stands up the screen, the flowers fill the sides beside it */
@media (min-width: 901px) {
  .esite-skin-magnolia-arch { --sk-cluster-size: clamp(320px, 52vw, 860px); }
  .esite-skin-magnolia-arch .cl-panel::before { background-size: auto min(84svh, 860px); }
  .esite-skin-magnolia-arch .cl-panel::after { background-position: calc(100% + 2vw) 0, -2vw calc(100% + 1vw); }
  /* beside a photo the flowers step back, so they frame it instead of covering it */
  .esite-skin-magnolia-arch .hs-classic:not(.no-photo) .cl-panel::after { background-size: clamp(260px, 30vw, 500px) auto; }
}
@media (max-width: 900px) {
  .esite-skin-magnolia-arch .cl-panel::before { background-size: min(94vw, 620px) calc(100% - 28px); }
}