/* Lontar — Romance Flagship 1.0.0
 * A wedding invitation as a bundle of palm leaves strung on one cord.
 *
 * THE NAVIGATION IS PART OF THE DOCUMENT. That is the point of this family, and
 * it was chosen from a measurement rather than a mood: all thirty-six releases in
 * this catalogue pin their navigation to the viewport, and TEN of them do it the
 * same way — a fixed rail at a side edge, vertically centred, a column of marks,
 * a standing label turned on its side. The four most recent wedding flagships are
 * all four of them in that ten. Nothing in the suite caught it, because the one
 * contract that forbids a shared navigation mechanism only ever covered seven
 * older romance families.
 *
 * A lontar has no bar hovering over it. Its leaves are threaded on a cord and you
 * find your way the way you find your way through a manuscript: there is an index
 * leaf near the front, and every leaf ends by naming the one after it. So this
 * template has no fixed navigation at all — the index is a leaf, in flow, scrolled
 * past like the rest, and the "next leaf" foot is part of the leaf it ends.
 *
 * THE CORD IS THE SIGNATURE AND IT HAS TO BE TRUE. One cord runs down the binding
 * margin of the whole bundle and every leaf's hole sits ON it. That is a claim
 * about geometry, not a picture: the hole's centre and the cord's centre are
 * derived from the same two tokens, so they cannot drift, and the browser harness
 * measures every hole against the cord at every breakpoint. A cord drawn beside
 * the holes instead of through them is the version of this design that looks
 * almost right and is wrong.
 *
 * Two traps this family invites.
 *
 * A HOLE POSITIONED AGAINST THE WRONG BOX. position:absolute resolves against the
 * PADDING box, so a border on the leaf's left edge moves every hole off the cord
 * by exactly that border's width. The leaves carry shadow, never a left border.
 *
 * AND A CORD DRAWN IN THE COLOUR OF THE GROUND. The cord is the one thing holding
 * the bundle together; in the ground's own colour it draws nothing, which is the
 * trap this catalogue has fallen into ten times.
 *
 * Every surface declares its own leaf colour AND its own ink in the same rule, so
 * a palette can never leave text the colour of what is behind it.
 */

/* Tokens ------------------------------------------------------------------- */
.uk-lontar{
  /* The lacquered box, the dried leaf, and the ink cut into it. */
  --lo-ground:#2B241A;
  --lo-leaf:#E9DDC4;--lo-ink:#2C2015;--lo-muted:#5F4E37;--lo-lak:#8A3B21;--lo-moss:#3F5133;
  --lo-line:rgba(44,32,21,.2);--lo-fibre:#A8916A;
  --lo-cord:#9A7F52;--lo-gold:#8A6B25;
  --lo-radius:4px;--lo-radius-sm:3px;--lo-tip:18px;--lo-measure:62ch;
  /* THE BINDING MARGIN AND THE CORD. The hole's centre is half the binding margin
     in from the leaf's left edge, and the cord is drawn at the bundle's own left
     padding plus that same half. One arithmetic, two elements — which is the only
     way they stay on top of each other at every width. */
  --lo-bind:36px;
  --lo-hole:9px;
  --lo-hole-top:30px;
  --lo-pad-i:14px;
  --lo-pad-e:14px;
  --lo-gap:20px;
  --lo-settle:16px;
  --lo-gal-gap:12px;
  --lo-display:"Lora",Georgia,Cambria,"Times New Roman",serif;
  --lo-sans:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  position:relative;background:var(--lo-ground);color:var(--lo-ink);
  font-family:var(--lo-sans);font-size:16px;line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
[hidden]{display:none !important}
.uk-lontar *,.uk-lontar *::before,.uk-lontar *::after{box-sizing:border-box}
.uk-lontar 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-lontar figure{margin:0}
.uk-lontar h1,.uk-lontar h2,.uk-lontar h3,.uk-lontar h4{font-family:var(--lo-display);font-weight:600;line-height:1.24;margin:0}
.uk-lontar p{margin:0}
/* :where() so this stays a DEFAULT. As ".uk-lontar button" it was (0,1,1) and
   outranked every button rule written as a single class, so declared button
   colours would never apply and those buttons would take the page ink instead —
   including the lightbox controls on their dark scrim. */
.uk-lontar :where(button){font-family:inherit;color:inherit}

/* Shared type and ornament ------------------------------------------------- */
.uk-lo-eyebrow{font-size:11px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--lo-moss)}
.uk-lo-title{font-size:clamp(22px,5vw,30px);text-wrap:balance}
.uk-lo-title.is-sm{font-size:clamp(17px,3.4vw,20px)}
.uk-lo-copy{max-width:var(--lo-measure);color:var(--lo-muted);font-size:15px}
.uk-lo-lead{max-width:var(--lo-measure);font-family:var(--lo-display);font-size:19px;color:var(--lo-ink)}
.uk-lo-preline{white-space:pre-line}
.uk-lo-signature{font-family:var(--lo-display);font-size:22px;color:var(--lo-ink)}
.uk-lo-quote{max-width:var(--lo-measure);padding:14px 18px;border-left:2px solid var(--lo-moss);color:var(--lo-ink);font-family:var(--lo-display);font-size:17px;font-style:italic}
.uk-lo-quote cite{display:block;margin-top:10px;font-family:var(--lo-sans);font-size:12px;font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--lo-muted)}
.uk-lo-occasions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--lo-muted)}
.uk-lo-occasions span+span::before{content:"·";padding-right:6px;font-size:14px;color:var(--lo-lak)}
.uk-lo-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border:1px solid var(--lo-moss);border-radius:var(--lo-radius);background:transparent;color:var(--lo-ink);font-size:13px;font-weight:600;letter-spacing:.05em;text-decoration:none;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease}
.uk-lo-button:hover{transform:translateY(-1px);box-shadow:inset 0 -2px 0 var(--lo-gold)}
/* The label is --lo-leaf, not a fixed cream, and the fill is --lo-moss, which is
   always picked to contrast the leaf it sits on — so the pair inverts with the
   palette instead of staying light on a light surface. */
