/* Krawangan — Romance Flagship 1.0.0
 * A krawangan is a screen of carved timber set in a wall, and what it is FOR is
 * light: it stands between a room and the daylight and decides how much gets
 * through. The carver's only real decision is therefore not the motif. It is how
 * much timber to leave.
 *
 * ONE DECISION PER BAY: how far open is it cut?
 *
 *   RAPAT   — tight. Barely cut, so the holes are small, the stiles either side
 *             are wide, almost no light passes, and the bay sits nearly still.
 *   SEDANG  — middling. The working density of a real screen, and the one most
 *             bays take.
 *   TERBUKA — open. Large holes, narrow stiles, most of the light through, and
 *             the bay rises furthest as it comes in.
 *
 * That one decision is read FIVE times: the size of the holes, the width of the
 * stiles either side, how much light passes (the alpha of the cuts), how much of
 * the wall behind is hidden (the alpha of the timber), and how far the bay lifts
 * as it arrives. Written as five decisions they part company the first time a
 * section is edited, and every one of them still reads as correct on its own.
 *
 * WHAT THE READING COSTS IS FIXED. A phone has one scarce resource and it is
 * horizontal, so the measure never pays for the carving: openness changes the
 * screen, never the line length. This is not a preference — the concept this
 * family replaced was abandoned at its control page for buying its silhouette out
 * of the text width, at 23 characters per line against the catalogue's own 26.
 *
 * AND THE WAY THROUGH IS A PICTURE, NOT A LIST. Fourteen other releases navigate
 * with an index, a rail, a dock, a strip or a row of labels. This one draws the
 * screen — every course at the openness it actually has — and marks the course you
 * are standing at. You do not read where you are; you see it. It is fixed at the
 * foot on the left, reachable at any point in the document, and it is deliberately
 * narrow: a picture of a screen as wide as the window is just another bar.
 *
 * Things here that are easy to get wrong and invisible in a stylesheet read.
 *
 *   A PALETTE TOKEN WRITTEN AS A LITERAL. The piercing was two baked cream rgba()
 *   values. On the midnight palette the timber layer painted rgb(219,208,191)
 *   over a near-black page and set the near-white --kr-ink on it at 1.29:1 — one
 *   of five palettes unreadable, with nothing in the stylesheet looking wrong.
 *   The two colours the piercing needs are channel tokens for that reason alone.
 *
 *   A RULE AIMED AT A CLASS THE ELEMENT DOES NOT CARRY. The openness rules were
 *   written ".uk-kr-bay.is-rapat". The gate's standing screen is the same screen
 *   and carries the same openness class, but it is not a bay: every token came
 *   out unset, every gradient invalid, and it did not paint at all.
 *
 *   TWO RULES UNDER ONE CLASS NAME. ".uk-kr-mark" was written twice — the course
 *   mark in the flow, and the cover's monogram — at equal specificity, so the
 *   later one silently turned all sixteen course marks into 62px boxes. The
 *   monogram is ".uk-kr-cipher" now, and the name belongs to one thing.
 *
 *   A GRID OF ROUND HOLES. That is what a drill leaves. The cuts cross at 45
 *   degrees so the lattice knits at its intersections, which is what a carver
 *   leaves; the first draft was the drilled grid and on screen it read as pegboard.
 */
/* Tokens ------------------------------------------------------------------- */
.uk-krawangan{
  /* THE TIMBER, the light it is lit by, and what is cut into it. The GILDING is
     not an accent: every block the guest has to act on is set in it, so it is dark
     enough to read as body copy rather than as a highlight. */
  --kr-clay:#EFE6D2;     /* the timber of the screen */
  --kr-lit:#FCF7EC;      /* the light the screen stands against, at its brightest.
                            BRIGHTER THAN THE CLAY, in every palette: it is the
                            source the wall's gradient falls away from, and set
                            darker than the timber it lights the wall runs upside
                            down and the light appears to come from the floor. */
  --kr-shade:#E0D4BA;    /* the timber recessed: panels, wells, the foot of the wall */
  --kr-ink:#2C2419;      /* what is written on the timber */
  --kr-gild:#7E4313;     /* the gilding: every carved reserve, and everything acted on */
  --kr-soft:#5A4F3D;     /* the same hand, quieter */
  /* WHAT SHOWS THROUGH A CUT, and the timber it is cut from, in channel form
     because the piercing needs them at an alpha that the openness sets. They were
     baked cream literals until they were measured: on the midnight palette the
     timber layer painted rgb(219,208,191) over a near-black page and set the
     near-white --kr-ink on top of it at 1.29:1. A palette token written as a
     literal is not a palette token. */
  --kr-clay-rgb:239 230 210;
  --kr-pierce-rgb:180 162 123;
  --kr-reserve:#5A5242;  /* the mid-tone that holds against the clay, whichever way
                            the clay goes: dark on a light screen, light on a dark
                            one. Rules, borders, eyebrows, and solid button fills
                            under --kr-clay text. NOT a panel fill — a panel takes
                            --kr-shade, and text on --kr-reserve is unreadable. */
  /* THE CARVER'S MARKS are neither. Course numbers and the names of the openings
     are what the carver writes on the timber before cutting and sands off after;
     in the ink or in the gilding they read as part of the carving itself. */
  --kr-mark:#524A3A;
  --kr-rule:rgba(44,36,25,.2);
  --kr-deep:rgba(44,36,25,.36);
  --kr-radius:3px;--kr-radius-sm:2px;
  /* ONE measure, and only one. The openness never touches it. */
  --kr-measure:34em;
  /* What a block that is inherently SIDE BY SIDE may use. Prose keeps the measure —
     a long line is a long line however much room there is — but a row of two
     people, a grid of event cards or a countdown is not prose, and holding it to a
     reading measure squeezes it while the page has room to spare. Measured at
     1440: the couple row sat in two 191px columns inside a 408px reading column,
     with 265px of screen empty either side of it. On a phone this equals the
     measure, so nothing there changes. */
  --kr-wide:34em;

  /* THE ONE PLACE THESE SIZES ARE DECIDED. The surface preset sets the unit and
     the viewport sets the step, and the size is their product — so neither ever
     overrules the other. Written as two rules both declaring the size itself, the
     preset (two classes) silently beats the media query (one), and the wider
     screen never widens. */
  --kr-step:1;
  --kr-carve:1;          /* how deeply this surface is carved — set by the preset */
  --kr-course-u:30px;    /* the height of a course, above and below its writing */
  --kr-gap-u:12px;
  --kr-pad-u:16px;
  --kr-course:calc(var(--kr-course-u) * var(--kr-step));
  --kr-gap:calc(var(--kr-gap-u) * var(--kr-step));
  --kr-pad:calc(var(--kr-pad-u) * var(--kr-step));
  --kr-travel:1;
  /* the widest stile any openness asks for, so the writing clears all three */
  --kr-stile-max:calc(34px * var(--kr-step));
  --kr-gal-gap:10px;
  --kr-display:"Lora",Georgia,Cambria,"Times New Roman",serif;
  --kr-sans:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  position:relative;min-height:100svh;background:var(--kr-clay);color:var(--kr-ink);
  font-family:var(--kr-sans);font-size:16px;line-height:1.65;
  -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. This element never scrolls internally, so every piece
     label would ride away up the page with nothing in any stylesheet looking wrong.
     Measured on a sibling family: with hidden, the stuck strip sat 400px above the
     viewport after 400px of scroll; with clip, it held at 0. overflow-x:clip clips the same overflow
     without creating a scroll container. The hidden below is the fallback for
     engines without clip, where nothing is clipped — which is safe here only
     because the overflow sweep measures zero horizontal overflow. */
  overflow-x:hidden;
}
@supports (overflow-x:clip){.uk-krawangan{overflow-x:clip}}

