/* Pigura — Romance Flagship 1.0.0
 * The invitation as a wall of MOUNTED PRINTS. A photographic print is never
 * pinned up bare: it is cut into a mount — a card with a window cut in it — and
 * the words belong on the mount, under the window, in the deep bottom margin
 * every mount has. That deep bottom margin is not a flourish. A mount with even
 * margins reads as a box, and the whole point of a mount is that the print sits
 * high in it.
 *
 * ONE DECISION per section: is this print LANDSCAPE or PORTRAIT? Declared once in
 * the blade, it decides the shape of the window, how wide the caption is set,
 * where the caption ranges, and how much wall the print is given. Written as four
 * decisions they part company the first time a section is edited, and each one
 * still reads as correct on its own.
 *
 * AND THE WALL IS HUNG, NOT STACKED. How much air sits between two prints depends
 * on the PAIR they make: two portraits need more room between them than two
 * landscapes. That is the same decision, read once more, and it is what stops a
 * column of cards from reading as a column of cards.
 *
 * Things here that are easy to get wrong and invisible in a stylesheet read.
 *
 *   A MOUNT WITH EVEN MARGINS. Measured, not styled: the bottom margin has to be
 *   deeper than the top, or the card stops being a mount.
 *
 *   A WINDOW WITH NOTHING IN IT. Most sections of an invitation have no picture
 *   of their own. A window left open over an empty box is a grey hole; a print
 *   with nothing to show has its window CLOSED, and the words move up into it.
 *
 *   AND A WALL COLOUR THE SAME AS THE MOUNT. The mount is white card and the wall
 *   is not. Measured in perceptual lightness, because the two are close by design
 *   and that is exactly how the difference gets lost.
 */