.uk-lo-button.is-solid{border-color:transparent;background:var(--lo-moss);color:var(--lo-leaf)}
.uk-lo-button:focus-visible,.uk-lontar button:focus-visible,.uk-lontar a:focus-visible{outline:2px solid var(--lo-lak);outline-offset:3px}

/* THE TWO GUIDE-RULES. A lontar's script is cut between two scored lines, so the
   pair travels together and is drawn in the fibre colour, never the leaf's. */
.uk-lo-guides{display:block;width:min(100%,180px);height:7px;margin:12px auto;
  border-top:1px solid var(--lo-fibre);border-bottom:1px solid var(--lo-fibre);
  transform-origin:left center;transition:transform .62s cubic-bezier(.22,.78,.2,1)}

/* THE BUNDLE AND ITS CORD --------------------------------------------------
   One cord down the binding margin, every leaf threaded on it. The cord's x and
   the holes' x come out of the SAME two tokens, which is the only reason they
   stay on top of each other at every width. */
/* minmax(0,1fr), not the implicit auto track. A grid column left to "auto" is
   sized by its MAX-CONTENT, and a leaf holding a line of prose or a photograph
   row has a max-content width of well over a thousand pixels — measured, the
   leaves came out 1523px wide inside a 320px page and only the root's
   overflow-x:hidden kept the scrollbar away while the text ran off the edge. */
.uk-lo-bundle{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--lo-gap);
  padding:var(--lo-gap) var(--lo-pad-e) calc(var(--lo-gap) * 2) var(--lo-pad-i);
  background:var(--lo-ground)}
.uk-lo-cord{position:absolute;top:0;bottom:0;z-index:0;width:2px;margin-left:-1px;
  left:calc(var(--lo-pad-i) + var(--lo-bind) / 2);
  background:linear-gradient(180deg,transparent 0,var(--lo-cord) 40px,var(--lo-cord) calc(100% - 120px),transparent 100%);
  pointer-events:none}

/* A LEAF. No left border anywhere on it: position:absolute inside resolves
   against the PADDING box, so a 1px left border would move every hole 1px off the
   cord and the bundle would read as leaves lying beside a string. */
.uk-lo-leaf{position:relative;z-index:1;
  padding:22px var(--lo-pad-e) 0 var(--lo-bind);
  border-radius:var(--lo-radius) var(--lo-tip) var(--lo-tip) var(--lo-radius);
  background:var(--lo-leaf);color:var(--lo-ink);
  box-shadow:0 10px 22px rgba(0,0,0,.3),inset 0 0 0 1px rgba(44,32,21,.08);
  scroll-margin-top:14px}
/* The grain of a dried leaf: long fibres running the length of it. */
.uk-lo-leaf::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  /* Two periods, not one. A single evenly spaced gradient reads as printed
     stripes rather than fibre — seen on screen at 10px, which is why it is
     measured AND looked at. Two coprime periods break the regularity while
     keeping the grain measurable (dL* about 3 on every palette). */
  background-image:repeating-linear-gradient(90deg,transparent 0 13px,rgba(44,32,21,.042) 13px 14px),
                   repeating-linear-gradient(90deg,transparent 0 29px,rgba(44,32,21,.032) 29px 31px);
  opacity:.9}
/* THE HOLE the cord passes through. Its centre is half the binding margin in from
   the leaf's left edge — the same half the cord is drawn at. */
.uk-lo-hole{position:absolute;z-index:2;top:var(--lo-hole-top);
  left:calc(var(--lo-bind) / 2 - var(--lo-hole) / 2);
  width:var(--lo-hole);height:var(--lo-hole);border-radius:50%;
  background:var(--lo-ground);box-shadow:inset 0 1px 2px rgba(0,0,0,.55),0 0 0 1px rgba(44,32,21,.22)}
/* The cord seen THROUGH the hole. Without it the thread stops at every leaf and
   starts again below it, which is a pile of leaves near a string rather than a
   bundle on one. Drawn in the cord's own colour, never the ground's. */
.uk-lo-hole::after{content:"";position:absolute;left:50%;top:-1px;bottom:-1px;width:2px;margin-left:-1px;
  background:var(--lo-cord);border-radius:1px}

.uk-lo-leaf-head{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:10px;border-bottom:1px solid var(--lo-fibre)}
.uk-lo-leaf-num{font-family:var(--lo-display);font-size:13px;letter-spacing:.2em;color:var(--lo-muted);font-variant-numeric:tabular-nums}
.uk-lo-leaf-body{position:relative;padding:18px 0 22px}
.uk-lo-leaf-body > * + *{margin-top:12px}

