/* Panggih — Romance Flagship 1.0.0
 * A wedding invitation that CHANGES SHAPE partway through, and the change is
 * the story.
 *
 * Every one of the thirty-two families before this one keeps the same column
 * count from the first line to the last. Even the one built on two parallel
 * columns runs them parallel the whole way down — they never meet. Here the
 * sections before the meeting run as two separate tracks, offset to either side
 * of a seam down the middle; at the panggih the two arrive together; and
 * everything after runs as one full, centred path. What the layout does IS what
 * the day does.
 *
 * Three things here are easy to get wrong and invisible in a stylesheet read.
 *
 * TWO TRACKS THAT NEVER ACTUALLY SEPARATE. The offsets would be declared, the
 * classes would all be present, and the page would be one ordinary column with
 * a story attached — because an offset that resolves to zero, or a track width
 * of 100%, looks exactly like an offset that works.
 *
 * A MEETING THAT NEVER MERGES. If the sections after the panggih keep any of
 * the offset, the document has two tracks forever and the moment the whole
 * template is named after did not happen.
 *
 * AND A SEAM DRAWN IN THE COLOUR OF THE COURTYARD IT RUNS DOWN, which draws
 * nothing at all — the trap eight earlier signatures in this catalogue fell
 * into, in eight different disguises.
 *
 * All three are measured in a browser, not assumed: the offsets are compared
 * left against right and before against after, at every breakpoint.
 *
 * Every surface declares its own ground AND its own ink in the same rule, so a
 * palette can never leave text the colour of what is behind it.
 */