/* Tokens ------------------------------------------------------------------- */
.uk-pigura{
  /* The wall, and the mount board hung on it. They are close on purpose — a
     gallery wall is not a colour, it is an absence — so the difference between
     them is measured rather than eyeballed. */
  --pi-wall:#EDEAE4;
  --pi-mount:#FCFBF8;
  --pi-ink:#1D1B17;
  --pi-soft:#585346;
  --pi-mark:#655D4D;     /* the pencil line on the mount: plate number, format */
  --pi-accent:#7E4B34;
  --pi-line:rgba(29,27,23,.16);
  --pi-deep:rgba(29,27,23,.32);
  --pi-glass:#DCD6CB;    /* what shows through a window with nothing behind it */
  --pi-radius:2px;--pi-radius-sm:1px;--pi-measure:46ch;

  /* THE ONE PLACE THESE SIZES ARE DECIDED. The surface preset sets the unit and
     the viewport sets the step, and the size is their product — so neither ever
     overrules the other. Written as two rules both declaring --pi-air, the preset
     (two classes) silently beats the media query (one), and the wider screen
     never widens. */
  --pi-step:1;
  --pi-air-u:30px;       /* the wall between two prints */
  --pi-mount-x-u:18px;   /* the mount, sides */
  --pi-mount-t-u:18px;   /* the mount, top */
  --pi-mount-b-u:28px;   /* the mount, bottom — always the deepest */
  --pi-pad-u:14px;
  --pi-air:calc(var(--pi-air-u) * var(--pi-step));
  --pi-mount-x:calc(var(--pi-mount-x-u) * var(--pi-step));
  --pi-pad:calc(var(--pi-pad-u) * var(--pi-step));
  --pi-fmt-t:1;--pi-fmt-b:1;   /* the format factor; the print sets its own */
  --pi-settle:16px;
  --pi-gal-gap:10px;
  --pi-display:"Lora",Georgia,Cambria,"Times New Roman",serif;
  --pi-sans:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  position:relative;min-height:100svh;background:var(--pi-wall);color:var(--pi-ink);
  /* the wall ends above the label, so the last print is never under it */
  padding-bottom:calc(52px + env(safe-area-inset-bottom));
  font-family:var(--pi-sans);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
[hidden]{display:none !important}
.uk-pigura *,.uk-pigura *::before,.uk-pigura *::after{box-sizing:border-box}
.uk-pigura 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-pigura figure{margin:0}
.uk-pigura h1,.uk-pigura h2,.uk-pigura h3,.uk-pigura h4{font-family:var(--pi-display);font-weight:600;line-height:1.24;margin:0}
.uk-pigura p{margin:0}
/* :where() so this stays a DEFAULT. As ".uk-pigura 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-pigura :where(button){font-family:inherit;color:inherit}

/* Shared type and ornament ------------------------------------------------- */
.uk-pi-eyebrow{font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--pi-mark)}
.uk-pi-preline{white-space:pre-line}
.uk-pi-signature{font-family:var(--pi-display);font-size:22px;color:var(--pi-ink)}
.uk-pi-quote{max-width:var(--pi-measure);padding:14px 18px;border-left:2px solid var(--pi-mark);color:var(--pi-ink);font-family:var(--pi-display);font-size:17px;font-style:italic}
.uk-pi-quote cite{display:block;margin-top:10px;font-family:var(--pi-sans);font-size:12px;font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--pi-soft)}
.uk-pi-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(--pi-soft)}
.uk-pi-occasions span+span::before{content:"·";padding-right:6px;font-size:14px;color:var(--pi-accent)}
.uk-pi-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:11px 18px;border:1px solid var(--pi-mark);border-radius:var(--pi-radius);background:transparent;color:var(--pi-ink);font-size:13px;font-weight:600;letter-spacing:.05em;text-decoration:none;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease}
.uk-pi-button:hover{transform:translateY(-1px);box-shadow:inset 0 -2px 0 var(--pi-accent)}
/* The label is --pi-wall, not a fixed cream, and the fill is --pi-mark, 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-pi-button.is-solid{border-color:transparent;background:var(--pi-mark);color:var(--pi-wall)}
.uk-pi-button:focus-visible,.uk-pigura button:focus-visible,.uk-pigura a:focus-visible{outline:2px solid var(--pi-accent);outline-offset:3px}

/* THE WALL --------------------------------------------------------------- */
/* minmax(0,1fr), not the implicit auto track: an auto column is sized by
   MAX-CONTENT, and measured, every mount came out 1,764px wide inside a 390px
   phone. The page did not even scroll sideways — the mounts simply ran off it. */
.uk-pi-wall{position:relative;display:grid;grid-template-columns:minmax(0,1fr);
  gap:0;padding:var(--pi-air) var(--pi-pad);background:var(--pi-wall)}

/* A PRINT IN ITS MOUNT. The mount is the card; the window is the opening cut in
   it. The bottom margin is deeper than the top — that IS a mount, and a card with
   even margins is a box. */
/* THE MOUNT'S SIZES ARE WORKED OUT HERE, on the print, and not on the root.
   A calc() declared on the root is substituted there once: redeclaring one of its
   inputs further down the tree never reaches it, and the declaration reads as
   correct while doing nothing. Measured: both formats came back with the same
   26px top margin. So the print reads three authorities and multiplies them —
   the preset's UNIT (inherited), the viewport's STEP (inherited), and the
   format's FACTOR (set here) — and none of the three can overrule another. */
.uk-pi-mount,.uk-pi-print{position:relative;display:block;background:var(--pi-mount);
  --pi-mount-t:calc(var(--pi-mount-t-u) * var(--pi-step) * var(--pi-fmt-t));
  --pi-mount-b:calc(var(--pi-mount-b-u) * var(--pi-step) * var(--pi-fmt-b));
  padding:var(--pi-mount-t) var(--pi-mount-x) var(--pi-mount-b);
  border-radius:var(--pi-radius);
  box-shadow:0 1px 0 rgba(29,27,23,.09), 0 10px 22px rgba(29,27,23,.07)}