/* THE WAY ON. Part of the leaf, at the foot of it — the only navigation in this
   template, and it is read rather than hovered. */
.uk-lo-turn{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 0 16px;border-top:1px solid var(--lo-fibre)}
.uk-lo-turn button{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:7px 12px;
  border:1px solid transparent;border-radius:var(--lo-radius);background:transparent;
  font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--lo-muted);cursor:pointer;text-align:left}
.uk-lo-turn button:hover{border-color:var(--lo-fibre);color:var(--lo-ink)}
.uk-lo-next{color:var(--lo-ink) !important;border-color:var(--lo-fibre) !important}

/* THE INDEX LEAF. A leaf like any other — same cord, same flow, scrolled past
   like the rest. It is the only index this template has, and it is NOT fixed:
   position is left to .uk-lo-leaf, which places it in the bundle. */
/* Bounded by the leaf it is, and by the bundle the leaf sits in — an index in
   flow cannot grow past the page the way a floating one can. */
.uk-lo-index{display:block;max-width:100%}
.uk-lo-index-list{list-style:none;display:grid;gap:2px;margin:0;padding:14px 0 18px}
.uk-lo-index-list button{display:flex;align-items:baseline;gap:12px;width:100%;min-height:40px;
  padding:8px 10px;border:0;border-radius:var(--lo-radius-sm);background:transparent;
  color:var(--lo-ink);font-size:15px;text-align:left;cursor:pointer}
.uk-lo-index-list button i{flex:0 0 auto;font-family:var(--lo-display);font-style:normal;font-size:12px;
  letter-spacing:.14em;color:var(--lo-muted);font-variant-numeric:tabular-nums}
.uk-lo-index-list button span{flex:1;min-width:0;border-bottom:1px dotted var(--lo-line);padding-bottom:2px}
.uk-lo-index-list button:hover{background:rgba(44,32,21,.05)}
/* Where you are, marked on the index itself — which is why the index is worth
   coming back to rather than a list you read once. */
.uk-lo-index-list button.is-active{background:rgba(44,32,21,.07)}
.uk-lo-index-list button.is-active i{color:var(--lo-lak)}
.uk-lo-index-list button.is-active span{border-bottom-color:var(--lo-lak);border-bottom-style:solid}

/* An inscribed line: its mark, then what it says. */
.uk-lo-lines{list-style:none;display:grid;gap:0;margin:0;padding:0}
.uk-lo-line{display:grid;gap:4px;padding:12px 0}
.uk-lo-line + .uk-lo-line{border-top:1px dotted var(--lo-line)}
.uk-lo-line-mark{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--lo-moss)}
.uk-lo-line > div > * + *{margin-top:6px}

/* GATE: the bundle still tied -------------------------------------------
   The stack is drawn well PAST the leaf on top of it, because a stack no wider
   than that leaf is hidden behind it and reads as nothing at all. */
.uk-lo-gate{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:20px 0;overflow:hidden;
  background:var(--lo-ground);color:var(--lo-ink);transition:opacity .7s ease,visibility .7s ease}
.uk-lo-gate.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.uk-lo-gate-stage{position:relative;display:grid;place-items:center;width:100%}
/* The leaves underneath, seen at their edges. Drawn in the leaf colour with the
   ground showing between them, never in the ground's own colour. */
/* Underneath the top leaf, not beside it. Drawn to either side of a 460px leaf
   the three edges were 16px stubs at the screen's margins and read as nothing;
   below it they read as what they are — the rest of the bundle. */
.uk-lo-stack{position:absolute;left:50%;bottom:-27px;z-index:0;display:grid;gap:5px;
  width:min(100% - 40px,460px);transform:translateX(-50%);pointer-events:none}
.uk-lo-stack i{display:block;height:7px;border-radius:2px var(--lo-tip) var(--lo-tip) 2px;
  background:var(--lo-leaf);box-shadow:0 3px 8px rgba(0,0,0,.45)}
.uk-lo-stack i:nth-child(1){margin-inline:6px;opacity:.82}
.uk-lo-stack i:nth-child(2){margin-inline:13px;opacity:.6}
.uk-lo-stack i:nth-child(3){margin-inline:20px;opacity:.42}
.uk-lo-gate-leaf{position:relative;z-index:2;display:grid;grid-template-rows:auto auto;overflow:hidden;
  width:min(100% - 40px,460px);
  border-radius:var(--lo-radius) var(--lo-tip) var(--lo-tip) var(--lo-radius);
  background:var(--lo-leaf);box-shadow:0 22px 50px rgba(0,0,0,.5)}
.uk-lo-hole.is-gate{top:18px;left:15px}
.uk-lo-portrait{position:relative;height:min(40svh,272px);overflow:hidden;background:var(--lo-ground)}
.uk-lo-portrait img{width:100%;height:100%;object-fit:cover;object-position:var(--lo-focus-mobile-x,50%) var(--lo-focus-mobile-y,38%)}
.uk-lo-gate-body{position:relative;padding:26px 22px 24px;text-align:center}
.uk-lo-gate-names{margin-top:8px;font-size:clamp(26px,7.2vw,40px)}
.uk-lo-gate-date{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:7px 16px;border:1px solid var(--lo-line);border-radius:999px;font-size:12px;letter-spacing:.08em;color:var(--lo-muted)}
.uk-lo-couple-list{display:grid;gap:8px;margin-top:14px}
.uk-lo-couple-list span{display:grid;gap:2px}
.uk-lo-couple-list small{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--lo-muted)}
.uk-lo-couple-list strong{font-family:var(--lo-display);font-size:18px;font-weight:600}
/* Its own line, always: the buttons here are inline-flex, so on a leaf wide
   enough this came to rest beside the date chip instead of centred beneath it. */
