/* Kirana — warm daylight family celebration flagship. Trusted template stylesheet. */

.uk-kirana{
  --ki-paper:#FFF8F0;
  --ki-tint:#FDEFE0;
  --ki-accent:#E08A54;
  --ki-accent-dp:#B86634;
  --ki-sun:#F2B84B;
  --ki-leaf:#7FA36B;
  --ki-ink:#4A3328;
  --ki-muted:rgba(74,51,40,.68);
  --ki-line:rgba(224,138,84,.28);
  --ki-hairline:rgba(74,51,40,.12);
  --ki-radius:22px;
  --ki-radius-control:999px;
  --ki-scallop:12px;
  --ki-ease:cubic-bezier(.2,.9,.3,1.2);
  --ki-reveal:.62s;
  --ki-shift:22px;
  --ki-col:min(100% - 34px, 500px);
  min-height:100vh;
  overflow:clip;
  background:
    radial-gradient(90vw 60vw at 50% -10%, rgba(242,184,75,.22), transparent 62%),
    radial-gradient(80vw 60vw at 10% 105%, rgba(224,138,84,.16), transparent 62%),
    var(--ki-paper);
  color:var(--ki-ink);
  font-family:"DM Sans",system-ui,sans-serif;
  font-size:15px;
  line-height:1.8;
}
.uk-kirana *,.uk-kirana *:before,.uk-kirana *:after{box-sizing:border-box}
/* Controls are toggled through the hidden attribute and carry their own
   display rules, so the user-agent rule has to be reinforced here. */
.uk-kirana [hidden]{display:none !important}
.uk-kirana .bdu-icon{display:inline-block;flex:0 0 auto;vertical-align:middle}
.uk-kirana h1,.uk-kirana h2,.uk-kirana h3,.uk-kirana h4{
  font-family:"Playfair Display",Georgia,serif;font-weight:700;line-height:1.18;overflow-wrap:anywhere;
}
.uk-kirana p,.uk-kirana strong,.uk-kirana span,.uk-kirana li,.uk-kirana cite{overflow-wrap:anywhere}
.uk-ki-preline{white-space:pre-line}

