/* Invitation styles — everything comes from the theme variables set by renderer.js */
.kb-root{--bg:#3B0A11;--surface:#4A1419;--text:#F3E6D8;--muted:#D8C2B4;--accent:#C9A66B;--seal:#8C1F2E;
  --script:'Pinyon Script',cursive;--body:'Cormorant Garamond',Georgia,serif;--scale:1;
  --line:color-mix(in srgb,var(--text) 22%,transparent);
  min-height:100svh;background:var(--bg);color:var(--text);font-family:var(--body);font-size:calc(17px * var(--scale));line-height:1.5;
  overflow-x:hidden;-webkit-text-size-adjust:100%}
.kb-root *{box-sizing:border-box}
.kb-root p{margin:0}.kb-root h1,.kb-root h2,.kb-root h3{margin:0;font-weight:inherit}
.kb-root a{color:var(--text)}
.kb-root :focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.kb-root:not(.is-open){height:100svh;overflow:hidden}
.kb-root [hidden]{display:none!important}

/* ---------- cover: fixed 390x760 design, scaled by --k ---------- */
.kb-cover{position:fixed;inset:0;z-index:20;background:var(--bg);overflow:hidden}
.kb-cover.gone{display:none}
.kb-art{position:absolute;left:50%;top:50%;width:390px;height:760px;margin:-380px 0 0 -195px;transform:scale(var(--k,1));
  display:flex;flex-direction:column;align-items:center;justify-content:center}
.kb-cover-text{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:-76px;padding:0 24px}
.kb-eyebrow{font-size:13px;letter-spacing:.32em;font-weight:500;margin-bottom:14px}
.kb-names{font-family:var(--script);display:flex;flex-direction:column;line-height:1;margin-bottom:22px}
.kb-names span{font-size:60px}.kb-names .kb-joiner{font-size:52px;line-height:.85}
.kb-caps{font-size:14px;letter-spacing:.14em;font-weight:500}
.kb-cta{position:absolute;left:0;right:0;top:510px;display:flex;justify-content:center}
.kb-seal-btn{background:none;border:0;padding:4px;cursor:pointer;border-radius:16px}
.kb-seal{width:120px;height:125px;display:block;filter:drop-shadow(0 4px 6px rgba(0,0,0,.45));animation:kbBreathe 2.6s ease-in-out infinite}
.kb-seal-txt{font-family:var(--body);font-size:22px;font-weight:600;letter-spacing:4px}
.kb-seal-round{width:118px;height:118px}
.kb-seal-ini{font-family:var(--script);font-size:46px}
.kb-seal-txt-sm{font-size:14px;letter-spacing:4px}
.kb-open-pill{animation:kbBreathe 2.6s ease-in-out infinite}
@keyframes kbBreathe{50%{transform:scale(1.05)}}
.kb-cover-text>*,.kb-cta{animation:kbRise 1s ease both}
.kb-cover-text>*:nth-child(2){animation-delay:.2s}.kb-cover-text>*:nth-child(3){animation-delay:.4s}.kb-cover-text>*:nth-child(4){animation-delay:.5s}.kb-cta{animation-delay:.8s}
.kb-nointro .kb-cover-text>*,.kb-nointro .kb-cta{animation:none} /* live-preview re-renders: no flicker */
@keyframes kbRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* opening animations */
.kb-door{z-index:22;pointer-events:none;transition:transform 1.3s cubic-bezier(.6,0,.25,1)}
.kb-door .kb-cover-text>*,.kb-door .kb-cta{animation:none}.kb-door .kb-cta{visibility:hidden}
.kb-door-l{clip-path:inset(0 50% 0 0)}.kb-door-r{clip-path:inset(0 0 0 50%)}
.kb-door-l.open{transform:translateX(-50%)}.kb-door-r.open{transform:translateX(50%)}
.kb-cover.anim-fade{transition:opacity 1s ease;opacity:0}
.kb-cover.anim-slide{transition:transform 1s cubic-bezier(.7,0,.2,1);transform:translateY(-100%)}

/* decorations */
.kb-tulip{position:absolute;pointer-events:none;user-select:none}
.kb-tulip-tr{right:-70px;top:-50px;width:236px;transform:rotate(-24deg)}
.kb-tulip-bl{left:-80px;bottom:-40px;width:250px;transform:rotate(160deg) scaleX(-1)}
.kb-tulip-top{right:-60px;top:-30px;width:190px;transform:rotate(-24deg)}
.kb-orn{position:absolute;width:150px;height:150px;color:var(--accent);pointer-events:none}
.kb-orn-tl{left:-10px;top:-10px;transform:rotate(180deg) scaleX(-1)}.kb-orn-br{right:-10px;bottom:-10px}
.kb-frame{position:absolute;inset:22px;border:1px solid var(--accent);outline:1px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:6px;pointer-events:none}

