/* Ruas — Romance Flagship 1.0.0
 * A ruas is an internode: the clear length of bamboo between two nodes. This
 * family is one culm, split and laid open, and every section of the invitation is
 * one internode of it.
 *
 * THE ONE DECISION, AND IT IS NOT A SETTING. A culm's internodes are not equal.
 * They are short at the foot, lengthen as the culm rises, reach their longest a
 * little above the middle, and shorten again toward the crown. That curve is the
 * whole rhythm of this family: the CLEAR FIELD of a section — the space between
 * its node and its writing — is a function of where that section sits in the
 * document, and of nothing else.
 *
 *     field(n) = node * (1 + span * sin(pi * (n - 0.5) / total) ^ 0.75)
 *
 * The shape is computed once in the Blade, written onto the section as --rs-shape,
 * and multiplied here by --rs-span. Two couples with the same sections get the
 * same curve; a couple who adds one section gets a different one, because the
 * curve is read over the whole culm and every internode moves.
 *
 * WHAT THAT BUYS. A document that opens tight, opens out, and closes tight again,
 * without a single per-section setting anywhere — and a page that is visibly not
 * a stack of equal boxes, which is what every uniform rhythm eventually reads as.
 *
 * A NODE IS A SWELLING, NOT A LINE. It stands proud of the internodes either side
 * and catches the light, so it is LIGHTER than the face; a single dark groove runs
 * along its lower edge; and it casts a short scar down onto the internode below.
 * Written as a 1px rule it reads as a divider bar — that was measured on the
 * control page before a line of this file existed, and the difference between a
 * material and a rule is the whole of it.
 *
 * THE GAUGE IS A SEGMENT, NOT A RING. A ring with an arc reads as progress through
 * a document to anybody who has used the web; the claim that it measured only the
 * internode lived in the author's head and not on the screen. Drawn as a short
 * length of culm with a node at each end, filling from its lower node upward, it
 * can only be read as the segment you are inside.
 *
 * Things that are easy to get wrong here and invisible in a stylesheet read.
 *
 *   THE GRAIN SHOUTING. Bamboo fibre is nearly invisible on a finished surface.
 *   At .045 over two pitches the control page read as corrugated board. One pitch,
 *   .022, and no more.
 *
 *   A CLEAR FIELD THAT STOPS BEING A FUNCTION. The moment one section carries its
 *   own padding the curve has a hole in it, and the hole is invisible because that
 *   one section still looks fine. Nothing in this file sets padding-block on a
 *   section but the one rule that reads the law.
 *
 *   A CULM WITH NO EDGES. The two long edges are the first thing the eye reads as
 *   bamboo. Without them the page is a cream rectangle with bands across it.
 *
 *   A PALETTE TOKEN LEFT BEHIND. The node ring is drawn from the skin, the scar
 *   from the ink, the sheath mark from the sheath — all three flip together or the
 *   dark culm gets a node the colour of the face it stands on.
 */

/* Tokens ------------------------------------------------------------------- */
.uk-ruas{
  --rs-culm:#EFE3C9;      /* the split face of the culm: the page */
  --rs-skin:#E0D0AC;      /* the harder outer skin: the node ring, and set-in panels */
  --rs-ink:#241C10;
  --rs-quiet:#5E4F36;
  --rs-sheath:#6E4712;    /* the one second colour, from the sheath at the node */
  --rs-line:rgba(36,28,16,.26);
  --rs-deep:rgba(36,28,16,.4);
  --rs-radius:0px;        /* bamboo is cut, not rounded */

  /* THE UNIT the law is counted in, and the ring the law is measured from. */
  --rs-node:22px;
  --rs-ring:calc(var(--rs-node) * 1.4);
  /* The amplitude of the curve. A tight-noded culm and an open one are different
     plants, and that is what the surface control chooses. */
  --rs-span:1.9;
  /* Where this section sits on the curve, 0 at either end and 1 at the middle.
     Written per section by the Blade; the fallback keeps a stray element on the
     foot of the culm rather than collapsing its field to nothing. */
  --rs-shape:0;

  --rs-measure:30em;
  --rs-band:30em;
  --rs-pad:22px;

  --rs-display:"Lora",Georgia,Cambria,"Times New Roman",serif;
  --rs-sans:"Lora",Georgia,Cambria,"Times New Roman",serif;
  position:relative;min-height:100svh;background:var(--rs-culm);color:var(--rs-ink);
  font-family:var(--rs-sans);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
  /* CLIP, NOT HIDDEN. overflow-x:hidden forces overflow-y to a used value of auto,
     which makes this element a scroll container, and a sticky descendant then
     sticks to THIS element's scrollport instead of the window's. clip clips the
     same overflow without creating one. */
  overflow-x:hidden;
}
@supports (overflow-x:clip){.uk-ruas{overflow-x:clip}}

[hidden]{display:none !important}
.uk-ruas *,.uk-ruas *::before,.uk-ruas *::after{box-sizing:border-box}
.uk-ruas img{display:block;max-width:100%}
/* Every UA margin, not only the ones that are easy to remember: blockquote, dl,
   dd, ol and ul all carry 1em, and :where() keeps the reset at zero specificity so
   it cannot outrank the components it is resetting. */
