/* Lipatan — Romance Flagship 1.0.0
 * The paper wedding invitation that actually arrives in the post: one long strip
 * of card, folded back and forth, with a section on every panel.
 *
 * EVERYTHING ABOUT A PANEL COMES OUT OF ONE NUMBER — which fold it is. An odd
 * panel faces the light and the crease above it is a MOUNTAIN fold; an even panel
 * turns away and its crease is a VALLEY. That single parity decides the panel's
 * face colour, which way its crease catches the light, which side its label is
 * set on, and which way it swings open. Written as four separate decisions they
 * drift apart the first time a section is added in the middle of the strip; here
 * they cannot, because there is one class and everything reads it.
 *
 * AND THE DOCUMENT IS THE NAVIGATION. Measured across the thirty-seven releases
 * before this one, every single one pins its navigation over the page and
 * fourteen of them do it the same way. Here every crease carries the name of the
 * panel under it and is the way to it, and the whole strip can be FOLDED UP so
 * that every crease comes onto one screen at once. Folding a document to see its
 * folds is the index; there is no bar anywhere.
 *
 * Three things here are easy to get wrong and invisible in a stylesheet read.
 *
 * A FOLD WITH NO LIGHT IN IT. A crease is two hairlines, a lit one and a shaded
 * one, and which is on top is the whole difference between a mountain and a
 * valley. Drawn in one colour it is a rule, not a fold — and a rule in the card's
 * own colour is nothing at all, which is the trap this catalogue has fallen into
 * ten times.
 *
 * A FOLDED STATE THAT DOES NOT FOLD FAR ENOUGH. The point of folding the strip up
 * is that the whole invitation comes within reach. If a panel keeps any of its
 * body — a margin, a min-height, a border — the folded strip is still metres long
 * and the index is not an index. Measured in a browser on a fourteen-panel
 * invitation: 6,600px of strip folds to 608px at the tightest fold, 736px at the
 * middle one and 928px at the deepest — one screen to one and a half, against ten
 * before. It is NOT claimed to always be one screen: sixteen bars at a size a
 * finger can hit cannot fit a 568px phone, and shrinking them until they did
 * would trade the index for the tap target.
 *
 * AND A PANEL THAT SWINGS ON THE WRONG EDGE. A concertina panel is hinged at its
 * crease, which is its TOP edge. Hinged in the middle it grows and shrinks as it
 * arrives instead of opening, and every measurement of it still reads as correct.
 */

