/* Leaf Oca: a page from a botanical sketchbook on the suite's colored paper. The hero is one double-ruled card: the names flush
   left in large italic, the one-line bouquet bursting from an arched plate beside them. Headings sit flush left on a hairline
   with a small sprig; the countdown is a ruled ledger; the side branch, drawn cut at its edge, climbs the screen's edge by the RSVP. */
.esite-skin-leaf-oca {
  --sk-accent-font: var(--s-fhead);
  --sk-accent-style: italic;
  --sk-photo-shape: none;
  --sk-gap: 92px;
  --sk-measure: 1040px;
  --sk-left: clamp(24px, 9vw, 160px);
}
.esite-skin-leaf-oca .ss-h { font-style: italic; font-weight: 400; letter-spacing: 0; }
.esite-skin-leaf-oca .cl-names, .esite-skin-leaf-oca .ss-closing-names { font-style: italic; font-weight: 400; letter-spacing: -.01em; }

/* ---- hero: one invitation card on the band. A double-ruled box holds the names (flush left, the side branch faded behind them)
   and, beside them, an arched specimen plate standing on the box's floor with the bouquet bursting out over its top and the box's edge ---- */
.esite-skin-leaf-oca { --sk-box-h: min(calc(100svh - 150px), 640px); --sk-arch-h: calc(var(--sk-box-h) - 110px); --sk-arch-w: min(calc(var(--sk-arch-h) * .72), 34vw); }
.esite-skin-leaf-oca .ss-hero.hs-classic.no-photo { padding: 112px clamp(16px, 4vw, 56px) 64px; background: var(--s-band); }
.esite-skin-leaf-oca .hs-classic.no-photo .cl-panel {
  grid-template-columns: minmax(0, 1fr) var(--sk-arch-w); justify-items: start; gap: clamp(28px, 4vw, 64px); width: min(1120px, 100%); min-height: var(--sk-box-h); margin: 0 auto;
  padding: 56px clamp(40px, 5vw, 72px); overflow: visible; border: 1px solid var(--sk-line); outline: 1px solid var(--sk-line); outline-offset: 9px;
  background: var(--sk-watermark, none) 0 50% / auto 92% no-repeat, var(--s-bg);
}
.esite-skin-leaf-oca .hs-classic.no-photo .cl-panel::before {
  display: block; inset: auto clamp(40px, 5vw, 72px) 0 auto; width: var(--sk-arch-w); height: var(--sk-arch-h); z-index: 0;
  border-radius: 999px 999px 0 0; background: var(--s-band); outline: 1px solid var(--sk-line); outline-offset: -12px;
}
.esite-skin-leaf-oca .hs-classic.no-photo .cl-panel::after {
  display: block; inset: auto calc(clamp(40px, 5vw, 72px) - var(--sk-arch-w) * .24) 22px auto; width: calc(var(--sk-arch-w) * 1.48); height: calc(var(--sk-arch-h) + 90px);
  background: var(--sk-bouquet, none) 50% 100% / contain no-repeat;
}
.esite-skin-leaf-oca .hs-classic:not(.no-photo) .cl-panel::after { display: none; }
.esite-skin-leaf-oca .hs-classic .cl-text { text-align: left; }
.esite-skin-leaf-oca .hs-classic.no-photo .cl-text { max-width: 600px; }
.esite-skin-leaf-oca .hs-classic .cl-names { justify-content: start; justify-items: start; font-size: calc(clamp(3.4rem, 6vw, 6.4rem) * var(--s-hscale, 1)); line-height: .96; }
.esite-skin-leaf-oca .hs-classic .cl-names .cn-1 { justify-self: start; padding: 0; }
.esite-skin-leaf-oca .hs-classic .cl-names .cn-amp { justify-self: start; margin: .02em 0 .04em .9em; font-size: .5em; }
.esite-skin-leaf-oca .hs-classic .cl-names .cn-2 { justify-self: start; padding: 0 0 0 .9em; }
.esite-skin-leaf-oca .hs-classic .cl-panel .h-kicker { margin-bottom: 20px; font-family: var(--s-fbody); font-size: .8125rem; font-style: normal; letter-spacing: .2em; text-transform: uppercase; }
.esite-skin-leaf-oca .hs-classic .cl-sub { margin: 30px 0 0; padding-top: 22px; border-top: 1px solid var(--sk-line); max-width: 420px; text-align: left; }
.esite-skin-leaf-oca .hs-classic .cl-facts { text-align: left; }
.esite-skin-leaf-oca .hs-classic .cl-actions { justify-content: flex-start; }
/* beside a photo: the photo stands in a hairline frame, a tulip grows up its edge */
.esite-skin-leaf-oca .hs-classic:not(.no-photo):not(.hv-cover) .cl-panel { padding: 120px var(--sk-left) 80px; }
.esite-skin-leaf-oca .hs-classic:not(.no-photo):not(.hv-cover) .cl-photo, .esite-skin-leaf-oca .ss-story-img img { border-radius: 0; outline: 1px solid var(--sk-line); outline-offset: 12px; }
.esite-skin-leaf-oca .hs-classic:not(.no-photo):not(.hv-cover) .cl-visual { overflow: visible; }
.esite-skin-leaf-oca .hs-classic:not(.no-photo):not(.hv-cover) .cl-visual::after { inset: auto auto -40px -70px; width: 150px; height: 300px; z-index: 3; border: 0; background: var(--sk-tulip, none) 0 100% / contain no-repeat; }
.esite-skin-leaf-oca .hv-flip:not(.no-photo) .cl-visual::after { inset: auto -70px -40px auto; transform: scaleX(-1); }
.esite-skin-leaf-oca .hv-center:not(.no-photo) .cl-text, .esite-skin-leaf-oca .hv-cover .cl-text { text-align: center; }
.esite-skin-leaf-oca .hv-center:not(.no-photo) .cl-names, .esite-skin-leaf-oca .hv-cover .cl-names { justify-content: center; justify-items: center; }
.esite-skin-leaf-oca .hv-center:not(.no-photo) .cl-actions, .esite-skin-leaf-oca .hv-cover .cl-actions { justify-content: center; }
.esite-skin-leaf-oca .hv-center:not(.no-photo) .cl-sub, .esite-skin-leaf-oca .hv-cover .cl-sub { margin-inline: auto; text-align: center; }