.uk-ruas :where(p,blockquote,figure,ol,ul,dl,dt,dd,pre,address){margin:0}
.uk-ruas :where(ol,ul){padding:0;list-style:none}
.uk-ruas :where(h1,h2,h3,h4){font-family:var(--rs-display);font-weight:600;line-height:1.24;margin:0}
.uk-ruas :where(button){font-family:inherit;color:inherit}

/* Shared type and ornament ------------------------------------------------- */
.uk-rs-eyebrow{font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--rs-sheath)}
.uk-rs-preline{white-space:pre-line}
.uk-rs-signature{font-family:var(--rs-display);font-size:21px;color:var(--rs-ink)}
.uk-rs-quote{max-width:var(--rs-measure);padding:0 0 0 18px;border-left:2px solid var(--rs-sheath);
  color:var(--rs-ink);font-family:var(--rs-display);font-size:17px;font-style:italic}
.uk-rs-quote cite{display:block;margin-top:10px;font-family:var(--rs-sans);font-size:12px;
  font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--rs-quiet)}
.uk-rs-occasions{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
  column-gap:8px;row-gap:4px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--rs-quiet)}
.uk-rs-occasions span+span::before{content:"·";padding-right:8px;color:var(--rs-sheath)}
.uk-rs-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;
  padding:11px 18px;border:1px solid var(--rs-line);border-radius:var(--rs-radius);
  background:transparent;color:var(--rs-ink);font-size:13px;font-weight:600;letter-spacing:.05em;
  text-decoration:none;cursor:pointer;transition:box-shadow .25s ease}
.uk-rs-button:hover{box-shadow:inset 0 -2px 0 var(--rs-sheath)}
/* The label is --rs-culm, not a fixed cream, and the fill is --rs-ink, so the pair
   inverts with the palette instead of staying dark on a dark culm. */
.uk-rs-button.is-solid{border-color:transparent;background:var(--rs-ink);color:var(--rs-culm)}
.uk-rs-button:focus-visible,.uk-ruas button:focus-visible,.uk-ruas a:focus-visible{
  outline:2px solid var(--rs-sheath);outline-offset:3px}

/* THE CULM ----------------------------------------------------------------
   One field with two hard EDGES, and a grain so fine it is felt rather than seen.
   The edges are what the eye reads as bamboo before anything else. */
.uk-rs-sheet{position:relative;display:grid;grid-template-columns:minmax(0,1fr);
  width:min(100%,940px);margin-inline:auto;
  background:repeating-linear-gradient(90deg,
    rgb(var(--rs-ink-rgb,36 28 16) / .022) 0 1px, transparent 1px 11px);
  box-shadow:inset 3px 0 0 var(--rs-deep), inset -3px 0 0 var(--rs-deep),
             inset 7px 0 8px -7px var(--rs-deep), inset -7px 0 8px -7px var(--rs-deep)}
.uk-rs-sheet > *{grid-column:1/-1}

/* AN INTERNODE. Its clear field is the law and nothing else: node * (1 + span *
   shape). Nowhere else in this file is padding-block set on a section — one
   section carrying its own would put a hole in the curve, and the hole would be
   invisible because that section would still look correct. */
.uk-rs-sec{position:relative;
  padding:calc(var(--rs-ring) + var(--rs-node) * (1 + var(--rs-span) * var(--rs-shape)))
          var(--rs-pad)
          calc(var(--rs-node) * (1 + var(--rs-span) * var(--rs-shape)))}

/* THE NODE. A swelling: lighter than the face because it stands proud and catches
   the light, with one dark groove along its lower edge. Drawn full bleed, because
   a node goes right round the culm. */
.uk-rs-sec::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--rs-ring);
  transform-origin:left center;
  background:linear-gradient(180deg,
    var(--rs-deep) 0 1px,
    color-mix(in srgb, var(--rs-skin) 58%, var(--rs-culm)) 1px 46%,
    var(--rs-skin) 46% 74%,
    var(--rs-deep) 74% calc(74% + 2px),
    color-mix(in srgb, var(--rs-skin) 78%, var(--rs-ink)) calc(74% + 2px) 100%)}
/* THE SCAR the node leaves on the internode below it. */
.uk-rs-sec::after{content:"";position:absolute;left:0;right:0;top:var(--rs-ring);height:18px;
  pointer-events:none;background:linear-gradient(180deg, rgb(var(--rs-ink-rgb,36 28 16) / .13), transparent)}

.uk-rs-body{position:relative;width:min(100%,var(--rs-band));margin-inline:auto}
.uk-rs-body > * + *{margin-top:16px}

/* THE SHEATH MARK. A node is where a leaf sheath was, and the section's name and
   number are stamped there — on the ring, in the one second colour. */
.uk-rs-mark{position:absolute;left:var(--rs-pad);right:var(--rs-pad);
  top:calc(var(--rs-ring) * .44);transform:translateY(-50%);z-index:2;
  display:flex;align-items:baseline;gap:12px;margin:0;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--rs-sheath)}