[hidden]{display:none !important}
.uk-krawangan *,.uk-krawangan *::before,.uk-krawangan *::after{box-sizing:border-box}
.uk-krawangan 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-krawangan figure{margin:0}
.uk-krawangan h1,.uk-krawangan h2,.uk-krawangan h3,.uk-krawangan h4{font-family:var(--kr-display);font-weight:600;line-height:1.24;margin:0}
.uk-krawangan p{margin:0}
/* :where() so this stays a DEFAULT. As ".uk-krawangan button" it was (0,1,1) and
   outranked every button rule written as a single class, so declared button
   colours would never apply and those buttons would take the page ink instead —
   including the lightbox controls on their dark scrim. */
.uk-krawangan :where(button){font-family:inherit;color:inherit}

/* Shared type and ornament ------------------------------------------------- */
.uk-kr-eyebrow{font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--kr-reserve)}
.uk-kr-preline{white-space:pre-line}
.uk-kr-signature{font-family:var(--kr-display);font-size:22px;color:var(--kr-ink)}
.uk-kr-quote{max-width:var(--kr-measure);padding:14px 18px;border-left:2px solid var(--kr-reserve);color:var(--kr-ink);font-family:var(--kr-display);font-size:17px;font-style:italic}
.uk-kr-quote cite{display:block;margin-top:10px;font-family:var(--kr-sans);font-size:12px;font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--kr-soft)}
.uk-kr-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(--kr-soft)}
.uk-kr-occasions span+span::before{content:"·";padding-right:6px;font-size:14px;color:var(--kr-gild)}
.uk-kr-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:11px 18px;border:1px solid var(--kr-reserve);border-radius:var(--kr-radius);background:transparent;color:var(--kr-ink);font-size:13px;font-weight:600;letter-spacing:.05em;text-decoration:none;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease}
.uk-kr-button:hover{transform:translateY(-1px);box-shadow:inset 0 -2px 0 var(--kr-gild)}
/* The label is --kr-clay, not a fixed cream, and the fill is --kr-reserve, which is
   always picked to contrast the card it sits on — so the pair inverts with the
   palette instead of staying light on a light surface. */
.uk-kr-button.is-solid{border-color:transparent;background:var(--kr-reserve);color:var(--kr-clay)}
.uk-kr-button:focus-visible,.uk-krawangan button:focus-visible,.uk-krawangan a:focus-visible{outline:2px solid var(--kr-gild);outline-offset:3px}

/* THE SCREEN ---------------------------------------------------------------
   One carved panel running the whole length of the wall, with the light behind
   it. Every bay is a course of that one screen rather than a card of its own, so
   the piercing runs continuously from the first bay to the last — which is what
   makes it a screen and not a stack of panels. */
.uk-kr-wall{position:relative;display:grid;grid-template-columns:minmax(0,1fr);
  width:min(100%,940px);margin-inline:auto;
  /* THE LIGHT BEHIND. It is a property of the wall, not of any bay: a light that
     restarted at every section would be a row of lamps, not a room. */
  background:linear-gradient(180deg,var(--kr-lit) 0%,var(--kr-clay) 46%,var(--kr-shade) 100%)}
.uk-kr-wall > *{grid-column:1/-1}

/* A BAY: one course of the screen. */
.uk-kr-bay{position:relative;
  /* THE PIERCING, drawn over the light and under the writing.
     Three layers: two sets of cuts crossing at 45 degrees, and the timber they are
     cut from. Crossed cuts are the point — a single set is a set of stripes, and a
     grid of round holes is what a DRILL leaves, not a carver; the first draft of
     this was that grid and on screen it read as pegboard. Where the two sets cross
     their alpha stacks, so the lattice knits itself at the intersections for free.
     The timber is the clay at the openness's own alpha, so a dense bay hides the
     wall behind it and an open one lets the light through — the openness IS how
     much of the light you get, which is the whole idea of a pierced screen. */
  background:
    repeating-linear-gradient(45deg,
      rgb(var(--kr-pierce-rgb) / var(--kr-through)) 0 calc(var(--kr-hole) * .34),
      transparent calc(var(--kr-hole) * .34) var(--kr-hole)),
    repeating-linear-gradient(-45deg,
      rgb(var(--kr-pierce-rgb) / var(--kr-through)) 0 calc(var(--kr-hole) * .34),
      transparent calc(var(--kr-hole) * .34) var(--kr-hole)),
    linear-gradient(180deg,rgb(var(--kr-clay-rgb) / var(--kr-solid)) 0 100%);
  scroll-margin-top:12px}
