/* Calla Lily: a gallery. The line-drawn lilies hang on a colored wall as a matted, thin-framed print, lit from above; beside them the
   names sit on a museum label, the suite's flourished "and" between them, the date and place set as the label's details. Down the page
   the headings are label titles over a hairline, the countdown is a row of small wall labels and the RSVP a visitors' book card. */
.esite-skin-calla-lily {
  --sk-accent-font: "Cormorant Garamond", Georgia, serif;
  --sk-accent-style: italic;
  --sk-photo-shape: none;
  --sk-gap: 92px;
  --sk-measure: 880px;
  --sk-frame: color-mix(in srgb, var(--s-text) 78%, transparent);
}
.esite-skin-calla-lily .ss-h, .esite-skin-calla-lily .cl-names, .esite-skin-calla-lily .ss-closing-names { font-weight: 400; letter-spacing: .06em; }
.esite-skin-calla-lily .ss-h { font-size: calc(clamp(2rem, 3.4vw, 2.8rem) * var(--s-hscale, 1)); }

/* ---- hero: the wall, the framed print, its label ---- */
.esite-skin-calla-lily .ss-hero.hs-classic.no-photo { background: var(--s-band) radial-gradient(ellipse 60% 46% at 38% 18%, color-mix(in srgb, var(--s-bg) 30%, transparent), transparent 70%); }
.esite-skin-calla-lily .hs-classic.no-photo .cl-panel {
  --u: min(1vw, 17px, 1.5svh); grid-template-columns: auto minmax(0, 400px); justify-content: center; align-items: center; gap: calc(var(--u) * 7);
  min-height: calc(100svh - 38px); padding: 110px clamp(20px, 5vw, 80px) 70px; background: none;
}
/* the print: mat in the paper's color, a thin frame, a soft shadow on the wall */
.esite-skin-calla-lily .hs-classic.no-photo .cl-panel::before {
  display: block; position: relative; inset: auto; grid-column: 1; grid-row: 1; z-index: 1;
  width: min(calc(var(--u) * 40), 54svh); aspect-ratio: 3 / 4; box-sizing: border-box;
  background: var(--sk-lily, none) 50% 54% / auto 74% no-repeat, var(--s-bg);
  border: calc(var(--u) * .9) solid var(--sk-frame); outline: 1px solid color-mix(in srgb, var(--s-text) 25%, transparent); outline-offset: calc(var(--u) * -3.4);
  box-shadow: 0 2px 2px rgba(0, 0, 0, .08), 0 28px 50px -24px rgba(0, 0, 0, .45);
}
.esite-skin-calla-lily .hs-classic.no-photo .cl-panel::after { display: none; }
/* the label */
.esite-skin-calla-lily .hs-classic.no-photo .cl-text {
  position: relative; z-index: 2; grid-column: 2; grid-row: 1; align-self: center; max-width: 400px; padding: 34px 34px 30px; text-align: left;
  background: var(--s-bg); outline: 1px solid var(--sk-line); outline-offset: -8px; box-shadow: 0 1px 1px rgba(0, 0, 0, .08), 0 12px 22px -16px rgba(0, 0, 0, .4);
}
.esite-skin-calla-lily .hs-classic .cl-panel .h-kicker { margin: 0 0 12px; font-family: var(--s-fbody); font-size: .75rem; font-style: normal; letter-spacing: .26em; text-transform: uppercase; color: var(--s-accent); }
.esite-skin-calla-lily .hs-classic .cl-names { display: grid; justify-items: start; font-size: calc(clamp(2.2rem, 3.4vw, 3.2rem) * var(--s-hscale, 1)); line-height: 1.06; text-align: left; }
.esite-skin-calla-lily .hs-classic .cl-names .cn-1, .esite-skin-calla-lily .hs-classic .cl-names .cn-2 { justify-self: start; padding: 0; }
/* the suite's flourished "and" in place of the ampersand */
.esite-skin-calla-lily .hs-classic .cl-names .cn-amp { justify-self: start; width: 3.2em; height: 1.18em; margin: .04em 0 .02em -.2em; font-size: 1em; color: transparent; background: var(--sk-and, none) 0 50% / contain no-repeat; overflow: hidden; }
.esite-skin-calla-lily .hs-classic .cl-sub { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--sk-line); font-size: .6875rem; letter-spacing: .2em; text-align: left; }
.esite-skin-calla-lily .hs-classic .cl-facts { margin: 12px 0 18px; text-align: left; }
.esite-skin-calla-lily .hs-classic .cl-facts b { display: block; font-family: var(--s-fbody); font-size: 1.125rem; font-style: italic; font-weight: 500; letter-spacing: 0; text-transform: none; }
.esite-skin-calla-lily .hs-classic .cl-facts span { color: var(--s-text); opacity: .8; font-size: .9375rem; }
.esite-skin-calla-lily .hs-classic .cl-actions { justify-content: flex-start; }
.esite-skin-calla-lily .cl-text .cl-btn { padding: 11px 28px; }
/* with a photo the photo is the framed print */
.esite-skin-calla-lily .hs-classic:not(.no-photo):not(.hv-cover) { background: var(--s-band); }
.esite-skin-calla-lily .hs-classic:not(.no-photo):not(.hv-cover) .cl-panel { background: none; }
.esite-skin-calla-lily .hs-classic:not(.no-photo):not(.hv-cover) .cl-photo { border-radius: 0; border: 12px solid var(--sk-frame); outline: 22px solid var(--s-bg); outline-offset: -34px; box-shadow: 0 28px 50px -24px rgba(0, 0, 0, .45); }
.esite-skin-calla-lily .hs-classic:not(.no-photo):not(.hv-cover) .cl-visual::after { display: none; }
.esite-skin-calla-lily .hs-classic:not(.no-photo) .cl-panel::after { display: none; }
.esite-skin-calla-lily .hs-classic:not(.no-photo):not(.hv-cover) .cl-text { padding: 30px; background: var(--s-bg); box-shadow: 0 12px 22px -16px rgba(0, 0, 0, .4); text-align: left; }
.esite-skin-calla-lily .hs-classic:not(.no-photo):not(.hv-cover) .cl-names { justify-items: start; }
.esite-skin-calla-lily .hv-cover .cl-names .cn-amp { color: inherit; background: none; width: auto; height: auto; }
.esite-skin-calla-lily .hv-center .cl-text, .esite-skin-calla-lily .hv-cover .cl-text { text-align: center; }

