/* Pendapa — Romance Flagship 1.0.0
 * A wedding invitation built the way a Javanese pendapa is built.
 *
 * Every other family in this catalogue divides the document HORIZONTALLY —
 * stacked cards, bands, courses, steps. This one is held up by two soko guru
 * that stand UNBROKEN from the first line to the last, behind everything, and
 * every section is a bay between them carried on its own beam.
 *
 * The room narrows as the guest goes in, the way a house does: the outer
 * pendapa where anyone is received, the pringgitan between, and the dalem at
 * the heart. The guru never move; the span between the beams' bearings does.
 *
 * Three things here are easy to get wrong and invisible in a stylesheet read.
 *
 * A post that is secretly drawn PER SECTION. It would be the same width, the
 * same colour, in the same place, and the CSS would look identical — and there
 * would be a seam at every section boundary, which is the one thing a
 * structural post cannot have. The posts here are two elements inside the hall,
 * stretched top to bottom, so there is nothing to break.
 *
 * A post painted the colour of the wall behind it, which draws nothing at all:
 * seven earlier signatures in this catalogue shipped that way, in seven
 * different disguises.
 *
 * And the index. It is the tumpang sari seen from below, so it lives along the
 * TOP edge — the first in this catalogue that does — and a top index sits over
 * the reading line rather than beside it. Every bay reserves it, at every
 * breakpoint, including the short landscape window where it costs the most.
 *
 * All three are measured in a browser, not assumed.
 *
 * Every surface declares its own wall AND its own ink in the same rule, so a
 * palette can never leave text the colour of what is behind it.
 */

