/* Setara — Romance Flagship 1.0.0
 * A wedding invitation in which everything hangs from the same lines.
 *
 * Setara means level — on equal footing. The two families are set out level with
 * each other and so is everything else: ONE label column runs the whole page,
 * every value begins at the same x, and the rules are drawn so the levelling can
 * be seen rather than merely happening.
 *
 * That is the signature, and it is the one thing no other family here does. All
 * thirty-five of them align the OUTSIDE of their blocks; the insides are each
 * block's own business, so a two-word label and a five-word label push their
 * values to different places. Here the label column is a single set of grid
 * lines that every part, list and row inherits through nested subgrid — so the
 * column is as wide as the widest label ANYWHERE on the page, and nothing else
 * can produce that. Measured against a plain grid of the same markup: values
 * landed at x=80 and x=156; through subgrid both land at x=170.
 *
 * Three things here are easy to get wrong and invisible in a stylesheet read.
 *
 * A SUBGRID THAT IS NOT ONE. grid-template-columns:subgrid only inherits when
 * the element is itself a grid ITEM of a grid container, and only across the
 * axis it names. Miss either and the row silently becomes an ordinary two-column
 * grid sized by its own content — which looks almost right, one row at a time,
 * and is wrong down the page.
 *
 * A CHAIN BROKEN IN THE MIDDLE. The lines travel sheet -> part -> row, and two
 * places nest one level deeper: a couple's chapter and a gift panel. Any link
 * that stops being a subgrid, or stops spanning 1/-1, cuts every level below it
 * off from the page's tracks and quietly re-scopes the column to that branch.
 * That is why no wrapper in the markup carries the reveal class any more.
 *
 * AND A LABEL COLUMN WITH NO CEILING. Sized by content alone, one long label
 * takes the column with it: measured, a single "Panduan Busana untuk Para Tamu
 * Undangan" pushed it to 178px of a 380px page and left the values 40% of the
 * width. fit-content() caps it and long labels wrap instead.
 *
 * All three are measured in a browser: the x every value actually starts at,
 * across parts, at every breakpoint.
 *
 * Below 520px the two tracks become one and the label stands ABOVE its value.
 * That is not the signature giving up — every label still begins at the same x
 * and so does every value — it is the honest answer for a screen with no room
 * for two columns of readable text, and it is stated once, here.
 *
 * The sheet is ivory at every palette but midnight, and the gate is the same
 * sheet rather than a dark room: the page is one piece of ruled paper from the
 * first screen to the last. Only the cover carries a photograph, so only the
 * cover declares a dark register of its own — along with the chrome whose
 * backgrounds are fixed and cannot flip with a palette.
 */

