/* Plumeria: the file is a landing page, so the hero is the file itself. A white card stands on its frame color and every piece of the
   file comes in over the card's edges where the file puts it, sized in container units so the card keeps its look at any width.
   The names run on one line between gold rules. Peach waves part the sections, the countdown stands on monstera leaves, and the
   RSVP sits between the two waves. */
.esite-skin-plumeria {
  --sk-accent-font: "Playfair Display", Georgia, serif;
  --sk-accent-style: italic;
  --sk-photo-shape: none;
  --sk-gap: 92px;
  --sk-measure: 900px;
  --pk: 1;   /* how much larger than in the file the pieces are drawn: more on a narrow card */
}
.esite-skin-plumeria .ss-h, .esite-skin-plumeria .cl-names, .esite-skin-plumeria .ss-closing-names { font-weight: 400; letter-spacing: .1em; text-transform: uppercase; }
.esite-skin-plumeria .ss-h { font-size: calc(clamp(1.7rem, 3vw, 2.4rem) * var(--s-hscale, 1)); }

/* ---- hero: the file's card ---- */
.esite-skin-plumeria .ss-hero.hs-classic.no-photo { padding: 92px clamp(14px, 4vw, 64px) clamp(20px, 4vw, 64px); background: var(--s-band); }
.esite-skin-plumeria .hs-classic.no-photo .cl-panel {
  container-type: inline-size; grid-template-columns: minmax(0, 1fr); justify-items: center; width: min(1240px, 100%); min-height: min(calc(100svh - 150px), 820px);
  margin: 0 auto; padding: clamp(60px, 9vw, 120px) clamp(20px, 6vw, 80px); overflow: hidden; background: var(--s-bg); box-shadow: 0 30px 60px -40px rgba(20, 30, 60, .45);
}
.esite-skin-plumeria .hs-classic.no-photo .cl-panel::after { display: none; }
.esite-skin-plumeria .hs-classic.no-photo .cl-panel::before {
  display: block; inset: 0; z-index: 0;
  background:
    var(--sk-plum-w, none) left 0 top calc(1.3cqw * var(--pk)) / calc(11.32cqw * var(--pk)) auto no-repeat,
    var(--sk-plum-y, none) right calc(11.76cqw * var(--pk)) bottom calc(11.58cqw * var(--pk)) / calc(11.89cqw * var(--pk)) auto no-repeat,
    var(--sk-line-l, none) left 0 bottom 0 / calc(40.59cqw * var(--pk)) auto no-repeat,
    var(--sk-line-r, none) right 0 top 0 / calc(22.33cqw * var(--pk)) auto no-repeat,
    var(--sk-gold-l, none) left 0 top 0 / calc(27.8cqw * var(--pk)) auto no-repeat,
    var(--sk-gold-r, none) right 0 top calc(10.38cqw * var(--pk)) / calc(9.2cqw * var(--pk)) auto no-repeat,
    var(--sk-leaf-l, none) left 0 top 0 / calc(22.26cqw * var(--pk)) auto no-repeat,
    var(--sk-leaf-r, none) right 0 top 0 / calc(26.25cqw * var(--pk)) auto no-repeat,
    var(--sk-monstera-l, none) left 0 bottom 0 / calc(26.14cqw * var(--pk)) auto no-repeat,
    var(--sk-monstera-r, none) right 0 bottom 0 / calc(25.85cqw * var(--pk)) auto no-repeat,
    var(--sk-blob-l, none) left 0 bottom 0 / calc(51.07cqw * var(--pk)) auto no-repeat,
    var(--sk-blob-r, none) right 0 top 0 / calc(25.05cqw * var(--pk)) auto no-repeat;
}
.esite-skin-plumeria .hs-classic .cl-text { position: relative; z-index: 3; max-width: 720px; }
.esite-skin-plumeria .cl-panel .h-kicker { font-family: var(--s-fbody); font-size: .875rem; font-style: normal; letter-spacing: .22em; text-transform: uppercase; color: var(--s-text); }
/* the names on one line, a gold rule on each side and the gold ampersand between them */
.esite-skin-plumeria .hs-classic .cl-names { display: flex; align-items: center; justify-content: center; gap: .3em; font-size: calc(clamp(2.2rem, 4.6cqw, 4.2rem) * var(--s-hscale, 1)); line-height: 1.1; }
.esite-skin-plumeria .hs-classic .cl-names::before, .esite-skin-plumeria .hs-classic .cl-names::after { content: ""; flex: 1 1 0; min-width: 24px; max-width: 160px; height: 1px; background: var(--s-accent); opacity: .7; }
.esite-skin-plumeria .hs-classic .cl-names .cn-1, .esite-skin-plumeria .hs-classic .cl-names .cn-2 { padding: 0; }
.esite-skin-plumeria .hs-classic .cl-names .cn-amp { margin: 0 .05em; font-size: 1.3em; color: var(--s-accent); letter-spacing: 0; text-transform: none; }
.esite-skin-plumeria .cl-sub { margin-top: 18px; letter-spacing: .18em; }
.esite-skin-plumeria .cl-facts b { font-family: var(--s-fhead); font-size: clamp(1.4rem, 2.4cqw, 2rem); font-weight: 400; letter-spacing: .06em; text-transform: none; }
.esite-skin-plumeria .cl-text .cl-btn { background: transparent; color: var(--s-text); border: 1px solid var(--s-accent); }
.esite-skin-plumeria .cl-text .cl-btn:hover { background: var(--s-accent); color: var(--s-bg); }
/* beside a photo the names stack again, without the rules */
.esite-skin-plumeria .hs-classic:not(.no-photo):not(.hv-cover) .cl-names, .esite-skin-plumeria .hv-cover .cl-names { flex-direction: column; gap: 0; font-size: calc(clamp(2.4rem, 4.4vw, 4rem) * var(--s-hscale, 1)); }
.esite-skin-plumeria .hs-classic:not(.no-photo) .cl-names::before, .esite-skin-plumeria .hs-classic:not(.no-photo) .cl-names::after { display: none; }
/* beside a photo: the photo is the card, the leaves and a wave come in over its corners */
.esite-skin-plumeria .hs-classic:not(.no-photo):not(.hv-cover) .cl-panel::after { display: none; }
.esite-skin-plumeria .hs-classic:not(.no-photo):not(.hv-cover) .cl-photo, .esite-skin-plumeria .ss-story-img img { border-radius: 0; }
.esite-skin-plumeria .hs-classic:not(.no-photo):not(.hv-cover) .cl-visual { container-type: inline-size; overflow: hidden; }
.esite-skin-plumeria .hs-classic:not(.no-photo):not(.hv-cover) .cl-visual::after {
  inset: 0; z-index: 3; border: 0;
  background: var(--sk-plum-w, none) left 0 top 3cqw / 22cqw auto no-repeat, var(--sk-gold-l, none) left 0 top 0 / 54cqw auto no-repeat,
              var(--sk-plum-y, none) right 30cqw bottom 24cqw / 22cqw auto no-repeat, var(--sk-monstera-r, none) right 0 bottom 0 / 50cqw auto no-repeat;
}
.esite-skin-plumeria .hv-cover:not(.no-photo) .cl-panel::after { display: none; }