.uk-rs-mark b{font-weight:700;font-variant-numeric:tabular-nums}
.uk-rs-mark em{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.uk-rs-title{max-width:var(--rs-measure);font-family:var(--rs-display);color:var(--rs-ink);
  font-size:clamp(21px,5.2vw,28px);text-wrap:balance}
.uk-rs-title.is-sm{font-size:clamp(16px,3.2vw,19px)}
.uk-rs-copy,.uk-rs-lead{max-width:var(--rs-measure);color:var(--rs-quiet)}
.uk-rs-lead{font-family:var(--rs-display);font-size:18px;color:var(--rs-ink)}
.uk-rs-copy{font-size:15px}

/* WHAT THE GUEST MUST ACT ON is set into the skin — the harder outer face — which
   is the one surface this family has besides the split face. Its ring is a
   box-shadow so the panel does not grow by two pixels it did not ask for. */
.uk-rs-seam{padding:16px 18px;box-shadow:inset 0 0 0 1px var(--rs-line);background:var(--rs-skin);
  font-family:var(--rs-sans);font-size:15px;color:var(--rs-ink)}
.uk-rs-seam dt,.uk-rs-seam .uk-rs-row-mark{margin:0 0 3px;font-size:10px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--rs-sheath)}
.uk-rs-seam dd{margin:0 0 14px;color:var(--rs-ink)}
.uk-rs-seam dd:last-child{margin-bottom:0}
.uk-rs-seam dd strong{display:block;font-weight:600;color:var(--rs-ink)}
/* :where() AROUND THE WHOLE DESCENDANT PART, not around the span alone. As
   ".uk-XX-seam dd span" this is (0,2,1) and outranks the component class of anything placed inside a
   dd — the row of action buttons in this very panel is a <span class="actions">,
   and it was laid out as a BLOCK with its row gap dead, in both this family and
   the one before it, while looking close enough to correct to survive a read and
   a screenshot. Measured: computed display block where the component says flex.
   Wrapping only the span leaves the dd behind and the rule is still (0,1,1),
   which still wins — the first fix measured exactly as broken as the bug. */
.uk-rs-seam :where(dd span){display:block;color:var(--rs-quiet);font-size:13px}
.uk-rs-seam .uk-rs-actions{margin-top:12px}

/* THE GAUGE — a short length of culm with a node at each end, filling from its
   lower node upward as you cross the internode you are inside. It does not measure
   the document; a culm is a row of closed vessels and you are in one at a time. */
.uk-rs-folio{position:fixed;z-index:26;right:14px;
  bottom:calc(78px + env(safe-area-inset-bottom));
  display:grid;place-items:center;width:38px;height:82px;padding:0;
  border:0;border-radius:var(--rs-radius);background:var(--rs-skin);
  box-shadow:0 2px 12px var(--rs-deep);cursor:pointer;text-decoration:none}
/* the fill: how far through this internode the reader has come */
.uk-rs-folio::before{content:"";position:absolute;left:0;right:0;bottom:0;
  height:calc(var(--rs-fill,0) * 100%);background:var(--rs-sheath);opacity:.26;
  transition:height .18s linear}
/* a node at each end of the little segment */
.uk-rs-folio::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--rs-skin) 58%, var(--rs-culm)) 0 5px,
    var(--rs-deep) 5px 7px,
    transparent 7px calc(100% - 7px),
    var(--rs-deep) calc(100% - 7px) calc(100% - 5px),
    color-mix(in srgb, var(--rs-skin) 58%, var(--rs-culm)) calc(100% - 5px) 100%)}
.uk-rs-folio b{position:relative;z-index:2;font-family:var(--rs-display);font-size:14px;
  letter-spacing:.04em;color:var(--rs-ink);font-variant-numeric:tabular-nums}
/* The name of the internode is read out to assistive technology and never drawn:
   there is no room for it on a segment this size, and the segment is the point. */
.uk-rs-folio span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap}

/* THE CONTENTS, set once in the flow near the foot of the culm. The gauge returns
   to it; it is not a panel and it does not float. */
.uk-rs-contents{display:grid;gap:2px}
.uk-rs-contents li{position:relative}
/* The number first and the name after it, in the same order the sheath mark on
   the node prints them. Written the other way round the name lands in the 2.6em
   column and wraps one word per line, which is what the first render did. */
.uk-rs-contents a{display:grid;grid-template-columns:2.6em minmax(0,1fr);column-gap:14px;
  align-items:baseline;min-height:36px;align-content:center;color:var(--rs-ink);text-decoration:none}
.uk-rs-contents b{font-weight:400;font-variant-numeric:tabular-nums;color:var(--rs-sheath);
  font-size:13px;letter-spacing:.1em}
.uk-rs-contents span{font-size:15px}
/* every row is one internode, so every row carries a node of its own */
.uk-rs-contents li + li::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
  background:var(--rs-line)}
.uk-rs-contents li.is-here span{color:var(--rs-sheath)}
.uk-rs-contents li.is-here b{font-weight:700}

/* GATE: the culm seen END-ON --------------------------------------------------
   A cut length of bamboo looked at down its axis: a ring with a real wall
   thickness, the hollow inside it, and the names in the hollow. No other family
   opens on a circle, and nothing else here is round. */
.uk-rs-gate{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:20px 0;
  overflow:hidden;background:var(--rs-culm);color:var(--rs-ink);
  transition:opacity .7s ease,visibility .7s ease}
.uk-rs-gate.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.uk-rs-gate-stage{position:relative;display:grid;place-items:center;width:100%}
.uk-rs-gate-panel{position:relative;z-index:2;display:grid;justify-items:center;
  width:min(100% - 44px,420px);padding:0 24px;text-align:center}