/* ---- sections: label titles over a hairline, a small lily above ---- */
.esite-skin-calla-lily .ss-scope:not([data-type="hero"]):not([data-type="countdown"]):not([data-type="none"]) .ss-h::before { width: 40px; height: 82px; margin-bottom: 8px; }
.esite-skin-calla-lily .ss-scope:not([data-type="hero"]):not([data-type="countdown"]):not([data-type="none"]) .ss-h::after { content: ""; display: block; width: 56px; height: 1px; margin: 16px auto 0; background: var(--s-accent); }
.esite-skin-calla-lily .ss-closing::before { width: 70px; height: 140px; }
.esite-skin-calla-lily .ss-scope[data-type="story"]::before, .esite-skin-calla-lily .ss-scope[data-type="faq"]::before, .esite-skin-calla-lily .ss-scope[data-type="schedule"]::before { display: none; }
.esite-skin-calla-lily .ss-scope[data-type="schedule"], .esite-skin-calla-lily .ss-scope[data-type="faq"] { background-color: var(--sk-sec-bg, var(--s-band)); }
.esite-skin-calla-lily .ss-story-img img { border-radius: 0; border: 10px solid var(--sk-frame); outline: 16px solid var(--s-bg); outline-offset: -26px; }

/* ---- countdown: small wall labels ---- */
.esite-skin-calla-lily .ss-scope[data-type="countdown"]:has(.cdv-tiles) { background-color: var(--sk-sec-bg, var(--s-band)); }
.esite-skin-calla-lily .cdv-tiles .ss-cd { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, 2.4vw, 26px); }
.esite-skin-calla-lily .cdv-tiles .cd-unit {
  display: flex !important; flex-direction: column; align-items: flex-start; justify-content: flex-end !important; gap: 2px; width: clamp(92px, 12vw, 140px); aspect-ratio: 5 / 4;
  padding: 12px 14px; border: 0 !important; border-radius: 0; outline: 0; background: var(--s-bg) !important; color: var(--s-text); box-shadow: 0 1px 1px rgba(0, 0, 0, .08), 0 12px 20px -14px rgba(0, 0, 0, .4);
}
.esite-skin-calla-lily .cdv-tiles .cd-unit::before, .esite-skin-calla-lily .cdv-tiles .cd-unit::after { display: none !important; }
.esite-skin-calla-lily .ss-countdown .cd-n { font-family: var(--s-fhead) !important; font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 1; }
.esite-skin-calla-lily .cd-l { padding-top: 6px; border-top: 1px solid var(--sk-line); width: 100%; text-align: left; text-transform: uppercase; letter-spacing: .18em; font-size: .6875rem; font-weight: 600; color: var(--s-text); opacity: .75; }
.esite-skin-calla-lily .cdv-tiles .ss-h { color: var(--s-text); font-family: var(--s-fhead); font-style: normal; }
.esite-skin-calla-lily .ss-scope[data-type="countdown"]:not(:has(.cdv-tiles)) { background-color: var(--sk-sec-bg, var(--s-band)); color: var(--s-text); }
.esite-skin-calla-lily .ss-scope[data-type="countdown"]:not(:has(.cdv-tiles)) :is(.ss-h, .cd-n, .cd-l) { color: var(--s-text); }