.uk-lo-gate-open{position:relative;display:flex;width:fit-content;margin:18px auto 0;padding:13px 26px;
  border-color:transparent;background:var(--lo-moss);color:var(--lo-leaf);font-size:14px}
/* THE CORD WOUND ROUND THE BUNDLE. Two turns across the leaf, in the cord's own
   colour so they read as holding it shut. Untying them is what opens a lontar,
   so that is the one thing that moves when the gate opens.

   Both turns cross the PHOTOGRAPH and nothing else. Measured on a 390px screen
   with the turns placed by the stage's own height, the lower one ran straight
   through "Naurah & Atef" and struck the names out. The tie is sized to the leaf
   now, and both turns sit inside the top half of it, which is the photograph. */
.uk-lo-tie{position:absolute;left:50%;top:50%;z-index:3;width:min(100% + 40px,600px);height:100%;
  transform:translate(-50%,-50%);pointer-events:none}
.uk-lo-tie i{position:absolute;left:0;right:0;height:3px;border-radius:2px;background:var(--lo-cord);
  box-shadow:0 1px 3px rgba(0,0,0,.45);transform-origin:left center;
  transition:transform .8s cubic-bezier(.3,.9,.3,1),opacity .6s ease}
.uk-lo-tie i:nth-child(1){top:17%;transform:rotate(-1.2deg)}
.uk-lo-tie i:nth-child(2){top:37%;transform:rotate(.9deg)}
.uk-lo-gate.is-drawn .uk-lo-tie i:nth-child(1){transform:translateX(-120%) rotate(-7deg);opacity:0}
.uk-lo-gate.is-drawn .uk-lo-tie i:nth-child(2){transform:translateX(120%) rotate(6deg);opacity:0}

/* COVER -------------------------------------------------------------------
   The one screen with a photograph on it, so the one screen that carries a dark
   register of its own — leaf and ink together, so a palette can never leave the
   names the colour of the scrim behind them. */
.uk-lo-cover{--lo-leaf:#231D15;--lo-ink:#F2EAD9;--lo-muted:#B4A78E;--lo-moss:#AEC4A5;--lo-lak:#E0A276;
  --lo-fibre:#6E6553;--lo-line:rgba(242,234,217,.24);
  /* color, not only the token. A rule that redeclares --lo-ink without also
     setting color leaves the text at the colour the ROOT already computed from
     the root's own ink: measured here at 1.03:1, the cover's names in the dark
     ink of a light page, on the dark ground. Custom properties inherit; a
     resolved color does not go back and change itself. */
  position:relative;display:grid;min-height:100svh;background:var(--lo-leaf);color:var(--lo-ink)}
