/* String Lights Supper (other): design motion on top of assets/scenes/scenes.css.
   Plain rules = the rest/final state for reduced motion, the editor and the still render. For the hero the still is
   frame 0, so what is not there yet at frame 0 (lit bulbs, fireflies, the warm light on the table) is plain-hidden
   and only turned on by the live stage. */

/* Bulbs (and the table's warm light) switch on once the hero is live; at rest they are off. */
.sc-piece.sc-string_lights [data-sl=on]{opacity:0}
.sc-js .sc-piece.sc-string_lights.sc-in [data-sl=on]{animation:sl-on var(--d,560ms) cubic-bezier(.23,1,.32,1) var(--t,0ms) both}
@keyframes sl-on{from{opacity:0}to{opacity:1}}

/* Strings in a breeze: a horizontal shear about each string's chord, so both ends stay on their poles while the
   sag and the hanging bulbs swing (--sa/--sb precomputed per string by the generator). Pendulum timing. */
.sc-js .sc-piece.sc-string_lights.sc-in [data-sl=sway]{animation:sl-sway var(--p,8s) linear var(--t,0ms) infinite}
@keyframes sl-sway{
  0%{transform:scaleX(1) skewX(0deg);animation-timing-function:cubic-bezier(.33,.66,.66,1)}
  25%{transform:scaleX(var(--sa1,1)) skewX(var(--sb1,0deg));animation-timing-function:cubic-bezier(.33,0,.66,.33)}
  50%{transform:scaleX(1) skewX(0deg);animation-timing-function:cubic-bezier(.33,.66,.66,1)}
  75%{transform:scaleX(var(--sa2,1)) skewX(var(--sb2,0deg));animation-timing-function:cubic-bezier(.33,0,.66,.33)}
  100%{transform:scaleX(1) skewX(0deg)}}

/* Fireflies: not there at rest; they fade in and wander (x and y on different periods, so the path never repeats
   exactly), glowing and dimming slowly. Offsets are % of their own box, so they scale with the stage. */
.sc-piece.sc-string_lights [data-sl=fly]{opacity:0}
.sc-js .sc-piece.sc-string_lights.sc-in [data-sl=fly]{animation:sl-fx calc(var(--p,12s) * .61) ease-in-out var(--t,0ms) infinite alternate both,
  sl-fy calc(var(--p,12s) * .43) ease-in-out var(--t,0ms) infinite alternate both,sl-fo var(--p,12s) ease-in-out var(--t,0ms) infinite both}
@keyframes sl-fx{from{translate:0 0}to{translate:calc(var(--fx,1) * 260%) 0}}
@keyframes sl-fy{from{transform:none}to{transform:translateY(-150%)}}
@keyframes sl-fo{0%{opacity:0}18%{opacity:.95}40%{opacity:.25}58%{opacity:.9}82%{opacity:.5}100%{opacity:0}}

/* loops pause off screen (the kit pauses [data-a]; these are the design's own). Scoped to the PIECE: the body
   carries .sc-string_lights too and never gets .sc-run. */
.sc-js .sc-piece.sc-string_lights:not(.sc-run) [data-sl]{animation-play-state:paused!important}

/* Hero text: the drawn dusk sky carries the indigo title on its own (at least 4.9:1 behind the kicker, more lower
   down), so over the drawn stage the studio's milky top wash becomes a soft haze behind the words. Only when the
   stage is there (a couple's own photo keeps the full wash: the piece is never inserted over it). */
body.sc-string_lights.es-studio-v2 .sa-hero .sc-hero+.sa-hero-overlay{background:radial-gradient(ellipse 80% 27% at 50% 21%,rgba(255,251,245,.36),rgba(255,251,245,0) 72%)}

/* The design's faces (SPEC): EB Garamond 600 italic for the Latin title; Reem Kufi 600 / Frank Ruhl Libre 700 upright
   for ar/he (no synthetic italic on Arabic or Hebrew). Colours all come from the page's own variables (--paper, --ink,
   --ivory, and --es-accent, which follows the couple's title colour), so Colours & type wins everywhere; the italic
   yields to a couple's own font style through --cz-font-style (unset: the design italic). */