/* ---- sections: peach waves part them; a plumeria rule above the headings ---- */
.esite-skin-plumeria .ss-scope:not([data-type="hero"]):not([data-type="countdown"]):not([data-type="none"]) .ss-h::before { width: 150px; height: 24px; }
.esite-skin-plumeria .ss-closing::before { width: 170px; height: 28px; }
.esite-skin-plumeria .ss-scope[data-type="countdown"], .esite-skin-plumeria .ss-scope[data-type="schedule"], .esite-skin-plumeria .ss-scope[data-type="faq"], .esite-skin-plumeria .ss-scope[data-type="rsvp"] { background-color: var(--sk-sec-bg, var(--s-band)); }
.esite-skin-plumeria .ss-scope[data-type="countdown"]::after, .esite-skin-plumeria .ss-scope[data-type="schedule"]::after, .esite-skin-plumeria .ss-scope[data-type="faq"]::after, .esite-skin-plumeria .ss-scope[data-type="rsvp"]::after {
  content: ""; position: absolute; inset: 0; z-index: -1; width: auto; height: auto; aspect-ratio: auto; pointer-events: none;
  background: var(--sk-wave-a, none) 0 0 / 100% clamp(36px, 5vw, 72px) no-repeat, var(--sk-wave-b, none) 0 100% / 100% clamp(36px, 5vw, 72px) no-repeat;
}
.esite-skin-plumeria .ss-scope[data-type="countdown"] .ss, .esite-skin-plumeria .ss-scope[data-type="schedule"] .ss, .esite-skin-plumeria .ss-scope[data-type="faq"] .ss, .esite-skin-plumeria .ss-scope[data-type="rsvp"] .ss { padding-top: calc(var(--sk-gap) + 30px); padding-bottom: calc(var(--sk-gap) + 30px); }
.esite-skin-plumeria .ss-scope[data-type="story"]::before { top: auto; bottom: 0; left: 0; right: auto; width: clamp(150px, 16vw, 250px); aspect-ratio: 1; background: var(--sk-monstera, none) 0 100% / contain no-repeat; transform: scaleX(-1); }
.esite-skin-plumeria .ss-scope[data-type="faq"]::before { top: 40px; right: 0; left: auto; width: clamp(120px, 12vw, 190px); aspect-ratio: 1 / 1.3; background: var(--sk-gold-leaf, none) 100% 0 / contain no-repeat; transform: scaleX(-1); }
.esite-skin-plumeria .ss-scope[data-type="schedule"]::before { top: 50px; left: 2vw; bottom: auto; right: auto; width: clamp(80px, 8vw, 130px); aspect-ratio: 1; background: var(--sk-plumeria, none) 50% 50% / contain no-repeat; }
.esite-skin-plumeria .ss-scope[data-type="rsvp"]::before { display: none; }

