/* The White Pavilion (Signature), "Film + Pass" (v192 calm; v191 before): the scenes (js/signature-white-pavilion.js) and the
 * Pass skin (--wk-*, css/occasi-pass.css). Light: ivory silk, white roses, gilded chairs; warm ink and champagne gold.
 * Every scene is a layered still that covers the phone: the plate (never moves), the crystal glints, and the prop that carries
 * the words on its own layer (.wp-lyr), swinging gently about its ribbon's knot. Words ON the picture sit at its render
 * pixels and scale with it:
 *   --k   the picture's scale on this phone: cover the screen, and on a short or narrow phone zoom so the focus box
 *         (--fw x --fh render px around --fx, --fy) stays in view; pure CSS (container units), so a resize runs no script
 *   --ox, --oy  where the picture's top-left corner sits (the focus point centred, the picture always covering)
 *   .wp-at  a box at render px (--x, --y, --w, --h) and its tilt at rest (transform, origin top-left); inside a prop layer
 *           its --ox/--oy are the layer's own corner, so it moves with the prop exactly
 * Object text is max(floor px, k x render size) (inline, from the script's one table); the bands' type is fixed. */
@font-face{font-family:'Great Vibes';src:url('../assets/fonts/great-vibes-latin.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Cormorant';src:url('../assets/fonts/cormorant-latin.woff2') format('woff2');font-weight:300 700;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('../assets/fonts/eb-garamond-latin.woff2') format('woff2');font-weight:400 800;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('../assets/fonts/eb-garamond-italic-latin.woff2') format('woff2');font-style:italic;font-weight:400 800;font-display:swap}

html.wp-film-on, html.wp-film-on body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body.wp-film-page { margin: 0; background: #ece6da; -webkit-text-size-adjust: 100%; }
.wp-film.wk-root {
  /* v221: the Guest guide's ornament: a colonnade between two gilt rules */ --wk-orn: linear-gradient(#a3854a, #a3854a) 0 0 / 100% 1px no-repeat, repeating-linear-gradient(90deg, #a3854a 0 1.5px, transparent 1.5px 9px) 0 1.5px / 100% 3px no-repeat, linear-gradient(#a3854a, #a3854a) 0 5px / 100% 1px no-repeat;
  --wk-bg: #f6f2ea; --wk-paper: #fffdf8; --wk-ink: #2f2a23; --wk-soft: #5b5244; --wk-gold: #a3854a; --wk-rule: rgba(163, 133, 74, .34);
  --wk-display: 'EB Garamond', Georgia, serif; --wk-text: 'EB Garamond', Georgia, serif; --wk-display-style: italic; --wk-r: 3px;
  --wk-btn: #2f2a23; --wk-onbtn: #fbf7ee;
  --wk-shadow: 0 12px 30px -16px rgba(60, 46, 20, .45), inset 0 0 0 1px rgba(163, 133, 74, .36);
  --wk-h1: 33px; --wk-h2: 25px; --wk-big: 29px; --wk-val: 15.5px; --wk-body: 14px; --wk-tiny: 12px; --wk-label: 9px;
  --wp-ink: #2a251e; --wp-ivory: #fbf8f1; --wp-gold: #a3854a; --wp-goldl: #d8c393;
  --wp-panel: rgba(251, 248, 241, .93);
  --wp-frame: 0 14px 34px -18px rgba(40, 32, 16, .55), inset 0 0 0 1px rgba(163, 133, 74, .55), inset 0 0 0 4px var(--wp-panel), inset 0 0 0 5px rgba(163, 133, 74, .26);
}
.wp-film.wk-root, .wp-film.wk-root *, .wp-film .wk-sheet *, .wp-bar { font-variant-numeric: lining-nums !important; }
.wp-film .wp-kicker { margin: 0; font: 700 10px / 1.35 'Cormorant', Georgia, serif; letter-spacing: .26em; text-transform: uppercase; color: var(--wk-soft); }
.wp-film .wp-h2 { margin: 3px 0 0; font: italic 500 25px / 1.1 var(--wk-display); color: var(--wp-ink); text-wrap: balance; overflow-wrap: anywhere; }
.wp-film .wp-sub { margin: 4px 0 0; font: italic 400 13.5px / 1.35 var(--wk-text); color: var(--wk-soft); text-wrap: balance; }
.wp-film .wp-sub b { font-weight: 500; color: var(--wp-ink); }
.wp-film .wp-tiny { margin: 6px 0 0; font: italic 400 12.5px / 1.3 var(--wk-text); color: var(--wk-soft); }
.wp-film .wp-tiny b { font-style: normal; font-weight: 600; color: var(--wp-ink); }
.wp-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin: 8px 0 0; padding: 0 18px; border: 0; border-radius: 2px; background: var(--wk-btn); color: var(--wk-onbtn);
  font: 700 12px / 1.2 'Cormorant', Georgia, serif; letter-spacing: .22em; text-transform: uppercase; cursor: pointer; box-shadow: inset 0 0 0 3px var(--wk-btn), inset 0 0 0 4px rgba(216, 195, 147, .8); }
.wp-btn.is-line { background: rgba(255, 253, 248, .6); color: var(--wp-ink); box-shadow: inset 0 0 0 1px rgba(163, 133, 74, .95); }

/* ---- the picture and the boxes on it --------------------------------------------------------------------------------- */
.wp-film .wk-scene.wp-scene, .wp-film .wk-scene.wk-scene-join { padding: 0; display: block; container-type: size; background: #d9d3c6; }
/* a scene off the screen is not laid out or painted until it comes near (the first build stays small) */
.wp-film .wk-film:not(.is-single) > .wk-scene { content-visibility: auto; contain-intrinsic-size: auto 100vw auto 100vh; }
.wp-art { --iw: 1080; --ih: 1920; --fw: 880; --fh: 1560; --fx: 540; --fy: 960;
  --k: max(calc(100cqw / var(--iw)), calc(100cqh / var(--ih)), min(calc(100cqw / var(--fw)), calc(100cqh / var(--fh))));
  --ox: clamp(calc(100cqw - var(--iw) * var(--k)), calc(50cqw - var(--fx) * var(--k)), 0px);
  --oy: clamp(calc(100cqh - var(--ih) * var(--k)), calc(50cqh - var(--fy) * var(--k)), 0px);
  position: absolute; inset: 0; overflow: hidden; }
.wp-still, .wp-v { position: absolute; left: var(--ox); top: var(--oy); width: calc(var(--iw) * var(--k)); height: calc(var(--ih) * var(--k)); max-width: none; object-fit: cover; display: block; }
.wp-v { opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.wp-v.on { opacity: 1; }
.wp-at { position: absolute; box-sizing: border-box; left: calc(var(--ox) + var(--x) * var(--k)); top: calc(var(--oy) + var(--y) * var(--k)); width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k));
  transform-origin: 0 0; margin: 0; }
.wp-at > * { margin: 0; }
/* the prop layer: the prop's picture at rest (--lx, --ly, --lw, --lh render px) with its words; it swings about its pivot
   (--px, --py: where the ribbon is tied) between -deg and +deg, eased, half a period (--dur) each way. Only the scene on
   the screen (.wp-live; in a swipe only the card in view, .wp-on) runs it; .wp-rest holds it at rest (a film hands over). */
.wp-lyr { position: absolute; left: calc(var(--ox) + var(--lx) * var(--k)); top: calc(var(--oy) + var(--ly) * var(--k)); width: calc(var(--lw) * var(--k)); height: calc(var(--lh) * var(--k));
  transform-origin: calc((var(--px) - var(--lx)) * var(--k)) calc((var(--py) - var(--ly)) * var(--k));
  animation: wp-swing var(--dur) ease-in-out var(--dl) infinite alternate both; animation-play-state: paused; }
.wp-lyrimg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; pointer-events: none; }
.wp-lyr > .wp-at { --ox: calc(var(--lx) * var(--k) * -1); --oy: calc(var(--ly) * var(--k) * -1); }
@keyframes wp-swing { from { transform: rotate(calc(var(--deg) * -1)); } to { transform: rotate(var(--deg)); } }
.wp-live .wp-art:not(.is-slide) .wp-lyr, .wp-live .wp-art.wp-on .wp-lyr { animation-play-state: running; }
.wp-rest .wp-lyr { animation: none; }
.wp-filmcard .wp-lyrimg { visibility: hidden; }
/* the glints: a small four-point star that fades in and out on a crystal, now and then */
.wp-gls { position: absolute; inset: 0; pointer-events: none; }
.wp-gl { position: absolute; left: calc(var(--ox) + (var(--x) - var(--s)) * var(--k)); top: calc(var(--oy) + (var(--y) - var(--s)) * var(--k)); width: calc(var(--s) * 2 * var(--k)); height: calc(var(--s) * 2 * var(--k)); opacity: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 0, rgba(255, 251, 242, .5) 8%, rgba(255, 251, 242, 0) 22%),
    linear-gradient(90deg, transparent calc(50% - .7px), rgba(255, 255, 255, .9) 50%, transparent calc(50% + .7px)),
    linear-gradient(0deg, transparent calc(50% - .7px), rgba(255, 255, 255, .9) 50%, transparent calc(50% + .7px));
  -webkit-mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, .5) 30%, transparent 70%); mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, .5) 30%, transparent 70%);
  animation: wp-tw var(--d) ease-in-out var(--dl) infinite; animation-play-state: paused; }
