/* Gangsa — Romance Flagship 1.0.0
 * A wedding invitation built on a gamelan cycle. The gate is the face of a gong
 * with its raised boss at the centre; every section is headed by a colotomic
 * beat ruler that marks the cycle the way a gongan is marked — plain beats, then
 * kenong, then kempul, then the gong that closes it; the gallery sits on that
 * same beat grid with the strong beats larger; and the chapters are gong strokes
 * down the right edge.
 *
 * Every surface declares its own ground AND its own ink in the same rule, so a
 * palette can never leave text the colour of what is behind it.
 *
 * The recurring trap in this catalogue is a signature decoration drawn in the
 * colour of what sits behind it, which paints nothing at all: a deckle edge, a
 * mitred rule, a canopy valance and two reflections each shipped that way. Here
 * the beat marks are bronze on teak and the gong is a filled disc, never a
 * masked strip of the ground colour — and it is measured, not assumed.
 */

/* Tokens ------------------------------------------------------------------- */
.uk-gangsa{
  --gs-ground:#F6F1E6;--gs-ink:#231C14;--gs-mist:#6B5C48;--gs-bronze:#846528;--gs-copper:#9C4A2A;
  --gs-line:rgba(35,28,20,.16);--gs-card:rgba(255,255,255,.62);--gs-teak:#EDE4D2;
  --gs-radius:10px;--gs-radius-sm:6px;--gs-measure:58ch;
  --gs-beat:14px;          /* the space between two beats on the ruler */
  --gs-col-w:46px;         /* the cycle index's own gutter, reserved by every section */
  --gs-lift:22px;
  --gs-display:"Lora",Georgia,Cambria,"Times New Roman",serif;
  --gs-sans:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  position:relative;background:var(--gs-ground);color:var(--gs-ink);
  font-family:var(--gs-sans);font-size:16px;line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
[hidden]{display:none !important}
.uk-gangsa *,.uk-gangsa *::before,.uk-gangsa *::after{box-sizing:border-box}
.uk-gangsa 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-gangsa figure{margin:0}
.uk-gangsa h1,.uk-gangsa h2,.uk-gangsa h3,.uk-gangsa h4{font-family:var(--gs-display);font-weight:600;line-height:1.2;margin:0}
.uk-gangsa p{margin:0}
/* :where() so this stays a DEFAULT. As ".uk-gangsa 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-gangsa :where(button){font-family:inherit;color:inherit}
#uk-gs-content{padding-top:0}

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

/* THE BEAT RULER ----------------------------------------------------------
   The signature. A gongan is not a plain count: the beats are marked in a
   hierarchy, and the marks are what tell you where in the cycle you are. Sixteen
   beats laid out on a grid, every fourth a kenong, the eighth a kempul, the last
   a filled gong. Bronze on teak throughout — a mark in the ground colour would
   draw nothing, which is how four earlier signatures first shipped. */
.uk-gs-beats{display:grid;grid-template-columns:repeat(16,var(--gs-beat));align-items:end;
  gap:0;height:18px;margin:0;padding:0;list-style:none;overflow:hidden}
.uk-gs-beats li{position:relative;height:100%}
/* A plain beat: a short bronze tick standing on the cycle's baseline. */
.uk-gs-beats li::after{content:"";position:absolute;left:0;bottom:0;width:1px;height:6px;background:var(--gs-bronze);opacity:.5}
/* Kenong: every fourth beat, taller. */
.uk-gs-beats li.is-kenong::after{height:11px;opacity:.85}
/* Kempul: the half-cycle, taller again and in copper. */
.uk-gs-beats li.is-kempul::after{height:15px;background:var(--gs-copper);opacity:.95}
/* Gong: the stroke that closes the cycle — a filled disc, not a tick. */
.uk-gs-beats li.is-gong::after{left:-3px;bottom:-1px;width:9px;height:9px;border-radius:50%;background:var(--gs-bronze);opacity:1}
/* The baseline the marks stand on. */
.uk-gs-baseline{display:block;height:1px;margin:0 0 12px;background:var(--gs-bronze);opacity:.28}

/* GATE: the face of a gong ------------------------------------------------
   The boss at the centre IS the button. The rings are drawn behind it and never
   over it, so the thing that decorates the way in can never cover it. */
.uk-gs-gate{--gs-ground:#181309;--gs-ink:#F2EADA;--gs-mist:#B4A68F;--gs-bronze:#C9A15A;--gs-copper:#D98A5A;--gs-line:rgba(242,234,218,.22);--gs-card:rgba(255,255,255,.06);
  position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:20px;background:#110D07;color:var(--gs-ink);transition:opacity .7s ease,visibility .7s ease}
.uk-gs-gate.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.uk-gs-face{position:relative;display:grid;grid-template-rows:auto auto;place-items:center;width:min(100%,460px)}
/* The concentric bronze rings of the gong face. They sit behind the card, so
   they have to be WIDER than it or the card hides all of them — measured at
   390px, the card left only a sliver of arc showing at each edge. The field is
   centred on the card and reaches well past it, so the rings read as the face
   the card is struck against. */
.uk-gs-rings{position:absolute;left:50%;top:50%;z-index:0;width:min(168vw,780px);aspect-ratio:1;
  transform:translate(-50%,-50%);pointer-events:none;border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%,rgba(201,161,90,.2) 0 1px,transparent 1px 24px);
  opacity:.95}
.uk-gs-card{position:relative;z-index:2;grid-row:1;display:grid;grid-template-rows:auto auto;overflow:hidden;border:1px solid var(--gs-line);border-radius:var(--gs-radius);background:#1F1810}
.uk-gs-portrait{position:relative;height:min(40svh,272px);overflow:hidden;background:#2A2116}
.uk-gs-portrait img{width:100%;height:100%;object-fit:cover;object-position:var(--gs-focus-mobile-x,50%) var(--gs-focus-mobile-y,38%)}
.uk-gs-gate-body{position:relative;padding:26px 22px 24px;text-align:center}
.uk-gs-gate-body h1{margin-top:8px;font-size:clamp(27px,7.6vw,42px)}
.uk-gs-gate-date{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:7px 16px;border:1px solid var(--gs-line);border-radius:999px;font-size:12px;letter-spacing:.08em;color:var(--gs-mist)}
.uk-gs-couple-list{display:grid;gap:8px;margin-top:14px}
.uk-gs-couple-list span{display:grid;gap:2px}
.uk-gs-couple-list small{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gs-mist)}
.uk-gs-couple-list strong{font-family:var(--gs-display);font-size:18px;font-weight:600}
/* The boss. A raised disc of bronze — this is what the guest strikes. */
/* Its own line, always. The buttons here are inline-flex, so on a card wide
   enough the boss came to rest beside the date chip instead of centred beneath
   it — seen at 1280, where the card is 530px across. */
.uk-gs-gate-open{position:relative;display:flex;width:fit-content;margin:18px auto 0;padding:13px 26px;border-color:transparent;background:var(--gs-bronze);color:#201505;font-size:14px;
  box-shadow:0 0 0 4px rgba(201,161,90,.16)}
/* The ring the strike sends out. */
.uk-gs-strike{position:absolute;left:50%;top:50%;z-index:1;width:12px;height:12px;margin:-6px 0 0 -6px;border:1px solid var(--gs-bronze);border-radius:50%;opacity:0;pointer-events:none}
.uk-gs-gate.is-struck .uk-gs-strike{animation:uk-gs-ring 1s ease-out forwards}
@keyframes uk-gs-ring{from{opacity:.65;transform:scale(1)}to{opacity:0;transform:scale(40)}}

/* COVER -------------------------------------------------------------------- */
.uk-gs-cover{--gs-ground:#1A140C;--gs-ink:#F2EADA;--gs-mist:#BCAE99;--gs-bronze:#C9A15A;--gs-copper:#D98A5A;--gs-line:rgba(242,234,218,.24);
  position:relative;display:grid;min-height:100svh;background:var(--gs-ground);color:var(--gs-ink)}
.uk-gs-cover-media{position:absolute;inset:0;overflow:hidden}
.uk-gs-cover-image{width:100%;height:100%;object-fit:cover;object-position:var(--gs-focus-mobile-x,50%) var(--gs-focus-mobile-y,38%)}
.uk-gs-cover-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,20,12,.3) 0%,rgba(26,20,12,.76) 60%,#1A140C 100%)}
.uk-gs-cover-empty{position:absolute;inset:0;display:grid;place-items:center;background:#1E1710}
.uk-gs-cover-empty-grid{position:absolute;inset:0;background-image:repeating-radial-gradient(circle at 50% 42%,rgba(201,161,90,.12) 0 1px,transparent 1px 30px)}
.uk-gs-cover-empty-mark{position:relative;font-family:var(--gs-display);font-size:23px;letter-spacing:.2em;padding:10px 18px;border:1px solid var(--gs-line);border-radius:999px;color:#F2EADA}
.uk-gs-cover-panel{position:relative;align-self:end;padding:40px calc(var(--gs-col-w) + 12px) 56px;text-align:center}
.uk-gs-cover-panel h1{margin-top:8px;font-size:clamp(29px,8.4vw,52px)}
.uk-gs-cover-date{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:7px 16px;border:1px solid var(--gs-line);border-radius:999px;font-size:12px;letter-spacing:.08em;color:var(--gs-mist)}

/* THE CYCLE: panels headed by their beat ruler -----------------------------
   The index owns the right gutter and every section reserves it, at every
   breakpoint, so no line of text can run underneath the gong strokes. */
.uk-gs-sec{position:relative;padding:0 calc(var(--gs-col-w) + 10px) 26px 14px;background:var(--gs-ground);scroll-margin-top:16px}
.uk-gs-panel{position:relative;width:min(100%,780px);margin-inline:auto;
  padding:26px 24px 26px;color:var(--gs-ink);
  background:var(--gs-card);border:1px solid var(--gs-line);
  border-radius:var(--gs-radius);box-shadow:0 12px 26px rgba(35,28,20,.07)}
.uk-gs-mark{position:absolute;right:18px;top:16px;font-family:var(--gs-display);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gs-mist)}
.uk-gs-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-gs-head,.uk-gs-body{max-width:min(100%,620px);margin-inline:auto}
.uk-gs-body{position:relative;z-index:1}
.uk-gs-body h2{font-size:clamp(22px,5.2vw,32px)}
.uk-gs-body h3{font-size:18px}
.uk-gs-body h4{font-size:17px}
.uk-gs-narrow{width:min(100%,600px);margin-inline:auto;text-align:center}

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

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

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

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

/* GALLERY: photos on the beat grid ----------------------------------------
   Four columns, and a photo that lands on a strong beat takes two of them. The
   pattern repeats every four so the emphasis falls where the kenong does. */
.uk-gs-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(--gs-mist)}
.uk-gs-gallery-tools div{display:flex;gap:8px}
.uk-gs-gallery-tools button{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--gs-line);border-radius:var(--gs-radius-sm);background:transparent;cursor:pointer}
.uk-gs-gallery{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:22px}
.uk-gs-strike-tile{position:relative;grid-column:span 2;margin:0;overflow:hidden;border-radius:var(--gs-radius-sm);background:var(--gs-teak)}
/* The strong beat takes the full bar, and the two beats after it share the next
   one — a cycle of three tiles that fills exactly two rows, every time.
   A strong beat every FOURTH tile leaves three half-width tiles to pair off two
   at a time, so the third is laid out alone beside an empty half. Measured at
   both widths before this was changed. */