.uk-krawangan #rsvp,.uk-krawangan #wishes{scroll-margin-top:12px}
.uk-kr-bay + .uk-kr-bay{border-top:1px solid var(--kr-rule)}

/* THE STILES: the solid timber either side that the carver never cuts into. They
   are what stops a screen reading as wallpaper — a pierced field with no edge is
   a pattern, and a pattern is not a structure. */
.uk-kr-bay::before,.uk-kr-bay::after{content:"";position:absolute;top:0;bottom:0;
  width:var(--kr-stile);pointer-events:none;
  /* Solid timber, and then the arris where the cutting starts. The stile was clay
     fading into a baked cream: in a light palette that is a decoration the colour
     of what is behind it, and in a dark one it was a cream bar down the edge of
     the page. The edge is the pierce colour now, so it belongs to the palette. */
  background:linear-gradient(90deg,var(--kr-clay) 0 62%,rgb(var(--kr-pierce-rgb) / .3) 100%)}
.uk-kr-bay::before{left:0}
.uk-kr-bay::after{right:0;transform:scaleX(-1)}

/* THE WRITING NEVER MOVES. A phone has one scarce resource and it is horizontal,
   so the screen is never paid for out of the measure: the carving changes, the
   line length does not. This is not a preference. The concept this family
   replaced was abandoned at its control page for buying its silhouette with text
   width — measured at 23 characters a line against this catalogue's own 26. */
/* The side inset is the WIDEST stile a bay can have, not the stile this bay has.
   Inset by its own stile the measure would move with the openness, which is the
   one thing this family promises it never does; inset by none of it — which is how
   this was first written — the writing sits on top of the solid timber and the
   line ran to 42 characters against this catalogue's own 34. */
.uk-kr-body{position:relative;z-index:1;width:min(100%,var(--kr-wide));
  margin-inline:auto;
  padding:var(--kr-course) calc(var(--kr-pad) + var(--kr-stile-max)) calc(var(--kr-course) + 8px)}
.uk-kr-body > * + *{margin-top:10px}
/* THE RESERVE: the panel a carver leaves UNCUT so there is somewhere to put what
   has to be read. Writing is not set over carving — not in the craft, and not
   here, for the same reason: measured against the real composited lattice, body
   copy came out at 3.58–3.91 in four of the five palettes, because where the
   timber is thin the wall's own gradient shows through it and the ground under a
   line of text is darker at the foot of the document than at its head. Darkening
   the text to chase a ground that moves would have flattened ink against soft
   everywhere else.
   It is inset from the bay on all four sides, so the carving still runs in the
   margins either side of the writing and the openness stays visible — which is
   the point of the screen. It paints at z-index:-1 inside the body's own stacking
   context: behind the writing, in front of the bay, without a ".uk-kr-body > *"
   rule that a later rule of equal weight could quietly take back. */
.uk-kr-body::before{content:"";position:absolute;z-index:-1;
  inset:calc(var(--kr-course) - 14px) calc(var(--kr-stile-max) - 8px);
  background:var(--kr-clay);border-radius:var(--kr-radius-sm)}

/* THE ONE DECISION: how open the screen is here. Five readers, one source.
   Written as five decisions they part company the first time a section is edited,
   and each one still reads as correct on its own. */
.uk-kr-bay.is-rapat,.uk-kr-standing.is-rapat{--kr-hole-u:9px;--kr-stile-u:34px;--kr-through:.05;--kr-solid:.94;--kr-raise-u:10px}
.uk-kr-bay.is-sedang,.uk-kr-standing.is-sedang{--kr-hole-u:15px;--kr-stile-u:24px;--kr-through:.13;--kr-solid:.62;--kr-raise-u:18px}
.uk-kr-bay.is-terbuka,.uk-kr-standing.is-terbuka{--kr-hole-u:22px;--kr-stile-u:15px;--kr-through:.26;--kr-solid:.26;--kr-raise-u:26px}
/* The stile is the carver's unit times the screen's step, and the product is
   worked out HERE, on the bay — a calc written at the root is substituted at the
   root, so a unit redeclared further down the tree never reaches it. */
/* The openness classes above are written for BOTH the bays and the gate's standing
   screen, because the gate is a course of the same screen and must read its
   tokens. Written as .uk-kr-bay.is-rapat alone they did not match the gate at
   all: every token came out unset, every gradient invalid, and the screen simply
   did not paint — a rule aimed at a class the element does not carry.

   The three units the openness class sets, turned into lengths HERE and not on
   the root: a calc() written on the root is substituted there, against the root's
   own units, and every bay would come out the same size whatever its openness. */
.uk-kr-bay{--kr-stile:calc(var(--kr-stile-u) * var(--kr-step));
  --kr-hole:calc(var(--kr-hole-u) * var(--kr-carve));
  --kr-raise:calc(var(--kr-raise-u) * var(--kr-travel))}

/* THE COURSE MARK, in the margin of the writing. Never in the gilding: a number
   in the colour of the ornament reads as ornament. */
.uk-kr-mark{display:flex;align-items:baseline;gap:9px;margin:0 0 10px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;
  font-weight:600;letter-spacing:.18em;color:var(--kr-mark)}
.uk-kr-mark b{font-size:11px;font-weight:600}
.uk-kr-mark em{font-style:normal;opacity:.9}

.uk-kr-title{max-width:var(--kr-measure);font-family:var(--kr-display);color:var(--kr-ink);
  font-size:clamp(21px,5.2vw,28px);line-height:1.22;text-wrap:balance}
.uk-kr-title.is-sm{font-size:clamp(17px,3.4vw,20px)}
.uk-kr-copy,.uk-kr-lead{max-width:var(--kr-measure);color:var(--kr-soft)}
.uk-kr-lead{font-family:var(--kr-display);font-size:19px;color:var(--kr-ink)}
.uk-kr-copy{font-size:15px}