/* ---- THE ONE DECISION: landscape or portrait. ----------------------------
   A wall of mounts is not a wall of pictures: most of what an invitation has to
   say has no picture of its own, and a window cut over nothing is a hole. Those
   are BLIND mounts, which is what a mount with no print in it is called. The
   format still decides everything about them.

   A LANDSCAPE mount: the caption ranged left, the measure set full, the mount
   cut shallow, and less wall — a landscape reads fast. */
.uk-pi-print.is-landscape .uk-pi-body{text-align:left}
.uk-pi-print.is-landscape{--pi-fmt-t:.86;--pi-fmt-b:.84}

/* A PORTRAIT print: a tall window, the caption centred under it, the measure
   pulled in, and more wall. */
/* A PORTRAIT mount: the caption centred, the measure pulled in, the mount cut
   deep, and more wall around it. */
.uk-pi-print.is-portrait .uk-pi-body{text-align:center}
.uk-pi-print.is-portrait .uk-pi-copy,
.uk-pi-print.is-portrait .uk-pi-lead{margin-inline:auto}
.uk-pi-print.is-portrait{--pi-fmt-t:1.22;--pi-fmt-b:1.18}
/* A list of facts is read, not admired, and so is a row with a portrait beside
   it: both stay ranged left on either format. Centring everything inside a
   portrait mount leaves the names floating away from the faces next to them. */
.uk-pi-print .uk-pi-detail,
.uk-pi-print .uk-pi-rows,
.uk-pi-print .uk-pi-people,
.uk-pi-print .uk-pi-contacts,
.uk-pi-print .uk-pi-faq,
.uk-pi-print .uk-pi-streams,
.uk-pi-print .uk-pi-events{text-align:left}
.uk-pi-print.is-portrait .uk-pi-detail{margin-inline:auto}

/* ---- THE HANG. The air ABOVE a print is the pair it makes with the one above
   it: two portraits need more room between them than two landscapes. Same
   decision, read once more — and it is what stops a column of mounts from
   reading as a column of cards. */
.uk-pi-print.is-first{margin-top:0}
.uk-pi-print.is-tight-hang{margin-top:var(--pi-air)}
.uk-pi-print.is-mixed-hang{margin-top:calc(var(--pi-air) * 1.45)}
.uk-pi-print.is-wide-hang{margin-top:calc(var(--pi-air) * 1.9)}

/* THE PENCIL LINE on the mount: plate number and format. Never in the ink of the
   words — it is the printer's note, not the couple's. */
.uk-pi-plate{margin:0 0 6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--pi-mark)}

.uk-pi-body{margin-top:14px;min-width:0}
.uk-pi-body > * + *{margin-top:9px}
.uk-pi-title{font-family:var(--pi-display);color:var(--pi-ink);
  font-size:clamp(20px,5vw,27px);line-height:1.22;text-wrap:balance}
.uk-pi-title.is-sm{font-size:clamp(17px,3.4vw,20px)}
.uk-pi-copy,.uk-pi-lead{max-width:var(--pi-measure);color:var(--pi-soft)}
.uk-pi-lead{font-family:var(--pi-display);font-size:19px;color:var(--pi-ink)}
.uk-pi-copy{font-size:15px}

/* The practical detail, set as a list: these are the lines a guest comes back
   for, and a paragraph is the wrong shape for them. */
.uk-pi-detail{max-width:var(--pi-measure);margin-top:13px;padding-left:12px;
  border-left:2px solid var(--pi-line);font-size:15px}
.uk-pi-detail dt{margin:0 0 3px;font-size:10px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--pi-mark)}
.uk-pi-detail dd{margin:0 0 10px;color:var(--pi-ink)}
.uk-pi-detail dd:last-child{margin-bottom:0}
.uk-pi-detail dd strong{display:block;font-weight:600}
.uk-pi-detail dd span{display:block;color:var(--pi-soft);font-size:14px}
.uk-pi-detail .uk-pi-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}