/* Tokens ------------------------------------------------------------------- */
.uk-lipatan{
  /* Two faces of one card: the side turned to the light and the side turned away.
     They are the same stock, which is why the difference between them is small
     and the crease between them is what makes it legible. */
  --li-face:#F4EFE4;--li-shade:#E7E0D2;
  --li-ink:#232019;--li-muted:#5D564A;--li-tinta:#7C3B2B;--li-daun:#3E5142;
  --li-line:rgba(35,32,25,.18);
  /* The two halves of a fold. A crease is a lit hairline and a shaded one; which
     is on top is the only difference between a mountain and a valley. */
  --li-lit:rgba(255,255,255,.9);--li-dark:rgba(35,32,25,.26);
  --li-edge:#B3A88F;
  --li-radius:3px;--li-radius-sm:2px;--li-measure:60ch;
  --li-pad-i:18px;
  --li-crease-h:46px;   /* the height of a crease bar, and so of a folded panel */
  --li-swing:34deg;     /* how far a panel is still folded when it arrives */
  --li-hinge:1;         /* which way it swings; the parity class flips the sign */
  --li-gal-gap:10px;
  --li-display:"Lora",Georgia,Cambria,"Times New Roman",serif;
  --li-sans:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  /* min-height, because a FOLDED strip is shorter than the screen and the page
     behind it is white: measured, a white band under the folded index. */
  position:relative;min-height:100svh;background:var(--li-shade);color:var(--li-ink);
  font-family:var(--li-sans);font-size:16px;line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
[hidden]{display:none !important}
.uk-lipatan *,.uk-lipatan *::before,.uk-lipatan *::after{box-sizing:border-box}
.uk-lipatan 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-lipatan figure{margin:0}
.uk-lipatan h1,.uk-lipatan h2,.uk-lipatan h3,.uk-lipatan h4{font-family:var(--li-display);font-weight:600;line-height:1.24;margin:0}
.uk-lipatan p{margin:0}
/* :where() so this stays a DEFAULT. As ".uk-lipatan 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-lipatan :where(button){font-family:inherit;color:inherit}

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

/* THE STRIP ----------------------------------------------------------------
   One piece of card, folded. The panels are butted against each other with no gap
   and no rounding: a gap between them would say they are separate cards, which is
   the one thing this document is not.

   NO perspective here, deliberately. A perspective on the strip puts ONE vanishing
   point at the top of a sheet six thousand pixels long, so a panel far down it is
   projected from a viewpoint thousands of pixels above its own crease: it arrives
   stretched, displaced, and past the vanishing point it arrives UPSIDE DOWN. Each
   panel carries its own perspective() instead, which puts the vanishing point on
   that panel's own crease — the only place a reader's eye actually is. */
.uk-li-strip{position:relative;display:block;background:var(--li-shade)}

/* A PANEL. Its face and its crease and its swing all come from one class: the
   parity sets the face colour AND the sign of the swing, as data, so the two can
   never drift apart into two rules that disagree. */
.uk-li-panel{position:relative;display:block;padding:0 var(--li-pad-i);
  transform-origin:50% 0;scroll-margin-top:0}
.uk-li-panel.is-face{background:var(--li-face);--li-hinge:-1}
.uk-li-panel.is-shade{background:var(--li-shade);--li-hinge:1}
.uk-li-body{padding:22px 0 30px}
.uk-li-body > * + *{margin-top:12px}

/* THE CREASE. Two hairlines: one catching the light and one in shadow. Which is
   on top is the whole difference between a fold that comes towards you and one
   that goes away, so the pair is drawn in two tokens and never in one. */
.uk-li-crease-bar{position:relative;display:flex;align-items:center;gap:10px;
  width:calc(100% + var(--li-pad-i) * 2);margin-inline:calc(var(--li-pad-i) * -1);
  min-height:var(--li-crease-h);padding:0 var(--li-pad-i);
  border:0;background:transparent;color:inherit;cursor:pointer;text-align:left}
.uk-li-crease{position:absolute;left:0;right:0;top:0;height:2px;pointer-events:none}
.uk-li-crease::before,.uk-li-crease::after{content:"";position:absolute;left:0;right:0;height:1px}
/* A mountain fold: the ridge catches the light along its top and shades below. */
.uk-li-crease.is-mountain::before{top:0;background:var(--li-lit)}
.uk-li-crease.is-mountain::after{top:1px;background:var(--li-dark)}
/* A valley fold is the same two lines the other way up. */
.uk-li-crease.is-valley::before{top:0;background:var(--li-dark)}
.uk-li-crease.is-valley::after{top:1px;background:var(--li-lit)}
.uk-li-fold-no{flex:0 0 auto;font-family:var(--li-display);font-size:12px;letter-spacing:.2em;color:var(--li-muted);font-variant-numeric:tabular-nums}
.uk-li-crease-label{flex:1;min-width:0;font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--li-daun);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The strip zigzags, so the label changes sides at every fold — which is the
   parity made visible on a panel that has nothing else on it yet. */
.uk-li-panel.is-shade .uk-li-crease-bar{flex-direction:row-reverse;text-align:right}

/* GATE: the strip still folded, seen edge-on ------------------------------ */
.uk-li-gate{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:20px 0;overflow:hidden;
  background:var(--li-shade);color:var(--li-ink);transition:opacity .7s ease,visibility .7s ease}
.uk-li-gate.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.uk-li-gate-stage{position:relative;display:grid;place-items:center;width:100%}
/* The rest of the strip, still folded, seen from the side. Drawn WIDER than the
   panel in front of it — a stack no wider than what covers it reads as nothing. */
/* ABOVE and BELOW the panel, because that is where the rest of a concertina is.
   Laid at fixed offsets from the middle they fell INSIDE the panel's own height
   and only their ends showed, a pair of stubs at each margin — which reads as
   nothing. The stage is exactly as tall as the panel, so the edges hang off its
   top and bottom and the strip visibly continues past what you can read. */
.uk-li-edge{position:absolute;left:50%;top:0;bottom:0;z-index:0;
  width:min(100% - 16px,520px);transform:translateX(-50%);pointer-events:none}
.uk-li-edge i{position:absolute;left:0;right:0;height:9px;border-radius:var(--li-radius-sm);
  background:linear-gradient(180deg,var(--li-face) 0 45%,var(--li-edge) 45% 100%);
  box-shadow:0 1px 0 var(--li-dark)}
.uk-li-edge i:nth-child(1){top:-27px;transform:scaleX(.94)}
.uk-li-edge i:nth-child(2){top:-14px;transform:scaleX(.97)}
.uk-li-edge i:nth-child(3){bottom:-14px;transform:scaleX(.97)}
.uk-li-edge i:nth-child(4){bottom:-27px;transform:scaleX(.94)}
.uk-li-gate-panel{position:relative;z-index:2;display:grid;grid-template-rows:auto auto auto;overflow:hidden;
  width:min(100% - 40px,460px);border-radius:var(--li-radius);background:var(--li-face);
  /* A 46px blur at .34 measured out over the folded edges above and below it: the
     rest of the strip came up 0.7 dL* from the background, which is nothing. */
  box-shadow:0 12px 26px rgba(35,32,25,.2)}
.uk-li-gate-panel .uk-li-crease{position:relative;height:2px}
.uk-li-portrait{position:relative;height:min(40svh,272px);overflow:hidden;background:var(--li-shade)}
.uk-li-portrait img{width:100%;height:100%;object-fit:cover;object-position:var(--li-focus-mobile-x,50%) var(--li-focus-mobile-y,38%)}
.uk-li-gate-body{position:relative;padding:24px 22px 24px;text-align:center}
.uk-li-gate-names{margin-top:8px;font-size:clamp(26px,7.2vw,40px)}
.uk-li-gate-date{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:7px 16px;border:1px solid var(--li-line);border-radius:999px;font-size:12px;letter-spacing:.08em;color:var(--li-muted)}
.uk-li-couple-list{display:grid;gap:8px;margin-top:14px}
.uk-li-couple-list span{display:grid;gap:2px}
.uk-li-couple-list small{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--li-muted)}
.uk-li-couple-list strong{font-family:var(--li-display);font-size:18px;font-weight:600}
/* Its own line, always: the buttons here are inline-flex, so on a panel wide
   enough this came to rest beside the date chip instead of centred beneath it. */