/* ---- sections: flush left on a hairline, a sprig at the start of each heading ---- */
.esite-skin-leaf-oca .ss-scope:not([data-type="hero"]):not([data-type="none"]) .ss-wrap { text-align: left; }
.esite-skin-leaf-oca .ss-scope:not([data-type="hero"]):not([data-type="none"]) :is(.ss-h, .ss-p, .ss-sub) { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; }
.esite-skin-leaf-oca .ss-scope[data-type="gifts"] .ss-wrap, .esite-skin-leaf-oca .ss-scope[data-type="gifts"] .ss-wrap > * { text-align: left !important; margin-left: 0 !important; justify-content: flex-start !important; }
.esite-skin-leaf-oca .ss-scope:not([data-type="hero"]):not([data-type="countdown"]):not([data-type="none"]) .ss-h { justify-content: flex-start; width: 100%; }
.esite-skin-leaf-oca .ss-scope:not([data-type="hero"]):not([data-type="countdown"]):not([data-type="none"]) .ss-h { display: flex; align-items: flex-end; gap: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--sk-line); }
.esite-skin-leaf-oca .ss-scope:not([data-type="hero"]):not([data-type="countdown"]):not([data-type="none"]) .ss-h::before { flex: none; width: 34px; height: 92px; margin: 0 !important; background-position: 50% 100%; }
.esite-skin-leaf-oca .ss-scope[data-type="schedule"]::before, .esite-skin-leaf-oca .ss-scope[data-type="faq"]::before { display: none; }
.esite-skin-leaf-oca .ss-scope[data-type="story"]::before { top: auto; bottom: 0; right: 3vw; width: clamp(90px, 9vw, 150px); aspect-ratio: 1 / 2.06; background: var(--sk-tulip, none) 50% 100% / contain no-repeat; }
.esite-skin-leaf-oca .ss-scope[data-type="story"]:has(.ss-story-img img)::before { display: none; }
.esite-skin-leaf-oca .faqv-wide .ss-faq-item, .esite-skin-leaf-oca .ss-faq-item { text-align: left; }
.esite-skin-leaf-oca .ss-closing::before { width: min(380px, 70vw); height: 220px; background: var(--sk-bouquet, none) 50% 100% / contain no-repeat; }

/* ---- countdown: a ruled ledger ---- */
.esite-skin-leaf-oca .ss-scope[data-type="countdown"]:has(.cdv-boxes) { background-color: var(--sk-sec-bg, var(--s-bg)); color: var(--s-text); }
.esite-skin-leaf-oca .cdv-boxes { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 0 clamp(24px, 5vw, 80px); width: min(1040px, 100%); margin: 0 auto; }
.esite-skin-leaf-oca .cdv-boxes .ss-h { margin: 0; padding-bottom: 18px; color: var(--s-text); font-size: clamp(1.75rem, 3vw, 2.5rem); text-align: left; }
.esite-skin-leaf-oca .cdv-boxes .ss-cd { justify-content: flex-start; width: 100%; border-top: 1px solid var(--sk-line); border-bottom: 1px solid var(--sk-line); }
.esite-skin-leaf-oca .cdv-boxes .cd-unit { flex: 1; flex-direction: column; gap: 8px; align-items: flex-start; padding: 18px 0 14px 18px; border: 0; background: none; color: var(--s-text); }
.esite-skin-leaf-oca .cdv-boxes .cd-unit + .cd-unit { border-left: 1px solid var(--sk-line); }
.esite-skin-leaf-oca .ss-countdown .cd-n { font-family: var(--s-fhead) !important; font-style: italic; font-weight: 400; font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 1; color: var(--s-text); }
.esite-skin-leaf-oca .cdv-boxes .cd-l { color: var(--s-accent); text-transform: uppercase; letter-spacing: .18em; font-size: .6875rem; }