html:not([dir=rtl]) body.sc-string_lights.es-studio-v2 #saHeroOverlay .sa-hero-name{font-style:var(--cz-font-style,italic);font-weight:600;letter-spacing:-.01em}
/* Colours & type: the hero name wears the couple's title colour when they chose one (untouched: the hero ink, as before) */
body.sc-string_lights.es-studio-v2 #saHeroOverlay .sa-hero-name{color:var(--cz-title,var(--es-hero-ink,#2B2F4C))}
html[dir=rtl] body.sc-string_lights.es-studio-v2 #saHeroOverlay .sa-hero-name{font-weight:600}
html[dir=rtl][lang=he] body.sc-string_lights.es-studio-v2 #saHeroOverlay .sa-hero-name{font-weight:700}

/* ---- programme: a menu card under a string of lights ----
   program.html is the card's head: a swag pinned to the card's top corners (its pins sit on the card's top edge at
   40/170 of the piece's height, so the card is pulled up under it). The card's double rule draws, a rule draws under
   the heading, and each course arrives in turn with its separator drawing out from the centre. The page's mobile
   list is the menu at every width (a centred column reads as a menu; the 3-column desktop grid does not). */
body.sc-string_lights #program>.sc-p-program{position:relative;z-index:3;width:min(100%,520px);margin:0 auto}
body.sc-string_lights #program>div:not(.sc-piece){position:relative;width:min(100%,520px);margin:0 auto;
  padding:clamp(34px,9vw,48px) clamp(22px,6.5vw,44px);background:var(--paper);
  box-shadow:0 1px 1px color-mix(in srgb,var(--ink) 7%,transparent),0 24px 44px -24px color-mix(in srgb,var(--ink) 36%,transparent)}
/* only under the head piece (a couple's own divider leaves the piece out): pull the card up to the pins */
body.sc-string_lights #program>.sc-p-program+div{margin-top:calc(min(100%,520px) * -130 / 600);padding-top:calc(min(100%,520px) * 118 / 600)}
body.sc-string_lights #program>div:not(.sc-piece)::before,body.sc-string_lights #program>div:not(.sc-piece)::after{content:'';position:absolute;pointer-events:none;
  --c:color-mix(in srgb,var(--es-accent) 70%,var(--paper));
  background:linear-gradient(var(--c),var(--c)) 50% 0/100% 1px no-repeat,linear-gradient(var(--c),var(--c)) 0 0/1px 100% no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0/1px 100% no-repeat,linear-gradient(var(--c),var(--c)) 0 100%/51% 1px no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%/51% 1px no-repeat}
body.sc-string_lights #program>div:not(.sc-piece)::before{inset:9px}
body.sc-string_lights #program>div:not(.sc-piece)::after{inset:13px;--c:color-mix(in srgb,var(--es-accent) 38%,var(--paper))}
.sc-js body.sc-string_lights #program:not(.sc-in)>div:not(.sc-piece)::before,.sc-js body.sc-string_lights #program:not(.sc-in)>div:not(.sc-piece)::after{background-size:0 1px,1px 0,1px 0,0 1px,0 1px}
.sc-js body.sc-string_lights #program.sc-in>div:not(.sc-piece)::before{animation:sl-frame 1.7s cubic-bezier(.65,0,.35,1) .15s both}
.sc-js body.sc-string_lights #program.sc-in>div:not(.sc-piece)::after{animation:sl-frame 1.7s cubic-bezier(.65,0,.35,1) .4s both}
@keyframes sl-frame{
  0%{background-size:0 1px,1px 0,1px 0,0 1px,0 1px}
  30%{background-size:100% 1px,1px 0,1px 0,0 1px,0 1px}
  72%{background-size:100% 1px,1px 100%,1px 100%,0 1px,0 1px}
  100%{background-size:100% 1px,1px 100%,1px 100%,51% 1px,51% 1px}}
