/* =====================================================================
   Wedding Stories for Facebook
   ===================================================================== */

.wsf-index,
.wsf-story {
	--wsf-accent: #e0486b;
	--wsf-accent-rgb: 224, 72, 107;
	--wsf-serif: "Cormorant Garamond", "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
	--wsf-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------------------------------------------------
   The pulsing heart (used everywhere a heart appears in a title)
   ------------------------------------------------------------------- */
.wsf-heart-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: .78em;
	height: .78em;
	margin: 0 .34em;
	vertical-align: middle;
	flex: 0 0 auto;
}
.wsf-heart-wrap::before {
	content: "";
	position: absolute;
	inset: 12%;
	border-radius: 50%;
	background: rgba(var(--wsf-accent-rgb), .55);
	animation: wsf-ripple 1.8s ease-out infinite;
}
.wsf-heart {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	fill: var(--wsf-accent);
	filter: drop-shadow(0 0 .3em rgba(var(--wsf-accent-rgb), .7));
	transform-origin: 50% 55%;
	animation: wsf-beat 1.8s ease-in-out infinite;
}
@keyframes wsf-beat {
	0%, 100% { transform: scale(1); }
	12%      { transform: scale(1.3); }
	24%      { transform: scale(.98); }
	38%      { transform: scale(1.18); }
	60%      { transform: scale(1); }
}
@keyframes wsf-ripple {
	0%   { transform: scale(.6); opacity: .7; }
	70%  { transform: scale(2.6); opacity: 0; }
	100% { transform: scale(2.6); opacity: 0; }
}

/* ---------------------------------------------------------------------
   Wedding list  (clean editorial: photo first, names underneath)
   ------------------------------------------------------------------- */
.wsf-index {
	display: grid;
	grid-template-columns: repeat(var(--wsf-index-cols, 3), minmax(0, 1fr));
	gap: clamp(30px, 3.6vw, 52px) clamp(18px, 2.4vw, 34px);
	width: 100%;
}

.wsf-card {
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none !important;
	background: none;
	outline-offset: 8px;
	-webkit-tap-highlight-color: transparent;
}
.wsf-card:hover,
.wsf-card:focus-visible { color: inherit; }
.wsf-card:focus-visible { outline: 2px solid var(--wsf-accent); }
.wsf-card.wsf-pre { opacity: 0; transform: translateY(22px); }
.wsf-card.is-in   { animation: wsf-rise .9s cubic-bezier(.2, .8, .2, 1) var(--wsf-delay, 0s) backwards; }
@keyframes wsf-rise { from { opacity: 0; transform: translateY(22px); } }