/* ---- the day: times in italic on the hairlines ---- */
.esite-skin-leaf-oca .schv-wide .ss-tl-time { font-family: var(--s-fhead); font-style: italic; font-size: 1.375rem; }

/* ---- registry: words flush left ---- */
.esite-skin-leaf-oca .gftv-panel .ss-wrap { align-items: flex-start; aspect-ratio: auto; width: min(1040px, 100%); padding: 0; background: none; }
.esite-skin-leaf-oca .gftv-panel .ss-h::before { display: block !important; }

/* ---- RSVP: the side branch climbs the screen's edge ---- */
.esite-skin-leaf-oca .ss-scope[data-type="rsvp"]::before { top: 0; bottom: 0; right: 0; width: clamp(160px, 22vw, 380px); height: auto; aspect-ratio: auto; background: var(--sk-side, none) 100% 50% / contain no-repeat; }
.esite-skin-leaf-oca .ss-scope[data-type="rsvp"]::after { display: none; }
.esite-skin-leaf-oca .ss-rsvp .ss-wrap { max-width: 640px; margin-left: max(0px, calc((100% - 1040px) / 2)); }
.esite-skin-leaf-oca .ss-rsvp-form { margin: 8px 0 0; padding: 36px; outline: 1px solid var(--sk-line); outline-offset: 10px; box-shadow: none; }

@media (max-width: 900px) {
  .esite-skin-leaf-oca { --sk-arch-w: min(62vw, 300px); --sk-arch-h: calc(var(--sk-arch-w) * 1.25); }
  .esite-skin-leaf-oca .ss-hero.hs-classic.no-photo { padding: 96px 22px 44px; }
  .esite-skin-leaf-oca .hs-classic .cl-panel .h-kicker { font-size: .6875rem; letter-spacing: .14em; }
  .esite-skin-leaf-oca .hs-classic .cl-facts b { font-size: .9375rem; letter-spacing: .03em; }
  .esite-skin-leaf-oca .hs-classic .cl-sub { font-size: .75rem; letter-spacing: .1em; }
  .esite-skin-leaf-oca .hs-classic.no-photo .cl-panel { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 40px 24px calc(var(--sk-arch-h) + 60px); background-size: auto 60%, auto; background-position: 0 18%, 0 0; }
  .esite-skin-leaf-oca .hs-classic.no-photo .cl-panel::before { inset: auto calc(50% - var(--sk-arch-w) / 2) 0 auto; }
  .esite-skin-leaf-oca .hs-classic.no-photo .cl-panel::after { inset: auto calc(50% - var(--sk-arch-w) * .74) 18px auto; height: calc(var(--sk-arch-h) + 50px); }
  .esite-skin-leaf-oca .hs-classic.no-photo .cl-text { max-width: 100%; }
  .esite-skin-leaf-oca .hs-classic .cl-names { font-size: calc(3.6rem * var(--s-hscale, 1)); }
  .esite-skin-leaf-oca .hs-classic:not(.no-photo):not(.hv-cover) .cl-panel { padding: 100px 26px 60px; }
  .esite-skin-leaf-oca .hs-classic:not(.no-photo):not(.hv-cover) .cl-visual::after { inset: auto auto -30px -30px; width: 90px; height: 180px; }
  .esite-skin-leaf-oca .ss-scope[data-type="story"]::before { display: none; }
  .esite-skin-leaf-oca .cdv-boxes { grid-template-columns: minmax(0, 1fr); }
  .esite-skin-leaf-oca .ss-scope[data-type="rsvp"]::before { width: 110px; opacity: .55; }
}
@media (max-width: 640px) {
  .esite-skin-leaf-oca .cdv-boxes .ss-cd { flex-wrap: nowrap; }
  .esite-skin-leaf-oca .cdv-boxes .cd-unit { padding: 14px 0 10px 10px; }
  .esite-skin-leaf-oca .ss-rsvp-form { padding: 22px; }
}