/* Tokens ------------------------------------------------------------------- */
.uk-setara{
  /* Ivory sheet, ruling, and the inks the levelling is written in. */
  --st-sheet:#F7F4ED;--st-ink:#22201C;--st-muted:#5C574F;--st-sage:#3C5245;--st-seal:#87392B;
  --st-line:rgba(34,32,28,.18);--st-panel:#ECE7DB;
  --st-rule:#8B8373;--st-brass:#8A6A22;
  --st-radius:8px;--st-radius-sm:4px;--st-measure:60ch;
  /* THE LABEL COLUMN. fit-content means "as wide as the widest label on the whole
     page", and the cap is what stops one long label taking a third of the sheet
     away from the values. Both halves matter: without fit-content every row
     sizes itself and nothing lines up; without the cap the page goes narrow. */
  --st-label:min(34%,164px);
  --st-gutter:18px;
  --st-margin:44px;                              /* the ruler's own gutter */
  --st-pad-i:16px;                               /* the sheet's inline-start */
  --st-pad-e:calc(var(--st-margin) + 12px);      /* and its inline-end */
  --st-settle:14px;
  --st-gal-gap:12px;
  --st-display:"Lora",Georgia,Cambria,"Times New Roman",serif;
  --st-sans:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  position:relative;background:var(--st-sheet);color:var(--st-ink);
  font-family:var(--st-sans);font-size:16px;line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
[hidden]{display:none !important}
.uk-setara *,.uk-setara *::before,.uk-setara *::after{box-sizing:border-box}
.uk-setara 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-setara figure{margin:0}
.uk-setara h1,.uk-setara h2,.uk-setara h3,.uk-setara h4{font-family:var(--st-display);font-weight:600;line-height:1.2;margin:0}
.uk-setara p{margin:0}
/* :where() so this stays a DEFAULT. As ".uk-setara button" it was (0,1,1)
   and outranked every button rule written as a single class, so declared
   button colours in this file would never apply and those buttons would take the
   page ink instead — including the lightbox controls on their dark scrim. */
.uk-setara :where(button){font-family:inherit;color:inherit}

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

/* THE LEVELLING BEAM ------------------------------------------------------
   One rule with a bubble at its exact middle. It is the page's whole promise
   said once: two things held at the same height. Drawn in the rule colour and
   the brass, never in the colour of the sheet behind it — a mark painted the
   colour of what is behind it draws nothing, which is the trap this catalogue
   has fallen into ten times. */
.uk-st-beam{position:relative;display:block;width:min(100%,220px);height:12px;margin:14px auto}
.uk-st-beam-rule{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;
  background:linear-gradient(90deg,transparent 0,var(--st-rule) 12%,var(--st-rule) 88%,transparent 100%);
  transform-origin:center;transition:transform .62s cubic-bezier(.22,.78,.2,1),opacity .5s ease}
.uk-st-beam-bubble{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;
  border:2px solid var(--st-brass);border-radius:50%;background:var(--st-sheet)}
/* The bubble's own level line, so the middle of the beam reads as an instrument
   rather than a dot. */
.uk-st-beam-bubble::after{content:"";position:absolute;left:1px;right:1px;top:50%;height:1px;margin-top:-.5px;background:var(--st-brass)}

/* THE SHEET AND ITS RULING ------------------------------------------------
   One grid for the whole page, two tracks: the label column and everything else.
   Every part, chapter, panel and row is a SUBGRID of it, so they all hang from
   the same two lines however deeply they are nested.

   The chain is sheet -> part -> row, with chapter and gift panel as a third
   link. Each must be a grid ITEM of the link above it AND span 1/-1, or the
   lines stop there and that branch quietly starts sizing its own column. */
.uk-st-sheet{position:relative;display:grid;
  grid-template-columns:fit-content(var(--st-label)) minmax(0,1fr);
  column-gap:var(--st-gutter);
  padding-left:var(--st-pad-i);padding-right:var(--st-pad-e);
  background:var(--st-sheet);
  /* the faint ruling of the sheet itself, so the page reads as ruled paper */
  background-image:repeating-linear-gradient(180deg,transparent 0 31px,rgba(34,32,28,.04) 31px 32px)}

/* A part of the invitation. It contributes its own rows to the page's grid and
   owns no columns of its own. */
.uk-st-part{position:relative;display:grid;grid-template-columns:subgrid;grid-column:1/-1;
  align-content:start;padding:30px 0 34px;scroll-margin-top:16px}
/* THE RULE THAT RUNS THE WHOLE WIDTH, across both columns. This is the line the
   levelling is measured against, so it is drawn rather than implied — and it is
   a pseudo-element rather than a border because it has to be able to draw itself
   ACROSS as the part arrives. Absolute, so it never becomes a grid track. */
.uk-st-part::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--st-rule);transform:scaleX(0);transform-origin:left center;
  transition:transform .72s cubic-bezier(.22,.78,.2,1)}

/* Two wrappers nest one level deeper than a row, and both must pass the lines
   through or the labels inside them start a column of their own. */
.uk-st-chapter,.uk-st-gift-panel{display:grid;grid-template-columns:subgrid;grid-column:1/-1}

/* A row: a label on the left line, its value on the right one. */
.uk-st-row{display:grid;grid-template-columns:subgrid;grid-column:1/-1;
  align-items:baseline;padding:9px 0}
.uk-st-row + .uk-st-row,
.uk-st-chapter > .uk-st-row:first-child,.uk-st-gift-panel > .uk-st-row:first-child{border-top:1px dotted var(--st-line)}
.uk-st-row.is-head{padding-top:2px;padding-bottom:14px}
.uk-st-row.is-mark{border-top-style:solid;border-top-color:var(--st-rule)}
/* Content that is not a label/value pair — a photograph row, a countdown, a form
   — takes both tracks rather than being squeezed into one. */
.uk-st-row.is-wide{grid-template-columns:minmax(0,1fr)}
.uk-st-label{margin:0;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--st-sage);overflow-wrap:anywhere}
.uk-st-label.is-num{font-family:var(--st-display);font-size:14px;letter-spacing:.1em;text-transform:none;font-variant-numeric:tabular-nums}
/* The part's number stands above its label, in the same column, so the margin of
   the sheet reads as a numbered ledger. */
.uk-st-ord{display:block;margin-bottom:6px;font-family:var(--st-display);font-size:11px;letter-spacing:.24em;color:var(--st-muted)}
.uk-st-value{min-width:0}
.uk-st-value > * + *{margin-top:8px}

/* GATE: the two names on one rule -----------------------------------------
   The same ivory sheet the invitation is written on, with the levelling beam
   drawn across it. Nothing is hidden behind anything: the plate is the sheet's
   own panel colour and the field behind it is the ruling. */
/* The gate's side padding lives on the PLATE, not here, so the stage can be the
   full width of the screen and the rules below can reach both edges without a
   vw unit — a raw viewport width counts the scrollbar and so is wider than the
   page whenever one is showing,
   and the page would scroll sideways on every desktop. */
.uk-st-gate{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:20px 0;overflow:hidden;
  background:var(--st-sheet);color:var(--st-ink);
  background-image:repeating-linear-gradient(180deg,transparent 0 31px,rgba(34,32,28,.05) 31px 32px);
  transition:opacity .7s ease,visibility .7s ease}