/* WHAT THE GUEST MUST ACT ON is set in the gilding and held inside a carved
   reserve — the panel a carver leaves uncut so there is somewhere to put the
   thing that matters.
   The fill is --kr-shade, the recessed tone of the timber itself, NOT
   --kr-reserve. --kr-reserve is a mid-tone that holds AGAINST the clay (it draws
   eyebrows, rules and borders, and fills solid buttons under --kr-clay text), so
   filling a panel with it and writing --kr-gild on top measured 1.25:1 here, and
   1.02:1 in warm — the same colour as its own text, in the one block carrying
   addresses and account numbers. On --kr-shade the same text measures 5.0–8.7. */
.uk-kr-seam{max-width:var(--kr-measure);margin-top:14px;
  padding:12px 14px;border:1px solid var(--kr-gild);border-radius:var(--kr-radius-sm);
  background:var(--kr-shade);
  font-family:var(--kr-sans);font-size:15px;color:var(--kr-gild)}
.uk-kr-seam dt,.uk-kr-seam .uk-kr-row-mark{margin:0 0 3px;
  font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--kr-gild)}
.uk-kr-seam dd{margin:0 0 10px;color:var(--kr-gild)}
.uk-kr-seam dd:last-child{margin-bottom:0}
.uk-kr-seam dd strong{display:block;font-weight:600;color:var(--kr-gild)}
.uk-kr-seam dd span{display:block;color:var(--kr-soft);font-size:13px}
.uk-kr-seam .uk-kr-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.uk-kr-seam .uk-kr-button{border-color:var(--kr-gild);color:var(--kr-gild)}
.uk-kr-seam .uk-kr-button.is-solid{background:var(--kr-gild);color:var(--kr-clay)}

/* THE ELEVATION — this family's way through, and it is a PICTURE rather than a
   list. Every other family in the catalogue navigates with an index, a rail, a
   dock, a strip or a row of labels; this one draws the screen and marks where you
   are standing on it.
   Fixed at the foot on the LEFT, away from the round controls, and deliberately
   not full width: a picture of a screen as wide as the window is a bar. */
.uk-kr-elevation{position:fixed;left:14px;bottom:calc(14px + env(safe-area-inset-bottom));
  z-index:26;width:min(calc(100vw - 92px),360px)}
.uk-kr-elevation-tab{display:flex;align-items:center;gap:2px;
  min-height:44px;padding:7px 10px;border:1px solid var(--kr-rule);
  border-radius:var(--kr-radius);background:var(--kr-clay);cursor:pointer}
.uk-kr-drawing{display:flex;align-items:flex-end;gap:2px;height:26px}
/* ONE COURSE OF THE DRAWING. Its fill is the openness it actually has, so the
   control cannot drift from the screen it is a picture of. */
.uk-kr-course{display:block;width:5px;height:16px;border-radius:1px;
  background:var(--kr-rule)}
.uk-kr-course.is-rapat{height:11px;opacity:.95}
.uk-kr-course.is-sedang{height:17px;opacity:.7}
.uk-kr-course.is-terbuka{height:24px;opacity:.42}
.uk-kr-course.is-here{background:var(--kr-gild);opacity:1}
.uk-kr-elevation-panel{position:absolute;left:0;bottom:calc(100% + 8px);
  width:min(calc(100vw - 28px),340px);max-height:min(56svh,420px);
  overflow-y:auto;overscroll-behavior:contain;
  padding:14px;border:1px solid var(--kr-rule);border-radius:var(--kr-radius);
  background:var(--kr-clay);box-shadow:0 10px 26px var(--kr-deep)}
.uk-kr-elevation-panel[hidden]{display:none}
/* The tab reads as pressed while the drawing is open, so the control says which
   state it is in without the guest having to look at the panel to find out. */
.uk-kr-elevation.is-open .uk-kr-elevation-tab{border-color:var(--kr-gild)}
.uk-kr-elevation-head{margin:0 0 10px;font-size:10px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--kr-mark)}
.uk-kr-courses{list-style:none;display:grid;gap:0;margin:0;padding:0}
.uk-kr-courses li + li{border-top:1px dotted var(--kr-rule)}
.uk-kr-courses a{display:grid;grid-template-columns:8px auto minmax(0,1fr) auto;
  column-gap:10px;align-items:center;min-height:44px;padding:9px 0;
  color:var(--kr-ink);text-decoration:none}
.uk-kr-courses .uk-kr-course{width:6px}
.uk-kr-courses b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  font-weight:600;color:var(--kr-mark)}
.uk-kr-courses span{font-size:14px}
.uk-kr-courses em{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-style:normal;
  font-size:9px;letter-spacing:.14em;color:var(--kr-gild)}
.uk-kr-courses a.is-active span{font-weight:600}
.uk-kr-courses a.is-active b{color:var(--kr-gild)}

/* GATE: the strip still folded, seen edge-on ------------------------------ */
.uk-kr-gate{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:20px 0;overflow:hidden;
  background:var(--kr-lit);color:var(--kr-ink);transition:opacity .7s ease,visibility .7s ease}
.uk-kr-gate.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.uk-kr-gate-stage{position:relative;display:grid;place-items:center;width:100%}
/* THE SCREEN STANDING. Same construction as a bay — crossed cuts over timber,
   stiles at the edges — but drawn WIDER and TALLER than the panel in front of it
   and running off every side, because a screen is a wall: one that stopped at the
   thing it stands behind would read as a mat under it. It is cut at is-rapat, the
   densest opening, because that is what a closed screen is, and so the gate is
   literally the first course of the invitation seen before it opens. */
.uk-kr-standing{position:absolute;left:50%;top:-10%;z-index:0;
  width:min(100% - 8px,560px);height:120%;transform:translateX(-50%);pointer-events:none;
  --kr-hole:calc(var(--kr-hole-u) * var(--kr-carve));
  --kr-stile:calc(var(--kr-stile-u) * var(--kr-step));
  background:
    repeating-linear-gradient(45deg,
      rgb(var(--kr-pierce-rgb) / var(--kr-through)) 0 calc(var(--kr-hole) * .34),
      transparent calc(var(--kr-hole) * .34) var(--kr-hole)),
    repeating-linear-gradient(-45deg,
      rgb(var(--kr-pierce-rgb) / var(--kr-through)) 0 calc(var(--kr-hole) * .34),
      transparent calc(var(--kr-hole) * .34) var(--kr-hole)),
    linear-gradient(180deg,rgb(var(--kr-clay-rgb) / var(--kr-solid)) 0 100%);
  transition:transform .9s cubic-bezier(.3,.9,.3,1),opacity .7s ease}