/* THE WALL LABEL. The one thing in this template that follows the reader,
   because a list of works you have to walk back to is a list nobody reads. It
   names the print in front of them first and offers the list second.

   It is deliberately NOT the shape fourteen releases share: that one is pinned
   to a SIDE edge, centred vertically, and laid out as a column. This runs the
   full width of the foot and is a row. */
.uk-pi-label{position:fixed;left:0;right:0;bottom:0;z-index:26;
  background:var(--pi-mount);border-top:1px solid var(--pi-line);
  box-shadow:0 -6px 18px rgba(29,27,23,.08);
  padding-bottom:env(safe-area-inset-bottom)}
.uk-pi-label-bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;column-gap:10px;width:100%;min-height:48px;
  padding:0 var(--pi-pad);border:0;background:transparent;color:var(--pi-ink);
  cursor:pointer;text-align:left}
.uk-pi-label-bar b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--pi-mark)}
.uk-pi-label-bar span{min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:14px}
.uk-pi-label-bar em{font-style:normal;font-size:10px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--pi-mark)}
.uk-pi-label-bar[aria-expanded="true"] em{color:var(--pi-accent)}

/* The list of works opens upward, inside the label, and scrolls inside itself:
   a list as long as the invitation would otherwise cover the invitation. */
.uk-pi-works{list-style:none;display:grid;gap:0;margin:0;padding:0 var(--pi-pad) 8px;
  max-height:min(52svh,420px);overflow-y:auto;overscroll-behavior:contain;
  border-top:1px solid var(--pi-line)}
.uk-pi-works li + li{border-top:1px dotted var(--pi-line)}
.uk-pi-works a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  column-gap:12px;align-items:baseline;min-height:44px;padding:9px 0;
  color:var(--pi-ink);text-decoration:none}
.uk-pi-works a.is-active b,.uk-pi-works a.is-active span{color:var(--pi-accent)}
.uk-pi-works b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;font-weight:600;color:var(--pi-mark)}
.uk-pi-works span{font-size:14px}
.uk-pi-works em{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-style:normal;font-size:10px;letter-spacing:.12em;color:var(--pi-mark)}

/* THE PICTURE RAIL the gate's print hangs from. */
.uk-pi-rail-line{position:absolute;left:50%;top:-6vh;z-index:0;
  width:min(100vw,720px);transform:translateX(-50%);pointer-events:none}
.uk-pi-rail-line i{position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--pi-deep);opacity:.35}
.uk-pi-rail-line i:last-child{left:50%;top:2px;width:1px;height:6vh;
  margin-left:-.5px;right:auto;opacity:.3}

/* GATE: the strip still folded, seen edge-on ------------------------------ */
.uk-pi-gate{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:20px 0;overflow:hidden;
  background:var(--pi-glass);color:var(--pi-ink);transition:opacity .7s ease,visibility .7s ease}
.uk-pi-gate.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.uk-pi-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. */
/* THE MARKER RIBBON, lying at the middle of the shut book. It is the one thing
   on the gate that says where this invitation opens, so it has to read on its
   own: a band of the binding colour crossing the whole panel, with its tail
   hanging PAST the foot. A ribbon no longer than the panel is a stripe. */