/* Tokens ------------------------------------------------------------------- */
.uk-panggih{
  --pg-ground:#F2EDE4;--pg-ink:#2A211B;--pg-mist:#6B5C51;--pg-moss:#4F5B45;--pg-rose:#8C4A3F;
  --pg-line:rgba(42,33,27,.16);--pg-panel:#E8E0D3;
  /* The seam the two tracks run either side of, and the thread that draws it.
     Both have to differ from the ground or the division that this whole family
     is about is invisible while every rule about it is still correct. */
  --pg-seam:#B08968;--pg-seam-deep:#6E4B31;
  --pg-radius:10px;--pg-radius-sm:5px;--pg-measure:56ch;
  --pg-track:84%;         /* how much of the width one track takes; the rest is
                             its open lane, and the lane swaps sides each time */
  --pg-col-w:44px;        /* the converging index's own gutter, reserved by every track */
  --pg-lift:20px;
  --pg-display:"Lora",Georgia,Cambria,"Times New Roman",serif;
  --pg-sans:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  position:relative;background:var(--pg-ground);color:var(--pg-ink);
  font-family:var(--pg-sans);font-size:16px;line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
[hidden]{display:none !important}
.uk-panggih *,.uk-panggih *::before,.uk-panggih *::after{box-sizing:border-box}
.uk-panggih 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-panggih figure{margin:0}
.uk-panggih h1,.uk-panggih h2,.uk-panggih h3,.uk-panggih h4{font-family:var(--pg-display);font-weight:600;line-height:1.2;margin:0}
.uk-panggih p{margin:0}
/* :where() so this stays a DEFAULT. As ".uk-panggih button" it was (0,1,1)
   and outranked every button rule written as a single class, so 6 declared
   button colours in this file never applied and those buttons took the page
   ink instead — including the lightbox controls on their dark scrim. */
.uk-panggih :where(button){font-family:inherit;color:inherit}
/* The reading area starts below the beams overhead; the rule that sets it lives
   with the index it is reserving for. */

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

/* THE COURTYARD ----------------------------------------------------------
   The signature, and the only structure in this catalogue that changes what it
   is partway down.

   Before the meeting the document runs as TWO TRACKS. Each section stands off
   the centre to one side or the other and takes less than the full width, so
   there is a visible lane down the middle that neither of them enters. The
   sides alternate, so the two processions advance past one another.

   At the panggih they arrive together: one section, full width, with both
   threads running into it.

   After it there is one path. Every section is centred and full width, the
   threads are gone, and nothing is offset ever again — if any of the offset
   survives, the two never actually met and the moment this template is named
   after did not happen. */
.uk-pg-court{position:relative;background:var(--pg-ground);
  /* The swept ground: a faint tooth, so the courtyard is not a flat fill. */
  background-image:repeating-linear-gradient(90deg,rgba(42,33,27,.02) 0 1px,transparent 1px 8px)}

/* A track: one section, standing off the centre to one side. The offset is made
   with margin and NOT with a transform — a transform here would be overwritten
   by the reveal's own translate on the same element, and the offset would exist
   in the stylesheet and nowhere on the screen.

   Two tracks side by side would each be under half the width, which is not a
   column anyone can read on a phone. So each track takes most of the width and
   leaves its lane open on ONE side, and consecutive sections swing to opposite
   sides — the lane alternates, and the two processions advance past each other.
   The offset and the narrowing are one pair: a track at 100% cannot stand off
   anything, and an offset with no narrowing just pushes the text off screen. */
.uk-pg-track{position:relative;z-index:1;margin:0;
  width:var(--pg-track);padding:30px calc(var(--pg-col-w) + 12px) 34px 16px;
  background:transparent;scroll-margin-top:16px}
.uk-pg-track.is-left{margin-left:0;margin-right:auto}
.uk-pg-track.is-right{margin-left:auto;margin-right:0}

/* The thread each procession walks beside, drawn on the edge that faces its own
   open lane. Each track draws its own segment over its own height, so the two
   threads are exactly as long as the approach is — they end where the meeting
   is, with nothing to keep in step and nothing to cut short.

   In the ground colour it would draw nothing at all, which is the trap eight
   earlier signatures in this catalogue fell into. */
.uk-pg-track.is-left::after,.uk-pg-track.is-right::after{content:"";position:absolute;
  top:0;bottom:0;width:2px;z-index:2;pointer-events:none;background:var(--pg-seam)}
.uk-pg-track.is-left::after{right:0}
.uk-pg-track.is-right::after{left:0}

/* The lead mark at the head of a track, on the side that faces the lane, so the
   two processions point at one another across it. */
.uk-pg-mark{position:relative;display:block;width:34px;height:2px;margin:0 0 18px;pointer-events:none;
  background:var(--pg-seam)}
.uk-pg-track.is-left .uk-pg-mark{margin-left:auto;margin-right:0}
.uk-pg-track.is-right .uk-pg-mark{margin-left:0;margin-right:auto}

/* THE MEETING. One section, the full width, no offset and no thread, with the
   knot tied at its head. This is the only place in the document where the two
   sides are the same element. */
.uk-pg-track.is-meeting{width:100%;margin-inline:auto;padding:52px calc(var(--pg-col-w) + 12px) 56px 16px;text-align:center}
.uk-pg-track.is-meeting .uk-pg-mark{width:min(72%,420px);height:3px;margin:0 auto 22px;
  background:linear-gradient(90deg,transparent 0,var(--pg-seam) 18%,var(--pg-seam-deep) 50%,var(--pg-seam) 82%,transparent 100%)}
.uk-pg-track.is-meeting::before{content:"";position:absolute;left:50%;top:0;z-index:2;
  width:13px;height:13px;transform:translate(-50%,-50%) rotate(45deg);
  background:var(--pg-seam);box-shadow:0 0 0 3px var(--pg-ground),0 0 0 4px var(--pg-seam-deep)}

/* AFTER: one path. Full width, centred, no offset and no thread — if any of it
   survives here, the two never met. */
.uk-pg-track.is-single{width:100%;margin-inline:auto;padding:34px calc(var(--pg-col-w) + 12px) 38px 16px}
.uk-pg-track.is-single .uk-pg-mark{width:54px;margin-inline:auto}

/* The reading column, held inside whichever track it is in. */
.uk-pg-column{position:relative;width:min(100%,780px);margin-inline:auto;color:var(--pg-ink)}
/* A track that reads from the right has to be mirrored all the way through, not
   only in its text-align: a rule, a measure-capped paragraph and the peg on a
   heading all sit at their own left edge by default, and a right-reading column
   with left-hung ornament reads as a mistake rather than as a mirror. */
.uk-pg-track.is-right .uk-pg-column{text-align:right}
.uk-pg-track.is-right .uk-pg-copy,
.uk-pg-track.is-right .uk-pg-lead,
.uk-pg-track.is-right .uk-pg-rule,
.uk-pg-track.is-right .uk-pg-narrow{margin-left:auto;margin-right:0}
.uk-pg-track.is-right .uk-pg-titled{padding-left:0;padding-right:22px}
.uk-pg-track.is-right .uk-pg-titled::before{left:auto;right:0}
/* The step number belongs on the lane side too, so the two tracks number
   themselves toward each other. */
.uk-pg-track.is-right .uk-pg-joint{right:auto;left:18px}

/* A panel of content. Before the meeting it carries a rule on the side facing
   the lane, so a block belongs visibly to its own procession; after it, the
   rule is gone because there is only one. */
.uk-pg-entry,.uk-pg-event,.uk-pg-count div,.uk-pg-streams a,
.uk-pg-accounts article,.uk-pg-contacts article,.uk-pg-faq details{
  position:relative;background:var(--pg-panel);border-radius:var(--pg-radius-sm);
  box-shadow:inset 0 0 0 1px var(--pg-line)}
.uk-pg-track.is-left .uk-pg-entry,.uk-pg-track.is-left .uk-pg-event{
  box-shadow:inset 0 0 0 1px var(--pg-line), inset -3px 0 0 var(--pg-seam)}
.uk-pg-track.is-right .uk-pg-entry,.uk-pg-track.is-right .uk-pg-event{
  box-shadow:inset 0 0 0 1px var(--pg-line), inset 3px 0 0 var(--pg-seam)}

/* GATE: the two halves, still apart -------------------------------------
   Two ranks of marks come in from the left and from the right and STOP SHORT
   of the middle, leaving the lane between them open with the invitation
   standing in it. Nothing has met yet. Pressing the button is what closes it.

   Both ranks are drawn well PAST the plate on their own side, for a reason paid
   for in an earlier release: a field no wider than the plate is hidden by the
   plate, and the signature ends up present in the DOM and invisible on the
   screen — measured there at 1280, where only 40px tips escaped on either side.

   In the ground colour the ranks draw nothing at all, which is the trap eight
   earlier signatures in this catalogue fell into, in eight different disguises. */
.uk-pg-gate{--pg-ground:#1A1417;--pg-ink:#F4EDE6;--pg-mist:#BCA9A2;--pg-moss:#AFBFA2;--pg-rose:#E0A08C;--pg-line:rgba(244,237,230,.22);--pg-seam:#C98A6E;--pg-seam-deep:#2A1C1B;
  position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:20px;background:#140F12;color:var(--pg-ink);transition:opacity .7s ease,visibility .7s ease}
.uk-pg-gate.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.uk-pg-approach{position:relative;display:grid;grid-template-rows:auto auto;place-items:center;width:min(100%,460px)}
.uk-pg-halves{position:absolute;left:50%;top:50%;z-index:0;width:min(178vw,880px);height:min(118vh,660px);
  transform:translate(-50%,-50%);pointer-events:none;
  /* Two ranks marching inward, each closing up as it nears the lane. */
  background:
    repeating-linear-gradient(90deg,var(--pg-seam) 0 2px,transparent 2px 30px) left center/34% 58% no-repeat,
    repeating-linear-gradient(90deg,var(--pg-seam) 0 2px,transparent 2px 18px) left 26% center/12% 44% no-repeat,
    repeating-linear-gradient(90deg,var(--pg-seam) 0 2px,transparent 2px 30px) right center/34% 58% no-repeat,
    repeating-linear-gradient(90deg,var(--pg-seam) 0 2px,transparent 2px 18px) right 26% center/12% 44% no-repeat;
  opacity:.55;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 34%,transparent 44%,transparent 56%,#000 66%,#000 88%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 34%,transparent 44%,transparent 56%,#000 66%,#000 88%,transparent 100%)}
/* The two lead threads, reaching toward each other across the lane and stopping
   with a gap still between them. The gap is the whole cover: they have not met. */
.uk-pg-halves::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;
  background:
    linear-gradient(90deg,transparent 0,var(--pg-seam) 30%,var(--pg-seam) 100%) left center/38% 2px no-repeat,
    linear-gradient(270deg,transparent 0,var(--pg-seam) 30%,var(--pg-seam) 100%) right center/38% 2px no-repeat}
.uk-pg-plate{position:relative;z-index:2;grid-row:1;display:grid;grid-template-rows:auto auto;overflow:hidden;border:1px solid var(--pg-line);border-radius:var(--pg-radius);background:#241B10}
.uk-pg-portrait{position:relative;height:min(40svh,272px);overflow:hidden;background:#2C2113}
.uk-pg-portrait img{width:100%;height:100%;object-fit:cover;object-position:var(--pg-focus-mobile-x,50%) var(--pg-focus-mobile-y,38%)}
.uk-pg-gate-body{position:relative;padding:26px 22px 24px;text-align:center}
.uk-pg-gate-body h1{margin-top:8px;font-size:clamp(27px,7.6vw,42px)}
.uk-pg-gate-date{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:7px 16px;border:1px solid var(--pg-line);border-radius:999px;font-size:12px;letter-spacing:.08em;color:var(--pg-mist)}
.uk-pg-couple-list{display:grid;gap:8px;margin-top:14px}
.uk-pg-couple-list span{display:grid;gap:2px}
.uk-pg-couple-list small{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--pg-mist)}
.uk-pg-couple-list strong{font-family:var(--pg-display);font-size:18px;font-weight:600}
/* Its own line, always: the buttons here are inline-flex, so on a plate wide
   enough this came to rest beside the date chip instead of centred beneath it —
   seen at 1280, where the plate is 530px across. */
.uk-pg-gate-open{position:relative;display:flex;width:fit-content;margin:18px auto 0;padding:13px 26px;border-color:transparent;background:var(--pg-rose);color:#1B1408;font-size:14px;
  box-shadow:0 0 0 4px rgba(216,179,116,.2)}
/* What the gate does when it opens: the beam settles onto its bearing. It drops
   the last few pixels and seats, which is the whole motion identity of this
   family in one gesture. */
/* What the gate does when it opens: the gap closes. Two rules run in from the
   edges and touch at the centre — the one gesture this whole family is about. */
.uk-pg-meet{position:absolute;left:0;right:0;top:50%;z-index:1;height:2px;
  background:linear-gradient(90deg,var(--pg-seam) 0 50%,var(--pg-seam) 50% 100%);
  opacity:0;pointer-events:none;transform:scaleX(0)}
.uk-pg-gate.is-met .uk-pg-meet{animation:uk-pg-close .85s cubic-bezier(.3,.9,.3,1) forwards}
@keyframes uk-pg-close{
  from{opacity:.95;transform:scaleX(0)}
  70%{opacity:.85;transform:scaleX(1)}
  to{opacity:0;transform:scaleX(1)}}

/* COVER -------------------------------------------------------------------- */
.uk-pg-cover{--pg-ground:#1C161A;--pg-ink:#F2EBE4;--pg-mist:#BAA9A4;--pg-moss:#AFBFA2;--pg-rose:#E0A08C;--pg-line:rgba(242,235,228,.24);--pg-seam:#C5866B;--pg-seam-deep:#2C1E1D;
  position:relative;display:grid;min-height:100svh;background:var(--pg-ground);color:var(--pg-ink)}
.uk-pg-cover-media{position:absolute;inset:0;overflow:hidden}
.uk-pg-cover-image{width:100%;height:100%;object-fit:cover;object-position:var(--pg-focus-mobile-x,50%) var(--pg-focus-mobile-y,38%)}
.uk-pg-cover-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(29,23,14,.3) 0%,rgba(29,23,14,.76) 60%,#1A140B 100%)}
.uk-pg-cover-empty{position:absolute;inset:0;display:grid;place-items:center;background:#241B10}
.uk-pg-cover-empty-grid{position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,rgba(241,231,214,.12) 0 1px,transparent 1px 24px),
    repeating-linear-gradient(180deg,rgba(241,231,214,.09) 0 1px,transparent 1px 28px)}
.uk-pg-cover-empty-mark{position:relative;font-family:var(--pg-display);font-size:23px;letter-spacing:.2em;padding:10px 18px;border:1px solid var(--pg-line);border-radius:999px;color:#E6E9E2}
.uk-pg-cover-panel{position:relative;align-self:end;padding:40px calc(var(--pg-col-w) + 12px) 56px;text-align:center}
.uk-pg-cover-panel h1{margin-top:8px;font-size:clamp(29px,8.4vw,52px)}
.uk-pg-cover-date{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:7px 16px;border:1px solid var(--pg-line);border-radius:999px;font-size:12px;letter-spacing:.08em;color:var(--pg-mist)}

/* THE READING COLUMN inside a track. A width and nothing else: the track it
   sits in already carries the side, the thread and the alignment, and a second
   frame around the column would fight all three. */
.uk-pg-column{position:relative;width:min(100%,780px);margin-inline:auto;color:var(--pg-ink)}
/* A titled heading. The mark beside it is the seam's own colour, so a heading
   is tied to the side its section walks on rather than floating free of it. */
.uk-pg-titled{position:relative;padding-left:22px}
.uk-pg-titled::before{content:"";position:absolute;left:0;top:.55em;
  width:11px;height:11px;border-radius:2px;
  background:radial-gradient(circle at 34% 32%,var(--pg-seam) 0 46%,var(--pg-seam-deep) 47% 100%);
  box-shadow:0 0 0 1px rgba(36,28,18,.26)}
.uk-pg-joint{position:absolute;right:18px;top:16px;font-family:var(--pg-display);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--pg-mist)}
.uk-pg-head{position:relative;z-index:1;margin-bottom:14px}
/* The reading column is capped so a line never runs too long, and centred so a
   wide panel is not left with an empty half beside it. */
.uk-pg-head,.uk-pg-body{max-width:min(100%,620px);margin-inline:auto}
.uk-pg-body{position:relative;z-index:1}
.uk-pg-body h2{font-size:clamp(22px,5.2vw,32px)}
.uk-pg-body h3{font-size:18px}
.uk-pg-body h4{font-size:17px}
.uk-pg-narrow{width:min(100%,600px);margin-inline:auto;text-align:center}

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

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

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

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

/* GALLERY: two files, then single file ------------------------------------
   The photographs walk in the same order the day does. The first four come in
   PAIRS, two abreast, the way the two processions arrive; from the fifth on
   they walk SINGLE FILE, full width, because by then there is only one line.

   One position can leave a photograph standing alone: an odd one at the end of
   the paired run. It takes the whole width instead — the same defect, in a
   different family, once cost a tile sitting beside an empty half, and it was
   found by counting rows in a browser rather than by reading the rules. */
.uk-pg-gallery-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--pg-mist)}
.uk-pg-gallery-tools div{display:flex;gap:8px}
.uk-pg-gallery-tools button{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--pg-line);border-radius:var(--pg-radius-sm);background:transparent;cursor:pointer}
.uk-pg-gallery{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:22px}
/* Paired: two abreast. */
.uk-pg-step{position:relative;grid-column:span 2;margin:0;background:var(--pg-panel)}
.uk-pg-step img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--pg-radius-sm)}
/* Single file from the fifth on, and at the wider crop — a full-width tile kept
   at the portrait ratio came out three times the height of everything above it
   in an earlier family, measured at 620x775 on a desktop. */