/* heading: title, then a double rule that draws out from the centre */
body.sc-string_lights #program>div:not(.sc-piece)>.text-center{margin-bottom:clamp(20px,6vw,30px)}
body.sc-string_lights #program>div:not(.sc-piece)>.text-center>p{margin:0;font-family:var(--font-display)!important;font-size:clamp(16px,4.4vw,19px);letter-spacing:.01em}
html:not([dir=rtl]) body.sc-string_lights #program>div:not(.sc-piece)>.text-center>p{font-style:var(--cz-font-style,italic)}
body.sc-string_lights #program>div:not(.sc-piece)>.text-center::after{content:'';display:block;width:min(64%,240px);height:5px;margin:16px auto 0;
  border-block:1px solid color-mix(in srgb,var(--ink) 42%,transparent)}
.sc-js body.sc-string_lights #program:not(.sc-in)>div:not(.sc-piece)>.text-center::after{clip-path:inset(0 50% 0 50%)}
.sc-js body.sc-string_lights #program.sc-in>div:not(.sc-piece)>.text-center::after{animation:sl-rule 1s cubic-bezier(.65,0,.35,1) .6s both}
@keyframes sl-rule{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0 0 0 0)}}
/* the courses: centred, the time above the name, a sprig rule between them */
body.sc-string_lights #program :is(.sa-program-grid,.sa-prog-line-h,.sa-prog-line-v){display:none}
body.sc-string_lights #program .sa-prog-mobile-wrap{display:block}
body.sc-string_lights #program .sa-program-mobile{display:flex;flex-direction:column;gap:0!important}
/* !important only where rsvp.php's inline html[dir=rtl] .sa-prog-row rule is !important (row, paddings) */
body.sc-string_lights #program .sa-prog-row{flex-direction:column!important;align-items:center;gap:0;margin:0;padding:0!important;text-align:center}
body.sc-string_lights #program .sa-prog-row+.sa-prog-row::before{content:'';display:block;width:112px;height:15px;margin:18px auto 14px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16'%3E%3Cpath d='M8 8H45M75 8H112' stroke='%23C06A48' stroke-width='1' stroke-linecap='round' fill='none'/%3E%3Cpath d='M60 8C56 3.2 50.6 2.6 46.4 4.6C49.4 8 54.6 9.6 60 8Z' fill='%236D7A45' stroke='%232B2F4C' stroke-width='.6'/%3E%3Cpath d='M60 8C64 3.2 69.4 2.6 73.6 4.6C70.6 8 65.4 9.6 60 8Z' fill='%239AA27A' stroke='%232B2F4C' stroke-width='.6'/%3E%3Ccircle cx='60' cy='10.6' r='2.1' fill='%23C06A48'/%3E%3C/svg%3E") center/contain no-repeat}
body.sc-string_lights #program .sa-prog-row>div:first-child{width:30px;height:30px;margin:0 auto 5px;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--es-accent)!important}
body.sc-string_lights #program .sa-prog-row>div:first-child svg{width:24px;height:24px}
body.sc-string_lights #program .sa-prog-row>div:nth-child(2){flex:none;width:100%;padding:0}
body.sc-string_lights #program .sa-prog-row>div:nth-child(2)>div:first-child{flex-direction:column;align-items:center;gap:4px;margin:0}
body.sc-string_lights #program .sa-prog-time{padding:0;border-radius:0;background:none;font:600 11px/1.3 var(--font-body)!important;letter-spacing:.16em;color:var(--es-accent)!important}
body.sc-string_lights #program .sa-prog-row h3{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(21px,5.8vw,27px);line-height:1.2;color:var(--ink);text-wrap:balance}
html:not([dir=rtl]) body.sc-string_lights #program .sa-prog-row h3{font-style:var(--cz-font-style,italic)}
body.sc-string_lights #program .sa-prog-row p{margin:5px auto 0;max-width:32ch;font-size:14px;line-height:1.55}
body.sc-string_lights #program .sa-prog-row p:empty{display:none}
/* each course arrives when IT scrolls in (the runtime gives every row its own .sc-in); rows that come in together
   still follow one another */