.uk-st-gate.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.uk-st-gate-stage{position:relative;display:grid;place-items:center;width:100%}
/* THE TWO LINES THE PLATE IS SET BETWEEN. They run off both edges of the screen,
   which is the whole reason they exist: a rule that stops at the edge of the card
   it frames is hidden behind the card and reads as nothing at all — the trap this
   catalogue has fallen into ten times. Drawn in the rule colour, never the
   sheet's. They span the stage, which is the full width of the gate, so they
   reach both edges without a vw unit. */
.uk-st-gate-field{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0;pointer-events:none;
  border-top:1px solid var(--st-rule);border-bottom:1px solid var(--st-rule)}
/* And the tick marks that make them read as a levelled pair rather than a box. */
.uk-st-gate-field::before,.uk-st-gate-field::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--st-line)}
.uk-st-gate-field::before{top:7px}
.uk-st-gate-field::after{bottom:7px}
.uk-st-gate-plate{position:relative;z-index:2;display:grid;grid-template-rows:auto auto;overflow:hidden;
  width:min(100% - 40px,460px);
  border:1px solid var(--st-rule);border-radius:var(--st-radius);background:var(--st-panel);
  box-shadow:0 22px 50px rgba(34,32,28,.16)}
.uk-st-portrait{position:relative;height:min(40svh,272px);overflow:hidden;background:var(--st-sheet)}
.uk-st-portrait img{width:100%;height:100%;object-fit:cover;object-position:var(--st-focus-mobile-x,50%) var(--st-focus-mobile-y,38%)}
.uk-st-gate-body{position:relative;padding:26px 22px 24px;text-align:center}
.uk-st-gate-names{margin-top:8px;font-size:clamp(26px,7.2vw,40px)}
.uk-st-gate-date{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:7px 16px;border:1px solid var(--st-line);border-radius:999px;font-size:12px;letter-spacing:.08em;color:var(--st-muted)}
.uk-st-couple-list{display:grid;gap:8px;margin-top:14px}
.uk-st-couple-list span{display:grid;gap:2px}
.uk-st-couple-list small{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--st-muted)}
.uk-st-couple-list strong{font-family:var(--st-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. */
.uk-st-gate-open{position:relative;display:flex;width:fit-content;margin:18px auto 0;padding:13px 26px;
  border-color:transparent;background:var(--st-sage);color:var(--st-sheet);font-size:14px}
/* WHAT THE GATE DOES WHEN IT OPENS: the beam draws all the way across and off
   both edges, and the sheet is handed over. It is the gesture the whole family is
   named for, so what moves is the RULE, not a curtain. */
.uk-st-gate.is-drawn .uk-st-beam-rule{animation:uk-st-draw .82s cubic-bezier(.3,.9,.3,1) forwards}
@keyframes uk-st-draw{
  from{transform:scaleX(1);opacity:1}
  45%{transform:scaleX(2.6);opacity:1}
  to{transform:scaleX(5);opacity:0}}

/* COVER -------------------------------------------------------------------
   The one screen with a photograph on it, so the one screen that carries a dark
   register of its own — sheet and ink together, so a palette can never leave the
   names the colour of the scrim behind them. The scrim's last stop is the same
   colour --st-sheet names here, so the photograph fades into the cover rather
   than onto a different black. */
.uk-st-cover{--st-sheet:#1D1F1B;--st-ink:#F4F2E9;--st-muted:#B4AEA1;--st-sage:#AFC5A6;--st-seal:#E3AE90;
  --st-panel:#282B25;--st-rule:#7C7666;--st-brass:#D9B463;--st-line:rgba(244,242,233,.24);
  position:relative;grid-column:1/-1;display:grid;min-height:100svh;
  margin-left:calc(-1 * var(--st-pad-i));margin-right:calc(-1 * var(--st-pad-e));
  background:var(--st-sheet);color:var(--st-ink);scroll-margin-top:0}
.uk-st-cover-media{position:absolute;inset:0;overflow:hidden}
.uk-st-cover-image{width:100%;height:100%;object-fit:cover;object-position:var(--st-focus-mobile-x,50%) var(--st-focus-mobile-y,38%)}
.uk-st-cover-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(29,31,27,.28) 0%,rgba(29,31,27,.78) 58%,#1D1F1B 100%)}
.uk-st-cover-empty{position:absolute;inset:0;display:grid;place-items:center;background:#242720}
.uk-st-cover-empty-grid{position:absolute;inset:0;background-image:repeating-linear-gradient(180deg,rgba(244,242,233,.12) 0 1px,transparent 1px 32px)}
.uk-st-cover-empty-mark{position:relative;font-family:var(--st-display);font-size:23px;letter-spacing:.2em;padding:10px 18px;border:1px solid var(--st-line);border-radius:var(--st-radius-sm);color:#F4F2E9}
.uk-st-cover-panel{position:relative;align-self:end;padding:40px var(--st-pad-e) 56px var(--st-pad-i);text-align:center}
.uk-st-cover-panel .uk-st-title{margin-top:8px;font-size:clamp(29px,8.4vw,52px)}
.uk-st-cover-date{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:7px 16px;border:1px solid var(--st-line);border-radius:999px;font-size:12px;letter-spacing:.08em;color:var(--st-muted)}
.uk-st-mark{display:grid;place-items:center;width:62px;height:62px;margin:20px auto 0;
  border:1px solid var(--st-sage);border-radius:var(--st-radius-sm);
  font-family:var(--st-display);font-size:14px;letter-spacing:.16em;color:var(--st-sage)}
.uk-st-cover-panel > * + *{margin-top:10px}

/* People ------------------------------------------------------------------- */
/* A person is a value in the value column, so nothing here declares a column of
   its own: the head is a portrait beside the names, and that is a two-piece flex
   row, not a grid that could compete with the page's. */
.uk-st-person-head{display:flex;align-items:center;gap:14px}
.uk-st-portrait-round{flex:0 0 auto;width:72px;height:72px;overflow:hidden;border-radius:50%;background:var(--st-panel);box-shadow:inset 0 0 0 1px var(--st-line)}
.uk-st-portrait-round img{width:100%;height:100%;object-fit:cover}
.uk-st-portrait-round.is-empty{display:grid;place-items:center}
.uk-st-portrait-round.is-empty span{font-family:var(--st-display);font-size:26px;color:var(--st-sage)}
.uk-st-person h4{font-size:20px}
.uk-st-person-head strong{display:block;margin-top:2px;font-size:14px;font-weight:600;color:var(--st-muted)}
.uk-st-parents{color:var(--st-muted);font-size:14px}
.uk-st-parents span{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.uk-st-parents em{font-style:normal;padding:0 5px;color:var(--st-seal)}
.uk-st-bio{color:var(--st-muted);font-size:14px}
.uk-st-couple-index{display:flex;flex-wrap:wrap;gap:8px}
.uk-st-couple-index button{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border:1px solid var(--st-line);border-radius:var(--st-radius-sm);background:transparent;cursor:pointer}
.uk-st-couple-index button span{font-family:var(--st-display);font-size:11px;letter-spacing:.12em;color:var(--st-seal)}
.uk-st-couple-index button.is-active{border-color:var(--st-brass);box-shadow:inset 0 0 0 1px var(--st-brass)}

/* Events, agenda, streams -------------------------------------------------- */
.uk-st-when{font-weight:600}
.uk-st-address{color:var(--st-muted);font-size:14px}
.uk-st-scope{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--st-muted)}
.uk-st-scope strong{padding:3px 9px;border:1px solid var(--st-line);border-radius:999px;font-weight:600;color:var(--st-ink)}
.uk-st-map{width:100%;height:190px;border:1px solid var(--st-line);border-radius:var(--st-radius-sm)}
.uk-st-actions{display:flex;flex-wrap:wrap;gap:8px}
.uk-st-stream{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--st-line);border-radius:var(--st-radius-sm);background:var(--st-panel);color:var(--st-ink);text-decoration:none}
.uk-st-stream span{flex:1;min-width:0;font-size:14px}

/* Countdown: four cells on one rule, equal width, equal weight ------------- */
.uk-st-count{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--st-line);border:1px solid var(--st-line)}
.uk-st-count div{padding:14px 8px;background:var(--st-panel);text-align:center}
.uk-st-count strong{display:block;font-family:var(--st-display);font-size:clamp(24px,6vw,32px);line-height:1.1;font-variant-numeric:tabular-nums}
.uk-st-count span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--st-muted)}