.uk-gs-strike-tile:nth-child(3n+1){grid-column:1/-1}
.uk-gs-strike-tile img{width:100%;aspect-ratio:4/5;object-fit:cover}
.uk-gs-strike-tile:nth-child(3n+1) img{aspect-ratio:16/9}
.uk-gs-strike-tile button{position:absolute;right:8px;bottom:8px;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:rgba(24,19,9,.74);color:#F6F1E6;cursor:pointer}
/* The one position a cycle can end on and leave a tile alone: the first of the
   two beats after a strong one. It takes the full bar instead, with the strong
   beat's wide crop — at its own 4/5 portrait a full-width tile came out 620x775
   on a desktop, three times the height of everything above it. */
.uk-gs-strike-tile:last-child:nth-child(3n+2){grid-column:1/-1}
.uk-gs-strike-tile:last-child:nth-child(3n+2) img{aspect-ratio:16/9}

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

/* CLOSING: the final gong -------------------------------------------------- */
.uk-gs-closing{--gs-ground:#181309;--gs-ink:#F2EADA;--gs-mist:#B6A891;--gs-bronze:#C9A15A;--gs-copper:#D98A5A;--gs-line:rgba(242,234,218,.22);--gs-card:rgba(255,255,255,.07);--gs-teak:#100C06;
  position:relative;padding:72px calc(var(--gs-col-w) + 12px) 88px;
  background:var(--gs-ground);color:var(--gs-ink);text-align:center;scroll-margin-top:16px}
.uk-gs-closing h2{font-size:clamp(24px,6vw,36px)}
.uk-gs-closing-mark{display:grid;place-items:center;width:64px;height:64px;margin:20px auto 0;border:2px solid var(--gs-bronze);border-radius:50%;font-family:var(--gs-display);font-size:14px;letter-spacing:.16em;color:var(--gs-bronze);
  box-shadow:0 0 0 5px rgba(201,161,90,.14)}
.uk-gs-closing-share{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}

/* THE CYCLE INDEX: chapters as gong strokes down the right edge ------------
   The chapter being read swells its stroke. A stroke is drawn inside a
   full-height row of the index's own width, not the disc it draws, so every
   chapter is a real target to press. */
.uk-gs-cycle{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:26;display:flex;flex-direction:column;align-items:center;
  width:var(--gs-col-w);max-width:var(--gs-col-w);max-height:88svh;
  padding:8px 0;background:rgba(24,19,9,.92);border-left:1px solid rgba(201,161,90,.4);color:#F2EADA}
.uk-gs-cycle-line{position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(201,161,90,.42);transform:translateX(-50%)}
.uk-gs-strokes{position:relative;list-style:none;display:grid;gap:0;margin:0;padding:0;width:100%;
  /* The strokes are what gives way when the index 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-gs-strokes::-webkit-scrollbar{display:none}
.uk-gs-stroke button{display:grid;place-items:center;width:100%;height:44px;border:0;background:transparent;color:inherit;cursor:pointer;padding:0}
.uk-gs-stroke button i{display:block;width:9px;height:9px;border-radius:50%;background:rgba(242,234,218,.42);transition:transform .3s ease,background .3s ease,box-shadow .3s ease}
.uk-gs-stroke button.is-active i{transform:scale(1.5);background:#C9A15A;box-shadow:0 0 0 3px rgba(201,161,90,.22)}
.uk-gs-stroke button:hover i{transform:scale(1.25)}
/* The chapter being read, named in standing type inside the index's own width
   so the chrome is never wider than the gutter the sections reserved. */
.uk-gs-standing{display:none;
  /* flex:0 0 auto, never flex:1. A vertical line of type has no height of its
     own to grow from, and the index shrink-wraps its strokes, so a name asking
     for leftover space is drawn a few pixels wide and none tall. */
  flex:0 0 auto;min-width:0;margin:6px 0 0;padding:0;
  writing-mode:vertical-rl;text-orientation:mixed;text-align:center;
  font-family:var(--gs-display);font-size:13px;letter-spacing:.26em;text-transform:uppercase;color:#C9A15A;
  pointer-events:none;white-space:nowrap;max-height:52svh;overflow:hidden}

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

/* Reveals: struck bronze settling ---------------------------------------- */
.uk-gs-reveal{opacity:0;transform:translateY(var(--gs-lift));transition:opacity .7s ease,transform .7s cubic-bezier(.22,.78,.2,1)}
.uk-gs-reveal.is-visible{opacity:1;transform:none}
.uk-gs-reveal-item{opacity:0;transform:translateY(12px);transition:opacity .58s ease .08s,transform .58s ease .08s}
.uk-gs-reveal.is-visible .uk-gs-reveal-item{opacity:1;transform:none}

/* Design controls ---------------------------------------------------------- */
.uk-design-palette-template.uk-gangsa{--gs-ground:#F6F1E6;--gs-ink:#231C14;--gs-mist:#6B5C48;--gs-bronze:#846528;--gs-copper:#9C4A2A;--gs-teak:#EDE4D2}
.uk-design-palette-warm.uk-gangsa{--gs-ground:#FBF3E3;--gs-ink:#2B2116;--gs-mist:#6D5E48;--gs-bronze:#93641F;--gs-copper:#9A4C1C;--gs-teak:#F2E6CE}
.uk-design-palette-warm .uk-gs-closing{--gs-ground:#2B2116;--gs-ink:#FBF3E5;--gs-mist:#CDBEA6;--gs-bronze:#E0BC8A;--gs-copper:#E5A173;--gs-teak:#1C150E}
.uk-design-palette-romantic.uk-gangsa{--gs-ground:#FBEFEE;--gs-ink:#2C1D1E;--gs-mist:#6A5052;--gs-bronze:#9B3C4C;--gs-copper:#8D5533;--gs-teak:#F2DEDE}
.uk-design-palette-romantic .uk-gs-closing{--gs-ground:#2C1D1E;--gs-ink:#FAE9EA;--gs-mist:#CFADB0;--gs-bronze:#E7A7B4;--gs-copper:#E79A94;--gs-teak:#1B1213}
.uk-design-palette-sage.uk-gangsa{--gs-ground:#EEF3EA;--gs-ink:#1F2A20;--gs-mist:#546053;--gs-bronze:#3F6444;--gs-copper:#7A5A2E;--gs-teak:#DFE9DA}
.uk-design-palette-sage .uk-gs-closing{--gs-ground:#1F2A20;--gs-ink:#ECF3E8;--gs-mist:#BDCEB8;--gs-bronze:#B4CFA9;--gs-copper:#DCBE86;--gs-teak:#131B14}
.uk-design-palette-midnight.uk-gangsa{--gs-ground:#14110D;--gs-ink:#F2EADA;--gs-mist:#ABA08D;--gs-bronze:#C9A15A;--gs-copper:#D98A5A;--gs-line:rgba(242,234,218,.2);--gs-card:rgba(255,255,255,.07);--gs-teak:#0D0A07}
.uk-design-palette-midnight .uk-gs-closing{--gs-ground:#14110D;--gs-ink:#F2EADA;--gs-mist:#ABA08D;--gs-bronze:#C9A15A;--gs-copper:#D98A5A;--gs-teak:#0A0806}
.uk-design-type-classic .uk-gs-body h2,.uk-design-type-classic .uk-gs-gate-body h1{font-family:var(--gs-display)}
.uk-design-type-modern .uk-gs-body h2,.uk-design-type-modern .uk-gs-gate-body h1,.uk-design-type-modern .uk-gs-cover-panel h1{font-family:var(--gs-sans);letter-spacing:.02em}
.uk-design-type-editorial .uk-gs-body h2{font-size:clamp(26px,6.4vw,40px);letter-spacing:-.01em}
.uk-design-type-editorial .uk-gs-cover-panel h1{font-size:clamp(33px,9.4vw,60px);letter-spacing:-.02em}
/* The beat ruler is the signature, so "surface" changes how wide the cycle is
   spaced rather than flattening it away. */
.uk-design-surface-soft .uk-gangsa{--gs-beat:14px;--gs-radius:10px;--gs-radius-sm:6px}
.uk-design-surface-balanced .uk-gangsa{--gs-beat:18px;--gs-radius:6px;--gs-radius-sm:4px}
.uk-design-surface-sharp .uk-gangsa{--gs-beat:22px;--gs-radius:0px;--gs-radius-sm:0px}
.uk-design-gallery-grid .uk-gs-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow-x:visible}
.uk-design-gallery-filmstrip .uk-gs-gallery{display:flex;grid-template-columns:none;gap:12px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}
.uk-design-gallery-filmstrip .uk-gs-strike-tile,
.uk-design-gallery-filmstrip .uk-gs-strike-tile:nth-child(3n+1),
.uk-design-gallery-filmstrip .uk-gs-strike-tile:last-child:nth-child(3n+2){flex:0 0 auto;grid-column:auto;width:min(62vw,240px);scroll-snap-align:center}
.uk-design-gallery-filmstrip .uk-gs-strike-tile img,
.uk-design-gallery-filmstrip .uk-gs-strike-tile:nth-child(3n+1) img,
.uk-design-gallery-filmstrip .uk-gs-strike-tile:last-child:nth-child(3n+2) img{aspect-ratio:4/5}
.uk-design-gallery-editorial .uk-gs-gallery{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;overflow-x:visible}
.uk-design-gallery-editorial .uk-gs-strike-tile,
.uk-design-gallery-editorial .uk-gs-strike-tile:nth-child(3n+1),
.uk-design-gallery-editorial .uk-gs-strike-tile:last-child:nth-child(3n+2){grid-column:1/-1}
.uk-design-gallery-editorial .uk-gs-strike-tile img,
.uk-design-gallery-editorial .uk-gs-strike-tile:nth-child(3n+1) img,
.uk-design-gallery-editorial .uk-gs-strike-tile:last-child:nth-child(3n+2) img{aspect-ratio:3/2}
.uk-design-motion-soft .uk-gangsa{--gs-lift:22px}
.uk-design-motion-cinematic .uk-gangsa{--gs-lift:36px}
.uk-design-motion-minimal .uk-gangsa{--gs-lift:0px}
.uk-design-motion-minimal .uk-gs-reveal,.uk-design-motion-minimal .uk-gs-reveal-item{opacity:1;transform:none;transition:none}
.uk-design-motion-minimal .uk-gs-gate.is-struck .uk-gs-strike{animation:none}

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

/* Narrow phones ------------------------------------------------------------ */
@media(max-width:560px){
.uk-gs-count{grid-template-columns:repeat(2,minmax(0,1fr))}
.uk-gs-people{grid-template-columns:minmax(0,1fr);gap:24px}
.uk-gs-accounts,.uk-gs-contacts{grid-template-columns:minmax(0,1fr)}
.uk-gs-share-grid{grid-template-columns:minmax(0,1fr)}
.uk-gs-lightbox-close{top:auto;bottom:-52px;right:50%;transform:translateX(50%)}
}
@media(max-width:360px){
.uk-gangsa{--gs-col-w:36px;--gs-beat:11px}
/* On the narrowest phone the cycle stops being a fixed pitch and divides the
   width it actually has, so sixteen beats can never run past the panel however
   little room is left after the index gutter. */
.uk-gs-beats{grid-template-columns:repeat(16,minmax(0,1fr));width:100%}
.uk-gs-sec{padding:0 calc(var(--gs-col-w) + 6px) 20px 10px}
.uk-gs-closing{padding:52px calc(var(--gs-col-w) + 6px) 66px}
.uk-gs-panel{padding:20px 16px 20px}
.uk-gs-event{grid-template-columns:minmax(0,1fr);gap:10px}
.uk-gs-stroke button{height:38px}
.uk-design-gallery-grid .uk-gs-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
.uk-design-gallery-editorial .uk-gs-gallery{grid-template-columns:minmax(0,1fr)}
.uk-design-gallery-filmstrip .uk-gs-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-gs-cover{min-height:100svh}
.uk-gs-cover-panel{padding:22px calc(var(--gs-col-w) + 10px) 30px}
.uk-gs-cover-panel h1{font-size:clamp(22px,5.2vw,30px)}
.uk-gs-cover-empty-mark{font-size:17px;padding:8px 14px}
.uk-gs-gate{padding:12px}
.uk-gs-portrait{height:min(23svh,136px)}
.uk-gs-gate-body{padding:16px 16px 14px}
.uk-gs-gate-body h1{font-size:clamp(20px,4.4vw,26px)}
.uk-gs-rings{width:min(150vh,620px)}
.uk-gs-stroke button{height:38px}
.uk-gs-standing{font-size:11px;letter-spacing:.18em;max-height:66svh}
.uk-gs-rail{bottom:calc(10px + env(safe-area-inset-bottom))}
}
@media(max-height:620px) and (min-width:1025px){
.uk-gs-portrait{height:min(28svh,190px)}
.uk-gs-stroke button{height:38px}
}

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