/* the cut end: the wall of the culm is the ring, the hollow is the photograph */
.uk-rs-portrait{position:relative;width:min(70vw,250px);aspect-ratio:1;overflow:hidden;
  border-radius:50%;background:var(--rs-skin);
  box-shadow:0 0 0 10px var(--rs-skin), 0 0 0 11px var(--rs-deep),
             inset 0 0 0 1px var(--rs-deep), 0 10px 26px var(--rs-deep)}
.uk-rs-portrait img{width:100%;height:100%;object-fit:cover;
  object-position:var(--rs-focus-mobile-x,50%) var(--rs-focus-mobile-y,38%)}
/* FULL WIDTH, or the two rules either side of the date have no spare width to
   grow into and collapse to nothing: the panel centres its children, so a
   shrink-to-fit body gives a flex row exactly the width of its text. */
.uk-rs-gate-body{position:relative;width:100%;margin-top:30px}
.uk-rs-gate-body > * + *{margin-top:14px}
.uk-rs-gate-names{font-size:clamp(26px,7.2vw,38px)}
.uk-rs-gate-date{display:flex;align-items:center;justify-content:center;gap:14px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--rs-quiet)}
.uk-rs-gate-date::before,.uk-rs-gate-date::after{content:"";flex:1 1 auto;max-width:48px;
  height:1px;background:var(--rs-line)}
.uk-rs-couple-list{display:grid;gap:10px}
.uk-rs-couple-list span{display:grid;gap:2px}
.uk-rs-couple-list small{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--rs-sheath)}
.uk-rs-couple-list strong{font-family:var(--rs-display);font-size:18px;font-weight:600}
.uk-rs-gate-open{display:flex;width:fit-content;margin-inline:auto;padding:13px 26px;
  border-color:transparent;background:var(--rs-ink);color:var(--rs-culm);font-size:14px}
/* WHAT THE GATE DOES: the culm splits. The end-on ring parts along its axis and
   the page is what was inside. */
.uk-rs-gate.is-drawn .uk-rs-gate-panel{animation:uk-rs-split .85s cubic-bezier(.3,.9,.3,1) forwards}
@keyframes uk-rs-split{
  from{transform:scale(1);opacity:1}
  to{transform:scale(1.14);opacity:0}}

/* COVER -------------------------------------------------------------------
   The one screen with a photograph on it, so the one screen that carries a dark
   register of its own — culm and ink together, so no palette can leave the names
   the colour of the scrim behind them. */
.uk-rs-cover{--rs-culm:#19160F;--rs-skin:#0E0C07;--rs-ink:#F4EEDD;--rs-quiet:#BBB198;
  --rs-sheath:#E3A869;--rs-ink-rgb:244 238 221;
  --rs-line:rgba(244,238,221,.24);--rs-deep:rgba(0,0,0,.52);
  position:relative;display:grid;min-height:100svh;background:var(--rs-culm);color:var(--rs-ink)}
.uk-rs-cover-media{position:absolute;inset:0;overflow:hidden}
.uk-rs-cover-image{width:100%;height:100%;object-fit:cover;
  object-position:var(--rs-focus-mobile-x,50%) var(--rs-focus-mobile-y,38%)}
.uk-rs-cover-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(25,22,15,.24) 0%,rgba(25,22,15,.76) 58%,#19160F 100%)}
.uk-rs-cover-empty{position:absolute;inset:0;display:grid;place-items:center;background:#1E1A12}
.uk-rs-cover-empty-tone{position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(244,238,221,.1),transparent 60%)}
.uk-rs-cover-empty-mark{position:relative;display:grid;place-items:center;width:84px;height:84px;
  border-radius:50%;box-shadow:inset 0 0 0 1px var(--rs-line);
  font-family:var(--rs-display);font-size:21px;letter-spacing:.18em;color:var(--rs-ink)}
.uk-rs-cover-panel{position:relative;align-self:end;padding:48px var(--rs-pad) 60px;text-align:center}
.uk-rs-cover-panel > * + *{margin-top:14px}
.uk-rs-cover-panel .uk-rs-title{margin-inline:auto;font-size:clamp(29px,8.4vw,50px)}
.uk-rs-cover-date{display:flex;align-items:center;justify-content:center;gap:14px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--rs-quiet)}
.uk-rs-cover-date::before,.uk-rs-cover-date::after{content:"";flex:1 1 auto;max-width:48px;
  height:1px;background:var(--rs-line)}
/* the cover's monogram, cut end-on like the gate. NOT .uk-rs-mark: that name
   belongs to the sheath marks in the flow, and a second rule under the same name
   at the same specificity would silently turn every one of them into this box. */
.uk-rs-monogram{display:grid;place-items:center;width:62px;height:62px;margin-inline:auto;
  border-radius:50%;box-shadow:inset 0 0 0 1px var(--rs-sheath);
  font-family:var(--rs-display);font-size:14px;letter-spacing:.16em;color:var(--rs-sheath)}

/* People ------------------------------------------------------------------- */
.uk-rs-people{display:grid;gap:22px}
.uk-rs-person{display:flex;align-items:flex-start;gap:14px}
.uk-rs-portrait-round{flex:0 0 auto;width:78px;height:78px;overflow:hidden;border-radius:50%;
  background:var(--rs-skin);box-shadow:0 0 0 4px var(--rs-skin),0 0 0 5px var(--rs-line)}