.uk-pg-step:nth-child(n+5){grid-column:1/-1}
.uk-pg-step:nth-child(n+5) img{aspect-ratio:16/9}
/* The odd one at the end of the paired run, which would otherwise stand alone
   beside an empty half. */
.uk-pg-step:last-child:nth-child(odd):nth-child(-n+4){grid-column:1/-1}
.uk-pg-step:last-child:nth-child(odd):nth-child(-n+4) img{aspect-ratio:16/9}
/* The thread beside a paired photograph, on the side facing its own file, so a
   pair reads as two lines walking rather than a two-up grid. In the ground
   colour it draws nothing. */
.uk-pg-step:nth-child(-n+4):nth-child(odd):not(:last-child)::after,
.uk-pg-step:nth-child(-n+4):nth-child(even)::after{content:"";position:absolute;
  top:0;bottom:0;width:2px;z-index:2;pointer-events:none;background:var(--pg-seam)}
.uk-pg-step:nth-child(-n+4):nth-child(odd):not(:last-child)::after{right:-7px}
.uk-pg-step:nth-child(-n+4):nth-child(even)::after{left:-7px}
.uk-pg-step button{position:absolute;right:8px;bottom:8px;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:rgba(42,33,27,.74);color:#F2EDE4;cursor:pointer}

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

/* CLOSING: the dalem, the innermost room -------------------------------------------------- */
.uk-pg-closing{--pg-ground:#1B1518;--pg-ink:#F4EDE6;--pg-mist:#BCA9A2;--pg-moss:#AFBFA2;--pg-rose:#E0A08C;--pg-line:rgba(244,237,230,.22);--pg-panel:#261D20;--pg-seam:#C98A6E;--pg-seam-deep:#2C1E1D;
  position:relative;padding:72px calc(var(--pg-col-w) + 12px) 88px;
  background:var(--pg-ground);color:var(--pg-ink);text-align:center;scroll-margin-top:16px}
.uk-pg-closing h2{font-size:clamp(24px,6vw,36px)}
.uk-pg-closing-mark{display:grid;place-items:center;width:64px;height:64px;margin:20px auto 0;border:2px solid var(--pg-moss);border-radius:50%;font-family:var(--pg-display);font-size:14px;letter-spacing:.16em;color:var(--pg-moss);
  box-shadow:0 0 0 5px rgba(168,191,164,.16)}
.uk-pg-closing-share{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}

/* THE TWO RAILS THAT BECOME ONE -------------------------------------------
   The index is the document's own shape, drawn small. Before the meeting the
   marks sit in TWO columns inside the rail, one per procession, alternating the
   way the tracks do. The meeting is a single mark on the centre line. Everything
   after is one column down the middle.

   So the index does not merely point at the chapters — it shows, at a glance,
   that the thing divides, meets and continues as one. No other index here
   changes its own geometry partway down, because no other document does.

   It owns the right gutter and every track reserves it, at every breakpoint. */
.uk-pg-rails{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:26;
  display:flex;flex-direction:column;align-items:center;
  width:var(--pg-col-w);max-width:var(--pg-col-w);max-height:88svh;
  padding:10px 0;background:rgba(42,33,27,.93);border-left:1px solid rgba(242,237,228,.34);color:#F2EDE4}
/* The centre line the two columns of marks are measured from, and the line the
   single column stands on after the meeting. */
.uk-pg-rails-line{position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(242,237,228,.3);transform:translateX(-50%)}
.uk-pg-rail-list{position:relative;list-style:none;display:grid;gap:0;margin:0;padding:0;width:100%;
  /* The marks are what gives way when the rail runs out of room, so min-height:0
     lets this shrink below its content and scroll instead. */
  flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:none}
.uk-pg-rail-list::-webkit-scrollbar{display:none}
/* A full-width row of the rail, not the mark it draws — the mark is 7px and
   nobody can press 7px. In an earlier family this was left to height:100% with
   an item that never stretched and measured 40x9 at one breakpoint only. */
.uk-pg-rail-item{display:flex;align-items:stretch}
.uk-pg-rail-item button{position:relative;display:grid;place-items:center;width:100%;
  height:40px;min-height:38px;border:0;background:transparent;color:inherit;cursor:pointer;padding:0}
/* The mark itself. It is nudged off the centre line to its own side before the
   meeting and sits ON the line after it, so the rail draws two columns becoming
   one. The nudge is what carries the whole idea; at zero the rail is an ordinary
   dotted column and every rule about it still reads as correct. */
.uk-pg-rail-item button i{display:block;width:7px;height:7px;border-radius:50%;
  background:rgba(242,237,228,.38);
  transition:transform .3s ease,background .3s ease,width .3s ease}
.uk-pg-rail-item.is-left button i{transform:translateX(-7px)}
.uk-pg-rail-item.is-right button i{transform:translateX(7px)}
/* The meeting mark: on the line, and the only one that is not a dot. */
.uk-pg-rail-item.is-meeting button i{width:13px;height:13px;border-radius:2px;
  transform:translateX(0) rotate(45deg);background:var(--pg-seam)}
.uk-pg-rail-item button.is-active i{background:var(--pg-seam);width:11px;height:11px}
.uk-pg-rail-item.is-left button.is-active i{transform:translateX(-7px) scale(1.1)}
.uk-pg-rail-item.is-right button.is-active i{transform:translateX(7px) scale(1.1)}
.uk-pg-rail-item.is-meeting button.is-active i{width:15px;height:15px;transform:translateX(0) rotate(45deg)}
/* The tail each mark leaves toward its own side, so the two columns read as two
   lines rather than as dots that happen to be off centre. */
.uk-pg-rail-item.is-left button::after,.uk-pg-rail-item.is-right button::after{
  content:"";position:absolute;top:50%;width:7px;height:1px;background:rgba(242,237,228,.34)}
.uk-pg-rail-item.is-left button::after{right:50%}
.uk-pg-rail-item.is-right button::after{left:50%}
/* The chapter being read, named in standing type inside the rail's own width so
   the chrome is never wider than the gutter the tracks reserved. */
.uk-pg-standing{display:none;
  /* flex:0 0 auto, never flex:1: a vertical line of type has no height of its
     own to grow from, and the rail shrink-wraps its marks. */
  flex:0 0 auto;min-width:0;margin:8px 0 0;padding:0;
  writing-mode:vertical-rl;text-orientation:mixed;text-align:center;
  font-family:var(--pg-display);font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--pg-seam);
  pointer-events:none;white-space:nowrap;max-height:50svh;overflow:hidden}

/* Controls rail, share sheet, lightbox, toast ----------------------------- */
.uk-pg-rail{position:fixed;right:14px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:24;display:grid;gap:8px;justify-items:center}
.uk-pg-rail-toggle,.uk-pg-rail-panel button{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(168,191,164,.42);border-radius:50%;background:rgba(26,29,25,.9);color:#E6E9E2;cursor:pointer}
.uk-pg-rail-panel{display:grid;gap:8px;justify-items:center}
.uk-pg-sheet,.uk-pg-lightbox{position:fixed;inset:0;z-index:46;display:grid;place-items:center;padding:20px 16px;background:rgba(18,20,17,.86);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.uk-pg-sheet.is-open,.uk-pg-lightbox.is-open{opacity:1;visibility:visible}
.uk-pg-sheet-panel{width:min(100%,430px);padding:22px;border:1px solid var(--pg-moss);border-radius:var(--pg-radius);background:#DEDFD9;color:#20251F}
.uk-pg-share-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:16px}
.uk-pg-share-grid button{display:flex;align-items:center;gap:8px;padding:11px 13px;border:1px solid rgba(32,37,31,.16);border-radius:var(--pg-radius-sm);background:transparent;color:inherit;cursor:pointer;font-size:13px}
.uk-pg-sheet-close{width:100%;margin-top:14px}
.uk-pg-lightbox-panel{position:relative;width:min(100%,780px)}
.uk-pg-lightbox-panel img{width:100%;max-height:76svh;object-fit:contain;border-radius:var(--pg-radius);transition:opacity .2s ease}
.uk-pg-lightbox.is-switching .uk-pg-lightbox-panel img{opacity:0}
.uk-pg-lightbox-counter{margin-top:12px;color:#E6E9E2;font-size:12px;letter-spacing:.16em;text-align:center}
.uk-pg-lightbox-close,.uk-pg-lightbox-prev,.uk-pg-lightbox-next{position:absolute;display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;background:rgba(26,29,25,.8);color:#E6E9E2;cursor:pointer}
.uk-pg-lightbox-close{top:-52px;right:0}
.uk-pg-lightbox-prev{left:6px;top:50%;transform:translateY(-50%)}
.uk-pg-lightbox-next{right:6px;top:50%;transform:translateY(-50%)}
.uk-pg-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:#20251F;color:#DEDFD9;font-size:13px;pointer-events:none;transition:opacity .3s ease,transform .3s ease}
.uk-pg-toast.is-visible{opacity:1;transform:translate(-50%,0)}

/* Reveals: the beam settles onto its bearing ------------------------------
   A timber does not fade in. It comes down the last of the way and seats, and
   what it carries follows a beat later — so the beam drops and overshoots its
   rest by a hair, and the content under it arrives after. */
.uk-pg-reveal{opacity:0;transform:translateY(var(--pg-lift));transition:opacity .7s ease,transform .7s cubic-bezier(.22,.78,.2,1)}
.uk-pg-reveal.is-visible{opacity:1;transform:none}
/* The beam of a bay that has not seated yet sits high and light. */
.uk-pg-reveal .uk-pg-mark{opacity:0;transform:scaleX(.2);transform-origin:right center;
  transition:opacity .42s ease,transform .52s cubic-bezier(.3,1.5,.5,1)}
.uk-pg-reveal.is-visible .uk-pg-mark{opacity:1;transform:none}
.uk-pg-reveal-item{opacity:0;transform:translateY(12px);
  transition:opacity .58s ease .14s,transform .58s ease .14s}
.uk-pg-reveal.is-visible .uk-pg-reveal-item{opacity:1;transform:none}

/* Design controls ---------------------------------------------------------- */
.uk-design-palette-template.uk-panggih{--pg-ground:#F2EDE4;--pg-ink:#2A211B;--pg-mist:#6B5C51;--pg-moss:#4F5B45;--pg-rose:#8C4A3F;--pg-panel:#E8E0D3;--pg-seam:#B08968;--pg-seam-deep:#6E4B31}
.uk-design-palette-warm.uk-panggih{--pg-ground:#F7EBD8;--pg-ink:#2E2317;--pg-mist:#6D5C42;--pg-moss:#6E5A33;--pg-rose:#8A5220;--pg-panel:#EEDEC4;--pg-seam:#BE8A54;--pg-seam-deep:#6B4620}
.uk-design-palette-warm .uk-pg-closing{--pg-ground:#2A2418;--pg-ink:#F6F0E2;--pg-mist:#BDB49A;--pg-moss:#CFC08C;--pg-rose:#D3B184;--pg-panel:#1E1A0E;--pg-seam:#D6A473;--pg-seam-deep:#3E2A12}
.uk-design-palette-romantic.uk-panggih{--pg-ground:#F7E6E2;--pg-ink:#30201F;--pg-mist:#6E5352;--pg-moss:#8C4351;--pg-rose:#8A4A43;--pg-panel:#EFD8D4;--pg-seam:#C0806E;--pg-seam-deep:#6B3F33}
.uk-design-palette-romantic .uk-pg-closing{--pg-ground:#2B1F20;--pg-ink:#F6E7E8;--pg-mist:#C0A5A8;--pg-moss:#DDA3AE;--pg-rose:#D2A294;--pg-panel:#1F1517;--pg-seam:#D69B84;--pg-seam-deep:#452724}
.uk-design-palette-sage.uk-panggih{--pg-ground:#EAEDE0;--pg-ink:#1E2620;--pg-mist:#535E4E;--pg-moss:#3D5C42;--pg-rose:#6A5433;--pg-panel:#DDE3D2;--pg-seam:#A08056;--pg-seam-deep:#57402A}
.uk-design-palette-sage .uk-pg-closing{--pg-ground:#1E2620;--pg-ink:#E9F0E6;--pg-mist:#AFBCAD;--pg-moss:#AEC7A8;--pg-rose:#C9BB8E;--pg-panel:#171D15;--pg-seam:#C5A478;--pg-seam-deep:#39291C}
.uk-design-palette-midnight.uk-panggih{--pg-ground:#191518;--pg-ink:#EFE7E2;--pg-mist:#A79A96;--pg-moss:#A8BFA4;--pg-rose:#D6A08D;--pg-line:rgba(239,231,226,.2);--pg-panel:#241E21;--pg-seam:#C08871;--pg-seam-deep:#3A2724}
.uk-design-palette-midnight .uk-pg-closing{--pg-ground:#191518;--pg-ink:#EFE7E2;--pg-mist:#A79A96;--pg-moss:#A8BFA4;--pg-rose:#D6A08D;--pg-panel:#141013;--pg-seam:#C08871;--pg-seam-deep:#3A2724}
.uk-design-type-classic .uk-pg-body h2,.uk-design-type-classic .uk-pg-gate-body h1{font-family:var(--pg-display)}
.uk-design-type-modern .uk-pg-body h2,.uk-design-type-modern .uk-pg-gate-body h1,.uk-design-type-modern .uk-pg-cover-panel h1{font-family:var(--pg-sans);letter-spacing:.02em}
.uk-design-type-editorial .uk-pg-body h2{font-size:clamp(26px,6.4vw,40px);letter-spacing:-.01em}
.uk-design-type-editorial .uk-pg-cover-panel h1{font-size:clamp(33px,9.4vw,60px);letter-spacing:-.02em}
/* The frame is the signature, so "surface" changes how HEAVY the timber is cut
   rather than flattening it away. The post and the beam move together, because a
   slender post carrying a heavy beam is not a lighter panggih — it is a wrong
   one. Every rule that draws structure reads these two, so one control moves the
   whole frame. */
.uk-design-surface-soft .uk-panggih{--pg-track:92%;--pg-radius:10px;--pg-radius-sm:6px}
.uk-design-surface-balanced .uk-panggih{--pg-track:84%;--pg-radius:5px;--pg-radius-sm:3px}
.uk-design-surface-sharp .uk-panggih{--pg-track:74%;--pg-radius:0px;--pg-radius-sm:0px}
.uk-design-gallery-grid .uk-pg-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow-x:visible}
.uk-design-gallery-filmstrip .uk-pg-gallery{display:flex;grid-template-columns:none;gap:12px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}
.uk-design-gallery-filmstrip .uk-pg-step,
.uk-design-gallery-filmstrip .uk-pg-step:nth-child(n+5),
.uk-design-gallery-filmstrip .uk-pg-step:last-child:nth-child(odd):nth-child(-n+4){flex:0 0 auto;grid-column:auto;width:min(62vw,240px);scroll-snap-align:center}
.uk-design-gallery-filmstrip .uk-pg-step img,
.uk-design-gallery-filmstrip .uk-pg-step:nth-child(n+5) img,
.uk-design-gallery-filmstrip .uk-pg-step:last-child:nth-child(odd):nth-child(-n+4) img{aspect-ratio:4/5}
/* The thread beside a paired photograph belongs to the paired layout only. */
.uk-design-gallery-filmstrip .uk-pg-step::after{display:none}
.uk-design-gallery-editorial .uk-pg-gallery{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;overflow-x:visible}
.uk-design-gallery-editorial .uk-pg-step,
.uk-design-gallery-editorial .uk-pg-step:nth-child(n+5),
.uk-design-gallery-editorial .uk-pg-step:last-child:nth-child(odd):nth-child(-n+4){grid-column:1/-1}
.uk-design-gallery-editorial .uk-pg-step img,
.uk-design-gallery-editorial .uk-pg-step:nth-child(n+5) img,
.uk-design-gallery-editorial .uk-pg-step:last-child:nth-child(odd):nth-child(-n+4) img{aspect-ratio:3/2}
.uk-design-gallery-editorial .uk-pg-step::after{display:none}
.uk-design-motion-soft .uk-panggih{--pg-lift:22px}
.uk-design-motion-cinematic .uk-panggih{--pg-lift:36px}
.uk-design-motion-minimal .uk-panggih{--pg-lift:0px}
/* Stillness has to release the BEAM too. A beam left at its unseated transform
   sits two beam-heights above its bearing and never comes down, which on a
   machine that asked for no motion is a structure that never finishes. */
.uk-design-motion-minimal .uk-pg-reveal,.uk-design-motion-minimal .uk-pg-reveal-item,
.uk-design-motion-minimal .uk-pg-reveal .uk-pg-mark{opacity:1;transform:none;transition:none}
.uk-design-motion-minimal .uk-pg-gate.is-met .uk-pg-meet{animation:none}

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

/* Narrow phones ------------------------------------------------------------ */
@media(max-width:560px){
.uk-pg-count{grid-template-columns:repeat(2,minmax(0,1fr))}
.uk-pg-people{grid-template-columns:minmax(0,1fr);gap:24px}
.uk-pg-accounts,.uk-pg-contacts{grid-template-columns:minmax(0,1fr)}
.uk-pg-share-grid{grid-template-columns:minmax(0,1fr)}
.uk-pg-lightbox-close{top:auto;bottom:-52px;right:50%;transform:translateX(50%)}
}
@media(max-width:360px){
.uk-panggih{--pg-col-w:34px}
.uk-pg-track{padding:24px calc(var(--pg-col-w) + 12px) 28px 12px}
.uk-pg-closing{padding:52px calc(var(--pg-col-w) + 12px) 66px}

.uk-pg-event{grid-template-columns:minmax(0,1fr);gap:10px}
.uk-design-gallery-grid .uk-pg-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
.uk-design-gallery-editorial .uk-pg-gallery{grid-template-columns:minmax(0,1fr)}
.uk-design-gallery-filmstrip .uk-pg-gallery{grid-template-columns:none}
}

/* Short viewports: a landscape phone and a short laptop window are different
   rooms, so every height rule names the width it means. */
@media(max-height:620px) and (max-width:1024px){
.uk-pg-cover{min-height:100svh}
.uk-pg-cover-panel{padding:22px calc(var(--pg-col-w) + 12px) 30px}
.uk-pg-cover-panel h1{font-size:clamp(22px,5.2vw,30px)}
.uk-pg-cover-empty-mark{font-size:17px;padding:8px 14px}
.uk-pg-gate{padding:12px}
.uk-pg-portrait{height:min(23svh,136px)}
.uk-pg-gate-body{padding:16px 16px 14px}
.uk-pg-gate-body h1{font-size:clamp(20px,4.4vw,26px)}
.uk-pg-halves{width:min(150vh,620px);height:min(96vh,420px)}
/* The beams overhead take height, and a landscape phone has almost none to
   give. The ROW gets shorter; the buttons inside it keep their full height, so
   the target never shrinks with the chrome. */
.uk-panggih{--pg-col-w:38px}
.uk-pg-rail-item button{min-width:44px}
.uk-pg-standing{font-size:11px;letter-spacing:.14em;max-width:30vw}
.uk-pg-rail{bottom:calc(10px + env(safe-area-inset-bottom))}
}
@media(max-height:620px) and (min-width:1025px){
.uk-pg-portrait{height:min(28svh,190px)}
.uk-panggih{--pg-col-w:44px}
}

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