.uk-lo-cover-media{position:absolute;inset:0;overflow:hidden}
.uk-lo-cover-image{width:100%;height:100%;object-fit:cover;object-position:var(--lo-focus-mobile-x,50%) var(--lo-focus-mobile-y,38%)}
.uk-lo-cover-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(35,29,21,.26) 0%,rgba(35,29,21,.78) 58%,#231D15 100%)}
.uk-lo-cover-empty{position:absolute;inset:0;display:grid;place-items:center;background:#2A2319}
.uk-lo-cover-empty-grain{position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,rgba(242,234,217,.1) 0 1px,transparent 1px 8px)}
.uk-lo-cover-empty-mark{position:relative;font-family:var(--lo-display);font-size:23px;letter-spacing:.2em;padding:10px 18px;border:1px solid var(--lo-line);border-radius:var(--lo-radius);color:#F2EAD9}
.uk-lo-cover-panel{position:relative;align-self:end;padding:40px 20px 56px;text-align:center}
.uk-lo-cover-panel .uk-lo-title{margin-top:8px;font-size:clamp(29px,8.4vw,52px)}
.uk-lo-cover-panel > * + *{margin-top:10px}
.uk-lo-cover-date{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:7px 16px;border:1px solid var(--lo-line);border-radius:999px;font-size:12px;letter-spacing:.08em;color:var(--lo-muted)}
.uk-lo-mark{display:grid;place-items:center;width:62px;height:62px;margin:20px auto 0;
  border:1px solid var(--lo-moss);border-radius:var(--lo-radius);
  font-family:var(--lo-display);font-size:14px;letter-spacing:.16em;color:var(--lo-moss)}

/* People ------------------------------------------------------------------- */
.uk-lo-people{display:grid;gap:18px}
.uk-lo-person{display:flex;align-items:flex-start;gap:14px}
.uk-lo-portrait-round{flex:0 0 auto;width:74px;height:74px;overflow:hidden;border-radius:50%;background:rgba(44,32,21,.08);box-shadow:inset 0 0 0 1px var(--lo-line)}
.uk-lo-portrait-round img{width:100%;height:100%;object-fit:cover}
.uk-lo-portrait-round.is-empty{display:grid;place-items:center}
.uk-lo-portrait-round.is-empty span{font-family:var(--lo-display);font-size:26px;color:var(--lo-moss)}
.uk-lo-person h4{margin-top:4px;font-size:20px}
.uk-lo-person > div > strong{display:block;margin-top:2px;font-size:14px;font-weight:600;color:var(--lo-muted)}
.uk-lo-parents{margin-top:8px;color:var(--lo-muted);font-size:14px}
.uk-lo-parents span{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.uk-lo-parents em{font-style:normal;padding:0 5px;color:var(--lo-lak)}
.uk-lo-bio{margin-top:8px;color:var(--lo-muted);font-size:14px}
.uk-lo-chapter{margin-top:18px}
.uk-lo-chapter > * + *{margin-top:8px}
.uk-lo-couple-index{display:flex;flex-wrap:wrap;gap:8px}
.uk-lo-couple-index button{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:7px 14px;border:1px solid var(--lo-line);border-radius:var(--lo-radius);background:transparent;cursor:pointer}
.uk-lo-couple-index button span{font-family:var(--lo-display);font-size:11px;letter-spacing:.12em;color:var(--lo-lak)}
.uk-lo-couple-index button.is-active{border-color:var(--lo-gold);box-shadow:inset 0 0 0 1px var(--lo-gold)}

/* Events, streams ---------------------------------------------------------- */
.uk-lo-events{display:grid;gap:0}
.uk-lo-event{display:grid;gap:4px;padding:14px 0}
.uk-lo-event + .uk-lo-event{border-top:1px dotted var(--lo-line)}
.uk-lo-event > div > * + *{margin-top:6px}
.uk-lo-when{font-weight:600}
.uk-lo-address{color:var(--lo-muted);font-size:14px}
.uk-lo-scope{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--lo-muted)}
.uk-lo-scope strong{padding:3px 9px;border:1px solid var(--lo-line);border-radius:999px;font-weight:600;color:var(--lo-ink)}
.uk-lo-map{width:100%;height:190px;border:1px solid var(--lo-line);border-radius:var(--lo-radius-sm)}
.uk-lo-actions{display:flex;flex-wrap:wrap;gap:8px}
.uk-lo-streams{display:grid;gap:10px}
.uk-lo-stream{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--lo-line);border-radius:var(--lo-radius);color:var(--lo-ink);text-decoration:none}
.uk-lo-stream span{display:grid;flex:1;min-width:0}
.uk-lo-stream small{font-size:12px;color:var(--lo-muted)}

/* Countdown ---------------------------------------------------------------- */
.uk-lo-count{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--lo-line);border:1px solid var(--lo-line);border-radius:var(--lo-radius-sm);overflow:hidden}
.uk-lo-count div{padding:14px 8px;background:var(--lo-leaf);text-align:center}
.uk-lo-count strong{display:block;font-family:var(--lo-display);font-size:clamp(24px,6vw,32px);line-height:1.1;font-variant-numeric:tabular-nums}
.uk-lo-count span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--lo-muted)}

/* GALLERY: the photographs laid ALONG the leaf -----------------------------
   A leaf is read left to right, so the photographs are set out in one line and
   the line is the thing you move through. It is a scroller at every width — never
   a block that grows the leaf downwards — which is what makes it a leaf rather
   than a page. */
.uk-lo-strip-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--lo-muted)}
.uk-lo-strip-tools div{display:flex;gap:8px}
.uk-lo-strip-tools button{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--lo-line);border-radius:var(--lo-radius-sm);background:transparent;cursor:pointer}
.uk-lo-strip{display:flex;gap:var(--lo-gal-gap);overflow-x:auto;padding-bottom:12px;
  scroll-snap-type:x mandatory;scrollbar-width:none}
.uk-lo-strip::-webkit-scrollbar{display:none}
.uk-lo-figure{position:relative;flex:0 0 auto;width:min(62vw,232px);scroll-snap-align:start}
.uk-lo-figure img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--lo-radius-sm);background:rgba(44,32,21,.08)}
.uk-lo-figcaption{margin-top:6px;font-family:var(--lo-display);font-size:11px;letter-spacing:.22em;color:var(--lo-muted);font-variant-numeric:tabular-nums}
/* 38, not 30. Measured at every width, the zoom affordance was a 30x30 target —
   under a finger even though the whole figure also opens the photograph. */