/* Its stiles, the same uncut edges every bay carries. */
.uk-kr-standing::before,.uk-kr-standing::after{content:"";position:absolute;top:0;bottom:0;
  width:var(--kr-stile);
  background:linear-gradient(90deg,var(--kr-clay) 0 62%,rgb(var(--kr-pierce-rgb) / .3) 100%)}
.uk-kr-standing::before{left:0}
.uk-kr-standing::after{right:0;transform:scaleX(-1)}

.uk-kr-gate-panel{position:relative;z-index:2;display:grid;grid-template-rows:auto auto auto;overflow:hidden;
  width:min(100% - 40px,460px);border-radius:var(--kr-radius);background:var(--kr-clay);
  /* The sheet has to lift off the cloth, or the weave behind it reads as printed
     on it. Measured in perceptual lightness, not guessed at. */
  box-shadow:0 12px 26px rgba(44,36,25,.2)}
.uk-kr-portrait{position:relative;height:min(40svh,272px);overflow:hidden;background:var(--kr-shade)}
.uk-kr-portrait img{width:100%;height:100%;object-fit:cover;object-position:var(--kr-focus-mobile-x,50%) var(--kr-focus-mobile-y,38%)}
.uk-kr-gate-body{position:relative;padding:24px 22px 24px;text-align:center}
.uk-kr-gate-stage{padding-right:0}
.uk-kr-gate-names{margin-top:8px;font-size:clamp(26px,7.2vw,40px)}
.uk-kr-gate-date{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:7px 16px;border:1px solid var(--kr-rule);border-radius:999px;font-size:12px;letter-spacing:.08em;color:var(--kr-soft)}
.uk-kr-couple-list{display:grid;gap:8px;margin-top:14px}
.uk-kr-couple-list span{display:grid;gap:2px}
.uk-kr-couple-list small{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--kr-soft)}
.uk-kr-couple-list strong{font-family:var(--kr-display);font-size:18px;font-weight:600}
/* Its own line, always: the buttons here are inline-flex, so on a panel wide
   enough this came to rest beside the date chip instead of centred beneath it. */
.uk-kr-gate-open{position:relative;display:flex;width:fit-content;margin:18px auto 0;padding:13px 26px;
  border-color:transparent;background:var(--kr-reserve);color:var(--kr-clay);font-size:14px}
/* WHAT THE GATE DOES: the screen is raised and the light it was standing
   against floods the page. One gesture, the one every bay repeats. */
.uk-kr-gate.is-drawn .uk-kr-gate-panel{animation:uk-kr-open .9s cubic-bezier(.3,.9,.3,1) forwards}
/* The screen goes up further and faster than the panel it stood behind, so the
   two separate as they leave instead of sliding as one flat picture. */
.uk-kr-gate.is-drawn .uk-kr-standing{transform:translateX(-50%) translateY(-26%);opacity:0}
/* THE GATE IS RAISED, not folded. A hinge belongs to a card; this family's one
   gesture is the lift a bay makes as it comes in, and the gate is that lift at the
   scale of the whole wall. */
@keyframes uk-kr-open{
  from{transform:translateY(0);opacity:1}
  to{transform:translateY(-14%);opacity:0}}

/* COVER -------------------------------------------------------------------
   The one screen with a photograph on it, so the one screen that carries a dark
   register of its own — face and ink together, so a palette can never leave the
   names the colour of the scrim behind them. */
.uk-kr-cover{--kr-clay:#1C1A14;--kr-shade:#12100A;--kr-ink:#F4EFE3;--kr-soft:#BAB29B;--kr-reserve:#AFA897;--kr-gild:#EBA978;
  --kr-clay-rgb:28 26 20;--kr-pierce-rgb:110 102 82;
  --kr-rule:rgba(244,239,227,.24);--kr-deep:rgba(0,0,0,.5);--kr-lit:#3F3A30;
  position:relative;display:grid;min-height:100svh;background:var(--kr-clay);color:var(--kr-ink)}
.uk-kr-cover-media{position:absolute;inset:0;overflow:hidden}
.uk-kr-cover-image{width:100%;height:100%;object-fit:cover;object-position:var(--kr-focus-mobile-x,50%) var(--kr-focus-mobile-y,38%)}
.uk-kr-cover-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,26,20,.26) 0%,rgba(28,26,20,.78) 58%,#1C1A14 100%)}
.uk-kr-cover-empty{position:absolute;inset:0;display:grid;place-items:center;background:#201C15}
.uk-kr-cover-empty-tone{position:absolute;inset:0;background:linear-gradient(160deg,rgba(241,236,224,.1),transparent 60%)}
.uk-kr-cover-empty-mark{position:relative;font-family:var(--kr-display);font-size:23px;letter-spacing:.2em;padding:10px 18px;border:1px solid var(--kr-rule);border-radius:var(--kr-radius);color:#F4EFE3}
.uk-kr-cover-panel{position:relative;align-self:end;padding:40px var(--kr-pad) 56px;text-align:center}
.uk-kr-cover-panel .uk-kr-title{margin-top:8px;font-size:clamp(29px,8.4vw,52px)}
.uk-kr-cover-panel > * + *{margin-top:10px}
.uk-kr-cover-date{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:7px 16px;border:1px solid var(--kr-rule);border-radius:999px;font-size:12px;letter-spacing:.08em;color:var(--kr-soft)}
/* The cover's monogram. NOT .uk-kr-mark: that name belongs to the sixteen course
   marks in the flow, and a second rule under the same name with the same
   specificity silently turned every one of them into this 62px box. */
.uk-kr-cipher{display:grid;place-items:center;width:62px;height:62px;margin:20px auto 0;
  border:1px solid var(--kr-reserve);border-radius:var(--kr-radius);
  font-family:var(--kr-display);font-size:14px;letter-spacing:.16em;color:var(--kr-reserve)}

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

/* Rows, events, streams ---------------------------------------------------- */
.uk-kr-rows{list-style:none;display:grid;gap:0;margin:0;padding:0}
.uk-kr-row{display:grid;gap:4px;padding:12px 0}
.uk-kr-row + .uk-kr-row{border-top:1px dotted var(--kr-rule)}
.uk-kr-row-mark{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--kr-reserve)}
.uk-kr-row > div > * + *{margin-top:6px}
.uk-kr-events{display:grid;gap:0}
.uk-kr-event{display:grid;gap:4px;padding:14px 0}
.uk-kr-event + .uk-kr-event{border-top:1px dotted var(--kr-rule)}
.uk-kr-event > div > * + *{margin-top:6px}
.uk-kr-scope{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--kr-soft)}
.uk-kr-scope strong{padding:3px 9px;border:1px solid var(--kr-rule);border-radius:999px;font-weight:600;color:var(--kr-ink)}
.uk-kr-map{width:100%;height:190px;border:1px solid var(--kr-rule);border-radius:var(--kr-radius-sm)}
.uk-kr-actions{display:flex;flex-wrap:wrap;gap:8px}
.uk-kr-streams{display:grid;gap:10px}
.uk-kr-stream{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--kr-rule);border-radius:var(--kr-radius);color:var(--kr-ink);text-decoration:none}
.uk-kr-stream span{display:grid;flex:1;min-width:0}
.uk-kr-stream small{font-size:12px;color:var(--kr-soft)}