/* Tokens ------------------------------------------------------------------- */
.uk-pendapa{
  --pd-wall:#EDE7DB;--pd-ink:#241C12;--pd-mist:#6A5B49;--pd-moss:#4E5B3F;--pd-brass:#7A5A22;
  --pd-line:rgba(36,28,18,.16);--pd-panel:#E3DACA;
  /* The two faces of a timber: --pd-teak is the side the light reaches and
     --pd-teak-dark the side it does not. A post needs both or it is a flat bar,
     and BOTH have to differ from the wall or the post draws nothing. */
  --pd-teak:#8A6338;--pd-teak-dark:#4E3620;
  --pd-radius:8px;--pd-radius-sm:4px;--pd-measure:58ch;
  --pd-post:14px;          /* the soko guru, unbroken top to bottom */
  --pd-beam:9px;           /* the blandar each bay is carried on */
  --pd-gap:10px;           /* clearance between a post and the bay it frames */
  --pd-top-w:52px;         /* the tumpang sari index's own gutter, along the TOP */
  --pd-span:100%;          /* the bearing span of this zone's beam */
  --pd-lift:20px;
  --pd-display:"Lora",Georgia,Cambria,"Times New Roman",serif;
  --pd-sans:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  position:relative;background:var(--pd-wall);color:var(--pd-ink);
  font-family:var(--pd-sans);font-size:16px;line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
[hidden]{display:none !important}
.uk-pendapa *,.uk-pendapa *::before,.uk-pendapa *::after{box-sizing:border-box}
.uk-pendapa 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-pendapa figure{margin:0}
.uk-pendapa h1,.uk-pendapa h2,.uk-pendapa h3,.uk-pendapa h4{font-family:var(--pd-display);font-weight:600;line-height:1.2;margin:0}
.uk-pendapa p{margin:0}
/* :where() so this stays a DEFAULT. As ".uk-pendapa 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-pendapa :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-pd-eyebrow{font-size:11px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--pd-moss)}
.uk-pd-rule{display:block;width:min(100%,78px);height:1px;margin:10px 0;background:var(--pd-moss);opacity:.6}
.uk-pd-rule.is-center{margin-left:auto;margin-right:auto}
.uk-pd-copy{max-width:var(--pd-measure);margin-top:14px;color:var(--pd-mist);font-size:15px}
.uk-pd-lead{max-width:var(--pd-measure);margin-top:12px;font-family:var(--pd-display);font-size:20px;color:var(--pd-ink)}
.uk-pd-preline{white-space:pre-line}
.uk-pd-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.uk-pd-signature{margin-top:16px;font-family:var(--pd-display);font-size:22px;color:var(--pd-ink)}
.uk-pd-quote{max-width:var(--pd-measure);margin-top:20px;padding:16px 20px;border-left:2px solid var(--pd-moss);border-radius:0 3px 3px 0;color:var(--pd-ink);font-family:var(--pd-display);font-size:17px;font-style:italic}
.uk-pd-quote cite{display:block;margin-top:10px;font-family:var(--pd-sans);font-size:12px;font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--pd-mist)}
.uk-pd-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(--pd-mist)}
.uk-pd-occasions span+span::before{content:"·";padding-right:6px;font-size:14px;color:var(--pd-brass)}
.uk-pd-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border:1px solid var(--pd-moss);border-radius:999px;background:transparent;color:var(--pd-ink);font-size:13px;font-weight:600;letter-spacing:.06em;text-decoration:none;cursor:pointer;transition:transform .25s ease,background .25s ease}
.uk-pd-button:hover{transform:translateY(-1px);box-shadow:inset 0 -2px 0 var(--pd-teak)}
.uk-pd-button.is-solid{border-color:transparent;background:var(--pd-moss);color:#FBF6EA}
.uk-pd-button:focus-visible,.uk-pendapa button:focus-visible,.uk-pendapa a:focus-visible{outline:2px solid var(--pd-brass);outline-offset:3px}

/* THE HALL ----------------------------------------------------------------
   The signature. Two soko guru stand inside the hall, stretched from its very
   top to its very bottom, BEHIND every bay. They are two elements, not a
   repeated decoration: a post assembled per section would have a seam at every
   boundary, and nothing in a stylesheet would show it.

   Each is two-toned, because a round timber has a side the light reaches and a
   side it does not. Both tones differ from the wall — a post in the wall colour
   draws nothing, which is the trap seven earlier signatures fell into. */
.uk-pd-hall{position:relative;background:var(--pd-wall);
  /* The plaster: a faint vertical tooth, so the wall is not a flat fill. */
  background-image:repeating-linear-gradient(90deg,rgba(36,28,18,.022) 0 1px,transparent 1px 7px)}
/* The posts stand IN FRONT of the wall of whatever room they pass through, which
   is the only z-index that makes them structural. Behind the rooms they were
   painted over by them: measured inside the closing, every column of the post
   came back at exactly the wall colour — 1.00:1, the post gone entirely, while
   the element itself still measured the full height of the hall. Element height
   is not the same question as whether anything was drawn. */
.uk-pd-guru{position:absolute;top:0;bottom:0;z-index:3;width:var(--pd-post);pointer-events:none;
  background:linear-gradient(90deg,var(--pd-teak-dark) 0 22%,var(--pd-teak) 22% 68%,var(--pd-teak-dark) 68% 100%);
  box-shadow:0 0 0 1px rgba(36,28,18,.22)}
.uk-pd-guru.is-left{left:var(--pd-gap)}
.uk-pd-guru.is-right{right:var(--pd-gap)}

/* A bay. It reserves both posts and the tumpang sari along the top, and it has
   no background of its own: the wall behind it is the hall's, unbroken. */
.uk-pd-bay{position:relative;z-index:1;margin:0;
  padding:var(--pd-beam) calc(var(--pd-post) + var(--pd-gap) * 2) 30px;
  background:transparent;scroll-margin-top:calc(var(--pd-top-w) + 8px)}

/* The blandar: the beam this bay is carried on. It spans the zone's bearing,
   centred, and BEARS on something at each end — the two blocks are the joint,
   and a beam that stops in mid-air is a line, not a structural member. */
.uk-pd-beam{position:relative;display:block;width:var(--pd-span);height:var(--pd-beam);
  margin:0 auto 20px;pointer-events:none;
  background:linear-gradient(180deg,var(--pd-teak) 0 62%,var(--pd-teak-dark) 62% 100%);
  box-shadow:0 1px 0 rgba(36,28,18,.24)}
.uk-pd-beam::before,.uk-pd-beam::after{content:"";position:absolute;top:calc(-1 * var(--pd-beam) * .55);
  width:calc(var(--pd-beam) * 1.9);height:calc(var(--pd-beam) * 1.6);background:var(--pd-teak-dark);border-radius:1px}
.uk-pd-beam::before{left:calc(-1 * var(--pd-beam) * .45)}
.uk-pd-beam::after{right:calc(-1 * var(--pd-beam) * .45)}

/* The three rooms. The guru never move — moving them would break the thing this
   template is about. What narrows is the BEARING SPAN of the beams, and with it
   the reading column under them, so the house closes in as the guest goes
   further inside. */
.uk-pd-bay.is-pendapa{--pd-span:100%}
.uk-pd-bay.is-pringgitan{--pd-span:88%}
.uk-pd-bay.is-dalem{--pd-span:74%}

/* The penanggap: the secondary posts that carry the shortened beams. They are
   drawn only where the span is short enough to need them, and they stop at the
   bay — unlike the guru, these are not continuous, and that is the difference a
   reader should be able to see. */
.uk-pd-bay.is-pringgitan .uk-pd-beam::before,
.uk-pd-bay.is-pringgitan .uk-pd-beam::after,
.uk-pd-bay.is-dalem .uk-pd-beam::before,
.uk-pd-bay.is-dalem .uk-pd-beam::after{
  height:calc(var(--pd-beam) * 3.4);top:calc(-1 * var(--pd-beam) * .55)}

/* The reading column, held inside the bearing span. */
.uk-pd-column{position:relative;width:min(var(--pd-span),820px);margin-inline:auto;color:var(--pd-ink)}

/* A gebyok panel: the carved partition boards a pendapa is filled with. Every
   block of content is one — a framed board set between the posts, with the
   double rule a gebyok carries. */
.uk-pd-entry,.uk-pd-event,.uk-pd-count div,.uk-pd-streams a,
.uk-pd-accounts article,.uk-pd-contacts article,.uk-pd-faq details{
  position:relative;background:var(--pd-panel);border-radius:var(--pd-radius-sm);
  box-shadow:inset 0 0 0 1px var(--pd-line), inset 0 0 0 4px var(--pd-panel), inset 0 0 0 5px var(--pd-line)}

/* GATE: looking straight up at the tumpang sari ---------------------------
   The ceiling of a pendapa is a stack of beam frames, each one smaller than the
   one below it, climbing to a centre. Seen from underneath it is concentric
   rectangles receding — so that is exactly what the gate is, and the invitation
   plate hangs in the middle of it.

   Every frame is drawn as a ring and they are all LARGER than the plate, for a
   reason paid for in a previous release: a decoration drawn behind the plate is
   mostly hidden BY the plate. Measured there at 1280, two of three inner rules
   were covered completely and only 40px tips of the outermost escaped.

   Each frame is drawn twice, the lit timber and the dark face under it, because
   a frame in one tone on a dark ceiling draws nothing at all — the trap seven
   earlier signatures fell into, in seven different disguises. */
.uk-pd-gate{--pd-wall:#1B1408;--pd-ink:#F3E9D8;--pd-mist:#BCAA90;--pd-moss:#B9C4A0;--pd-brass:#D8B374;--pd-line:rgba(243,233,216,.22);--pd-teak:#B07F45;--pd-teak-dark:#2B1E0D;
  position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:20px;background:#140F06;color:var(--pd-ink);transition:opacity .7s ease,visibility .7s ease}
.uk-pd-gate.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.uk-pd-ceiling{position:relative;display:grid;grid-template-rows:auto auto;place-items:center;width:min(100%,460px)}
/* The rafters running out to the eaves, behind the whole ceiling. */
.uk-pd-sari{position:absolute;left:50%;top:50%;z-index:0;width:min(172vw,820px);height:min(124vh,700px);
  transform:translate(-50%,-50%);pointer-events:none;overflow:hidden;
  background:
    repeating-linear-gradient(90deg,rgba(243,233,216,.11) 0 1px,transparent 1px 22px),
    repeating-linear-gradient(180deg,rgba(243,233,216,.08) 0 1px,transparent 1px 26px);
  -webkit-mask-image:radial-gradient(ellipse 74% 68% at 50% 50%,#000 54%,transparent 93%);
  mask-image:radial-gradient(ellipse 74% 68% at 50% 50%,#000 54%,transparent 93%)}
/* The tumpang sari itself: four frames, each further out than the last, with a
   band of ceiling between them. Read from the middle outward, which is how it
   is built — the innermost tier is the highest. */
.uk-pd-sari::after{content:"";position:absolute;left:50%;top:50%;z-index:0;
  width:min(84vw,424px);height:min(72vh,600px);transform:translate(-50%,-50%);
  border-radius:2px;
  box-shadow:
    0 0 0 2px var(--pd-teak), 0 2px 0 2px var(--pd-teak-dark),
    0 0 0 12px var(--pd-wall),
    0 0 0 14px var(--pd-teak), 0 2px 0 14px var(--pd-teak-dark),
    0 0 0 26px var(--pd-wall),
    0 0 0 28px var(--pd-teak), 0 2px 0 28px var(--pd-teak-dark),
    0 0 0 44px var(--pd-wall),
    0 0 0 46px var(--pd-teak), 0 2px 0 46px var(--pd-teak-dark)}
.uk-pd-plate{position:relative;z-index:2;grid-row:1;display:grid;grid-template-rows:auto auto;overflow:hidden;border:1px solid var(--pd-line);border-radius:var(--pd-radius);background:#241B10}
.uk-pd-portrait{position:relative;height:min(40svh,272px);overflow:hidden;background:#2C2113}
.uk-pd-portrait img{width:100%;height:100%;object-fit:cover;object-position:var(--pd-focus-mobile-x,50%) var(--pd-focus-mobile-y,38%)}
.uk-pd-gate-body{position:relative;padding:26px 22px 24px;text-align:center}
.uk-pd-gate-body h1{margin-top:8px;font-size:clamp(27px,7.6vw,42px)}
.uk-pd-gate-date{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:7px 16px;border:1px solid var(--pd-line);border-radius:999px;font-size:12px;letter-spacing:.08em;color:var(--pd-mist)}
.uk-pd-couple-list{display:grid;gap:8px;margin-top:14px}
.uk-pd-couple-list span{display:grid;gap:2px}
.uk-pd-couple-list small{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--pd-mist)}
.uk-pd-couple-list strong{font-family:var(--pd-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-pd-gate-open{position:relative;display:flex;width:fit-content;margin:18px auto 0;padding:13px 26px;border-color:transparent;background:var(--pd-brass);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. */
.uk-pd-settle{position:absolute;left:8%;right:8%;top:50%;z-index:1;height:var(--pd-beam);
  background:linear-gradient(180deg,var(--pd-teak) 0 62%,var(--pd-teak-dark) 62% 100%);
  opacity:0;pointer-events:none}
.uk-pd-gate.is-seated .uk-pd-settle{animation:uk-pd-seat .8s cubic-bezier(.3,.9,.3,1) forwards}
@keyframes uk-pd-seat{
  from{opacity:.9;transform:translateY(-26px)}
  70%{opacity:.7;transform:translateY(0)}
  to{opacity:0;transform:translateY(0)}}

/* COVER -------------------------------------------------------------------- */
.uk-pd-cover{--pd-wall:#1D170E;--pd-ink:#F1E7D6;--pd-mist:#B8A98F;--pd-moss:#B9C4A0;--pd-brass:#D8B374;--pd-line:rgba(241,231,214,.24);--pd-teak:#AC7E45;--pd-teak-dark:#2E200F;
  position:relative;display:grid;min-height:100svh;background:var(--pd-wall);color:var(--pd-ink)}
.uk-pd-cover-media{position:absolute;inset:0;overflow:hidden}
.uk-pd-cover-image{width:100%;height:100%;object-fit:cover;object-position:var(--pd-focus-mobile-x,50%) var(--pd-focus-mobile-y,38%)}
.uk-pd-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-pd-cover-empty{position:absolute;inset:0;display:grid;place-items:center;background:#241B10}
.uk-pd-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-pd-cover-empty-mark{position:relative;font-family:var(--pd-display);font-size:23px;letter-spacing:.2em;padding:10px 18px;border:1px solid var(--pd-line);border-radius:999px;color:#E6E9E2}
.uk-pd-cover-panel{position:relative;align-self:end;padding:40px calc(var(--pd-post) + var(--pd-gap) * 2) 56px;text-align:center}
.uk-pd-cover-panel h1{margin-top:8px;font-size:clamp(29px,8.4vw,52px)}
.uk-pd-cover-date{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:7px 16px;border:1px solid var(--pd-line);border-radius:999px;font-size:12px;letter-spacing:.08em;color:var(--pd-mist)}

/* THE READING COLUMN inside a bay -----------------------------------------
   The column is held within the zone's bearing span, so it narrows with the
   room rather than running the full width of the hall at every depth. */
/* The reading column. A width and nothing else: no card, no border, no
   shadow — the gebyok panels inside it carry the frame, and a second frame
   around the whole column would fight them. */
.uk-pd-column{position:relative;width:min(100%,780px);margin-inline:auto;color:var(--pd-ink)}
/* A carpentered heading. The peg is the joinery mark a carpenter leaves where
   two members meet — drawn in the timber's own two tones so it reads as a dowel
   driven through the board rather than a bullet printed on it. */
.uk-pd-carpentered{position:relative;padding-left:22px}
.uk-pd-carpentered::before{content:"";position:absolute;left:0;top:.55em;
  width:11px;height:11px;border-radius:2px;
  background:radial-gradient(circle at 34% 32%,var(--pd-teak) 0 46%,var(--pd-teak-dark) 47% 100%);
  box-shadow:0 0 0 1px rgba(36,28,18,.26)}
.uk-pd-joint{position:absolute;right:18px;top:16px;font-family:var(--pd-display);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--pd-mist)}
.uk-pd-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-pd-head,.uk-pd-body{max-width:min(100%,620px);margin-inline:auto}
.uk-pd-body{position:relative;z-index:1}
.uk-pd-body h2{font-size:clamp(22px,5.2vw,32px)}
.uk-pd-body h3{font-size:18px}
.uk-pd-body h4{font-size:17px}
.uk-pd-narrow{width:min(100%,600px);margin-inline:auto;text-align:center}

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

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

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

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

/* GALLERY: the photographs fill the bays between the posts -----------------
   A full-span photograph heads each group and the two under it share the next
   bay, divided by a saka penanggap — the minor post that carries a split bay in
   a real pendapa. A cycle of three fills exactly two bays, every time. A cycle
   of four leaves three half-bay photographs to pair off two at a time, and the
   third stands alone beside an empty half; that was measured in an earlier
   family, not reasoned about. */
.uk-pd-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(--pd-mist)}
.uk-pd-gallery-tools div{display:flex;gap:8px}
.uk-pd-gallery-tools button{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--pd-line);border-radius:var(--pd-radius-sm);background:transparent;cursor:pointer}
.uk-pd-gallery{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--pd-post) * .7);margin-top:22px}
/* The saka penanggap standing in the gap between two photographs that share a
   bay. It is drawn on the LEFT-HAND photograph reaching into the gap, so it
   appears once per split bay rather than once per photograph. */
.uk-pd-bay-photo:nth-child(3n+2):not(:last-child)::before{content:"";position:absolute;
  top:0;bottom:0;right:calc(-1 * var(--pd-post) * .7);width:calc(var(--pd-post) * .7);
  z-index:2;pointer-events:none;
  background:linear-gradient(90deg,var(--pd-teak-dark) 0 26%,var(--pd-teak) 26% 72%,var(--pd-teak-dark) 72% 100%)}
/* No overflow clip here: the saka penanggap is drawn reaching INTO the gap
   between two photographs, and a clip on the figure cuts it off — measured at
   exactly the wall colour, which is what a post that is not drawn looks like.
   The rounding moves to the image, which fills the figure anyway. */
.uk-pd-bay-photo{position:relative;grid-column:span 2;margin:0;background:var(--pd-panel)}
/* The head photograph spans the whole bay; the two under it share the next. */
.uk-pd-bay-photo:nth-child(3n+1){grid-column:1/-1}
.uk-pd-bay-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--pd-radius-sm)}
/* The frame the photograph is set into, drawn ON TOP of it. An inset shadow on
   the figure is painted beneath its own content, so the photo covers it and the
   bay reads as a print laid on the wall instead of framed into the structure. */
.uk-pd-bay-photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 2px var(--pd-teak-dark), inset 0 0 0 4px var(--pd-teak)}
.uk-pd-bay-photo:nth-child(3n+1) img{aspect-ratio:16/9}
.uk-pd-bay-photo button{position:absolute;right:8px;bottom:8px;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:rgba(26,29,25,.74);color:#DEDFD9;cursor:pointer}
/* The one position a group can end on and leave a photograph alone: the first of
   the two under the head. It takes the whole bay instead, with the head's wide
   crop — at its own 4/5 portrait a full-bay photograph came out three times the
   height of everything above it. */
.uk-pd-bay-photo:last-child:nth-child(3n+2){grid-column:1/-1}
.uk-pd-bay-photo:last-child:nth-child(3n+2) img{aspect-ratio:16/9}

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

/* CLOSING: the dalem, the innermost room -------------------------------------------------- */
.uk-pd-closing{--pd-wall:#1B1509;--pd-ink:#F3E9D8;--pd-mist:#BCAA90;--pd-moss:#B9C4A0;--pd-brass:#D8B374;--pd-line:rgba(243,233,216,.22);--pd-panel:#251C0F;--pd-teak:#AE8048;--pd-teak-dark:#30220F;
  position:relative;padding:72px calc(var(--pd-post) + var(--pd-gap) * 2) 88px;
  background:var(--pd-wall);color:var(--pd-ink);text-align:center;scroll-margin-top:16px}
.uk-pd-closing h2{font-size:clamp(24px,6vw,36px)}
.uk-pd-closing-mark{display:grid;place-items:center;width:64px;height:64px;margin:20px auto 0;border:2px solid var(--pd-moss);border-radius:50%;font-family:var(--pd-display);font-size:14px;letter-spacing:.16em;color:var(--pd-moss);
  box-shadow:0 0 0 5px rgba(168,191,164,.16)}
.uk-pd-closing-share{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}

/* THE BEAMS OVERHEAD: the chapter index along the TOP edge ----------------
   Every bay is carried on a beam, and this is all of those beams seen at once,
   overhead, the way you see them standing in a pendapa and looking up. The bay
   being read is the heavy one.

   It is the first index in this catalogue on the top edge — the other eighteen
   run down an edge or along the foot — and a top index sits over the READING
   LINE rather than beside it. So the content reserves its height rather than
   scrolling under it, at every breakpoint, and the row scrolls sideways within
   its own height when there are more chapters than fit. */
#uk-pd-content{padding-top:var(--pd-top-w)}
.uk-pd-beams{position:fixed;left:0;right:0;top:0;z-index:26;display:flex;align-items:stretch;
  height:var(--pd-top-w);max-height:var(--pd-top-w);
  padding:0 6px;background:rgba(27,20,8,.94);border-bottom:2px solid var(--pd-teak);color:#F3E9D8}
/* The wall plate the beams all bear on, running the width of the hall. */
.uk-pd-beams-line{position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(243,233,216,.34)}
.uk-pd-beam-list{position:relative;list-style:none;display:flex;align-items:stretch;gap:0;margin:0;padding:0;
  /* The beams are what gives way when the row runs out of width, so min-width:0
     lets this shrink below its content and scroll instead of pushing the name
     off the end. The vertical version of this rule was paid for in a previous
     release; the axis is the only thing that changed. */
  flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.uk-pd-beam-list::-webkit-scrollbar{display:none}
/* A full-height column of the row, not the beam it draws — the beam is 3px tall
   and nobody can press 3px. */
/* The item stretches to the row and the button fills the item, so the target is
   the WHOLE height of the row at every width. Left to height:100% alone with an
   item that never stretched, this measured 40x9 at 390px — the height of the
   beam it draws, which is not a target. min-height is the floor under that. */
.uk-pd-beam-item{display:flex;align-items:stretch}
.uk-pd-beam-item button{display:grid;place-items:center;flex:0 0 auto;min-width:40px;
  height:100%;min-height:38px;
  border:0;background:transparent;color:inherit;cursor:pointer;padding:0 4px}
/* A beam seen end-on. The one being read is thicker and takes the lit timber
   face; the rest are the dark side. Both differ from the row behind them. */
.uk-pd-beam-item button i{display:block;width:22px;height:3px;background:rgba(243,233,216,.34);
  transition:height .28s ease,width .28s ease,background .28s ease}
.uk-pd-beam-item button.is-active i{height:var(--pd-beam);width:30px;background:var(--pd-teak)}
.uk-pd-beam-item button:hover i{height:5px;background:rgba(243,233,216,.6)}
/* The bay being read, named along the row rather than turned on its side —
   there is width here and no height, which is the opposite of an edge index. */
.uk-pd-standing{display:none;
  /* flex:0 0 auto, never flex:1. In a row that already gave its slack to the
     beams, a name asking for leftover space is drawn a few pixels wide. */
  flex:0 0 auto;min-width:0;margin:0 4px 0 10px;padding:0;align-self:center;
  font-family:var(--pd-display);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--pd-brass);
  pointer-events:none;white-space:nowrap;max-width:38vw;overflow:hidden;text-overflow:ellipsis}

/* Controls rail, share sheet, lightbox, toast ----------------------------- */
.uk-pd-rail{position:fixed;right:14px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:24;display:grid;gap:8px;justify-items:center}
.uk-pd-rail-toggle,.uk-pd-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-pd-rail-panel{display:grid;gap:8px;justify-items:center}
.uk-pd-sheet,.uk-pd-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-pd-sheet.is-open,.uk-pd-lightbox.is-open{opacity:1;visibility:visible}
.uk-pd-sheet-panel{width:min(100%,430px);padding:22px;border:1px solid var(--pd-moss);border-radius:var(--pd-radius);background:#DEDFD9;color:#20251F}
.uk-pd-share-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:16px}
.uk-pd-share-grid button{display:flex;align-items:center;gap:8px;padding:11px 13px;border:1px solid rgba(32,37,31,.16);border-radius:var(--pd-radius-sm);background:transparent;color:inherit;cursor:pointer;font-size:13px}
.uk-pd-sheet-close{width:100%;margin-top:14px}
.uk-pd-lightbox-panel{position:relative;width:min(100%,780px)}
.uk-pd-lightbox-panel img{width:100%;max-height:76svh;object-fit:contain;border-radius:var(--pd-radius);transition:opacity .2s ease}
.uk-pd-lightbox.is-switching .uk-pd-lightbox-panel img{opacity:0}
.uk-pd-lightbox-counter{margin-top:12px;color:#E6E9E2;font-size:12px;letter-spacing:.16em;text-align:center}
.uk-pd-lightbox-close,.uk-pd-lightbox-prev,.uk-pd-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-pd-lightbox-close{top:-52px;right:0}
.uk-pd-lightbox-prev{left:6px;top:50%;transform:translateY(-50%)}
.uk-pd-lightbox-next{right:6px;top:50%;transform:translateY(-50%)}
.uk-pd-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-pd-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-pd-reveal{opacity:0;transform:translateY(var(--pd-lift));transition:opacity .7s ease,transform .7s cubic-bezier(.22,.78,.2,1)}
.uk-pd-reveal.is-visible{opacity:1;transform:none}
/* The beam of a bay that has not seated yet sits high and light. */
.uk-pd-reveal .uk-pd-beam{opacity:0;transform:translateY(calc(-2 * var(--pd-beam)));
  transition:opacity .42s ease,transform .52s cubic-bezier(.3,1.5,.5,1)}
.uk-pd-reveal.is-visible .uk-pd-beam{opacity:1;transform:none}
.uk-pd-reveal-item{opacity:0;transform:translateY(12px);
  transition:opacity .58s ease .14s,transform .58s ease .14s}
.uk-pd-reveal.is-visible .uk-pd-reveal-item{opacity:1;transform:none}

/* Design controls ---------------------------------------------------------- */
.uk-design-palette-template.uk-pendapa{--pd-wall:#EDE7DB;--pd-ink:#241C12;--pd-mist:#665847;--pd-moss:#4E5B3F;--pd-brass:#7A5A22;--pd-panel:#E3DACA;--pd-teak:#8A6338;--pd-teak-dark:#4E3620}
.uk-design-palette-warm.uk-pendapa{--pd-wall:#F2E7CE;--pd-ink:#2B2113;--pd-mist:#6A5B3D;--pd-moss:#6E5A33;--pd-brass:#7A5B24;--pd-panel:#E6D8B9;--pd-teak:#97672E;--pd-teak-dark:#54361A}
.uk-design-palette-warm .uk-pd-closing{--pd-wall:#2A2418;--pd-ink:#F6F0E2;--pd-mist:#BDB49A;--pd-moss:#CFC08C;--pd-brass:#D3B184;--pd-panel:#191509;--pd-teak:#B98B4C;--pd-teak-dark:#4A3113}
.uk-design-palette-romantic.uk-pendapa{--pd-wall:#F0DFDC;--pd-ink:#2E1D1C;--pd-mist:#6A5150;--pd-moss:#8C4351;--pd-brass:#7E5744;--pd-panel:#E4D0CD;--pd-teak:#98603F;--pd-teak-dark:#4F2E1E}
.uk-design-palette-romantic .uk-pd-closing{--pd-wall:#2B1F20;--pd-ink:#F6E7E8;--pd-mist:#C0A5A8;--pd-moss:#DDA3AE;--pd-brass:#D2A294;--pd-panel:#1A1213;--pd-teak:#B07B5C;--pd-teak-dark:#4A2A1D}
.uk-design-palette-sage.uk-pendapa{--pd-wall:#E4E8DC;--pd-ink:#1E2620;--pd-mist:#55604F;--pd-moss:#3D5C42;--pd-brass:#655E3C;--pd-panel:#D8DECE;--pd-teak:#7C6236;--pd-teak-dark:#45351C}
.uk-design-palette-sage .uk-pd-closing{--pd-wall:#1E2620;--pd-ink:#E9F0E6;--pd-mist:#AFBCAD;--pd-moss:#AEC7A8;--pd-brass:#C9BB8E;--pd-panel:#121710;--pd-teak:#A98A54;--pd-teak-dark:#3E2F18}
.uk-design-palette-midnight.uk-pendapa{--pd-wall:#1A160F;--pd-ink:#EFE6D6;--pd-mist:#A79A85;--pd-moss:#A8BFA4;--pd-brass:#C8B184;--pd-line:rgba(239,230,214,.2);--pd-panel:#241D12;--pd-teak:#A97C46;--pd-teak-dark:#3A2713}
.uk-design-palette-midnight .uk-pd-closing{--pd-wall:#1A160F;--pd-ink:#EFE6D6;--pd-mist:#A79A85;--pd-moss:#A8BFA4;--pd-brass:#C8B184;--pd-panel:#15100A;--pd-teak:#A97C46;--pd-teak-dark:#3A2713}
.uk-design-type-classic .uk-pd-body h2,.uk-design-type-classic .uk-pd-gate-body h1{font-family:var(--pd-display)}
.uk-design-type-modern .uk-pd-body h2,.uk-design-type-modern .uk-pd-gate-body h1,.uk-design-type-modern .uk-pd-cover-panel h1{font-family:var(--pd-sans);letter-spacing:.02em}
.uk-design-type-editorial .uk-pd-body h2{font-size:clamp(26px,6.4vw,40px);letter-spacing:-.01em}
.uk-design-type-editorial .uk-pd-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 pendapa — 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-pendapa{--pd-post:10px;--pd-beam:7px;--pd-radius:10px;--pd-radius-sm:6px}
.uk-design-surface-balanced .uk-pendapa{--pd-post:14px;--pd-beam:9px;--pd-radius:5px;--pd-radius-sm:3px}
.uk-design-surface-sharp .uk-pendapa{--pd-post:19px;--pd-beam:12px;--pd-radius:0px;--pd-radius-sm:0px}
.uk-design-gallery-grid .uk-pd-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow-x:visible}
.uk-design-gallery-filmstrip .uk-pd-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-pd-bay-photo,
.uk-design-gallery-filmstrip .uk-pd-bay-photo:nth-child(3n+1),
.uk-design-gallery-filmstrip .uk-pd-bay-photo:nth-child(3n+2),
.uk-design-gallery-filmstrip .uk-pd-bay-photo:nth-child(3n+3),
.uk-design-gallery-filmstrip .uk-pd-bay-photo:last-child:nth-child(3n+2){flex:0 0 auto;grid-column:auto;width:min(62vw,240px);scroll-snap-align:center}
.uk-design-gallery-filmstrip .uk-pd-bay-photo img,
.uk-design-gallery-filmstrip .uk-pd-bay-photo:nth-child(3n+1) img,
.uk-design-gallery-filmstrip .uk-pd-bay-photo:last-child:nth-child(3n+2) img{aspect-ratio:4/5}
.uk-design-gallery-editorial .uk-pd-gallery{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;overflow-x:visible}
.uk-design-gallery-editorial .uk-pd-bay-photo,
.uk-design-gallery-editorial .uk-pd-bay-photo:nth-child(3n+1),
.uk-design-gallery-editorial .uk-pd-bay-photo:last-child:nth-child(3n+2){grid-column:1/-1}
.uk-design-gallery-editorial .uk-pd-bay-photo img,
.uk-design-gallery-editorial .uk-pd-bay-photo:nth-child(3n+1) img,
.uk-design-gallery-editorial .uk-pd-bay-photo:last-child:nth-child(3n+2) img{aspect-ratio:3/2}
.uk-design-motion-soft .uk-pendapa{--pd-lift:22px}
.uk-design-motion-cinematic .uk-pendapa{--pd-lift:36px}
.uk-design-motion-minimal .uk-pendapa{--pd-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-pd-reveal,.uk-design-motion-minimal .uk-pd-reveal-item,
.uk-design-motion-minimal .uk-pd-reveal .uk-pd-beam{opacity:1;transform:none;transition:none}
.uk-design-motion-minimal .uk-pd-gate.is-seated .uk-pd-settle{animation:none}

/* Wider viewports ---------------------------------------------------------- */
@media(min-width:760px){
.uk-pendapa{font-size:17px;--pd-top-w:58px;--pd-gap:16px}
.uk-pd-bay{padding:var(--pd-beam) calc(var(--pd-post) + var(--pd-gap) * 2) 40px}
.uk-pd-column{width:min(100%,780px)}
.uk-pd-portrait{height:min(38svh,296px)}
.uk-pd-portrait img,.uk-pd-cover-media .uk-pd-cover-image{object-position:var(--pd-focus-desktop-x,50%) var(--pd-focus-desktop-y,42%)}
.uk-pd-cover-panel{padding:56px calc(var(--pd-post) + var(--pd-gap) * 2) 74px}
.uk-pd-ceiling{width:min(100%,540px)}
.uk-pd-event{grid-template-columns:42px minmax(0,1fr);gap:16px;padding:24px}
.uk-pd-closing{padding:96px calc(var(--pd-post) + var(--pd-gap) * 2) 112px}
.uk-pd-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-pd-gallery{grid-template-columns:repeat(4,minmax(0,1fr))}
.uk-design-gallery-editorial .uk-pd-gallery{grid-template-columns:minmax(0,1fr)}
.uk-design-gallery-filmstrip .uk-pd-gallery{grid-template-columns:none}
}
@media(min-width:1100px){
.uk-pd-column{width:min(100%,900px)}
.uk-pd-bay{padding:var(--pd-beam) calc(var(--pd-post) + var(--pd-gap) * 2) 52px}
.uk-pd-closing{padding:112px calc(var(--pd-post) + var(--pd-gap) * 2) 124px}
.uk-design-gallery-grid .uk-pd-gallery{grid-template-columns:repeat(4,minmax(0,1fr))}
.uk-design-gallery-editorial .uk-pd-gallery{grid-template-columns:minmax(0,1fr)}
.uk-design-gallery-filmstrip .uk-pd-gallery{grid-template-columns:none}
}

/* Narrow phones ------------------------------------------------------------ */
@media(max-width:560px){
.uk-pd-count{grid-template-columns:repeat(2,minmax(0,1fr))}
.uk-pd-people{grid-template-columns:minmax(0,1fr);gap:24px}
.uk-pd-accounts,.uk-pd-contacts{grid-template-columns:minmax(0,1fr)}
.uk-pd-share-grid{grid-template-columns:minmax(0,1fr)}
.uk-pd-lightbox-close{top:auto;bottom:-52px;right:50%;transform:translateX(50%)}
}
@media(max-width:360px){
.uk-pendapa{--pd-top-w:42px;--pd-gap:6px}
.uk-pd-bay{padding:var(--pd-beam) calc(var(--pd-post) + var(--pd-gap) * 2) 22px}
.uk-pd-closing{padding:52px calc(var(--pd-post) + var(--pd-gap) * 2) 66px}

.uk-pd-event{grid-template-columns:minmax(0,1fr);gap:10px}
.uk-design-gallery-grid .uk-pd-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
.uk-design-gallery-editorial .uk-pd-gallery{grid-template-columns:minmax(0,1fr)}
.uk-design-gallery-filmstrip .uk-pd-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-pd-cover{min-height:100svh}
.uk-pd-cover-panel{padding:22px calc(var(--pd-post) + var(--pd-gap) * 2) 30px}
.uk-pd-cover-panel h1{font-size:clamp(22px,5.2vw,30px)}
.uk-pd-cover-empty-mark{font-size:17px;padding:8px 14px}
.uk-pd-gate{padding:12px}
.uk-pd-portrait{height:min(23svh,136px)}
.uk-pd-gate-body{padding:16px 16px 14px}
.uk-pd-gate-body h1{font-size:clamp(20px,4.4vw,26px)}
.uk-pd-sari{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-pendapa{--pd-top-w:40px}
.uk-pd-beam-item button{min-width:44px}
.uk-pd-standing{font-size:11px;letter-spacing:.14em;max-width:30vw}
.uk-pd-rail{bottom:calc(10px + env(safe-area-inset-bottom))}
}
@media(max-height:620px) and (min-width:1025px){
.uk-pd-portrait{height:min(28svh,190px)}
.uk-pendapa{--pd-top-w:46px}
}

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