/* Undakan — Romance Flagship 1.0.0
 * A wedding invitation laid out on a terraced hillside. The gate is a ridge of
 * stepped bands; every section steps one tread further in than the one above it,
 * with the riser of that step drawn at its edge; after four treads a wider bund
 * starts the next terrace; the gallery is plots stepping down; and the chapters
 * are treads on a ladder down the left.
 *
 * Every surface declares its own ground AND its own ink in the same rule, so a
 * palette can never leave text the colour of what is behind it.
 *
 * The step is the signature and it is also the thing most likely to ship wrong:
 * a tread that every section sets to the same value is not a descent, it is one
 * indent with a story attached. The step comes from a counter the blade emits
 * per section, and it is measured in a browser, not assumed from the stylesheet.
 */

/* Tokens ------------------------------------------------------------------- */
.uk-undakan{
  --un-ground:#F4F5EE;--un-ink:#1E2620;--un-mist:#5D6A5F;--un-padi:#3E6B45;--un-earth:#8A6136;
  --un-line:rgba(30,38,32,.16);--un-card:rgba(255,255,255,.66);--un-plot:#E6EDE3;
  --un-bund-face:#8A6136;--un-bund-shade:#5E4222;
  --un-radius:10px;--un-radius-sm:6px;--un-measure:58ch;
  --un-tread:14px;         /* how far each section steps in from the one above */
  --un-bund:22px;          /* the wider turn where a terrace restarts */
  --un-col-w:46px;         /* the ladder's own gutter, reserved by every section */
  --un-lift:22px;
  --un-display:"Lora",Georgia,Cambria,"Times New Roman",serif;
  --un-sans:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  position:relative;background:var(--un-ground);color:var(--un-ink);
  font-family:var(--un-sans);font-size:16px;line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
[hidden]{display:none !important}
.uk-undakan *,.uk-undakan *::before,.uk-undakan *::after{box-sizing:border-box}
.uk-undakan img{display:block;max-width:100%}
/* The UA stylesheet gives <figure> margin:1em 40px, and every gallery tile here
   is a figure. Unreset it eats 80px of each column — three shipped templates
   lost their phone galleries to exactly this. */
.uk-undakan figure{margin:0}
.uk-undakan h1,.uk-undakan h2,.uk-undakan h3,.uk-undakan h4{font-family:var(--un-display);font-weight:600;line-height:1.2;margin:0}
.uk-undakan p{margin:0}
/* :where() so this stays a DEFAULT. As ".uk-undakan button" it was (0,1,1)
   and outranked every button rule written as a single class, so 6 declared
   button colours in this file never applied and those buttons took the page
   ink instead — including the lightbox controls on their dark scrim. */
.uk-undakan :where(button){font-family:inherit;color:inherit}
#uk-un-content{padding-top:0}

/* Shared type and ornament ------------------------------------------------- */
.uk-un-eyebrow{font-size:11px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--un-padi)}
.uk-un-rule{display:block;width:min(100%,78px);height:1px;margin:10px 0;background:var(--un-padi);opacity:.6}
.uk-un-rule.is-center{margin-left:auto;margin-right:auto}
.uk-un-copy{max-width:var(--un-measure);margin-top:14px;color:var(--un-mist);font-size:15px}
.uk-un-lead{max-width:var(--un-measure);margin-top:12px;font-family:var(--un-display);font-size:20px;color:var(--un-ink)}
.uk-un-preline{white-space:pre-line}
.uk-un-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.uk-un-signature{margin-top:16px;font-family:var(--un-display);font-size:22px;color:var(--un-ink)}
.uk-un-quote{max-width:var(--un-measure);margin-top:20px;padding:16px 20px;border-left:2px solid var(--un-padi);background:var(--un-card);border-radius:0 var(--un-radius-sm) var(--un-radius-sm) 0;color:var(--un-ink);font-family:var(--un-display);font-size:17px;font-style:italic}
.uk-un-quote cite{display:block;margin-top:10px;font-family:var(--un-sans);font-size:12px;font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--un-mist)}
.uk-un-occasions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin-top:12px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--un-mist)}
.uk-un-occasions span+span::before{content:"·";padding-right:6px;font-size:14px;color:var(--un-earth)}
.uk-un-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border:1px solid var(--un-padi);border-radius:999px;background:transparent;color:var(--un-ink);font-size:13px;font-weight:600;letter-spacing:.06em;text-decoration:none;cursor:pointer;transition:transform .25s ease,background .25s ease}
.uk-un-button:hover{transform:translateY(-1px);background:var(--un-card)}
.uk-un-button.is-solid{border-color:transparent;background:var(--un-padi);color:#FBF6EA}
.uk-un-button:focus-visible,.uk-undakan button:focus-visible,.uk-undakan a:focus-visible{outline:2px solid var(--un-earth);outline-offset:3px}

/* THE STEP AND ITS RISER --------------------------------------------------
   The signature. Each section carries --un-step, a counter the blade emits, and
   steps that many treads in from the page edge. The riser is the short vertical
   face of that step, drawn at the panel's left edge in the bund colour so it
   reads as an earth wall and not as a border: a riser in the ground colour
   would draw nothing, which is how five earlier signatures first shipped.

   Every fourth section the counter returns to zero and a wider bund marks the
   turn onto the next terrace, so the descent never walks off the right of a
   phone. */
.uk-un-riser{position:absolute;left:0;top:0;bottom:0;width:3px;pointer-events:none;
  background:linear-gradient(180deg,var(--un-bund-face),var(--un-bund-shade));
  border-radius:2px 0 0 2px}
/* The tread line the panel stands on: a hairline running out to the left, the
   width of the step just taken. */
.uk-un-tread-line{position:absolute;left:calc(-1 * var(--un-tread));top:0;width:var(--un-tread);height:1px;pointer-events:none;
  background:var(--un-bund-face);opacity:.55}
/* The turn onto a new terrace: a wider, darker bund across the full step. */
.uk-un-sec.is-turn .uk-un-riser{width:6px;background:linear-gradient(180deg,var(--un-bund-shade),var(--un-bund-face))}
.uk-un-sec.is-turn .uk-un-tread-line{left:calc(-1 * var(--un-bund));width:var(--un-bund);opacity:.85;height:2px}

/* GATE: a ridge of terraces ----------------------------------------------
   The stepped bands are drawn BEHIND the card and reach past it on both sides,
   so the ridge is visible rather than hidden by the thing standing on it. The
   button is the lowest step, in flow inside the card. */
.uk-un-gate{--un-ground:#161C18;--un-ink:#EAF0EA;--un-mist:#A7B5A9;--un-padi:#9CC7A4;--un-earth:#D2A86E;--un-line:rgba(234,240,234,.22);--un-card:rgba(255,255,255,.06);--un-bund-face:#C8A06A;--un-bund-shade:#8A6136;
  position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:20px;background:#101512;color:var(--un-ink);transition:opacity .7s ease,visibility .7s ease}
.uk-un-gate.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.uk-un-ridge{position:relative;display:grid;grid-template-rows:auto auto;place-items:center;width:min(100%,460px)}
/* The ridge the card stands on. Stepped bands, each one inset further than the
   one above, drawn behind the card and reaching well PAST it on both sides — a
   field no wider than the card is hidden by the card, which is how a signature
   ends up present in the DOM and invisible on the screen. */
.uk-un-bands{position:absolute;left:50%;top:50%;z-index:0;width:min(168vw,780px);height:min(120vh,660px);
  transform:translate(-50%,-50%);pointer-events:none;overflow:hidden;
  background:repeating-linear-gradient(180deg,
    rgba(156,199,164,.16) 0 1px,
    transparent 1px 34px);
  -webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 50%,#000 30%,transparent 78%);
  mask-image:radial-gradient(ellipse 60% 55% at 50% 50%,#000 30%,transparent 78%)}
/* The stepped silhouette of the ridge itself: five bands, each inset one tread
   further, drawn in the bund colour so they read as earth walls. */
.uk-un-bands::after{content:"";position:absolute;left:0;right:0;bottom:22%;height:46%;
  background:
    linear-gradient(90deg,transparent 0 6%,var(--un-bund-shade) 6% 94%,transparent 94%) 0 0/100% 2px no-repeat,
    linear-gradient(90deg,transparent 0 13%,var(--un-bund-shade) 13% 87%,transparent 87%) 0 25%/100% 2px no-repeat,
    linear-gradient(90deg,transparent 0 20%,var(--un-bund-shade) 20% 80%,transparent 80%) 0 50%/100% 2px no-repeat,
    linear-gradient(90deg,transparent 0 27%,var(--un-bund-shade) 27% 73%,transparent 73%) 0 75%/100% 2px no-repeat,
    linear-gradient(90deg,transparent 0 34%,var(--un-bund-shade) 34% 66%,transparent 66%) 0 100%/100% 2px no-repeat;
  opacity:.85}
.uk-un-card{position:relative;z-index:2;grid-row:1;display:grid;grid-template-rows:auto auto;overflow:hidden;border:1px solid var(--un-line);border-radius:var(--un-radius);background:#1E2A21}
.uk-un-portrait{position:relative;height:min(40svh,272px);overflow:hidden;background:#243024}
.uk-un-portrait img{width:100%;height:100%;object-fit:cover;object-position:var(--un-focus-mobile-x,50%) var(--un-focus-mobile-y,38%)}
.uk-un-gate-body{position:relative;padding:26px 22px 24px;text-align:center}
.uk-un-gate-body h1{margin-top:8px;font-size:clamp(27px,7.6vw,42px)}
.uk-un-gate-date{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:7px 16px;border:1px solid var(--un-line);border-radius:999px;font-size:12px;letter-spacing:.08em;color:var(--un-mist)}
.uk-un-couple-list{display:grid;gap:8px;margin-top:14px}
.uk-un-couple-list span{display:grid;gap:2px}
.uk-un-couple-list small{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--un-mist)}
.uk-un-couple-list strong{font-family:var(--un-display);font-size:18px;font-weight:600}
/* The boss. A raised disc of bronze — this is what the guest strikes. */
/* Its own line, always. The buttons here are inline-flex, so on a card wide
   enough the boss came to rest beside the date chip instead of centred beneath
   it — seen at 1280, where the card is 530px across. */
.uk-un-gate-open{position:relative;display:flex;width:fit-content;margin:18px auto 0;padding:13px 26px;border-color:transparent;background:var(--un-padi);color:#10200F;font-size:14px;
  box-shadow:0 0 0 4px rgba(156,199,164,.18)}
/* The step the gate takes when it is opened: a band that drops away downward. */
.uk-un-stepdown{position:absolute;left:0;right:0;top:50%;z-index:1;height:2px;background:var(--un-padi);opacity:0;pointer-events:none}
.uk-un-gate.is-stepped .uk-un-stepdown{animation:uk-un-drop .9s ease-out forwards}
@keyframes uk-un-drop{from{opacity:.7;transform:translateY(0) scaleX(.2)}to{opacity:0;transform:translateY(46vh) scaleX(1)}}

/* COVER -------------------------------------------------------------------- */
.uk-un-cover{--un-ground:#18201A;--un-ink:#EAF0EA;--un-mist:#B2C0B4;--un-padi:#9CC7A4;--un-earth:#D2A86E;--un-line:rgba(234,240,234,.24);
  position:relative;display:grid;min-height:100svh;background:var(--un-ground);color:var(--un-ink)}
.uk-un-cover-media{position:absolute;inset:0;overflow:hidden}
.uk-un-cover-image{width:100%;height:100%;object-fit:cover;object-position:var(--un-focus-mobile-x,50%) var(--un-focus-mobile-y,38%)}
.uk-un-cover-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,32,26,.3) 0%,rgba(24,32,26,.76) 60%,#18201A 100%)}
.uk-un-cover-empty{position:absolute;inset:0;display:grid;place-items:center;background:#1B241C}
.uk-un-cover-empty-grid{position:absolute;inset:0;background-image:repeating-radial-gradient(circle at 50% 42%,rgba(156,199,164,.14) 0 1px,transparent 1px 30px)}
.uk-un-cover-empty-mark{position:relative;font-family:var(--un-display);font-size:23px;letter-spacing:.2em;padding:10px 18px;border:1px solid var(--un-line);border-radius:999px;color:#EAF0EA}
.uk-un-cover-panel{position:relative;align-self:end;padding:40px calc(var(--un-col-w) + 12px) 56px;text-align:center}
.uk-un-cover-panel h1{margin-top:8px;font-size:clamp(29px,8.4vw,52px)}
.uk-un-cover-date{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:7px 16px;border:1px solid var(--un-line);border-radius:999px;font-size:12px;letter-spacing:.08em;color:var(--un-mist)}

/* THE CYCLE: panels headed by their beat ruler -----------------------------
   The index owns the right gutter and every section reserves it, at every
   breakpoint, so no line of text can run underneath the gong strokes. */
/* The descent. --un-step is a counter the blade emits per section, 0 to 3, and
   the padding turns it into a tread. Four treads then the counter returns to
   zero and the bund marks the turn onto the next terrace, so the indent can
   never walk off the right of a phone however many sections are switched on. */
.uk-un-sec{position:relative;padding:0 14px 26px calc(var(--un-col-w) + 10px + var(--un-step,0) * var(--un-tread));background:var(--un-ground);scroll-margin-top:16px}
.uk-un-panel{position:relative;width:min(100%,780px);margin-inline:auto;
  padding:26px 24px 26px 30px;color:var(--un-ink);
  background:var(--un-card);border:1px solid var(--un-line);
  border-radius:var(--un-radius);box-shadow:0 12px 26px rgba(30,38,32,.07)}
.uk-un-mark{position:absolute;right:18px;top:16px;font-family:var(--un-display);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--un-mist)}
.uk-un-head{position:relative;z-index:1;margin-bottom:14px}
/* The reading column is capped so a line never runs too long, and centred so a
   wide panel is not left with an empty half beside it. */
.uk-un-head,.uk-un-body{max-width:min(100%,620px);margin-inline:auto}
.uk-un-body{position:relative;z-index:1}
.uk-un-body h2{font-size:clamp(22px,5.2vw,32px)}
.uk-un-body h3{font-size:18px}
.uk-un-body h4{font-size:17px}
.uk-un-narrow{width:min(100%,600px);margin-inline:auto;text-align:center}

/* Entries (story, agenda) -------------------------------------------------- */
.uk-un-entries{position:relative;list-style:none;display:grid;gap:14px;margin:22px 0 0;padding:0}
.uk-un-entry{position:relative;padding:15px 18px 15px 26px;border:1px solid var(--un-line);border-radius:var(--un-radius-sm);background:var(--un-card)}
.uk-un-entry-mark{position:absolute;left:10px;top:20px;width:8px;height:8px;border-radius:50%;background:var(--un-padi)}
.uk-un-entry-label{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--un-padi)}
.uk-un-entry h3{margin-top:4px}
.uk-un-entry p{margin-top:6px;color:var(--un-mist);font-size:15px}

/* People ------------------------------------------------------------------- */
.uk-un-people{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px;margin-top:22px}
.uk-un-person{text-align:center}
.uk-un-portrait-round{width:134px;height:134px;margin:0 auto 12px;overflow:hidden;border:2px solid var(--un-padi);border-radius:50%;background:var(--un-card)}
.uk-un-portrait-round img{width:100%;height:100%;object-fit:cover}
.uk-un-portrait-round.is-empty{display:grid;place-items:center}
.uk-un-portrait-round.is-empty span{font-family:var(--un-display);font-size:34px;color:var(--un-padi)}
.uk-un-person h4{margin-top:8px;font-size:21px}
.uk-un-person>strong{display:block;margin-top:2px;font-size:14px;font-weight:600;color:var(--un-mist)}
.uk-un-parents{margin-top:8px;color:var(--un-mist);font-size:14px}
.uk-un-parents em{font-style:normal;padding:0 5px;color:var(--un-earth)}
.uk-un-bio{margin-top:8px;color:var(--un-mist);font-size:14px}
.uk-un-couples{display:grid;gap:26px;margin-top:20px}
.uk-un-couple{margin-top:26px}
.uk-un-couple header{text-align:center;margin-bottom:14px}
.uk-un-couple header span{font-family:var(--un-display);font-size:25px;color:var(--un-earth)}
.uk-un-couple-index{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
.uk-un-couple-index button{padding:7px 14px;border:1px solid var(--un-line);border-radius:999px;background:transparent;cursor:pointer}
.uk-un-couple-index button span{font-size:11px;letter-spacing:.12em;color:var(--un-earth)}

/* Events ------------------------------------------------------------------- */
.uk-un-events{display:grid;gap:16px;margin-top:20px}
.uk-un-event{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;padding:20px;border:1px solid var(--un-line);border-radius:var(--un-radius-sm);background:var(--un-card)}
.uk-un-event-mark{display:grid;place-items:center;width:34px;height:34px;border:2px solid var(--un-padi);border-radius:50%;color:var(--un-padi)}
.uk-un-event-body{min-width:0}
.uk-un-event h3{margin-top:4px;font-size:21px}
.uk-un-when{margin-top:6px;font-weight:600}
.uk-un-address{margin-top:4px;color:var(--un-mist);font-size:14px}
.uk-un-scope{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;font-size:12px;color:var(--un-mist)}
.uk-un-scope strong{padding:3px 9px;border:1px solid var(--un-line);border-radius:999px;font-weight:600;color:var(--un-ink)}
.uk-un-map{width:100%;height:190px;margin-top:12px;border:1px solid var(--un-line);border-radius:var(--un-radius-sm)}
.uk-un-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

/* Countdown ---------------------------------------------------------------- */
.uk-un-count{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:20px}
.uk-un-count div{padding:14px 8px;border:1px solid var(--un-line);border-radius:var(--un-radius-sm);background:var(--un-card);text-align:center}
.uk-un-count strong{display:block;font-family:var(--un-display);font-size:29px;line-height:1.1}
.uk-un-count span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--un-mist)}

/* GALLERY: plots stepping down ---------------------------------------------
   The widest plot sits at the head of each terrace and the two below it share
   the next step — a cycle of three that fills exactly two rows, every time. A
   cycle of four would leave three half-width plots to pair off two at a time,
   and the third is laid out alone beside an empty half. */
.uk-un-gallery-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--un-mist)}
.uk-un-gallery-tools div{display:flex;gap:8px}
.uk-un-gallery-tools button{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--un-line);border-radius:var(--un-radius-sm);background:transparent;cursor:pointer}
.uk-un-gallery{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:22px}
.uk-un-plot-tile{position:relative;grid-column:span 2;margin:0;overflow:hidden;border-radius:var(--un-radius-sm);background:var(--un-plot)}
/* The head of the terrace takes the full width; the two plots below it share
   the next step. Each plot after the first is inset one tread, so the row reads
   as ground stepping down rather than as a plain grid. */