.uk-li-gate-open{position:relative;display:flex;width:fit-content;margin:18px auto 0;padding:13px 26px;
  border-color:transparent;background:var(--li-daun);color:var(--li-face);font-size:14px}
/* WHAT THE GATE DOES: the strip opens out. The panel swings down off its crease
   and the folded edges spread — one gesture, the one the whole family is named
   for. */
.uk-li-gate.is-drawn .uk-li-gate-panel{animation:uk-li-open .9s cubic-bezier(.3,.9,.3,1) forwards}
@keyframes uk-li-open{
  from{transform:perspective(1200px) rotateX(0deg);opacity:1}
  to{transform:perspective(1200px) rotateX(-26deg) translateY(-8%);opacity:0}}

/* COVER -------------------------------------------------------------------
   The one screen with a photograph on it, so the one screen that carries a dark
   register of its own — face and ink together, so a palette can never leave the
   names the colour of the scrim behind them. */
.uk-li-cover{--li-face:#1F1C16;--li-shade:#181510;--li-ink:#F3EEE1;--li-muted:#B6AE9B;--li-daun:#AFC4A6;--li-tinta:#E0A481;
  --li-line:rgba(243,238,225,.24);--li-lit:rgba(255,255,255,.28);--li-dark:rgba(0,0,0,.5);--li-edge:#6A6252;
  position:relative;display:grid;min-height:100svh;background:var(--li-face);color:var(--li-ink)}