/* Palettes ---------------------------------------------------------------- */
.uk-kirana.uk-design-palette-warm{--ki-paper:#FFF4EA;--ki-tint:#FAE3D0;--ki-accent:#C2663A;--ki-accent-dp:#96492A;--ki-sun:#E0A85C;--ki-leaf:#A38257;--ki-ink:#4A3226;--ki-muted:rgba(74,50,38,.68);--ki-line:rgba(194,102,58,.3);--ki-hairline:rgba(74,50,38,.12)}
.uk-kirana.uk-design-palette-romantic{--ki-paper:#FFF5F5;--ki-tint:#FBE2E4;--ki-accent:#D97A87;--ki-accent-dp:#AE5764;--ki-sun:#F0B6A2;--ki-leaf:#A8879B;--ki-ink:#4C2C33;--ki-muted:rgba(76,44,51,.68);--ki-line:rgba(217,122,135,.3);--ki-hairline:rgba(76,44,51,.12)}
.uk-kirana.uk-design-palette-sage{--ki-paper:#F6FAF2;--ki-tint:#E6F0DE;--ki-accent:#6C9A5A;--ki-accent-dp:#4E7440;--ki-sun:#CBD98A;--ki-leaf:#8AAE72;--ki-ink:#2F3D2A;--ki-muted:rgba(47,61,42,.68);--ki-line:rgba(108,154,90,.3);--ki-hairline:rgba(47,61,42,.12)}
.uk-kirana.uk-design-palette-midnight{--ki-paper:#241B2C;--ki-tint:#2F2338;--ki-accent:#E39A6B;--ki-accent-dp:#C87A4D;--ki-sun:#F0C56A;--ki-leaf:#9E8ABF;--ki-ink:#F6ECE2;--ki-muted:rgba(246,236,226,.72);--ki-line:rgba(227,154,107,.34);--ki-hairline:rgba(246,236,226,.16)}

/* Typography variants ----------------------------------------------------- */
.uk-kirana.uk-design-type-classic h1,
.uk-kirana.uk-design-type-classic h2,
.uk-kirana.uk-design-type-classic h3{font-weight:600;letter-spacing:.03em}
.uk-kirana.uk-design-type-editorial h1,
.uk-kirana.uk-design-type-editorial h2,
.uk-kirana.uk-design-type-editorial h3{font-style:italic;font-weight:600;letter-spacing:-.01em}
.uk-kirana.uk-design-type-modern h1,
.uk-kirana.uk-design-type-modern h2,
.uk-kirana.uk-design-type-modern h3,
.uk-kirana.uk-design-type-modern h4{font-family:"DM Sans",system-ui,sans-serif;font-weight:700;letter-spacing:-.035em}

/* Surface variants. Sharp also flattens the scalloped section edge, which is
   the largest single change any control here can make. */
.uk-kirana.uk-design-surface-soft{--ki-radius:30px;--ki-scallop:18px}
.uk-kirana.uk-design-surface-balanced{--ki-radius:12px;--ki-scallop:7px}
.uk-kirana.uk-design-surface-sharp{--ki-radius:0px;--ki-radius-control:0px;--ki-scallop:0px}

/* Motion variants --------------------------------------------------------- */
.uk-kirana.uk-design-motion-soft{--ki-reveal:.9s;--ki-shift:10px;--ki-ease:cubic-bezier(.25,.8,.25,1)}
.uk-kirana.uk-design-motion-cinematic{--ki-reveal:.75s;--ki-shift:34px}
.uk-kirana.uk-design-motion-minimal{--ki-reveal:0s;--ki-shift:0px}

/* Primitives -------------------------------------------------------------- */
.uk-ki-eyebrow{
  margin:0;color:var(--ki-accent-dp);font-size:10px;font-weight:700;line-height:1.6;
  letter-spacing:.26em;text-transform:uppercase;
}
.uk-ki-copy{margin:14px auto 0;max-width:46ch;color:var(--ki-muted);font-size:14px;line-height:1.9}
.uk-ki-lead{margin:14px 0 0;font-family:"Playfair Display",Georgia,serif;font-size:clamp(1.3rem,6vw,1.75rem)}

/* The ribbon banner: a warm plate behind the headline with notched ends. */
.uk-ki-ribbon{position:relative;margin:14px 0 0;display:block}
.uk-ki-ribbon>span{
  display:inline-block;max-width:100%;padding:10px 26px;
  border-radius:var(--ki-radius);background:var(--ki-accent);color:#FFF8F0;
  box-shadow:0 10px 26px rgba(184,102,52,.26);
}
.uk-kirana.uk-design-surface-sharp .uk-ki-ribbon>span{box-shadow:none}

.uk-ki-button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 20px;cursor:pointer;text-decoration:none;
  border:1.5px solid var(--ki-line);border-radius:var(--ki-radius-control);
  background:transparent;color:var(--ki-accent-dp);
  font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  transition:background .25s var(--ki-ease),border-color .25s var(--ki-ease),color .25s var(--ki-ease),transform .2s var(--ki-ease);
}
.uk-ki-button:hover{border-color:var(--ki-accent);background:rgba(224,138,84,.12)}
.uk-ki-button:active{transform:scale(.97)}
.uk-ki-button.is-solid{border-color:var(--ki-accent);background:var(--ki-accent);color:#FFF8F0}
.uk-ki-button.is-solid:hover{background:var(--ki-accent-dp);color:#FFF8F0}
.uk-kirana :is(a,button,summary,input,select,textarea):focus-visible{outline:2px solid var(--ki-accent-dp);outline-offset:3px}

/* Confetti: eight dots in the template's four accent tones. */
.uk-ki-confetti{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;height:26px;opacity:.85}
.uk-ki-confetti i{border-radius:50%}
.uk-ki-confetti i:nth-child(1){width:6px;height:6px;background:var(--ki-accent);transform:translateY(-8px)}
.uk-ki-confetti i:nth-child(2){width:9px;height:9px;background:var(--ki-sun);transform:translateY(5px)}
.uk-ki-confetti i:nth-child(3){width:5px;height:5px;background:var(--ki-leaf);transform:translateY(-3px)}
.uk-ki-confetti i:nth-child(4){width:11px;height:11px;background:var(--ki-accent);transform:translateY(2px)}
.uk-ki-confetti i:nth-child(5){width:6px;height:6px;background:var(--ki-sun);transform:translateY(-7px)}
.uk-ki-confetti i:nth-child(6){width:8px;height:8px;background:var(--ki-leaf);transform:translateY(4px)}
.uk-ki-confetti i:nth-child(7){width:5px;height:5px;background:var(--ki-accent-dp);transform:translateY(-4px)}
.uk-ki-confetti i:nth-child(8){width:7px;height:7px;background:var(--ki-sun);transform:translateY(6px)}
.uk-ki-confetti.is-bottom{transform:scaleY(-1);margin-bottom:8px}

.uk-ki-progress{position:fixed;left:0;top:0;z-index:1100;width:100%;height:3px;pointer-events:none}
.uk-ki-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ki-sun),var(--ki-accent),var(--ki-accent-dp));transition:width .1s linear}

.uk-ki-toast{
  position:fixed;left:50%;bottom:96px;z-index:1250;transform:translate(-50%,10px);
  opacity:0;pointer-events:none;max-width:min(88vw,340px);
  padding:10px 18px;border-radius:999px;background:var(--ki-ink);color:var(--ki-paper);
  font-size:12px;font-weight:600;text-align:center;
  box-shadow:0 14px 40px rgba(74,51,40,.3);transition:opacity .22s var(--ki-ease),transform .22s var(--ki-ease);
}
.uk-ki-toast.is-show{opacity:1;transform:translate(-50%,0)}

.uk-ki-feedback{
  position:fixed;left:50%;top:64px;z-index:1200;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;width:min(92vw,520px);
  padding:11px 16px;border:1px solid var(--ki-line);border-radius:16px;
  background:var(--ki-paper);color:var(--ki-ink);font-size:13px;box-shadow:0 12px 34px rgba(74,51,40,.18);
}

/* Reveal — a small pop, in keeping with a celebration. */
.uk-ki-reveal,.uk-ki-reveal-item{
  opacity:0;transform:translate3d(0,var(--ki-shift),0) scale(.98);
  transition:opacity var(--ki-reveal) var(--ki-ease),transform var(--ki-reveal) var(--ki-ease);
}
.uk-ki-reveal.is-visible,.uk-ki-reveal.is-visible .uk-ki-reveal-item,.uk-ki-reveal-item.is-visible{opacity:1;transform:none}
.uk-ki-reveal.is-visible .uk-ki-reveal-item:nth-child(2){transition-delay:.07s}
.uk-ki-reveal.is-visible .uk-ki-reveal-item:nth-child(3){transition-delay:.14s}
.uk-ki-reveal.is-visible .uk-ki-reveal-item:nth-child(4){transition-delay:.21s}

/* Opening gate ------------------------------------------------------------ */
.uk-ki-gate{
  position:fixed;inset:0;z-index:900;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;padding:26px 20px;
  background:var(--ki-paper);text-align:center;
  transition:opacity .55s var(--ki-ease),visibility .55s;
}
.uk-ki-gate.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.uk-ki-gate-media{position:absolute;inset:0;overflow:hidden}
.uk-ki-gate-media img{width:100%;height:100%;object-fit:cover;object-position:var(--ki-focus-mobile-x,50%) var(--ki-focus-mobile-y,35%)}
.uk-ki-gate-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,248,240,.82),rgba(255,248,240,.93) 55%,var(--ki-paper))}
.uk-ki-gate-body{position:relative;z-index:2;width:min(100%,440px)}
.uk-ki-gate-body h1{font-size:clamp(1.9rem,9vw,2.7rem)}
.uk-ki-gate-date{margin:16px 0 0;color:var(--ki-muted);font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.uk-ki-gate-body .uk-ki-button{margin-top:22px}
.uk-ki-confetti{position:relative;z-index:2}

.uk-ki-guest{margin:20px auto 0;max-width:320px;padding:12px 16px;border:1.5px dashed var(--ki-line);border-radius:var(--ki-radius);background:rgba(255,255,255,.44)}
.uk-ki-guest span{display:block;color:var(--ki-muted);font-size:9px;letter-spacing:.22em;text-transform:uppercase}
.uk-ki-guest strong{display:block;margin-top:4px;font-family:"Playfair Display",Georgia,serif;font-size:18px;font-weight:700;line-height:1.35}

.uk-ki-group-list{display:grid;gap:10px;margin:16px 0 0}
.uk-ki-group-list span{display:grid;gap:2px}
.uk-ki-group-list small{color:var(--ki-muted);font-size:9px;letter-spacing:.2em;text-transform:uppercase}
.uk-ki-group-list strong{font-family:"Playfair Display",Georgia,serif;font-size:18px;font-weight:700}

/* Cover ------------------------------------------------------------------- */
/* Hero cover: full-bleed photograph, with the paper riding up over it. */
.uk-ki-cover{min-height:100svh;display:grid;align-content:start;padding:0 0 clamp(36px,9vw,56px);text-align:center}
.uk-ki-frame{position:relative;width:100%;height:82svh;overflow:hidden}
.uk-ki-cover-image{width:100%;height:100%;object-fit:cover;object-position:var(--ki-focus-mobile-x,50%) var(--ki-focus-mobile-y,35%)}
.uk-ki-frame-veil{position:absolute;inset:auto 0 0;height:34%;background:linear-gradient(180deg,rgba(255,248,240,0),var(--ki-paper))}
.uk-ki-cover .uk-ki-wrap{margin-top:-46px;position:relative;z-index:2}
.uk-ki-cover h1{font-size:clamp(1.9rem,9vw,2.7rem)}
.uk-ki-cover-date{margin:18px 0 0;color:var(--ki-muted);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.uk-ki-monogram{display:block;margin:22px 0 0;color:var(--ki-accent);font-family:"Playfair Display",Georgia,serif;font-size:15px;letter-spacing:.3em}

/* Sections with a scalloped top edge -------------------------------------- */
.uk-ki-sec{position:relative;padding:clamp(48px,11vw,72px) 0;text-align:center}
.uk-ki-sec.is-tint,.uk-ki-sec.is-accent{
  background:var(--ki-tint);
  -webkit-mask:radial-gradient(var(--ki-scallop) at 50% var(--ki-scallop), transparent 99%, #000 100%) 50% 0/calc(var(--ki-scallop)*3.4) 100% repeat-x, linear-gradient(#000 0 0) 0 var(--ki-scallop)/100% calc(100% - var(--ki-scallop)) no-repeat;
  mask:radial-gradient(var(--ki-scallop) at 50% var(--ki-scallop), transparent 99%, #000 100%) 50% 0/calc(var(--ki-scallop)*3.4) 100% repeat-x, linear-gradient(#000 0 0) 0 var(--ki-scallop)/100% calc(100% - var(--ki-scallop)) no-repeat;
  padding-top:calc(clamp(48px,11vw,72px) + var(--ki-scallop));
}
.uk-ki-sec.is-accent{background:linear-gradient(160deg,var(--ki-sun),var(--ki-accent))}
.uk-ki-wrap{width:var(--ki-col);margin:0 auto}
.uk-ki-wrap>h2{margin:10px 0 0;font-size:clamp(1.65rem,7.5vw,2.25rem)}
.uk-ki-bismillah{margin:0 0 18px;color:var(--ki-accent-dp);font-size:clamp(1.05rem,5vw,1.35rem);line-height:2}
.uk-ki-quote{margin:24px auto 0;max-width:42ch;padding:20px;border-radius:var(--ki-radius);background:rgba(255,255,255,.55);border:1px solid var(--ki-hairline)}
.uk-ki-quote p{margin:0;font-family:"Playfair Display",Georgia,serif;font-style:italic;font-size:clamp(1rem,4.4vw,1.2rem);line-height:1.7}
.uk-ki-quote cite{display:block;margin-top:10px;color:var(--ki-muted);font-size:11px;font-style:normal;letter-spacing:.14em;text-transform:uppercase}

/* People ------------------------------------------------------------------ */
.uk-ki-group-index{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:22px 0 0}
.uk-ki-group-index button{
  min-height:44px;padding:0 16px;cursor:pointer;border:1.5px solid var(--ki-line);
  border-radius:var(--ki-radius-control);background:transparent;color:var(--ki-muted);font:inherit;font-size:12px;
}
.uk-ki-group-index button.is-active{border-color:var(--ki-accent);background:rgba(224,138,84,.14);color:var(--ki-accent-dp)}
.uk-ki-groups{display:grid;gap:36px;margin:28px 0 0}
.uk-ki-group>.uk-ki-eyebrow{margin-bottom:16px}
/* Hung from a garland, the same ornament the gate opens with. */
.uk-ki-people{position:relative;display:grid;gap:30px;padding-top:14px}
.uk-ki-people:before{
  content:"";position:absolute;left:50%;top:0;bottom:24px;width:0;
  border-left:2px dotted var(--ki-line);
}
.uk-ki-person{position:relative}
.uk-ki-person:before{
  content:"";position:absolute;left:50%;top:-10px;width:9px;height:9px;margin-left:-4.5px;
  border-radius:50%;background:var(--ki-accent);
}
.uk-ki-people>.uk-ki-person:nth-child(odd){transform:translateX(-5%)}
.uk-ki-people>.uk-ki-person:nth-child(even){transform:translateX(5%)}
/* The 5% step is a zigzag along the dotted line, which needs two entries to read
   as one. A single entry just lands off-centre, so it keeps its place. */
.uk-ki-people>.uk-ki-person:only-child{transform:none}
.uk-ki-person{min-width:0}
.uk-ki-portrait{
  width:min(62%,200px);margin:0 auto;aspect-ratio:1/1;overflow:hidden;
  border-radius:var(--ki-round, 50%);border:4px solid rgba(255,255,255,.8);background:var(--ki-tint);
  box-shadow:0 12px 30px rgba(74,51,40,.16);
}
.uk-kirana.uk-design-surface-sharp .uk-ki-portrait{border-radius:0;box-shadow:none}
.uk-kirana.uk-design-surface-balanced .uk-ki-portrait{border-radius:var(--ki-radius)}
.uk-ki-portrait img{width:100%;height:100%;object-fit:cover}
.uk-ki-portrait.is-empty{display:grid;place-items:center}
.uk-ki-portrait.is-empty span{font-family:"Playfair Display",Georgia,serif;font-size:2.4rem;color:var(--ki-accent)}
.uk-ki-person h3{margin:16px 0 0;font-size:clamp(1.45rem,6.5vw,1.9rem)}
.uk-ki-role{margin:6px 0 0;color:var(--ki-accent-dp);font-size:9px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.uk-ki-fullname{display:block;margin-top:8px;font-size:13px;font-weight:500;color:var(--ki-muted)}
.uk-ki-parents{margin-top:20px;padding-top:16px;border-top:1px dashed var(--ki-line)}
.uk-ki-parents span{display:block;color:var(--ki-muted);font-size:9px;letter-spacing:.2em;text-transform:uppercase}
.uk-ki-parents p{margin:6px 0 0;font-size:14px;line-height:1.8}
.uk-ki-parents em{color:var(--ki-accent);font-family:"Playfair Display",Georgia,serif;font-style:normal}
.uk-ki-bio{margin-top:12px;color:var(--ki-muted);font-size:13px;line-height:1.85}

/* Events ------------------------------------------------------------------ */
.uk-ki-events{display:grid;gap:22px;margin:28px 0 0}
/* A torn ticket: notched on both sides, perforated under the heading. */
.uk-ki-event{
  position:relative;padding:26px 20px 22px;border-radius:var(--ki-radius);
  background:rgba(255,255,255,.72);
  box-shadow:0 8px 24px rgba(74,51,40,.1);
  -webkit-mask:radial-gradient(13px at 0 84px,transparent 98%,#000 100%) 0 0/51% 100% no-repeat,
        radial-gradient(13px at 100% 84px,transparent 98%,#000 100%) 100% 0/51% 100% no-repeat;
  mask:radial-gradient(13px at 0 84px,transparent 98%,#000 100%) 0 0/51% 100% no-repeat,
        radial-gradient(13px at 100% 84px,transparent 98%,#000 100%) 100% 0/51% 100% no-repeat;
}
.uk-ki-event:before{
  content:"";position:absolute;left:20px;right:20px;top:84px;height:0;
  border-top:2px dashed var(--ki-line);
}
.uk-ki-event h3{padding-bottom:26px}
.uk-kirana.uk-design-surface-sharp .uk-ki-event{-webkit-mask:none;mask:none;border:1.5px solid var(--ki-hairline);box-shadow:none}
.uk-ki-event h3{margin:0;font-size:clamp(1.25rem,5.5vw,1.6rem)}
.uk-ki-event-date{margin:10px 0 0;color:var(--ki-accent-dp);font-size:13px;font-weight:700;letter-spacing:.04em}
.uk-ki-venue{display:block;margin-top:14px;font-size:14px;font-weight:700}
.uk-ki-address{margin:6px auto 0;max-width:38ch;color:var(--ki-muted);font-size:13px;line-height:1.75}
.uk-ki-scope{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:6px;margin:0 0 12px}
.uk-ki-scope span{color:var(--ki-muted);font-size:9px;letter-spacing:.2em;text-transform:uppercase}
.uk-ki-scope strong{color:var(--ki-accent-dp);font-size:12px}
.uk-ki-map{width:100%;height:180px;margin-top:16px;border:0;border-radius:var(--ki-radius);filter:saturate(.9)}
.uk-ki-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px}
.uk-ki-actions .uk-ki-button{min-height:42px;padding:0 16px}

/* Countdown --------------------------------------------------------------- */
.uk-ki-countdown{color:#FFF8F0}
.uk-ki-countdown .uk-ki-eyebrow{color:rgba(255,248,240,.9)}
/* One ribbon, notched at both ends, carrying all four values. */
.uk-ki-count{
  position:relative;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:0;
  width:min(100%,460px);margin:26px auto 0;padding:14px 18px;
  border-radius:var(--ki-radius);background:rgba(255,255,255,.26);
  -webkit-mask:radial-gradient(14px at 0 50%,transparent 98%,#000 100%) 0 0/51% 100% no-repeat,
        radial-gradient(14px at 100% 50%,transparent 98%,#000 100%) 100% 0/51% 100% no-repeat;
  mask:radial-gradient(14px at 0 50%,transparent 98%,#000 100%) 0 0/51% 100% no-repeat,
        radial-gradient(14px at 100% 50%,transparent 98%,#000 100%) 100% 0/51% 100% no-repeat;
}
.uk-kirana.uk-design-surface-sharp .uk-ki-count{-webkit-mask:none;mask:none}
.uk-ki-count>div{display:flex;align-items:baseline;gap:7px;padding:2px 14px;border-left:1px dashed rgba(255,248,240,.5)}
.uk-ki-count>div:first-child{border-left:0}
.uk-ki-count strong{display:block;font-family:"Playfair Display",Georgia,serif;font-size:clamp(1.5rem,7vw,2.1rem);font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1}
.uk-ki-count small{display:block;color:rgba(255,248,240,.85);font-size:9px;letter-spacing:.18em;text-transform:uppercase}
.uk-ki-count-done{margin:18px 0 0;font-family:"Playfair Display",Georgia,serif;font-style:italic;font-size:18px}

/* Steps (story + schedule) ------------------------------------------------ */
.uk-ki-steps{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px;text-align:left}
.uk-ki-steps li{padding:18px 20px;border-radius:var(--ki-radius);background:rgba(255,255,255,.6);border:1px solid var(--ki-hairline)}
.uk-ki-steps-date{display:inline-block;padding:3px 12px;border-radius:999px;background:var(--ki-sun);color:var(--ki-ink);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.uk-ki-steps h3{margin:10px 0 0;font-size:18px}
.uk-ki-steps p{margin:6px 0 0;color:var(--ki-muted);font-size:13px;line-height:1.8}

/* Gallery — confetti grid: every third photo is a wide one. */
.uk-ki-gallery-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:24px 0 14px}
.uk-ki-gallery-tools>span{color:var(--ki-muted);font-size:10px;letter-spacing:.2em;text-transform:uppercase}
.uk-ki-gallery-tools>div{display:flex;gap:6px}
.uk-ki-gallery-tools button{
  display:grid;place-items:center;width:44px;height:44px;cursor:pointer;
  border:1.5px solid var(--ki-line);border-radius:var(--ki-radius-control);background:transparent;color:var(--ki-accent-dp);
}
.uk-design-gallery-grid .uk-ki-gallery-tools>div,
.uk-design-gallery-editorial .uk-ki-gallery-tools>div{display:none}
.uk-ki-gallery figure{position:relative;margin:0;overflow:hidden;border-radius:var(--ki-radius);background:var(--ki-tint);border:3px solid rgba(255,255,255,.75)}
.uk-ki-gallery figure img{display:block;width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .6s var(--ki-ease)}
.uk-ki-gallery figure:hover img{transform:scale(1.05)}
.uk-ki-gallery figure button{
  position:absolute;right:8px;bottom:8px;display:grid;place-items:center;width:44px;height:44px;cursor:pointer;
  border:0;border-radius:var(--ki-radius-control);background:rgba(255,248,240,.9);color:var(--ki-ink);
}
.uk-ki-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.uk-ki-gallery figure:nth-child(3n+1){grid-column:span 2}
.uk-ki-gallery figure:nth-child(3n+1) img{aspect-ratio:16/10}
.uk-design-gallery-grid .uk-ki-gallery figure:nth-child(3n+1){grid-column:auto}
.uk-design-gallery-grid .uk-ki-gallery figure:nth-child(3n+1) img{aspect-ratio:1/1}
.uk-design-gallery-editorial .uk-ki-gallery{grid-template-columns:1fr;gap:18px}
.uk-design-gallery-editorial .uk-ki-gallery figure:nth-child(3n+1){grid-column:auto}
.uk-design-gallery-editorial .uk-ki-gallery figure img{aspect-ratio:4/5}
.uk-design-gallery-filmstrip .uk-ki-gallery{
  grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(220px,70%);
  overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory;scrollbar-width:none;
}
.uk-design-gallery-filmstrip .uk-ki-gallery::-webkit-scrollbar{display:none}
.uk-design-gallery-filmstrip .uk-ki-gallery figure{scroll-snap-align:center}
.uk-design-gallery-filmstrip .uk-ki-gallery figure:nth-child(3n+1){grid-column:auto}
.uk-design-gallery-filmstrip .uk-ki-gallery figure img{aspect-ratio:4/5}

/* Gift, contacts, FAQ, livestream ----------------------------------------- */
.uk-ki-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:22px 0 0}
.uk-ki-tabs button{
  display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 16px;cursor:pointer;
  border:1.5px solid var(--ki-line);border-radius:var(--ki-radius-control);background:transparent;
  color:var(--ki-muted);font:inherit;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.uk-ki-tabs button.is-active{border-color:var(--ki-accent);background:rgba(224,138,84,.14);color:var(--ki-accent-dp)}
.uk-ki-gift-panel{margin-top:20px}
.uk-ki-accounts,.uk-ki-contacts{display:grid;gap:14px}
.uk-ki-accounts article,.uk-ki-contacts article{padding:20px;border:1px solid var(--ki-hairline);border-radius:var(--ki-radius);background:rgba(255,255,255,.62);min-width:0}
.uk-ki-accounts strong{display:block;margin:8px 0 4px;font-family:"Playfair Display",Georgia,serif;font-size:1.3rem;letter-spacing:.04em}
.uk-ki-accounts p,.uk-ki-contacts p{margin:4px 0 0;display:flex;align-items:center;justify-content:center;gap:7px;color:var(--ki-muted);font-size:13px}
.uk-ki-accounts .uk-ki-button,.uk-ki-contacts .uk-ki-button{margin-top:14px}
.uk-ki-contacts strong{display:block;margin-top:8px;font-family:"Playfair Display",Georgia,serif;font-size:1.2rem}
.uk-ki-address-card{padding:20px;border:1px solid var(--ki-hairline);border-radius:var(--ki-radius);background:rgba(255,255,255,.62)}
.uk-ki-address-card strong{display:block;margin:8px 0 6px;font-family:"Playfair Display",Georgia,serif;font-size:18px}
.uk-ki-address-card p{margin:0;color:var(--ki-muted);font-size:13px;line-height:1.8}

.uk-ki-faq{margin:24px 0 0;text-align:left}
.uk-ki-faq details{margin-bottom:10px;padding:0 18px;border:1px solid var(--ki-hairline);border-radius:var(--ki-radius);background:rgba(255,255,255,.62)}
.uk-ki-faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:56px;padding:12px 0;cursor:pointer;list-style:none;font-size:14px;font-weight:600;
}
.uk-ki-faq summary::-webkit-details-marker{display:none}
.uk-ki-faq summary .bdu-icon{color:var(--ki-accent);transition:transform .3s var(--ki-ease)}
.uk-ki-faq details[open] summary .bdu-icon{transform:rotate(45deg)}
.uk-ki-faq p{margin:0 0 16px;color:var(--ki-muted);font-size:13px;line-height:1.85}

.uk-ki-streams{display:grid;gap:10px;margin:24px 0 0;text-align:left}
.uk-ki-streams a{
  display:flex;align-items:center;gap:12px;min-height:56px;padding:14px 18px;
  border:1px solid var(--ki-hairline);border-radius:var(--ki-radius);background:rgba(255,255,255,.62);
  color:inherit;text-decoration:none;
}
.uk-ki-streams a>span{display:grid;gap:2px;flex:1;min-width:0}
.uk-ki-streams strong{font-size:14px}
.uk-ki-streams small{color:var(--ki-muted);font-size:12px}

/* Closing ----------------------------------------------------------------- */
.uk-ki-closing{padding:clamp(52px,12vw,88px) 0 clamp(44px,10vw,64px);background:var(--ki-tint);text-align:center}
.uk-ki-closing h2{font-size:clamp(1.8rem,8vw,2.5rem)}
.uk-ki-signature{margin:22px 0 0;color:var(--ki-accent-dp);font-family:"Playfair Display",Georgia,serif;font-style:italic;font-size:1.3rem}
.uk-ki-hashtags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:20px}
.uk-ki-hashtags button{
  display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;cursor:pointer;
  border:1px solid var(--ki-line);border-radius:999px;background:transparent;color:var(--ki-accent-dp);
  font:inherit;font-size:11px;letter-spacing:.06em;
}
.uk-ki-closing-actions{display:grid;gap:8px;margin-top:24px}

/* Navigation and controls ------------------------------------------------- */
/* Kirana keeps one floating cluster instead of a bar across the page: the chapter
   list sits in the same corner as the controls and names where you are on its face. */
.uk-ki-nav{
  position:fixed;left:12px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:850;
  display:grid;gap:6px;justify-items:start;max-width:calc(100vw - 80px);
}
.uk-ki-chapter-toggle{
  display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;cursor:pointer;
  border:1.5px solid var(--ki-line);border-radius:var(--ki-radius-control);
  background:rgba(255,248,240,.96);backdrop-filter:blur(12px);box-shadow:0 8px 22px rgba(184,102,52,.2);
  color:var(--ki-accent-dp);font:inherit;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.uk-ki-chapter-toggle>span{max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uk-ki-chapter-list{
  display:grid;gap:2px;margin:0;padding:6px;list-style:none;
  max-height:min(52svh,320px);overflow-y:auto;overscroll-behavior:contain;
  border:1.5px solid var(--ki-line);border-radius:var(--ki-radius);
  background:rgba(255,248,240,.98);box-shadow:0 14px 30px rgba(184,102,52,.22);
}
.uk-ki-nav button{
  display:flex;align-items:center;gap:9px;width:100%;min-height:44px;padding:0 12px;cursor:pointer;
  border:0;border-radius:var(--ki-radius-control);background:transparent;text-align:left;
  color:var(--ki-muted);font:inherit;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.uk-ki-nav button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uk-ki-nav button i{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--ki-line)}
.uk-ki-nav button.is-active{color:var(--ki-accent-dp)}
.uk-ki-nav button.is-active i{background:var(--ki-accent)}

.uk-ki-rail{position:fixed;right:12px;bottom:calc(66px + env(safe-area-inset-bottom));z-index:860;display:grid;gap:6px;justify-items:end}
/* A fixed control has to read against paper AND against ink, because the
   page scrolls under it. Measured before this ring: 1.10:1 against the
   background at every scroll position. The ring is the half that the fill cannot be. */
.uk-ki-rail-toggle,.uk-ki-rail-panel button{
  display:grid;place-items:center;width:44px;height:44px;cursor:pointer;
  border:1.5px solid var(--ki-line);border-radius:999px;
  background:rgba(255,248,240,.96);color:var(--ki-accent-dp);box-shadow:0 0 0 2px var(--ki-ink),0 8px 22px rgba(74,51,40,.2);
}
.uk-ki-rail-panel{display:grid;gap:6px;justify-items:end}
.uk-ki-rail-panel button.is-active{border-color:var(--ki-accent);background:rgba(224,138,84,.18)}

.uk-kirana main{padding-bottom:calc(18px + env(safe-area-inset-bottom))}

/* Modals ------------------------------------------------------------------ */
.uk-ki-sheet,.uk-ki-lightbox{
  position:fixed;inset:0;z-index:1200;display:grid;opacity:0;visibility:hidden;
  background:rgba(58,38,28,.7);transition:opacity .28s var(--ki-ease),visibility .28s;
}
.uk-ki-sheet{place-items:end center}
.uk-ki-lightbox{place-items:center}
.uk-ki-sheet.is-open,.uk-ki-lightbox.is-open{opacity:1;visibility:visible}
.uk-ki-sheet-panel{
  width:min(100%,520px);padding:26px 22px calc(26px + env(safe-area-inset-bottom));
  border-radius:26px 26px 0 0;background:var(--ki-paper);text-align:center;
}
.uk-ki-sheet-panel h2{margin:10px 0 0;font-size:1.5rem}
.uk-ki-share-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:20px 0 0}
.uk-ki-share-grid button{
  display:flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:0 14px;cursor:pointer;
  border:1.5px solid var(--ki-line);border-radius:var(--ki-radius);background:transparent;
  color:var(--ki-ink);font:inherit;font-size:13px;font-weight:600;
}
.uk-ki-sheet-close{width:100%;margin-top:12px}
.uk-ki-lightbox-panel{position:relative;width:min(94vw,880px);max-height:88svh;display:grid;place-items:center}
.uk-ki-lightbox-panel img{max-width:100%;max-height:78svh;object-fit:contain;border-radius:12px;background:var(--ki-tint)}
.uk-ki-lightbox.is-switching img{opacity:.35;transition:opacity .12s linear}
.uk-ki-lightbox-counter{margin-top:12px;color:var(--ki-paper);font-size:11px;letter-spacing:.18em}
.uk-ki-lightbox button{
  position:absolute;display:grid;place-items:center;width:46px;height:46px;cursor:pointer;
  border:1px solid rgba(255,248,240,.4);border-radius:999px;background:rgba(58,38,28,.6);color:var(--ki-paper);
}
.uk-ki-lightbox-close{top:-4px;right:-4px}
.uk-ki-lightbox-prev{left:-4px;top:50%;transform:translateY(-50%)}
.uk-ki-lightbox-next{right:-4px;top:50%;transform:translateY(-50%)}
body.is-kirana-modal-open{overflow:hidden}

/* Engagement skin --------------------------------------------------------- */
.uk-ki-engagement .bdu-public-card{
  max-width:none;margin:16px 0 0;padding:24px 20px;border:1px solid var(--ki-hairline);
  border-radius:var(--ki-radius);background:rgba(255,255,255,.66);box-shadow:none;color:var(--ki-ink);text-align:left;
}
.uk-ki-engagement .bdu-public-card-head{display:flex;align-items:center;gap:12px}
.uk-ki-engagement .bdu-public-icon{
  display:grid;place-items:center;width:44px;height:44px;border:1.5px solid var(--ki-line);
  border-radius:999px;background:transparent;color:var(--ki-accent-dp);
}
.uk-ki-engagement .bdu-public-card-head p{margin:0;color:var(--ki-accent-dp);font-size:9px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.uk-ki-engagement .bdu-public-card-head h2{margin:2px 0 0;font-family:"Playfair Display",Georgia,serif;font-size:clamp(1.4rem,5vw,1.9rem);font-weight:700;color:var(--ki-ink)}
.uk-ki-engagement .bdu-public-card-copy{color:var(--ki-muted);font-size:14px;line-height:1.9}
.uk-ki-engagement .bdu-public-form{display:grid;gap:12px;margin-top:18px}
.uk-ki-engagement .bdu-public-form label{color:var(--ki-ink);font-size:11px;font-weight:700;letter-spacing:.08em}
.uk-ki-engagement .bdu-public-form :is(input,select,textarea){
  border:1px solid var(--ki-line);border-radius:14px;background:var(--ki-paper);color:var(--ki-ink);
}
.uk-ki-engagement .bdu-public-form :is(input,select){min-height:46px}
.uk-ki-engagement .bdu-public-form :is(input,select,textarea):focus{border-color:var(--ki-accent);box-shadow:0 0 0 3px rgba(224,138,84,.16)}
.uk-ki-engagement .bdu-public-form small{color:var(--ki-muted)}
.uk-ki-engagement .bdu-public-choice-group span{
  min-height:44px;border:1.5px solid var(--ki-line);border-radius:999px;background:var(--ki-paper);color:var(--ki-muted);
}
.uk-ki-engagement .bdu-public-choice-group input:checked+span{border-color:var(--ki-accent);background:rgba(224,138,84,.16);color:var(--ki-accent-dp)}
.uk-ki-engagement .bdu-public-primary{
  min-height:46px;border:1.5px solid var(--ki-accent);border-radius:999px;background:var(--ki-accent);color:#FFF8F0;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.uk-ki-engagement .bdu-public-primary:hover{background:var(--ki-accent-dp)}
.uk-ki-engagement :is(.bdu-public-known-guest,.bdu-public-notice,.bdu-public-wish,.bdu-public-rsvp-saved){
  border:1px solid var(--ki-hairline);border-radius:16px;background:var(--ki-paper);
}
.uk-ki-engagement .bdu-public-wishes-list>h3{margin:0 0 8px;color:var(--ki-accent-dp);font-family:inherit;font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.uk-ki-engagement .bdu-public-wish p{color:var(--ki-ink)}
.uk-ki-engagement .bdu-public-wish footer{color:var(--ki-muted)}
.uk-ki-engagement .bdu-public-pin{color:var(--ki-accent-dp)}

/* The platform-level personalized chip, matched to the daylight canvas. */
.bdu-public-theme-kirana .bdu-guest-personalized{
  border-color:rgba(224,138,84,.5);background:#FFF8F0;box-shadow:0 8px 24px rgba(74,51,40,.18);
}
.bdu-public-theme-kirana .bdu-guest-personalized strong{color:#B86634}

/* Desktop ----------------------------------------------------------------- */
@media(min-width:768px){
  .uk-kirana{font-size:16px;--ki-col:min(100% - 60px, 620px)}

  .uk-ki-gate-media img{object-position:var(--ki-focus-desktop-x,50%) var(--ki-focus-desktop-y,40%)}
  .uk-ki-cover-image{object-position:var(--ki-focus-desktop-x,50%) var(--ki-focus-desktop-y,40%)}
  .uk-ki-frame{height:84svh}

  .uk-ki-people{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:28px;padding-top:20px}
  /* A workspace can hold one entry or five. An odd last entry would sit in the
     first column with an empty one beside it, so it takes the whole row and
     centres itself — which also covers the case of a single entry. */
  .uk-ki-people>*:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:min(100%,360px)}
  .uk-ki-people:before{left:18%;right:18%;top:6px;bottom:auto;width:auto;border-left:0;border-top:2px dotted var(--ki-line)}
  .uk-ki-people>.uk-ki-person:nth-child(odd),
  .uk-ki-people>.uk-ki-person:nth-child(even){transform:none}
  .uk-ki-person:before{top:-14px}
  .uk-ki-gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .uk-ki-gallery figure:nth-child(3n+1){grid-column:span 2}
  .uk-design-gallery-grid .uk-ki-gallery figure:nth-child(3n+1){grid-column:auto}
  .uk-design-gallery-editorial .uk-ki-gallery{grid-template-columns:1fr}
  .uk-design-gallery-filmstrip .uk-ki-gallery{grid-auto-columns:minmax(260px,32%)}
  .uk-ki-accounts,.uk-ki-contacts{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* A workspace can hold one entry or five. An odd last entry would sit in the
     first column with an empty one beside it, so it takes the whole row and
     centres itself — which also covers the case of a single entry. */
  .uk-ki-accounts>*:last-child:nth-child(odd),.uk-ki-contacts>*:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:min(100%,420px)}
  .uk-ki-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .uk-ki-closing-actions{grid-auto-flow:column;justify-content:center}

  /* The cluster keeps its corner on desktop; the rail keeps the opposite one. */
  .uk-ki-nav{left:clamp(12px,2vw,28px);bottom:clamp(14px,2.4vh,26px);max-width:min(300px,34vw)}
  .uk-ki-chapter-toggle>span{max-width:190px}
  .uk-ki-nav button{min-height:38px;font-size:10px;letter-spacing:.08em}
  .uk-ki-rail{right:clamp(12px,2vw,28px);bottom:auto;top:50%;transform:translateY(-50%)}
  .uk-kirana main{padding-bottom:0}
  .uk-ki-feedback{top:20px}
  .uk-ki-toast{bottom:28px}
  .uk-ki-sheet{place-items:center}
  .uk-ki-sheet-panel{border-radius:26px}
  .uk-ki-lightbox-close{top:-52px;right:0}
  .uk-ki-lightbox-prev{left:-62px}
  .uk-ki-lightbox-next{right:-62px}
}

/* Narrow phones and short viewports --------------------------------------- */
@media(max-width:760px){
  .uk-ki-share-grid{grid-template-columns:1fr}
}
@media(max-width:400px){
  .uk-ki-count{padding:12px 10px}
  .uk-ki-count>div{padding:2px 9px}
  .uk-ki-gallery{grid-template-columns:1fr}
  .uk-ki-gallery figure:nth-child(3n+1){grid-column:auto}
}
@media(max-height:620px){
  .uk-ki-gate-body h1{font-size:clamp(1.6rem,8vw,2.2rem)}
  .uk-ki-guest{margin-top:12px;padding:9px 14px}
  .uk-ki-gate-body .uk-ki-button{margin-top:14px}
  .uk-ki-confetti{height:18px}
  .uk-ki-frame{height:56svh}
}
/* A phone in landscape genuinely runs out of height, so the card starts at the top
   rather than being clipped at both ends. A laptop window that happens to be under
   620px tall is a different case: there is width to spare and the card should stay
   where the eye expects it. */
@media(max-width:767px) and (max-height:620px){
  .uk-ki-gate{justify-content:flex-start;padding-top:18px}
}
@media(min-width:768px) and (max-height:620px){
  .uk-ki-gate{justify-content:center;padding-top:20px;padding-bottom:20px;gap:8px}
}
@media(max-width:767px) and (max-height:620px){
  .uk-ki-chapter-list{max-height:min(44svh,200px)}
}
@media(min-width:768px) and (max-height:620px){
  .uk-ki-chapter-list{max-height:min(44svh,220px)}
}

/* Cover without a photograph -------------------------------------------- */
.uk-ki-cover-empty{
  position:relative;display:grid;place-items:center;
  width:100%;height:100%;
  background:linear-gradient(165deg,var(--ki-sun),var(--ki-tint) 58%,var(--ki-paper));
}
.uk-ki-cover-empty-dot{position:absolute;border-radius:50%}
.uk-ki-cover-empty-dot:nth-child(1){width:14px;height:14px;background:var(--ki-accent);transform:translate(-92px,-104px)}
.uk-ki-cover-empty-dot:nth-child(2){width:20px;height:20px;background:var(--ki-sun);transform:translate(8px,-138px)}
.uk-ki-cover-empty-dot:nth-child(3){width:11px;height:11px;background:var(--ki-leaf);transform:translate(96px,-96px)}
.uk-ki-cover-empty-mark{
  color:var(--ki-accent-dp);font-family:"Playfair Display",Georgia,serif;font-weight:700;
  font-size:clamp(1.5rem,7vw,2.4rem);letter-spacing:.26em;
}

/* Reduced motion ---------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .uk-kirana{--ki-reveal:0s;--ki-shift:0px}
  .uk-ki-reveal,.uk-ki-reveal-item{opacity:1;transform:none;transition:none}
  .uk-ki-gate,.uk-ki-sheet,.uk-ki-lightbox,.uk-ki-gallery figure img,.uk-ki-faq summary .bdu-icon,.uk-ki-progress i,.uk-ki-button{transition:none}
}