/* ---------- more decorations (colours come from --accent / --seal via CSS masks) ---------- */
/* background patterns: batik, Islamic geometric, polka dots, songket "bunga tabur" scatter */
.decor-batik .kb-cover::before,.decor-batik .kb-main::before,
.decor-geometric .kb-cover::before,.decor-geometric .kb-main::before,
.decor-dots .kb-cover::before,.decor-dots .kb-main::before,
.decor-songket .kb-cover::before,.decor-songket .kb-main::before{content:"";position:absolute;inset:0;background:var(--accent);opacity:.09;pointer-events:none;
  -webkit-mask-repeat:repeat;mask-repeat:repeat}
.decor-batik .kb-cover::before,.decor-batik .kb-main::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'><g fill='none' stroke='black' stroke-width='2'><circle cx='32' cy='32' r='7'/><ellipse cx='32' cy='17' rx='5' ry='8'/><ellipse cx='32' cy='47' rx='5' ry='8'/><ellipse cx='17' cy='32' rx='8' ry='5'/><ellipse cx='47' cy='32' rx='8' ry='5'/></g><g fill='black'><circle cx='4' cy='4' r='2.5'/><circle cx='60' cy='60' r='2.5'/><circle cx='4' cy='60' r='2.5'/><circle cx='60' cy='4' r='2.5'/></g></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'><g fill='none' stroke='black' stroke-width='2'><circle cx='32' cy='32' r='7'/><ellipse cx='32' cy='17' rx='5' ry='8'/><ellipse cx='32' cy='47' rx='5' ry='8'/><ellipse cx='17' cy='32' rx='8' ry='5'/><ellipse cx='47' cy='32' rx='8' ry='5'/></g><g fill='black'><circle cx='4' cy='4' r='2.5'/><circle cx='60' cy='60' r='2.5'/><circle cx='4' cy='60' r='2.5'/><circle cx='60' cy='4' r='2.5'/></g></svg>");opacity:.12}
.decor-geometric .kb-cover::before,.decor-geometric .kb-main::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><g fill='none' stroke='black' stroke-width='1.5'><rect x='15' y='15' width='30' height='30'/><path d='M30 9L51 30L30 51L9 30Z'/><circle cx='30' cy='30' r='5'/><path d='M0 0L9 9M60 0L51 9M0 60L9 51M60 60L51 51'/></g></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><g fill='none' stroke='black' stroke-width='1.5'><rect x='15' y='15' width='30' height='30'/><path d='M30 9L51 30L30 51L9 30Z'/><circle cx='30' cy='30' r='5'/><path d='M0 0L9 9M60 0L51 9M0 60L9 51M60 60L51 51'/></g></svg>");opacity:.14}
.decor-dots .kb-cover::before,.decor-dots .kb-main::before{
  -webkit-mask-image:radial-gradient(circle,#000 4px,transparent 4.5px);mask-image:radial-gradient(circle,#000 4px,transparent 4.5px);
  -webkit-mask-size:34px 34px;mask-size:34px 34px;opacity:.16}
.decor-songket .kb-cover::before,.decor-songket .kb-main::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56'><g fill='black'><path d='M28 20l3 8-3 8-3-8z'/><path d='M20 28l8-3 8 3-8 3z'/></g></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56'><g fill='black'><path d='M28 20l3 8-3 8-3-8z'/><path d='M20 28l8-3 8 3-8 3z'/></g></svg>");opacity:.18}
/* pattern bands (top/bottom): songket pucuk rebung, Mediterranean tiles, lace scallops */
.kb-band{position:absolute;left:0;right:0;height:34px;background:var(--accent);pointer-events:none;z-index:1;
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;-webkit-mask-position:center;mask-position:center}
.kb-band-top{top:0}.kb-band-bottom{bottom:0;transform:scaleY(-1)}
.decor-songket .kb-band{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='34'><g fill='none' stroke='black' stroke-width='1.6'><path d='M2 2L20 32L38 2'/><path d='M12 2L20 18L28 2'/><path d='M20 24l3 4-3 4-3-4z' fill='black'/></g><path d='M0 1H40' stroke='black' stroke-width='2'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='34'><g fill='none' stroke='black' stroke-width='1.6'><path d='M2 2L20 32L38 2'/><path d='M12 2L20 18L28 2'/><path d='M20 24l3 4-3 4-3-4z' fill='black'/></g><path d='M0 1H40' stroke='black' stroke-width='2'/></svg>");
  -webkit-mask-size:40px 34px;mask-size:40px 34px}
.decor-tiles .kb-band{height:40px;
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><g fill='none' stroke='black' stroke-width='2'><rect x='1' y='1' width='38' height='38'/><path d='M20 4C26 12 28 14 36 20C28 26 26 28 20 36C14 28 12 26 4 20C12 14 14 12 20 4Z'/><circle cx='20' cy='20' r='3' fill='black'/></g></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><g fill='none' stroke='black' stroke-width='2'><rect x='1' y='1' width='38' height='38'/><path d='M20 4C26 12 28 14 36 20C28 26 26 28 20 36C14 28 12 26 4 20C12 14 14 12 20 4Z'/><circle cx='20' cy='20' r='3' fill='black'/></g></svg>");
  -webkit-mask-size:40px 40px;mask-size:40px 40px}
.decor-lace .kb-band{height:18px;
  -webkit-mask-image:radial-gradient(circle at 12px 0,transparent 6px,#000 6.5px,#000 11px,transparent 11.5px);
  mask-image:radial-gradient(circle at 12px 0,transparent 6px,#000 6.5px,#000 11px,transparent 11.5px);
  -webkit-mask-size:24px 18px;mask-size:24px 18px;opacity:.75}
/* art deco fans, fine line art, kolam, watercolour washes, 囍 */
.kb-fan{width:110px;height:110px}
.kb-fan-tl{left:14px;top:14px}.kb-fan-tr{right:14px;top:14px;transform:scaleX(-1)}
.kb-fan-bl{left:14px;bottom:14px;transform:scaleY(-1)}.kb-fan-br{right:14px;bottom:14px;transform:scale(-1)}
.kb-line{width:150px;height:190px;opacity:.75}
.kb-line-l{left:-8px;bottom:-6px}.kb-line-r{right:-8px;top:-6px;transform:rotate(180deg)}
.kb-main .kb-line-l{bottom:auto;top:60px;left:-30px}.kb-main .kb-line-r{top:-10px}
.kb-kolam{width:150px;height:150px;opacity:.6}
.kb-kolam-t{left:50%;top:-56px;margin-left:-75px}.kb-kolam-b{left:50%;bottom:-56px;margin-left:-75px}
.kb-blob{position:absolute;width:300px;height:300px;border-radius:50%;pointer-events:none;filter:blur(2px)}
.kb-blob-a{right:-110px;top:-90px;background:radial-gradient(circle at 40% 40%,color-mix(in srgb,var(--accent) 55%,transparent),transparent 68%)}
.kb-blob-b{left:-120px;bottom:-100px;background:radial-gradient(circle at 60% 60%,color-mix(in srgb,var(--seal) 45%,transparent),transparent 66%)}
.kb-main .kb-blob-a{top:-60px}.kb-main .kb-blob-b{bottom:auto;top:900px}
.kb-xi{position:absolute;left:50%;top:50%;transform:translate(-50%,-62%);font-size:230px;line-height:1;color:var(--accent);opacity:.13;pointer-events:none;font-family:serif}

/* opal shimmer: soft iridescent wash (Pinterest 2026 "opalite") */
.decor-opal .kb-cover::before,.decor-opal .kb-main::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(60% 40% at 15% 10%,#f3d9ec,transparent 70%),radial-gradient(55% 40% at 90% 30%,#d6e8f7,transparent 70%),
  radial-gradient(60% 45% at 30% 95%,#e5f3e6,transparent 70%),radial-gradient(50% 35% at 85% 85%,#efe1fb,transparent 70%)}

/* ---------- cover layouts ---------- */
.kb-jawi{font-family:'Amiri',serif;font-size:30px;line-height:1.3;color:var(--accent);margin-bottom:6px}
/* editorial: big serif names, hairline rules, small spaced caps (2026 "quiet luxury" look) */
.kb-style-editorial .kb-names{font-weight:400;margin:4px 0 20px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);min-width:250px}
.kb-style-editorial .kb-names span{font-size:52px;letter-spacing:.02em;line-height:1.05}
.kb-style-editorial .kb-names .kb-joiner{font-size:26px;font-style:italic;font-family:var(--body);line-height:1.6;color:var(--muted)}
.kb-style-editorial .kb-eyebrow{font-family:var(--body);font-size:11px;letter-spacing:.45em}
.kb-style-editorial .kb-caps{font-size:12px;letter-spacing:.3em}
/* monogram: initials in a double-ring crest above the names */
.kb-crest{width:118px;height:118px;border-radius:50%;border:1px solid var(--accent);outline:1px solid var(--accent);outline-offset:5px;
  display:flex;align-items:center;justify-content:center;gap:2px;margin-bottom:22px;font-family:var(--script);color:var(--accent)}
.kb-crest span{font-size:46px;line-height:1}.kb-crest i{font-style:normal;font-size:20px;opacity:.8}
.kb-style-monogram .kb-names span{font-size:46px}.kb-style-monogram .kb-names .kb-joiner{font-size:34px}
.kb-style-monogram .kb-cta{top:585px} /* the crest makes the text block taller */
/* arch: mosque / window arch around the text */
.kb-archframe{position:absolute;left:50%;top:50%;width:300px;height:480px;margin:-316px 0 0 -150px;border:4px double var(--accent);border-radius:150px 150px 14px 14px;opacity:.75;pointer-events:none}
.kb-style-arch .kb-names span{font-size:50px}

/* envelope opening: the flap (top triangle) lifts, then the envelope drops away */
.kb-env{z-index:22;pointer-events:none}
.kb-env .kb-cover-text>*,.kb-env .kb-cta{animation:none}.kb-env .kb-cta{visibility:hidden}
.kb-env-flap{z-index:23;clip-path:polygon(0 0,100% 0,50% 34%);transform-origin:top center;backface-visibility:hidden;transition:transform .8s cubic-bezier(.5,0,.3,1),opacity .3s ease .5s}
.kb-env-flap.open{transform:perspective(1400px) rotateX(180deg);opacity:0}
.kb-env-body{clip-path:polygon(0 0,50% 34%,100% 0,100% 100%,0 100%);transition:transform 1s cubic-bezier(.6,0,.3,1) .6s}
.kb-env-body.open{transform:translateY(105%)}

/* ---------- main ---------- */
.kb-main{position:relative;max-width:480px;margin:0 auto;padding:110px 24px 100px;overflow:hidden}
.kb-sec{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;margin-bottom:44px}
.layout-pages .kb-main{padding-top:0;padding-bottom:0}
.layout-pages.is-open{height:100svh;overflow-y:auto;scroll-snap-type:y mandatory}
.layout-pages .kb-sec{min-height:100svh;justify-content:center;margin:0;scroll-snap-align:start;padding:48px 0}
.kb-script{font-family:var(--script);font-weight:400;line-height:1.15}
.kb-label{font-size:13px;letter-spacing:.32em;font-weight:500;text-transform:uppercase}
.kb-lead{font-size:16px;line-height:1.6;color:var(--muted);text-wrap:balance}
.kb-note{font-size:15px;font-style:italic;color:var(--muted)}
.kb-salam{font-size:30px}
.kb-hosts{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.kb-host{font-size:15px;letter-spacing:.1em;font-weight:600;text-transform:uppercase}
.kb-fullname{font-size:44px;white-space:nowrap}
.kb-amp{font-size:40px}
.kb-sec .kb-countdown{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.kb-sec .kb-countdown>div{border:1px solid var(--line);border-radius:12px;padding:14px 0;display:flex;flex-direction:column}
.kb-sec .kb-countdown span{font-size:30px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.1}
.kb-sec .kb-countdown small{font-size:11px;letter-spacing:.16em;color:var(--muted)}
.kb-row{display:flex;gap:22px;flex-wrap:wrap;justify-content:center}
.kb-link{min-height:44px;display:inline-flex;align-items:center;font-size:15px;text-underline-offset:4px}
.kb-date{font-size:22px;font-weight:600;letter-spacing:.04em}
.kb-time{font-size:20px;font-weight:500;margin-top:8px}
.kb-venue{font-size:20px;font-weight:600}
.kb-timeline{list-style:none;margin:0;padding:0;width:100%;text-align:left;border-left:1px solid var(--accent);display:flex;flex-direction:column;gap:14px}
.kb-timeline li{padding-left:16px;position:relative;display:flex;flex-direction:column}
.kb-timeline li::before{content:"";position:absolute;left:-5px;top:7px;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.kb-timeline b{font-size:15px;letter-spacing:.06em}.kb-timeline span{color:var(--muted)}
.kb-btns{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:12px;margin-top:8px}
.kb-btn{min-height:46px;padding:0 22px;border-radius:999px;font:600 15px/1 var(--body);letter-spacing:.1em;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;border:1px solid var(--text)}
.kb-root .kb-btn-solid{background:var(--text);color:var(--bg)}.kb-root .kb-btn-ghost{background:transparent;color:var(--text)}
.kb-wide{width:100%}
.kb-contacts{width:100%;display:flex;flex-direction:column;gap:10px}
.kb-contacts a{min-height:52px;border:1px solid var(--line);border-radius:14px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;gap:10px;text-decoration:none}
.kb-contacts i{font-style:normal;font-weight:400;color:var(--muted)}
.kb-gallery{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.kb-gallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px}
.kb-card{width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:14px}
.kb-gift{text-align:center;align-items:center}.kb-acc{font-size:22px;font-weight:600;letter-spacing:.08em}
.kb-qr{width:180px;border-radius:12px;background:#fff;padding:8px}
.kb-title{font-size:42px}
.kb-form label,.kb-form legend,.kb-flabel{display:flex;flex-direction:column;gap:6px;font-size:13px;letter-spacing:.14em;font-weight:600}
.kb-form fieldset{border:0;margin:0;padding:0;min-width:0}.kb-form legend{padding:0;margin-bottom:6px}
.kb-form input[type=text],.kb-form textarea{width:100%;min-height:46px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--text);padding:10px 14px;font:400 17px/1.4 var(--body);letter-spacing:0;resize:vertical}
.kb-seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.kb-seg input{position:absolute;opacity:0;pointer-events:none}
.kb-seg label{min-height:46px;border-radius:10px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;letter-spacing:0;cursor:pointer;flex-direction:row;font-weight:400;font-size:16px}
.kb-seg input:checked+label{background:var(--text);color:var(--bg);border-color:var(--text)}
.kb-pax{display:flex;flex-direction:column;gap:6px}
.kb-stepper{display:flex;align-items:center;gap:14px}
.kb-stepper button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--text);font-size:22px;cursor:pointer}
.kb-stepper output{min-width:30px;text-align:center;font-size:22px;font-weight:600}
.kb-formmsg{min-height:1em;font-size:15px;color:var(--muted)}
.kb-wallhead{margin-top:22px;align-self:flex-start}
.kb-wishes{width:100%;text-align:left;display:flex;flex-direction:column;gap:12px;max-height:340px;overflow-y:auto}
.kb-wish{border-bottom:1px solid var(--line);padding-bottom:12px}.kb-wish b{font-size:17px}.kb-wish p{color:var(--muted);overflow-wrap:anywhere}
.kb-it{font-style:italic}.kb-sign{font-size:44px}
/* ornaments between sections */
.kb-div{display:block;margin:-14px auto 30px;color:var(--accent);pointer-events:none}
svg.kb-div{width:200px;height:28px}
.kb-div-line,.kb-div-dots{display:flex;align-items:center;justify-content:center;gap:10px;width:200px;height:20px}
.kb-div-line i{flex:1;height:1px;background:var(--accent);opacity:.6}
.kb-div-line b{width:7px;height:7px;background:var(--accent);transform:rotate(45deg)}
.kb-div-dots b{width:5px;height:5px;border-radius:50%;background:var(--accent)}
.kb-div-songket{width:180px;height:16px;background:var(--accent);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='16'><g fill='none' stroke='black' stroke-width='1.5'><path d='M1 1L10 15L19 1'/><path d='M6 1L10 8L14 1'/></g></svg>") repeat-x center/20px 16px;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='16'><g fill='none' stroke='black' stroke-width='1.5'><path d='M1 1L10 15L19 1'/><path d='M6 1L10 8L14 1'/></g></svg>") repeat-x center/20px 16px}
/* boxed sections: modern card look */
.kb-boxed .kb-sec{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:30px 20px;margin-bottom:22px}
.kb-boxed .kb-sec.kb-couple,.kb-boxed .kb-sec.kb-greeting{background:transparent;border-color:transparent}
.kb-boxed .kb-div{margin:-4px auto 22px}
/* published card: fade-up on scroll */
.kb-reveal{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease}
.kb-reveal.in{opacity:1;transform:none}
/* page dots (pages layout) */
.kb-dots{position:fixed;right:10px;top:50%;transform:translateY(-50%);z-index:25;display:flex;flex-direction:column;gap:8px}
.kb-root:not(.is-open) .kb-dots{display:none}
.kb-dots button{width:10px;height:10px;padding:0;border-radius:50%;border:1px solid var(--text);background:transparent;opacity:.6;cursor:pointer}
.kb-dots button[aria-current=true]{background:var(--accent);border-color:var(--accent);opacity:1}
/* builder preview: show what's clickable-to-edit */
.kb-selectable .kb-sec{cursor:pointer;border-radius:14px;outline:1px dashed transparent;outline-offset:8px;transition:outline-color .15s}
.kb-selectable .kb-sec:hover{outline-color:color-mix(in srgb,var(--accent) 70%,transparent)}
.kb-selectable .kb-cover-text{cursor:pointer}
.kb-watermark{text-align:center;font-size:12px;letter-spacing:.2em;color:var(--muted);opacity:.7;margin-top:20px}
.kb-fab{position:fixed;right:16px;bottom:max(16px,env(safe-area-inset-bottom));z-index:30;width:48px;height:48px;border-radius:50%;border:1px solid var(--text);background:var(--surface);color:var(--text);font-size:20px;cursor:pointer}
@media (prefers-reduced-motion:reduce){.kb-root *{animation:none!important;transition:none!important}}

/* more open buttons */
.kb-ring{width:124px;height:124px}
.kb-ribbon{width:224px;height:104px}
.kb-envbtn{width:132px;height:112px}
.kb-archbtn{width:104px;height:137px}
.kb-open-text{background:none;border:0;cursor:pointer;color:var(--text);font:600 15px var(--body);letter-spacing:.35em;display:flex;flex-direction:column;align-items:center;gap:12px;padding:12px 8px;min-height:44px}
.kb-ot-row{display:flex;align-items:center;gap:14px}.kb-ot-row i{width:36px;height:1px;background:var(--accent)}.kb-ot-row b{font-weight:600;margin-right:-.35em}
.kb-ot-arrow{width:12px;height:12px;border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:rotate(45deg);animation:kbNudge 1.6s ease-in-out infinite}
@keyframes kbNudge{50%{transform:translateY(6px) rotate(45deg)}}

/* more openings */
.kb-gate,.kb-curt{z-index:22;pointer-events:none}
.kb-gate .kb-cover-text>*,.kb-gate .kb-cta,.kb-curt .kb-cover-text>*,.kb-curt .kb-cta{animation:none}.kb-gate .kb-cta,.kb-curt .kb-cta{visibility:hidden}
.kb-gate{transition:transform 1.5s cubic-bezier(.55,0,.25,1),filter 1.5s ease;backface-visibility:hidden}
.kb-gate-l{clip-path:inset(0 50% 0 0);transform-origin:left center}.kb-gate-r{clip-path:inset(0 0 0 50%);transform-origin:right center}
.kb-gate-l.open{transform:perspective(1100px) rotateY(96deg);filter:brightness(.55)}.kb-gate-r.open{transform:perspective(1100px) rotateY(-96deg);filter:brightness(.55)}
.kb-curt{transition:transform 1.4s cubic-bezier(.6,0,.3,1),opacity .5s ease 1s}
.kb-curt-l{clip-path:inset(0 50% 0 0);transform-origin:left top}.kb-curt-r{clip-path:inset(0 0 0 50%);transform-origin:right top}
.kb-curt-l.open{transform:scaleX(.1) skewY(7deg) translateY(-6%);opacity:0}.kb-curt-r.open{transform:scaleX(.1) skewY(-7deg) translateY(-6%);opacity:0}
.kb-cover.anim-book{transform-origin:left center;transition:transform 1.4s cubic-bezier(.55,0,.25,1),filter 1.4s ease;transform:perspective(1400px) rotateY(-100deg);filter:brightness(.6)}
.kb-cover.anim-zoom{transform-origin:50% 72%;transition:transform 1.1s cubic-bezier(.5,0,.2,1),opacity .9s ease;transform:scale(1.9);opacity:0}
.kb-cover.anim-fade-slow{transition:opacity 1.4s ease .2s;opacity:0}
.kb-petal{position:fixed;top:-6vh;z-index:25;width:var(--sz);height:var(--sz);border-radius:80% 0 80% 0;background:var(--accent);opacity:.9;pointer-events:none;animation:kbPetal 3s linear both}
.kb-petal-b{background:var(--seal,var(--accent));border-radius:0 80% 0 80%}
@keyframes kbPetal{to{transform:translate(var(--dx),112vh) rotate(540deg)}}
.kb-badge{position:fixed;z-index:30;top:10px;left:50%;transform:translateX(-50%);margin:0;padding:6px 14px;border-radius:999px;background:rgba(20,20,20,.78);color:#fff;font:600 11px/1.2 system-ui,sans-serif;letter-spacing:.18em;white-space:nowrap;pointer-events:none}
.kb-ended{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 24px;box-sizing:border-box;font:16px/1.6 Georgia,serif;color:#f3ead8;background:#2b1d1f}
.kb-ended h1{font-weight:400;font-size:32px;margin:0 0 10px}

/* ---------- style axes (theme.look / heading / btnStyle / reveal / fx) ---------- */
.kb-main{z-index:1}
/* section look: luxe = gold foil type + double hairline frames */
.look-luxe .kb-label,.look-luxe .kb-title,.look-luxe .kb-names span,.look-luxe .kb-fullname,.look-luxe .kb-sign{
  background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 70%,#000) 0%,var(--accent) 22%,color-mix(in srgb,var(--accent) 35%,#fff) 45%,var(--accent) 62%,color-mix(in srgb,var(--accent) 70%,#000) 100%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:kbFoil 6s linear infinite}
@keyframes kbFoil{to{background-position:-250% 0}}
.look-luxe .kb-sec:not(.kb-couple):not(.kb-greeting){padding:34px 22px;border:1px solid color-mix(in srgb,var(--accent) 60%,transparent);border-radius:4px;
  box-shadow:0 0 0 5px var(--bg),0 0 0 6px color-mix(in srgb,var(--accent) 35%,transparent),0 24px 60px -36px var(--accent)}
.look-luxe .kb-sec .kb-countdown>div{border-color:color-mix(in srgb,var(--accent) 60%,transparent);box-shadow:inset 0 0 18px -8px var(--accent)}
.look-luxe .kb-sec .kb-countdown span{color:var(--accent)}
/* glass = frosted cards over soft colour light */
.kb-root.look-glass{background:radial-gradient(70% 45% at 12% 8%,color-mix(in srgb,var(--accent) 42%,transparent),transparent 70%),
  radial-gradient(60% 45% at 92% 55%,color-mix(in srgb,var(--seal) 55%,transparent),transparent 70%),
  radial-gradient(60% 40% at 20% 95%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 70%),var(--bg);background-attachment:fixed}
.look-glass .kb-sec:not(.kb-couple):not(.kb-greeting){padding:30px 20px;border-radius:26px;background:color-mix(in srgb,var(--surface) 42%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);border:1px solid color-mix(in srgb,var(--text) 18%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 25%,transparent),0 20px 50px -30px rgba(0,0,0,.45)}
.look-glass .kb-sec .kb-countdown>div,.look-glass .kb-contacts a{background:color-mix(in srgb,var(--bg) 35%,transparent)}
/* bold = big type, colour-block bands, thick accents */
.look-bold .kb-label{font-size:32px;line-height:1;letter-spacing:.01em;font-weight:600;padding-bottom:10px;border-bottom:4px solid var(--accent)}
.look-bold .kb-sec{padding:40px 0}
.look-bold .kb-sec:nth-of-type(even){background:var(--surface);box-shadow:0 0 0 100vmax var(--surface);clip-path:inset(0 -100vmax)}
.look-bold .kb-sec .kb-countdown span{font-size:46px;color:var(--accent)}
.look-bold .kb-sec .kb-countdown>div{border-width:2px;border-radius:0}
.look-bold .kb-fullname{font-size:52px}
.look-bold .kb-date{font-size:28px}
.look-bold .kb-div{display:none}
/* royal = arched panels, double gold border, ribbon titles */
.look-royal .kb-sec:not(.kb-couple):not(.kb-greeting){padding:58px 22px 30px;background:var(--surface);border:4px double var(--accent);
  border-radius:200px 200px 18px 18px/110px 110px 18px 18px}
.look-royal .kb-label{background:var(--accent);color:var(--bg);padding:9px 26px;margin-bottom:6px;
  clip-path:polygon(0 0,100% 0,calc(100% - 12px) 50%,100% 100%,0 100%,12px 50%)}
/* heading style */
.head-script .kb-label{font-family:var(--script);text-transform:none;letter-spacing:0;font-size:42px;font-weight:400;line-height:1.1}
.head-serif .kb-label{text-transform:none;letter-spacing:-.01em;font-size:30px;font-style:italic;font-weight:500;line-height:1.15}
.head-lines .kb-label{display:flex;align-items:center;gap:14px;width:100%}
.head-lines .kb-label::before,.head-lines .kb-label::after{content:"";flex:1;height:1px;background:var(--accent)}
.look-royal.head-script .kb-label,.look-royal.head-serif .kb-label{font-size:26px}
.look-bold.head-script .kb-label{font-size:48px;border-bottom:0}
/* button shape */
.btn-sharp .kb-btn{border-radius:2px;font-size:13px;letter-spacing:.24em;text-transform:uppercase}
.btn-gold .kb-btn{border-color:var(--accent)}
.kb-root.btn-gold .kb-btn-solid{background:var(--accent);color:var(--bg)}.kb-root.btn-gold .kb-btn-ghost{color:var(--accent)}
.btn-foil .kb-btn{border:0;position:relative;overflow:hidden}
.kb-root.btn-foil .kb-btn-solid{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 75%,#000),var(--accent) 40%,color-mix(in srgb,var(--accent) 45%,#fff) 55%,var(--accent) 70%);color:var(--bg)}
.kb-root.btn-foil .kb-btn-ghost{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent)}
.btn-foil .kb-btn-solid::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);animation:kbShine 3.2s ease-in-out infinite}
@keyframes kbShine{60%,100%{transform:translateX(120%)}}
.btn-soft .kb-btn{border-radius:14px;border-color:var(--line)}
.kb-root.btn-soft .kb-btn-solid{background:var(--surface);color:var(--text);box-shadow:0 10px 24px -14px rgba(0,0,0,.6)}
/* scroll animation variants (published card only) */
.rv-zoom .kb-reveal{transform:scale(.88)}
.rv-blur .kb-reveal{filter:blur(12px);transform:translateY(12px);transition:opacity .9s ease,transform .9s ease,filter .9s ease}
.rv-blur .kb-reveal.in{filter:none}
.rv-side .kb-reveal:nth-of-type(odd){transform:translateX(-46px)}.rv-side .kb-reveal:nth-of-type(even){transform:translateX(46px)}
.rv-flip .kb-reveal{transform:perspective(900px) rotateX(-28deg);transform-origin:50% 0}
.kb-root .kb-reveal.in{transform:none}
/* background effects */
.kb-fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.kb-fx-sparkle,.kb-fx-petals{z-index:21}
.kb-fx i{position:absolute;left:var(--x);top:var(--y)}
.kb-fx-sparkle i{width:calc(var(--w) * 3px);height:calc(var(--w) * 3px);background:var(--accent);opacity:0;
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:kbTwinkle var(--d) ease-in-out infinite var(--dl)}
@keyframes kbTwinkle{0%,100%{opacity:0;transform:scale(.3)}50%{opacity:.95;transform:scale(1) rotate(45deg)}}
.kb-fx-petals i{top:-8%;width:calc(var(--w) * 4px);height:calc(var(--w) * 3px);border-radius:80% 0 80% 0;opacity:.75;
  background:color-mix(in srgb,var(--accent) 65%,var(--seal));animation:kbFall calc(var(--d) * 2.6) linear infinite calc(var(--dl) * 3)}
@keyframes kbFall{from{transform:translate(0,-10vh) rotate(0)}to{transform:translate(14vw,118vh) rotate(620deg)}}
.kb-fx-glow i{width:70vmax;height:70vmax;margin:-35vmax 0 0 -35vmax;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 34%,transparent),transparent 62%);animation:kbDrift calc(var(--d) * 3) ease-in-out infinite alternate}
.kb-fx-glow i:nth-child(2){background:radial-gradient(circle,color-mix(in srgb,var(--seal) 45%,transparent),transparent 62%)}
@keyframes kbDrift{to{transform:translate(12vw,-10vh) scale(1.15)}}
.kb-fx-aurora::before{content:"";position:absolute;inset:-60%;animation:kbAurora 16s ease-in-out infinite alternate;
  background:linear-gradient(120deg,transparent 30%,color-mix(in srgb,var(--accent) 26%,transparent) 44%,color-mix(in srgb,var(--seal) 30%,transparent) 56%,transparent 70%)}
@keyframes kbAurora{from{transform:translate(-18%,-10%) rotate(-6deg)}to{transform:translate(18%,10%) rotate(6deg)}}
@media (prefers-reduced-motion:reduce){.kb-fx-sparkle,.kb-fx-petals{display:none}}