/* ---- the day, questions ---- */
.esite-skin-calla-lily .schv-wide .ss-tl-time { font-family: var(--s-fbody); font-style: italic; color: var(--s-accent); font-size: 1.25rem; letter-spacing: 0; text-transform: none; }
.esite-skin-calla-lily .ss-tl-title { font-family: var(--s-fhead); font-size: 1.3rem; letter-spacing: .06em; }
.esite-skin-calla-lily .ss-faq-q { font-family: var(--s-fhead); font-size: 1.2rem; font-weight: 400; letter-spacing: .04em; }

/* ---- registry ---- */
.esite-skin-calla-lily .gftv-panel .ss-wrap { aspect-ratio: auto; width: min(600px, 100%); padding: 0; background: none; }
.esite-skin-calla-lily .gftv-panel .ss-h::before { display: block !important; }

/* ---- RSVP: the visitors' book ---- */
.esite-skin-calla-lily .ss-scope[data-type="rsvp"]::before, .esite-skin-calla-lily .ss-scope[data-type="rsvp"]::after { display: none; }
.esite-skin-calla-lily .ss-rsvp-form { max-width: 560px; padding: 44px 42px 40px; border-radius: 0; border-top: 3px double var(--sk-frame); box-shadow: 0 1px 1px rgba(0, 0, 0, .08), 0 22px 40px -26px rgba(0, 0, 0, .45); }

@media (max-width: 900px) {
  .esite-skin-calla-lily .hs-classic.no-photo .cl-panel { --u: 2.6vw; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 0; min-height: 0; padding: 96px 20px 56px; }
  .esite-skin-calla-lily .hs-classic.no-photo .cl-panel::before { width: min(78vw, 340px); }
  .esite-skin-calla-lily .hs-classic.no-photo .cl-text { grid-column: 1; grid-row: 2; justify-self: center; width: min(86vw, 360px); margin-top: -18px; padding: 24px 22px 20px; }
  .esite-skin-calla-lily .hs-classic .cl-names { font-size: calc(2.4rem * var(--s-hscale, 1)); }
  .esite-skin-calla-lily .ss-rsvp-form { padding: 34px 20px 28px; }
}
@media (max-width: 640px) {
  .esite-skin-calla-lily .cdv-tiles .ss-cd { flex-wrap: nowrap; gap: 6px; }
  .esite-skin-calla-lily .cdv-tiles .cd-unit { width: 22vw; padding: 8px; }
  .esite-skin-calla-lily .ss-countdown .cd-n { font-size: 1.6rem; }
  .esite-skin-calla-lily .cd-l { letter-spacing: .06em; font-size: .5rem; }
}