.sc-js body.sc-string_lights #program .sa-prog-row:not(.sc-in){opacity:0}
.sc-js body.sc-string_lights #program .sa-prog-row.sc-in{animation:sc-rise .8s cubic-bezier(.23,1,.32,1) calc(.2s + var(--k,0) * .16s) both}
.sc-js body.sc-string_lights #program .sa-prog-row:not(.sc-in)+.sa-prog-row::before,.sc-js body.sc-string_lights #program .sa-prog-row+.sa-prog-row:not(.sc-in)::before{clip-path:inset(0 50% 0 50%)}
.sc-js body.sc-string_lights #program .sa-prog-row+.sa-prog-row.sc-in::before{animation:sl-rule .9s cubic-bezier(.65,0,.35,1) calc(.2s + var(--k,0) * .16s) both}
body.sc-string_lights #program .sa-prog-row:nth-child(2){--k:1}body.sc-string_lights #program .sa-prog-row:nth-child(3){--k:2}body.sc-string_lights #program .sa-prog-row:nth-child(4){--k:3}body.sc-string_lights #program .sa-prog-row:nth-child(n+5){--k:4}

/* ---- welcome: a place card leaning on a wine glass ----
   The card IS the page's own "Invitation for <name>" line (the name stays live text). welcome.html shares its grid
   cell and sits behind it: the glass stands at the card's far side with its bowl above the card, a sprig lies under
   the near corner. The card is set down, its outline draws, then the words appear. */
body.sc-string_lights .es-welcome-inner{display:grid;justify-items:center}
body.sc-string_lights .es-welcome-inner>*{grid-column:1;width:100%}
body.sc-string_lights .es-welcome-inner>.sc-p-welcome,body.sc-string_lights .es-welcome-inner>.sa-hero-guest{grid-row:1;width:min(78%,300px)}
body.sc-string_lights .es-welcome-inner>.sc-p-welcome{z-index:0;align-self:stretch}
body.sc-string_lights .es-welcome-inner>.sc-p-welcome>.sc-stage{aspect-ratio:auto!important;height:100%}
body.sc-string_lights .es-welcome-inner>.sa-hero-guest{--tilt:1.2deg;position:relative;z-index:1;box-sizing:border-box;margin:26px 0 38px;padding:24px 16px 21px;
  font:600 11px/1.5 var(--font-body)!important;letter-spacing:.16em;text-transform:uppercase;color:var(--es-accent);
  --c:color-mix(in srgb,var(--ink) 50%,var(--paper));
  background:linear-gradient(var(--c),var(--c)) 50% 0/100% 1px no-repeat,linear-gradient(var(--c),var(--c)) 0 0/1px 100% no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0/1px 100% no-repeat,linear-gradient(var(--c),var(--c)) 0 100%/51% 1px no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%/51% 1px no-repeat,
    linear-gradient(rgba(43,47,76,.09),rgba(43,47,76,0) 11px) 0 0/100% 11px no-repeat,var(--paper);
  box-shadow:0 18px 18px -16px rgba(43,47,76,.5);transform:rotate(var(--tilt))}
html[dir=rtl] body.sc-string_lights .es-welcome-inner>.sa-hero-guest{--tilt:-1.2deg;letter-spacing:0}
body.sc-string_lights .es-welcome-inner>.sa-hero-guest strong{display:block;margin-top:7px;font:600 clamp(24px,6.8vw,30px)/1.16 var(--font-display);font-style:var(--cz-font-style,italic);
  letter-spacing:0;text-transform:none;color:var(--cz-title,var(--ink));text-wrap:balance;overflow-wrap:anywhere}
html[dir=rtl] body.sc-string_lights .es-welcome-inner>.sa-hero-guest strong{font-style:normal}
.sc-js body.sc-string_lights .es-welcome:not(.sc-in) .es-welcome-inner>.sa-hero-guest{opacity:0}
.sc-js body.sc-string_lights .es-welcome.sc-in .es-welcome-inner>.sa-hero-guest{animation:sl-card .7s cubic-bezier(.23,1,.32,1) both,sl-frame 1.2s cubic-bezier(.65,0,.35,1) .25s both}
@keyframes sl-card{from{opacity:0;transform:translateY(12px) rotate(var(--tilt))}to{opacity:1;transform:rotate(var(--tilt))}}
.sc-js body.sc-string_lights .es-welcome:not(.sc-in) .es-welcome-inner>.sa-hero-guest strong{opacity:0}
.sc-js body.sc-string_lights .es-welcome.sc-in .es-welcome-inner>.sa-hero-guest strong{animation:sc-rise .8s cubic-bezier(.23,1,.32,1) .75s both}