/* GALLERY: hung from one rule, readings level ------------------------------
   The photographs are not a mosaic. They hang from a single rule and their
   readings hang level underneath it, so a row of them reads as a measured scale.
   Each figure's own top border IS that rule, which is why the reading is ordered
   above the picture instead of under it. */
.uk-st-strip-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--st-muted)}
.uk-st-strip-tools div{display:flex;gap:8px}
.uk-st-strip-tools button{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--st-line);border-radius:var(--st-radius-sm);background:transparent;cursor:pointer}
.uk-st-strip{position:relative;display:grid;overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));
  column-gap:var(--st-gal-gap);row-gap:26px}
.uk-st-figure{position:relative;display:grid;grid-template-rows:auto auto;padding-top:8px}
/* ONE rule, not a row of separate ones. Each figure's rule reaches a full gap to
   its left, so it meets its neighbour's right edge exactly and the row reads as a
   single line with the photographs hung from it. The overhang on the first
   figure of each row is clipped by the strip. Measured as a border it left a
   12px break above every gap and the row read as a mosaic. */
.uk-st-figure::before{content:"";position:absolute;top:0;right:0;height:1px;
  left:calc(-1 * var(--st-gal-gap));background:var(--st-rule)}
/* The reading hangs from the rule, above the picture, so every reading in a row
   sits at the same height whatever the pictures below them do. */