.wsf-card-media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 10px;
	background: #efe8e2;
	box-shadow: 0 1px 2px rgba(40, 25, 30, .06), 0 18px 38px -18px rgba(40, 25, 30, .35);
	transition: box-shadow .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
}
.wsf-card-media img,
.wsf-cover-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 1.2s cubic-bezier(.2, .8, .2, 1);
}
.wsf-card:hover .wsf-card-media { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(40, 25, 30, .06), 0 26px 46px -16px rgba(40, 25, 30, .4); }
.wsf-card:hover .wsf-card-media img { transform: scale(1.045); }
.wsf-cover-ph {
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 100%;
	font: 500 3.6rem/1 var(--wsf-serif);
	color: rgba(255, 255, 255, .9);
	background: linear-gradient(135deg, rgba(var(--wsf-accent-rgb), .75), #c99a7a);
}

.wsf-card-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 7px;
	padding: 18px 2px 0;
}
.wsf-card-label {
	font: 600 .68rem/1 var(--wsf-sans);
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--wsf-accent);
}
.wsf-card-names {
	display: flex; flex-wrap: wrap; align-items: center;
	font: 500 clamp(1.3rem, 2vw, 1.75rem)/1.2 var(--wsf-serif);
	letter-spacing: .005em;
}
.wsf-card-sub {
	font: 400 .88rem/1.4 var(--wsf-sans);
	opacity: .6;
}
.wsf-card-cta {
	display: inline-flex; align-items: center; gap: 8px;
	margin-top: 6px;
	font: 600 .7rem/1 var(--wsf-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	opacity: 0;
	transform: translateX(-8px);
	transition: opacity .4s ease, transform .5s cubic-bezier(.2, .8, .2, 1), color .3s ease;
}
.wsf-card:hover .wsf-card-cta,
.wsf-card:focus-visible .wsf-card-cta { opacity: 1; transform: none; color: var(--wsf-accent); }
@media (hover: none) {
	.wsf-card-cta { opacity: .65; transform: none; }
}

/* --- circles style --- */
.wsf-style-circles .wsf-card { align-items: center; text-align: center; }
.wsf-style-circles .wsf-card-media {
	width: 100%; max-width: 220px;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(43, 32, 36, .12);
}
.wsf-style-circles .wsf-card:hover .wsf-card-media {
	box-shadow: 0 0 0 3px var(--wsf-gap, #fff), 0 0 0 5px var(--wsf-accent);
	transform: none;
}
.wsf-style-circles .wsf-card-body { align-items: center; padding-top: 16px; }
.wsf-style-circles .wsf-card-names { justify-content: center; font-size: clamp(1.1rem, 1.7vw, 1.35rem); }
.wsf-style-circles .wsf-card-cta { display: none; }

@media (max-width: 782px) {
	.wsf-index { --wsf-index-cols: 2 !important; gap: 30px 14px; }
	.wsf-card-media { border-radius: 8px; }
	.wsf-card-body { padding-top: 14px; gap: 5px; }
	.wsf-card-names { font-size: 1.15rem; }
	.wsf-card-sub { font-size: .8rem; }
}

/* ---------------------------------------------------------------------
   Story page  (light, glowing-white theme)
   ------------------------------------------------------------------- */
html.wsf-lock { overflow: hidden; }

.wsf-story {
	--wsf-ink: #2b2024;
	--wsf-ink-soft: rgba(43, 32, 36, .66);
	--wsf-line: rgba(43, 32, 36, .1);
	position: fixed; inset: 0;
	z-index: 999990;
	color: var(--wsf-ink);
	background: #fffaf6;
	font-family: var(--wsf-sans);
	opacity: 0; visibility: hidden;
	transition: opacity .45s ease, visibility 0s linear .45s;
}
.wsf-story.is-open { opacity: 1; visibility: visible; transition: opacity .45s ease; }

/* glowing white canvas with slow drifting colour light */
.wsf-story-bg {
	position: absolute; inset: 0; overflow: hidden;
	background:
		radial-gradient(1100px 640px at 14% -8%, #ffffff 0%, rgba(255,255,255,0) 62%),
		linear-gradient(180deg, #fffdfb 0%, #fff7f1 55%, #fdeee6 100%);
	pointer-events: none;
}
.wsf-story-bg::before,
.wsf-story-bg::after {
	content: ""; position: absolute; border-radius: 50%;
	width: 62vmax; height: 62vmax;
	will-change: transform;
}
.wsf-story-bg::before {
	left: -22vmax; top: -22vmax;
	background: radial-gradient(circle, rgba(var(--wsf-accent-rgb), .17), rgba(var(--wsf-accent-rgb), 0) 66%);
	animation: wsf-blob-a 22s ease-in-out infinite alternate;
}
.wsf-story-bg::after {
	right: -24vmax; bottom: -24vmax;
	background: radial-gradient(circle, rgba(246, 201, 154, .42), rgba(246, 201, 154, 0) 66%);
	animation: wsf-blob-b 26s ease-in-out infinite alternate;
}
@keyframes wsf-blob-a { to { transform: translate3d(14vmax, 10vmax, 0) scale(1.12); } }
@keyframes wsf-blob-b { to { transform: translate3d(-12vmax, -9vmax, 0) scale(1.1); } }

.wsf-story-hearts { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.wsf-fh {
	position: absolute; bottom: -40px;
	width: var(--s, 14px); height: var(--s, 14px);
	opacity: 0;
	animation: wsf-float var(--t, 14s) linear var(--d, 0s) infinite;
}
.wsf-fh .wsf-heart { animation: none; filter: none; fill: rgba(var(--wsf-accent-rgb), .4); }
@keyframes wsf-float {
	0%   { transform: translate3d(0, 0, 0) scale(.8); opacity: 0; }
	10%  { opacity: .7; }
	80%  { opacity: .3; }
	100% { transform: translate3d(var(--x, 0), -110vh, 0) scale(1.2); opacity: 0; }
}

.wsf-story-progress {
	position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 8;
	background: rgba(43, 32, 36, .05);
}
.wsf-story-progress span {
	display: block; height: 100%;
	background: linear-gradient(90deg, var(--wsf-accent), #f1b27c);
	transform-origin: 0 50%; transform: scaleX(0);
}

/* top bar */
.wsf-story-bar {
	position: absolute; top: 0; left: 0; right: 0; z-index: 7;
	display: flex; align-items: center; gap: 12px;
	padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 14px;
	border-bottom: 1px solid transparent;
	transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.wsf-story.is-scrolled .wsf-story-bar {
	background: rgba(255, 252, 249, .8);
	backdrop-filter: blur(18px) saturate(170%);
	-webkit-backdrop-filter: blur(18px) saturate(170%);
	border-bottom-color: var(--wsf-line);
	box-shadow: 0 8px 30px rgba(120, 60, 70, .07);
}
.wsf-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; padding: 0;
	color: var(--wsf-ink);
	background: rgba(255, 255, 255, .82);
	border: 1px solid var(--wsf-line);
	border-radius: 50%;
	box-shadow: 0 6px 18px rgba(120, 60, 70, .12);
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	cursor: pointer; text-decoration: none;
	transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.wsf-btn:hover, .wsf-btn:focus-visible {
	color: var(--wsf-accent); background: #fff; transform: scale(1.07);
	box-shadow: 0 10px 24px rgba(var(--wsf-accent-rgb), .25); outline: none;
}
.wsf-btn:focus-visible { box-shadow: 0 0 0 2px var(--wsf-accent); }
.wsf-story-actions { display: flex; gap: 10px; }
.wsf-story-mini {
	flex: 1; min-width: 0;
	display: flex; align-items: center; justify-content: center;
	font: 500 1.25rem/1 var(--wsf-serif);
	color: var(--wsf-ink);
	white-space: nowrap; overflow: hidden;
	opacity: 0; transform: translateY(8px);
	transition: opacity .35s ease, transform .35s ease;
}
.wsf-story.is-scrolled .wsf-story-mini { opacity: 1; transform: none; }

.wsf-story-scroll {
	position: absolute; inset: 0; z-index: 4;
	overflow-y: auto; overflow-x: hidden;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	outline: none;
	scrollbar-width: thin;
	scrollbar-color: rgba(43, 32, 36, .25) transparent;
}

/* ---- hero: square photo + names (clean, no overlays) ---- */
.wsf-hero {
	padding: calc(92px + env(safe-area-inset-top, 0px)) clamp(18px, 4vw, 48px) clamp(34px, 5vw, 60px);
}
.wsf-hero-grid {
	max-width: 1080px; margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
	align-items: center;
	gap: clamp(36px, 7vw, 100px);
}
.wsf-hero-grid.wsf-no-cover { grid-template-columns: minmax(0, 1fr); text-align: center; }
.wsf-hero-grid.wsf-no-cover .wsf-hero-photo { display: none; }

.wsf-hero-photo { position: relative; width: 100%; aspect-ratio: 1 / 1; }
.wsf-hero-photo::before { /* fine offset frame */
	content: ""; position: absolute; inset: 0; z-index: 0;
	transform: translate(16px, 16px);
	border: 1px solid rgba(var(--wsf-accent-rgb), .38);
	border-radius: 12px;
}
.wsf-hero-photo img {
	position: relative; z-index: 1;
	width: 100%; height: 100%;
	object-fit: cover; display: block;
	border-radius: 12px;
	box-shadow: 0 34px 60px -24px rgba(60, 25, 35, .4);
}
.wsf-story.is-open .wsf-hero-photo { animation: wsf-up 1s cubic-bezier(.2, .8, .2, 1) .1s both; }
.wsf-story.is-open .wsf-hero-text > * { animation: wsf-up 1s cubic-bezier(.2, .8, .2, 1) both; }
.wsf-story.is-open .wsf-hero-text > :nth-child(1) { animation-delay: .3s; }
.wsf-story.is-open .wsf-hero-text > :nth-child(2) { animation-delay: .42s; }
.wsf-story.is-open .wsf-hero-text > :nth-child(3) { animation-delay: .54s; }
.wsf-story.is-open .wsf-hero-text > :nth-child(4) { animation-delay: .66s; }
@keyframes wsf-up { from { opacity: 0; transform: translateY(22px); } }

.wsf-hero-text { display: flex; flex-direction: column; align-items: flex-start; }
.wsf-hero-grid.wsf-no-cover .wsf-hero-text { align-items: center; }

.wsf-eyebrow {
	display: flex; align-items: center; gap: 14px;
	margin: 0 0 18px;
	font: 600 .72rem/1 var(--wsf-sans);
	letter-spacing: .34em; text-transform: uppercase;
	color: var(--wsf-accent);
}
.wsf-eyebrow:empty { display: none; }
.wsf-eyebrow::before { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .6; }

.wsf-names {
	display: flex; flex-wrap: wrap; align-items: center;
	margin: 0;
	font: 500 clamp(2.3rem, 5vw, 3.9rem)/1.08 var(--wsf-serif);
	letter-spacing: .005em;
	color: var(--wsf-ink);
}
.wsf-hero-grid.wsf-no-cover .wsf-names { justify-content: center; }
.wsf-names .wsf-heart-wrap { margin: 0 .3em; }

.wsf-sub {
	margin: 16px 0 0;
	font: italic 400 clamp(1.05rem, 2vw, 1.3rem)/1.45 var(--wsf-serif);
	color: var(--wsf-ink-soft);
}

.wsf-scroll-cue {
	display: flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; padding: 0; margin-top: 36px;
	color: var(--wsf-ink);
	background: #fff;
	border: 1px solid var(--wsf-line);
	border-radius: 50%;
	box-shadow: 0 8px 22px rgba(120, 60, 70, .12);
	cursor: pointer;
	transition: color .3s ease, background .3s ease, transform .3s ease;
}
.wsf-scroll-cue:hover, .wsf-scroll-cue:focus-visible { color: #fff; background: var(--wsf-accent); border-color: transparent; outline: none; }
.wsf-scroll-cue svg { animation: wsf-bob 1.8s ease-in-out infinite; }
@keyframes wsf-bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }

/* ---- body & gallery ---- */
.wsf-story-body {
	max-width: 1400px; margin: 0 auto;
	padding: clamp(28px, 4vw, 54px) clamp(12px, 3vw, 32px) 40px;
}
.wsf-status { text-align: center; }
.wsf-status.is-error { padding: 40px 0 20px; }
.wsf-status-msg { margin: 0 0 18px; color: var(--wsf-ink-soft); }

.wsf-gallery {
	--wsf-columns: 3;
	--wsf-gutter: 10px;
	display: grid;
	grid-template-columns: repeat(var(--wsf-columns), minmax(0, 1fr));
	gap: var(--wsf-gutter);
	width: 100%;
}
.wsf-gallery .wsf-item {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 14px;
	cursor: zoom-in;
	background: rgba(var(--wsf-accent-rgb), .05);
	box-shadow: 0 10px 30px rgba(120, 60, 70, .12);
	transition: box-shadow .4s ease;
}
.wsf-gallery .wsf-item-loaded:hover { box-shadow: 0 18px 44px rgba(var(--wsf-accent-rgb), .25); }
.wsf-gallery .wsf-item:focus-visible { outline: 2px solid var(--wsf-accent); outline-offset: 2px; }

.wsf-gallery.wsf-layout-grid .wsf-item { aspect-ratio: 3 / 2; }
.wsf-gallery.wsf-layout-grid .wsf-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

.wsf-gallery.wsf-layout-masonry { grid-auto-rows: 8px; }
.wsf-gallery.wsf-layout-masonry .wsf-item img { width: 100%; height: auto; display: block; }
.wsf-gallery.wsf-layout-masonry .wsf-item-pending { grid-row-end: span 12; }
.wsf-gallery.wsf-layout-masonry .wsf-ghost { grid-row-end: span 30; }

.wsf-gallery .wsf-item img {
	opacity: 0;
	transform: scale(1.05);
	transition: opacity .7s ease, transform 1s cubic-bezier(.2, .8, .2, 1);
}
.wsf-gallery .wsf-item-loaded img { opacity: 1; transform: scale(1); }
.wsf-gallery .wsf-item-loaded:hover img { transform: scale(1.045); }

/* Liquid-glass skeleton, tuned for the light canvas */
.wsf-item-pending {
	position: relative; overflow: hidden;
	background: linear-gradient(135deg, rgba(var(--wsf-accent-rgb), .08) 0%, rgba(246, 201, 154, .22) 100%);
	backdrop-filter: blur(16px) saturate(160%);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, .9);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 8px 24px rgba(120, 60, 70, .08);
}
.wsf-item-pending::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(115deg, rgba(255,255,255,0) 25%, rgba(255,255,255,.85) 48%, rgba(255,255,255,.2) 52%, rgba(255,255,255,0) 75%);
	background-size: 220% 100%;
	animation: wsf-shimmer 2s ease-in-out infinite;
}
.wsf-item-pending::before {
	content: ""; position: absolute; top: -40%; left: -20%; width: 60%; height: 60%;
	background: radial-gradient(circle, rgba(var(--wsf-accent-rgb), .18) 0%, rgba(var(--wsf-accent-rgb), 0) 70%);
	animation: wsf-glow2 3.6s ease-in-out infinite;
	pointer-events: none;
}
@keyframes wsf-glow2 { 0%, 100% { opacity: .5; transform: translate(0,0); } 50% { opacity: 1; transform: translate(10%,15%); } }
@keyframes wsf-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }

@media (max-width: 782px) {
	.wsf-gallery { --wsf-columns: 2 !important; }
	.wsf-hero { padding-top: calc(76px + env(safe-area-inset-top, 0px)); }
	.wsf-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 38px; text-align: center; }
	.wsf-hero-photo { max-width: 440px; width: calc(100% - 12px); margin: 0 auto; }
	.wsf-hero-photo::before { transform: translate(10px, 10px); }
	.wsf-hero-text { align-items: center; }
	.wsf-names { justify-content: center; }
	.wsf-story-bar { padding-left: 12px; padding-right: 12px; }
	.wsf-btn { width: 40px; height: 40px; }
}

/* ---- footer ---- */
.wsf-story-foot {
	display: flex; flex-direction: column; align-items: center; gap: 22px;
	padding: 46px 24px calc(80px + env(safe-area-inset-bottom, 0px));
	text-align: center;
}
.wsf-foot-names {
	display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
	font: 500 1.8rem/1.2 var(--wsf-serif);
	color: var(--wsf-ink);
}
.wsf-pill {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 14px 28px;
	font: 600 .8rem/1 var(--wsf-sans);
	letter-spacing: .14em; text-transform: uppercase;
	color: #fff; text-decoration: none;
	background: var(--wsf-ink);
	border: 1px solid transparent;
	border-radius: 999px;
	box-shadow: 0 12px 28px rgba(43, 32, 36, .22);
	cursor: pointer;
	transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.wsf-pill:hover, .wsf-pill:focus-visible {
	color: #fff; background: var(--wsf-accent); transform: translateY(-2px);
	box-shadow: 0 16px 34px rgba(var(--wsf-accent-rgb), .4); outline: none;
}

.wsf-toast {
	position: absolute; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); z-index: 9;
	transform: translate(-50%, 20px);
	padding: 11px 20px;
	font: 500 .85rem/1 var(--wsf-sans);
	color: #fff;
	background: rgba(43, 32, 36, .92);
	border-radius: 999px;
	opacity: 0; pointer-events: none;
	transition: opacity .3s ease, transform .3s ease;
}
.wsf-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------------
   Lightbox (same as Simple Gallery's, plus counter)
   ------------------------------------------------------------------- */
.wsf-lightbox-overlay {
	position: fixed; inset: 0;
	background: rgba(0, 0, 0, .94);
	display: flex; align-items: center; justify-content: center;
	z-index: 1000000;
	padding: 20px;
	animation: wsf-fade .25s ease both;
}
@keyframes wsf-fade { from { opacity: 0; } }
.wsf-lightbox-overlay > img {
	max-width: 92vw; max-height: 72vh;
	object-fit: contain; border-radius: 4px;
	opacity: 0; transform: scale(.985);
	transition: opacity .3s ease, transform .3s ease;
	-webkit-user-drag: none; user-select: none;
}
.wsf-lightbox-overlay > img.is-in { opacity: 1; transform: none; }
.wsf-lightbox-counter {
	position: absolute; top: 22px; left: 22px;
	color: rgba(255,255,255,.8);
	font: 500 .85rem/1 var(--wsf-sans, system-ui);
	letter-spacing: .12em;
}
.wsf-lightbox-thumbs {
	position: absolute; bottom: 0; left: 0; right: 0;
	display: flex; gap: 8px; padding: 12px 16px;
	overflow-x: auto;
	background: rgba(0, 0, 0, .5);
	scrollbar-width: thin;
}
.wsf-lightbox-thumb {
	flex: 0 0 auto; width: 64px; height: 64px; padding: 0;
	border: 2px solid transparent; border-radius: 4px;
	overflow: hidden; background: none; cursor: pointer;
	opacity: .55;
	transition: opacity .15s ease, border-color .15s ease;
}
.wsf-lightbox-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wsf-lightbox-thumb:hover { opacity: .85; }
.wsf-lightbox-thumb.is-active { opacity: 1; border-color: #fff; }

.wsf-lightbox-close,
.wsf-lightbox-next,
.wsf-lightbox-prev {
	position: absolute; color: #fff; font-size: 32px; line-height: 1;
	cursor: pointer; background: none; border: none; padding: 10px;
}
.wsf-lightbox-close { top: 10px; right: 20px; }
.wsf-lightbox-prev  { left: 10px;  top: 50%; transform: translateY(-50%); }
.wsf-lightbox-next  { right: 10px; top: 50%; transform: translateY(-50%); }
.wsf-lightbox-close:focus-visible,
.wsf-lightbox-next:focus-visible,
.wsf-lightbox-prev:focus-visible { outline: 2px solid #fff; border-radius: 6px; }

@media (max-width: 782px) {
	.wsf-lightbox-prev, .wsf-lightbox-next { display: none; } /* swipe instead */
	.wsf-lightbox-overlay > img { max-width: 100vw; max-height: 68vh; }
}

/* ---------------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.wsf-story-hearts, .wsf-eyebrow::before, .wsf-eyebrow::after { display: none; }
	.wsf-card.is-in, .wsf-story.is-open .wsf-hero-inner > *,
	.wsf-hero-photo::before, .wsf-hero-photo::after,
	.wsf-style-circles .wsf-card-media::before,
	.wsf-item-pending::after, .wsf-item-pending::before,
	.wsf-scroll-cue::after { animation: none !important; }
	.wsf-heart-wrap::before { display: none; }
	.wsf-heart { animation-duration: 3.6s; }
	.wsf-card, .wsf-card-media img, .wsf-gallery .wsf-item img { transition: none; }
}

/* Themes/page builders often force `svg { fill: currentColor }`; keep the heart rose. */
.wsf-heart-wrap .wsf-heart,
.wsf-story .wsf-heart-wrap .wsf-heart,
.wsf-index .wsf-heart-wrap .wsf-heart { fill: var(--wsf-accent, #e0486b) !important; stroke: none !important; }
.wsf-heart path { fill: inherit !important; }
.wsf-story .wsf-fh .wsf-heart { fill: rgba(var(--wsf-accent-rgb, 224, 72, 107), .55) !important; }

@media (prefers-reduced-motion: reduce) {
	.wsf-story-bg::before, .wsf-story-bg::after,
	.wsf-hero-media img, .wsf-hero-blend i, .wsf-hero-sweep,
	.wsf-scroll-cue svg, .wsf-story.is-open .wsf-hero-card { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	.wsf-story.is-open .wsf-hero-photo, .wsf-story.is-open .wsf-hero-text > * { animation: none !important; }
}

/* =====================================================================
   Legibility: themes / page builders love to recolour headings, links and
   SVGs. Lock the colours so text and hearts never blend into the canvas.
   ===================================================================== */
.wsf-story { --wsf-ink: #1e1418; --wsf-ink-soft: rgba(30, 20, 24, .72); }

.wsf-story .wsf-names,
.wsf-story .wsf-names *,
.wsf-story .wsf-foot-names,
.wsf-story .wsf-foot-names *,
.wsf-story .wsf-story-mini,
.wsf-story .wsf-story-mini * {
	color: var(--wsf-ink) !important;
	-webkit-text-fill-color: var(--wsf-ink) !important;
	text-shadow: none !important;
	background-image: none !important;
}
.wsf-story .wsf-sub,
.wsf-story .wsf-status-msg {
	color: var(--wsf-ink-soft) !important;
	-webkit-text-fill-color: var(--wsf-ink-soft) !important;
}
.wsf-story .wsf-eyebrow {
	color: var(--wsf-accent) !important;
	-webkit-text-fill-color: var(--wsf-accent) !important;
}
.wsf-story .wsf-pill,
.wsf-story .wsf-pill:hover,
.wsf-story .wsf-pill:focus-visible {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}
.wsf-story .wsf-btn,
.wsf-story .wsf-scroll-cue { color: var(--wsf-ink) !important; }
.wsf-story .wsf-btn:hover,
.wsf-story .wsf-btn:focus-visible { color: var(--wsf-accent) !important; }
.wsf-story .wsf-scroll-cue:hover,
.wsf-story .wsf-scroll-cue:focus-visible { color: #fff !important; }

/* Hearts in titles: strong rose + a soft rose glow so they pop on white. */
.wsf-heart-wrap .wsf-heart {
	fill: var(--wsf-accent, #e0486b) !important;
	filter: drop-shadow(0 1px 3px rgba(var(--wsf-accent-rgb, 224, 72, 107), .5));
}
.wsf-heart-wrap::before { background: rgba(var(--wsf-accent-rgb, 224, 72, 107), .38); }

/* Wedding list: optional fixed text colour (Settings > List text colour). */
.wsf-ink-dark  { --wsf-card-ink: #1e1418; }
.wsf-ink-light { --wsf-card-ink: #ffffff; }
.wsf-ink-dark .wsf-card-names,  .wsf-ink-dark .wsf-card-sub,  .wsf-ink-dark .wsf-card-cta,
.wsf-ink-light .wsf-card-names, .wsf-ink-light .wsf-card-sub, .wsf-ink-light .wsf-card-cta {
	color: var(--wsf-card-ink) !important;
	-webkit-text-fill-color: var(--wsf-card-ink) !important;
}
.wsf-ink-dark .wsf-card:hover .wsf-card-cta,
.wsf-ink-light .wsf-card:hover .wsf-card-cta { color: var(--wsf-accent) !important; -webkit-text-fill-color: var(--wsf-accent) !important; }
.wsf-card-label { color: var(--wsf-accent) !important; -webkit-text-fill-color: var(--wsf-accent) !important; }

/* Background hearts: light, but clearly visible. */
.wsf-story .wsf-fh .wsf-heart {
	fill: var(--wsf-accent) !important;
	filter: none !important;
	animation: none !important;
}
@keyframes wsf-float {
	0%   { transform: translate3d(0, 0, 0) scale(.8); opacity: 0; }
	12%  { opacity: .4; }
	80%  { opacity: .22; }
	100% { transform: translate3d(var(--x, 0), -110vh, 0) scale(1.15); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	/* Still show them (static, very faint) instead of hiding. */
	.wsf-story .wsf-story-hearts { display: block !important; }
	.wsf-story .wsf-fh { animation: none !important; opacity: .16; bottom: auto; top: var(--y, 50%); }
}

/* =====================================================================
   v1.3  Premium list polish + fixes
   ===================================================================== */

/* centre small lists instead of leaving half-empty rows */
.wsf-index { max-width: var(--wsf-max, none); margin-left: auto; margin-right: auto; }

/* theme link styles (dotted borders / focus rings) must not leak onto cards */
.wsf-card { border: 0 !important; box-shadow: none !important; }
.wsf-card:focus:not(:focus-visible) { outline: none !important; }
.wsf-card:focus-visible { outline: 2px solid var(--wsf-accent) !important; outline-offset: 8px; }

/* always-locked ink for the list (dark on light pages; light on dark pages) */
.wsf-ink-dark  { --wsf-card-ink: #1e1418; --wsf-card-line: rgba(30, 20, 24, .2); }
.wsf-ink-light { --wsf-card-ink: #ffffff; --wsf-card-line: rgba(255, 255, 255, .35); }
.wsf-index .wsf-card-names,
.wsf-index .wsf-card-names *,
.wsf-index .wsf-card-sub {
	color: var(--wsf-card-ink) !important;
	-webkit-text-fill-color: var(--wsf-card-ink) !important;
	text-decoration: none !important;
	background-image: none !important;
}
.wsf-index .wsf-card-sub { opacity: .62; }
.wsf-index .wsf-card-label {
	color: var(--wsf-accent) !important;
	-webkit-text-fill-color: var(--wsf-accent) !important;
}

.wsf-card-body { gap: 10px; padding-top: 20px; width: 100%; }
.wsf-card-row {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; width: 100%;
}
.wsf-card-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wsf-card-names { font-size: clamp(1.35rem, 2.1vw, 1.85rem); line-height: 1.15; }

.wsf-card-arrow {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px;
	border: 1px solid var(--wsf-card-line);
	border-radius: 50%;
	color: var(--wsf-card-ink);
	transition: background .35s ease, border-color .35s ease, color .35s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
}
.wsf-index .wsf-card-arrow { color: var(--wsf-card-ink) !important; }
.wsf-card:hover .wsf-card-arrow,
.wsf-card:focus-visible .wsf-card-arrow {
	background: var(--wsf-accent);
	border-color: var(--wsf-accent);
	transform: translateX(4px);
}
.wsf-index .wsf-card:hover .wsf-card-arrow,
.wsf-index .wsf-card:focus-visible .wsf-card-arrow { color: #fff !important; }

.wsf-style-circles .wsf-card-arrow { display: none; }
.wsf-style-circles .wsf-card-row { justify-content: center; }
.wsf-style-circles .wsf-card-text { align-items: center; text-align: center; }

@media (max-width: 782px) {
	.wsf-index {
		grid-template-columns: repeat(var(--wsf-index-cols-m, 2), minmax(0, 1fr)) !important;
		gap: 34px 14px;
	}
	.wsf-card-arrow { width: 36px; height: 36px; }
	.wsf-card-arrow svg { width: 16px; height: 16px; }
	.wsf-card-names { font-size: 1.2rem; }
}

/* Story label: symmetrical lines whenever the text is centred */
.wsf-eyebrow::after { content: ""; display: none; width: 34px; height: 1px; background: currentColor; opacity: .6; }
.wsf-hero-grid.wsf-no-cover .wsf-eyebrow { justify-content: center; }
.wsf-hero-grid.wsf-no-cover .wsf-eyebrow::after { display: block; }
@media (max-width: 782px) {
	.wsf-eyebrow { justify-content: center; margin-bottom: 16px; }
	.wsf-eyebrow::after { display: block; }
}

/* =====================================================================
   v1.4  Blooms: little flowers on the photo border
   ===================================================================== */
.wsf-blooms { position: absolute; pointer-events: none; z-index: 3; }

.wsf-bloom {
	position: absolute;
	left: var(--fx); top: var(--fy);
	width: var(--fs); height: var(--fs);
	margin: calc(var(--fs) / -2) 0 0 calc(var(--fs) / -2);
	pointer-events: none;
}
.wsf-bloom svg {
	display: block; width: 100%; height: 100%;
	overflow: visible;
	transform-origin: 50% 50%;
	filter: drop-shadow(0 2px 3px rgba(80, 35, 50, .3));
}
.wsf-bloom .p { fill: var(--fc, #f6b6c6); fill-opacity: .96; stroke: rgba(255, 255, 255, .75); stroke-width: .9; }
.wsf-bloom .c { fill: var(--fc2, #e7b866); }

@keyframes wsf-bloom-in {
	from { opacity: 0; transform: scale(0) rotate(var(--r0, -40deg)); }
	60%  { opacity: 1; }
	to   { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes wsf-sway {
	from { transform: rotate(calc(var(--sw, 12deg) * -1)) translateY(0); }
	to   { transform: rotate(var(--sw, 12deg)) translateY(-2px); }
}

/* story hero photo: flowers open one by one, then keep swaying */
.wsf-hero-photo .wsf-blooms { inset: 0; }
.wsf-hero-photo .wsf-bloom { opacity: 0; }
.wsf-story.is-open .wsf-hero-photo .wsf-bloom {
	animation: wsf-bloom-in 1.1s cubic-bezier(.2, 1.25, .3, 1) var(--bd, 1s) both;
}
.wsf-story.is-open .wsf-hero-photo .wsf-bloom svg {
	animation: wsf-sway var(--st, 4s) ease-in-out var(--bd, 1s) infinite alternate;
}

/* list cards: flowers open along the photo border on hover / focus */
.wsf-card { position: relative; }
.wsf-card .wsf-blooms {
	top: 0; left: 0; width: 100%; aspect-ratio: 1 / 1;
	transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.wsf-card:hover .wsf-blooms { transform: translateY(-4px); }
.wsf-card .wsf-bloom {
	opacity: 0;
	transform: scale(.2) rotate(var(--r0, -40deg));
	transition: opacity .5s ease var(--bd, 0s), transform .8s cubic-bezier(.2, 1.3, .3, 1) var(--bd, 0s);
}
.wsf-card:hover .wsf-bloom,
.wsf-card:focus-visible .wsf-bloom { opacity: 1; transform: none; }
.wsf-card:hover .wsf-bloom svg,
.wsf-card:focus-visible .wsf-bloom svg { animation: wsf-sway var(--st, 4s) ease-in-out infinite alternate; }

.wsf-style-circles .wsf-blooms { left: 50%; max-width: 220px; transform: translateX(-50%); }
.wsf-style-circles .wsf-card:hover .wsf-blooms { transform: translateX(-50%); }

/* touch screens have no hover: keep the flowers softly visible */
@media (hover: none) {
	.wsf-card .wsf-bloom { opacity: 1; transform: none; }
	.wsf-card .wsf-bloom svg { animation: wsf-sway var(--st, 4s) ease-in-out infinite alternate; }
}

@media (max-width: 782px) {
	.wsf-hero-photo .wsf-bloom { --fs-scale: .9; }
}

@media (prefers-reduced-motion: reduce) {
	.wsf-story.is-open .wsf-hero-photo .wsf-bloom,
	.wsf-story.is-open .wsf-hero-photo .wsf-bloom svg,
	.wsf-card:hover .wsf-bloom svg,
	.wsf-card .wsf-bloom svg { animation: none !important; }
	.wsf-hero-photo .wsf-bloom { opacity: 1; }
}

/* =====================================================================
   v1.4.1  Compact list: 3 per row on desktop, 2 per row on mobile.
   Flex + centred so a short last row stays centred at the same size.
   ===================================================================== */
.wsf-index {
	--wsf-n: var(--wsf-index-cols, 3);
	--wsf-gx: 22px;
	--wsf-gy: 38px;
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wsf-gy) var(--wsf-gx);
	width: 100%;
	/* each card tops out around 340px, so the list never gets huge */
	max-width: calc(var(--wsf-n) * 340px + (var(--wsf-n) - 1) * var(--wsf-gx)) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.wsf-index .wsf-card {
	flex: 0 0 auto;
	width: calc((100% - (var(--wsf-n) - 1) * var(--wsf-gx)) / var(--wsf-n));
	min-width: 0;
}

/* smaller type + controls */
.wsf-card-media { border-radius: 8px; }
.wsf-card-body { padding-top: 14px; gap: 7px; }
.wsf-card-label { font-size: .62rem; letter-spacing: .24em; }
.wsf-card-names { font-size: clamp(1.1rem, 1.55vw, 1.4rem); }
.wsf-card-sub { font-size: .8rem; }
.wsf-card-arrow { width: 36px; height: 36px; }
.wsf-card-arrow svg { width: 16px; height: 16px; }
.wsf-style-circles .wsf-card-media { max-width: 170px; }
.wsf-style-circles .wsf-blooms { max-width: 170px; }

@media (max-width: 782px) {
	.wsf-index { --wsf-n: 2; --wsf-gx: 14px; --wsf-gy: 30px; max-width: 100% !important; }
	.wsf-card-body { padding-top: 11px; gap: 5px; }
	.wsf-card-label { font-size: .56rem; letter-spacing: .2em; }
	.wsf-card-names { font-size: 1rem; }
	.wsf-card-sub { font-size: .72rem; }
	.wsf-card-row { gap: 8px; }
	.wsf-card-arrow { width: 30px; height: 30px; }
	.wsf-card-arrow svg { width: 14px; height: 14px; }
	.wsf-style-circles .wsf-card-media,
	.wsf-style-circles .wsf-blooms { max-width: 100%; }
	/* flowers a touch smaller on the small cards */
	.wsf-card .wsf-bloom {
		width: calc(var(--fs) * .78); height: calc(var(--fs) * .78);
		margin: calc(var(--fs) * -.39) 0 0 calc(var(--fs) * -.39);
	}
}

/* While a story is open the site header would sit on top of it: hide it */
html.wsf-lock #wlh-header,
html.wsf-lock .wlh-skip { display: none !important; }