/* ---- countdown: four place cards, standing up one after another, under a candle that lights ---- */
body.sc-string_lights #countdown>.sc-p-countdown{width:min(46%,176px);margin:-10px auto 4px}
body.sc-string_lights #countdown .grid{gap:9px!important;max-width:460px}
body.sc-string_lights #countdown .grid>div{position:relative;padding:17px 2px 12px!important;background:var(--paper)!important;border:0!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 20%,transparent),0 14px 14px -12px rgba(43,47,76,.42)!important;transform-origin:50% 100%}
body.sc-string_lights #countdown .grid>div::before{content:'';position:absolute;left:1px;right:1px;top:1px;height:10px;background:linear-gradient(rgba(43,47,76,.1),rgba(43,47,76,0))}
body.sc-string_lights #countdown .grid>div+div{border-inline-start:0!important}
body.sc-string_lights #countdown [id^=cd_]{color:var(--es-accent)!important}
.sc-js body.sc-string_lights #countdown .grid:not(.sc-in)>div{opacity:0}
.sc-js body.sc-string_lights #countdown .grid.sc-in>div{animation:sl-stand .75s cubic-bezier(.23,1,.32,1) calc(.35s + var(--k,0) * .13s) both}
body.sc-string_lights #countdown .grid>div:nth-child(2){--k:1}body.sc-string_lights #countdown .grid>div:nth-child(3){--k:2}body.sc-string_lights #countdown .grid>div:nth-child(4){--k:3}
@keyframes sl-stand{from{opacity:0;transform:translateY(8px) scaleY(.18)}45%{opacity:1}to{opacity:1;transform:none}}
/* a digit that changes settles in softly */
.sc-js body.sc-string_lights #countdown [id^=cd_].sc-tick{animation:sl-tick .55s cubic-bezier(.23,1,.32,1)}
@keyframes sl-tick{from{opacity:.3;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---- venue: a garden gate with lanterns; the rows are lit like lanterns and arrive in turn; the map is framed ---- */
body.sc-string_lights #details>.sc-p-details{width:min(88%,340px);margin:-12px auto 6px}
body.sc-string_lights #details .sa-map-rows>div>div:first-child{background:radial-gradient(circle at 50% 42%,#FFF1CF,var(--paper) 72%)!important;
  border:1px solid color-mix(in srgb,var(--es-accent) 55%,transparent)!important;color:var(--es-accent)!important;box-shadow:0 0 18px rgba(255,213,138,.6)!important}
.sc-js body.sc-string_lights #details .sa-map-rows>:not(.sc-in),.sc-js body.sc-string_lights #details .sa-map-actions:not(.sc-in){opacity:0}
.sc-js body.sc-string_lights #details .sa-map-rows>.sc-in,.sc-js body.sc-string_lights #details .sa-map-actions.sc-in{animation:sc-rise .8s cubic-bezier(.23,1,.32,1) calc(.3s + var(--k,0) * .15s) both}
body.sc-string_lights #details .sa-map-rows>:nth-child(2){--k:1}body.sc-string_lights #details .sa-map-rows>:nth-child(3){--k:2}body.sc-string_lights #details .sa-map-actions{--k:1}
body.sc-string_lights #details .sa-map-actions a{background:var(--paper)!important;border-color:color-mix(in srgb,var(--es-accent) 45%,transparent)!important;color:var(--ink)!important}
body.sc-string_lights #details .sa-map-embed .sa-gallery-card{padding:7px;background:var(--paper)!important;border:1px solid color-mix(in srgb,var(--ink) 22%,transparent)!important;
  border-radius:0!important;box-shadow:0 18px 30px -20px rgba(43,47,76,.5)!important}

/* ---- gallery: the couple's photos hang from a string of lights, each on a peg, and swing to rest as they arrive ----
   The string is one segment per card (they join across a row) with a lit bulb in each gap; the photo itself (not the
   card) tilts, so the string stays straight. */