.uk-rs-portrait-round img{width:100%;height:100%;object-fit:cover}
.uk-rs-portrait-round.is-empty{display:grid;place-items:center}
.uk-rs-portrait-round.is-empty span{font-family:var(--rs-display);font-size:25px;color:var(--rs-sheath)}
.uk-rs-person h4{margin-top:2px;font-size:20px}
.uk-rs-person > div > strong{display:block;margin-top:2px;font-size:14px;font-weight:600;color:var(--rs-sheath)}
.uk-rs-parents{margin-top:8px;color:var(--rs-quiet);font-size:14px}
.uk-rs-parents span{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.uk-rs-parents em{font-style:normal;padding:0 5px;color:var(--rs-sheath)}
.uk-rs-bio{margin-top:8px;color:var(--rs-quiet);font-size:14px}
.uk-rs-chapter{margin-top:18px}
.uk-rs-chapter > * + *{margin-top:10px}
.uk-rs-couple-index{display:flex;flex-wrap:wrap;column-gap:8px;row-gap:8px}
.uk-rs-couple-index button{display:inline-flex;align-items:center;gap:8px;min-height:46px;
  padding:9px 14px;border:1px solid var(--rs-line);border-radius:var(--rs-radius);
  background:transparent;cursor:pointer}
.uk-rs-couple-index button span{font-family:var(--rs-display);font-size:11px;letter-spacing:.12em;
  color:var(--rs-sheath)}
.uk-rs-couple-index button.is-active{border-color:var(--rs-ink);box-shadow:inset 0 0 0 1px var(--rs-ink)}

/* Rows, events, streams ---------------------------------------------------
   A list of rows is a short culm of its own: the separators are the same node
   groove, drawn fine. */
.uk-rs-rows{display:grid}
.uk-rs-row{position:relative;display:grid;gap:4px;padding:14px 0}
.uk-rs-row + .uk-rs-row{box-shadow:inset 0 1px 0 var(--rs-line)}
.uk-rs-row-mark{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rs-sheath)}
.uk-rs-row > div > * + *{margin-top:6px}
.uk-rs-events{display:grid}
.uk-rs-event{position:relative;display:grid;gap:4px;padding:16px 0}
.uk-rs-event + .uk-rs-event{box-shadow:inset 0 1px 0 var(--rs-line)}
.uk-rs-event > div > * + *{margin-top:8px}
.uk-rs-scope{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:6px;
  font-size:12px;color:var(--rs-quiet)}
.uk-rs-scope strong{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--rs-sheath)}
.uk-rs-map{width:100%;height:190px;border:0;box-shadow:inset 0 0 0 1px var(--rs-line)}
.uk-rs-actions{display:flex;flex-wrap:wrap;column-gap:8px;row-gap:8px}
.uk-rs-streams{display:grid;gap:10px}
.uk-rs-stream{position:relative;display:flex;align-items:center;gap:12px;min-height:56px;
  padding:10px 14px;box-shadow:inset 0 0 0 1px var(--rs-line);color:var(--rs-ink);text-decoration:none}
.uk-rs-stream span{display:grid;flex:1;min-width:0}
.uk-rs-stream small{font-size:12px;color:var(--rs-quiet)}

/* Countdown ---------------------------------------------------------------- */
.uk-rs-count{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  box-shadow:inset 0 0 0 1px var(--rs-line)}
.uk-rs-count div{position:relative;display:grid;align-content:center;padding:16px 8px;text-align:center}
.uk-rs-count div + div::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;
  background:var(--rs-line)}
.uk-rs-count strong{display:block;font-family:var(--rs-display);font-size:clamp(23px,6vw,30px);
  line-height:1.1;font-variant-numeric:tabular-nums}
.uk-rs-count span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--rs-quiet)}

/* PLATES: the culm split along its length and laid open flat -----------------
   The one block in this family that runs edge to edge. A split culm opens to a
   flat board the full width of the tube, and the photographs are what is on it, so
   they touch both edges rather than sitting inside the margins like everything
   else. Nothing else in the document does this, which is why it reads as the culm
   being opened rather than as a wide gallery. */
.uk-rs-swatch-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--rs-quiet)}
.uk-rs-swatch-tools div{display:flex;column-gap:8px}
.uk-rs-swatch-tools button{display:grid;place-items:center;width:46px;height:46px;
  border:1px solid var(--rs-line);border-radius:var(--rs-radius);background:transparent;cursor:pointer}
.uk-rs-swatch{position:relative;display:flex;gap:3px;overflow-x:auto;
  margin-inline:calc(var(--rs-pad) * -1);padding:0 var(--rs-pad) 14px;
  scroll-snap-type:x mandatory;scrollbar-width:none}
.uk-rs-swatch::-webkit-scrollbar{display:none}
.uk-rs-swatch-no{position:absolute;left:0;bottom:0;z-index:3;padding:2px 8px;
  background:var(--rs-skin);color:var(--rs-sheath);font-family:var(--rs-display);font-size:11px;
  letter-spacing:.06em;font-variant-numeric:tabular-nums;box-shadow:inset 0 0 0 1px var(--rs-line)}
.uk-rs-figure{position:relative;flex:0 0 auto;width:min(72vw,268px);scroll-snap-align:start}
.uk-rs-figure img{width:100%;height:var(--rs-plate,232px);object-fit:cover;background:var(--rs-skin)}
.uk-rs-figure button{position:absolute;right:0;top:0;z-index:3;display:grid;place-items:center;
  width:46px;height:46px;border:0;background:var(--rs-ink);color:var(--rs-culm);cursor:pointer}

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

