/* ==========================================================================
   CEREMONO — Event site (page builder) public styles.
   Scoped under .esite; driven by --s-* theme variables (set inline per event).
   ========================================================================== */
.esite { background: var(--s-bg); color: var(--s-text); font-family: var(--s-fbody); line-height: 1.6; -webkit-font-smoothing: antialiased; }
.esite * { box-sizing: border-box; }
.esite img { max-width: 100%; display: block; }
.esite a { color: inherit; }

.esite .ss { padding: 88px 24px; }
/* per-section wrapper paints the (overridable) background so a section bg colour/image actually shows */
.esite .ss-scope { background: var(--s-bg); background-size: cover; background-position: center; background-repeat: no-repeat; }
.esite .ss-scope.ss-hasbg .ss { background: transparent; }
.esite .ss-wrap { max-width: 760px; margin: 0 auto; }
.esite .ss-center { text-align: center; }

/* headings with a small centered accent rule */
.esite .ss-h { font-family: var(--s-fhead); font-size: clamp(1.7rem, 4.2vw, 2.6rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 26px; position: relative; }
.esite .ss-center .ss-h::after { content: ""; display: block; width: 52px; height: 2px; background: var(--s-accent); opacity: 0.7; margin: 16px auto 0; border-radius: 2px; }
.esite .ss-p { color: var(--s-muted); font-size: 1.0625rem; line-height: 1.75; }

/* buttons */
.esite .ss-btn { display: inline-block; margin-top: 26px; padding: 14px 36px; border-radius: 9999px; background: var(--s-accent); color: var(--s-on-accent); font-weight: 600; text-decoration: none; letter-spacing: 0.02em; transition: transform .15s ease, opacity .15s ease; }
.esite .ss-btn:hover { transform: translateY(-1px); opacity: 0.94; }

/* soft-tinted "panel" sections for rhythm */
.esite .ss-story, .esite .ss-gifts, .esite .ss-faq, .esite .ss-schedule { background: var(--s-bg-alt); }

/* ---- HERO ---- */
.esite .ss-hero { position: relative; min-height: 92vh; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; padding: 100px 24px; }
/* Decorative / card heroes shouldn't float in a full-screen void — size them to content. */
.esite .ss-hero.hs-arch, .esite .ss-hero.hs-frame, .esite .ss-hero.hs-monogram,
.esite .ss-hero.hs-deco, .esite .ss-hero.hs-garland, .esite .ss-hero.hs-poster,
.esite .ss-hero.hs-spotlight, .esite .ss-hero.hs-left, .esite .ss-hero.hs-bigdate,
.esite .ss-hero.hs-stamp, .esite .ss-hero.hs-gradient, .esite .ss-hero.hs-circle,
.esite .ss-hero.hs-typo, .esite .ss-hero.hs-ticket { min-height: 0; }
.esite .ss-hero.hs-poster { padding-top: 110px; padding-bottom: 110px; }
.esite .ss-hero-inner { max-width: 820px; }
.esite .ss-hero-inner.on-cover { color: var(--s-cover-text, #fff); text-shadow: 0 1px 30px rgba(0,0,0,.25); }
/* hero titles are <h1>; override style.css's global "h1 { color: var(--text) }" so they
   inherit their (themed/overridden) parent colour instead of the site text colour. */
.esite .ss-hero-title, .esite .bill-title, .esite .fb-title,
.esite .left-title, .esite .bd-title, .esite .ticket-title { color: inherit; }
.esite .ss-hero-occ { display: inline-flex; align-items: center; gap: 14px; text-transform: uppercase; letter-spacing: 0.28em; font-size: 0.7rem; font-weight: 700; opacity: 0.9; margin-bottom: 20px; }
.esite .ss-hero-occ::before, .esite .ss-hero-occ::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.6; }
.esite .ss-hero-title { font-family: var(--s-fhead); font-size: clamp(2.8rem, 8.5vw, 5.6rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.02em; margin: 0; }
.esite .ss-hero-sub { font-size: 1.2rem; margin-top: 18px; opacity: 0.92; font-family: var(--s-fhead); font-style: italic; }
.esite .ss-hero-meta { margin-top: 10px; font-size: 1.05rem; opacity: 0.92; letter-spacing: 0.01em; }
.esite .ss-hero-inner.on-cover .ss-btn { background: #fff; color: #161616; }

/* ===== SHARED HERO TEXT ATOMS (used by all invitation layouts) ===== */
.esite .h-kicker { text-transform: uppercase; letter-spacing: 0.32em; font-size: 0.72rem; font-weight: 600; color: var(--s-muted); margin-bottom: 16px; }
.esite .h-names { font-weight: 500; font-size: clamp(2.6rem, 10vw, 5rem); line-height: 1.04; color: var(--s-text); margin: 0; }
.esite .h-names.script { font-family: var(--s-fscript); font-size: clamp(3rem, 12vw, 5.6rem); line-height: 1.0; }
.esite .h-sub { font-family: var(--s-fhead); font-style: italic; font-size: 1.15rem; color: var(--s-muted); margin-top: 8px; }
.esite .h-note { text-transform: uppercase; letter-spacing: 0.13em; font-size: 0.8rem; line-height: 1.95; color: var(--s-text); margin: 22px auto; max-width: 380px; }
.esite .h-rule { color: var(--s-accent); font-size: 1.05rem; margin: 16px 0; opacity: 0.85; }
.esite .h-when { text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.84rem; font-weight: 600; color: var(--s-text); margin-top: 6px; }
.esite .h-where { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; color: var(--s-muted); line-height: 1.75; margin-top: 12px; }
.esite .h-foot { text-transform: uppercase; letter-spacing: 0.13em; font-size: 0.74rem; color: var(--s-muted); margin-top: 18px; }
.esite .ss-hero .ss-btn { margin-top: 28px; }

/* ===== STYLE: ARCH — white arched card, eucalyptus corners ===== */
.esite .ss-hero.hs-arch { background: var(--s-band); padding: 64px 18px; }
.esite .invite-card { position: relative; width: 100%; max-width: 560px; background: var(--s-bg); border-radius: 280px 280px 16px 16px; padding: 104px 52px 60px; text-align: center; box-shadow: 0 40px 90px -45px rgba(0,0,0,.5); }
.esite .invite-frame { position: absolute; inset: 18px; border: 1px solid var(--s-soft); border-radius: 264px 264px 8px 8px; pointer-events: none; }
.esite .invite-inner { position: relative; z-index: 2; }
.esite .invite-sprig { position: absolute; width: 132px; height: auto; color: var(--s-accent); z-index: 3; }
.esite .invite-sprig.sp-tl { top: -14px; left: -16px; transform: rotate(18deg); }
.esite .invite-sprig.sp-tr { top: -14px; right: -16px; transform: scaleX(-1) rotate(18deg); }
.esite .invite-sprig.sp-bl { bottom: -18px; left: -14px; transform: scaleY(-1) rotate(18deg); }
.esite .invite-sprig.sp-br { bottom: -18px; right: -14px; transform: scale(-1,-1) rotate(18deg); }
@media (max-width: 560px) {
  .esite .invite-card { padding: 84px 26px 48px; border-radius: 200px 200px 14px 14px; }
  .esite .invite-frame { inset: 12px; border-radius: 190px 190px 8px 8px; }
  .esite .invite-sprig { width: 92px; }
}

/* ===== STYLE: FRAME — bordered tinted page, large opposite-corner florals (no card) ===== */
.esite .ss-hero.hs-frame { background: var(--s-band); padding: 40px 22px; }
.esite .frame-box { position: relative; width: 100%; max-width: 680px; min-height: min(80vh, 660px); display: flex; align-items: center; justify-content: center; padding: 70px 48px; }
.esite .frame-rule { position: absolute; inset: 0; border: 1px solid var(--s-accent); opacity: 0.55; }
.esite .frame-rule::after { content: ""; position: absolute; inset: 9px; border: 1px solid var(--s-accent); opacity: 0.4; }
.esite .frame-inner { position: relative; z-index: 2; text-align: center; }
.esite .hs-frame .invite-sprig { position: absolute; width: 168px; color: var(--s-accent); z-index: 1; }
.esite .hs-frame .fr-tl { top: -26px; left: -26px; transform: rotate(22deg); }
.esite .hs-frame .fr-br { bottom: -30px; right: -26px; transform: scale(-1,-1) rotate(22deg); }
.esite .hs-frame .h-names { color: var(--s-text); }

/* ===== STYLE: MONOGRAM — minimalist, initials ring, stacked serif caps (no botanical) ===== */
.esite .ss-hero.hs-monogram { background: var(--s-bg); padding: 80px 24px; }
.esite .mono-inner { max-width: 560px; text-align: center; }
.esite .mono-ring { width: 78px; height: 78px; border: 1px solid var(--s-accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 26px; font-family: var(--s-fhead); font-size: 1.5rem; letter-spacing: 0.08em; color: var(--s-accent); }
.esite .mono-names { font-family: var(--s-fhead); font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; font-size: clamp(1.8rem, 5vw, 3rem); line-height: 1.5; margin: 0; color: var(--s-text); }
.esite .mono-names .amp { display: block; font-family: var(--s-fscript); text-transform: none; letter-spacing: 0; font-size: 1.8rem; color: var(--s-accent); margin: 4px 0; }
.esite .mono-line { width: 64px; height: 1px; background: var(--s-accent); opacity: 0.6; margin: 26px auto; }

/* ===== STYLE: DECO — art-deco gold geometry, uppercase display ===== */
.esite .ss-hero.hs-deco { background: var(--s-band); padding: 56px 22px; }
.esite .deco-box { position: relative; width: 100%; max-width: 600px; background: var(--s-bg); padding: 60px 44px; text-align: center; border: 2px solid var(--s-accent); outline: 6px solid var(--s-bg); box-shadow: 0 0 0 7px var(--s-accent); }
.esite .deco-motif { width: 150px; height: auto; color: var(--s-accent); margin: 0 auto; display: block; }
.esite .deco-motif.bot { transform: scaleY(-1); margin-top: 22px; }
.esite .deco-names { font-family: var(--s-fhead); text-transform: uppercase; letter-spacing: 0.18em; font-weight: 600; font-size: clamp(1.9rem, 6vw, 3.2rem); line-height: 1.1; margin: 14px 0; color: var(--s-text); }
.esite .deco-rule { width: 50px; height: 2px; background: var(--s-accent); margin: 12px auto; }

/* ===== STYLE: GARLAND — top botanical swag, script names ===== */
.esite .ss-hero.hs-garland { background: var(--s-band); padding: 0 22px 80px; display: block; }
.esite .hs-garland .garland { position: relative; height: 150px; display: flex; justify-content: center; overflow: hidden; }
.esite .hs-garland .invite-sprig { color: var(--s-accent); width: 150px; position: absolute; top: -10px; }
.esite .hs-garland .gl-l { right: 50%; transform-origin: bottom right; transform: rotate(108deg); }
.esite .hs-garland .gl-r { left: 50%; transform-origin: bottom left; transform: scaleX(-1) rotate(108deg); }
.esite .garland-inner { max-width: 560px; margin: 0 auto; text-align: center; padding-top: 12px; }

/* ===== STYLE: POSTER — bold full-colour typographic block ===== */
.esite .ss-hero.hs-poster { background: var(--s-band-bg, var(--s-accent)); color: var(--s-on-accent); }
.esite .poster-inner { max-width: 880px; text-align: center; }
.esite .ss-hero.hs-poster .h-kicker { color: var(--s-on-accent); opacity: 0.8; }
.esite .poster-names { font-family: var(--s-fhead); font-weight: 700; font-size: clamp(3rem, 13vw, 7rem); line-height: 0.98; letter-spacing: -0.02em; margin: 0; color: var(--s-on-accent); }
.esite .poster-sub { font-family: var(--s-fhead); font-style: italic; font-size: 1.3rem; margin-top: 16px; opacity: 0.92; }
.esite .poster-meta { margin-top: 26px; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.84rem; }
.esite .poster-meta .h-when, .esite .poster-meta .h-where, .esite .poster-meta .h-foot { color: var(--s-on-accent); }
.esite .ss-hero.hs-poster .ss-btn { background: var(--s-on-accent); color: var(--s-accent); }

/* ===== STYLE: SPLIT — full-height, photo on one side, content panel on the other ===== */
.esite .ss-hero.hs-split { padding: 0; min-height: 100vh; display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: stretch; }
.esite .hs-split .split-media { background-size: cover; background-position: center; }
.esite .hs-split .split-panel { display: flex; align-items: center; justify-content: center; padding: 64px 52px; background: var(--s-bg); }
.esite .hs-split .split-inner { max-width: 440px; text-align: left; }
.esite .hs-split .split-inner .h-names { color: var(--s-text); }
.esite .hs-split .split-inner .h-rule { margin-left: 0; }
.esite .hs-split .split-inner .h-when, .esite .hs-split .split-inner .h-where, .esite .hs-split .split-inner .h-foot { letter-spacing: 0.12em; }
.esite .hs-split.no-media { grid-template-columns: 1fr; }
@media (max-width: 860px) {
  .esite .ss-hero.hs-split { grid-template-columns: 1fr; min-height: auto; }
  .esite .hs-split .split-media { min-height: 48vh; }
  .esite .hs-split .split-panel { padding: 52px 26px; }
  .esite .hs-split .split-inner { text-align: center; margin: 0 auto; }
  .esite .hs-split .split-inner .h-rule { margin-left: auto; }
}

/* ===== STYLE: SPOTLIGHT — tinted band, framed photo card, title above ===== */
.esite .ss-hero.hs-spotlight { background: var(--s-band); }
.esite .hs-spotlight .spot-inner { max-width: 640px; text-align: center; }
.esite .hs-spotlight .spot-photo { margin: 30px auto 26px; border-radius: 18px; overflow: hidden; box-shadow: 0 44px 90px -42px rgba(0,0,0,.6); }
.esite .hs-spotlight .spot-photo img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.esite .hs-spotlight .h-names { color: var(--s-text); }

/* ===== STYLE: BILLBOARD — full-bleed photo, bottom-left mega title ===== */
.esite .ss-hero.hs-billboard { align-items: flex-end; justify-content: flex-start; background-size: cover; background-position: center; text-align: left; }
.esite .hs-billboard .bill-inner { max-width: 920px; color: var(--s-cover-text, #fff); text-shadow: 0 2px 34px rgba(0,0,0,.45); }
.esite .hs-billboard .bill-kicker { display: inline-flex; align-items: center; gap: 12px; text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.72rem; font-weight: 700; margin-bottom: 16px; }
.esite .hs-billboard .bill-kicker::before { content: ""; width: 30px; height: 2px; background: var(--s-accent); }
.esite .hs-billboard .bill-title { font-family: var(--s-fhead); font-weight: 700; font-size: clamp(3rem, 11vw, 7rem); line-height: 0.95; letter-spacing: -0.02em; margin: 0; }
.esite .hs-billboard .bill-sub { font-size: 1.25rem; margin-top: 14px; font-style: italic; font-family: var(--s-fhead); opacity: 0.95; }
.esite .hs-billboard .bill-meta { margin-top: 18px; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.84rem; opacity: 0.95; }
.esite .hs-billboard .bill-where { margin-top: 4px; opacity: 0.85; }
.esite .hs-billboard .ss-btn { background: #fff; color: #161616; }

/* ===== 10 ADDITIONAL HERO LAYOUTS ===== */
/* LEFT — left-aligned editorial, no image */
.esite .ss-hero.hs-left { justify-content: flex-start; text-align: left; padding: 110px 24px; }
.esite .hs-left .left-inner { max-width: 760px; }
.esite .hs-left .left-title { font-family: var(--s-fhead); font-weight: 600; font-size: clamp(2.6rem, 7vw, 5rem); line-height: 1.02; letter-spacing: -0.02em; margin: 0; }
.esite .hs-left .h-rule { margin-left: 0; }

/* BIGDATE — festival, the DATE is the hero */
.esite .ss-hero.hs-bigdate { background: var(--s-band); padding: 96px 24px; }
.esite .hs-bigdate .bd-inner { max-width: 820px; text-align: center; }
.esite .hs-bigdate .bd-title { font-family: var(--s-fhead); font-weight: 600; font-size: clamp(1.8rem, 4.5vw, 3rem); letter-spacing: -0.01em; margin: 0 0 18px; }
.esite .hs-bigdate .bd-date { font-family: var(--s-fhead); font-weight: 700; color: var(--s-accent); font-size: clamp(2rem, 6.5vw, 4.4rem); line-height: 1.05; letter-spacing: -0.01em; }

/* STAMP — dashed "postage stamp" card */
.esite .ss-hero.hs-stamp { background: var(--s-band); padding: 56px 22px; }
.esite .hs-stamp .stamp-box { width: 100%; max-width: 560px; background: var(--s-bg); padding: 16px; border: 2px dashed var(--s-accent); }
.esite .hs-stamp .stamp-inner { border: 1px solid var(--s-soft); padding: 48px 36px; text-align: center; }

/* SPLIT-RIGHT — reuse hs-split, image sits on the right */
.esite .ss-hero.hs-split-right { grid-template-columns: 0.95fr 1.05fr; }

/* FULLBOTTOM — full image, content anchored bottom-centre */
.esite .ss-hero.hs-fullbottom { align-items: flex-end; justify-content: center; text-align: center; background-size: cover; background-position: center; }
.esite .hs-fullbottom .fb-inner { max-width: 820px; color: var(--s-cover-text, #fff); text-shadow: 0 2px 30px rgba(0,0,0,.5); padding-bottom: 14px; }
.esite .hs-fullbottom .fb-kicker { text-transform: uppercase; letter-spacing: 0.28em; font-size: 0.72rem; font-weight: 700; margin-bottom: 14px; opacity: 0.9; }
.esite .hs-fullbottom .fb-title { font-family: var(--s-fhead); font-weight: 600; font-size: clamp(2.6rem, 8vw, 5.2rem); line-height: 1.02; margin: 0; }
.esite .hs-fullbottom .fb-sub { font-style: italic; font-family: var(--s-fhead); font-size: 1.2rem; margin-top: 14px; }
.esite .hs-fullbottom .fb-meta { margin-top: 8px; text-transform: uppercase; letter-spacing: 0.13em; font-size: 0.82rem; opacity: 0.95; }
.esite .hs-fullbottom .ss-btn { background: #fff; color: #161616; }

/* DUOTONE — image under an accent colour wash */
.esite .ss-hero.hs-duotone { background-size: cover; background-position: center; position: relative; }
.esite .hs-duotone .duo-tint { position: absolute; inset: 0; background: var(--s-accent); mix-blend-mode: multiply; opacity: 0.78; }
.esite .hs-duotone .ss-hero-inner { position: relative; z-index: 2; }

/* TICKET — ticket-stub with perforated divider */
.esite .ss-hero.hs-ticket { background: var(--s-band); padding: 60px 22px; }
.esite .hs-ticket .ticket { width: 100%; max-width: 720px; display: grid; grid-template-columns: 1fr 130px; background: var(--s-bg); box-shadow: 0 30px 70px -36px rgba(0,0,0,.5); }
.esite .hs-ticket .ticket-main { padding: 46px 42px; text-align: center; }
.esite .hs-ticket .ticket-title { font-family: var(--s-fhead); font-weight: 600; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.05; margin: 0 0 10px; }
.esite .hs-ticket .ticket-stub { border-left: 2px dashed var(--s-soft); background: var(--s-accent); color: var(--s-on-accent); display: flex; align-items: center; justify-content: center; }
.esite .hs-ticket .ticket-stub span { writing-mode: vertical-rl; transform: rotate(180deg); text-transform: uppercase; letter-spacing: 0.3em; font-weight: 700; font-size: 0.8rem; }
@media (max-width: 560px) { .esite .hs-ticket .ticket { grid-template-columns: 1fr; } .esite .hs-ticket .ticket-stub { border-left: none; border-top: 2px dashed var(--s-soft); padding: 16px; } .esite .hs-ticket .ticket-stub span { writing-mode: horizontal-tb; transform: none; } }

/* GRADIENT — accent gradient block, bold */
.esite .ss-hero.hs-gradient { background: linear-gradient(135deg, var(--s-band-bg, var(--s-accent)), color-mix(in srgb, var(--s-accent) 55%, #000)); color: var(--s-on-accent); padding: 120px 24px; }
.esite .hs-gradient .grad-inner { max-width: 860px; text-align: center; }
.esite .hs-gradient .grad-kicker { text-transform: uppercase; letter-spacing: 0.26em; font-size: 0.72rem; font-weight: 700; opacity: 0.85; margin-bottom: 14px; }
.esite .hs-gradient .grad-title { font-family: var(--s-fhead); font-weight: 700; font-size: clamp(2.8rem, 9vw, 6rem); line-height: 1; letter-spacing: -0.02em; margin: 0; color: var(--s-on-accent); }
.esite .hs-gradient .grad-sub { font-style: italic; font-family: var(--s-fhead); font-size: 1.3rem; margin-top: 14px; }
.esite .hs-gradient .grad-meta { margin-top: 22px; text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.84rem; }
.esite .hs-gradient .grad-meta .h-when, .esite .hs-gradient .grad-meta .h-where, .esite .hs-gradient .grad-meta .h-foot { color: var(--s-on-accent); }
.esite .hs-gradient .ss-btn { background: var(--s-on-accent); color: var(--s-accent); }

/* CIRCLE — circular framed photo, title below */
.esite .ss-hero.hs-circle { background: var(--s-band); padding: 80px 24px; }
.esite .hs-circle .circle-inner { max-width: 600px; text-align: center; }
.esite .hs-circle .circle-photo { width: clamp(180px, 40vw, 280px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; margin: 0 auto 26px; border: 6px solid var(--s-bg); box-shadow: 0 30px 60px -28px rgba(0,0,0,.5); }
.esite .hs-circle .circle-photo img { width: 100%; height: 100%; object-fit: cover; }

/* TYPO — oversized outlined typography */
.esite .ss-hero.hs-typo { padding: 110px 24px; }
.esite .hs-typo .typo-inner { max-width: 1000px; text-align: center; }
.esite .hs-typo .typo-title { font-family: var(--s-fhead); font-weight: 800; font-size: clamp(3rem, 15vw, 9rem); line-height: 0.92; letter-spacing: -0.03em; margin: 0; color: var(--s-accent); -webkit-text-stroke: 1px var(--s-accent); }
.esite .hs-typo .typo-sub { font-family: var(--s-fhead); font-style: italic; font-size: 1.3rem; margin-top: 16px; color: var(--s-muted); }
.esite .hs-typo .typo-meta { margin-top: 18px; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.84rem; }

/* ---- per-section spacing override (builder) ---- */
.esite .ss-pad-c .ss { padding-top: 48px; padding-bottom: 48px; }
.esite .ss-pad-s .ss { padding-top: 132px; padding-bottom: 132px; }

/* ---- COUNTDOWN ---- */
.esite .ss-countdown { text-align: center; }
.esite .ss-cd { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
.esite .cd-unit { min-width: 86px; padding: 18px 10px; border: 1px solid var(--s-soft); border-radius: 14px; background: var(--s-bg); }
.esite .cd-n { display: block; font-family: var(--s-fhead); font-size: 2.7rem; font-weight: 600; line-height: 1; color: var(--s-accent); }
.esite .cd-l { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--s-muted); margin-top: 8px; }

/* ---- STORY ---- */
.esite .ss-story-grid.has-img { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.esite .ss-story-img img { width: 100%; border-radius: 16px; object-fit: cover; aspect-ratio: 4/5; box-shadow: 0 24px 50px -24px rgba(0,0,0,.35); }
.esite .ss-story-text .ss-h::after { margin-left: 0; }

/* ---- SCHEDULE ---- */
.esite .ss-timeline { max-width: 540px; margin: 0 auto; }
.esite .ss-tl-item { display: grid; grid-template-columns: 130px 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--s-soft); }
.esite .ss-tl-item:last-child { border-bottom: none; }
.esite .ss-tl-time { font-weight: 700; color: var(--s-accent); font-family: var(--s-fhead); }
.esite .ss-tl-title { font-weight: 600; font-size: 1.05rem; }
.esite .ss-tl-desc { color: var(--s-muted); font-size: 0.9375rem; margin-top: 3px; }

/* ---- GALLERY ---- */
.esite .ss-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.esite .ss-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; transition: transform .25s ease; }
.esite .ss-grid img:hover { transform: scale(1.02); }

/* ---- LOCATION ---- */
.esite .ss-loc-venue { font-size: 1.35rem; font-weight: 600; margin-bottom: 4px; font-family: var(--s-fhead); }
.esite .ss-map { margin-top: 24px; border-radius: 16px; overflow: hidden; border: 1px solid var(--s-soft); box-shadow: 0 18px 40px -26px rgba(0,0,0,.4); }
.esite .ss-map iframe { width: 100%; height: 340px; border: 0; display: block; filter: grayscale(0.2); }

/* ---- FAQ ---- */
.esite .ss-faq-list { max-width: 620px; margin: 0 auto; }
.esite .ss-faq-item { padding: 20px 0; border-bottom: 1px solid var(--s-soft); }
.esite .ss-faq-item:last-child { border-bottom: none; }
.esite .ss-faq-q { font-weight: 600; margin-bottom: 6px; font-size: 1.05rem; }
.esite .ss-faq-a { color: var(--s-muted); line-height: 1.65; }

/* ---- GIFTS ---- */
.esite .ss-gifts .ss-p { max-width: 540px; margin-left: auto; margin-right: auto; }

/* ---- RSVP ---- (form embed brings its own .rsvp-embed styles) */
.esite .ss-rsvp { background: var(--s-bg); }

/* ---- in-context edit mode (builder preview) ---- */
.esite .ss-scope { position: relative; }
body.ss-editing .ss-scope { cursor: pointer; }
body.ss-editing .ss-edit-hover { outline: 2px dashed var(--s-accent, #6b7280); outline-offset: -8px; }
body.ss-editing [data-el] { cursor: pointer; }
body.ss-editing [data-el]:hover { outline: 1px dashed #2f6df6; outline-offset: 3px; }
body.ss-editing .ss-btn:hover { outline: 1px dashed #2f6df6; outline-offset: 3px; }
/* floating colour popover (Canva-style) */
.ssp { position: fixed; z-index: 9999; width: 228px; background: #fff; border: 1px solid #e3e3e6; border-radius: 12px; box-shadow: 0 20px 50px -16px rgba(0,0,0,.35); padding: 12px; font-family: Outfit, system-ui, sans-serif; }
.ssp-row { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.ssp-color { width: 34px; height: 30px; padding: 0; border: 1px solid #e3e3e6; border-radius: 7px; cursor: pointer; background: #fff; }
.ssp-lbl { flex: 1; font-size: 0.8rem; font-weight: 600; color: #333; }
.ssp-x { border: none; background: #f1f1f3; width: 24px; height: 24px; border-radius: 6px; cursor: pointer; font-size: 1rem; line-height: 1; color: #555; }
.ssp-sw { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.ssp-c { width: 100%; aspect-ratio: 1; border: 1px solid rgba(0,0,0,.12); border-radius: 6px; cursor: pointer; padding: 0; }
.ssp-c:hover { transform: scale(1.12); }
body.ss-editing .ss-edit-sel { outline: 2px solid #2f6df6; outline-offset: -8px; }
body.ss-editing .ss-edit-hover::before, body.ss-editing .ss-edit-sel::before {
  content: "Click to edit"; position: absolute; top: 8px; left: 8px; z-index: 60;
  background: #2f6df6; color: #fff; font: 600 11px/1 Outfit, sans-serif; letter-spacing: .04em;
  padding: 5px 9px; border-radius: 6px; pointer-events: none;
}
body.ss-editing .ss-edit-sel::before { content: "Editing"; }

/* ---- brand / preview bar ---- */
.esite .ss-brand { text-align: center; padding: 30px; font-size: 0.8125rem; color: var(--s-muted); border-top: 1px solid var(--s-soft); }
.esite .ss-brand a { color: var(--s-text); text-decoration: underline; }
.esite-preview-bar { position: sticky; top: 0; z-index: 50; background: #b45309; color: #fff; text-align: center; padding: 9px; font-size: 0.8125rem; }
.esite-preview-bar a { color: #fff; text-decoration: underline; }

/* ============================================================
   SECTION VARIANTS — distinct layouts per section type so two
   themes never look alike below the hero. Selected in the builder.
   ============================================================ */

/* COUNTDOWN ── minimal (borderless, big) · ribbon (accent band) */
.esite .cdv-minimal .ss-cd { gap: 30px; }
.esite .cdv-minimal .cd-unit { border: none; background: none; padding: 0 6px; }
.esite .cdv-minimal .cd-n { font-size: clamp(2.6rem, 7vw, 4rem); }
.esite .cdv-minimal .cd-l { opacity: 0.6; }
.esite .ss-countdown.cdv-ribbon { background: var(--s-band-bg, var(--s-accent)); color: var(--s-on-accent); }
.esite .cdv-ribbon .ss-h { color: var(--s-on-accent); }
.esite .cdv-ribbon .cd-unit { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); }
.esite .cdv-ribbon .cd-n { color: var(--s-on-accent); }
.esite .cdv-ribbon .cd-l { color: var(--s-on-accent); opacity: 0.8; }

/* SCHEDULE ── cards (grid) · rail (vertical line + dots) */
.esite .schv-cards .ss-timeline { max-width: 1000px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.esite .schv-cards .ss-tl-item { display: block; border: 1px solid var(--s-soft); border-radius: 14px; padding: 22px; background: var(--s-bg); }
.esite .schv-cards .ss-tl-time { margin-bottom: 8px; }
.esite .schv-rail .ss-timeline { position: relative; padding-left: 30px; max-width: 600px; }
.esite .schv-rail .ss-timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--s-soft); }
.esite .schv-rail .ss-tl-item { position: relative; display: block; padding: 4px 0 22px 6px; border: none; }
.esite .schv-rail .ss-tl-item::before { content: ""; position: absolute; left: -27px; top: 9px; width: 11px; height: 11px; border-radius: 50%; background: var(--s-accent); box-shadow: 0 0 0 4px var(--s-bg-alt); }
.esite .schv-rail .ss-tl-time { color: var(--s-accent); }

/* GALLERY ── masonry (columns) · strip (horizontal scroll) */
.esite .galv-masonry .ss-grid { display: block; column-count: 3; column-gap: 12px; }
.esite .galv-masonry .ss-grid img { width: 100%; aspect-ratio: auto; margin-bottom: 12px; break-inside: avoid; }
.esite .galv-strip .ss-grid { display: flex; grid-template-columns: none; gap: 14px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; }
.esite .galv-strip .ss-grid img { flex: 0 0 78%; max-width: 460px; aspect-ratio: 16/10; scroll-snap-align: center; }

/* STORY ── stacked (image on top, centered) · overlap (text card over image) */
.esite .stv-stacked .ss-story-grid.has-img { grid-template-columns: 1fr; max-width: 660px; text-align: center; }
.esite .stv-stacked .ss-story-img img { aspect-ratio: 16/9; }
.esite .stv-stacked .ss-story-text .ss-h::after { margin-left: auto; margin-right: auto; }
.esite .stv-overlap .ss-story-grid.has-img { grid-template-columns: 1fr; max-width: 820px; }
.esite .stv-overlap .ss-story-img img { aspect-ratio: 16/9; }
.esite .stv-overlap .ss-story-text { background: var(--s-bg); margin: -64px 24px 0; padding: 34px; border-radius: 18px; box-shadow: 0 36px 70px -34px rgba(0,0,0,.45); position: relative; z-index: 2; }

/* RSVP ── banner (full accent band) */
.esite .ss-rsvp.rsv-banner { background: var(--s-band-bg, var(--s-accent)); color: var(--s-on-accent); }
.esite .rsv-banner .ss-h, .esite .rsv-banner .ss-p { color: var(--s-on-accent); }

/* STATS ── animated counters row / bold dividers */
.esite .ss-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 26px; text-align: center; }
.esite .ss-stat-n { font-family: var(--s-fhead); font-size: clamp(2.4rem, 6vw, 3.8rem); font-weight: 700; color: var(--s-accent); line-height: 1; }
.esite .ss-stat-l { margin-top: 9px; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.74rem; color: var(--s-muted); }
.esite .statv-bold .ss-stat { border-left: 2px solid var(--s-soft); padding-left: 20px; text-align: left; }

/* CTA ── band (accent) · image (full-bleed) */
.esite .ss-cta { text-align: center; }
.esite .ss-cta.ctav-band { background: var(--s-band-bg, var(--s-accent)); color: var(--s-on-accent); }
.esite .ctav-band .ss-cta-h, .esite .ctav-band .ss-cta-kicker, .esite .ctav-band .ss-cta-p { color: var(--s-on-accent); }
.esite .ss-cta.has-img { background-size: cover; background-position: center; color: var(--s-cover-text, #fff); min-height: 46vh; display: flex; align-items: center; justify-content: center; }
.esite .ss-cta-inner { max-width: 700px; margin: 0 auto; }
.esite .ss-cta-kicker { text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.72rem; font-weight: 700; margin-bottom: 12px; opacity: 0.85; }
.esite .ss-cta-h { font-family: var(--s-fhead); font-size: clamp(2rem, 5.5vw, 3.4rem); font-weight: 600; line-height: 1.12; margin: 0; }
.esite .ss-cta-p { margin-top: 12px; font-size: 1.1rem; opacity: 0.92; }
.esite .ss-cta.has-img .ss-btn, .esite .ctav-band .ss-btn { background: #fff; color: #161616; }

/* ============================================================
   BOTANICAL DECORATIONS — accent-coloured line-art (SVG), always
   non-interactive. Extends the hero sprig/deco vocabulary into the
   content sections. Everything inherits --s-accent so each theme
   colours its own decorations; sizes/opacity tuned to stay subtle.
   ============================================================ */

/* corner botanical on the Story section (behind the content, very soft) */
.esite .ss-story { position: relative; overflow: hidden; }
.esite .ss-story > .ss-wrap { position: relative; z-index: 1; }
.esite .ss-corner { position: absolute; width: 150px; height: auto; color: var(--s-accent); opacity: 0.13; z-index: 0; pointer-events: none; }
.esite .ss-corner.ss-corner-tr { top: -34px; right: -40px; transform: scaleX(-1) rotate(64deg); transform-origin: top right; }

/* Schedule timeline: a small circled line-icon per moment (uniform weight) */
.esite .ss-tl-title { display: flex; align-items: center; gap: 11px; }
.esite .ss-tl-icon { width: 36px; height: 36px; flex: none; padding: 7px; border: 1px solid var(--s-soft); border-radius: 50%; color: var(--s-accent); background: var(--s-bg); }
.esite .schv-cards .ss-tl-title, .esite .schv-rail .ss-tl-title { justify-content: flex-start; }

/* Closing flourish above the brand line — a mirrored botanical pair + centre dot */
.esite .ss-flourish { display: flex; align-items: center; justify-content: center; gap: 2px; padding: 52px 20px 10px; color: var(--s-accent); pointer-events: none; }
.esite .ss-flourish .invite-sprig { width: 116px; height: auto; opacity: 0.5; }
.esite .ss-flourish .ss-fl-l { transform: rotate(108deg); }
.esite .ss-flourish .ss-fl-r { transform: scaleX(-1) rotate(108deg); }
.esite .ss-flourish .ss-fl-dot { align-self: center; width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--s-accent); opacity: 0.6; margin: 0 6px; }

@media (max-width: 760px) {
  .esite .ss { padding: 60px 20px; }
  .esite .ss-story-grid.has-img { grid-template-columns: 1fr; gap: 24px; }
  .esite .ss-tl-item { grid-template-columns: 92px 1fr; gap: 12px; }
  .esite .ss-corner { width: 84px; opacity: 0.1; }
  .esite .ss-tl-icon { width: 30px; height: 30px; padding: 6px; }
  .esite .ss-flourish .invite-sprig { width: 78px; }
  .esite .schv-cards .ss-tl-item, .esite .schv-rail .ss-tl-item { grid-template-columns: 1fr; }
  .esite .cd-unit { min-width: 68px; padding: 14px 8px; }
  .esite .cd-n { font-size: 2.1rem; }
  .esite .galv-masonry .ss-grid { column-count: 2; }
  .esite .stv-overlap .ss-story-text { margin: -40px 14px 0; padding: 24px; }
}

/* ==========================================================================
   LUXURY WEDDING INVITATION — editorial visual language (photo hero, airy
   countdown, rotated story photo, refined timeline, editorial gallery,
   sage botanicals, invitation closing). Appended so it layers over the base.
   ========================================================================== */
.esite { --inv-serif: var(--s-fhead); }
.esite .ss { padding: 96px 24px; }
.esite .ss-h { font-weight: 500; letter-spacing: 0; }

/* botanical decorations render in sage (accent stays gold for rules/buttons) */
.esite .ss-corner, .esite .ss-flourish, .esite .hs-invitation:not(.has-cover) .inv-sp { color: var(--s-botanical); }

/* ---------- HERO — full-bleed photographic invitation ---------- */
.esite .ss-hero.hs-invitation { position: relative; min-height: 94vh; display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center; color: #fff; text-align: center; padding: 92px 26px; overflow: hidden; }
.esite .hs-invitation.has-cover .inv-inner { text-shadow: 0 2px 34px rgba(0,0,0,.4); }
.esite .hs-invitation:not(.has-cover) { background: var(--s-band); color: var(--s-text); }
.esite .inv-inner { position: relative; z-index: 3; max-width: 680px; }
/* names are an <h1> — beat style.css's global "h1 { color: var(--text) }" so they show white on the photo */
.esite .inv-names, .esite .inv-names .inv-n, .esite .inv-amp { color: inherit; }
.esite .inv-kicker { display: inline-flex; align-items: center; gap: 16px; text-transform: uppercase; letter-spacing: .34em;
  font-family: var(--s-fbody); font-size: .72rem; font-weight: 500; opacity: .93; margin-bottom: 26px; }
.esite .inv-kicker::before, .esite .inv-kicker::after { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .6; }
.esite .inv-names { font-family: var(--inv-serif); font-weight: 500; font-size: clamp(3.2rem, 9vw, 6.4rem); line-height: 1.02;
  letter-spacing: .01em; margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 .28em; }
.esite .inv-amp { font-family: var(--s-fscript); font-weight: 400; font-size: 1.1em; line-height: .7; opacity: .95; }
.esite .inv-hr { width: 66px; height: 1px; background: currentColor; opacity: .5; margin: 28px auto; position: relative; }
.esite .inv-hr::before { content: ""; position: absolute; top: -3.5px; left: 50%; width: 8px; height: 8px; margin-left: -4px;
  border: 1px solid currentColor; border-radius: 50%; }
.esite .inv-sub { font-family: var(--s-fscript); font-size: clamp(1.7rem, 4.4vw, 2.6rem); opacity: .96; margin: -8px 0 20px; }
.esite .inv-meta { text-transform: uppercase; letter-spacing: .17em; font-size: .82rem; line-height: 2; font-family: var(--s-fbody); }
.esite .inv-where span { display: block; opacity: .82; letter-spacing: .1em; font-size: .72rem; margin-top: 2px; }
.esite .inv-btn.ss-btn { margin-top: 32px; background: transparent; border: 1px solid currentColor; color: inherit; border-radius: 0;
  text-transform: uppercase; letter-spacing: .24em; font-size: .74rem; font-weight: 500; padding: 15px 42px; }
.esite .inv-btn.ss-btn:hover { background: #fff; color: #1c1a15; opacity: 1; transform: none; }
.esite .hs-invitation .inv-sp { position: absolute; width: 172px; height: auto; color: rgba(255,255,255,.6); z-index: 2; pointer-events: none; }
.esite .inv-sp-tl { top: -30px; left: -24px; transform: rotate(22deg); }
.esite .inv-sp-tr { top: -30px; right: -24px; transform: scaleX(-1) rotate(22deg); }
.esite .inv-sp-bl { bottom: -34px; left: -24px; transform: scaleY(-1) rotate(22deg); }
.esite .inv-sp-br { bottom: -34px; right: -24px; transform: scale(-1,-1) rotate(22deg); }

/* ---------- COUNTDOWN — airy, borderless ---------- */
.esite .ss-countdown { background: var(--s-bg); }
.esite .ss-cd { gap: 0; align-items: stretch; }
.esite .ss-countdown .cd-unit { border: none; background: none; padding: 6px 30px; position: relative; min-width: 92px; }
.esite .ss-countdown .cd-unit + .cd-unit::before { content: ""; position: absolute; left: 0; top: 16%; bottom: 16%; width: 1px; background: var(--s-soft); }
.esite .ss-countdown .cd-n { font-family: var(--inv-serif); font-size: clamp(2.6rem, 6vw, 3.9rem); font-weight: 500; color: var(--s-text); }
.esite .ss-countdown .cd-l { letter-spacing: .2em; opacity: .7; }

/* ---------- STORY — big rotated paper-frame photo ---------- */
.esite .ss-story-grid.has-img { gap: 58px; }
.esite .ss-story-img img { border: 9px solid #fff; box-shadow: 0 34px 66px -32px rgba(0,0,0,.42); transform: rotate(-2.4deg); border-radius: 2px; }

/* ---------- SCHEDULE — refined, sage icons, gold times ---------- */
.esite .ss-schedule { background: var(--s-bg); }
.esite .ss-tl-item { border-color: var(--s-soft); padding: 22px 0; }
.esite .ss-tl-icon { border-color: var(--s-soft); color: var(--s-botanical); width: 38px; height: 38px; }
.esite .ss-tl-time { color: var(--s-accent); letter-spacing: .04em; font-weight: 600; }

/* ---------- GALLERY — editorial asymmetric grid ---------- */
.esite .galv-editorial .ss-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 200px; gap: 12px; }
.esite .galv-editorial .ss-grid img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; aspect-ratio: auto; }
.esite .galv-editorial .ss-grid img:first-child { grid-row: span 2; }
.esite .galv-editorial .ss-grid img:nth-child(4) { grid-column: span 2; }

/* ---------- VENUE — framed, softer ---------- */
.esite .ss-location { background: var(--s-bg); }
.esite .ss-map iframe { height: 300px; filter: grayscale(.35) contrast(.95); }
.esite .ss-dir.ss-btn { background: transparent; border: 1px solid var(--s-accent); color: var(--s-accent); border-radius: 0;
  text-transform: uppercase; letter-spacing: .2em; font-size: .72rem; padding: 13px 34px; }

/* ---------- GIFTS / FAQ — ivory, minimal (no grey blocks) ---------- */
.esite .ss-gifts, .esite .ss-faq { background: var(--s-bg); }
.esite .ss-gifts .ss-btn, .esite .ss-gifts a.ss-btn { border-radius: 0; text-transform: uppercase; letter-spacing: .2em; font-size: .74rem; }
.esite .ss-faq-item { border-color: var(--s-soft); }

/* ---------- CLOSING — the invitation's last page ---------- */
.esite .ss-closing { text-align: center; padding: 34px 24px 6px; background: var(--s-bg); }
.esite .ss-closing-names { font-family: var(--s-fscript); font-size: clamp(2.6rem, 6vw, 3.8rem); color: var(--s-accent); line-height: 1.1; }
.esite .ss-closing-line { text-transform: uppercase; letter-spacing: .3em; font-size: .76rem; color: var(--s-muted); margin-top: 12px; font-family: var(--s-fbody); }

@media (max-width: 760px) {
  .esite .ss { padding: 66px 22px; }
  .esite .hs-invitation .inv-sp { width: 108px; }
  .esite .inv-sp-bl, .esite .inv-sp-br { opacity: .55; }
  .esite .ss-countdown .cd-unit { padding: 6px 15px; min-width: 68px; }
  .esite .galv-editorial .ss-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
  .esite .galv-editorial .ss-grid img:first-child, .esite .galv-editorial .ss-grid img:nth-child(4) { grid-column: span 2; grid-row: auto; }
}

/* RSVP — progressive disclosure button matches the invitation button language */
.esite .ss-rsvp .ss-rsvp-open.ss-btn { border-radius: 0; text-transform: uppercase; letter-spacing: .24em; font-size: .76rem; padding: 16px 46px; }
.esite .ss-rsvp-form { margin-top: 30px; text-align: left; }

/* ==========================================================================
   RASTER DECORATION ENGINE — botanical/floral artwork (PNG/WebP) placed by
   position with scale/rotation/flip/opacity/z (inline transform). No SVG.
   Missing assets render an invisible slot (a hint only in the builder), never
   a bad procedural drawing.
   ========================================================================== */
/* transform-origin stays center so flipX/flipY mirror the art IN PLACE (a corner origin
   would flip it off-canvas and overflow:hidden would clip it). */
.esite .ss-decor { position: absolute; width: 240px; height: auto; z-index: 2; pointer-events: none; transform-origin: center; }
.esite .ss-decor-top-left     { top: 0; left: 0; }
.esite .ss-decor-top-right    { top: 0; right: 0; }
.esite .ss-decor-bottom-left  { bottom: 0; left: 0; }
.esite .ss-decor-bottom-right { bottom: 0; right: 0; }
.esite .ss-decor-left-center  { top: 50%; left: 0; }
.esite .ss-decor-right-center { top: 50%; right: 0; }
.esite .ss-decor-section-divider { position: static; display: block; width: 210px; height: auto; margin: 0 auto; }

/* per-section sizing */
.esite .hs-invitation .ss-decor { width: 265px; }
.esite .ss-story { position: relative; overflow: hidden; }
.esite .ss-story .ss-decor { width: 190px; opacity: .9; }

/* missing-asset slot: invisible in the published page; only hinted inside the builder */
.esite .ss-decor-missing { display: none; }
body.ss-editing .ss-decor-missing { display: block; width: 110px; height: 110px; min-height: 110px;
  border: 1px dashed var(--s-muted); border-radius: 6px; opacity: .5; background: transparent; }
body.ss-editing .ss-decor-missing::after { content: "asset: " attr(data-asset); position: absolute; inset: auto 4px 4px 4px;
  font: 500 9px/1.2 var(--s-fbody); color: var(--s-muted); text-align: center; }

/* ==========================================================================
   THEME: "boo" — Halloween baby-shower (spooky-sweet). Scoped under .esite-boo
   so it never leaks into other designs. Night-sky hero with moon + sparkle
   stars + a cute ghost (Lucide icons), playful serif, pumpkin accent.
   ========================================================================== */
.esite-boo .ss-hero.hs-boo { position: relative; min-height: 94vh; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 96px 26px; overflow: hidden;
  background: radial-gradient(125% 95% at 50% -5%, #3E2E5C 0%, #281C42 52%, #1A1330 100%); color: var(--s-text); }
.esite-boo .boo-inner { position: relative; z-index: 3; max-width: 680px; }
.esite-boo .boo-kicker { display: inline-flex; align-items: center; gap: 15px; text-transform: uppercase; letter-spacing: .34em;
  font-family: var(--s-fbody); font-size: .72rem; font-weight: 500; color: var(--s-accent); margin-bottom: 24px; }
.esite-boo .boo-kicker::before, .esite-boo .boo-kicker::after { content: ""; width: 30px; height: 1px; background: currentColor; opacity: .6; }
.esite-boo .boo-title { font-family: var(--s-fhead); font-weight: 500; font-size: clamp(2.8rem, 8vw, 5.4rem); line-height: 1.04;
  margin: 0; color: var(--s-text); }
.esite-boo .boo-word { font-family: var(--s-fscript); color: var(--s-accent); font-size: 1.24em; line-height: .7; padding: 0 .04em; }
.esite-boo .boo-sub { font-family: var(--s-fscript); font-size: clamp(1.7rem, 4.4vw, 2.5rem); color: var(--s-text); opacity: .95; margin: 6px 0 20px; }
.esite-boo .boo-meta { text-transform: uppercase; letter-spacing: .17em; font-size: .82rem; line-height: 2; font-family: var(--s-fbody); color: var(--s-text); }
.esite-boo .boo-where { opacity: .78; letter-spacing: .1em; font-size: .74rem; }
.esite-boo .boo-btn.ss-btn { margin-top: 30px; background: var(--s-accent); color: var(--s-on-accent); border-radius: 9999px;
  text-transform: uppercase; letter-spacing: .2em; font-size: .74rem; font-weight: 600; padding: 15px 40px; box-shadow: 0 14px 40px -14px var(--s-accent); }

/* night-sky star dust — pure CSS dots (no SVG icons); atmosphere behind the content */
.esite-boo .boo-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .85;
  background-repeat: no-repeat; background-image:
    radial-gradient(1.6px 1.6px at 18% 22%, #F3ECE0 45%, transparent 47%),
    radial-gradient(1.1px 1.1px at 70% 15%, #F3ECE0 45%, transparent 47%),
    radial-gradient(1.7px 1.7px at 45% 11%, #F6E6B8 45%, transparent 47%),
    radial-gradient(1.1px 1.1px at 85% 38%, #F3ECE0 45%, transparent 47%),
    radial-gradient(1.5px 1.5px at 62% 28%, #F6E6B8 45%, transparent 47%),
    radial-gradient(1.1px 1.1px at 33% 33%, #F3ECE0 45%, transparent 47%),
    radial-gradient(1.3px 1.3px at 78% 55%, #F3ECE0 45%, transparent 47%); }
/* raster pumpkin garland in opposite corners (bottom-left natural + top-right mirrored) */
.esite-boo .hs-boo .ss-decor { width: 360px; z-index: 1; }

/* scoped section touches — pumpkin accents, sparkle heading dots, cozy timeline */
.esite-boo .ss-tl-icon { color: var(--s-accent); border-color: var(--s-soft); }
.esite-boo .ss-tl-time { color: var(--s-accent); }
.esite-boo .ss-countdown .cd-n { color: var(--s-accent); }
.esite-boo .ss-story, .esite-boo .ss-gifts, .esite-boo .ss-faq, .esite-boo .ss-schedule,
.esite-boo .ss-countdown, .esite-boo .ss-location, .esite-boo .ss-rsvp { background: var(--s-bg); }
.esite-boo .ss-scope:nth-child(even) .ss { background: var(--s-bg-alt); }
.esite-boo .ss-closing-names { font-family: var(--s-fscript); }
.esite-boo .ss-brand { border-top-color: var(--s-soft); }

@media (max-width: 760px) {
  .esite-boo .hs-boo .ss-decor { width: 200px; }
}

/* Section headings must use the THEME text colour, not style.css's global h2 { color: var(--text) }
   (that global made every .ss-h render in the site's dark ink — invisible on dark themes like boo). */
.esite .ss-h { color: var(--s-text); }
/* Dark-friendly map frame so an unloaded/late map doesn't flash a bright rectangle on dark themes. */
.esite .ss-map { background: var(--s-bg-alt); }

/* ==========================================================================
   THEME: "atelier" — editorial wedding (ivory / champagne gold / sage).
   Photo hero inside a fine gold double frame, dot-rule headings, a horizontal
   "big day" timeline, paper-framed story photo. Scoped under .esite-atelier.
   Botanical corners come from raster slots (wedding-corner-01) when provided.
   ========================================================================== */
.esite-atelier { --at-line: color-mix(in srgb, var(--s-accent) 45%, transparent); }
.esite-atelier .ss { padding: 104px 24px; }

/* hero — fine double frame over the photo */
.esite-atelier .hs-invitation::before,
.esite-atelier .hs-invitation::after { content: ""; position: absolute; pointer-events: none; z-index: 2; }
.esite-atelier .hs-invitation::before { inset: 26px; border: 1px solid rgba(255,255,255,.42); }
.esite-atelier .hs-invitation::after  { inset: 34px; border: 1px solid rgba(255,255,255,.22); }
.esite-atelier .hs-invitation:not(.has-cover)::before { border-color: var(--at-line); }
.esite-atelier .hs-invitation:not(.has-cover)::after  { border-color: color-mix(in srgb, var(--s-accent) 22%, transparent); }
.esite-atelier .inv-names { font-weight: 400; letter-spacing: .02em; }
.esite-atelier .inv-sub { font-family: var(--s-fhead); font-style: italic; font-size: clamp(1.15rem, 2.4vw, 1.45rem); margin: -4px 0 18px; letter-spacing: .02em; }

/* headings — serif, light, with a hairline + centre dot (pure CSS) */
.esite-atelier .ss-h { font-weight: 400; font-size: clamp(2rem, 4.6vw, 3rem); letter-spacing: .01em; }
.esite-atelier .ss-center .ss-h::after,
.esite-atelier .ss-story-text .ss-h::after {
  content: ""; display: block; width: 96px; height: 9px; margin: 18px auto 0; opacity: 1; border-radius: 0;
  background: radial-gradient(circle, var(--s-accent) 2.4px, transparent 3px) center / 9px 9px no-repeat,
              linear-gradient(var(--at-line), var(--at-line)) center / 100% 1px no-repeat; }
.esite-atelier .ss-story-text .ss-h::after { margin-left: 0; }
.esite-atelier .ss-p { font-size: 1.05rem; line-height: 1.85; }

/* story — photo on paper with an offset gold hairline */
.esite-atelier .ss-story { background: var(--s-bg-alt); }
.esite-atelier .ss-story-img { position: relative; }
.esite-atelier .ss-story-img::after { content: ""; position: absolute; inset: 14px -14px -14px 14px; border: 1px solid var(--at-line);
  transform: rotate(-2.4deg); z-index: -1; pointer-events: none; }
.esite-atelier .ss-story-grid.has-img { position: relative; z-index: 0; }

/* countdown — quiet numerals */
.esite-atelier .ss-countdown .cd-n { font-weight: 400; color: var(--s-text); }
.esite-atelier .ss-countdown .cd-l { color: var(--s-accent); opacity: 1; letter-spacing: .24em; }

/* the big day — horizontal on desktop: icon → time → title, joined by a gold line */
@media (min-width: 761px) {
  .esite-atelier .ss-schedule .ss-timeline { max-width: 940px; position: relative; display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 12px; }
  .esite-atelier .ss-schedule .ss-timeline::before { content: ""; position: absolute; top: 30px; left: 11%; right: 11%; height: 1px;
    background: repeating-linear-gradient(90deg, var(--at-line) 0 6px, transparent 6px 11px); }
  .esite-atelier .ss-tl-item { display: flex; flex-direction: column; align-items: center; text-align: center; border: none; padding: 0; gap: 0; }
  .esite-atelier .ss-tl-body, .esite-atelier .ss-tl-title { display: contents; }
  .esite-atelier .ss-tl-icon { order: 0; position: relative; z-index: 1; width: 60px; height: 60px; padding: 15px; margin-bottom: 18px;
    border: 1px solid var(--at-line); background: var(--s-bg); color: var(--s-accent); }
  .esite-atelier .ss-tl-time { order: 1; font-family: var(--s-fhead); font-size: 1.45rem; font-weight: 400; color: var(--s-text); letter-spacing: 0; }
  .esite-atelier .ss-tl-title > span { order: 2; margin-top: 4px; text-transform: uppercase; letter-spacing: .2em; font-size: .7rem; font-weight: 600; color: var(--s-accent); }
  .esite-atelier .ss-tl-desc { order: 3; margin-top: 8px; font-size: .86rem; max-width: 190px; }
}

/* rsvp — framed card on a soft band */
.esite-atelier .ss-rsvp { background: var(--s-bg-alt); }
.esite-atelier .ss-rsvp .ss-wrap { max-width: 640px; background: var(--s-bg); padding: 64px 40px; position: relative; }
.esite-atelier .ss-rsvp .ss-wrap::before { content: ""; position: absolute; inset: 10px; border: 1px solid var(--at-line); pointer-events: none; }
.esite-atelier .ss-rsvp .ss-rsvp-open.ss-btn { background: var(--s-accent); color: var(--s-on-accent); }

/* gifts / location — quiet outline buttons */
.esite-atelier .ss-gifts .ss-btn, .esite-atelier .ss-dir.ss-btn { background: transparent; border: 1px solid var(--s-accent); color: var(--s-accent); }

/* closing */
.esite-atelier .ss-closing { padding: 72px 24px 20px; }
.esite-atelier .ss-closing-names { font-size: clamp(3rem, 7vw, 4.4rem); }

@media (max-width: 760px) {
  .esite-atelier .ss { padding: 72px 20px; }
  .esite-atelier .hs-invitation::before { inset: 14px; }
  .esite-atelier .hs-invitation::after  { inset: 20px; }
  .esite-atelier .ss-rsvp .ss-wrap { padding: 48px 22px; }
}
@media (max-width: 480px) {
  .esite .inv-kicker { letter-spacing: .2em; font-size: .64rem; gap: 10px; }
  .esite .inv-kicker::before, .esite .inv-kicker::after { width: 18px; }
}

/* atelier — photo-free hero: an ivory stationery card (the default; a photo is optional) */
.esite-atelier .ss-hero.hs-invitation:not(.has-cover) {
  background: radial-gradient(120% 80% at 50% 0%, #FFFDF8 0%, var(--s-bg) 60%, var(--s-bg-alt) 100%);
  color: var(--s-text); min-height: 92vh; }
.esite-atelier .hs-invitation:not(.has-cover) .inv-inner { text-shadow: none; max-width: 720px; }
.esite-atelier .hs-invitation:not(.has-cover) .inv-kicker { color: var(--s-accent); opacity: 1; }
.esite-atelier .hs-invitation:not(.has-cover) .inv-names { color: var(--s-text); font-size: clamp(3.4rem, 9.5vw, 7rem); }
.esite-atelier .hs-invitation:not(.has-cover) .inv-amp { color: var(--s-accent); opacity: 1; }
.esite-atelier .hs-invitation:not(.has-cover) .inv-hr { color: var(--s-accent); opacity: .8; }
.esite-atelier .hs-invitation:not(.has-cover) .inv-sub { color: var(--s-muted); }
.esite-atelier .hs-invitation:not(.has-cover) .inv-meta { color: var(--s-text); }
.esite-atelier .hs-invitation:not(.has-cover) .inv-where span { color: var(--s-muted); opacity: 1; }
.esite-atelier .hs-invitation:not(.has-cover) .inv-btn.ss-btn { border-color: var(--s-accent); color: var(--s-accent); }
.esite-atelier .hs-invitation:not(.has-cover) .inv-btn.ss-btn:hover { background: var(--s-accent); color: var(--s-on-accent); }
/* story without a photo: a centred editorial note */
.esite-atelier .ss-story-grid:not(.has-img) { max-width: 620px; text-align: center; }
.esite-atelier .ss-story-grid:not(.has-img) .ss-h::after { margin-left: auto; margin-right: auto; }
.esite-atelier .ss-story-grid:not(.has-img) .ss-p { font-family: var(--s-fhead); font-size: 1.35rem; line-height: 1.7; font-style: italic; color: var(--s-text); }