.uk-st-figcaption{order:-1;margin-bottom:8px;font-family:var(--st-display);font-size:11px;letter-spacing:.22em;color:var(--st-muted);font-variant-numeric:tabular-nums}
.uk-st-figure img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--st-radius-sm);background:var(--st-panel)}
/* NOTHING here widens the last photograph. Inherited from a family whose gallery
   was one or two columns wide, a rule giving an odd last figure the whole row was
   measured at 1280 with seven photographs and five columns: the seventh could no
   longer share a row with the sixth, so it took a row of its own and stranded the
   sixth beside four empty columns. A scale reads across; a photograph blown up to
   the full width of it does not. The last photograph simply ends the scale. */
.uk-st-figure button{position:absolute;right:6px;bottom:6px;display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:50%;background:rgba(29,31,27,.76);color:#F4F2E9;cursor:pointer}

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

/* A fixed light background cannot inherit tokens that flip with the palette, so
   it carries the light register locally and every rule inside goes on reading
   tokens rather than being special-cased one at a time. */
.uk-st-feedback{--st-sheet:#ECE7DB;--st-ink:#22201C;--st-muted:#5C574F;--st-sage:#3C5245;--st-seal:#87392B;
  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(60,82,69,.34);border-radius:var(--st-radius-sm);background:#ECE7DB;color:#22201C;font-size:14px}

/* CLOSING: the sheet ends and the ruling stops with it --------------------- */
.uk-st-closing{position:relative;grid-column:1/-1;
  margin-left:calc(-1 * var(--st-pad-i));margin-right:calc(-1 * var(--st-pad-e));
  padding:64px var(--st-pad-e) 84px var(--st-pad-i);
  border-top:2px solid var(--st-rule);background:var(--st-panel);color:var(--st-ink);
  text-align:center;scroll-margin-top:16px}
.uk-st-closing-body{width:min(100%,600px);margin-inline:auto}
.uk-st-closing-body > * + *{margin-top:14px}
.uk-st-closing .uk-st-title{font-size:clamp(24px,6vw,36px)}
.uk-st-closing .uk-st-copy{margin-inline:auto}
.uk-st-closing-share{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}

/* THE RULER IN THE MARGIN -------------------------------------------------
   One tick per part, EVENLY SPACED whatever its length — the spacing is the
   levelling — and the tick's length is how many rows that part actually has. So
   the margin is a scale of the sheet rather than a list of buttons, and a long
   tick says a long part is coming before you get to it.

   It owns the right gutter and the sheet reserves it, at every breakpoint. */
.uk-st-ruler{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:26;
  display:flex;flex-direction:column;align-items:center;
  width:var(--st-margin);max-width:var(--st-margin);max-height:88svh;
  padding:10px 0;background:#22201C;border-left:1px solid rgba(244,242,233,.34);color:#F4F2E9}
/* The edge the ticks are measured from. */
.uk-st-ruler-line{position:absolute;right:8px;top:0;bottom:0;width:2px;background:rgba(216,180,99,.4)}
.uk-st-tick-list{position:relative;list-style:none;display:grid;gap:0;margin:0;padding:0;width:100%;
  /* The ticks are what gives way when the ruler 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-st-tick-list::-webkit-scrollbar{display:none}
/* A full-width row of the ruler, not the tick it draws. An earlier family left
   this to height:100% with an item that never stretched and measured 40x9 at one
   breakpoint only. */
.uk-st-tick{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-st-tick button{position:relative;display:grid;place-items:center;justify-items:end;width:100%;
  height:40px;min-height:38px;min-width:40px;border:0;background:transparent;color:inherit;
  cursor:pointer;padding:0 8px 0 0}
/* A TICK. Its length is the whole point of this index, so it is declared per
   state and nowhere else — at one length for all three this is an ordinary
   column of dashes and every rule about it still reads as correct. */
.uk-st-tick button i{display:block;height:2px;border-radius:1px;
  background:rgba(244,242,233,.5);
  transition:width .3s ease,background .3s ease,height .3s ease}
.uk-st-tick.is-long button i{width:26px}
.uk-st-tick.is-mid button i{width:17px}
.uk-st-tick.is-short button i{width:10px}
/* The part you are on is the tick the ruler is reading: brass, and thicker. */
.uk-st-tick button.is-active i{background:#D9B463;height:4px}
.uk-st-tick button:hover i{background:rgba(244,242,233,.86)}
/* The reading at the ruler's head, inside the ruler's own width so the chrome is
   never wider than the margin the sheet reserved for it. */
.uk-st-reading{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 ruler 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(--st-display);font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:#D9B463;
  pointer-events:none;white-space:nowrap;max-height:50svh;overflow:hidden}

/* Controls rail, share dialog, lightbox, toast ----------------------------- */
.uk-st-rail{position:fixed;right:14px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:24;display:grid;gap:8px;justify-items:center}
.uk-st-rail-toggle,.uk-st-rail-panel button{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(216,180,99,.52);border-radius:50%;background:#22201C;color:#F4F2E9;cursor:pointer}
.uk-st-rail-panel{display:grid;gap:8px;justify-items:center}
.uk-st-dialog,.uk-st-lightbox{position:fixed;inset:0;z-index:46;display:grid;place-items:center;padding:20px 16px;background:rgba(20,21,18,.86);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.uk-st-dialog.is-open,.uk-st-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 --st-ink and --st-sage are both light, so on this
   fixed ivory panel an eyebrow would measure near 1:1 — the same colour as the
   panel. So the panel re-declares the light register locally, --st-sheet
   included (it IS the light screen). */
.uk-st-dialog-panel{--st-sheet:#F7F4ED;--st-ink:#22201C;--st-muted:#5C574F;--st-sage:#3C5245;--st-seal:#87392B;--st-line:rgba(34,32,28,.18);
  width:min(100%,430px);padding:22px;border:1px solid var(--st-sage);border-radius:var(--st-radius);background:#F7F4ED;color:#22201C}
.uk-st-dialog-panel h2{margin-top:6px;font-size:22px}
.uk-st-share-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:16px}
.uk-st-share-grid button{display:flex;align-items:center;gap:8px;padding:11px 13px;border:1px solid rgba(34,32,28,.18);border-radius:var(--st-radius-sm);background:transparent;color:inherit;cursor:pointer;font-size:13px}
.uk-st-dialog-close{width:100%;margin-top:14px}
.uk-st-lightbox-panel{position:relative;width:min(100%,780px)}
.uk-st-lightbox-panel img{width:100%;max-height:76svh;object-fit:contain;border-radius:var(--st-radius);transition:opacity .2s ease}
.uk-st-lightbox.is-switching .uk-st-lightbox-panel img{opacity:0}
.uk-st-lightbox-counter{margin-top:12px;color:#F4F2E9;font-size:12px;letter-spacing:.16em;text-align:center}
.uk-st-lightbox-close,.uk-st-lightbox-prev,.uk-st-lightbox-next{position:absolute;display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;background:rgba(34,32,28,.84);color:#F4F2E9;cursor:pointer}
.uk-st-lightbox-close{top:-52px;right:0}
.uk-st-lightbox-prev{left:6px;top:50%;transform:translateY(-50%)}
.uk-st-lightbox-next{right:6px;top:50%;transform:translateY(-50%)}
.uk-st-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:#22201C;color:#F4F2E9;font-size:13px;pointer-events:none;transition:opacity .3s ease,transform .3s ease}
.uk-st-toast.is-visible{opacity:1;transform:translate(-50%,0)}

/* MOTION: the rules draw across, then the content settles onto them --------
   Nothing here fades in on its own. The part's rule draws itself across the full
   width of the sheet first, and what hangs from it arrives a beat later, coming
   up the last few pixels to rest ON the line rather than appearing beside it. */
.uk-st-part.is-visible::before{transform:none}
.uk-st-reveal .uk-st-beam-rule{transform:scaleX(0)}
.uk-st-reveal.is-visible .uk-st-beam-rule{transform:none}
.uk-st-reveal > .uk-st-row,.uk-st-reveal > .uk-st-chapter,.uk-st-reveal > .uk-st-gift-panel,
.uk-st-cover.uk-st-reveal .uk-st-cover-panel,.uk-st-closing.uk-st-reveal .uk-st-closing-body{
  opacity:0;transform:translateY(var(--st-settle));
  transition:opacity .62s ease .16s,transform .62s cubic-bezier(.22,.78,.2,1) .16s}
.uk-st-reveal.is-visible > .uk-st-row,.uk-st-reveal.is-visible > .uk-st-chapter,
.uk-st-reveal.is-visible > .uk-st-gift-panel,
.uk-st-cover.uk-st-reveal.is-visible .uk-st-cover-panel,
.uk-st-closing.uk-st-reveal.is-visible .uk-st-closing-body{opacity:1;transform:none}
/* A row inside a chapter or a panel is one level further down, so it is settled
   by its own class rather than by being a child of the part. */
.uk-st-reveal-item{opacity:0;transform:translateY(var(--st-settle));
  transition:opacity .58s ease .22s,transform .58s ease .22s}
.uk-st-reveal.is-visible .uk-st-reveal-item{opacity:1;transform:none}

/* Design controls ---------------------------------------------------------- */
/* "Template" is the template's OWN colours, so it restates the tokens above
   rather than a near-miss of them: the ivory sheet, the sage, the seal and the
   brass. */
.uk-design-palette-template.uk-setara{--st-sheet:#F7F4ED;--st-ink:#22201C;--st-muted:#5C574F;--st-sage:#3C5245;--st-seal:#87392B;--st-panel:#ECE7DB;--st-rule:#8B8373;--st-brass:#8A6A22;--st-line:rgba(34,32,28,.18)}
.uk-design-palette-warm.uk-setara{--st-sheet:#FAF3E6;--st-ink:#2A2418;--st-muted:#635A46;--st-sage:#4E5227;--st-seal:#8A4A17;--st-panel:#F1E8D4;--st-rule:#8F8467;--st-brass:#836218;--st-line:rgba(42,36,24,.18)}
.uk-design-palette-romantic.uk-setara{--st-sheet:#FBF1F0;--st-ink:#2C2022;--st-muted:#645055;--st-sage:#7A3846;--st-seal:#8E3A3C;--st-panel:#F3E3E2;--st-rule:#94807F;--st-brass:#8A5F4A;--st-line:rgba(44,32,34,.18)}
.uk-design-palette-sage.uk-setara{--st-sheet:#EEF1E7;--st-ink:#1E2520;--st-muted:#4F5A4C;--st-sage:#2F5039;--st-seal:#6A4423;--st-panel:#E2E8D9;--st-rule:#7E8878;--st-brass:#6F5A1E;--st-line:rgba(30,37,32,.18)}
/* Midnight is the same sheet read after dark: the paper goes to slate and the
   brass is the only thing catching light. Every token flips together, sheet and
   ink in one rule, so nothing is left the colour of what is behind it. */
.uk-design-palette-midnight.uk-setara{--st-sheet:#1A1C19;--st-ink:#F1EFE6;--st-muted:#ADA79A;--st-sage:#A9C0A2;--st-seal:#E3AE90;--st-panel:#242721;--st-rule:#787261;--st-brass:#D9B463;--st-line:rgba(241,239,230,.2)}
/* The sheet's own ruling has to invert with it, or a dark page is ruled in a
   darker-than-black line that draws nothing. */
.uk-design-palette-midnight .uk-st-sheet{background-image:repeating-linear-gradient(180deg,transparent 0 31px,rgba(241,239,230,.05) 31px 32px)}
.uk-design-palette-midnight .uk-st-gate-field{background-image:repeating-linear-gradient(180deg,transparent 0 31px,rgba(241,239,230,.16) 31px 32px)}

.uk-design-type-classic .uk-st-title,.uk-design-type-classic .uk-st-gate-names{font-family:var(--st-display)}
.uk-design-type-modern .uk-st-title,.uk-design-type-modern .uk-st-gate-names{font-family:var(--st-sans);letter-spacing:.02em}
.uk-design-type-editorial .uk-st-title{font-size:clamp(25px,6.2vw,38px);letter-spacing:-.01em}
.uk-design-type-editorial .uk-st-cover-panel .uk-st-title{font-size:clamp(33px,9.4vw,60px);letter-spacing:-.02em}

/* COMPOUND, not descendant. The design classes are printed onto the SAME element
   as .uk-setara, so ".uk-design-surface-soft .uk-setara" asks for a root inside a
   root and matches nothing: measured in nine shipped releases, all three presets
   left their tokens where the root put them and moved nothing at all.
   Here "surface" is HOW WIDE THE LABEL COLUMN MAY GROW and how far the values
   stand off it. That is not a corner radius: it changes where every value on the
   page begins, which is the signature itself.

   The cap is min(percentage, pixels), and BOTH halves are doing work. Written as
   a bare percentage it was measured to do nothing at all from 760px up: the
   widest label is about 175px, 34% of a desktop sheet is 320px, so the cap never
   bound and all three presets left the column exactly where the content put it —
   14px of travel between soft and sharp, entirely from the gutter. A preset that
   only moves a corner radius is the thing I keep refusing to ship. The pixel half
   makes the cap bind at every width; the percentage half keeps it from ever
   taking a share of a narrow sheet that the values cannot spare. */
.uk-design-surface-soft.uk-setara{--st-label:min(46%,240px);--st-gutter:26px;--st-radius:12px;--st-radius-sm:7px}
.uk-design-surface-balanced.uk-setara{--st-label:min(34%,164px);--st-gutter:18px;--st-radius:8px;--st-radius-sm:4px}
.uk-design-surface-sharp.uk-setara{--st-label:min(26%,116px);--st-gutter:12px;--st-radius:0px;--st-radius-sm:0px}

/* The gallery presets are descendants of the root, which is where the design
   class is printed, so these selectors do match. The strip's column count is
   auto-fit's answer; a preset that wants another one says so in full. */
.uk-design-gallery-grid .uk-st-strip{display:grid;overflow-x:visible}
.uk-design-gallery-filmstrip .uk-st-strip{display:flex;grid-template-columns:none;--st-gal-gap:14px;gap:var(--st-gal-gap);overflow-x:auto;padding-bottom:20px;scroll-snap-type:x mandatory}
.uk-design-gallery-filmstrip .uk-st-figure{flex:0 0 auto;grid-column:auto;width:min(62vw,240px);scroll-snap-align:center}
.uk-design-gallery-editorial .uk-st-strip{display:grid;grid-template-columns:minmax(0,1fr);row-gap:34px;overflow-x:visible}
.uk-design-gallery-editorial .uk-st-figure{grid-column:1/-1}
.uk-design-gallery-editorial .uk-st-figure img{aspect-ratio:3/2}

.uk-design-motion-soft.uk-setara{--st-settle:18px}
.uk-design-motion-cinematic.uk-setara{--st-settle:30px}
.uk-design-motion-minimal.uk-setara{--st-settle:0px}
/* Stillness has to release the RULES too. A rule left at scaleX(0) is a sheet
   with no ruling on it at all, which on a machine that asked for no motion is a
   page that never finishes drawing. */
.uk-design-motion-minimal .uk-st-part::before,
.uk-design-motion-minimal .uk-st-reveal .uk-st-beam-rule{transform:none;transition:none}
.uk-design-motion-minimal .uk-st-reveal > .uk-st-row,
.uk-design-motion-minimal .uk-st-reveal > .uk-st-chapter,
.uk-design-motion-minimal .uk-st-reveal > .uk-st-gift-panel,
.uk-design-motion-minimal .uk-st-reveal-item,
.uk-design-motion-minimal .uk-st-cover-panel,
.uk-design-motion-minimal .uk-st-closing-body{opacity:1;transform:none;transition:none}
.uk-design-motion-minimal .uk-st-gate.is-drawn .uk-st-beam-rule{animation:none}

/* THE TWO TRACKS BECOME ONE ------------------------------------------------
   Below 520px there is no room for two columns of readable type, so the label
   stands above its value instead of beside it. The chain is untouched: the sheet
   still owns the tracks and every row is still a subgrid of it, there is simply
   one track to inherit. Every label still begins at the same x and so does every
   value, which is what the page is for. */
@media(max-width:519.98px){
.uk-setara{--st-pad-i:14px}
.uk-st-sheet{grid-template-columns:minmax(0,1fr)}
.uk-st-row{align-items:start;row-gap:4px}
.uk-st-label{font-size:11px}
.uk-st-ord{display:inline;margin:0 8px 0 0}
}
@media(max-width:400px){
.uk-st-count{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
.uk-st-share-grid{grid-template-columns:minmax(0,1fr)}
.uk-st-lightbox-close{top:auto;bottom:-52px;right:50%;transform:translateX(50%)}
}

/* Wider viewports ---------------------------------------------------------- */
@media(min-width:760px){
.uk-setara{font-size:17px;--st-margin:54px;--st-pad-i:24px}
.uk-st-part{padding:38px 0 44px}
.uk-st-portrait{height:min(38svh,296px)}
.uk-st-portrait img,.uk-st-cover-media .uk-st-cover-image{object-position:var(--st-focus-desktop-x,50%) var(--st-focus-desktop-y,42%)}
.uk-st-cover-panel{padding:56px var(--st-pad-e) 74px var(--st-pad-i)}
.uk-st-gate-plate{width:min(100% - 40px,540px)}
.uk-st-closing{padding:88px var(--st-pad-e) 104px var(--st-pad-i)}
.uk-st-reading{display:block;font-size:14px}
.uk-st-portrait-round{width:84px;height:84px}
/* 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-st-strip{grid-template-columns:minmax(0,1fr)}
.uk-design-gallery-filmstrip .uk-st-strip{grid-template-columns:none}
}
@media(min-width:1100px){
/* The sheet is capped and centred so a line of prose never runs the width of a
   desktop window, and the cap is on the SHEET rather than on anything inside it
   — a second cap further in is a second authority on where a value begins. */
.uk-st-sheet{width:min(100%,1040px);margin-inline:auto}
.uk-st-part{padding:46px 0 52px}
.uk-st-closing{padding:104px var(--st-pad-e) 116px var(--st-pad-i)}
.uk-design-gallery-editorial .uk-st-strip{grid-template-columns:minmax(0,1fr)}
.uk-design-gallery-filmstrip .uk-st-strip{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-st-cover{min-height:100svh}
.uk-st-cover-panel{padding:22px var(--st-pad-e) 30px var(--st-pad-i)}
.uk-st-cover-panel .uk-st-title{font-size:clamp(22px,5.2vw,30px)}
.uk-st-cover-empty-mark{font-size:17px;padding:8px 14px}
.uk-st-gate{padding:12px 0}
.uk-st-portrait{height:min(23svh,136px)}
.uk-st-gate-body{padding:16px 16px 14px}
.uk-st-gate-names{font-size:clamp(20px,4.4vw,26px)}
/* A landscape phone is short, not narrow, so narrowing the ruler's gutter here
   buys nothing and would push a 44px button out of a 38px bar. The gutter keeps
   its width; only the standing reading gives way. */
.uk-st-reading{font-size:11px;letter-spacing:.14em;max-width:30vw}
.uk-st-rail{bottom:calc(10px + env(safe-area-inset-bottom))}
}
@media(max-height:620px) and (min-width:1025px){
.uk-st-portrait{height:min(28svh,190px)}
}

/* Reduced motion ----------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
.uk-setara *,.uk-setara *::before,.uk-setara *::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;transition-delay:0ms !important;scroll-behavior:auto !important}
.uk-st-part::before,.uk-st-reveal .uk-st-beam-rule{transform:none}
.uk-st-reveal > .uk-st-row,.uk-st-reveal > .uk-st-chapter,.uk-st-reveal > .uk-st-gift-panel,
.uk-st-reveal-item,.uk-st-cover-panel,.uk-st-closing-body{opacity:1;transform:none}
}