/* Countdown ---------------------------------------------------------------- */
.uk-kr-count{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--kr-rule);border:1px solid var(--kr-rule);border-radius:var(--kr-radius-sm);overflow:hidden}
.uk-kr-count div{padding:14px 8px;background:var(--kr-clay);text-align:center}
.uk-kr-seam .uk-kr-count div{background:var(--kr-clay)}
.uk-kr-count strong{display:block;font-family:var(--kr-display);font-size:clamp(24px,6vw,32px);line-height:1.1;font-variant-numeric:tabular-nums}
.uk-kr-count span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--kr-soft)}

/* GALLERY: printed across a crease -----------------------------------------
   The photographs were printed flat and the card folded afterwards, so ONE fold
   line runs across all of them at the same height. It is drawn over the pictures
   and it is the same pair of hairlines every other crease is made of. */
.uk-kr-swatch-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--kr-soft)}
.uk-kr-swatch-tools div{display:flex;gap:8px}
.uk-kr-swatch-tools button{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--kr-rule);border-radius:var(--kr-radius-sm);background:transparent;cursor:pointer}
.uk-kr-swatch{position:relative;display:flex;gap:var(--kr-gal-gap);overflow-x:auto;padding-bottom:10px;
  scroll-snap-type:x mandatory;scrollbar-width:none}
.uk-kr-swatch::-webkit-scrollbar{display:none}
/* A PLATE NUMBER. The photographs in a book are plates, and a plate is numbered
   from the leaf it is bound into: this leaf's own signed folio, then the plate's
   place on it. The gallery is not a separate world with a numbering of its own. */
.uk-kr-swatch-no{position:absolute;left:0;bottom:6px;z-index:3;padding:3px 7px;
  border-radius:var(--kr-radius-sm);background:var(--kr-clay);color:var(--kr-soft);
  font-family:var(--kr-display);font-size:11px;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;box-shadow:0 0 0 1px var(--kr-rule)}
