/* Seserahan — Romance Flagship 1.0.0
 * A wedding invitation carried in as a procession of gift trays.
 *
 * At a seserahan the gifts arrive on trays of different sizes, and what is on a
 * tray is arranged to fit THAT TRAY — not the room it is carried into. A wide
 * tray lays its contents out in a row; a small one stacks them. So does this.
 *
 * That is the signature, and it is the one thing no other family in this
 * catalogue does. All thirty-four of them lay a section out according to how
 * wide the WINDOW is, so on one phone screen every section gets the same answer.
 * Here each section is a tray with a width of its own and a containment context
 * of its own, and its contents are laid out by asking the TRAY how wide it is.
 * Three tray widths on one screen therefore give three different arrangements at
 * the same time — which a viewport media query cannot express at all.
 *
 * How wide a tray is comes from how much is on it, counted from what the
 * customer actually entered. A section with five events gets a full tray; one
 * holding a single line gets a slim one.
 *
 * Three things here are easy to get wrong and invisible in a stylesheet read.
 *
 * A TRAY THAT IS NOT A CONTAINER. @container only answers for an element that
 * declares container-type, and a query naming a container-name nothing carries
 * matches nothing at all. Either way the offerings quietly fall back to their
 * one-column default and every rule in the file still reads correctly.
 *
 * TWO AUTHORITIES ON ONE ARRANGEMENT. If a wrapper also declares its own
 * grid-template-columns — in its own rule or in a viewport breakpoint — the
 * later one wins and the tray is answering a question nobody is listening to.
 * Nothing in this file sets columns on an offering except the @container block.
 *
 * AND A CONTAINER THAT IS NOT THE BOX THE CONTENTS SIT IN. If anything inside a
 * tray re-caps the width, the query answers for the tray while the offering is
 * laid out in something narrower — a four-across answer crammed into a column
 * half that wide. Inside a tray nothing caps the measure but the tray.
 *
 * All three are measured in a browser: the container width each tray actually
 * produces, and the arrangement its offering actually resolved to.
 *
 * Every surface declares its own cloth AND its own ink in the same rule, so a
 * palette can never leave text the colour of what is behind it.
 */