.uk-li-cover-media{position:absolute;inset:0;overflow:hidden}
.uk-li-cover-image{width:100%;height:100%;object-fit:cover;object-position:var(--li-focus-mobile-x,50%) var(--li-focus-mobile-y,38%)}
.uk-li-cover-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,28,22,.26) 0%,rgba(31,28,22,.78) 58%,#1F1C16 100%)}
.uk-li-cover-empty{position:absolute;inset:0;display:grid;place-items:center;background:#252118}
.uk-li-cover-empty-tone{position:absolute;inset:0;background:linear-gradient(160deg,rgba(243,238,225,.1),transparent 60%)}
.uk-li-cover-empty-mark{position:relative;font-family:var(--li-display);font-size:23px;letter-spacing:.2em;padding:10px 18px;border:1px solid var(--li-line);border-radius:var(--li-radius);color:#F3EEE1}
.uk-li-cover-panel{position:relative;align-self:end;padding:40px var(--li-pad-i) 56px;text-align:center}
.uk-li-cover-panel .uk-li-title{margin-top:8px;font-size:clamp(29px,8.4vw,52px)}
.uk-li-cover-panel > * + *{margin-top:10px}
.uk-li-cover-date{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:7px 16px;border:1px solid var(--li-line);border-radius:999px;font-size:12px;letter-spacing:.08em;color:var(--li-muted)}
.uk-li-mark{display:grid;place-items:center;width:62px;height:62px;margin:20px auto 0;
  border:1px solid var(--li-daun);border-radius:var(--li-radius);
  font-family:var(--li-display);font-size:14px;letter-spacing:.16em;color:var(--li-daun)}

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

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

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

/* GALLERY: printed across a crease -----------------------------------------
   The photographs were printed flat and the card folded afterwards, so ONE fold
   line runs across all of them at the same height. It is drawn over the pictures
   and it is the same pair of hairlines every other crease is made of. */
.uk-li-plate-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--li-muted)}
.uk-li-plate-tools div{display:flex;gap:8px}
.uk-li-plate-tools button{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--li-line);border-radius:var(--li-radius-sm);background:transparent;cursor:pointer}
.uk-li-plate{position:relative;display:flex;gap:var(--li-gal-gap);overflow-x:auto;padding-bottom:10px;
  scroll-snap-type:x mandatory;scrollbar-width:none}