.uk-pi-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(--pi-radius);background:var(--pi-mount);
  /* 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-pi-portrait{position:relative;height:min(40svh,272px);overflow:hidden;background:var(--pi-glass)}
.uk-pi-portrait img{width:100%;height:100%;object-fit:cover;object-position:var(--pi-focus-mobile-x,50%) var(--pi-focus-mobile-y,38%)}
.uk-pi-gate-body{position:relative;padding:24px 22px 24px;text-align:center}
.uk-pi-gate-stage{padding-right:0}
.uk-pi-gate-names{margin-top:8px;font-size:clamp(26px,7.2vw,40px)}
.uk-pi-gate-date{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:7px 16px;border:1px solid var(--pi-line);border-radius:999px;font-size:12px;letter-spacing:.08em;color:var(--pi-soft)}
.uk-pi-couple-list{display:grid;gap:8px;margin-top:14px}
.uk-pi-couple-list span{display:grid;gap:2px}
.uk-pi-couple-list small{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--pi-soft)}
.uk-pi-couple-list strong{font-family:var(--pi-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-pi-gate-open{position:relative;display:flex;width:fit-content;margin:18px auto 0;padding:13px 26px;
  border-color:transparent;background:var(--pi-mark);color:var(--pi-wall);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-pi-gate.is-drawn .uk-pi-gate-panel{animation:uk-pi-open .9s cubic-bezier(.3,.9,.3,1) forwards}
@keyframes uk-pi-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-pi-cover{--pi-wall:#1C1A16;--pi-glass:#141210;--pi-ink:#F2EEE3;--pi-soft:#B8B09C;--pi-mark:#9E9683;--pi-accent:#E4A87C;
  --pi-line:rgba(243,238,225,.24);--pi-deep:rgba(0,0,0,.5);--pi-edge:#6A6153;
  position:relative;display:grid;min-height:100svh;background:var(--pi-wall);color:var(--pi-ink)}
.uk-pi-cover-media{position:absolute;inset:0;overflow:hidden}
.uk-pi-cover-image{width:100%;height:100%;object-fit:cover;object-position:var(--pi-focus-mobile-x,50%) var(--pi-focus-mobile-y,38%)}
.uk-pi-cover-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,28,22,.26) 0%,rgba(31,28,22,.78) 58%,#1C1A16 100%)}
.uk-pi-cover-empty{position:absolute;inset:0;display:grid;place-items:center;background:#262320}
.uk-pi-cover-empty-tone{position:absolute;inset:0;background:linear-gradient(160deg,rgba(243,238,225,.1),transparent 60%)}
.uk-pi-cover-empty-mark{position:relative;font-family:var(--pi-display);font-size:23px;letter-spacing:.2em;padding:10px 18px;border:1px solid var(--pi-line);border-radius:var(--pi-radius);color:#F2EEE3}
.uk-pi-cover-panel{position:relative;align-self:end;padding:40px var(--pi-pad) 56px;text-align:center}
.uk-pi-cover-panel .uk-pi-title{margin-top:8px;font-size:clamp(29px,8.4vw,52px)}
.uk-pi-cover-panel > * + *{margin-top:10px}
.uk-pi-cover-date{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:7px 16px;border:1px solid var(--pi-line);border-radius:999px;font-size:12px;letter-spacing:.08em;color:var(--pi-soft)}
.uk-pi-mark{display:grid;place-items:center;width:62px;height:62px;margin:20px auto 0;
  border:1px solid var(--pi-mark);border-radius:var(--pi-radius);
  font-family:var(--pi-display);font-size:14px;letter-spacing:.16em;color:var(--pi-mark)}

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

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

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

/* 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-pi-plate-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--pi-soft)}
.uk-pi-plate-tools div{display:flex;gap:8px}
.uk-pi-plate-tools button{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--pi-line);border-radius:var(--pi-radius-sm);background:transparent;cursor:pointer}
.uk-pi-plate{position:relative;display:flex;gap:var(--pi-gal-gap);overflow-x:auto;padding-bottom:10px;
  scroll-snap-type:x mandatory;scrollbar-width:none}
.uk-pi-plate::-webkit-scrollbar{display:none}
/* A PLATE NUMBER. The photographs in a book are plates, and a plate is numbered
   from the leaf it is bound into: this leaf's own signed folio, then the plate's
   place on it. The gallery is not a separate world with a numbering of its own. */
.uk-pi-plate-no{position:absolute;left:0;bottom:6px;z-index:3;padding:3px 7px;
  border-radius:var(--pi-radius-sm);background:var(--pi-wall);color:var(--pi-soft);
  font-family:var(--pi-display);font-size:11px;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;box-shadow:0 0 0 1px var(--pi-line)}