/* A fixed light surface cannot inherit tokens that flip with the palette: on the
   dark culm --rs-ink is light, so ink on this strip would measure near 1:1. It
   carries the light register locally and every rule inside goes on reading tokens. */
.uk-rs-feedback{--rs-culm:#EDE0C3;--rs-skin:#DECCA4;--rs-ink:#272013;--rs-quiet:#5F5133;
  --rs-sheath:#71490F;--rs-line:rgba(39,32,19,.22);
  position:relative;z-index:24;display:flex;align-items:center;gap:10px;
  width:min(calc(100% - var(--rs-pad) * 2),680px);margin:16px auto 0;min-height:52px;padding:10px 16px;
  box-shadow:inset 0 0 0 1px var(--rs-line);background:var(--rs-culm);color:var(--rs-ink);font-size:14px}

/* CLOSING: the crown of the culm ------------------------------------------- */
.uk-rs-closing{position:relative;padding:62px var(--rs-pad) 76px;background:var(--rs-culm);
  color:var(--rs-ink);text-align:center;scroll-margin-top:0}
/* the last node, drawn like every other */
.uk-rs-closing::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--rs-ring);
  background:linear-gradient(180deg,
    var(--rs-deep) 0 1px,
    color-mix(in srgb, var(--rs-skin) 58%, var(--rs-culm)) 1px 46%,
    var(--rs-skin) 46% 74%,
    var(--rs-deep) 74% calc(74% + 2px),
    color-mix(in srgb, var(--rs-skin) 78%, var(--rs-ink)) calc(74% + 2px) 100%)}
.uk-rs-closing-body{width:min(100%,var(--rs-measure));margin-inline:auto}
.uk-rs-closing-body > * + *{margin-top:16px}
.uk-rs-closing .uk-rs-title{margin-inline:auto;font-size:clamp(24px,6vw,34px)}
.uk-rs-closing .uk-rs-copy{margin-inline:auto}
.uk-rs-closing-share{display:flex;flex-wrap:wrap;justify-content:center;column-gap:10px;row-gap:10px}

/* Controls rail, share dialog, lightbox, toast -----------------------------
   All fixed. The rail carries controls only: nothing that jumps to a section lives
   up here, because the way through this document is the gauge and the contents it
   returns to. */
.uk-rs-rail{position:fixed;right:14px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:24;
  display:grid;gap:8px;justify-items:center}
.uk-rs-rail-toggle,.uk-rs-rail-panel button{display:grid;place-items:center;width:46px;height:46px;
  border:1px solid rgba(244,238,221,.26);border-radius:50%;background:#221C12;color:#F4EEDD;cursor:pointer}
.uk-rs-rail-panel{display:grid;gap:8px;justify-items:center}
.uk-rs-dialog,.uk-rs-lightbox{position:fixed;inset:0;z-index:46;display:grid;place-items:center;
  padding:20px 16px;background:rgba(16,13,8,.9);opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease}
.uk-rs-dialog.is-open,.uk-rs-lightbox.is-open{opacity:1;visibility:visible}
.uk-rs-dialog-panel{--rs-culm:#EDE0C3;--rs-skin:#DECCA4;--rs-ink:#272013;--rs-quiet:#5F5133;
  --rs-sheath:#71490F;--rs-line:rgba(39,32,19,.22);
  width:min(100%,430px);padding:22px;box-shadow:inset 0 0 0 1px var(--rs-ink);
  /* reads the tokens it just declared rather than repeating their hex: two
     authorities on one colour drift apart the first time one of them is edited */
  background:var(--rs-culm);color:var(--rs-ink)}
.uk-rs-dialog-panel > * + *{margin-top:14px}
.uk-rs-dialog-panel h2{font-size:21px}
.uk-rs-share-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:9px;row-gap:9px}
.uk-rs-share-grid button{display:flex;align-items:center;gap:8px;min-height:46px;padding:11px 13px;
  border:1px solid var(--rs-line);border-radius:var(--rs-radius);background:transparent;color:inherit;
  cursor:pointer;font-size:13px}