.uk-lo-figure button{position:absolute;right:6px;top:6px;display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:50%;background:rgba(43,36,26,.8);color:#F2EAD9;cursor:pointer}

/* Gift, contacts, FAQ ------------------------------------------------------ */
.uk-lo-tabs{display:flex;flex-wrap:wrap;gap:8px}
.uk-lo-tabs button{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:9px 15px;border:1px solid var(--lo-line);border-radius:var(--lo-radius);background:transparent;font-size:12px;font-weight:600;cursor:pointer}
.uk-lo-tabs button.is-active{border-color:var(--lo-gold);box-shadow:inset 0 0 0 1px var(--lo-gold)}
.uk-lo-gift-panel{display:block}
.uk-lo-gift-panel + .uk-lo-gift-panel:not([hidden]){margin-top:4px}
.uk-lo-account strong{display:block;font-family:var(--lo-display);font-size:20px;letter-spacing:.05em;font-variant-numeric:tabular-nums}
.uk-lo-account p{font-size:13px;color:var(--lo-muted)}
.uk-lo-contacts{display:grid}
.uk-lo-contact strong{display:block;font-size:15px}
.uk-lo-contact p{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--lo-muted)}
.uk-lo-faq{display:grid;gap:0}
.uk-lo-faq-item{padding:12px 0}
.uk-lo-faq-item + .uk-lo-faq-item{border-top:1px dotted var(--lo-line)}
.uk-lo-faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:38px;cursor:pointer;font-weight:600;list-style:none}
.uk-lo-faq-item summary::-webkit-details-marker{display:none}
.uk-lo-faq-item p{margin-top:8px;color:var(--lo-muted);font-size:15px}
.uk-lo-hashtags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.uk-lo-hashtags button{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:6px 13px;border:1px solid var(--lo-line);border-radius:999px;background:transparent;font-size:12px;cursor:pointer}

/* A fixed light background cannot inherit tokens that flip with the palette, so
   it carries the light register locally and every rule inside goes on reading
   tokens rather than being special-cased one at a time. */