body.sc-string_lights #gallery>.sc-p-gallery{width:min(98%,430px);margin:-10px auto 6px}
body.sc-string_lights #gallery .grid{column-gap:16px!important;row-gap:46px!important;padding-top:24px}
body.sc-string_lights #gallery .sa-gallery-card{position:relative;overflow:visible!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;transform:none!important}
body.sc-string_lights #gallery .sa-gallery-card::before{content:'';position:absolute;z-index:1;left:-8px;right:-16px;top:-16px;height:30px;max-width:none;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 30'%3E%3Ccircle cx='9' cy='19' r='9' fill='%23FFD58A' fill-opacity='.35'/%3E%3Cpath d='M9 0V6' stroke='%232B2F4C' stroke-width='1.2'/%3E%3Cpath d='M6.6 5.5H11.4V10H6.6Z' fill='%233C3F55'/%3E%3Cpath d='M7.4 10V12.4A5.6 5.6 0 1 0 10.6 12.4V10Z' fill='%23FFF3D2' stroke='%23B27A3A' stroke-width='.9'/%3E%3C/svg%3E") right 0 top 1px/16px 27px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 0/100% 1.5px no-repeat}
body.sc-string_lights #gallery .sa-gallery-card::after{content:'';position:absolute;z-index:3;left:50%;top:-24px;width:10px;height:28px;margin-left:-5px;max-width:none;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 28'%3E%3Cpath d='M1.5 1H8.5V27H1.5Z' fill='%23C9A57C' stroke='%232B2F4C' stroke-width='.8'/%3E%3Cpath d='M5 1V27' stroke='%232B2F4C' stroke-width='.5' stroke-opacity='.5'/%3E%3Cpath d='M.6 11H9.4V14.4H.6Z' fill='%239EA0AD' stroke='%232B2F4C' stroke-width='.6'/%3E%3C/svg%3E") center/contain no-repeat}
body.sc-string_lights #gallery .sa-gallery-card img{position:relative;z-index:2;box-sizing:border-box;padding:6px 6px 17px;background:var(--paper);
  box-shadow:0 16px 20px -14px rgba(43,47,76,.5);transform:rotate(var(--tilt,0deg));transform-origin:50% -16px}
body.sc-string_lights #gallery .sa-gallery-card:nth-child(4n+1) img{--tilt:-1.6deg}body.sc-string_lights #gallery .sa-gallery-card:nth-child(4n+2) img{--tilt:1.3deg}
body.sc-string_lights #gallery .sa-gallery-card:nth-child(4n+3) img{--tilt:1deg}body.sc-string_lights #gallery .sa-gallery-card:nth-child(4n) img{--tilt:-1.1deg}
body.sc-string_lights #gallery .sa-gallery-card:nth-child(even){--k:1}
.sc-js body.sc-string_lights #gallery .sa-gallery-card:not(.sc-in) img{opacity:0}
.sc-js body.sc-string_lights #gallery .sa-gallery-card.sc-in img{animation:sl-hang 1.5s cubic-bezier(.23,1,.32,1) calc(.15s + var(--k,0) * .2s) both}
@keyframes sl-hang{0%{opacity:0;transform:translateY(-12px) rotate(calc(var(--tilt,0deg) + 9deg))}
  30%{opacity:1;transform:rotate(calc(var(--tilt,0deg) - 3deg))}55%{transform:rotate(calc(var(--tilt,0deg) + 1.4deg))}
  78%{transform:rotate(calc(var(--tilt,0deg) - .5deg))}100%{opacity:1;transform:rotate(var(--tilt,0deg))}}