.uk-rs-dialog-close{width:100%}
.uk-rs-lightbox-panel{position:relative;width:min(100%,780px)}
.uk-rs-lightbox-panel img{width:100%;max-height:76svh;object-fit:contain;transition:opacity .2s ease}
.uk-rs-lightbox.is-switching .uk-rs-lightbox-panel img{opacity:0}
.uk-rs-lightbox-counter{margin-top:12px;color:#F4EEDD;font-size:12px;letter-spacing:.16em;text-align:center}
.uk-rs-lightbox-close,.uk-rs-lightbox-prev,.uk-rs-lightbox-next{position:absolute;display:grid;
  place-items:center;width:46px;height:46px;border:0;border-radius:50%;background:#221C12;
  color:#F4EEDD;cursor:pointer}
.uk-rs-lightbox-close{top:-56px;right:0}
.uk-rs-lightbox-prev{left:6px;top:50%;transform:translateY(-50%)}
.uk-rs-lightbox-next{right:6px;top:50%;transform:translateY(-50%)}
.uk-rs-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;background:#221C12;color:#F4EEDD;
  font-size:13px;pointer-events:none;transition:opacity .3s ease,transform .3s ease}
.uk-rs-toast.is-visible{opacity:1;transform:translate(-50%,0)}

/* MOTION: THE NODE FORMS FIRST --------------------------------------------
   A culm grows a node, and then the internode above it extends. So the node draws
   itself across the culm and the writing follows it up. The node's growth is a
   scaleX on a pseudo element — it costs no layout, and it is the only thing in
   this family that moves horizontally, because a node is the one thing that goes
   round the culm rather than along it.

   ONE rule declares it. Written as one rule per state it would be two classes
   each, and the single-class rule that puts a section back would lose — every
   section would stand lifted for good with each rule still reading as correct. */
.uk-rs-sec::before{transform:scaleX(var(--rs-grown,1))}
.uk-rs-sec.uk-rs-reveal::before{--rs-grown:0;transition:transform .66s cubic-bezier(.2,.8,.25,1)}
.uk-rs-sec.uk-rs-reveal.is-visible::before{--rs-grown:1}
.uk-rs-reveal{opacity:0;transition:opacity .52s ease .14s,transform .6s cubic-bezier(.22,.78,.2,1) .14s}
.uk-rs-body.uk-rs-reveal,.uk-rs-cover.uk-rs-reveal,.uk-rs-closing.uk-rs-reveal{transform:translateY(14px)}
.uk-rs-reveal.is-visible{opacity:1;transform:none}
.uk-rs-reveal-item{opacity:0;transform:translateY(10px);
  transition:opacity .5s ease var(--rs-lag,0ms),transform .5s ease var(--rs-lag,0ms)}
.uk-rs-reveal.is-visible .uk-rs-reveal-item{opacity:1;transform:none}
.uk-rs-reveal-item:nth-child(2){--rs-lag:calc(var(--rs-lag-step,0ms) * 1)}
.uk-rs-reveal-item:nth-child(3){--rs-lag:calc(var(--rs-lag-step,0ms) * 2)}
.uk-rs-reveal-item:nth-child(4){--rs-lag:calc(var(--rs-lag-step,0ms) * 3)}
.uk-rs-reveal-item:nth-child(n+5){--rs-lag:calc(var(--rs-lag-step,0ms) * 4)}

/* Design controls ---------------------------------------------------------- */
/* "Template" is the family's OWN colours, so it restates the tokens at the head of
   this file rather than a near-miss of them. Every palette declares every token: a
   palette that sets four and leaves the sheath behind leaves it at the template's
   value, which on the dark culm is the one colour nobody looked at. */
.uk-design-palette-template.uk-ruas{--rs-culm:#EFE3C9;--rs-skin:#E0D0AC;--rs-ink:#241C10;--rs-quiet:#5E4F36;--rs-sheath:#6E4712;--rs-ink-rgb:36 28 16;--rs-line:rgba(36,28,16,.26);--rs-deep:rgba(36,28,16,.4)}
.uk-design-palette-warm.uk-ruas{--rs-culm:#F7E9BE;--rs-skin:#EBD79A;--rs-ink:#2B2008;--rs-quiet:#6A5820;--rs-sheath:#7B4C03;--rs-ink-rgb:43 32 8;--rs-line:rgba(43,32,8,.26);--rs-deep:rgba(43,32,8,.4)}
.uk-design-palette-romantic.uk-ruas{--rs-culm:#F6E5DA;--rs-skin:#E9CFBD;--rs-ink:#32211A;--rs-quiet:#6E4B3B;--rs-sheath:#9A3A33;--rs-ink-rgb:50 33 26;--rs-line:rgba(50,33,26,.26);--rs-deep:rgba(50,33,26,.4)}
.uk-design-palette-sage.uk-ruas{--rs-culm:#E6EDDC;--rs-skin:#D3DEC2;--rs-ink:#1C2714;--rs-quiet:#4C5A35;--rs-sheath:#2B5A22;--rs-ink-rgb:28 39 20;--rs-line:rgba(28,39,20,.26);--rs-deep:rgba(28,39,20,.4)}
/* Bambu hitam: a real plant, not a dark mode. Culm and ink flip together in one
   rule, and the groove — which is an rgba of the INK — becomes light on a dark
   culm, which a fixed dark rgba never could. */
.uk-design-palette-midnight.uk-ruas{--rs-culm:#1C1A18;--rs-skin:#120F0E;--rs-ink:#F2ECDC;--rs-quiet:#B5AC94;--rs-sheath:#D9A96A;--rs-ink-rgb:242 236 220;--rs-line:rgba(242,236,220,.22);--rs-deep:rgba(242,236,220,.3)}

.uk-design-type-classic .uk-rs-title,.uk-design-type-classic .uk-rs-gate-names{font-family:var(--rs-display)}
.uk-design-type-modern .uk-rs-title,.uk-design-type-modern .uk-rs-gate-names{font-family:var(--rs-sans);letter-spacing:.02em}
.uk-design-type-editorial .uk-rs-title{font-size:clamp(24px,6.2vw,34px);letter-spacing:-.01em}
.uk-design-type-editorial .uk-rs-cover-panel .uk-rs-title{font-size:clamp(32px,9.4vw,58px);letter-spacing:-.02em}

/* COMPOUND, not descendant. The design classes are printed onto the SAME element
   as .uk-ruas, so ".uk-design-surface-soft .uk-ruas" 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 THE CULM ITSELF. A tight-noded bamboo and an open-noded one are
   different plants, and that is the only surface choice this family can honestly
   offer: it sets the AMPLITUDE of the internode curve, so the whole document opens
   out more or less between its foot and its middle. It cannot be dead, because the
   one rule that lays out a section reads it. */
.uk-design-surface-soft.uk-ruas{--rs-span:3.1}
.uk-design-surface-balanced.uk-ruas{--rs-span:1.9}
.uk-design-surface-sharp.uk-ruas{--rs-span:.9}

/* The gallery presets are descendants of the root, which is where the design class
   is printed, so these selectors do match. The plate still runs edge to edge in
   every one of them; what changes is how deep the opened culm is. */
.uk-design-gallery-grid.uk-ruas{--rs-plate:178px}
.uk-design-gallery-grid .uk-rs-figure{width:min(52vw,196px)}
.uk-design-gallery-filmstrip.uk-ruas{--rs-plate:232px}
.uk-design-gallery-filmstrip .uk-rs-figure{width:min(72vw,268px)}
.uk-design-gallery-editorial.uk-ruas{--rs-plate:296px}
.uk-design-gallery-editorial .uk-rs-figure{width:min(88vw,348px)}

/* MOTION SETS THE ORDER, NOT THE GESTURE. The gesture is the node drawing itself
   across the culm, which is the signature; a preset that replaced it would be a
   preset that overwrote the identity. Soft brings a section's blocks in together,
   cinematic brings them one after another, and minimal does not move at all.
   These three previously set --rs-settle and --rs-travel, which no rule in this
   file reads: soft and cinematic were byte-for-byte the same page. */
.uk-design-motion-soft.uk-ruas{--rs-lag-step:40ms}
.uk-design-motion-cinematic.uk-ruas{--rs-lag-step:110ms}
.uk-design-motion-minimal.uk-ruas{--rs-lag-step:0ms}
/* And stillness is not a slow node, it is NO node drawing: a node caught half-drawn
   on a machine that asked for no motion is a page stuck mid-gesture. */
.uk-design-motion-minimal .uk-rs-reveal,
.uk-design-motion-minimal .uk-rs-body.uk-rs-reveal,
.uk-design-motion-minimal .uk-rs-cover.uk-rs-reveal,
.uk-design-motion-minimal .uk-rs-closing.uk-rs-reveal,
.uk-design-motion-minimal .uk-rs-reveal-item{opacity:1;transform:none;transition:none}
.uk-design-motion-minimal .uk-rs-sec.uk-rs-reveal::before{--rs-grown:1;transition:none}
.uk-design-motion-minimal .uk-rs-gate.is-drawn .uk-rs-gate-panel{animation:none}

/* Wider viewports ---------------------------------------------------------- */
@media(min-width:760px){
.uk-ruas{font-size:17px;--rs-node:26px;--rs-band:40em}
/* The band is sized on the wider of the two, so a side-by-side block has somewhere
   to go and the prose still starts where it always did. */
.uk-rs-sec{padding-inline:max(var(--rs-pad),calc((100% - var(--rs-band)) / 2))}
.uk-rs-mark{left:max(var(--rs-pad),calc((100% - var(--rs-band)) / 2));
  right:max(var(--rs-pad),calc((100% - var(--rs-band)) / 2))}
.uk-rs-portrait{width:min(42vw,300px)}
.uk-rs-portrait img,.uk-rs-cover-media .uk-rs-cover-image{
  object-position:var(--rs-focus-desktop-x,50%) var(--rs-focus-desktop-y,42%)}
.uk-rs-cover-panel{padding:64px var(--rs-pad) 78px}
.uk-rs-closing{padding:86px var(--rs-pad) 100px}
.uk-rs-people{gap:26px;grid-template-columns:repeat(2,minmax(0,1fr))}
/* An odd last person takes the row and is centred, so a pair never ends with
   somebody hanging in the left column — capped, because one portrait stretched
   across a desktop page is a banner. */
.uk-rs-people>*:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:min(100%,400px)}
.uk-rs-portrait-round{width:92px;height:92px}
}
@media(min-width:1100px){
.uk-rs-closing{padding:102px var(--rs-pad) 118px}
}

/* Narrow phones ------------------------------------------------------------ */
@media(max-width:400px){
.uk-rs-count{grid-template-columns:repeat(2,minmax(0,1fr))}
/* two columns means two rows, and the groove between the columns must not be drawn
   down the first cell of the second row */
.uk-rs-count div:nth-child(odd)::before{display:none}
}
@media(max-width:560px){
.uk-rs-share-grid{grid-template-columns:minmax(0,1fr)}
.uk-rs-lightbox-close{top:auto;bottom:-56px;right:50%;transform:translateX(50%)}
}

/* 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-rs-cover-panel{padding:24px var(--rs-pad) 30px}
.uk-rs-cover-panel .uk-rs-title{font-size:clamp(22px,5.2vw,30px)}
.uk-rs-cover-empty-mark{width:64px;height:64px;font-size:17px}
.uk-rs-gate{padding:12px 0}
.uk-rs-portrait{width:min(34vw,150px)}
.uk-rs-gate-body{margin-top:18px}
.uk-rs-gate-names{font-size:clamp(20px,4.4vw,26px)}
.uk-rs-rail{bottom:calc(10px + env(safe-area-inset-bottom))}
.uk-rs-folio{bottom:calc(62px + env(safe-area-inset-bottom));height:66px}
}
@media(max-height:620px) and (min-width:1025px){
.uk-rs-portrait{width:min(26vw,208px)}
}

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