/* Storybook designs (storybook.js): painted sky, drifting clouds, flying motifs, opened envelope with ribbon & wax,
   and a scrapbook page (taped paper cards, polaroids, pinned notes). Motion = transform / opacity only. */

/* ---------- palettes: storybook colours + the whole page's theme colours ---------- */
.sb, .ev-letter, body[data-page^="sb-"] {
  --sb-sky1: #f6c9d3; --sb-sky2: #fbdfe0; --sb-sky3: #fff3ec; --sb-cloud-hi: #ffffff; --sb-cloud: #fff4f4; --sb-cloud-lo: #f3d6dc; --sb-sun: rgba(255, 244, 236, .95);
  --sb-wing: #f3a9bb; --sb-wing-2: #f8cdd7; --sb-ink: #8a4b5a; --sb-ribbon: #e7a1b0; --sb-ribbon-hi: #f7c9d2;
  --sb-env: #f6cdd5; --sb-env-hi: #fbe3e7; --sb-env-2: #eab3bf; --sb-paper: #fffaf8; --sb-wax: #efb3c0; --sb-wax-ink: #9a4c60; --sb-text: #7d5560; --sb-title: #b5677a;
}
.sb-blue, body[data-page="sb-blue"] {
  --sb-sky1: #a9cdee; --sb-sky2: #d6e8f7; --sb-sky3: #f6fbff; --sb-cloud: #f7fbff; --sb-cloud-lo: #d9e6f2; --sb-sun: rgba(255, 252, 240, .95);
  --sb-wing: #8fb6e0; --sb-wing-2: #c3dbf3; --sb-ink: #3f5a7a; --sb-ribbon: #8fb0d6; --sb-ribbon-hi: #c4d8ee;
  --sb-env: #cfe0f1; --sb-env-hi: #e6f0f9; --sb-env-2: #b5cde6; --sb-paper: #fbfdff; --sb-wax: #9cbbe0; --sb-wax-ink: #2f4f73; --sb-text: #4f6683; --sb-title: #5578a0;
}
.sb-sage, body[data-page="sb-sage"] {
  --sb-sky1: #cfdcc8; --sb-sky2: #e8eedf; --sb-sky3: #fbf8ef; --sb-cloud: #fbfcf6; --sb-cloud-lo: #e1e7d8; --sb-sun: rgba(255, 252, 238, .95);
  --sb-wing: #9fb78f; --sb-wing-2: #c9d8bd; --sb-ink: #4c5e43; --sb-ribbon: #a7bb98; --sb-ribbon-hi: #cfdcc3;
  --sb-env: #ece6d4; --sb-env-hi: #f6f1e4; --sb-env-2: #dcd3ba; --sb-paper: #fffdf7; --sb-wax: #b9c9a8; --sb-wax-ink: #44573a; --sb-text: #5b6650; --sb-title: #6d8460;
}
.sb-golden, body[data-page="sb-golden"] {
  --sb-sky1: #f2b98a; --sb-sky2: #f9d9b2; --sb-sky3: #fff1df; --sb-cloud-hi: #fff7ec; --sb-cloud: #fde8d3; --sb-cloud-lo: #f2cba6; --sb-sun: rgba(255, 236, 196, .95);
  --sb-wing: #e0a46a; --sb-wing-2: #f2c99a; --sb-ink: #6b4426; --sb-ribbon: #d8a660; --sb-ribbon-hi: #f1cf96;
  --sb-env: #f6dcbc; --sb-env-hi: #fbead4; --sb-env-2: #ebc596; --sb-paper: #fffaf2; --sb-wax: #d2a052; --sb-wax-ink: #5c3a12; --sb-text: #6e5038; --sb-title: #b06f3c;
}
.sb-night, body[data-page="sb-night"] {
  --sb-sky1: #0b1433; --sb-sky2: #1d2a5c; --sb-sky3: #3a3f7a; --sb-cloud-hi: #4a5294; --sb-cloud: #2f3872; --sb-cloud-lo: #1d2556; --sb-sun: rgba(255, 244, 210, .9);
  --sb-wing: #f6e3a4; --sb-wing-2: #ffd77a; --sb-ink: #f1e6c8; --sb-ribbon: #d8b15f; --sb-ribbon-hi: #f3d58e;
  --sb-env: #24306a; --sb-env-hi: #34428a; --sb-env-2: #161e4a; --sb-paper: #fdf8ea; --sb-wax: #d8b15f; --sb-wax-ink: #3a2a08; --sb-text: #e6e1f2; --sb-title: #f3d58e;
}
.sb-party, body[data-page="sb-party"] {
  --sb-sky1: #c9e9e3; --sb-sky2: #e9e1f7; --sb-sky3: #fff6f0; --sb-cloud: #fffdfb; --sb-cloud-lo: #e6e0f0;
  --sb-wing: #f4a7b9; --sb-wing-2: #9fd8cf; --sb-ink: #5a4a78; --sb-ribbon: #f29a8f; --sb-ribbon-hi: #f8c1b9;
  --sb-env: #e3d7f5; --sb-env-hi: #f0e9fb; --sb-env-2: #cdbcec; --sb-paper: #fffdfb; --sb-wax: #f29a8f; --sb-wax-ink: #fff6f2; --sb-text: #5f5675; --sb-title: #8a63c4;
}
.sb-kraft, body[data-page="sb-kraft"] {
  --sb-sky1: #e6cfac; --sb-sky2: #f1e3cc; --sb-sky3: #faf3e6; --sb-cloud-hi: #fffaf0; --sb-cloud: #fbf3e4; --sb-cloud-lo: #eadbc2; --sb-sun: rgba(255, 248, 230, .9);
  --sb-wing: #2f6f6a; --sb-wing-2: #e2b04a; --sb-ink: #4a3420; --sb-ribbon: #b5432e; --sb-ribbon-hi: #d9725a;
  --sb-env: #d6b48a; --sb-env-hi: #e6c9a2; --sb-env-2: #c39c6c; --sb-paper: #fffaf0; --sb-wax: #b5432e; --sb-wax-ink: #fff1e6; --sb-text: #5b4530; --sb-title: #a2412c;
}
/* the page's theme colours follow the look (whole-page option) */
body[data-page^="sb-"] {
  --bg: var(--sb-sky3); --paper: var(--sb-paper); --ink: var(--sb-title); --text: var(--sb-text); --muted: color-mix(in srgb, var(--sb-text) 70%, #fff);
  --gold: var(--sb-ribbon); --soft: color-mix(in srgb, var(--sb-wing-2) 55%, transparent); --env: var(--sb-env-2); --env-2: var(--sb-env-2); --env-deep: var(--sb-ink);
  --cover-text: var(--sb-ink); --dark-1: var(--sb-title); --dark-2: var(--sb-ink); --on-dark: #fffaf6;
  --seal: var(--sb-wax); --seal-edge: color-mix(in srgb, var(--sb-wax) 70%, #000); --seal-ink: var(--sb-wax-ink);
}
body[data-page="sb-night"] { --bg: #0f1838; --paper: #18224a; --muted: #b8b4d0; --on-dark: #f6efd8; color-scheme: dark; }

/* ---------- sky ---------- */
.sb-sky { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, var(--sb-sky1), var(--sb-sky2) 52%, var(--sb-sky3)); }
.sb-sun { position: absolute; right: -12%; top: -6%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--sb-sun), transparent 65%); animation: sbSun 8s ease-in-out infinite alternate; }
@keyframes sbSun { from { opacity: .75; transform: scale(.95); } to { opacity: 1; transform: scale(1.05); } }
.sb-cloud { position: absolute; transform: translate3d(0, calc(var(--sy, 0px) * var(--k, -.12)), 0); will-change: transform; }
.sb-cloud-svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 10px 18px rgba(120, 80, 90, .08)); animation: sbDrift var(--dd, 60s) ease-in-out infinite alternate; }
@keyframes sbDrift { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
.sb-cloud.c1 { left: -18%; top: 4%; width: 72%; --k: -.08; --dd: 50s; opacity: .9; }
.sb-cloud.c2 { right: -22%; top: 26%; width: 62%; --k: -.16; --dd: 64s; opacity: .85; }
.sb-cloud.c3 { left: -28%; bottom: 20%; width: 92%; --k: -.22; --dd: 70s; }
.sb-cloud.c4 { right: -30%; bottom: 2%; width: 96%; --k: -.3; --dd: 56s; }
.sb-motif { position: absolute; inset: 0; pointer-events: none; }

/* flying motifs */
.sb-fly { position: absolute; left: -12%; width: calc(34px * var(--s, 1)); animation: sbFly var(--d) linear var(--dl) infinite; will-change: transform; }
@keyframes sbFly { 0% { transform: translate3d(0, 0, 0); } 25% { transform: translate3d(32vw, calc(var(--y) * .5), 0); } 50% { transform: translate3d(62vw, var(--y), 0); } 75% { transform: translate3d(92vw, calc(var(--y) * .3), 0); } 100% { transform: translate3d(128vw, 0, 0); } }
.sb-bf { display: block; width: 100%; overflow: visible; }
.sb-bf .w { transform-box: view-box; transform-origin: 20px 16px; animation: sbFlap .32s ease-in-out infinite alternate; }
.sb-bf .w.r { animation-delay: 0s; }
@keyframes sbFlap { from { transform: scaleX(1); } to { transform: scaleX(.25); } }
.sb-birds { width: calc(26px * var(--s, 1)); }
.sb-bird { display: block; width: 100%; overflow: visible; opacity: .75; }
.sb-bird .wing { transform-box: fill-box; transform-origin: 50% 60%; animation: sbBird .5s ease-in-out infinite alternate; }
@keyframes sbBird { from { transform: scaleY(1); } to { transform: scaleY(-.4); } }
.sb-leaves { width: calc(22px * var(--s, 1)); animation-name: sbLeaf; }
@keyframes sbLeaf { 0% { transform: translate3d(0, -20px, 0) rotate(0); } 50% { transform: translate3d(60vw, calc(40vh + var(--y)), 0) rotate(260deg); } 100% { transform: translate3d(120vw, 80vh, 0) rotate(520deg); } }
.sb-leaf { display: block; width: 100%; }
.sb-up { left: auto; top: auto; bottom: -24%; width: calc(48px * var(--s, 1)); animation-name: sbRise; }
@keyframes sbRise { 0% { transform: translate3d(0, 0, 0) rotate(-4deg); } 50% { transform: translate3d(14px, -65vh, 0) rotate(4deg); } 100% { transform: translate3d(-10px, -135vh, 0) rotate(-3deg); } }
.sb-balloon { display: block; width: 100%; }
.sb-twinkle { position: absolute; width: calc(14px * var(--s)); animation: sbTw 3s ease-in-out var(--dl) infinite; }
.sb-star { display: block; width: 100%; }
@keyframes sbTw { 0%, 100% { opacity: .2; transform: scale(.6) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
.sb-moon { position: absolute; right: 12%; top: 10%; width: 64px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 38% 36%, #fffbe8, #f3dfa6 60%, #d9bd77); box-shadow: 0 0 40px 10px rgba(255, 236, 180, .35); }
.sb-firefly { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #ffe38a; box-shadow: 0 0 10px 3px rgba(255, 220, 120, .7); animation: sbFire var(--d) ease-in-out var(--dl) infinite alternate; }
@keyframes sbFire { 0% { transform: translate(0, 0); opacity: .2; } 50% { opacity: 1; } 100% { transform: translate(30px, -40px); opacity: .3; } }
.sb-bunting { position: absolute; left: -2%; right: -2%; top: 0; height: 80px; z-index: 2; }
.sb-bunting-svg { width: 100%; height: 100%; }
.sb-confetti { position: absolute; inset: 0; }
.sb-confetti i { position: absolute; top: -4%; width: 7px; height: 11px; border-radius: 2px; background: var(--c); transform: rotate(var(--r)); animation: sbConf var(--d) linear var(--dl) infinite; opacity: .85; }
@keyframes sbConf { from { transform: translate3d(0, 0, 0) rotate(var(--r)); } to { transform: translate3d(30px, 110vh, 0) rotate(calc(var(--r) + 720deg)); } }

/* ---------- hero ---------- */
.hx.sb { display: block; padding: 0; min-height: 0; text-align: center; background: var(--sb-sky3); --hx-gold: var(--sb-ribbon); --hx-ink: var(--sb-title); --hx-text: var(--sb-text); --hx-btn: var(--sb-title); --hx-btn-ink: #fff; --hx-card: var(--sb-paper); }
/* Heading and envelope are in normal flow (heading on top, envelope pushed to the bottom) and the heading keeps room
   below it for the letter that rises out of the envelope: on short or wide screens the scene grows taller instead of
   the letter covering the date and venue lines. */
.sb-scene {
  position: relative; min-height: max(calc(100svh - 44px), 640px); overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; padding: 7svh 7% calc(3svh + 56px);
  --sb-env-w: min(74vw, 330px);
}
.sb-head { position: relative; z-index: 3; width: 100%; display: flex; flex-direction: column; align-items: center; margin-bottom: calc(var(--sb-env-w) * .3 + 40px); transform: translate3d(0, calc(var(--sy, 0px) * .12), 0); }
.sb-head p, .sb-head h1 { margin: 0; }
.sb-greet { font-family: var(--f-script); font-size: calc(24px * var(--ss)); color: var(--sb-title); }
.sb-eyebrow { font-family: var(--f-caps); font-size: 12.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--sb-text); opacity: 0; animation: sbUp 1s ease .5s forwards; }
.sb-title { font-family: var(--f-script); font-weight: 400; font-size: calc(clamp(58px, 17vw, 86px) * var(--ss)); line-height: 1.05; color: var(--sb-title); margin-top: 6px !important; text-shadow: 0 2px 18px color-mix(in srgb, var(--sb-sky3) 80%, transparent); opacity: 0; animation: sbTitle 1.6s cubic-bezier(.2,.7,.2,1) .7s forwards; }
@keyframes sbTitle { from { opacity: 0; transform: translateY(16px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes sbUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sb-of { font-family: var(--f-caps); font-size: 11.5px; letter-spacing: .3em; line-height: 1.9; white-space: pre-line; text-transform: uppercase; color: var(--sb-text); margin-top: 8px !important; opacity: 0; animation: sbUp 1s ease 1.1s forwards; }
.sb-names { font-family: var(--f-caps); font-size: clamp(20px, 6vw, 28px); letter-spacing: .14em; text-transform: uppercase; color: var(--sb-ink); margin-top: 6px !important; opacity: 0; animation: sbUp 1s ease 1.25s forwards; }
.sb-parents { font-family: var(--f-caps); font-size: clamp(15px, 4.4vw, 20px); letter-spacing: .1em; line-height: 1.5; white-space: pre-line; color: var(--sb-ink); margin-top: 10px !important; opacity: 0; animation: sbUp 1s ease 1.2s forwards; }
.sb-when { font-size: 14px; letter-spacing: .08em; color: var(--sb-text); margin-top: 14px !important; opacity: 0; animation: sbUp 1s ease 1.45s forwards; }
.sb-where { font-size: 13px; font-style: italic; line-height: 1.45; color: var(--sb-text); margin-top: 9px !important; opacity: 0; animation: sbUp 1s ease 1.55s forwards; }

/* the opened envelope with the letter sliding out */
.sb-env { position: relative; z-index: 4; flex: none; margin-top: auto; width: var(--sb-env-w); aspect-ratio: 300 / 200; transform: translate3d(0, calc(var(--sy, 0px) * -.04), 0); animation: sbEnvIn 1.4s cubic-bezier(.2,.7,.2,1) .3s both; }
@keyframes sbEnvIn { from { opacity: 0; translate: 0 50px; } to { opacity: 1; translate: 0 0; } }
.sb-env > div, .sb-env > i { position: absolute; }
.sb-env-b { inset: 0; } .sb-env-back { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 18px 28px rgba(80, 40, 50, .18)); }
.sb-env-back path:last-child { fill: var(--sb-sky2); }
.sb-letter {
  left: 9%; right: 9%; top: 0; height: 96%; z-index: 1; padding: 6% 8% 9%; display: grid; align-content: center; justify-items: center; gap: 4px;
  container-type: inline-size; /* the text inside is sized in cqw (letter width), so it fills the paper at every envelope size */
  background: var(--sb-paper); border-radius: 4px; box-shadow: 0 6px 16px rgba(0,0,0,.08), inset 0 0 0 6px var(--sb-paper), inset 0 0 0 7px color-mix(in srgb, var(--sb-ribbon) 45%, transparent);
  transform: translateY(18%); animation: sbLetter 1.6s cubic-bezier(.3,.8,.2,1) 1.4s forwards;
}
@keyframes sbLetter { to { transform: translateY(-46%); } }
.sb-letter p { margin: 0; }
.sb-l-eyebrow { font-family: var(--f-caps); font-size: max(9.5px, 4.3cqw); letter-spacing: .28em; text-transform: uppercase; color: var(--sb-text); }
.sb-l-mono { font-family: var(--f-script); font-size: calc(15cqw * var(--ss)); line-height: 1.1; color: var(--sb-title); }
.sb-l-date { font-family: var(--f-caps); font-size: max(11px, 5.6cqw); letter-spacing: .2em; color: var(--sb-ink); }
.sb-l-rule { width: 50%; height: 1px; margin: 1.2cqw 0; background: linear-gradient(90deg, transparent, var(--sb-ribbon), transparent); }
.sb-l-time { font-family: var(--f-caps); font-size: max(10px, 4.5cqw); letter-spacing: .22em; text-transform: uppercase; color: var(--sb-text); }
.sb-l-venue { max-width: 100%; font-size: max(12px, 5.2cqw); font-style: italic; line-height: 1.25; color: var(--sb-text); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.sb-orn { display: block; width: .8em; height: .8em; fill: currentColor; }
.sb-wax .sb-orn { width: 20px; height: 20px; color: var(--sb-wax-ink); opacity: .85; }
.sb-env-f { left: 0; right: 0; bottom: 0; height: 70%; z-index: 2; }
.sb-env-front { display: block; width: 100%; height: 100%; }
.sb-ribbon { left: 0; right: 0; bottom: 30%; height: 9%; z-index: 3; background: linear-gradient(180deg, var(--sb-ribbon-hi), var(--sb-ribbon)); box-shadow: 0 2px 3px rgba(0,0,0,.1); }
.sb-bow-wrap { left: 50%; bottom: 14%; width: 40%; z-index: 4; transform: translateX(-50%); }
.sb-bow { display: block; width: 100%; overflow: visible; animation: sbBow 3.2s ease-in-out infinite; transform-origin: 50% 45%; }
@keyframes sbBow { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg) scale(1.02); } }
.sb-wax { left: 50%; bottom: 21%; z-index: 5; width: 52px; height: 52px; margin-left: -26px; border-radius: 52% 48% 50% 50% / 48% 52% 48% 52%; display: grid; place-items: center;
  background: radial-gradient(circle at 36% 30%, rgba(255,255,255,.7), var(--sb-wax) 40%, color-mix(in srgb, var(--sb-wax) 70%, #000)); box-shadow: 0 4px 8px rgba(0,0,0,.2), inset 0 -3px 6px rgba(0,0,0,.15), inset 0 0 0 5px color-mix(in srgb, var(--sb-wax) 85%, #fff); }
.sb-wax span { font-family: var(--f-script); font-size: 19px; color: var(--sb-wax-ink); line-height: 1; }
.sb-down { position: absolute; left: 50%; bottom: 2.5%; z-index: 5; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; border: 1px solid var(--sb-title); background: color-mix(in srgb, var(--sb-paper) 70%, transparent); animation: cerBob 2.4s ease-in-out infinite; }
.sb-down::after { content: ''; position: absolute; left: 50%; top: 45%; width: 7px; height: 7px; margin: -5px 0 0 -4px; border-right: 1.5px solid var(--sb-title); border-bottom: 1.5px solid var(--sb-title); transform: rotate(45deg); }
.sb-more { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 24px 90px; background: var(--sb-sky3); }
.sb-more p { margin: 0; }
.sb-invite { font-family: var(--f-caps); font-size: 12.5px; letter-spacing: .28em; text-transform: uppercase; line-height: 1.8; color: var(--sb-text); max-width: 340px; }
.sb-closing { font-family: var(--f-script); font-size: calc(30px * var(--ss)); color: var(--sb-title); }
.sb .hx-count > div { background: var(--sb-paper); }
body.has-hxnav .sb-scene { padding-bottom: calc(3svh + 116px); }
body.has-hxnav .sb-down { bottom: calc(2% + 76px); }
.sb.sb-dark .sb-title { text-shadow: 0 0 22px rgba(243, 213, 142, .35); }

/* ---------- the page as a scrapbook ---------- */
body[data-page^="sb-"] { background-color: var(--bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .4 0 0 0 0 .35 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); }
body[data-page^="sb-"] main .card { border-radius: 6px; overflow: visible; box-shadow: 0 14px 30px -18px rgba(60, 30, 40, .35), 0 1px 2px rgba(0,0,0,.05); }
body[data-page^="sb-"] main .card::after { /* washi tape */
  content: ''; position: absolute; top: -12px; left: 50%; width: 110px; height: 26px; margin-left: -55px; transform: rotate(-3deg); opacity: .85;
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--sb-ribbon) 55%, transparent) 0 8px, color-mix(in srgb, var(--sb-ribbon-hi) 55%, transparent) 8px 16px);
  clip-path: polygon(2% 0, 98% 4%, 100% 50%, 97% 100%, 3% 96%, 0 50%);
}
body[data-page^="sb-"] #events .card:nth-of-type(odd) { transform: rotate(-.8deg); }
body[data-page^="sb-"] #events .card:nth-of-type(even) { transform: rotate(.9deg); }
body[data-page^="sb-"] #events .card:nth-of-type(even)::after { transform: rotate(4deg); left: 30%; }
/* polaroids */
body[data-page^="sb-"] .gallery { gap: 18px 12px; padding: 6px; }
body[data-page^="sb-"] .gallery button { background: #fffefb; padding: 8px 8px 30px; border-radius: 2px; aspect-ratio: auto; box-shadow: 0 10px 20px -8px rgba(40, 20, 20, .35); transition: transform .35s; }
body[data-page^="sb-"] .gallery button img { aspect-ratio: 1; height: auto; border-radius: 1px; }
body[data-page^="sb-"] .gallery button:nth-child(4n+1) { transform: rotate(-3deg); }
body[data-page^="sb-"] .gallery button:nth-child(4n+2) { transform: rotate(2.5deg) translateY(10px); }
body[data-page^="sb-"] .gallery button:nth-child(4n+3) { transform: rotate(1.5deg); }
body[data-page^="sb-"] .gallery button:nth-child(4n) { transform: rotate(-2deg) translateY(8px); }
body[data-page^="sb-"] .gallery button:hover { transform: rotate(0) scale(1.03); }
/* pinned notes */
body[data-page^="sb-"] .wish-card { border-radius: 3px; background: color-mix(in srgb, var(--sb-wing-2) 35%, var(--sb-paper)); box-shadow: 0 10px 18px -10px rgba(40, 20, 20, .35); }
body[data-page^="sb-"] .wish-card:nth-child(odd) { transform: rotate(-1.2deg); }
body[data-page^="sb-"] .wish-card:nth-child(even) { transform: rotate(1.1deg); }
body[data-page^="sb-"] .wish-card::before { content: ''; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, var(--sb-ribbon) 55%, color-mix(in srgb, var(--sb-ribbon) 70%, #000)); box-shadow: 0 2px 3px rgba(0,0,0,.25); }
/* soft RSVP form */
body[data-page^="sb-"] .rsvp input, body[data-page^="sb-"] .rsvp textarea { background: transparent; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--sb-text) 40%, transparent); border-radius: 0; padding: 10px 2px; }
body[data-page^="sb-"] .rsvp input:focus, body[data-page^="sb-"] .rsvp textarea:focus { outline: 0; border-bottom-color: var(--sb-title); }
body[data-page^="sb-"] .choice span { border: 0; border-radius: 4px; background: color-mix(in srgb, var(--sb-wing-2) 30%, var(--sb-paper)); text-transform: uppercase; letter-spacing: .12em; font-size: 13px; }
body[data-page^="sb-"] .choice input:checked + span { background: var(--sb-title); color: #fff; }
body[data-page^="sb-"] .sec-title { color: var(--sb-title); }

/* bottom menu */
.hx-nav[class*="hx-nav-sb-"] { --hx-navbg: color-mix(in srgb, var(--sb-paper) 92%, transparent); --hx-navink: var(--sb-ink); }
.hx-nav[class*="hx-nav-sb-"] .pi { color: var(--sb-title); }
.hx-nav[class*="hx-nav-sb-"] a + a { border-left-color: rgba(0,0,0,.08); }
.hx-nav.hx-nav-sb-night { --hx-navbg: rgba(16, 24, 56, .9); --hx-navink: #f1e6c8; }

/* ================= envelope: Love Letter ================= */
.envelope.ev-letter { overflow: hidden; background: var(--sb-sky2); }
.cover-loveletter { --cover-text: var(--sb-ink); }
.evl-text { position: absolute; left: 8%; right: 8%; top: 11%; z-index: 4; text-align: center; color: var(--sb-ink); transition: opacity .5s; }
.evl-text p { margin: 0; }
.evl-greet { font-family: var(--f-script); font-size: calc(26px * var(--ss)); color: var(--sb-title); }
.evl-l1 { font-family: var(--f-caps); font-size: 12px; letter-spacing: .3em; text-transform: uppercase; }
.evl-names { font-family: var(--f-script); font-size: calc(clamp(46px, 13vw, 64px) * var(--ss)); line-height: 1.1; color: var(--sb-title); margin: 6px 0 !important; }
.evl-l2 { font-family: var(--f-caps); font-size: 12px; letter-spacing: .26em; text-transform: uppercase; line-height: 1.7; }
.evl-env { position: absolute; left: 50%; top: 60%; z-index: 5; width: min(80%, 340px); aspect-ratio: 300 / 190; transform: translate(-50%, -50%); perspective: 900px; animation: evlFloat 4s ease-in-out infinite; }
@keyframes evlFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.evl-env > div, .evl-env > i { position: absolute; }
.evl-env svg { display: block; width: 100%; height: 100%; }
.evl-back { inset: 0; filter: drop-shadow(0 20px 30px rgba(80, 40, 50, .22)); }
.evl-letter { left: 7%; right: 7%; top: 6%; bottom: 8%; z-index: 1; background: var(--sb-paper); border-radius: 3px; display: grid; place-items: center; box-shadow: inset 0 0 0 6px var(--sb-paper), inset 0 0 0 7px color-mix(in srgb, var(--sb-ribbon) 45%, transparent); transition: transform 1s cubic-bezier(.3,.8,.2,1) .75s; }
.evl-letter span { font-family: var(--f-script); font-size: 34px; color: var(--sb-title); }
.evl-front { inset: 0; z-index: 2; }
.evl-flap { left: 0; right: 0; top: 0; height: 63%; z-index: 3; transform-origin: 50% 0; transition: transform .8s cubic-bezier(.5,0,.3,1) .25s, z-index 0s .6s; backface-visibility: hidden; }
.evl-ribbon { left: 0; right: 0; top: 50%; height: 11%; z-index: 4; margin-top: -5.5%; background: linear-gradient(180deg, var(--sb-ribbon-hi), var(--sb-ribbon)); box-shadow: 0 2px 3px rgba(0,0,0,.12); transition: transform .5s ease, opacity .4s ease; }
.evl-bow { left: 50%; top: 50%; width: 46%; z-index: 5; transform: translate(-50%, -58%); transition: transform .5s ease, opacity .4s ease; }
.evl-bow .sb-bow { animation: none; }
.ev-letter .seal { top: 50%; left: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; z-index: 6; }
.ev-letter .seal .seal-mono { font-size: 24px; }
.evl-cta { position: absolute; left: 0; right: 0; bottom: 9%; z-index: 4; margin: 0; text-align: center; font-family: var(--f-caps); font-size: 11.5px; letter-spacing: .32em; text-transform: uppercase; color: var(--sb-ink); opacity: .8; animation: cerBob 2.4s ease-in-out infinite; transition: opacity .4s; }
.cover-loveletter.opening .evl-env { animation: none; }
.cover-loveletter.opening .evl-ribbon { transform: scaleX(0); opacity: 0; }
.cover-loveletter.opening .evl-bow { opacity: 0; transform: translate(-50%, -58%) scale(.6) rotate(-20deg); }
.cover-loveletter.opening .evl-flap { transform: rotateX(180deg); z-index: 0; }
.cover-loveletter.opening .evl-letter { transform: translateY(-62%); }
.cover-loveletter.opening .evl-text, .cover-loveletter.opening .evl-cta { opacity: 0; }
.cover.cover-loveletter.opening .envelope.ev-letter { opacity: 0; transition: opacity .5s ease 1.75s; }

@media (prefers-reduced-motion: reduce) { .sb-fly, .sb-confetti, .sb-firefly, .sb-cloud-svg { animation: none !important; } }
/* the letter is paper in every look: dark ink on it even in Starry Night */
.sb-night .sb-letter, .sb-night .evl-letter { --sb-text: #6a6080; --sb-title: #a8823a; --sb-ink: #3d3560; }
.sb-moon { right: auto; left: 7%; top: 3%; width: 52px; }

/* ---------- family looks ---------- */
.sb-lights, body[data-page="sb-lights"] {
  --sb-sky1: #2d2550; --sb-sky2: #8a5f7a; --sb-sky3: #f6d8bf; --sb-cloud-hi: #f8d7c6; --sb-cloud: #d9a7a0; --sb-cloud-lo: #9d6f83; --sb-sun: rgba(255, 210, 160, .7);
  --sb-wing: #ffd27a; --sb-wing-2: #ffe7a8; --sb-ink: #3d2a3a; --sb-ribbon: #e0a54a; --sb-ribbon-hi: #ffd78a;
  --sb-env: #f3dcc4; --sb-env-hi: #fbebd9; --sb-env-2: #e3c19e; --sb-paper: #fffaf3; --sb-wax: #c98a3a; --sb-wax-ink: #fff3dc; --sb-text: #5e4552; --sb-title: #a4553c;
}
.sb-lights .sb-head { color: #fff; }
.sb-lights .sb-eyebrow, .sb-lights .sb-of, .sb-lights .sb-when, .sb-lights .sb-where { color: #fbe9dc; }
.sb-lights .sb-title { color: #ffe1b0; text-shadow: 0 0 24px rgba(255, 200, 120, .45); }
.sb-lights .sb-names { color: #fff6ea; }
.sb-lights-wrap { position: absolute; left: -2%; right: -2%; top: 0; height: 30%; z-index: 2; }
.sb-lights-svg { width: 100%; height: 100%; overflow: visible; }
.sb-lights-svg .bulb { animation: sbBulb 2.6s ease-in-out var(--dl) infinite alternate; }
@keyframes sbBulb { from { opacity: .55; } to { opacity: 1; } }
.sb-picnic, body[data-page="sb-picnic"] {
  --sb-sky1: #bfe3f2; --sb-sky2: #e2f2e0; --sb-sky3: #fbfaf0; --sb-cloud: #ffffff; --sb-cloud-lo: #dcebe0; --sb-sun: rgba(255, 246, 200, .95);
  --sb-wing: #f2b84b; --sb-wing-2: #f7d98c; --sb-ink: #2f5130; --sb-ribbon: #d9534f; --sb-ribbon-hi: #ef8a7d;
  --sb-env: #f6efdc; --sb-env-hi: #fdf8ea; --sb-env-2: #e8dcbc; --sb-paper: #fffdf6; --sb-wax: #d9534f; --sb-wax-ink: #fff4ec; --sb-text: #4c6046; --sb-title: #3f7a3c;
}
/* picnic envelope: red gingham lining */
.sb-picnic .sb-env-back path:last-child { fill: #f3c9c4; }
.hx-nav.hx-nav-sb-lights { --hx-navbg: rgba(255, 250, 243, .94); }
.sb-lights-svg .bulb.b1 { animation-delay: -.5s; } .sb-lights-svg .bulb.b2 { animation-delay: -1.1s; } .sb-lights-svg .bulb.b3 { animation-delay: -1.7s; } .sb-lights-svg .bulb.b4 { animation-delay: -2.2s; }
/* Evening Lights envelope: text below the string lights, light ink on the dusk sky */
.ev-letter.sb-lights .evl-text { top: 27%; color: #fbe9dc; }
.ev-letter.sb-lights .evl-names { color: #ffe1b0; text-shadow: 0 0 20px rgba(255, 200, 120, .4); }
.ev-letter.sb-lights .evl-greet { color: #ffe1b0; }
.ev-letter.sb-lights .evl-cta { color: #fbe9dc; }
.ev-letter.sb-lights .evl-env { top: 64%; }