/* Tokens ------------------------------------------------------------------- */
.uk-seserahan{
  /* The cloth everything is set down on, the lacquer of the trays, the brass
     they are trimmed with, and the sirih green of what is laid on them. */
  --ss-cloth:#F7F1E7;--ss-ink:#2A1F1C;--ss-muted:#6E5C55;--ss-sirih:#3F5A3C;--ss-lacquer:#7B2E2A;
  --ss-line:rgba(42,31,28,.16);--ss-tray:#EDE2D2;
  --ss-rattan:#8A5A2B;--ss-brass:#C69A4E;
  --ss-radius:8px;--ss-radius-sm:4px;--ss-measure:56ch;
  /* THE THREE TRAY WIDTHS. A seserahan is carried in on trays of different
     sizes, and what is on a tray is arranged to fit THAT TRAY, not the room.
     These three widths are what the trays are asked about; the arrangement
     rules live in the @container blocks, not here. */
  /* A FLOOR AS WELL AS A CEILING. As bare percentages the slim tray came out
     130px wide inside its padding at a 320px phone, and a contact button spilled
     27px past the edge of it. Each width is clamped between a readable minimum
     and its cap; on a narrow phone the three converge, which is the honest
     answer — there is no room for three different widths AND readable text. */
  --ss-tray-full:min(100%,680px);
  --ss-tray-broad:clamp(min(100%,316px),82%,520px);
  --ss-tray-slim:clamp(min(100%,292px),62%,368px);
  --ss-col-w:44px;        /* the stack index's own gutter, reserved by every tray */
  --ss-lift:20px;
  --ss-display:"Lora",Georgia,Cambria,"Times New Roman",serif;
  --ss-sans:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  position:relative;background:var(--ss-cloth);color:var(--ss-ink);
  font-family:var(--ss-sans);font-size:16px;line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
[hidden]{display:none !important}
.uk-seserahan *,.uk-seserahan *::before,.uk-seserahan *::after{box-sizing:border-box}
.uk-seserahan 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-seserahan figure{margin:0}
.uk-seserahan h1,.uk-seserahan h2,.uk-seserahan h3,.uk-seserahan h4{font-family:var(--ss-display);font-weight:600;line-height:1.2;margin:0}
.uk-seserahan p{margin:0}
/* :where() so this stays a DEFAULT. As ".uk-seserahan 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-seserahan :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-ss-eyebrow{font-size:11px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--ss-sirih)}
.uk-ss-rule{display:block;width:min(100%,78px);height:1px;margin:10px 0;background:var(--ss-sirih);opacity:.6}
.uk-ss-rule.is-center{margin-left:auto;margin-right:auto}
.uk-ss-copy{max-width:var(--ss-measure);margin-top:14px;color:var(--ss-muted);font-size:15px}
.uk-ss-lead{max-width:var(--ss-measure);margin-top:12px;font-family:var(--ss-display);font-size:20px;color:var(--ss-ink)}
.uk-ss-preline{white-space:pre-line}
.uk-ss-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.uk-ss-signature{margin-top:16px;font-family:var(--ss-display);font-size:22px;color:var(--ss-ink)}
.uk-ss-quote{max-width:var(--ss-measure);margin-top:20px;padding:16px 20px;border-left:2px solid var(--ss-sirih);border-radius:0 3px 3px 0;color:var(--ss-ink);font-family:var(--ss-display);font-size:17px;font-style:italic}
.uk-ss-quote cite{display:block;margin-top:10px;font-family:var(--ss-sans);font-size:12px;font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--ss-muted)}
.uk-ss-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(--ss-muted)}
.uk-ss-occasions span+span::before{content:"·";padding-right:6px;font-size:14px;color:var(--ss-lacquer)}
.uk-ss-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border:1px solid var(--ss-sirih);border-radius:999px;background:transparent;color:var(--ss-ink);font-size:13px;font-weight:600;letter-spacing:.06em;text-decoration:none;cursor:pointer;transition:transform .25s ease,background .25s ease}
.uk-ss-button:hover{transform:translateY(-1px);box-shadow:inset 0 -2px 0 var(--ss-brass)}
/* The label is --ss-cloth, not a fixed cream. The fill is --ss-sirih, and moss is
   always picked to contrast the screen it sits on — so this pair inverts with the
   surface instead of staying light. As a fixed #FBF6EA it measured 1.83:1 in the
   dark closing of every palette whose moss goes light there. */
.uk-ss-button.is-solid{border-color:transparent;background:var(--ss-sirih);color:var(--ss-cloth)}
.uk-ss-button:focus-visible,.uk-seserahan button:focus-visible,.uk-seserahan a:focus-visible{outline:2px solid var(--ss-lacquer);outline-offset:3px}

/* THE CLOTH AND THE TRAYS ------------------------------------------------
   The procession is laid out on one cloth, and every tray is set down on it.

   THE TRAY IS THE SIGNATURE, and it is the one thing no other family here does:
   all thirty-four of them arrange a section by asking how wide the WINDOW is, so
   on one screen every section gets the same answer. A tray carries a containment
   context, so what is laid on it asks the TRAY instead — and three tray widths
   on one screen give three arrangements at once.

   @container only answers for an element that declares container-type, and a
   query naming a container-name nothing carries matches nothing at all. Either
   way the offerings fall back to one column and every rule here still reads
   correctly, so both are asserted and both are measured in a browser. */
.uk-ss-procession{position:relative;background:var(--ss-cloth);
  /* The weave of the cloth, just enough that it reads as cloth and not paper. */
  background-image:repeating-linear-gradient(90deg,rgba(42,31,28,.02) 0 1px,transparent 1px 8px)}

/* A TRAY. It reserves the stack's gutter, takes one of three widths, and — this
   is the whole family — it is a CONTAINMENT CONTEXT, so what is laid on it can
   be asked how wide IT is rather than how wide the screen is. */
.uk-ss-tray{position:relative;z-index:1;margin:0 auto;
  width:var(--ss-w,var(--ss-tray-full));
  padding:34px calc(var(--ss-col-w) + 12px) 40px 16px;
  background:transparent;scroll-margin-top:16px;
  container-type:inline-size;container-name:tray}
.uk-ss-tray.is-full{--ss-w:var(--ss-tray-full)}
.uk-ss-tray.is-broad{--ss-w:var(--ss-tray-broad)}
.uk-ss-tray.is-slim{--ss-w:var(--ss-tray-slim)}

/* The rattan rim. A tray is a tray because it has an edge; without one these are
   just three paragraph widths. Drawn in the woven colour, never in the cloth's. */
.uk-ss-tray::before{content:"";position:absolute;inset:14px calc(var(--ss-col-w) + 4px) 18px 6px;
  z-index:-1;pointer-events:none;border:1px solid var(--ss-rattan);border-radius:var(--ss-radius);
  opacity:.34}

/* The reading column. A width and nothing else: the shape belongs to the floats
   inside it, and a frame here would draw a rectangle around a column whose whole
   point is that it is not one. */
/* The TRAY is the measure. Nothing inside it may re-cap the width, or the
   container query asks the tray how wide it is while the offering actually sits
   in a narrower box — a three-across answer crammed into a 620px column. */
.uk-ss-column{position:relative;width:100%;color:var(--ss-ink)}
/* The body of a tray establishes its own formatting context, so nothing inside
   one can spill into the tray that follows it. */
.uk-ss-body{display:flow-root}
/* Prose takes the shape; STRUCTURE does not. A grid, a list or a figure
   establishes its own formatting context and would simply be squeezed narrow by
   the wedge instead of flowing around it — a gallery pushed to two-thirds width
   for its first 150px and nobody able to say why. These start below it. */
.uk-ss-body > div,.uk-ss-body > ul,.uk-ss-body > ol,
.uk-ss-body > figure,.uk-ss-body > table,.uk-ss-body > form{clear:both}

/* A panel of content, thrown on the cloth like everything else. */
.uk-ss-entry,.uk-ss-event,.uk-ss-count div,.uk-ss-streams a,
.uk-ss-accounts article,.uk-ss-contacts article,.uk-ss-faq details{
  position:relative;background:var(--ss-tray);border-radius:var(--ss-radius-sm);
  box-shadow:inset 0 0 0 1px var(--ss-line)}

/* GATE: the tray still covered -------------------------------------------
   Nothing has been handed over yet. The tray is set down with the invitation
   card on it and a cloth laid over the whole thing; lifting that cloth is what
   begins a seserahan, so that is what the button does.

   The tray and the cloth are both drawn well PAST the card, for a reason paid
   for in an earlier release: a shape no wider than the card is hidden behind it
   and reads as nothing at all. */
.uk-ss-gate{--ss-cloth:#241316;--ss-ink:#F7EDE8;--ss-muted:#C7AAA4;--ss-sirih:#AFC4A6;--ss-lacquer:#E8B27A;--ss-tray:#331B1E;--ss-rattan:#5A3420;--ss-brass:#EFC98F;--ss-line:rgba(247,237,232,.22);
  position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:20px;background:#1A0D11;color:var(--ss-ink);transition:opacity .7s ease,visibility .7s ease}
.uk-ss-gate.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.uk-ss-stage{position:relative;display:grid;grid-template-rows:auto auto;place-items:center;width:min(100%,460px)}
/* THE TRAY THE INVITATION IS CARRIED IN ON. A shallow lacquer dish with a woven
   rattan rim, set down behind the card. It is drawn in the rattan colour, never
   in the gate's own — a shape painted the colour of what is behind it draws
   nothing, which is the trap this catalogue has fallen into ten times. */
.uk-ss-clothfield{position:absolute;left:50%;top:50%;z-index:0;
  width:min(96vw,620px);height:min(72vh,520px);
  transform:translate(-50%,-46%);pointer-events:none}
.uk-ss-clothfield::before{content:"";position:absolute;inset:0;
  border-radius:28px/22px;
  background:radial-gradient(ellipse 72% 60% at 50% 42%,var(--ss-tray) 0 58%,transparent 78%);
  box-shadow:inset 0 0 0 3px var(--ss-rattan),inset 0 0 0 10px rgba(247,237,232,.06),
             0 26px 60px rgba(0,0,0,.48)}
/* The woven rim, drawn as the weave itself rather than a plain ring. */
.uk-ss-clothfield::after{content:"";position:absolute;inset:6px;border-radius:24px/19px;
  border:2px solid var(--ss-brass);opacity:.42;
  background:repeating-linear-gradient(45deg,rgba(198,154,78,.16) 0 3px,transparent 3px 8px),
             repeating-linear-gradient(-45deg,rgba(198,154,78,.12) 0 3px,transparent 3px 8px)}

.uk-ss-plate{position:relative;z-index:2;grid-row:1;display:grid;grid-template-rows:auto auto;overflow:hidden;border:1px solid var(--ss-line);border-radius:var(--ss-radius);background:#30191E}
.uk-ss-portrait{position:relative;height:min(40svh,272px);overflow:hidden;background:#3A1F25}
.uk-ss-portrait img{width:100%;height:100%;object-fit:cover;object-position:var(--ss-focus-mobile-x,50%) var(--ss-focus-mobile-y,38%)}
.uk-ss-gate-body{position:relative;padding:26px 22px 24px;text-align:center}
.uk-ss-gate-body h1{margin-top:8px;font-size:clamp(27px,7.6vw,42px)}
.uk-ss-gate-date{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:7px 16px;border:1px solid var(--ss-line);border-radius:999px;font-size:12px;letter-spacing:.08em;color:var(--ss-muted)}
.uk-ss-couple-list{display:grid;gap:8px;margin-top:14px}
.uk-ss-couple-list span{display:grid;gap:2px}
.uk-ss-couple-list small{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ss-muted)}
.uk-ss-couple-list strong{font-family:var(--ss-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-ss-gate-open{position:relative;display:flex;width:fit-content;margin:18px auto 0;padding:13px 26px;border-color:transparent;background:var(--ss-lacquer);color:#231115;font-size:14px;
  box-shadow:0 0 0 4px rgba(216,179,116,.2)}
/* WHAT THE GATE DOES WHEN IT OPENS: the cloth is lifted off the tray. It is the
   one gesture the whole family is named for, so it is a real covering — a panel
   the width of the tray, not a glow — and it travels UP and off.

   BEHIND the card, never over it. At z-index:3 it covered the invitation itself:
   the names, the date and the button all came up dimmed to the point of being
   unreadable, and the one thing a gate has to do is let someone read the card and
   press the button. The cloth covers what is ON the tray, which is what a
   seserahan cloth actually covers. */
.uk-ss-lift{position:absolute;left:50%;top:50%;z-index:1;
  width:min(96vw,620px);height:min(72vh,520px);
  transform:translate(-50%,-46%);transform-origin:50% 100%;
  opacity:.94;pointer-events:none;border-radius:26px/20px;
  background:linear-gradient(170deg,var(--ss-brass) 0%,var(--ss-lacquer) 52%,var(--ss-rattan) 100%);
  box-shadow:0 18px 40px rgba(0,0,0,.42)}
.uk-ss-gate.is-drawn .uk-ss-lift{animation:uk-ss-lift .92s cubic-bezier(.3,.9,.3,1) forwards}
@keyframes uk-ss-lift{
  from{opacity:.94;transform:translate(-50%,-46%) rotateX(0deg)}
  55%{opacity:.7;transform:translate(-50%,-86%) rotateX(-18deg)}
  to{opacity:0;transform:translate(-50%,-136%) rotateX(-34deg)}}

/* COVER -------------------------------------------------------------------- */
/* Night lacquer. The scrim below is the same colour this token names, so the
   photograph fades into the cover rather than onto a different black. */
.uk-ss-cover{--ss-cloth:#26151A;--ss-ink:#F7EDE8;--ss-muted:#C7AAA4;--ss-sirih:#AFC4A6;--ss-lacquer:#E8B27A;--ss-tray:#351D22;--ss-rattan:#5A3420;--ss-brass:#EFC98F;--ss-line:rgba(247,237,232,.24);
  position:relative;display:grid;min-height:100svh;background:var(--ss-cloth);color:var(--ss-ink)}
.uk-ss-cover-media{position:absolute;inset:0;overflow:hidden}
.uk-ss-cover-image{width:100%;height:100%;object-fit:cover;object-position:var(--ss-focus-mobile-x,50%) var(--ss-focus-mobile-y,38%)}
.uk-ss-cover-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,15,19,.3) 0%,rgba(30,15,19,.78) 60%,#26151A 100%)}
.uk-ss-cover-empty{position:absolute;inset:0;display:grid;place-items:center;background:#30191E}
.uk-ss-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-ss-cover-empty-mark{position:relative;font-family:var(--ss-display);font-size:23px;letter-spacing:.2em;padding:10px 18px;border:1px solid var(--ss-line);border-radius:999px;color:#F7F1E7}
.uk-ss-cover-panel{position:relative;align-self:end;padding:40px calc(var(--ss-col-w) + 12px) 56px;text-align:center}
.uk-ss-cover-panel h1{margin-top:8px;font-size:clamp(29px,8.4vw,52px)}
.uk-ss-cover-date{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:7px 16px;border:1px solid var(--ss-line);border-radius:999px;font-size:12px;letter-spacing:.08em;color:var(--ss-muted)}


.uk-ss-column{position:relative;width:min(100%,780px);margin-inline:auto;color:var(--ss-ink)}
/* A labelled tray. The mark above the heading is the brass of the tray's own
   rim, so a label is tied to the thing it is a label for. It sits ABOVE and centred rather
   than beside: once the title is centred on the point, a mark pinned to left:0 of
   a 620px column hangs alone at the margin a quarter of the width away from the
   words it belongs to, and the 22px of padding it needed pushed the centred text
   11px off the figure it is supposed to sit under. */
.uk-ss-labelled{position:relative}
.uk-ss-labelled::before{content:"";display:block;margin:0 auto 10px;
  width:11px;height:11px;border-radius:2px;
  background:radial-gradient(circle at 34% 32%,var(--ss-brass) 0 46%,var(--ss-rattan) 47% 100%);
  box-shadow:0 0 0 1px rgba(36,28,18,.26)}
.uk-ss-tally{position:absolute;right:18px;top:16px;font-family:var(--ss-display);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ss-muted)}
.uk-ss-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-ss-head,.uk-ss-body{max-width:100%}
.uk-ss-body{position:relative;z-index:1}
.uk-ss-body h2{font-size:clamp(22px,5.2vw,32px)}
/* The title and the line under it are centred on the tray they are set on, the
   way a label sits on a tray rather than off at one corner. Everything below
   them is prose, which reads better ranged left. */
.uk-ss-body > h2,
.uk-ss-body > h2 + p{text-align:center;text-wrap:balance}
.uk-ss-body h3{font-size:18px}
.uk-ss-body h4{font-size:17px}
.uk-ss-narrow{width:min(100%,600px);margin-inline:auto;text-align:center}

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

/* People ------------------------------------------------------------------- */
/* No grid-template-columns here, and none in any breakpoint below: the TRAY
   decides how these are arranged, and a second authority is how a signature
   quietly stops working. Each of these only says how far apart its items sit. */
.uk-ss-people{gap:26px}
.uk-ss-person{text-align:center}
.uk-ss-portrait-round{width:134px;height:134px;margin:0 auto 12px;overflow:hidden;border-radius:50%;background:var(--ss-tray);box-shadow:inset 0 3px 4px rgba(42,31,28,.34),inset 0 -2px 0 var(--ss-brass)}
.uk-ss-portrait-round img{width:100%;height:100%;object-fit:cover}
.uk-ss-portrait-round.is-empty{display:grid;place-items:center}
.uk-ss-portrait-round.is-empty span{font-family:var(--ss-display);font-size:34px;color:var(--ss-sirih)}
.uk-ss-person h4{margin-top:8px;font-size:21px}
.uk-ss-person>strong{display:block;margin-top:2px;font-size:14px;font-weight:600;color:var(--ss-muted)}
.uk-ss-parents{margin-top:8px;color:var(--ss-muted);font-size:14px}
.uk-ss-parents em{font-style:normal;padding:0 5px;color:var(--ss-lacquer)}
.uk-ss-bio{margin-top:8px;color:var(--ss-muted);font-size:14px}
.uk-ss-couples{display:grid;gap:26px;margin-top:20px}
.uk-ss-couple{margin-top:26px}
.uk-ss-couple header{text-align:center;margin-bottom:14px}
.uk-ss-couple header span{font-family:var(--ss-display);font-size:25px;color:var(--ss-lacquer)}
.uk-ss-couple-index{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
.uk-ss-couple-index button{padding:7px 14px;border:1px solid var(--ss-line);border-radius:999px;background:transparent;cursor:pointer}
.uk-ss-couple-index button span{font-size:11px;letter-spacing:.12em;color:var(--ss-lacquer)}

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

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

/* GALLERY: the photographs laid in the tray ------------------------------
   They are laid out the way anything else on a tray is: how many go in a row is
   the TRAY's answer, not the window's. A full tray takes four across, a slim one
   takes one under another, and both can be on the screen at the same time. */
.uk-ss-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(--ss-muted)}
.uk-ss-gallery-tools div{display:flex;gap:8px}
.uk-ss-gallery-tools button{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--ss-line);border-radius:var(--ss-radius-sm);background:transparent;cursor:pointer}
/* THE PHOTOGRAPHS, LAID IN THE TRAY. How many go in a row is the TRAY's answer,
   not the window's — .uk-ss-offering below carries the container query, and this
   rule deliberately declares no grid-template-columns of its own so there is one
   authority and not two. The tray itself is the cloth they are laid on. */
.uk-ss-gallery{position:relative;display:grid;align-items:stretch;
  --ss-gal-gap:10px;column-gap:var(--ss-gal-gap);row-gap:var(--ss-gal-gap);
  margin-top:22px;padding:12px;border-radius:var(--ss-radius);
  background:var(--ss-tray);box-shadow:inset 0 0 0 1px var(--ss-line)}
.uk-ss-figure{position:relative;margin:0;overflow:hidden;background:var(--ss-cloth);border-radius:var(--ss-radius-sm)}
.uk-ss-figure img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
/* A photograph left alone at the end of a row takes the whole row, so the tray
   is never laid with a gap beside one thing.
   1/-1, never "span 2": the column count here is the TRAY's answer and can be
   one, and asking a one-column grid to span two makes an implicit second column
   of zero width — measured, every other photograph came out 0px wide at 320 for
   every odd count. */
.uk-ss-figure:last-child:nth-child(odd){grid-column:1/-1}
.uk-ss-figure button{position:absolute;right:6px;bottom:16px;display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:50%;background:rgba(36,19,22,.76);color:#F7F1E7;cursor:pointer}

/* Gift, contacts, FAQ ------------------------------------------------------ */
.uk-ss-streams{display:grid;gap:10px;margin-top:18px}
.uk-ss-streams a{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:3px;color:var(--ss-ink);text-decoration:none}
.uk-ss-streams a span{display:grid;flex:1}
.uk-ss-streams a strong{font-size:14px}
.uk-ss-streams a small{font-size:12px;color:var(--ss-muted)}
.uk-ss-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.uk-ss-tabs button{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border:1px solid var(--ss-line);border-radius:999px;background:transparent;font-size:12px;font-weight:600;cursor:pointer}
.uk-ss-tabs button.is-active{border-color:var(--ss-brass);box-shadow:inset 0 0 0 1px var(--ss-brass)}
.uk-ss-gift-panel{margin-top:16px}
.uk-ss-accounts{gap:14px}
.uk-ss-accounts>*:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:min(100%,400px)}
.uk-ss-accounts article{padding:16px;border-radius:3px;text-align:center}
.uk-ss-accounts strong{display:block;margin-top:6px;font-family:var(--ss-display);font-size:20px;letter-spacing:.05em}
.uk-ss-accounts article p{margin-top:4px;font-size:13px;color:var(--ss-muted)}
.uk-ss-accounts article .uk-ss-button{margin-top:12px}
.uk-ss-address-card{padding:18px;border:1px dashed var(--ss-sirih);border-radius:3px;text-align:center}
.uk-ss-address-card strong{display:block;margin-top:6px;font-family:var(--ss-display);font-size:18px}
.uk-ss-address-card p{margin-top:6px;font-size:14px;color:var(--ss-muted)}
.uk-ss-contacts{gap:14px}
.uk-ss-contacts>*:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:min(100%,400px)}
.uk-ss-contacts article{padding:16px;border-radius:3px;text-align:center}
.uk-ss-contacts strong{display:block;margin-top:6px;font-size:15px}
.uk-ss-contacts article p{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:6px;font-size:13px;color:var(--ss-muted)}
.uk-ss-contacts article .uk-ss-button{margin-top:12px}
.uk-ss-hashtags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px}
.uk-ss-hashtags button{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border:1px solid var(--ss-line);border-radius:999px;background:transparent;font-size:12px;cursor:pointer}
.uk-ss-faq{display:grid;gap:10px;margin-top:18px}
.uk-ss-faq details{padding:14px 16px;border-radius:3px}
.uk-ss-faq summary{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;font-weight:600;list-style:none}
.uk-ss-faq summary::-webkit-details-marker{display:none}
.uk-ss-faq p{margin-top:8px;color:var(--ss-muted);font-size:15px}
.uk-ss-engagement .uk-ss-body{margin-top:4px}
/* Fixed light background, so it carries the light register locally for the same
   reason the sheet panel does. */
/* The gold is a shade darker than the page's: this surface is #EDE2D2, not the
   lighter cloth, so it takes a shade darker than the page's. */
.uk-ss-feedback{--ss-cloth:#EDE2D2;--ss-ink:#2A1F1C;--ss-muted:#6E5C55;--ss-sirih:#3F5A3C;--ss-lacquer:#6E2825;
  position:relative;z-index:24;display:flex;align-items:center;gap:10px;width:min(100%,680px);margin:16px auto 0;padding:13px 16px;border:1px solid rgba(63,90,60,.32);border-radius:var(--ss-radius-sm);background:#EDE2D2;color:#2A1F1C;font-size:14px}

/* CLOSING: the dalem, the innermost room -------------------------------------------------- */
.uk-ss-closing{--ss-cloth:#221217;--ss-ink:#F7EDE8;--ss-muted:#C7AAA4;--ss-sirih:#AFC4A6;--ss-lacquer:#E8B27A;--ss-tray:#311A1F;--ss-rattan:#5A3420;--ss-brass:#EFC98F;--ss-line:rgba(247,237,232,.22);
  position:relative;padding:72px calc(var(--ss-col-w) + 12px) 88px;
  background:var(--ss-cloth);color:var(--ss-ink);text-align:center;scroll-margin-top:16px}
.uk-ss-closing h2{font-size:clamp(24px,6vw,36px)}
.uk-ss-closing-mark{display:grid;place-items:center;width:64px;height:64px;margin:20px auto 0;border:2px solid var(--ss-sirih);border-radius:50%;font-family:var(--ss-display);font-size:14px;letter-spacing:.16em;color:var(--ss-sirih);
  box-shadow:0 0 0 5px rgba(168,191,164,.16)}
.uk-ss-closing-share{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}

/* THE STACK, SEEN EDGE-ON -------------------------------------------------
   The trays are piled at the right margin and you are looking at the pile from
   the side, so each bar in the index is AS WIDE AS THE TRAY IT STANDS FOR. A
   full tray is a long bar, a slim tray a short one — which makes this the only
   index in the catalogue that tells you the shape of what is coming before you
   get to it, rather than only where you are.

   It owns the right gutter and every tray reserves it, at every breakpoint. */
.uk-ss-stack{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:26;
  display:flex;flex-direction:column;align-items:center;
  width:var(--ss-col-w);max-width:var(--ss-col-w);max-height:88svh;
  padding:10px 0;background:rgba(36,19,22,.93);border-left:1px solid rgba(247,241,231,.32);color:#F7F1E7}
/* The edge of the pile: the line every tray is stacked against. */
.uk-ss-stack-line{position:absolute;right:8px;top:0;bottom:0;width:2px;background:rgba(198,154,78,.34)}
.uk-ss-tray-list{position:relative;list-style:none;display:grid;gap:0;margin:0;padding:0;width:100%;
  /* The bars are what gives way when the stack 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-ss-tray-list::-webkit-scrollbar{display:none}
/* A full-width row of the stack, not the bar it draws. An earlier family left
   this to height:100% with an item that never stretched and measured 40x9 at one
   breakpoint only. */
.uk-ss-tray-item{display:flex;align-items:stretch}
/* The floor is stated once, here, rather than per breakpoint: a breakpoint that
   restates it is a breakpoint that can forget it. */
.uk-ss-tray-item button{position:relative;display:grid;place-items:center;width:100%;
  height:40px;min-height:38px;min-width:40px;border:0;background:transparent;color:inherit;
  cursor:pointer;padding:0 8px 0 0;justify-items:end}
/* A TRAY SEEN EDGE-ON. The width is the whole point of this index, so it is
   declared per state and nowhere else — at one width for all three this is an
   ordinary column of dashes and every rule about it still reads as correct. */
.uk-ss-tray-item button i{display:block;height:3px;border-radius:2px;
  background:rgba(247,241,231,.46);
  transition:width .3s ease,background .3s ease,height .3s ease}
.uk-ss-tray-item.is-full button i{width:26px}
.uk-ss-tray-item.is-broad button i{width:18px}
.uk-ss-tray-item.is-slim button i{width:11px}
/* The tray you are on is the one drawn out of the pile: brass, and thicker. */
.uk-ss-tray-item button.is-active i{background:var(--ss-brass);height:5px}
.uk-ss-tray-item button:hover i{background:rgba(247,241,231,.82)}
/* The tray being carried, named in standing type inside the stack's own width so
   the chrome is never wider than the gutter the trays reserved. */
.uk-ss-carried{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 index shrink-wraps its figures. */
  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(--ss-display);font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--ss-brass);
  pointer-events:none;white-space:nowrap;max-height:50svh;overflow:hidden}

/* Controls rail, share sheet, lightbox, toast ----------------------------- */
.uk-ss-rail{position:fixed;right:14px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:24;display:grid;gap:8px;justify-items:center}
.uk-ss-rail-toggle,.uk-ss-rail-panel button{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(198,154,78,.52);border-radius:50%;background:rgba(36,19,22,.9);color:#F7F1E7;cursor:pointer}
.uk-ss-rail-panel{display:grid;gap:8px;justify-items:center}
.uk-ss-sheet,.uk-ss-lightbox{position:fixed;inset:0;z-index:46;display:grid;place-items:center;padding:20px 16px;background:rgba(20,10,12,.86);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.uk-ss-sheet.is-open,.uk-ss-lightbox.is-open{opacity:1;visibility:visible}
/* A chrome surface whose background is FIXED cannot inherit tokens that flip with
   the palette. In a dark palette --ss-ink and --ss-sirih are both light, so on this
   fixed cream panel an eyebrow measured 1.62:1 and a close label 1.01:1 — the same
   colour as the panel. So the panel re-declares the light-surface register
   locally, --ss-cloth included (it IS the light screen), and every rule inside it
   goes on reading tokens rather than being special-cased one at a time. */
.uk-ss-sheet-panel{--ss-cloth:#F7F1E7;--ss-ink:#2A1F1C;--ss-muted:#6E5C55;--ss-sirih:#3F5A3C;--ss-lacquer:#7B2E2A;--ss-line:rgba(42,31,28,.16);
  width:min(100%,430px);padding:22px;border:1px solid var(--ss-sirih);border-radius:var(--ss-radius);background:#F7F1E7;color:#2A1F1C}
.uk-ss-share-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:16px}
.uk-ss-share-grid button{display:flex;align-items:center;gap:8px;padding:11px 13px;border:1px solid rgba(42,31,28,.16);border-radius:var(--ss-radius-sm);background:transparent;color:inherit;cursor:pointer;font-size:13px}
.uk-ss-sheet-close{width:100%;margin-top:14px}
.uk-ss-lightbox-panel{position:relative;width:min(100%,780px)}
.uk-ss-lightbox-panel img{width:100%;max-height:76svh;object-fit:contain;border-radius:var(--ss-radius);transition:opacity .2s ease}
.uk-ss-lightbox.is-switching .uk-ss-lightbox-panel img{opacity:0}
.uk-ss-lightbox-counter{margin-top:12px;color:#F7F1E7;font-size:12px;letter-spacing:.16em;text-align:center}
.uk-ss-lightbox-close,.uk-ss-lightbox-prev,.uk-ss-lightbox-next{position:absolute;display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;background:rgba(36,19,22,.8);color:#F7F1E7;cursor:pointer}
.uk-ss-lightbox-close{top:-52px;right:0}
.uk-ss-lightbox-prev{left:6px;top:50%;transform:translateY(-50%)}
.uk-ss-lightbox-next{right:6px;top:50%;transform:translateY(-50%)}
.uk-ss-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:#2A1F1C;color:#F7F1E7;font-size:13px;pointer-events:none;transition:opacity .3s ease,transform .3s ease}
.uk-ss-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-ss-reveal{opacity:0;transform:translateY(var(--ss-lift));transition:opacity .7s ease,transform .7s cubic-bezier(.22,.78,.2,1)}
.uk-ss-reveal.is-visible{opacity:1;transform:none}
/* The rule under a tray's eyebrow draws itself out as the tray is set down. This
   used to animate a "cue" span that had no box anywhere in the stylesheet: it
   animated nothing, sixteen times, while every rule about it read as correct. */
.uk-ss-reveal .uk-ss-rule{opacity:0;transform:scaleX(.2);transform-origin:left center;
  transition:opacity .42s ease,transform .52s cubic-bezier(.3,1.5,.5,1)}
.uk-ss-reveal.is-visible .uk-ss-rule{opacity:1;transform:none}
.uk-ss-reveal-item{opacity:0;transform:translateY(12px);
  transition:opacity .58s ease .14s,transform .58s ease .14s}
.uk-ss-reveal.is-visible .uk-ss-reveal-item{opacity:1;transform:none}

/* WHAT IS LAID ON THE TRAY -------------------------------------------------
   Two things are the tray's to decide, and the second is the one that matters.

   HOW MANY fit in a row is handled by auto-fit against a minimum, because a bare
   column count is something auto-fit already does on its own — a signature that
   only counted columns would be a container query earning nothing. Forcing three
   rich cards across a 318px tray also produced ~100px columns with the text
   running out past the edge, which is what asking for counts without a floor
   costs.

   WHICH WAY ROUND each one is laid IS the signature, and no viewport query can
   express it: on one screen a slim tray lays its cards on their backs — mark
   above the words, centred — while a full tray lays the same kind of card on its
   side, mark beside the words. A media query knows only how wide the window is,
   so it must give both trays the same answer. */
.uk-ss-offering{display:grid;gap:12px;margin-top:14px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ss-item,220px)),1fr))}

/* A SLIM TRAY. One thing under another, each laid on its back. */
@container tray (max-width:299.98px){
  .uk-ss-offering{--ss-item:100%}
  /* stretch, NOT center: justify-items:center sizes each track to max-content, so
     the body of the card never learns how wide it is and the wrapping row of
     buttons inside it never wraps — measured, "Tambah Kalender" hung 82px past
     the tray. The card is centred with text-align and the mark with a margin. */
  .uk-ss-offering .uk-ss-event{grid-template-columns:minmax(0,1fr);justify-items:stretch;text-align:center}
  .uk-ss-offering .uk-ss-event-mark{margin-inline:auto}
}
/* A BROAD TRAY. Room to turn each one onto its side: the mark moves out from
   above the words to beside them, and the words range left behind it. */
@container tray (min-width:300px) and (max-width:519.98px){
  .uk-ss-offering{--ss-item:220px}
  .uk-ss-offering .uk-ss-event{grid-template-columns:auto minmax(0,1fr);justify-items:stretch;text-align:left}
  .uk-ss-offering .uk-ss-person,
  .uk-ss-offering article{text-align:left}
  /* the mark goes with the words: a circle left centred over left-ranged text
     reads as two decisions that were not talking to each other */
  .uk-ss-offering .uk-ss-portrait-round{margin-inline:0}
}
/* A FULL TRAY. On their sides AND packed, because there is room for more than
   one across. */
@container tray (min-width:520px){
  .uk-ss-offering{--ss-item:240px;column-gap:16px}
  .uk-ss-offering .uk-ss-event{grid-template-columns:auto minmax(0,1fr);justify-items:stretch;text-align:left}
  .uk-ss-offering .uk-ss-person,
  .uk-ss-offering article{text-align:left}
  /* the mark goes with the words: a circle left centred over left-ranged text
     reads as two decisions that were not talking to each other */
  .uk-ss-offering .uk-ss-portrait-round{margin-inline:0}
}

/* Design controls ---------------------------------------------------------- */
/* "Template" is the template's OWN colours, so it restates the tokens above
   rather than a near-miss of them: the cloth, the lacquer, the rattan and the
   brass. Derivation had left the previous family's amber and teak here. */
.uk-design-palette-template.uk-seserahan{--ss-cloth:#F7F1E7;--ss-ink:#2A1F1C;--ss-muted:#6E5C55;--ss-sirih:#3F5A3C;--ss-lacquer:#7B2E2A;--ss-tray:#EDE2D2;--ss-rattan:#8A5A2B;--ss-brass:#C69A4E}
.uk-design-palette-warm.uk-seserahan{--ss-cloth:#FAEFDD;--ss-ink:#2F2317;--ss-muted:#6F5C41;--ss-sirih:#5C5A2E;--ss-lacquer:#8A4A17;--ss-tray:#F0E2C8;--ss-rattan:#8C5A22;--ss-brass:#C08F4B}
.uk-design-palette-warm .uk-ss-closing{--ss-cloth:#2A1A12;--ss-ink:#F8EFE2;--ss-muted:#C6B29C;--ss-sirih:#C9C08C;--ss-lacquer:#E0B27E;--ss-tray:#1F150E;--ss-rattan:#6B4620;--ss-brass:#EFC98F}
.uk-design-palette-romantic.uk-seserahan{--ss-cloth:#FAE8E6;--ss-ink:#331F21;--ss-muted:#6F5254;--ss-sirih:#8A4150;--ss-lacquer:#8E3A3C;--ss-tray:#F2D9D7;--ss-rattan:#8A4640;--ss-brass:#C4847A}
.uk-design-palette-romantic .uk-ss-closing{--ss-cloth:#2B1A1D;--ss-ink:#F8E9E8;--ss-muted:#C8ABAB;--ss-sirih:#DDA3AE;--ss-lacquer:#DDA292;--ss-tray:#1F1315;--ss-rattan:#6B3F33;--ss-brass:#E2B49E}
.uk-design-palette-sage.uk-seserahan{--ss-cloth:#EDF0E5;--ss-ink:#1F2620;--ss-muted:#54604F;--ss-sirih:#375A3C;--ss-lacquer:#6A4A2E;--ss-tray:#E0E6D6;--ss-rattan:#79512C;--ss-brass:#A98A57}
.uk-design-palette-sage .uk-ss-closing{--ss-cloth:#1D2620;--ss-ink:#EAF1E7;--ss-muted:#B0BDAE;--ss-sirih:#AEC7A8;--ss-lacquer:#CFBE92;--ss-tray:#161D16;--ss-rattan:#57402A;--ss-brass:#D2B98A}
/* Midnight is the procession carried after dark: the lacquer goes black and the
   brass is the only thing catching light. */
.uk-design-palette-midnight.uk-seserahan{--ss-cloth:#1B1114;--ss-ink:#F2E7E2;--ss-muted:#AC968F;--ss-sirih:#A9C0A2;--ss-lacquer:#E0AB79;--ss-tray:#271619;--ss-rattan:#563322;--ss-brass:#EFC98F;--ss-line:rgba(242,231,226,.2)}
.uk-design-palette-midnight .uk-ss-closing{--ss-cloth:#1B1114;--ss-ink:#F2E7E2;--ss-muted:#AC968F;--ss-sirih:#A9C0A2;--ss-lacquer:#E0AB79;--ss-tray:#170F12;--ss-rattan:#563322;--ss-brass:#EFC98F}
.uk-design-type-classic .uk-ss-body h2,.uk-design-type-classic .uk-ss-gate-body h1{font-family:var(--ss-display)}
.uk-design-type-modern .uk-ss-body h2,.uk-design-type-modern .uk-ss-gate-body h1,.uk-design-type-modern .uk-ss-cover-panel h1{font-family:var(--ss-sans);letter-spacing:.02em}
.uk-design-type-editorial .uk-ss-body h2{font-size:clamp(26px,6.4vw,40px);letter-spacing:-.01em}
.uk-design-type-editorial .uk-ss-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 seserahan — it is a wrong
   one. Every rule that draws structure reads these two, so one control moves the
   whole frame. */
/* COMPOUND, not descendant. The design classes are printed onto the SAME element
   as .uk-seserahan, so ".uk-design-surface-soft .uk-seserahan" asks for a root inside a
   root and matches nothing: measured, all three presets left their tokens where
   the root put them and moved nothing at all.
   Every preset carries the SAME FLOOR the root tokens do. Declaring these
   without it is two authorities on one width: the preset is two classes and the
   root is one, so the preset wins and the floor it left out is the floor that
   applies — measured, the slim tray was still 130px inside its padding while the
   root said 292.
   Here the surface is HOW UNEQUAL THE TRAYS ARE. That is not decoration: a tray
   that changes width crosses a container-query threshold and rearranges what is
   on it, so this control reaches the signature rather than the corner radius. */
.uk-design-surface-soft.uk-seserahan{--ss-tray-broad:clamp(min(100%,340px),90%,600px);--ss-tray-slim:clamp(min(100%,316px),76%,470px);--ss-radius:10px;--ss-radius-sm:6px}
.uk-design-surface-balanced.uk-seserahan{--ss-tray-broad:clamp(min(100%,316px),82%,520px);--ss-tray-slim:clamp(min(100%,292px),62%,368px);--ss-radius:5px;--ss-radius-sm:3px}
.uk-design-surface-sharp.uk-seserahan{--ss-tray-broad:clamp(min(100%,300px),72%,450px);--ss-tray-slim:clamp(min(100%,276px),48%,290px);--ss-radius:0px;--ss-radius-sm:0px}
/* The grid preset IS the tray's answer, so it names no columns of its own. */
.uk-design-gallery-grid .uk-ss-gallery{display:grid;overflow-x:visible}
.uk-design-gallery-filmstrip .uk-ss-gallery{display:flex;grid-template-columns:none;--ss-gal-gap:12px;gap:var(--ss-gal-gap);overflow-x:auto;padding-bottom:28px;scroll-snap-type:x mandatory}
.uk-design-gallery-filmstrip .uk-ss-figure,
.uk-design-gallery-filmstrip .uk-ss-figure:last-child:nth-child(4n+1){flex:0 0 auto;grid-column:auto;width:min(62vw,240px);scroll-snap-align:center}
/* The filmstrip is the one preset the TRAY does not answer for: a scroller has
   no row to fit anything into, so it keeps a width per photograph instead. Grid
   and editorial both stay the tray's business. */
.uk-design-gallery-editorial .uk-ss-gallery{display:grid;grid-template-columns:minmax(0,1fr);--ss-gal-gap:22px;column-gap:var(--ss-gal-gap);row-gap:34px;overflow-x:visible}
.uk-design-gallery-editorial .uk-ss-figure,
.uk-design-gallery-editorial .uk-ss-figure:last-child:nth-child(4n+1){grid-column:1/-1}
.uk-design-gallery-editorial .uk-ss-figure img,
.uk-design-gallery-editorial .uk-ss-figure:nth-child(4n+1) img,
.uk-design-gallery-editorial .uk-ss-figure:nth-child(4n+2) img,
.uk-design-gallery-editorial .uk-ss-figure:nth-child(4n+3) img,
.uk-design-gallery-editorial .uk-ss-figure:nth-child(4n+0) img{aspect-ratio:3/2}
.uk-design-motion-soft.uk-seserahan{--ss-lift:22px}
.uk-design-motion-cinematic.uk-seserahan{--ss-lift:36px}
.uk-design-motion-minimal.uk-seserahan{--ss-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-ss-reveal,.uk-design-motion-minimal .uk-ss-reveal-item,
.uk-design-motion-minimal .uk-ss-reveal .uk-ss-rule{opacity:1;transform:none;transition:none}
.uk-design-motion-minimal .uk-ss-gate.is-drawn .uk-ss-lift{animation:none}

/* Wider viewports ---------------------------------------------------------- */
@media(min-width:760px){
.uk-seserahan{font-size:17px;--ss-col-w:54px}
.uk-ss-tray{padding:38px calc(var(--ss-col-w) + 12px) 44px 24px}
.uk-ss-column{width:min(100%,780px)}
.uk-ss-portrait{height:min(38svh,296px)}
.uk-ss-portrait img,.uk-ss-cover-media .uk-ss-cover-image{object-position:var(--ss-focus-desktop-x,50%) var(--ss-focus-desktop-y,42%)}
.uk-ss-cover-panel{padding:56px calc(var(--ss-col-w) + 12px) 74px}
.uk-ss-stage{width:min(100%,540px)}
.uk-ss-event{gap:16px;padding:24px}
.uk-ss-closing{padding:96px calc(var(--ss-col-w) + 12px) 112px}
.uk-ss-carried{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-editorial .uk-ss-gallery{grid-template-columns:minmax(0,1fr)}
.uk-design-gallery-filmstrip .uk-ss-gallery{grid-template-columns:none}
}
@media(min-width:1100px){
.uk-ss-column{width:min(100%,900px)}
.uk-ss-tray{padding:46px calc(var(--ss-col-w) + 12px) 52px 34px}
.uk-ss-closing{padding:112px calc(var(--ss-col-w) + 12px) 124px}
.uk-design-gallery-editorial .uk-ss-gallery{grid-template-columns:minmax(0,1fr)}
.uk-design-gallery-filmstrip .uk-ss-gallery{grid-template-columns:none}
}

/* Narrow phones ------------------------------------------------------------ */
@media(max-width:560px){
.uk-ss-count{grid-template-columns:repeat(2,minmax(0,1fr))}
.uk-ss-people{gap:24px}
.uk-ss-share-grid{grid-template-columns:minmax(0,1fr)}
.uk-ss-lightbox-close{top:auto;bottom:-52px;right:50%;transform:translateX(50%)}
}
@media(max-width:360px){
/* --ss-col-w stays 44px here. It was narrowed to 34px by derivation, which left
   the index button 33px wide at 320 and 360 — the gutter cannot be narrower than
   the target standing in it. A 44px gutter at 320px still leaves 252px of text. */
.uk-ss-tray{padding:24px calc(var(--ss-col-w) + 12px) 28px 12px}
.uk-ss-closing{padding:52px calc(var(--ss-col-w) + 12px) 66px}

.uk-ss-event{gap:10px}
.uk-design-gallery-editorial .uk-ss-gallery{grid-template-columns:minmax(0,1fr)}
.uk-design-gallery-filmstrip .uk-ss-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-ss-cover{min-height:100svh}
.uk-ss-cover-panel{padding:22px calc(var(--ss-col-w) + 12px) 30px}
.uk-ss-cover-panel h1{font-size:clamp(22px,5.2vw,30px)}
.uk-ss-cover-empty-mark{font-size:17px;padding:8px 14px}
.uk-ss-gate{padding:12px}
.uk-ss-portrait{height:min(23svh,136px)}
.uk-ss-gate-body{padding:16px 16px 14px}
.uk-ss-gate-body h1{font-size:clamp(20px,4.4vw,26px)}
.uk-ss-clothfield{width:min(150vh,620px);height:min(96vh,420px)}
/* A landscape phone is short, not narrow, so narrowing the index gutter here buys
   nothing and used to push a 44px button out of a 38px bar. The gutter keeps its
   width; only the standing label gives way. */
.uk-ss-carried{font-size:11px;letter-spacing:.14em;max-width:30vw}
.uk-ss-rail{bottom:calc(10px + env(safe-area-inset-bottom))}
}
@media(max-height:620px) and (min-width:1025px){
.uk-ss-portrait{height:min(28svh,190px)}
.uk-seserahan{--ss-col-w:44px}
}

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