.uk-li-plate::-webkit-scrollbar{display:none}
.uk-li-plate-crease{position:absolute;left:0;right:0;top:58%;z-index:2;height:2px;pointer-events:none}
.uk-li-plate-crease::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--li-lit)}
.uk-li-plate-crease::after{content:"";position:absolute;left:0;right:0;top:1px;height:1px;background:var(--li-dark)}
.uk-li-figure{position:relative;flex:0 0 auto;width:min(64vw,236px);scroll-snap-align:start}
.uk-li-figure img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--li-radius-sm);background:var(--li-shade)}
.uk-li-figure button{position:absolute;right:6px;top:6px;z-index:3;display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:50%;background:rgba(35,32,25,.78);color:#F3EEE1;cursor:pointer}

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

/* 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-li-feedback{--li-face:#F4EFE4;--li-shade:#E7E0D2;--li-ink:#232019;--li-muted:#5D564A;--li-daun:#3E5142;--li-tinta:#7C3B2B;
  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,81,66,.36);border-radius:var(--li-radius);background:#F4EFE4;color:#232019;font-size:14px}

/* CLOSING: the end of the strip -------------------------------------------- */
.uk-li-closing{position:relative;padding:60px var(--li-pad-i) 76px;
  background:var(--li-face);color:var(--li-ink);text-align:center;scroll-margin-top:0}
.uk-li-closing-body{width:min(100%,600px);margin-inline:auto}
.uk-li-closing-body > * + *{margin-top:14px}
.uk-li-closing .uk-li-title{font-size:clamp(24px,6vw,36px)}
.uk-li-closing .uk-li-copy{margin-inline:auto}
.uk-li-closing-share{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}

/* FOLDED UP: the index ---
   This block sits AFTER everything it overrides on purpose. Specificity already
   decides the cascade, so the order is for the reader and for the sweep that asks
   what a cover rule says: a state override written above the base rule is the
   first ".uk-li-cover" in the file, and "min-height:0 while folded" then reads as
   the cover's own answer.---------------------------------------------------
   Every panel gives up its body and keeps its crease, so the whole invitation
   becomes its own table of contents and lands on one screen. Nothing here is
   position:fixed; the document is simply folded. */
.uk-lipatan.is-folded .uk-li-body,
.uk-lipatan.is-folded .uk-li-cover-media,
.uk-lipatan.is-folded .uk-li-cover-panel > *:not(.uk-li-title),
.uk-lipatan.is-folded .uk-li-closing-body > *:not(.uk-li-title){display:none}
/* The cover and the closing fold to the SAME height as a crease, because they are
   part of the same strip. Left to their own padding they came to 261px of the
   905px folded strip — a third of the index spent on two bars — and the folded
   strip was 1.6 screens deep on a 320x568 phone instead of 1.3. */
.uk-lipatan.is-folded .uk-li-cover{min-height:0}
.uk-lipatan.is-folded .uk-li-cover-panel,
.uk-lipatan.is-folded .uk-li-closing{display:flex;align-items:center;
  min-height:var(--li-crease-h);padding:0 var(--li-pad-i);text-align:left}
.uk-lipatan.is-folded .uk-li-cover-panel .uk-li-title,
.uk-lipatan.is-folded .uk-li-closing .uk-li-title{margin:0;font-size:13px;letter-spacing:.06em}
/* margin-inline:auto centres a flex ITEM, so the closing's folded bar came up
   centred while every crease above it was ranged to an edge. */
.uk-lipatan.is-folded .uk-li-closing-body{width:auto;margin-inline:0}
/* A folded panel is its crease and nothing else. */
.uk-lipatan.is-folded .uk-li-panel{padding-block:0}
.uk-lipatan.is-folded .uk-li-crease-bar{min-height:var(--li-crease-h)}
/* And a folded strip never swings: the panels are shut, not arriving. */
.uk-lipatan.is-folded .uk-li-reveal{opacity:1;transform:none}

/* Controls rail, share dialog, lightbox, toast -----------------------------
   The rail carries the CONTROLS and the fold, which is a state of the document.
   Nothing that jumps to a place lives up here: every jump target in this template
   is a crease, in the strip. */
.uk-li-rail{position:fixed;right:14px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:24;display:grid;gap:8px;justify-items:center}
.uk-li-rail-toggle,.uk-li-rail-panel button{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(124,59,43,.5);border-radius:50%;background:#232019;color:#F3EEE1;cursor:pointer}
.uk-li-rail-panel{display:grid;gap:8px;justify-items:center}
.uk-li-rail-panel button[data-lipatan-fold][aria-pressed="true"]{background:#7C3B2B}
.uk-li-dialog,.uk-li-lightbox{position:fixed;inset:0;z-index:46;display:grid;place-items:center;padding:20px 16px;background:rgba(24,21,16,.88);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.uk-li-dialog.is-open,.uk-li-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 --li-ink and --li-daun are both light, so on this
   fixed card-coloured panel an eyebrow would measure near 1:1 — the same colour as
   the panel. So the panel re-declares the light register locally, and sets the
   colour that reads it. */
.uk-li-dialog-panel{--li-face:#F4EFE4;--li-shade:#E7E0D2;--li-ink:#232019;--li-muted:#5D564A;--li-daun:#3E5142;--li-tinta:#7C3B2B;--li-line:rgba(35,32,25,.18);
  width:min(100%,430px);padding:22px;border:1px solid var(--li-daun);border-radius:var(--li-radius);background:#F4EFE4;color:#232019}
.uk-li-dialog-panel h2{margin-top:6px;font-size:22px}
.uk-li-share-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:16px}
.uk-li-share-grid button{display:flex;align-items:center;gap:8px;min-height:40px;padding:11px 13px;border:1px solid rgba(35,32,25,.18);border-radius:var(--li-radius-sm);background:transparent;color:inherit;cursor:pointer;font-size:13px}
.uk-li-dialog-close{width:100%;margin-top:14px}
.uk-li-lightbox-panel{position:relative;width:min(100%,780px)}
.uk-li-lightbox-panel img{width:100%;max-height:76svh;object-fit:contain;border-radius:var(--li-radius);transition:opacity .2s ease}
.uk-li-lightbox.is-switching .uk-li-lightbox-panel img{opacity:0}
.uk-li-lightbox-counter{margin-top:12px;color:#F3EEE1;font-size:12px;letter-spacing:.16em;text-align:center}
.uk-li-lightbox-close,.uk-li-lightbox-prev,.uk-li-lightbox-next{position:absolute;display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;background:rgba(35,32,25,.86);color:#F3EEE1;cursor:pointer}
.uk-li-lightbox-close{top:-52px;right:0}
.uk-li-lightbox-prev{left:6px;top:50%;transform:translateY(-50%)}
.uk-li-lightbox-next{right:6px;top:50%;transform:translateY(-50%)}
.uk-li-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:#232019;color:#F3EEE1;font-size:13px;pointer-events:none;transition:opacity .3s ease,transform .3s ease}
.uk-li-toast.is-visible{opacity:1;transform:translate(-50%,0)}

/* MOTION: each panel swings open on its crease -----------------------------
   A concertina panel is hinged at its TOP edge, which is its crease. Hinged in
   the middle it grows and shrinks as it arrives instead of opening, and every
   rule about it still reads as correct. The DIRECTION is the parity again: a
   mountain opens towards you and a valley away — carried by --li-hinge, set on
   the same class that sets the face.

   ONE rule declares the swing, and it is written at two classes on purpose. The
   first version split it into .uk-li-panel.is-face.uk-li-reveal and its shade
   twin: three classes each, which OUTWEIGHED the two-class rule below that puts
   the panel back down. The swing never lifted. Every panel sat at its unopened
   angle for good, and the ones far down the strip sat there upside down. A rule
   that undoes another must never be the lighter of the two. */
.uk-li-reveal{opacity:0;transition:opacity .58s ease,transform .74s cubic-bezier(.22,.78,.2,1)}
.uk-li-panel.uk-li-reveal{transform-origin:50% 0;
  transform:perspective(900px) rotateX(calc(var(--li-swing) * var(--li-hinge)))}
.uk-li-cover.uk-li-reveal,.uk-li-closing.uk-li-reveal{transform:translateY(12px)}
.uk-li-reveal.is-visible{opacity:1;transform:none}
.uk-li-reveal-item{opacity:0;transform:translateY(10px);
  transition:opacity .56s ease .18s,transform .56s ease .18s}
.uk-li-reveal.is-visible .uk-li-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 two faces of the card, the press ink and
   the green it is set against. */
.uk-design-palette-template.uk-lipatan{--li-face:#F4EFE4;--li-shade:#E7E0D2;--li-ink:#232019;--li-muted:#5D564A;--li-tinta:#7C3B2B;--li-daun:#3E5142;--li-edge:#B3A88F;--li-line:rgba(35,32,25,.18);--li-lit:rgba(255,255,255,.9);--li-dark:rgba(35,32,25,.26)}
.uk-design-palette-warm.uk-lipatan{--li-face:#F7EDD9;--li-shade:#EADFC6;--li-ink:#2B2312;--li-muted:#655633;--li-tinta:#8F4A14;--li-daun:#4C5623;--li-edge:#BCAC85;--li-line:rgba(43,35,18,.18);--li-lit:rgba(255,255,255,.9);--li-dark:rgba(43,35,18,.26)}
.uk-design-palette-romantic.uk-lipatan{--li-face:#F9EBE6;--li-shade:#EEDCD5;--li-ink:#2B1D1B;--li-muted:#65493F;--li-tinta:#94383C;--li-daun:#7B3543;--li-edge:#C09F95;--li-line:rgba(43,29,27,.18);--li-lit:rgba(255,255,255,.9);--li-dark:rgba(43,29,27,.26)}
.uk-design-palette-sage.uk-lipatan{--li-face:#EEF1E6;--li-shade:#E0E5D5;--li-ink:#1D2418;--li-muted:#4C573C;--li-tinta:#6B4722;--li-daun:#2D5135;--li-edge:#A3AC90;--li-line:rgba(29,36,24,.18);--li-lit:rgba(255,255,255,.9);--li-dark:rgba(29,36,24,.26)}
/* Midnight is the same card read after dark: the two faces go to slate and the
   crease is the only thing catching light. Every token flips together, face and
   ink in one rule, so nothing is left the colour of what is behind it — and the
   lit half of a fold has to become light ON a dark card, which a fixed white
   rgba already is and a fixed dark one never could be. */
.uk-design-palette-midnight.uk-lipatan{--li-face:#232019;--li-shade:#1A1813;--li-ink:#F0EBDE;--li-muted:#ADA592;--li-tinta:#E0A481;--li-daun:#AEC5A4;--li-edge:#6A6252;--li-line:rgba(240,235,222,.2);--li-lit:rgba(255,250,235,.4);--li-dark:rgba(0,0,0,.6)}
.uk-design-palette-midnight .uk-li-count div{background:var(--li-face)}

.uk-design-type-classic .uk-li-title,.uk-design-type-classic .uk-li-gate-names{font-family:var(--li-display)}
.uk-design-type-modern .uk-li-title,.uk-design-type-modern .uk-li-gate-names{font-family:var(--li-sans);letter-spacing:.02em}
.uk-design-type-editorial .uk-li-title{font-size:clamp(25px,6.2vw,38px);letter-spacing:-.01em}
.uk-design-type-editorial .uk-li-cover-panel .uk-li-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-lipatan, so ".uk-design-surface-soft .uk-lipatan" 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 DEEP THE FOLDS ARE — the height of a crease, which is the
   height of a panel once the strip is folded, and so the size of the index
   itself. It is the signature, not a corner radius. */
.uk-design-surface-soft.uk-lipatan{--li-crease-h:58px;--li-pad-i:24px;--li-radius:6px;--li-radius-sm:4px}
.uk-design-surface-balanced.uk-lipatan{--li-crease-h:46px;--li-pad-i:18px;--li-radius:3px;--li-radius-sm:2px}
.uk-design-surface-sharp.uk-lipatan{--li-crease-h:38px;--li-pad-i:12px;--li-radius:0px;--li-radius-sm:0px}

/* The gallery presets are descendants of the root, which is where the design
   class is printed, so these selectors do match. The crease runs across the
   photographs in every one of them; what changes is how much card each takes. */
.uk-design-gallery-grid .uk-li-figure{width:min(48vw,176px)}
.uk-design-gallery-filmstrip .uk-li-figure{width:min(64vw,236px)}
.uk-design-gallery-editorial .uk-li-figure{width:min(84vw,330px)}
.uk-design-gallery-editorial .uk-li-figure img{aspect-ratio:3/2}

.uk-design-motion-soft.uk-lipatan{--li-swing:26deg}
.uk-design-motion-cinematic.uk-lipatan{--li-swing:46deg}
.uk-design-motion-minimal.uk-lipatan{--li-swing:0deg}
/* Stillness has to lay the strip FLAT. A panel left at its unopened angle is a
   card that never finished folding out, which on a machine that asked for no
   motion is a page stuck mid-gesture. */
.uk-design-motion-minimal .uk-li-reveal,
.uk-design-motion-minimal .uk-li-panel.uk-li-reveal,
.uk-design-motion-minimal .uk-li-reveal-item{opacity:1;transform:none;transition:none}
.uk-design-motion-minimal .uk-li-gate.is-drawn .uk-li-gate-panel{animation:none}

/* Wider viewports ---------------------------------------------------------- */
@media(min-width:760px){
.uk-lipatan{font-size:17px;--li-pad-i:32px;--li-crease-h:52px}
.uk-li-body{padding:28px 0 36px}
.uk-li-portrait{height:min(38svh,296px)}
.uk-li-portrait img,.uk-li-cover-media .uk-li-cover-image{object-position:var(--li-focus-desktop-x,50%) var(--li-focus-desktop-y,42%)}
.uk-li-cover-panel{padding:56px var(--li-pad-i) 74px}
.uk-li-gate-panel{width:min(100% - 48px,540px)}
.uk-li-edge{width:min(100% - 24px,600px)}
.uk-li-closing{padding:84px var(--li-pad-i) 100px}
.uk-li-people{gap:22px 26px;grid-template-columns:repeat(2,minmax(0,1fr))}
/* An odd last person takes the row and is centred, so a pair never ends with
   somebody hanging in the left column — capped, because one portrait stretched
   across a desktop panel is a banner. */
.uk-li-people>*:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:min(100%,400px)}
.uk-li-portrait-round{width:88px;height:88px}
}
@media(min-width:1100px){
/* The strip is capped and centred so a line of prose never runs the width of a
   desktop window. The cap is on the STRIP, so the creases run the full width of
   the card and not of the screen. */
.uk-li-strip{width:min(100%,940px);margin-inline:auto}
.uk-li-closing{padding:100px var(--li-pad-i) 116px}
}

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

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

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