.uk-lo-feedback{--lo-leaf:#E9DDC4;--lo-ink:#2C2015;--lo-muted:#5F4E37;--lo-moss:#3F5133;--lo-lak:#8A3B21;
  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(63,81,51,.36);border-radius:var(--lo-radius);background:#E9DDC4;color:#2C2015;font-size:14px}

/* CLOSING: the last leaf, off the cord ------------------------------------- */
/* The engagement partials bring their own markup, so the leaf only gives them
   room rather than restyling what is inside them. */
.uk-lo-engagement .uk-lo-leaf-body{padding-top:16px}
.uk-lo-closing{position:relative;z-index:1;
  padding:56px 20px 72px;border-radius:var(--lo-radius) var(--lo-tip) var(--lo-tip) var(--lo-radius);
  background:var(--lo-leaf);color:var(--lo-ink);text-align:center;
  box-shadow:0 10px 22px rgba(0,0,0,.3),inset 0 0 0 1px rgba(44,32,21,.08);scroll-margin-top:14px}
.uk-lo-closing-body{width:min(100%,600px);margin-inline:auto}
.uk-lo-closing-body > * + *{margin-top:14px}
.uk-lo-closing .uk-lo-title{font-size:clamp(24px,6vw,36px)}
.uk-lo-closing .uk-lo-copy{margin-inline:auto}
.uk-lo-closing-share{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.uk-lo-back{margin-inline:auto}

/* Controls rail, share dialog, lightbox, toast -----------------------------
   The rail carries the CONTROLS. There is no navigation pinned to the viewport
   in this template, which is the whole reason this family exists. */
.uk-lo-rail{position:fixed;right:14px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:24;display:grid;gap:8px;justify-items:center}
.uk-lo-rail-toggle,.uk-lo-rail-panel button{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(154,127,82,.6);border-radius:50%;background:#2B241A;color:#F2EAD9;cursor:pointer}
.uk-lo-rail-panel{display:grid;gap:8px;justify-items:center}
.uk-lo-dialog,.uk-lo-lightbox{position:fixed;inset:0;z-index:46;display:grid;place-items:center;padding:20px 16px;background:rgba(22,18,13,.88);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.uk-lo-dialog.is-open,.uk-lo-lightbox.is-open{opacity:1;visibility:visible}
/* A chrome surface whose background is FIXED cannot inherit tokens that flip with
   the palette. In a dark palette --lo-ink and --lo-moss are both light, so on this
   fixed leaf-coloured panel an eyebrow would measure near 1:1 — the same colour as
   the panel. So the panel re-declares the light register locally. */
.uk-lo-dialog-panel{--lo-leaf:#E9DDC4;--lo-ink:#2C2015;--lo-muted:#5F4E37;--lo-moss:#3F5133;--lo-lak:#8A3B21;--lo-line:rgba(44,32,21,.2);
  width:min(100%,430px);padding:22px;border:1px solid var(--lo-moss);border-radius:var(--lo-radius);background:#E9DDC4;color:#2C2015}
.uk-lo-dialog-panel h2{margin-top:6px;font-size:22px}
.uk-lo-share-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:16px}
.uk-lo-share-grid button{display:flex;align-items:center;gap:8px;min-height:40px;padding:11px 13px;border:1px solid rgba(44,32,21,.2);border-radius:var(--lo-radius-sm);background:transparent;color:inherit;cursor:pointer;font-size:13px}
.uk-lo-dialog-close{width:100%;margin-top:14px}
.uk-lo-lightbox-panel{position:relative;width:min(100%,780px)}
.uk-lo-lightbox-panel img{width:100%;max-height:76svh;object-fit:contain;border-radius:var(--lo-radius);transition:opacity .2s ease}
.uk-lo-lightbox.is-switching .uk-lo-lightbox-panel img{opacity:0}
.uk-lo-lightbox-counter{margin-top:12px;color:#F2EAD9;font-size:12px;letter-spacing:.16em;text-align:center}
.uk-lo-lightbox-close,.uk-lo-lightbox-prev,.uk-lo-lightbox-next{position:absolute;display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;background:rgba(43,36,26,.86);color:#F2EAD9;cursor:pointer}
.uk-lo-lightbox-close{top:-52px;right:0}
.uk-lo-lightbox-prev{left:6px;top:50%;transform:translateY(-50%)}
.uk-lo-lightbox-next{right:6px;top:50%;transform:translateY(-50%)}
.uk-lo-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:#2B241A;color:#F2EAD9;font-size:13px;pointer-events:none;transition:opacity .3s ease,transform .3s ease}
.uk-lo-toast.is-visible{opacity:1;transform:translate(-50%,0)}

/* MOTION: each leaf pivots down on its cord --------------------------------
   A leaf on a string does not fade in. It swings down about the hole it hangs
   from and settles, which is why the origin is the hole's own x and not the
   middle of the leaf. */
.uk-lo-reveal{opacity:0;transform:rotate(-1.4deg) translateY(var(--lo-settle));
  transform-origin:calc(var(--lo-bind) / 2) var(--lo-hole-top);
  transition:opacity .62s ease,transform .72s cubic-bezier(.22,.78,.2,1)}
.uk-lo-reveal.is-visible{opacity:1;transform:none}
.uk-lo-reveal .uk-lo-guides{transform:scaleX(.15)}
.uk-lo-reveal.is-visible .uk-lo-guides{transform:none}
.uk-lo-reveal-item{opacity:0;transform:translateY(calc(var(--lo-settle) * .6));
  transition:opacity .58s ease .18s,transform .58s ease .18s}
.uk-lo-reveal.is-visible .uk-lo-reveal-item{opacity:1;transform:none}

/* Design controls ---------------------------------------------------------- */
/* "Template" is the template's OWN colours, so it restates the tokens above
   rather than a near-miss of them: the box, the dried leaf, the ink and the
   cord. */
.uk-design-palette-template.uk-lontar{--lo-ground:#2B241A;--lo-leaf:#E9DDC4;--lo-ink:#2C2015;--lo-muted:#5F4E37;--lo-lak:#8A3B21;--lo-moss:#3F5133;--lo-fibre:#A8916A;--lo-cord:#9A7F52;--lo-gold:#8A6B25;--lo-line:rgba(44,32,21,.2)}
.uk-design-palette-warm.uk-lontar{--lo-ground:#33271B;--lo-leaf:#F0E2C0;--lo-ink:#30240F;--lo-muted:#6A5730;--lo-lak:#9B4A12;--lo-moss:#556024;--lo-fibre:#B79C62;--lo-cord:#B08A47;--lo-gold:#7E5F12;--lo-line:rgba(48,36,15,.2)}
.uk-design-palette-romantic.uk-lontar{--lo-ground:#302122;--lo-leaf:#F4E1D4;--lo-ink:#301E17;--lo-muted:#6B4C3A;--lo-lak:#93373A;--lo-moss:#7D3341;--lo-fibre:#B99584;--lo-cord:#A67960;--lo-gold:#8E5A42;--lo-line:rgba(48,30,23,.2)}
.uk-design-palette-sage.uk-lontar{--lo-ground:#212B1F;--lo-leaf:#E4E9D2;--lo-ink:#1F2617;--lo-muted:#4B5A3A;--lo-lak:#6E4520;--lo-moss:#2C5236;--lo-fibre:#9AA57F;--lo-cord:#85895A;--lo-gold:#6B5719;--lo-line:rgba(31,38,23,.2)}
/* Midnight is the bundle read after dark: the leaves go to slate and the cord's
   brass is the only thing catching light. Every token flips together, leaf and
   ink in one rule, so nothing is left the colour of what is behind it. */
.uk-design-palette-midnight.uk-lontar{--lo-ground:#131110;--lo-leaf:#221F18;--lo-ink:#EFE7D5;--lo-muted:#ACA187;--lo-lak:#E2A470;--lo-moss:#ABC29E;--lo-fibre:#6C6250;--lo-cord:#CAA55E;--lo-gold:#D7B25F;--lo-line:rgba(239,231,213,.2)}
/* A dark leaf grained with a dark rgba shows nothing, so the grain inverts with
   it — the same reason the cord's colour is a token and not a constant. */
.uk-design-palette-midnight .uk-lo-leaf::before{background-image:repeating-linear-gradient(90deg,transparent 0 13px,rgba(239,231,213,.042) 13px 14px),repeating-linear-gradient(90deg,transparent 0 29px,rgba(239,231,213,.032) 29px 31px)}
.uk-design-palette-midnight .uk-lo-count div{background:var(--lo-leaf)}

.uk-design-type-classic .uk-lo-title,.uk-design-type-classic .uk-lo-gate-names{font-family:var(--lo-display)}
.uk-design-type-modern .uk-lo-title,.uk-design-type-modern .uk-lo-gate-names{font-family:var(--lo-sans);letter-spacing:.02em}
.uk-design-type-editorial .uk-lo-title{font-size:clamp(25px,6.2vw,38px);letter-spacing:-.01em}
.uk-design-type-editorial .uk-lo-cover-panel .uk-lo-title{font-size:clamp(33px,9.4vw,60px);letter-spacing:-.02em}

/* COMPOUND, not descendant. The design classes are printed onto the SAME element
   as .uk-lontar, so ".uk-design-surface-soft .uk-lontar" asks for a root inside a
   root and matches nothing: measured in nine shipped releases, all three presets
   left their tokens where the root put them and moved nothing at all.
   Here "surface" is HOW THE BUNDLE IS BOUND — how wide the binding margin is, how
   far apart the leaves hang on the cord, and how round their tips are cut. The
   binding margin moves the cord and every hole with it, so the control reaches
   the signature rather than a corner radius. */
.uk-design-surface-soft.uk-lontar{--lo-bind:48px;--lo-gap:30px;--lo-tip:26px;--lo-radius:6px;--lo-radius-sm:5px}
.uk-design-surface-balanced.uk-lontar{--lo-bind:36px;--lo-gap:20px;--lo-tip:18px;--lo-radius:4px;--lo-radius-sm:3px}
.uk-design-surface-sharp.uk-lontar{--lo-bind:26px;--lo-gap:10px;--lo-tip:0px;--lo-radius:0px;--lo-radius-sm:0px}

/* The gallery presets are descendants of the root, which is where the design
   class is printed, so these selectors do match. A leaf is read along its length,
   so every preset keeps the photographs in ONE line and changes how much of a
   leaf each one takes. */
.uk-design-gallery-grid .uk-lo-figure{width:min(48vw,178px)}
.uk-design-gallery-filmstrip .uk-lo-figure{width:min(62vw,232px)}
.uk-design-gallery-editorial .uk-lo-figure{width:min(84vw,330px)}
.uk-design-gallery-editorial .uk-lo-figure img{aspect-ratio:3/2}

.uk-design-motion-soft.uk-lontar{--lo-settle:20px}
.uk-design-motion-cinematic.uk-lontar{--lo-settle:34px}
.uk-design-motion-minimal.uk-lontar{--lo-settle:0px}
/* Stillness has to put the leaf down FLAT. A leaf left at its unhung transform
   sits at an angle and never swings level, which on a machine that asked for no
   motion is a bundle that never settles. */
.uk-design-motion-minimal .uk-lo-reveal,
.uk-design-motion-minimal .uk-lo-reveal-item,
.uk-design-motion-minimal .uk-lo-reveal .uk-lo-guides{opacity:1;transform:none;transition:none}
.uk-design-motion-minimal .uk-lo-gate.is-drawn .uk-lo-tie i{transition:none}

/* Wider viewports ---------------------------------------------------------- */
@media(min-width:760px){
.uk-lontar{font-size:17px;--lo-pad-i:28px;--lo-pad-e:28px;--lo-hole-top:34px}
.uk-lo-leaf{padding-top:26px}
.uk-lo-leaf-body{padding:22px 0 26px}
.uk-lo-portrait{height:min(38svh,296px)}
.uk-lo-portrait img,.uk-lo-cover-media .uk-lo-cover-image{object-position:var(--lo-focus-desktop-x,50%) var(--lo-focus-desktop-y,42%)}
.uk-lo-cover-panel{padding:56px 28px 74px}
.uk-lo-gate-leaf{width:min(100% - 48px,540px)}
.uk-lo-stack{width:min(100% - 28px,572px)}
.uk-lo-closing{padding:80px 28px 96px}
/* Two to a leaf once there is room: one person per row left half the leaf empty
   at every desktop width. An odd last one takes the whole row and is centred, so
   the pair never ends with somebody hanging in the left column — and it is capped,
   because a single person stretched across a 944px leaf is a banner, not a
   portrait. */
.uk-lo-people{gap:22px 26px;grid-template-columns:repeat(2,minmax(0,1fr))}
.uk-lo-people>*:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:min(100%,400px)}
.uk-lo-portrait-round{width:88px;height:88px}
}
@media(min-width:1100px){
/* The bundle is capped and centred so a line of prose never runs the width of a
   desktop window. The cap is on the BUNDLE, so the cord and every hole move with
   it together — a cap on the leaves alone would leave the cord behind. */
.uk-lo-bundle{width:min(100%,1000px);margin-inline:auto}
.uk-lo-leaf{padding-top:30px}
.uk-lo-closing{padding:96px 28px 112px}
}

/* Narrow phones ------------------------------------------------------------ */
@media(max-width:400px){
.uk-lo-count{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
.uk-lo-share-grid{grid-template-columns:minmax(0,1fr)}
.uk-lo-lightbox-close{top:auto;bottom:-52px;right:50%;transform:translateX(50%)}
.uk-lo-turn{justify-content:flex-start}
}

/* 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-lo-cover{min-height:100svh}
.uk-lo-cover-panel{padding:22px 20px 30px}
.uk-lo-cover-panel .uk-lo-title{font-size:clamp(22px,5.2vw,30px)}
.uk-lo-cover-empty-mark{font-size:17px;padding:8px 14px}
.uk-lo-gate{padding:12px 0}
.uk-lo-portrait{height:min(23svh,136px)}
.uk-lo-gate-body{padding:16px 16px 14px}
.uk-lo-gate-names{font-size:clamp(20px,4.4vw,26px)}
.uk-lo-tie{height:210px}
.uk-lo-rail{bottom:calc(10px + env(safe-area-inset-bottom))}
}
@media(max-height:620px) and (min-width:1025px){
.uk-lo-portrait{height:min(28svh,190px)}
}

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