/* THE GALLERY is a wall inside the wall: every photograph is mounted the same
   way the prints are, window and all. */
.uk-pi-figure{position:relative;flex:0 0 auto;width:min(64vw,236px);scroll-snap-align:start;
  background:var(--pi-mount);padding:9px 9px 22px;border-radius:var(--pi-radius);
  box-shadow:0 1px 0 rgba(29,27,23,.09), 0 6px 14px rgba(29,27,23,.06)}
.uk-pi-figure img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--pi-radius-sm);background:var(--pi-glass);box-shadow:inset 0 0 0 1px var(--pi-line)}
.uk-pi-figure button{position:absolute;right:13px;top:13px;z-index:3;display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:50%;background:rgba(35,32,25,.78);color:#F2EEE3;cursor:pointer}

/* Gift, contacts, FAQ ------------------------------------------------------ */
.uk-pi-tabs{display:flex;flex-wrap:wrap;gap:8px}
.uk-pi-tabs button{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:9px 15px;border:1px solid var(--pi-line);border-radius:var(--pi-radius);background:transparent;font-size:12px;font-weight:600;cursor:pointer}
.uk-pi-tabs button.is-active{border-color:var(--pi-accent);box-shadow:inset 0 0 0 1px var(--pi-accent)}
.uk-pi-gift-panel{display:block}
.uk-pi-account strong{display:block;font-family:var(--pi-display);font-size:20px;letter-spacing:.05em;font-variant-numeric:tabular-nums}
.uk-pi-account p{font-size:13px;color:var(--pi-soft)}
.uk-pi-contacts{display:grid}
.uk-pi-contact strong{display:block;font-size:15px}
.uk-pi-contact p{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--pi-soft)}
.uk-pi-faq{display:grid;gap:0}
.uk-pi-faq-item{padding:12px 0}
.uk-pi-faq-item + .uk-pi-faq-item{border-top:1px dotted var(--pi-line)}
.uk-pi-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-pi-faq-item summary::-webkit-details-marker{display:none}
.uk-pi-faq-item p{margin-top:8px;color:var(--pi-soft);font-size:15px}
.uk-pi-hashtags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.uk-pi-hashtags button{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:6px 13px;border:1px solid var(--pi-line);border-radius:999px;background:transparent;font-size:12px;cursor:pointer}
.uk-pi-engagement .uk-pi-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-pi-feedback{--pi-wall:#FCFBF8;--pi-glass:#DCD6CB;--pi-ink:#1D1B17;--pi-soft:#585346;--pi-mark:#655D4D;--pi-accent:#7E4B34;
  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(--pi-radius);background:#FCFBF8;color:#1D1B17;font-size:14px}

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

/* 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-pi-rail{position:fixed;right:14px;bottom:calc(62px + env(safe-area-inset-bottom));z-index:24;display:grid;gap:8px;justify-items:center}
.uk-pi-rail-toggle,.uk-pi-rail-panel button{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(124,59,43,.5);border-radius:50%;background:#1D1B17;color:#F2EEE3;cursor:pointer}
.uk-pi-rail-panel{display:grid;gap:8px;justify-items:center}
.uk-pi-rail-panel button[data-lipatan-fold][aria-pressed="true"]{background:#7E4B34}
.uk-pi-dialog,.uk-pi-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-pi-dialog.is-open,.uk-pi-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 --pi-ink and --pi-mark 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-pi-dialog-panel{--pi-wall:#FCFBF8;--pi-glass:#DCD6CB;--pi-ink:#1D1B17;--pi-soft:#585346;--pi-mark:#655D4D;--pi-accent:#7E4B34;--pi-line:rgba(35,32,25,.18);
  width:min(100%,430px);padding:22px;border:1px solid var(--pi-mark);border-radius:var(--pi-radius);background:#FCFBF8;color:#1D1B17}
.uk-pi-dialog-panel h2{margin-top:6px;font-size:22px}
.uk-pi-share-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:16px}
.uk-pi-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(--pi-radius-sm);background:transparent;color:inherit;cursor:pointer;font-size:13px}
.uk-pi-dialog-close{width:100%;margin-top:14px}
.uk-pi-lightbox-panel{position:relative;width:min(100%,780px)}
.uk-pi-lightbox-panel img{width:100%;max-height:76svh;object-fit:contain;border-radius:var(--pi-radius);transition:opacity .2s ease}
.uk-pi-lightbox.is-switching .uk-pi-lightbox-panel img{opacity:0}
.uk-pi-lightbox-counter{margin-top:12px;color:#F2EEE3;font-size:12px;letter-spacing:.16em;text-align:center}
.uk-pi-lightbox-close,.uk-pi-lightbox-prev,.uk-pi-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:#F2EEE3;cursor:pointer}
.uk-pi-lightbox-close{top:-52px;right:0}
.uk-pi-lightbox-prev{left:6px;top:50%;transform:translateY(-50%)}
.uk-pi-lightbox-next{right:6px;top:50%;transform:translateY(-50%)}
.uk-pi-toast{position:fixed;left:50%;bottom:calc(68px + env(safe-area-inset-bottom));z-index:48;transform:translate(-50%,14px);opacity:0;padding:11px 18px;border-radius:999px;background:#1D1B17;color:#F2EEE3;font-size:13px;pointer-events:none;transition:opacity .3s ease,transform .3s ease}
.uk-pi-toast.is-visible{opacity:1;transform:translate(-50%,0)}

/* MOTION: every leaf settles TOWARDS the middle -----------------------------
   A leaf above the middle arrives from higher up and comes down to its place; a
   leaf below arrives from lower down and comes up. Both move towards the middle,
   which is the same fact the lean and the gauge and the ranging are reading.

   ONE rule declares the settle, at TWO classes, with the direction as a SIGN.
   Split into one rule per side it would be three classes each, and the two-class
   rule below that puts a leaf back would lose — so every leaf would stand off its
   place for good, with each rule still reading as correct. That is not a guess:
   the release before this one shipped exactly that fault. */
.uk-pi-reveal{opacity:0;transition:opacity .58s ease,transform .7s cubic-bezier(.22,.78,.2,1)}
.uk-pi-print.uk-pi-reveal{transform:translateY(var(--pi-settle))}
.uk-pi-cover.uk-pi-reveal,.uk-pi-closing.uk-pi-reveal{transform:translateY(12px)}
.uk-pi-reveal.is-visible{opacity:1;transform:none}
.uk-pi-reveal-item{opacity:0;transform:translateY(10px);
  transition:opacity .56s ease .18s,transform .56s ease .18s}
.uk-pi-reveal.is-visible .uk-pi-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-pigura{--pi-wall:#EDEAE4;--pi-mount:#FCFBF8;--pi-glass:#DCD6CB;--pi-ink:#1D1B17;--pi-soft:#585346;--pi-accent:#7E4B34;--pi-mark:#655D4D;--pi-line:rgba(29,27,23,.16);--pi-deep:rgba(29,27,23,.32)}
.uk-design-palette-warm.uk-pigura{--pi-wall:#EFE7D6;--pi-mount:#FDFAF1;--pi-glass:#DFD3B9;--pi-ink:#241E11;--pi-soft:#6B5C34;--pi-accent:#8D5417;--pi-mark:#68603B;--pi-line:rgba(36,30,17,.16);--pi-deep:rgba(36,30,17,.32)}
.uk-design-palette-romantic.uk-pigura{--pi-wall:#F1E6E2;--pi-mount:#FDF8F6;--pi-glass:#E3D0C9;--pi-ink:#2A1C1A;--pi-soft:#6C4A41;--pi-accent:#8B3A3F;--pi-mark:#6E534D;--pi-line:rgba(42,28,26,.16);--pi-deep:rgba(42,28,26,.32)}
.uk-design-palette-sage.uk-pigura{--pi-wall:#E7ECE2;--pi-mount:#FAFCF7;--pi-glass:#D3DCC8;--pi-ink:#1A2215;--pi-soft:#4E5A3D;--pi-accent:#2C5B43;--pi-mark:#586049;--pi-line:rgba(26,34,21,.16);--pi-deep:rgba(26,34,21,.32)}
/* 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-pigura{--pi-wall:#1C1A16;--pi-mount:#262320;--pi-glass:#38342D;--pi-ink:#F2EEE3;--pi-soft:#B8B09C;--pi-accent:#E4A87C;--pi-mark:#9E9683;--pi-line:rgba(242,238,227,.18);--pi-deep:rgba(0,0,0,.55)}
.uk-design-palette-midnight .uk-pi-count div{background:var(--pi-wall)}

.uk-design-type-classic .uk-pi-title,.uk-design-type-classic .uk-pi-gate-names{font-family:var(--pi-display)}
.uk-design-type-modern .uk-pi-title,.uk-design-type-modern .uk-pi-gate-names{font-family:var(--pi-sans);letter-spacing:.02em}
.uk-design-type-editorial .uk-pi-title{font-size:clamp(25px,6.2vw,38px);letter-spacing:-.01em}
.uk-design-type-editorial .uk-pi-cover-panel .uk-pi-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-pigura, so ".uk-design-surface-soft .uk-pigura" 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-pigura{--pi-air-u:44px;--pi-mount-x-u:26px;--pi-mount-t-u:26px;--pi-mount-b-u:42px;--pi-pad-u:20px;--pi-radius:4px;--pi-radius-sm:2px}
.uk-design-surface-balanced.uk-pigura{--pi-air-u:30px;--pi-mount-x-u:18px;--pi-mount-t-u:18px;--pi-mount-b-u:28px;--pi-pad-u:14px;--pi-radius:2px;--pi-radius-sm:1px}
.uk-design-surface-sharp.uk-pigura{--pi-air-u:20px;--pi-mount-x-u:12px;--pi-mount-t-u:12px;--pi-mount-b-u:19px;--pi-pad-u:10px;--pi-radius:0px;--pi-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-pi-figure{width:min(48vw,176px)}
.uk-design-gallery-filmstrip .uk-pi-figure{width:min(64vw,236px)}
.uk-design-gallery-editorial .uk-pi-figure{width:min(84vw,330px)}
.uk-design-gallery-editorial .uk-pi-figure img{aspect-ratio:3/2}

.uk-design-motion-soft.uk-pigura{--pi-settle:16px}
.uk-design-motion-cinematic.uk-pigura{--pi-settle:34px}
.uk-design-motion-minimal.uk-pigura{--pi-settle:0px}
/* 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-pi-reveal,
.uk-design-motion-minimal .uk-pi-print.uk-pi-reveal,
.uk-design-motion-minimal .uk-pi-reveal-item{opacity:1;transform:none;transition:none}
.uk-design-motion-minimal .uk-pi-gate.is-drawn .uk-pi-gate-panel{animation:none}

/* Wider viewports ---------------------------------------------------------- */
@media(min-width:760px){
.uk-pigura{font-size:17px;--pi-step:1.5}
.uk-pi-body{padding:28px 0 36px}
.uk-pi-portrait{height:min(38svh,296px)}
.uk-pi-portrait img,.uk-pi-cover-media .uk-pi-cover-image{object-position:var(--pi-focus-desktop-x,50%) var(--pi-focus-desktop-y,42%)}
.uk-pi-cover-panel{padding:56px var(--pi-pad) 74px}
.uk-pi-gate-panel{width:min(100% - 48px,540px)}
.uk-pi-closing{padding:84px var(--pi-pad) 100px}
.uk-pi-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-pi-people>*:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:min(100%,400px)}
.uk-pi-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-pi-wall{width:min(100%,940px);margin-inline:auto}
.uk-pi-closing{padding:100px var(--pi-pad) 116px}
}

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

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