/* Garden Green: pebbles. The suite's organic shapes become the page's forms. The names sit inside a large dark pebble in light type,
   a thin loop drawn a little off around it and the line botanical draped over its top, a pale blob resting behind; the second
   botanical grows at the foot. The countdown figures sit in small pale stones, each heading has a little pebble, and the RSVP
   card rests on a pale stone. */
.esite-skin-garden-green {
  --sk-accent-font: "Libre Baskerville", Georgia, serif;
  --sk-accent-style: italic;
  --sk-photo-shape: none;
  --sk-gap: 90px;
  --sk-measure: 860px;
}
.esite-skin-garden-green .ss-h, .esite-skin-garden-green .cl-names, .esite-skin-garden-green .ss-closing-names { font-weight: 400; letter-spacing: 0; }
.esite-skin-garden-green .ss-h { font-size: calc(clamp(1.8rem, 3.2vw, 2.6rem) * var(--s-hscale, 1)); }

/* ---- hero: the pebble ---- */
.esite-skin-garden-green .ss-hero.hs-classic.no-photo { position: relative; overflow: hidden; background: var(--s-bg); }
.esite-skin-garden-green .hs-classic.no-photo .cl-panel {
  --p: min(520px, 80vw, calc((100svh - 170px) * .9)); grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; min-height: calc(100svh - 38px);
  padding: 110px 20px 70px; background: none; overflow: visible;
}
/* the pale blob resting behind, top right, and the second botanical growing from the foot, bottom right */
.esite-skin-garden-green .hs-classic.no-photo .cl-panel::before {
  display: block; inset: 68px 0 0; z-index: 0;
  background: var(--sk-blob-top-right, none) right -4vw top 0 / min(36vw, 520px) auto no-repeat, var(--sk-botanical-bottom-right, none) right 2vw bottom 0 / min(34vw, 480px) auto no-repeat,
              var(--sk-blob-bottom-left, none) left -3vw bottom -4vw / min(24vw, 340px) auto no-repeat;
}
.esite-skin-garden-green .hs-classic.no-photo .cl-panel::after { display: none; }
.esite-skin-garden-green .hs-classic.no-photo .cl-text {
  position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; width: var(--p); aspect-ratio: 400 / 460; max-width: none;
  padding: 0 calc(var(--p) * .16); box-sizing: border-box; color: var(--sk-deep-ink); background: var(--sk-pebble, none) 50% 50% / 100% 100% no-repeat;
  --s-text: var(--sk-deep-ink); --s-accent: color-mix(in srgb, var(--sk-deep-ink) 78%, transparent);
}
/* the loop drawn a little off, the botanical draped over the pebble's top left */
.esite-skin-garden-green .hs-classic.no-photo .cl-text::before { content: ""; position: absolute; inset: -4% -6% -3% -2%; z-index: -1; pointer-events: none; background: var(--sk-loop, none) 50% 50% / 100% 100% no-repeat; transform: rotate(-6deg); }
.esite-skin-garden-green .hs-classic.no-photo .cl-text::after { content: ""; position: absolute; top: calc(var(--p) * -.2); left: calc(var(--p) * -.34); width: calc(var(--p) * .74); aspect-ratio: 2717 / 2993; z-index: 3; pointer-events: none; background: var(--sk-botanical-top-left, none) 0 0 / contain no-repeat; }
.esite-skin-garden-green .cl-panel .h-kicker { margin: 0 0 10px; font-family: var(--s-fbody); font-size: .75rem; font-style: normal; letter-spacing: .32em; text-transform: uppercase; color: var(--s-accent); }
.esite-skin-garden-green .hs-classic .cl-names { justify-items: center; font-size: calc(clamp(2.2rem, var(--p, 500px) * .1, 3.6rem) * var(--s-hscale, 1)); line-height: 1.12; }
.esite-skin-garden-green .hs-classic .cl-names .cn-1, .esite-skin-garden-green .hs-classic .cl-names .cn-2 { justify-self: center; padding: 0; }
.esite-skin-garden-green .hs-classic .cl-names .cn-amp { margin: .02em 0; font-size: .5em; font-style: italic; }
.esite-skin-garden-green .cl-sub { margin-top: 12px; font-size: .6875rem; letter-spacing: .24em; }
.esite-skin-garden-green .hs-classic.no-photo .cl-sub { color: var(--sk-deep-ink); opacity: .9; }
.esite-skin-garden-green .cl-facts { margin: 10px 0 18px; }
.esite-skin-garden-green .cl-facts b { font-family: var(--s-fbody); font-weight: 600; font-size: .875rem; letter-spacing: .2em; }
.esite-skin-garden-green .cl-facts span { font-family: var(--s-fhead); font-style: italic; font-size: .9375rem; }
.esite-skin-garden-green .hs-classic.no-photo .cl-text .cl-btn { background: var(--sk-deep-ink); color: var(--sk-deep); border-color: var(--sk-deep-ink); }
/* a photo: a pebble-shaped photo, the loop off around it */
.esite-skin-garden-green .hs-classic:not(.no-photo) .cl-panel::after { display: none; }
.esite-skin-garden-green .hs-classic:not(.no-photo):not(.hv-cover) .cl-photo, .esite-skin-garden-green .ss-story-img img { border-radius: 52% 48% 44% 56% / 46% 52% 48% 54%; }
.esite-skin-garden-green .hs-classic:not(.no-photo):not(.hv-cover) .cl-visual { overflow: visible; }
.esite-skin-garden-green .hs-classic:not(.no-photo):not(.hv-cover) .cl-visual::after { inset: -5% -6% -4% -3%; z-index: 3; border: 0; background: var(--sk-loop, none) 50% 50% / 100% 100% no-repeat; transform: rotate(-5deg); }