/* ---- dress code: linen swatches fan out from a stack; the words sit on a stitched fabric label ---- */
body.sc-string_lights #dress_code>.sc-p-dress_code{width:min(64%,250px);margin:-12px auto 2px}
.sc-piece.sc-string_lights [data-sl=fan]{transform:rotate(var(--r,0deg))}
.sc-js .sc-piece.sc-string_lights:not(.sc-in) [data-sl=fan]{opacity:0;transform:rotate(0deg)}
.sc-js .sc-piece.sc-string_lights.sc-in [data-sl=fan]{animation:sl-fan var(--d,1000ms) cubic-bezier(.23,1,.32,1) var(--t,0ms) both}
@keyframes sl-fan{from{opacity:0;transform:rotate(0deg)}20%{opacity:1;transform:rotate(0deg)}to{opacity:1;transform:rotate(var(--r,0deg))}}
body.sc-string_lights #dress_code .sa-text-section__body,body.sc-string_lights #gifts .sa-text-section__body{position:relative;box-sizing:border-box;max-width:30rem;margin-inline:auto;
  background:var(--paper);color:var(--ink)!important;font:400 clamp(17px,4.6vw,19px)/1.65 var(--font-display)!important}
body.sc-string_lights #dress_code .sa-text-section__body{padding:22px 24px;outline:1px dashed color-mix(in srgb,var(--es-accent) 55%,transparent);outline-offset:-8px;
  box-shadow:0 16px 26px -20px rgba(43,47,76,.45)}
/* ---- gifts: an olive-oil bottle with a ribbon and a swinging tag; the words are written on a gift tag ---- */
body.sc-string_lights #gifts>.sc-p-gifts{width:min(46%,178px);margin:-12px auto 0}
body.sc-string_lights #gifts>div:not(.sc-piece){filter:drop-shadow(0 12px 12px rgba(43,47,76,.18))}
body.sc-string_lights #gifts .sa-text-section__body{max-width:24rem;padding:40px 24px 24px;
  clip-path:polygon(0 18px,18px 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%);
  background:radial-gradient(circle at 50% 18px,var(--ivory) 0 5px,color-mix(in srgb,var(--ink) 45%,transparent) 5.5px 6.6px,transparent 7.2px),
    linear-gradient(var(--es-accent),var(--es-accent)) 0 0/100% 4px no-repeat,var(--paper)}
.sc-js body.sc-string_lights :is(#dress_code,#gifts,#closing) .sa-text-section__body:not(.sc-in){opacity:0}
.sc-js body.sc-string_lights :is(#dress_code,#gifts,#closing) .sa-text-section__body.sc-in{animation:sc-rise .9s cubic-bezier(.23,1,.32,1) .35s both}

/* ---- rsvp: a place card with a flourish; the form is the card, with the guest's own name written on its line ---- */
body.sc-string_lights #rsvp>.sc-p-rsvp{width:min(62%,240px);margin:-14px auto 0}
body.sc-string_lights #rsvp form::before{content:'';position:absolute;left:0;right:0;top:0;height:16px;pointer-events:none;background:linear-gradient(rgba(43,47,76,.08),rgba(43,47,76,0))}
body.sc-string_lights #rsvp #field_name{text-align:center}
body.sc-string_lights #sa-sections #rsvp #field_name input{text-align:center;min-height:50px;background:transparent!important;border:0!important;
  border-bottom:1px solid color-mix(in srgb,var(--ink) 38%,transparent)!important;font:600 clamp(22px,6vw,26px)/1.2 var(--font-display)!important;font-style:var(--cz-font-style,italic)!important}
html[dir=rtl] body.sc-string_lights #sa-sections #rsvp #field_name input{font-style:normal!important}
.sc-js body.sc-string_lights #rsvp form>:not(.sc-in):not([type=hidden]){opacity:0}
.sc-js body.sc-string_lights #rsvp form>.sc-in{animation:sc-fade .7s cubic-bezier(.23,1,.32,1) .1s both}

/* ---- closing: the table at night in a paper frame; the words follow ---- */
body.sc-string_lights #sa-sections #closing>.sc-p-closing{width:min(100%,470px);margin:-8px auto 30px;padding:7px;background:var(--paper);
  box-shadow:0 26px 40px -26px rgba(43,47,76,.65)}
.sc-js .sc-piece.sc-string_lights.sc-p-closing:not(.sc-in){opacity:0}
.sc-js .sc-piece.sc-string_lights.sc-p-closing.sc-in{animation:sc-fade .8s cubic-bezier(.23,1,.32,1) both}