.uk-kr-figure{position:relative;flex:0 0 auto;width:min(64vw,236px);scroll-snap-align:start}
.uk-kr-figure img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--kr-radius-sm);background:var(--kr-shade)}
.uk-kr-figure button{position:absolute;right:6px;top:6px;z-index:3;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:rgba(44,36,25,.78);color:#F4EFE3;cursor:pointer}

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

/* 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-kr-feedback{--kr-clay:#EFE6D2;--kr-shade:#E0D4BA;--kr-ink:#2C2419;--kr-soft:#5A4F3D;--kr-reserve:#5A5242;--kr-gild:#7E4313;--kr-mark:#524A3A;
  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(110,100,80,.36);border-radius:var(--kr-radius);background:var(--kr-clay);color:var(--kr-ink);font-size:14px}

/* CLOSING: the end of the strip -------------------------------------------- */
.uk-kr-closing{position:relative;padding:60px var(--kr-pad) 76px;
  background:var(--kr-clay);color:var(--kr-ink);text-align:center;scroll-margin-top:0}
.uk-kr-closing-body{width:min(100%,600px);margin-inline:auto}
.uk-kr-closing-body > * + *{margin-top:14px}
.uk-kr-closing .uk-kr-title{font-size:clamp(24px,6vw,36px)}
.uk-kr-closing .uk-kr-copy{margin-inline:auto}
.uk-kr-closing-share{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}

/* Controls rail, share dialog, lightbox, toast -----------------------------
   The rail carries the CONTROLS and the fold, which is a state of the document.
   Nothing that jumps to a place lives up here: every jump target in this template
   is a crease, in the strip. */
.uk-kr-rail{position:fixed;right:14px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:24;display:grid;gap:8px;justify-items:center}
.uk-kr-rail-toggle,.uk-kr-rail-panel button{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(138,73,21,.5);border-radius:50%;background:#2C2419;color:#F4EFE3;cursor:pointer}
.uk-kr-rail-panel{display:grid;gap:8px;justify-items:center}
.uk-kr-dialog,.uk-kr-lightbox{position:fixed;inset:0;z-index:46;display:grid;place-items:center;padding:20px 16px;background:rgba(18,16,10,.9);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.uk-kr-dialog.is-open,.uk-kr-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 --kr-ink and --kr-reserve are both light, so on this
   fixed card-coloured panel an eyebrow would measure near 1:1 — the same colour as
   the panel. So the panel re-declares the light register locally, and sets the
   colour that reads it. */
.uk-kr-dialog-panel{--kr-clay:#EFE6D2;--kr-shade:#E0D4BA;--kr-ink:#2C2419;--kr-soft:#5A4F3D;--kr-reserve:#5A5242;--kr-gild:#7E4313;--kr-mark:#524A3A;--kr-rule:rgba(44,36,25,.18);
  width:min(100%,430px);padding:22px;border:1px solid var(--kr-reserve);border-radius:var(--kr-radius);
  /* 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(--kr-clay);color:var(--kr-ink)}
.uk-kr-dialog-panel h2{margin-top:6px;font-size:22px}
.uk-kr-share-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:16px}
.uk-kr-share-grid button{display:flex;align-items:center;gap:8px;min-height:44px;padding:11px 13px;border:1px solid var(--kr-rule);border-radius:var(--kr-radius-sm);background:transparent;color:inherit;cursor:pointer;font-size:13px}
.uk-kr-dialog-close{width:100%;margin-top:14px}
.uk-kr-lightbox-panel{position:relative;width:min(100%,780px)}
.uk-kr-lightbox-panel img{width:100%;max-height:76svh;object-fit:contain;border-radius:var(--kr-radius);transition:opacity .2s ease}
.uk-kr-lightbox.is-switching .uk-kr-lightbox-panel img{opacity:0}
.uk-kr-lightbox-counter{margin-top:12px;color:#F4EFE3;font-size:12px;letter-spacing:.16em;text-align:center}
.uk-kr-lightbox-close,.uk-kr-lightbox-prev,.uk-kr-lightbox-next{position:absolute;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:rgba(44,36,25,.86);color:#F4EFE3;cursor:pointer}
.uk-kr-lightbox-close{top:-52px;right:0}
.uk-kr-lightbox-prev{left:6px;top:50%;transform:translateY(-50%)}
.uk-kr-lightbox-next{right:6px;top:50%;transform:translateY(-50%)}
.uk-kr-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:#2C2419;color:#F4EFE3;font-size:13px;pointer-events:none;transition:opacity .3s ease,transform .3s ease}
.uk-kr-toast.is-visible{opacity:1;transform:translate(-50%,0)}

/* MOTION: LIGHT REACHES AN OPEN BAY FIRST ----------------------------------
   The fifth reader of the one decision, and the one that makes it felt rather
   than seen. A bay carved away to a lattice is already half full of the light
   behind it, so it has the least distance to travel into place; a bay that is
   nearly solid has the most. Nothing here chooses an amount — the amount is the
   openness the bay already has.

   ONE rule declares the lift, with the distance carried beside the openness
   itself. Written as one rule per level it would be two classes each, and the
   single-class rule below that puts a bay back would lose — so every bay would
   stand off its place for good, with each rule still reading as correct. That is
   not a guess: a release two families back shipped exactly that fault, and the
   contract for it is still in this suite.

   Every offset is vertical. A bay is a course of a screen that runs the width of
   the wall; a course arriving from the side is a course arriving from off the
   wall. */
.uk-kr-reveal{opacity:0;transition:opacity .58s ease,transform .7s cubic-bezier(.22,.78,.2,1)}
.uk-kr-body.uk-kr-reveal{transform:translateY(var(--kr-raise,16px))}
.uk-kr-cover.uk-kr-reveal,.uk-kr-closing.uk-kr-reveal{transform:translateY(12px)}
/* THE ELEVATION CARRIES NO REVEAL. It is the only way through the screen, and a
   navigation that starts at opacity 0 is a navigation missing at the moment the
   reader first needs it. */
.uk-kr-reveal.is-visible{opacity:1;transform:none}
.uk-kr-reveal-item{opacity:0;transform:translateY(10px);
  transition:opacity .56s ease .18s,transform .56s ease .18s}
.uk-kr-reveal.is-visible .uk-kr-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 two faces of the card, the press ink and
   the green it is set against. */
.uk-design-palette-template.uk-krawangan{--kr-clay:#EFE6D2;--kr-lit:#FCF7EC;--kr-shade:#E0D4BA;--kr-ink:#2C2419;--kr-soft:#5A4F3D;--kr-gild:#7E4313;--kr-reserve:#5A5242;--kr-mark:#524A3A;--kr-clay-rgb:239 230 210;--kr-pierce-rgb:180 162 123;--kr-rule:rgba(44,36,25,.18);--kr-deep:rgba(44,36,25,.34)}
.uk-design-palette-warm.uk-krawangan{--kr-clay:#F6EFD4;--kr-lit:#FFFBEA;--kr-shade:#E7D9AF;--kr-ink:#2F2712;--kr-soft:#665829;--kr-gild:#864808;--kr-reserve:#61573C;--kr-mark:#575036;--kr-clay-rgb:246 239 212;--kr-pierce-rgb:191 169 110;--kr-rule:rgba(47,39,18,.18);--kr-deep:rgba(47,39,18,.34)}
.uk-design-palette-romantic.uk-krawangan{--kr-clay:#F7EBE4;--kr-lit:#FFF7F2;--kr-shade:#EBD6C8;--kr-ink:#33221C;--kr-soft:#6D4B3E;--kr-gild:#953739;--kr-reserve:#665248;--kr-mark:#654F42;--kr-clay-rgb:247 235 228;--kr-pierce-rgb:198 162 144;--kr-rule:rgba(51,34,28,.18);--kr-deep:rgba(51,34,28,.34)}
.uk-design-palette-sage.uk-krawangan{--kr-clay:#E9F0E4;--kr-lit:#F7FCF3;--kr-shade:#D5E0CA;--kr-ink:#1F2A19;--kr-soft:#4F5C3B;--kr-gild:#22594A;--kr-reserve:#525941;--kr-mark:#4B5239;--kr-clay-rgb:233 240 228;--kr-pierce-rgb:155 173 140;--kr-rule:rgba(31,42,25,.18);--kr-deep:rgba(31,42,25,.34)}
/* Midnight is the same card read after dark: the two faces go to slate and the
   crease is the only thing catching light. Every token flips together, face and
   ink in one rule, so nothing is left the colour of what is behind it — and the
   lit half of a fold has to become light ON a dark card, which a fixed white
   rgba already is and a fixed dark one never could be. */
.uk-design-palette-midnight.uk-krawangan{--kr-clay:#1C1A14;--kr-lit:#3F3A30;--kr-shade:#12100A;--kr-ink:#F4EFE3;--kr-soft:#BAB29B;--kr-gild:#EBA978;--kr-reserve:#AFA897;--kr-mark:#BBB3A0;--kr-clay-rgb:28 26 20;--kr-pierce-rgb:110 102 82;--kr-rule:rgba(244,239,227,.2);--kr-deep:rgba(0,0,0,.58)}
.uk-design-palette-midnight .uk-kr-count div{background:var(--kr-clay)}

.uk-design-type-classic .uk-kr-title,.uk-design-type-classic .uk-kr-gate-names{font-family:var(--kr-display)}
.uk-design-type-modern .uk-kr-title,.uk-design-type-modern .uk-kr-gate-names{font-family:var(--kr-sans);letter-spacing:.02em}
.uk-design-type-editorial .uk-kr-title{font-size:clamp(25px,6.2vw,38px);letter-spacing:-.01em}
.uk-design-type-editorial .uk-kr-cover-panel .uk-kr-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-krawangan, so ".uk-design-surface-soft .uk-krawangan" 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 DEEP THE FOLDS ARE — the height of a crease, which is the
   height of a panel once the strip is folded, and so the size of the index
   itself. It is the signature, not a corner radius. */
.uk-design-surface-soft.uk-krawangan{--kr-course-u:40px;--kr-gap-u:16px;--kr-carve:1.3;--kr-pad-u:22px;--kr-radius:6px;--kr-radius-sm:4px}
.uk-design-surface-balanced.uk-krawangan{--kr-course-u:30px;--kr-gap-u:12px;--kr-carve:1;--kr-pad-u:16px;--kr-radius:3px;--kr-radius-sm:2px}
.uk-design-surface-sharp.uk-krawangan{--kr-course-u:22px;--kr-gap-u:9px;--kr-carve:.74;--kr-pad-u:11px;--kr-radius:0px;--kr-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 crease runs across the
   photographs in every one of them; what changes is how much card each takes. */
.uk-design-gallery-grid .uk-kr-figure{width:min(48vw,176px)}
.uk-design-gallery-filmstrip .uk-kr-figure{width:min(64vw,236px)}
.uk-design-gallery-editorial .uk-kr-figure{width:min(84vw,330px)}
.uk-design-gallery-editorial .uk-kr-figure img{aspect-ratio:3/2}

/* MOTION SCALES THE LIFT; IT DOES NOT SET IT. How far a bay rises as it comes in
   is its OPENNESS — 10px closed, 18px half, 26px open — which is the signature,
   so a motion preset that assigned the distance outright would flatten all three
   to one number and the openness would stop being visible in the movement. The
   preset multiplies instead, and the 10:18:26 ranking survives every setting.
   The catalogue's motion vocabulary is soft / cinematic / minimal; a page with no
   motion class at all keeps the base --kr-travel of 1.
   These three previously set --kr-settle, which no rule in this file reads: the
   soft and cinematic presets were byte-for-byte the same page. */
.uk-design-motion-soft.uk-krawangan{--kr-travel:.66}
.uk-design-motion-cinematic.uk-krawangan{--kr-travel:1.85}
.uk-design-motion-minimal.uk-krawangan{--kr-travel:0}
/* And stillness is not a short lift, it is NO lift: a bay left part-way up is a
   screen that never finished being raised, which on a machine that asked for no
   motion is a page stuck mid-gesture. */
.uk-design-motion-minimal .uk-kr-reveal,
.uk-design-motion-minimal .uk-kr-body.uk-kr-reveal,
.uk-design-motion-minimal .uk-kr-reveal-item{opacity:1;transform:none;transition:none}
.uk-design-motion-minimal .uk-kr-gate.is-drawn .uk-kr-gate-panel{animation:none}
.uk-design-motion-minimal .uk-kr-standing{transition:none}

/* Wider viewports ---------------------------------------------------------- */
@media(min-width:760px){
.uk-krawangan{font-size:17px;--kr-step:1.7;--kr-wide:46em}
.uk-kr-portrait{height:min(38svh,296px)}
.uk-kr-portrait img,.uk-kr-cover-media .uk-kr-cover-image{object-position:var(--kr-focus-desktop-x,50%) var(--kr-focus-desktop-y,42%)}
.uk-kr-cover-panel{padding:56px var(--kr-pad) 74px}
.uk-kr-gate-panel{width:min(100% - 48px,540px)}
.uk-kr-standing{width:min(100% - 24px,620px)}
.uk-kr-closing{padding:84px var(--kr-pad) 100px}
.uk-kr-people{gap:22px 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 panel is a banner. */
.uk-kr-people>*:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:min(100%,400px)}
.uk-kr-portrait-round{width:88px;height:88px}
}
@media(min-width:1100px){
/* The strip is capped and centred so a line of prose never runs the width of a
   desktop window. The cap is on the STRIP, so the creases run the full width of
   the card and not of the screen. */

.uk-kr-closing{padding:100px var(--kr-pad) 116px}
}

/* Narrow phones ------------------------------------------------------------ */
@media(max-width:400px){
.uk-kr-count{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
.uk-kr-share-grid{grid-template-columns:minmax(0,1fr)}
.uk-kr-lightbox-close{top:auto;bottom:-52px;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-kr-cover{min-height:100svh}
.uk-kr-cover-panel{padding:22px var(--kr-pad) 30px}
.uk-kr-cover-panel .uk-kr-title{font-size:clamp(22px,5.2vw,30px)}
.uk-kr-cover-empty-mark{font-size:17px;padding:8px 14px}
.uk-kr-gate{padding:12px 0}
.uk-kr-portrait{height:min(23svh,136px)}
.uk-kr-gate-body{padding:16px 16px 14px}
.uk-kr-gate-names{font-size:clamp(20px,4.4vw,26px)}
.uk-kr-rail{bottom:calc(10px + env(safe-area-inset-bottom))}
}
@media(max-height:620px) and (min-width:1025px){
.uk-kr-portrait{height:min(28svh,190px)}
}

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