/* ---- sections ---- */
.esite-skin-garden-green .ss-scope:not([data-type="hero"]):not([data-type="countdown"]):not([data-type="none"]) .ss-h::before { width: 52px; height: 36px; margin-bottom: 12px; }
.esite-skin-garden-green .ss-closing::before { width: 300px; height: 280px; background: var(--sk-botanical-bottom-right, none) 50% 100% / contain no-repeat; }
.esite-skin-garden-green .ss-scope[data-type="story"]::before { top: 20px; right: -2vw; left: auto; width: clamp(150px, 16vw, 250px); aspect-ratio: 1724 / 1871; background: var(--sk-blob-top-right, none) 100% 0 / contain no-repeat; }
.esite-skin-garden-green .ss-scope[data-type="schedule"]::before { bottom: 0; left: 0; top: auto; right: auto; width: clamp(140px, 15vw, 240px); aspect-ratio: 2717 / 2993; background: var(--sk-botanical-top-left, none) 0 100% / contain no-repeat; transform: rotate(180deg) scaleX(-1); }
.esite-skin-garden-green .ss-scope[data-type="faq"]::before { display: none; }
.esite-skin-garden-green .ss-scope[data-type="schedule"], .esite-skin-garden-green .ss-scope[data-type="faq"] { background-color: var(--sk-sec-bg, var(--s-band)); }