.uk-un-plot-tile:nth-child(3n+1){grid-column:1/-1;margin-left:0}
.uk-un-plot-tile:nth-child(3n+2){margin-left:var(--un-tread)}
.uk-un-plot-tile:nth-child(3n+3){margin-left:calc(var(--un-tread) * 2)}
.uk-un-plot-tile img{width:100%;aspect-ratio:4/5;object-fit:cover}
.uk-un-plot-tile:nth-child(3n+1) img{aspect-ratio:16/9}
.uk-un-plot-tile button{position:absolute;right:8px;bottom:8px;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:rgba(22,28,24,.74);color:#F4F5EE;cursor:pointer}
/* The one position a cycle can end on and leave a plot alone: the first of the
   two below the head. It takes the full width instead, with the head's wide
   crop — at its own 4/5 portrait a full-width plot came out three times the
   height of everything above it. */
.uk-un-plot-tile:last-child:nth-child(3n+2){grid-column:1/-1;margin-left:0}
.uk-un-plot-tile:last-child:nth-child(3n+2) img{aspect-ratio:16/9}

/* Gift, contacts, FAQ ------------------------------------------------------ */
.uk-un-streams{display:grid;gap:10px;margin-top:18px}
.uk-un-streams a{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--un-line);border-radius:var(--un-radius-sm);background:var(--un-card);color:var(--un-ink);text-decoration:none}
.uk-un-streams a span{display:grid;flex:1}
.uk-un-streams a strong{font-size:14px}
.uk-un-streams a small{font-size:12px;color:var(--un-mist)}
.uk-un-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.uk-un-tabs button{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border:1px solid var(--un-line);border-radius:999px;background:transparent;font-size:12px;font-weight:600;cursor:pointer}
.uk-un-tabs button.is-active{border-color:var(--un-padi);background:var(--un-card)}
.uk-un-gift-panel{margin-top:16px}
.uk-un-accounts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.uk-un-accounts>*:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:min(100%,400px)}
.uk-un-accounts article{padding:16px;border:1px solid var(--un-line);border-radius:var(--un-radius-sm);background:var(--un-card);text-align:center}
.uk-un-accounts strong{display:block;margin-top:6px;font-family:var(--un-display);font-size:20px;letter-spacing:.05em}
.uk-un-accounts article p{margin-top:4px;font-size:13px;color:var(--un-mist)}
.uk-un-accounts article .uk-un-button{margin-top:12px}
.uk-un-address-card{padding:18px;border:1px dashed var(--un-padi);border-radius:var(--un-radius-sm);background:var(--un-card);text-align:center}
.uk-un-address-card strong{display:block;margin-top:6px;font-family:var(--un-display);font-size:18px}
.uk-un-address-card p{margin-top:6px;font-size:14px;color:var(--un-mist)}
.uk-un-contacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}
.uk-un-contacts>*:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:min(100%,400px)}
.uk-un-contacts article{padding:16px;border:1px solid var(--un-line);border-radius:var(--un-radius-sm);background:var(--un-card);text-align:center}
.uk-un-contacts strong{display:block;margin-top:6px;font-size:15px}
.uk-un-contacts article p{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:6px;font-size:13px;color:var(--un-mist)}
.uk-un-contacts article .uk-un-button{margin-top:12px}
.uk-un-hashtags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px}
.uk-un-hashtags button{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border:1px solid var(--un-line);border-radius:999px;background:transparent;font-size:12px;cursor:pointer}
.uk-un-faq{display:grid;gap:10px;margin-top:18px}
.uk-un-faq details{padding:14px 16px;border:1px solid var(--un-line);border-radius:var(--un-radius-sm);background:var(--un-card)}
.uk-un-faq summary{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;font-weight:600;list-style:none}
.uk-un-faq summary::-webkit-details-marker{display:none}
.uk-un-faq p{margin-top:8px;color:var(--un-mist);font-size:15px}
.uk-un-dress{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.uk-un-video{width:100%;aspect-ratio:16/9;margin-top:16px;border:1px solid var(--un-line);border-radius:var(--un-radius-sm)}
.uk-un-engagement .uk-un-body{margin-top:4px}
.uk-un-feedback{position:relative;z-index:24;display:flex;align-items:center;gap:10px;width:min(100%,680px);margin:16px auto 0;padding:13px 16px;border:1px solid rgba(62,107,69,.32);border-radius:var(--un-radius-sm);background:#E9F0E7;color:#1F2E23;font-size:14px}

/* CLOSING: the final gong -------------------------------------------------- */
.uk-un-closing{--un-ground:#161C18;--un-ink:#EAF0EA;--un-mist:#AFBDB1;--un-padi:#9CC7A4;--un-earth:#D2A86E;--un-line:rgba(234,240,234,.22);--un-card:rgba(255,255,255,.07);--un-plot:#0E130F;--un-bund-face:#C8A06A;--un-bund-shade:#8A6136;
  position:relative;padding:72px calc(var(--un-col-w) + 12px) 88px;
  background:var(--un-ground);color:var(--un-ink);text-align:center;scroll-margin-top:16px}
.uk-un-closing h2{font-size:clamp(24px,6vw,36px)}
.uk-un-closing-mark{display:grid;place-items:center;width:64px;height:64px;margin:20px auto 0;border:2px solid var(--un-padi);border-radius:50%;font-family:var(--un-display);font-size:14px;letter-spacing:.16em;color:var(--un-padi);
  box-shadow:0 0 0 5px rgba(156,199,164,.16)}
.uk-un-closing-share{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}

/* THE LADDER: chapters as treads down the left edge -----------------------
   Each chapter is one tread, and the treads step inward the way the terraces
   do. The step is drawn INSIDE the ladder's own width, never by widening it, so
   the chrome always fits the gutter the sections reserved. */
.uk-un-ladder{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:26;display:flex;flex-direction:column;align-items:center;
  width:var(--un-col-w);max-width:var(--un-col-w);max-height:88svh;
  padding:8px 0;background:rgba(22,28,24,.92);border-right:1px solid rgba(156,199,164,.4);color:#EAF0EA}
.uk-un-ladder-line{position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(156,199,164,.42);transform:translateX(-50%)}
.uk-un-treads{position:relative;list-style:none;display:grid;gap:0;margin:0;padding:0;width:100%;
  /* The strokes are what gives way when the index runs out of room, so
     min-height:0 lets this shrink below its content and scroll instead. */
  flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:none}
.uk-un-treads::-webkit-scrollbar{display:none}
.uk-un-rung button{display:grid;place-items:center;width:100%;height:44px;border:0;background:transparent;color:inherit;cursor:pointer;padding:0}
/* A tread: a short horizontal bar, each one offset a little further in than the
   last, so the ladder itself descends like the terraces beside it. */
.uk-un-rung button i{display:block;width:14px;height:3px;border-radius:1px;background:rgba(234,240,234,.42);
  transform:translateX(var(--un-rung-step,0px));transition:transform .3s ease,background .3s ease,width .3s ease}
.uk-un-rung:nth-child(4n+2) button i{--un-rung-step:3px}
.uk-un-rung:nth-child(4n+3) button i{--un-rung-step:6px}
.uk-un-rung:nth-child(4n+0) button i{--un-rung-step:9px}
.uk-un-rung button.is-active i{width:20px;background:#9CC7A4}
.uk-un-rung button:hover i{width:18px}
/* The chapter being read, named in standing type inside the index's own width
   so the chrome is never wider than the gutter the sections reserved. */
.uk-un-standing{display:none;
  /* flex:0 0 auto, never flex:1. A vertical line of type has no height of its
     own to grow from, and the index shrink-wraps its strokes, so a name asking
     for leftover space is drawn a few pixels wide and none tall. */
  flex:0 0 auto;min-width:0;margin:6px 0 0;padding:0;
  writing-mode:vertical-rl;text-orientation:mixed;text-align:center;
  font-family:var(--un-display);font-size:13px;letter-spacing:.26em;text-transform:uppercase;color:#9CC7A4;
  pointer-events:none;white-space:nowrap;max-height:52svh;overflow:hidden}

/* Controls rail, share sheet, lightbox, toast ----------------------------- */
.uk-un-rail{position:fixed;right:14px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:24;display:grid;gap:8px;justify-items:center}
.uk-un-rail-toggle,.uk-un-rail-panel button{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(156,199,164,.42);border-radius:50%;background:rgba(22,28,24,.9);color:#EAF0EA;cursor:pointer}
.uk-un-rail-panel{display:grid;gap:8px;justify-items:center}
.uk-un-sheet,.uk-un-lightbox{position:fixed;inset:0;z-index:46;display:grid;place-items:center;padding:20px 16px;background:rgba(16,21,18,.86);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.uk-un-sheet.is-open,.uk-un-lightbox.is-open{opacity:1;visibility:visible}
.uk-un-sheet-panel{width:min(100%,430px);padding:22px;border:1px solid var(--un-padi);border-radius:var(--un-radius);background:#F4F5EE;color:#1E2620}
.uk-un-share-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:16px}
.uk-un-share-grid button{display:flex;align-items:center;gap:8px;padding:11px 13px;border:1px solid rgba(30,38,32,.16);border-radius:var(--un-radius-sm);background:transparent;color:inherit;cursor:pointer;font-size:13px}
.uk-un-sheet-close{width:100%;margin-top:14px}
.uk-un-lightbox-panel{position:relative;width:min(100%,780px)}
.uk-un-lightbox-panel img{width:100%;max-height:76svh;object-fit:contain;border-radius:var(--un-radius);transition:opacity .2s ease}
.uk-un-lightbox.is-switching .uk-un-lightbox-panel img{opacity:0}
.uk-un-lightbox-counter{margin-top:12px;color:#EAF0EA;font-size:12px;letter-spacing:.16em;text-align:center}
.uk-un-lightbox-close,.uk-un-lightbox-prev,.uk-un-lightbox-next{position:absolute;display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;background:rgba(22,28,24,.8);color:#EAF0EA;cursor:pointer}
.uk-un-lightbox-close{top:-52px;right:0}
.uk-un-lightbox-prev{left:6px;top:50%;transform:translateY(-50%)}
.uk-un-lightbox-next{right:6px;top:50%;transform:translateY(-50%)}
.uk-un-toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));z-index:48;transform:translate(-50%,14px);opacity:0;padding:11px 18px;border-radius:999px;background:#1E2620;color:#F4F5EE;font-size:13px;pointer-events:none;transition:opacity .3s ease,transform .3s ease}
.uk-un-toast.is-visible{opacity:1;transform:translate(-50%,0)}

/* Reveals: struck bronze settling ---------------------------------------- */
.uk-un-reveal{opacity:0;transform:translateY(var(--un-lift));transition:opacity .7s ease,transform .7s cubic-bezier(.22,.78,.2,1)}
.uk-un-reveal.is-visible{opacity:1;transform:none}
.uk-un-reveal-item{opacity:0;transform:translateY(12px);transition:opacity .58s ease .08s,transform .58s ease .08s}
.uk-un-reveal.is-visible .uk-un-reveal-item{opacity:1;transform:none}

/* Design controls ---------------------------------------------------------- */
.uk-design-palette-template.uk-undakan{--un-ground:#F4F5EE;--un-ink:#1E2620;--un-mist:#5D6A5F;--un-padi:#3E6B45;--un-earth:#8A6136;--un-plot:#E6EDE3;--un-bund-face:#8A6136;--un-bund-shade:#5E4222}
.uk-design-palette-warm.uk-undakan{--un-ground:#FAF4E6;--un-ink:#2A2617;--un-mist:#6A6146;--un-padi:#6B5C17;--un-earth:#8A5E22;--un-plot:#F1E8D0;--un-bund-face:#8A5E22;--un-bund-shade:#5D3E14}
.uk-design-palette-warm .uk-un-closing{--un-ground:#2A2617;--un-ink:#FBF6E5;--un-mist:#CBC3A6;--un-padi:#D7CB84;--un-earth:#E5A173;--un-plot:#1B180E;--un-bund-face:#D7B27A;--un-bund-shade:#8A5E22}
.uk-design-palette-romantic.uk-undakan{--un-ground:#FBF0F0;--un-ink:#2C1F22;--un-mist:#6A5255;--un-padi:#9B4356;--un-earth:#8D5533;--un-plot:#F2DFE0;--un-bund-face:#8D5533;--un-bund-shade:#5F3720}
.uk-design-palette-romantic .uk-un-closing{--un-ground:#2C1F22;--un-ink:#FAE9EA;--un-mist:#CFADB1;--un-padi:#E7A7B4;--un-earth:#E79A94;--un-plot:#1B1315;--un-bund-face:#D9A183;--un-bund-shade:#8D5533}
.uk-design-palette-sage.uk-undakan{--un-ground:#ECF2EA;--un-ink:#1E2A21;--un-mist:#526052;--un-padi:#38624A;--un-earth:#7A5A2E;--un-plot:#DCE7D9;--un-bund-face:#7A5A2E;--un-bund-shade:#513C1E}
.uk-design-palette-sage .uk-un-closing{--un-ground:#1E2A21;--un-ink:#ECF3E8;--un-mist:#BDCEB8;--un-padi:#B4CFA9;--un-earth:#DCBE86;--un-plot:#121A14;--un-bund-face:#DCBE86;--un-bund-shade:#7A5A2E}
.uk-design-palette-midnight.uk-undakan{--un-ground:#111614;--un-ink:#EAF0EA;--un-mist:#A3B1A5;--un-padi:#9CC7A4;--un-earth:#D2A86E;--un-line:rgba(234,240,234,.2);--un-card:rgba(255,255,255,.07);--un-plot:#0B100D;--un-bund-face:#C8A06A;--un-bund-shade:#7A5A2E}
.uk-design-palette-midnight .uk-un-closing{--un-ground:#111614;--un-ink:#EAF0EA;--un-mist:#A3B1A5;--un-padi:#9CC7A4;--un-earth:#D2A86E;--un-plot:#080C09;--un-bund-face:#C8A06A;--un-bund-shade:#7A5A2E}
.uk-design-type-classic .uk-un-body h2,.uk-design-type-classic .uk-un-gate-body h1{font-family:var(--un-display)}
.uk-design-type-modern .uk-un-body h2,.uk-design-type-modern .uk-un-gate-body h1,.uk-design-type-modern .uk-un-cover-panel h1{font-family:var(--un-sans);letter-spacing:.02em}
.uk-design-type-editorial .uk-un-body h2{font-size:clamp(26px,6.4vw,40px);letter-spacing:-.01em}
.uk-design-type-editorial .uk-un-cover-panel h1{font-size:clamp(33px,9.4vw,60px);letter-spacing:-.02em}
/* The beat ruler is the signature, so "surface" changes how wide the cycle is
   spaced rather than flattening it away. */
.uk-design-surface-soft .uk-undakan{--un-tread:14px;--un-bund:22px;--un-radius:10px;--un-radius-sm:6px}
.uk-design-surface-balanced .uk-undakan{--un-tread:20px;--un-bund:30px;--un-radius:6px;--un-radius-sm:4px}
.uk-design-surface-sharp .uk-undakan{--un-tread:26px;--un-bund:38px;--un-radius:0px;--un-radius-sm:0px}
.uk-design-gallery-grid .uk-un-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow-x:visible}
.uk-design-gallery-filmstrip .uk-un-gallery{display:flex;grid-template-columns:none;gap:12px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}
.uk-design-gallery-filmstrip .uk-un-plot-tile,
.uk-design-gallery-filmstrip .uk-un-plot-tile:nth-child(3n+1),
.uk-design-gallery-filmstrip .uk-un-plot-tile:nth-child(3n+2),
.uk-design-gallery-filmstrip .uk-un-plot-tile:nth-child(3n+3),
.uk-design-gallery-filmstrip .uk-un-plot-tile:last-child:nth-child(3n+2){flex:0 0 auto;grid-column:auto;margin-left:0;width:min(62vw,240px);scroll-snap-align:center}
.uk-design-gallery-filmstrip .uk-un-plot-tile img,
.uk-design-gallery-filmstrip .uk-un-plot-tile:nth-child(3n+1) img,
.uk-design-gallery-filmstrip .uk-un-plot-tile:last-child:nth-child(3n+2) img{aspect-ratio:4/5}
.uk-design-gallery-editorial .uk-un-gallery{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;overflow-x:visible}
.uk-design-gallery-editorial .uk-un-plot-tile,
.uk-design-gallery-editorial .uk-un-plot-tile:nth-child(3n+1),
.uk-design-gallery-editorial .uk-un-plot-tile:last-child:nth-child(3n+2){grid-column:1/-1;margin-left:0}
.uk-design-gallery-editorial .uk-un-plot-tile img,
.uk-design-gallery-editorial .uk-un-plot-tile:nth-child(3n+1) img,
.uk-design-gallery-editorial .uk-un-plot-tile:last-child:nth-child(3n+2) img{aspect-ratio:3/2}
.uk-design-motion-soft .uk-undakan{--un-lift:22px}
.uk-design-motion-cinematic .uk-undakan{--un-lift:36px}
.uk-design-motion-minimal .uk-undakan{--un-lift:0px}
.uk-design-motion-minimal .uk-un-reveal,.uk-design-motion-minimal .uk-un-reveal-item{opacity:1;transform:none;transition:none}
.uk-design-motion-minimal .uk-un-gate.is-stepped .uk-un-stepdown{animation:none}

/* Wider viewports ---------------------------------------------------------- */
@media(min-width:760px){
.uk-undakan{font-size:17px;--un-col-w:56px;--un-tread:20px;--un-bund:30px}
.uk-un-sec{padding:0 28px 34px calc(var(--un-col-w) + 22px + var(--un-step,0) * var(--un-tread))}
.uk-un-panel{padding:40px 44px 40px}
.uk-un-portrait{height:min(38svh,296px)}
.uk-un-portrait img,.uk-un-cover-media .uk-un-cover-image{object-position:var(--un-focus-desktop-x,50%) var(--un-focus-desktop-y,42%)}
.uk-un-cover-panel{padding:56px calc(var(--un-col-w) + 24px) 74px}
.uk-un-ridge{width:min(100%,540px)}
.uk-un-event{grid-template-columns:42px minmax(0,1fr);gap:16px;padding:24px}
.uk-un-closing{padding:96px calc(var(--un-col-w) + 24px) 112px}
.uk-un-rung button{height:48px}
.uk-un-standing{display:block;font-size:14px}
/* The presets are restated at every width where the base grid changes, because
   a preset declared once at base width is silently replaced by the breakpoint
   underneath it — two shipped templates lost their photos to exactly that. */
.uk-design-gallery-grid .uk-un-gallery{grid-template-columns:repeat(4,minmax(0,1fr))}
.uk-design-gallery-editorial .uk-un-gallery{grid-template-columns:minmax(0,1fr)}
.uk-design-gallery-filmstrip .uk-un-gallery{grid-template-columns:none}
}
@media(min-width:1100px){
.uk-un-panel{width:min(100%,900px);padding:52px 64px 52px}
.uk-un-sec{padding:0 40px 42px calc(var(--un-col-w) + 38px + var(--un-step,0) * var(--un-tread))}
.uk-un-closing{padding:112px calc(var(--un-col-w) + 38px) 124px}
.uk-design-gallery-grid .uk-un-gallery{grid-template-columns:repeat(4,minmax(0,1fr))}
.uk-design-gallery-editorial .uk-un-gallery{grid-template-columns:minmax(0,1fr)}
.uk-design-gallery-filmstrip .uk-un-gallery{grid-template-columns:none}
}

/* Narrow phones ------------------------------------------------------------ */
@media(max-width:560px){
.uk-un-count{grid-template-columns:repeat(2,minmax(0,1fr))}
.uk-un-people{grid-template-columns:minmax(0,1fr);gap:24px}
.uk-un-accounts,.uk-un-contacts{grid-template-columns:minmax(0,1fr)}
.uk-un-share-grid{grid-template-columns:minmax(0,1fr)}
.uk-un-lightbox-close{top:auto;bottom:-52px;right:50%;transform:translateX(50%)}
}
@media(max-width:360px){
.uk-undakan{--un-col-w:36px;--un-tread:8px;--un-bund:13px}
.uk-un-sec{padding:0 10px 20px calc(var(--un-col-w) + 6px + var(--un-step,0) * var(--un-tread))}
.uk-un-closing{padding:52px calc(var(--un-col-w) + 6px) 66px}
.uk-un-panel{padding:20px 16px 20px}
.uk-un-event{grid-template-columns:minmax(0,1fr);gap:10px}
.uk-un-rung button{height:38px}
.uk-design-gallery-grid .uk-un-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
.uk-design-gallery-editorial .uk-un-gallery{grid-template-columns:minmax(0,1fr)}
.uk-design-gallery-filmstrip .uk-un-gallery{grid-template-columns:none}
}

/* Short viewports: a landscape phone and a short laptop window are different
   rooms, so every height rule names the width it means. */
@media(max-height:620px) and (max-width:1024px){
.uk-un-cover{min-height:100svh}
.uk-un-cover-panel{padding:22px calc(var(--un-col-w) + 10px) 30px}
.uk-un-cover-panel h1{font-size:clamp(22px,5.2vw,30px)}
.uk-un-cover-empty-mark{font-size:17px;padding:8px 14px}
.uk-un-gate{padding:12px}
.uk-un-portrait{height:min(23svh,136px)}
.uk-un-gate-body{padding:16px 16px 14px}
.uk-un-gate-body h1{font-size:clamp(20px,4.4vw,26px)}
.uk-un-bands{width:min(150vh,620px);height:min(96vh,420px)}
.uk-un-rung button{height:38px}
.uk-un-standing{font-size:11px;letter-spacing:.18em;max-height:66svh}
.uk-un-rail{bottom:calc(10px + env(safe-area-inset-bottom))}
}
@media(max-height:620px) and (min-width:1025px){
.uk-un-portrait{height:min(28svh,190px)}
.uk-un-rung button{height:38px}
}

/* Reduced motion ----------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
.uk-undakan *,.uk-undakan *::before,.uk-undakan *::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;transition-delay:0ms !important;scroll-behavior:auto !important}
.uk-un-reveal,.uk-un-reveal-item{opacity:1;transform:none}
}