.wp-live .wp-art:not(.is-slide) .wp-gl { animation-play-state: running; }
@keyframes wp-tw { 0%, 30%, 100% { opacity: 0; transform: scale(.55); } 15% { opacity: var(--o, .85); transform: scale(1); } }
.wp-film .is-script { font-family: 'Great Vibes', 'Snell Roundhand', cursive !important; font-style: normal !important; font-weight: 400 !important; letter-spacing: 0; }

/* the bands at the top and the foot of every scene: short words and buttons. v195: the top band is no longer a box; its
   words sit on a soft veil of light that falls from the top of the scene (near-solid behind the words, then fading out) */
.wp-band { position: absolute; z-index: 3; left: 12px; right: 12px; text-align: center; color: var(--wp-ink); }
.wp-band.wp-top { top: 0; left: 0; right: 0; padding: calc(16px + var(--wk-safe-t)) 24px 46px; pointer-events: none;
  background: linear-gradient(180deg, rgba(250, 247, 240, .95) 0, rgba(250, 247, 240, .9) calc(100% - 42px), rgba(250, 247, 240, .5) calc(100% - 20px), rgba(250, 247, 240, 0) 100%); }
.wp-band.wp-top > * { pointer-events: auto; text-shadow: 0 0 10px rgba(250, 247, 240, .95), 0 0 2px rgba(250, 247, 240, .9); }
.wp-film .wp-band.wp-top .wp-kicker { font-size: 10.5px; color: #514735; }
.wp-band.wp-bot { bottom: calc(12px + var(--wk-safe-b)); padding: 10px 14px 10px; background: var(--wp-panel); border-radius: 2px; box-shadow: var(--wp-frame); }
.wp-band.wp-bot > :first-child { margin-top: 0; }
.wp-band .wp-h2 { font-size: 24px; }

/* ---- 1 the drapes ------------------------------------------------------------------------------------------------------ */
.wp-scene-cover .wp-top { padding-bottom: 40px; white-space: nowrap; }
.wp-tag { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--wp-ink); pointer-events: none; transition: opacity .3s ease; }
.wp-tkick { font-family: 'Cormorant', Georgia, serif; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #554833; line-height: 1.25; }
.wp-tname { margin-top: .1em !important; font-family: 'EB Garamond', Georgia, serif; font-style: italic; font-weight: 500; line-height: 1.1; text-wrap: balance; overflow-wrap: anywhere; color: #2b241b; }
.wp-tname.is-script { line-height: 1.08; color: #3a2e1c; }
/* v195b: the tag's words stay on the drapes under the opening (its layer fades in over them with the same words at rest), and
   in the opening they ride the falling tag (.wp-otag: a perspective transform per film frame, clipped by the picture) */
.wp-scene-cover.is-opening .wp-band { opacity: 0; pointer-events: none; transition: opacity .3s ease; }
/* v197: in the opening the names are drawn into the film's own canvas (.op-filmcanvas, js/occasi-printed-text.js); these HTML\n   words show only until its first frame (or, without WebGL, while the tag is still) */
.wp-openlayer .wp-otag { z-index: 1; transition: none; backface-visibility: hidden; }
.wp-openlayer .op-filmcanvas { z-index: 2; }
.wp-openlayer { position: absolute; inset: 0; z-index: 30; container-type: size; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.wp-openlayer.is-in { opacity: 1; }
.wp-openlayer.is-gone { opacity: 0; transition-duration: .45s; }

/* ---- 2 the aisle ------------------------------------------------------------------------------------------------------- */
.wp-sign { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 16px; text-align: center; color: #2a241c; font-weight: inherit; }
.wp-snames { display: block; font-family: 'EB Garamond', Georgia, serif; font-style: italic; font-weight: 600; text-wrap: balance; overflow-wrap: anywhere; }
.wp-snames > span { display: block; }
.wp-snames.is-script { color: #3a2e1c; }
.wp-sdate { display: block; font-family: 'Cormorant', Georgia, serif; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #574830; line-height: 1.2; }
.wp-hwords .wp-hline { margin: 3px 0 0; font: italic 400 15.5px / 1.3 var(--wk-display); text-wrap: balance; }
.wp-hwords .wp-hvenue { margin: 2px 0 0; font: italic 500 15.5px / 1.25 var(--wk-display); color: var(--wk-soft); text-wrap: balance; }
/* v195: the invitation's words under the sign (names, date, then these), centred over the aisle and the arch, on a soft veil
   of light with feathered edges (no box); still, as the plate is (the sign above swings by a pixel or two) */
.wp-under { position: absolute; z-index: 2; left: calc(var(--ox) + 540 * var(--k)); top: calc(var(--oy) + var(--y) * var(--k)); width: min(300px, calc(100cqw - 96px)); transform: translateX(-50%);
  text-align: center; color: var(--wp-ink); pointer-events: none; }
.wp-under::before { content: ''; position: absolute; z-index: -1; inset: -24px -72px -26px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(250, 247, 240, .86) 0, rgba(250, 247, 240, .8) 52%, rgba(250, 247, 240, .5) 78%, rgba(250, 247, 240, 0) 100%); }
.wp-under > * { margin: 0; text-shadow: 0 0 8px rgba(250, 247, 240, .95), 0 0 2px rgba(250, 247, 240, .9); text-wrap: balance; overflow-wrap: anywhere; }
.wp-under .wp-ukick { font: 700 12.5px / 1.35 'Cormorant', Georgia, serif; letter-spacing: .22em; text-transform: uppercase; color: #4c4232; }
.wp-under .wp-uline { margin-top: 3px; font: italic 400 18px / 1.28 var(--wk-display); color: var(--wp-ink); }
.wp-under .wp-uvenue { font: italic 500 16.5px / 1.3 var(--wk-display); color: #3f372b; }
.wp-under .wp-uvenue::before { content: ''; display: block; width: 26px; height: 1px; margin: 7px auto 6px; background: var(--wp-gold); }
.wp-scene-hero .wp-sign, .wp-scene-hero .wp-top { transition: opacity .6s ease; }
.wp-scene-hero .wp-bot { left: 50%; right: auto; transform: translateX(-50%); padding: 0; background: none; box-shadow: none; }
.wp-cue { display: grid; justify-items: center; gap: 5px; min-height: 44px; padding: 8px 18px 7px; border: 0; border-radius: 999px; background: var(--wp-panel); box-shadow: var(--wp-frame);
  font: 700 10.5px / 1 'Cormorant', Georgia, serif; letter-spacing: .24em; text-transform: uppercase; color: var(--wp-ink); white-space: nowrap; cursor: pointer; }
.wp-cue i { width: 8px; height: 8px; border-right: 1.5px solid var(--wp-gold); border-bottom: 1.5px solid var(--wp-gold); transform: rotate(45deg); animation: wp-bob 2.4s ease-in-out infinite; }
@keyframes wp-bob { 50% { transform: translateY(3px) rotate(45deg); } }

/* ---- 3 the welcome sign ------------------------------------------------------------------------------------------------- */
.wp-whead { display: flex; align-items: center; justify-content: center; pointer-events: none; }
.wp-welcome { font-family: 'Great Vibes', cursive; font-weight: 400; line-height: 1; color: #3a2e1c; }
.wp-signrows { padding: 0; }
.wp-sdeck { position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; outline: none; }
.wp-sdeck::-webkit-scrollbar { display: none; }
.wp-sslide { flex: 0 0 100%; box-sizing: border-box; scroll-snap-align: start; padding: calc(var(--k) * 7) calc(var(--k) * 20); text-align: center; color: #2a241c; }
.wp-dhead { margin: 0 0 var(--gap, 6px); padding-bottom: .3em; border-bottom: 1px solid rgba(163, 133, 74, .5); font-family: 'Cormorant', Georgia, serif; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #574830; line-height: 1.25; }
.wp-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: max(5px, calc(var(--k) * 12)); }
.wp-rows li { display: grid; justify-items: center; }
.wp-rwhen { font-family: 'Cormorant', Georgia, serif; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #574830; line-height: 1.2; }
.wp-rname { font-family: 'EB Garamond', Georgia, serif; font-style: italic; font-weight: 500; line-height: 1.08; color: #2a241c; text-wrap: balance; overflow-wrap: anywhere; }
.wp-rows li::after { content: ''; display: block; width: 18px; height: 1px; margin-top: max(2px, calc(var(--k) * 6)); background: var(--ec, var(--wp-gold)); opacity: .8; }
.wp-rows li:last-child::after { display: none; }
.wp-pager { display: flex; align-items: center; justify-content: center; gap: 10px; }
.wp-pdots { display: flex; gap: 6px; }
.wp-pdots i { width: 6px; height: 6px; transform: rotate(45deg); background: rgba(163, 133, 74, .25); box-shadow: 0 0 0 1px rgba(163, 133, 74, .7); }
.wp-pdots i.on { background: var(--wp-gold); }
.wp-arrow { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--wp-ink); cursor: pointer; }
.wp-arrow .wk-ico { width: 18px; height: 18px; }
.wp-scene-weekend .wp-bot .wp-pager + .wp-btn { margin-top: 2px; }

/* ---- 4 our story / 5 our people: a swipe of full-screen cards ------------------------------------------------------------ */
.wp-deckscene, .wp-deckscene .wp-single { position: absolute; inset: 0; }
.wp-deckscene .wk-deckwrap { position: absolute; inset: 0; }
.wp-deckscene .wk-deck { height: 100%; }
.wp-deckscene .wk-slide { position: relative; height: 100%; overflow: hidden; container-type: size; }
.wp-deckscene .wk-pager { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(14px + var(--wk-safe-b)); margin: 0; z-index: 4; padding: 0 6px; background: var(--wp-panel); border-radius: 999px; box-shadow: var(--wp-frame); }
.wp-deckscene .wk-arrow { background: transparent; border-color: transparent; color: var(--wp-ink); }
.wp-deckscene .wk-pdots i { background: rgba(163, 133, 74, .25); box-shadow: 0 0 0 1px rgba(163, 133, 74, .7); }
.wp-deckscene .wk-pdots i.on { background: var(--wp-gold); }
.wp-more { display: inline-flex; align-items: center; min-height: 44px; margin: -6px 0 -10px; padding: 0 8px; border: 0; background: none; font: italic 500 14px / 1.2 var(--wk-text); color: var(--wp-ink);
  text-decoration: underline; text-decoration-color: var(--wp-gold); text-underline-offset: 4px; cursor: pointer; }
.wp-chphoto { display: grid; place-items: center; padding: 0; border: 0; background: none; overflow: hidden; cursor: zoom-in; }
.wp-chphoto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wp-chphoto.is-blank { align-content: center; gap: .2em; cursor: pointer; }
.wp-chyear { font-family: 'Great Vibes', cursive; line-height: 1; color: #3a2e1c; }
.wp-chnum { font-family: 'Cormorant', Georgia, serif; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #574830; line-height: 1.2; }
.wp-chtext { text-align: center; color: #2a241c; pointer-events: none; }
.wp-chtext h3 { font-family: 'EB Garamond', Georgia, serif; font-style: italic; font-weight: 500; line-height: 1.1; text-wrap: balance; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wp-chtext p { margin-top: .3em !important; font-family: 'EB Garamond', Georgia, serif; line-height: 1.35; color: #3b3328; overflow-wrap: anywhere; }
.wp-chfar { overflow: hidden; pointer-events: none; }
.wp-chfar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wp-pcard { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 0; background: none; color: #2a241c; text-align: center; cursor: pointer; }
.wp-pname { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; width: 100%; font-family: 'EB Garamond', Georgia, serif; font-weight: 600; line-height: 1.12; text-wrap: balance; overflow-wrap: anywhere; }
.wp-prole { display: block; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: 'EB Garamond', Georgia, serif; font-style: italic; line-height: 1.2; color: #5f5444; }
.wp-prole.is-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; text-wrap: balance; }
.wp-pcard { pointer-events: none; }
.wp-ptap { padding: 0; border: 0; border-radius: 4px; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wp-ptap:focus-visible { outline: 2px solid var(--wp-ink); outline-offset: 0; }
.wp-pface { overflow: hidden; border-radius: 50%; pointer-events: none; }
.wp-pface img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wp-pface.is-init { display: grid; place-items: center; }
.wp-pface.is-init b { font-family: 'Great Vibes', cursive; font-weight: 400; color: #66501f; line-height: 1; }

/* ---- 6 will you join us? the place card ---------------------------------------------------------------------------------- */
.wp-join { position: absolute; inset: 0; text-align: center; }
.wp-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; background: none; color: #2a241c; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* v197: the glow is its own box under the card's words (the words are multiplied into the card; a light glow inside them would vanish) */
.wp-cardglow { pointer-events: none; }
.wp-cardglow::after { content: ''; position: absolute; inset: -6%; border-radius: 6px; box-shadow: 0 0 0 2px rgba(255, 246, 222, .0), 0 0 30px 6px rgba(255, 244, 214, .55); opacity: 0; animation: wp-glow 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes wp-glow { 50% { opacity: 1; } }
.wp-card:focus-visible { outline: 2px solid var(--wp-ink); outline-offset: 3px; }
.wp-cname { display: block; font-family: 'EB Garamond', Georgia, serif; font-style: italic; font-weight: 500; text-wrap: balance; overflow-wrap: anywhere; }
.wp-cyes { display: block; font-family: 'EB Garamond', Georgia, serif; font-style: italic; font-weight: 600; color: #3a2e1c; }
.wp-card:hover .wp-cyes, .wp-card:active .wp-cyes { text-decoration: underline; text-decoration-color: rgba(163, 133, 74, .7); text-underline-offset: 3px; }
.wp-jh { margin: 0; font: 400 40px / 1.1 'Great Vibes', cursive; color: var(--wp-ink); }
/* v195: the scene holds only the card, the names and one button; the reply itself is the sheet (.wp-rsvp) */
.wp-band.wp-jfoot { left: 50%; right: auto; width: min(340px, calc(100% - 32px)); transform: translateX(-50%); padding: 0; background: none; box-shadow: none; }
.wp-jfoot .wp-replybtn { margin: 0; box-shadow: inset 0 0 0 3px var(--wk-btn), inset 0 0 0 4px rgba(216, 195, 147, .8), 0 12px 26px -12px rgba(30, 24, 12, .7); }
.wp-band.wp-jfoot.is-note { left: 12px; right: 12px; width: auto; transform: none; padding: 10px 14px; background: var(--wp-panel); border-radius: 2px; box-shadow: var(--wp-frame); }
.wp-jfoot .wk-link { min-height: 44px; padding: 8px 2px; font-size: 13.5px; }
.wp-note { margin: 0 auto 4px; max-width: 340px; background: transparent; color: var(--wp-ink); border-color: rgba(163, 133, 74, .55); }
.wp-card.is-replied .wp-cyes { color: #4a3c22; }

/* ---- the reply sheet (v195): per person, per event; nothing chosen until the guest chooses ------------------------------ */
.wp-film .wk-sheet.wp-rsvp .wk-sheetin { top: calc(10px + var(--wk-safe-t)); max-height: none; }
.wp-film .wk-sheet.wp-rsvp .wk-sheetbody { flex: 1; padding-bottom: 0; }
.wp-rsvp .wk-sheethead .wk-h2 { font-family: 'Great Vibes', cursive; font-style: normal; font-weight: 400; font-size: 36px; line-height: 1.1; }
.wp-rsvp .wk-sheethead .wk-sub b { font-weight: 500; }
.wp-rhow { margin: 6px 0 0; color: var(--wk-soft); }
.wp-rperson { margin: 10px 0 0; }
/* a household of many: the people further down the sheet are laid out when they scroll near (opening stays light) */
.wp-rrow { content-visibility: auto; contain-intrinsic-size: auto 112px; }
.wp-rwho { margin: 0; padding: 12px 0 0; border-top: 1px solid rgba(163, 133, 74, .45); font: italic 500 20px / 1.2 var(--wk-display); color: var(--wp-ink); overflow-wrap: anywhere; }
.wp-rquick { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin: 0; color: var(--wk-soft); }
.wp-rquick .wk-link { font-size: 13.5px; }
.wp-rrow { position: relative; padding: 10px 0 12px 12px; border-bottom: 1px solid var(--wk-rule); scroll-margin: 96px 0 150px; }
.wp-rrow::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 2px; background: var(--ec, var(--wp-gold)); }
.wp-rev { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 10px; }
.wp-rev b { font: italic 500 17.5px / 1.2 var(--wk-display); color: color-mix(in srgb, var(--ec, var(--wk-ink)) 58%, #1e1a28); overflow-wrap: anywhere; }
.wp-rev small { font: 400 13px / 1.3 var(--wk-text); color: var(--wk-soft); white-space: nowrap; }
.wp-yn { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.wp-yn button, .wp-chips button { min-height: 44px; padding: 6px 10px; border: 1px solid rgba(163, 133, 74, .7); border-radius: 3px; background: rgba(255, 253, 248, .8); font: 600 15px / 1.15 var(--wk-text); color: var(--wp-ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wp-yn button[aria-checked="true"], .wp-chips button[aria-checked="true"] { background: var(--wk-btn); border-color: var(--wk-btn); color: var(--wk-onbtn); box-shadow: inset 0 0 0 2px var(--wk-btn), inset 0 0 0 3px rgba(216, 195, 147, .8); }
.wp-rmeal { margin-top: 10px; }
.wp-rmeal .wk-label { margin: 0 0 6px; }
.wp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wp-chips button { flex: 1 1 auto; font-style: italic; font-weight: 500; }
.wp-rrow.is-missing::before { background: #8c2234; width: 4px; }
.wp-rrow.is-missing .wp-yn button:not([aria-checked="true"]), .wp-rrow.is-missing .wp-rmeal:not([hidden]) .wp-chips button:not([aria-checked="true"]) { border-color: #8c2234; }
.wp-rsvp .wp-rnone { margin-top: 16px; }
.wp-rsvp .wp-rnone[aria-pressed="true"] { background: var(--wk-btn); color: var(--wk-onbtn); }
.wp-rextras { margin-top: 6px; }
.wp-rsvp .wk-privlink { display: block; margin: 8px auto 0; font-size: 13px; }
.wp-rfoot { position: sticky; bottom: 0; z-index: 2; margin: 14px -18px 0; padding: 14px 18px calc(14px + var(--wk-safe-b)); background: linear-gradient(180deg, rgba(255, 253, 248, 0) 0, var(--wk-paper) 14px); }
.wp-rfoot .wk-error { margin: 0 0 8px; text-align: center; font: italic 500 14.5px / 1.35 var(--wk-text); color: #8c2234; }
.wp-rfoot .wp-rsend { margin: 0; }
/* the foot of the Pass's Days: "Change my reply" and "Made with Occasi" */
.wp-passfoot { display: grid; justify-items: center; margin: 18px 0 4px; padding-top: 6px; border-top: 1px solid rgba(163, 133, 74, .3); }
.wp-passfoot .wk-link { font-size: 14px; }
.wp-passfoot .wk-made { margin: 4px 0 2px; }
.wk-scene-join.is-sending .wp-cardglow::after { animation: none; opacity: 1; }
.wk-scene-join.is-falling .wp-band { opacity: 0; pointer-events: none; transition: opacity .4s ease; }

/* ---- the save-the-date ----------------------------------------------------------------------------------------------------- */
.wp-scene-std { height: 100%; }
.wp-stdbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wp-stdbtns .wp-btn { padding: 0 8px; letter-spacing: .14em; }
.wp-for { margin: 0 0 2px; font: italic 400 15px / 1.3 var(--wk-text); color: var(--wp-ink); text-wrap: balance; }

/* ---- progress dots on the pictures ----------------------------------------------------------------------------------------- */
/* every control on the film is at least 44 px (the dots keep their size; their buttons are taller) */
.wp-film .wk-film .wk-arrow, .wp-film .wk-meal .wk-link { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
.wp-film .wk-meal .wk-link { width: auto; }
.wp-film .wk-progress { gap: 0; }
.wp-film .wk-progress button { width: 44px; height: 44px; }
.wp-film .wk-progress i { background: rgba(251, 248, 241, .8); box-shadow: 0 0 0 1px rgba(163, 133, 74, .95); }
.wp-film .wk-progress [aria-current] i { background: var(--wp-gold); box-shadow: 0 0 0 1px var(--wp-ivory); }

/* ---- the Pass, in ivory silk and gold ------------------------------------------------------------------------------------ */
.wp-film.wk-root .wk-pass { background: linear-gradient(180deg, #f8f4ec 0%, #f3eee4 100%); }
.wp-film.wk-root .wk-phead { position: relative; overflow: hidden; border-bottom: 1px solid rgba(163, 133, 74, .55); background: #efe9dd url('../assets/signatures/white-pavilion/stills/pass-head.webp') 50% 38% / cover no-repeat; }
.wp-film.wk-root .wk-phead::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(250, 246, 238, .7) 0%, rgba(250, 246, 238, .9) 60%, rgba(250, 246, 238, .97) 100%); }
.wp-film.wk-root .wk-phead > * { position: relative; }
.wp-film.wk-root .wk-pname { font-weight: 500; color: var(--wp-ink); }
.wp-film.wk-root .wk-seal, .wp-seal { background: radial-gradient(circle at 34% 28%, #fffdf6 0%, #f6efdd 40%, #e6d6ad 75%, #cdb27a 100%); color: #4a3a1c; box-shadow: 0 2px 6px -2px rgba(60, 46, 20, .45), inset 0 0 0 2px rgba(163, 133, 74, .85), inset 0 0 0 4px #fbf6e8, inset 0 0 0 5px rgba(163, 133, 74, .5); }
.wp-film.wk-root .wk-seal { display: flex; align-items: center; justify-content: center; }
.wp-film.wk-root .wk-tabbar { background: var(--wp-ivory); border-top: 1px solid rgba(163, 133, 74, .55);
  /* the gilded chair: two hairlines with a row of bamboo spindles between them */
  box-shadow: inset 0 3px 0 var(--wp-ivory), inset 0 4px 0 rgba(163, 133, 74, .3); }
.wp-film.wk-root .wk-tab[aria-selected="true"] .wk-ico { color: var(--wp-gold); }
.wp-film.wk-root .wk-chip b, .wp-film.wk-root .wk-chip[aria-selected="true"] b { background: #efe4c8 radial-gradient(circle at 35% 30%, #fffdf6, #efe4c8 60%, #d6bf8c); color: #3f3118; }
.wp-film.wk-root .wk-band { position: relative; background: var(--ec) linear-gradient(160deg, var(--ec), color-mix(in srgb, var(--ec) 78%, #2a1f0e)); }
.wp-film.wk-root .wk-band::after { content: ''; position: absolute; right: 12px; top: 8px; bottom: 8px; width: 46px; pointer-events: none; opacity: .38;
  background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(255, 236, 190, .9) 6px 8px, transparent 8px 13px), linear-gradient(rgba(255, 236, 190, .9), rgba(255, 236, 190, .9)) 0 30% / 100% 1.5px no-repeat; }
.wp-film.wk-root .wk-placecard, .wp-film.wk-root .wk-mapcard, .wp-film.wk-root .wk-next { box-shadow: var(--wk-shadow), inset 0 0 0 5px var(--wk-paper), inset 0 0 0 6px rgba(163, 133, 74, .25); }
.wp-film.wk-root .wk-btn { box-shadow: inset 0 0 0 3px var(--wk-btn), inset 0 0 0 4px rgba(216, 195, 147, .8); font-family: 'Cormorant', Georgia, serif; font-size: 12px; font-weight: 700; letter-spacing: .2em; }
.wp-film.wk-root .wk-btn.wk-ghost { box-shadow: inset 0 0 0 1px rgba(163, 133, 74, .85); background: rgba(255, 253, 248, .7); }
.wp-film .wk-sheet .wk-sheetin { background: var(--wk-paper); border-top: 1px solid var(--wk-gold); box-shadow: 0 -10px 30px -12px rgba(60, 46, 20, .45), inset 0 5px 0 var(--wk-paper), inset 0 6px 0 rgba(163, 133, 74, .4); }
.wp-film .wk-sheet::backdrop { background: rgba(48, 38, 20, .4); }
.wp-film.wk-root .wk-kicker, .wp-film.wk-root .wk-label { font-family: 'Cormorant', Georgia, serif; font-weight: 700; font-size: 10px; }
/* the moment the reply makes the pass: the place card on its chair, among the petals that just fell */
.wp-film.wk-root .wk-moment { background: #e9e3d6 url('../assets/signatures/white-pavilion/stills/page6.webp') 38% 55% / cover no-repeat; place-items: safe end center; overflow-y: auto; overscroll-behavior: contain; padding-top: calc(16px + var(--wk-safe-t)); padding-bottom: calc(20px + var(--wk-safe-b)); }
.wp-film.wk-root .wk-moment:has([data-wk-moment-close="memories"]) { background-image: url('../assets/signatures/white-pavilion/stills/page2.webp'); background-position: 50% 70%; }
.wp-film.wk-root .wk-momentcard { background: rgba(251, 248, 241, .95); box-shadow: var(--wp-frame); border-radius: 2px; }
.wp-seal { display: grid; place-items: center; width: 74px; height: 74px; margin: -4px auto 8px; border-radius: 50%; font: italic 500 22px / 1 var(--wk-display); animation: wp-press .9s cubic-bezier(.3, 1.4, .5, 1) both; }
.wp-seal i { font-size: .7em; padding: 0 2px; opacity: .8; }
@keyframes wp-press { from { transform: scale(1.3); opacity: 0; } }
.wp-countobj { display: grid; place-items: center; align-content: center; gap: 2px; width: 150px; height: 150px; margin: 14px auto 8px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #fffdf6 0%, #f7f0e0 50%, #eadcb8 100%); box-shadow: inset 0 0 0 2px rgba(163, 133, 74, .8), inset 0 0 0 6px #fbf6e8, inset 0 0 0 7px rgba(163, 133, 74, .45), 0 10px 26px -14px rgba(60, 46, 20, .55); color: var(--wp-ink); }
.wp-countobj b { font: italic 500 46px / 1 var(--wk-display); }
.wp-countobj .wp-kicker { font: 700 9px / 1.3 'Cormorant', Georgia, serif; letter-spacing: .2em; text-transform: uppercase; color: #5e5240; }
.wp-sheetimg { display: block; width: 100%; max-height: 52svh; object-fit: contain; margin: 4px 0 8px; background: #f1ece2; }
.wp-sheettext { font: 400 15px / 1.55 var(--wk-text); }

/* ---- the preview bar (the owner's review only) --------------------------------------------------------------------------- */
.wp-bar { position: fixed; z-index: 60; top: 6px; left: 50%; transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; max-width: calc(100vw - 12px); padding: 5px 10px; border-radius: 14px; background: rgba(251, 248, 241, .94); box-shadow: 0 6px 16px -10px rgba(40, 32, 16, .7); font: 400 11px / 1.4 'EB Garamond', Georgia, serif; color: #2f2a23; }
.wp-bar span { display: inline-flex; gap: 6px; }
.wp-bar-k { font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 9px; align-self: center; }
.wp-bar a { color: inherit; }
.wp-bar a[aria-current] { font-weight: 700; text-decoration-color: #a3854a; }
/* v196: the public sample opened from the invitations page (?view=1, js/occasi-sample-view.js) shows Occasi's "Collection"
   and "Make it yours" instead; like the other Signatures, it has no preview options. */
html.osv-on .wp-bar { display: none !important; }
/* On a phone the scenes are full screen: "Collection" is the arrow alone (its name stays for screen readers), clear of the top
   band's words, and the foot of each scene sits above "Make it yours" instead of under it. */
@media (max-width: 699px) {
  html.osv-on .osv-back { width: 44px; min-height: 44px; padding: 0; gap: 0; justify-content: center; font-size: 0; }
  html.osv-on .wp-band.wp-bot { bottom: calc(80px + var(--wk-safe-b)); }
}
.wp-error { margin: 30vh auto 0; max-width: 340px; padding: 16px; text-align: center; font: italic 400 16px / 1.4 'EB Garamond', Georgia, serif; color: #2f2a23; }

/* ---- desktop: the same phone, centred in the pavilion -------------------------------------------------------------------- */
@media (min-width: 700px) {
  body.wp-film-page { background: #e7e1d4 url('../assets/signatures/white-pavilion/stills/backdrop.webp') 50% 50% / cover no-repeat fixed; }
  body.wp-film-page::before { content: ''; position: fixed; inset: 0; background: linear-gradient(180deg, rgba(246, 241, 231, .55), rgba(240, 234, 222, .7)); }
  .wp-film.wk-root { --wk-app: 400px; --wp-fh: min(860px, calc(100vh - 48px)); }
  .wp-film.wk-root .wk-app, .wp-film.wk-root .wk-app[data-view="film"], .wp-film.wk-root .wk-app[data-view="std"], .wp-film.wk-root .wk-app[data-view="lang"] {
    left: calc(50% - 200px); width: 400px; top: calc(50% - var(--wp-fh) / 2); bottom: auto; height: var(--wp-fh); border-radius: 30px; background: #d9d3c6;
    box-shadow: 0 0 0 9px #fbf8f1, 0 0 0 10px rgba(163, 133, 74, .55), 0 40px 90px -30px rgba(40, 32, 16, .55); }
  .wp-film.wk-root .wk-app[data-view="film"] .wk-scene > *, .wp-film.wk-root .wk-app[data-view="std"] .wk-scene > * { max-width: none; }
  .wp-film.wk-root .wk-app[data-view="film"] .wk-progress { right: 0; }
  .wp-film .wk-sheet { width: 400px; top: calc(50% - var(--wp-fh) / 2); bottom: auto; height: var(--wp-fh); max-height: var(--wp-fh); border-radius: 30px; }
}
/* ---- v199, a computer: the film framed beside its words (css/occasi-pass.css), in the pavilion; the Pass full width ---- */
@media (min-width: 1024px) and (min-height: 600px) {
  .wp-film.wk-root { --wkd-names: 'Great Vibes', 'Snell Roundhand', cursive; }
  .wp-film.wk-root .wk-app[data-view="film"], .wp-film.wk-root .wk-app[data-view="std"] { top: var(--wkd-tm); left: var(--wkd-x); width: var(--wkd-fw); height: var(--wkd-fh); border-radius: 4px;
    box-shadow: 0 0 0 8px #fbf8f1, 0 0 0 9px rgba(163, 133, 74, .55), 0 40px 90px -30px rgba(40, 32, 16, .55); }
  .wp-film.wk-root .wk-app[data-view="pass"], .wp-film.wk-root .wk-app[data-view="lang"] { top: 0; bottom: 0; left: 0; width: 100%; height: auto; border-radius: 0; box-shadow: none; }
  .wp-film .wk-sheet { top: 0; bottom: 0; width: min(620px, calc(100vw - 48px)); height: fit-content; max-height: calc(100vh - 48px); border-radius: 0; }
  .wp-film .wk-sheet.wp-rsvp .wk-sheetin { top: auto; max-height: calc(100vh - 48px); }
  .wp-film .wk-sheet.wp-rsvp .wk-sheetbody { flex: 1 1 auto; }
  .wp-film.wk-root .wkd-panel { background: rgba(251, 248, 241, .96); box-shadow: var(--wp-frame); border-radius: 2px; }
  .wp-film.wk-root .wkd-names { font-weight: 400; font-style: normal; line-height: 1.08; font-size: clamp(46px, 4.2vw, 68px); color: #3a2e1c; }
  .wp-film.wk-root .wkd-h { font-weight: 400; font-style: normal; color: #3a2e1c; font-size: clamp(36px, 3.2vw, 48px); }
  .wp-film.wk-root .wkd-panel .wk-kicker, .wp-film.wk-root .wkd-date, .wp-film.wk-root .wkd-dayh, .wp-film.wk-root .wkd-year { font-family: 'Cormorant', Georgia, serif; font-weight: 700; }
  .wp-film.wk-root .wk-pass.is-desk .wk-phead { background-position: 50% 30%; }
  .wp-film.wk-root .wk-pass.is-desk .wk-tabbar { background: transparent; border-top: 0; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .wp-cue i, .wp-cardglow::after, .wp-seal, .wp-lyr { animation: none; } .wp-v { display: none; } .wp-gls { display: none; } }
/* v242 (usability study: older guests missed the small italic links): "At everything" / "None of them" are buttons,
   16 px, at least 44 px tall, side by side under each person's name; the chosen one is filled when every event agrees. */
.wp-rquick { gap: 8px; margin: 8px 0 2px; }
.wp-rquick > span[aria-hidden] { display: none; }
.wp-rquick .wk-link { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0; min-height: 44px; padding: 0 14px; border: 1px solid var(--wp-gold, #a3854a);
  border-radius: 999px; background: rgba(255, 253, 248, .9); color: var(--wp-ink, #2b2a33); font: 500 16px / 1.15 var(--wk-text); font-style: normal; text-decoration: none; text-align: center; }
.wp-rquick .wk-link[aria-pressed="true"] { background: var(--wk-btn); border-color: var(--wk-btn); color: var(--wk-onbtn); }
.wp-rquick .wk-link:focus-visible { outline: 3px solid var(--wp-gold, #a3854a); outline-offset: 2px; }
/* the celebrations stop: where the walk goes next (as the hero's "4 celebrations"), under the details button */
.wp-scene-weekend .wp-nextcue { margin: 6px auto 0; }
/* v244 (usability study #2, #10): the aisle's words over the end of the opening film (js: wp-earlyfilm), in full by ~5 s */
.wp-openlayer .wp-earlyfilm { position: absolute; inset: 0; z-index: 3; overflow: hidden; scroll-snap-type: none; background: none; opacity: 0; transition: opacity .8s ease-out; pointer-events: none; }
.wp-openlayer .wp-earlyfilm.is-on { opacity: 1; }
.wp-openlayer .wp-earlyfilm > .wk-scene { position: absolute; inset: 0; height: 100%; background: none !important; }
.wp-openlayer .wp-earlyfilm .wp-art { background: none !important; }
@media (prefers-reduced-motion: reduce) { .wp-openlayer .wp-earlyfilm { transition: none; } }