/* ---- countdown: figures in pale stones ---- */
.esite-skin-garden-green .ss-scope[data-type="countdown"]:has(.cdv-tiles) { background-color: var(--sk-sec-bg, var(--s-bg)); }
.esite-skin-garden-green .cdv-tiles .ss-cd { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, 2.6vw, 30px); }
.esite-skin-garden-green .cdv-tiles .cd-unit {
  display: flex !important; flex-direction: column; align-items: center; justify-content: center !important; gap: 2px; width: clamp(88px, 12vw, 140px); aspect-ratio: 1;
  padding: 0; border: 0 !important; border-radius: 0; outline: 0; color: var(--s-text); background: var(--sk-stone, none) 50% 50% / 100% 100% no-repeat !important; box-shadow: none;
}
.esite-skin-garden-green .cdv-tiles .cd-unit:nth-child(even) { transform: rotate(8deg); }
.esite-skin-garden-green .cdv-tiles .cd-unit:nth-child(even) > * { transform: rotate(-8deg); }
.esite-skin-garden-green .cdv-tiles .cd-unit::before, .esite-skin-garden-green .cdv-tiles .cd-unit::after { display: none !important; }
.esite-skin-garden-green .ss-countdown .cd-n { font-family: var(--s-fhead) !important; font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1; }
.esite-skin-garden-green .cd-l { text-transform: uppercase; letter-spacing: .2em; font-size: .625rem; font-weight: 600; }
.esite-skin-garden-green .cdv-tiles .ss-h { color: var(--s-accent); font-style: italic; }
.esite-skin-garden-green .ss-scope[data-type="countdown"]:not(:has(.cdv-tiles)) { background-color: var(--sk-sec-bg, var(--s-band)); color: var(--s-text); }
.esite-skin-garden-green .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-garden-green .schv-wide .ss-tl-time { font-family: var(--s-fhead); font-style: italic; color: var(--s-accent); font-size: 1.05rem; }
.esite-skin-garden-green .ss-tl-title { font-family: var(--s-fhead); font-size: 1.15rem; font-weight: 400; }
.esite-skin-garden-green .ss-faq-q { font-family: var(--s-fhead); font-size: 1.05rem; font-weight: 400; }

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

/* ---- RSVP: a card resting on a pale stone ---- */
.esite-skin-garden-green .ss-scope[data-type="rsvp"]::before { top: 40px; left: 50%; right: auto; bottom: 40px; width: min(820px, 96vw); height: auto; aspect-ratio: auto; transform: translateX(-50%); z-index: -1; background: var(--sk-stone, none) 50% 50% / 100% 100% no-repeat; }
.esite-skin-garden-green .ss-scope[data-type="rsvp"]::after { display: none; }
.esite-skin-garden-green .ss-rsvp-form { max-width: 560px; padding: 44px 40px 40px; border-radius: 26px; box-shadow: 0 22px 46px -30px rgba(30, 40, 30, .4); }

@media (max-width: 900px) {
  .esite-skin-garden-green .hs-classic.no-photo .cl-panel { --p: min(88vw, 400px); min-height: 0; padding: 130px 16px 220px; }
  .esite-skin-garden-green .hs-classic.no-photo .cl-panel::before { background: var(--sk-blob-top-right, none) right -14vw top 0 / 50vw auto no-repeat, var(--sk-botanical-bottom-right, none) right 0 bottom 0 / 54vw auto no-repeat, var(--sk-blob-bottom-left, none) left -10vw bottom -6vw / 36vw auto no-repeat; }
  .esite-skin-garden-green .hs-classic.no-photo .cl-text::after { left: calc(var(--p) * -.1); top: calc(var(--p) * -.26); width: calc(var(--p) * .56); }
  .esite-skin-garden-green .hs-classic .cl-names { font-size: calc(2.2rem * var(--s-hscale, 1)); }
  .esite-skin-garden-green .cl-facts b { font-size: .75rem; letter-spacing: .1em; }
  .esite-skin-garden-green .ss-scope[data-type="story"]::before, .esite-skin-garden-green .ss-scope[data-type="schedule"]::before { display: none; }
  .esite-skin-garden-green .ss-rsvp-form { padding: 36px 20px 28px; }
}
@media (max-width: 640px) {
  .esite-skin-garden-green .cdv-tiles .ss-cd { flex-wrap: nowrap; gap: 6px; }
  .esite-skin-garden-green .cdv-tiles .cd-unit { width: 22vw; }
  .esite-skin-garden-green .ss-countdown .cd-n { font-size: 1.6rem; }
  .esite-skin-garden-green .cd-l { letter-spacing: .06em; font-size: .5rem; }
}