/* ---- countdown: each number on a monstera leaf ---- */
.esite-skin-plumeria .cdv-tiles .ss-cd { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(8px, 2vw, 24px); }
.esite-skin-plumeria .cdv-tiles .cd-unit {
  display: flex !important; flex-direction: column; align-items: center; justify-content: center !important; gap: 2px; --u: clamp(96px, 13vw, 160px); width: var(--u); aspect-ratio: 1; box-sizing: border-box;
  padding: 0 calc(var(--u) * .12) calc(var(--u) * .16) 0; border: 0 !important; border-radius: 0; outline: 0; color: var(--s-text); background: radial-gradient(circle at 44% 42%, var(--s-bg) 0 36%, transparent 36.6%), var(--sk-monstera, none) 100% 100% / 74% auto no-repeat !important; box-shadow: none;
}
.esite-skin-plumeria .cdv-tiles .cd-unit:nth-child(even) { transform: scaleX(-1); }
.esite-skin-plumeria .cdv-tiles .cd-unit::before, .esite-skin-plumeria .cdv-tiles .cd-unit::after { display: none !important; }
.esite-skin-plumeria .cdv-tiles .cd-unit:nth-child(even) > * { transform: scaleX(-1); }
.esite-skin-plumeria .ss-countdown .cd-n { font-family: var(--s-fhead) !important; font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1; }
.esite-skin-plumeria .cd-l { text-transform: uppercase; letter-spacing: .2em; font-size: .6875rem; }
.esite-skin-plumeria .cdv-tiles .ss-h { color: var(--s-accent); font-style: italic; letter-spacing: 0; text-transform: none; }

/* ---- the day, questions ---- */
.esite-skin-plumeria .schv-wide .ss-tl-time { font-family: var(--s-fhead); font-style: italic; color: var(--s-accent); font-size: 1.25rem; }
.esite-skin-plumeria .ss-tl-title { font-family: var(--s-fhead); letter-spacing: .08em; text-transform: uppercase; font-weight: 400; }
.esite-skin-plumeria .ss-faq-q { font-family: var(--s-fhead); font-size: 1.125rem; }

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

/* ---- RSVP: the card between the two waves, a plumeria on its corner ---- */
.esite-skin-plumeria .ss-rsvp-form { position: relative; max-width: 600px; padding: 48px 44px 44px; border-radius: 0; box-shadow: 0 24px 50px -32px rgba(20, 30, 60, .5); }
.esite-skin-plumeria .ss-rsvp-form::before { content: ""; position: absolute; top: -38px; right: -34px; width: 110px; aspect-ratio: 1; pointer-events: none; background: var(--sk-white-plumeria, none) 50% 50% / contain no-repeat; }

@media (max-width: 900px) {
  .esite-skin-plumeria { --pk: 1.6; }
  .esite-skin-plumeria .ss-hero.hs-classic.no-photo { padding: 80px 10px 10px; }
  .esite-skin-plumeria .hs-classic.no-photo .cl-panel { min-height: 0; padding: calc(100vw * .84) 18px calc(100vw * .66); }
  .esite-skin-plumeria .hs-classic .cl-names { flex-direction: column; gap: 0; font-size: calc(2.5rem * var(--s-hscale, 1)); }
  .esite-skin-plumeria .hs-classic .cl-names::before, .esite-skin-plumeria .hs-classic .cl-names::after { flex: none; width: 70px; }
  .esite-skin-plumeria .ss-scope[data-type="story"]::before, .esite-skin-plumeria .ss-scope[data-type="faq"]::before, .esite-skin-plumeria .ss-scope[data-type="schedule"]::before { display: none; }
  .esite-skin-plumeria .ss-rsvp-form { padding: 40px 22px 28px; }
  .esite-skin-plumeria .ss-rsvp-form::before { right: -12px; width: 80px; }
}
@media (max-width: 640px) {
  .esite-skin-plumeria .cdv-tiles .ss-cd { flex-wrap: nowrap; gap: 4px; }
  .esite-skin-plumeria .cdv-tiles .cd-unit { --u: 22vw; }
  .esite-skin-plumeria .ss-countdown .cd-n { font-size: 1.7rem; }
  .esite-skin-plumeria .cd-l { letter-spacing: .08em; font-size: .5625rem; }
}