/* Kayon — Romance Flagship 1.0.0
 * A wedding invitation set as a wayang lakon.
 *
 * The kayon — the mountain-and-tree figure — is planted in the gedebog before
 * anything begins, and the dalang pulls it out to start. After that it marks
 * every change of scene. So does this: the gate is the kayon still planted, and
 * every section after it is a SCENE OPENED UNDER ITS POINT.
 *
 * That is the signature, and it is the one thing no other family in this
 * catalogue does. All thirty-three of them set their text in a rectangle. Here
 * the first lines of every scene are SHORT, because the gunungan's point stands
 * in the column and the text flows around it, and they widen line by line as the
 * silhouette broadens. The shape is not drawn beside the words; the words take
 * the shape.
 *
 * Three things here are easy to get wrong and invisible in a stylesheet read.
 *
 * A TAPER THAT NEVER TAPERS. shape-outside only applies to a FLOAT, and only
 * when the float has a size of its own. A float with no width, or a shape the
 * browser cannot parse, leaves a perfectly ordinary rectangle of text with a
 * declared polygon sitting above it — and every rule in the file reads correctly.
 *
 * A SILHOUETTE DRAWN IN THE COLOUR OF THE SCREEN IT STANDS AGAINST, which draws
 * nothing at all: nine earlier signatures in this catalogue shipped that way, in
 * nine different disguises.
 *
 * AND A TAPER THAT EATS THE PAGE. The point is a wedge at the TOP of a scene. If
 * the float is not cleared, it keeps pinching every paragraph below it, and on a
 * phone a column that never reaches its full width is a column nobody can read.
 *
 * All three are measured in a browser: line boxes are compared, first against
 * fifth, at every breakpoint.
 *
 * Every surface declares its own screen AND its own ink in the same rule, so a
 * palette can never leave text the colour of what is behind it.
 */

/* Tokens ------------------------------------------------------------------- */
.uk-kayon{
  --ky-screen:#F1E8D8;--ky-ink:#241B12;--ky-mist:#6B5A45;--ky-moss:#4C5940;--ky-gold:#8A5A1E;
  --ky-line:rgba(36,27,18,.16);--ky-panel:#E7DCC7;
  /* The lamp behind the screen and the shadow the figure casts on it. The
     silhouette is the shadow: in the screen's own colour it draws nothing. */
  --ky-shadow:#3B2A18;--ky-lamp:#D8A24E;--ky-figure:#3B2A18;
  --ky-radius:8px;--ky-radius-sm:4px;--ky-measure:56ch;
  /* The point of the gunungan standing in the column: how wide it is at the top
     and how far down it reaches before the text has its full width back. */
  /* Each side takes --ky-point, so the FIRST line has (100 - 2 x point) of the
     column and widens back to all of it over --ky-reach. At 38% a side the
     opening line had 24% of the width left, which is not an opening, it is a
     stack of single words. */
  --ky-point:19%;
  --ky-reach:140px;
  --ky-col-w:44px;        /* the scene index's own gutter, reserved by every scene */
  --ky-lift:20px;
  --ky-display:"Lora",Georgia,Cambria,"Times New Roman",serif;
  --ky-sans:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  position:relative;background:var(--ky-screen);color:var(--ky-ink);
  font-family:var(--ky-sans);font-size:16px;line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
[hidden]{display:none !important}
.uk-kayon *,.uk-kayon *::before,.uk-kayon *::after{box-sizing:border-box}
.uk-kayon 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-kayon figure{margin:0}
.uk-kayon h1,.uk-kayon h2,.uk-kayon h3,.uk-kayon h4{font-family:var(--ky-display);font-weight:600;line-height:1.2;margin:0}
.uk-kayon p{margin:0}
/* :where() so this stays a DEFAULT. As ".uk-kayon button" it was (0,1,1)
   and outranked every button rule written as a single class, so 6 declared
   button colours in this file never applied and those buttons took the page
   ink instead — including the lightbox controls on their dark scrim. */
.uk-kayon :where(button){font-family:inherit;color:inherit}
/* The reading area starts below the beams overhead; the rule that sets it lives
   with the index it is reserving for. */

/* Shared type and ornament ------------------------------------------------- */
.uk-ky-eyebrow{font-size:11px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--ky-moss)}
.uk-ky-rule{display:block;width:min(100%,78px);height:1px;margin:10px 0;background:var(--ky-moss);opacity:.6}
.uk-ky-rule.is-center{margin-left:auto;margin-right:auto}
.uk-ky-copy{max-width:var(--ky-measure);margin-top:14px;color:var(--ky-mist);font-size:15px}
.uk-ky-lead{max-width:var(--ky-measure);margin-top:12px;font-family:var(--ky-display);font-size:20px;color:var(--ky-ink)}
.uk-ky-preline{white-space:pre-line}
.uk-ky-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.uk-ky-signature{margin-top:16px;font-family:var(--ky-display);font-size:22px;color:var(--ky-ink)}
.uk-ky-quote{max-width:var(--ky-measure);margin-top:20px;padding:16px 20px;border-left:2px solid var(--ky-moss);border-radius:0 3px 3px 0;color:var(--ky-ink);font-family:var(--ky-display);font-size:17px;font-style:italic}
.uk-ky-quote cite{display:block;margin-top:10px;font-family:var(--ky-sans);font-size:12px;font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--ky-mist)}
.uk-ky-occasions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin-top:12px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ky-mist)}
.uk-ky-occasions span+span::before{content:"·";padding-right:6px;font-size:14px;color:var(--ky-gold)}
.uk-ky-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border:1px solid var(--ky-moss);border-radius:999px;background:transparent;color:var(--ky-ink);font-size:13px;font-weight:600;letter-spacing:.06em;text-decoration:none;cursor:pointer;transition:transform .25s ease,background .25s ease}
.uk-ky-button:hover{transform:translateY(-1px);box-shadow:inset 0 -2px 0 var(--ky-lamp)}
/* The label is --ky-screen, not a fixed cream. The fill is --ky-moss, and moss is
   always picked to contrast the screen it sits on — so this pair inverts with the
   surface instead of staying light. As a fixed #FBF6EA it measured 1.83:1 in the
   dark closing of every palette whose moss goes light there. */
.uk-ky-button.is-solid{border-color:transparent;background:var(--ky-moss);color:var(--ky-screen)}
.uk-ky-button:focus-visible,.uk-kayon button:focus-visible,.uk-kayon a:focus-visible{outline:2px solid var(--ky-gold);outline-offset:3px}

/* THE SCREEN AND THE SCENES ----------------------------------------------
   The kelir is the lit cloth every figure is thrown against, and each scene is
   opened under the point of the gunungan.

   THE TAPER IS THE SIGNATURE, and it is the one thing no other family here
   does: all thirty-three of them set their text in a rectangle. Two floats — one
   at each side — carry a shape-outside whose edge follows the gunungan's
   silhouette, so the first lines of a scene are short and widen line by line as
   the point broadens out.

   shape-outside only applies to a FLOAT, and only when the float has a size of
   its own. A float with no width, or a polygon the browser cannot parse, leaves
   an ordinary rectangle of text with a declared shape sitting above it doing
   nothing, and every rule in the file still reads correctly. The floats are
   given an explicit width and height for exactly that reason. */
.uk-ky-kelir{position:relative;background:var(--ky-screen);
  /* The weave of the cloth, just enough that the lamp has something to catch. */
  background-image:repeating-linear-gradient(90deg,rgba(36,27,18,.02) 0 1px,transparent 1px 8px)}

/* A scene. It reserves the index gutter and nothing else: the shape comes from
   the two floats inside it, not from the box. */
.uk-ky-scene{position:relative;z-index:1;margin:0;width:100%;
  padding:34px calc(var(--ky-col-w) + 12px) 40px 16px;
  background:transparent;scroll-margin-top:16px}

/* The point of the gunungan standing in the column. Two floats, mirrored, each
   a wedge that is widest at the top and comes to nothing at the bottom — so the
   text opens narrow between them and widens as they run out.

   The polygon is in the float's own box, which is why the box needs a real size:
   a percentage shape on a zero-sized float describes nothing. */
.uk-ky-taper{display:block;width:var(--ky-point);height:var(--ky-reach);
  pointer-events:none;shape-margin:12px}
.uk-ky-taper.is-left{float:left;
  shape-outside:polygon(0 0,100% 0,0 100%);
  -webkit-shape-outside:polygon(0 0,100% 0,0 100%)}
.uk-ky-taper.is-right{float:right;
  shape-outside:polygon(0 0,100% 0,100% 100%);
  -webkit-shape-outside:polygon(0 0,100% 0,100% 100%)}

/* The silhouette itself, thrown on the cloth behind the words. In the screen's
   own colour it draws nothing at all — the trap nine earlier signatures in this
   catalogue fell into, in nine different disguises. */
/* The figure is --ky-figure, NOT --ky-shadow. On a light scene the two are the
   same thing, but a dark palette's shadow is darker than its own screen and the
   gunungan behind the midnight scenes disappeared entirely while every rule about
   it still read as correct. Each template root names the colour its own scenes
   draw this in, and the contract measures that pair. */
/* It lives INSIDE the reading column, with the two floats, because all three have
   to be measured against the same box. As a child of the section it was centred
   on the section's padding box while the words were centred on its content box —
   16 to 22px apart at every width — its width resolved against the padding box
   instead of the 620px column, so at 1280 the figure was 410px wide against a
   198px notch, and it started at the top of the SECTION, 67 to 114px above the
   line the tapers actually cut. Here left/top/width all resolve against the
   column, so the figure IS the notch. z-index:-1 puts it behind the words in the
   column's own stacking context rather than in front of them. */
.uk-ky-gunungan{position:absolute;left:50%;top:0;z-index:-1;pointer-events:none;
  width:calc(var(--ky-point) * 2);height:calc(var(--ky-reach) + 40px);
  transform:translateX(-50%);
  background:var(--ky-figure);opacity:.13;
  /* mountain-and-tree: a pointed arch on a broad foot */
  clip-path:polygon(50% 0,62% 14%,58% 26%,72% 38%,64% 52%,78% 66%,70% 80%,84% 94%,
                    16% 94%,30% 80%,22% 66%,36% 52%,28% 38%,42% 26%,38% 14%)}
/* Planted upright at the opening and the close, tilted while the play runs —
   which is exactly what a dalang does with it. */
.uk-ky-scene.is-playing .uk-ky-gunungan{transform:translateX(-50%) rotate(-7deg)}
.uk-ky-scene.is-planted .uk-ky-gunungan{transform:translateX(-50%) rotate(0deg)}

/* The reading column. A width and nothing else: the shape belongs to the floats
   inside it, and a frame here would draw a rectangle around a column whose whole
   point is that it is not one. */
.uk-ky-column{position:relative;width:min(100%,780px);margin-inline:auto;color:var(--ky-ink)}
/* The body of a scene contains its own floats, so the wedge cannot escape into
   whatever follows the scene. */
.uk-ky-body{display:flow-root}
/* Prose takes the shape; STRUCTURE does not. A grid, a list or a figure
   establishes its own formatting context and would simply be squeezed narrow by
   the wedge instead of flowing around it — a gallery pushed to two-thirds width
   for its first 150px and nobody able to say why. These start below it. */
.uk-ky-body > div,.uk-ky-body > ul,.uk-ky-body > ol,
.uk-ky-body > figure,.uk-ky-body > table,.uk-ky-body > form{clear:both}

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

/* GATE: the kayon still planted -------------------------------------------
   Nothing has begun. The lamp is lit behind the cloth, the gunungan stands in
   the gedebog at the centre of the screen, and the invitation hangs on it.
   Pulling the kayon out is what starts a lakon, so that is what the button does.

   The lamp field and the silhouette are both drawn well PAST the plate, for a
   reason paid for in an earlier release: a field no wider than the plate is
   hidden by the plate, and the signature ends up present in the DOM and
   invisible on the screen — measured there at 1280, where only 40px tips of it
   escaped on either side.

   In the screen's own colour the silhouette draws nothing at all, which is the
   trap nine earlier signatures in this catalogue fell into. */
.uk-ky-gate{--ky-screen:#191207;--ky-ink:#F4EBDA;--ky-mist:#BCA88A;--ky-moss:#AEBF9E;--ky-gold:#E0B060;--ky-line:rgba(244,235,218,.22);--ky-lamp:#E8B96A;--ky-shadow:#0B0703;
  position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:20px;background:#120C05;color:var(--ky-ink);transition:opacity .7s ease,visibility .7s ease}
.uk-ky-gate.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.uk-ky-stage{position:relative;display:grid;grid-template-rows:auto auto;place-items:center;width:min(100%,460px)}
/* The blencong behind the cloth: one warm lamp, falling off toward the edges,
   with the weave of the kelir showing in it. */
.uk-ky-lampfield{position:absolute;left:50%;top:44%;z-index:0;width:min(182vw,900px);height:min(126vh,720px);
  transform:translate(-50%,-50%);pointer-events:none;
  background:
    /* The blencong has to actually light the cloth, or the silhouette in front of
       it has nothing to be dark against: at the original 46%/40% ellipse and .34
       the field beside the kayon's shoulders measured #130d06 against a #0c0802
       figure — 1.03:1, the tenth time in this catalogue a shape has been drawn in
       the colour of what is behind it.
       Brightening the amber from .34 to .58 only moved it 1.03 -> 1.15: at that
       end of the scale a luminance difference barely registers as a ratio. A
       kelir is a LIT cloth with black figures on it, so the lamp is a warm cream
       at the core, not a dim amber. */
    radial-gradient(ellipse 64% 56% at 50% 46%,rgba(246,222,170,.62) 0%,rgba(238,200,132,.30) 46%,transparent 78%),
    repeating-linear-gradient(90deg,rgba(244,235,218,.05) 0 1px,transparent 1px 7px),
    repeating-linear-gradient(180deg,rgba(244,235,218,.035) 0 1px,transparent 1px 9px)}
/* The kayon itself, planted, taller than the plate it stands behind. */
.uk-ky-lampfield::before{content:"";position:absolute;left:50%;top:50%;
  width:min(96vw,620px);height:min(92vh,660px);transform:translate(-50%,-56%);
  background:var(--ky-shadow);opacity:.82;
  clip-path:polygon(50% 0,60% 9%,55% 18%,68% 27%,60% 36%,73% 45%,64% 55%,77% 64%,
                    67% 73%,80% 82%,69% 90%,82% 97%,18% 97%,31% 90%,20% 82%,33% 73%,
                    23% 64%,36% 55%,27% 45%,40% 36%,32% 27%,45% 18%,40% 9%)}
/* The gedebog it is planted in, across the foot of the screen. */
.uk-ky-lampfield::after{content:"";position:absolute;left:12%;right:12%;bottom:14%;height:14px;
  border-radius:7px;
  background:linear-gradient(180deg,var(--ky-gold) 0 38%,var(--ky-shadow) 38% 100%);
  box-shadow:0 2px 12px rgba(0,0,0,.45)}
.uk-ky-plate{position:relative;z-index:2;grid-row:1;display:grid;grid-template-rows:auto auto;overflow:hidden;border:1px solid var(--ky-line);border-radius:var(--ky-radius);background:#241B10}
.uk-ky-portrait{position:relative;height:min(40svh,272px);overflow:hidden;background:#2C2113}
.uk-ky-portrait img{width:100%;height:100%;object-fit:cover;object-position:var(--ky-focus-mobile-x,50%) var(--ky-focus-mobile-y,38%)}
.uk-ky-gate-body{position:relative;padding:26px 22px 24px;text-align:center}
.uk-ky-gate-body h1{margin-top:8px;font-size:clamp(27px,7.6vw,42px)}
.uk-ky-gate-date{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:7px 16px;border:1px solid var(--ky-line);border-radius:999px;font-size:12px;letter-spacing:.08em;color:var(--ky-mist)}
.uk-ky-couple-list{display:grid;gap:8px;margin-top:14px}
.uk-ky-couple-list span{display:grid;gap:2px}
.uk-ky-couple-list small{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ky-mist)}
.uk-ky-couple-list strong{font-family:var(--ky-display);font-size:18px;font-weight:600}
/* Its own line, always: the buttons here are inline-flex, so on a plate wide
   enough this came to rest beside the date chip instead of centred beneath it —
   seen at 1280, where the plate is 530px across. */
.uk-ky-gate-open{position:relative;display:flex;width:fit-content;margin:18px auto 0;padding:13px 26px;border-color:transparent;background:var(--ky-gold);color:#1B1408;font-size:14px;
  box-shadow:0 0 0 4px rgba(216,179,116,.2)}
/* What the gate does when it opens: the beam settles onto its bearing. It drops
   the last few pixels and seats, which is the whole motion identity of this
   family in one gesture. */
/* What the gate does when it opens: the kayon is DRAWN UP out of the gedebog,
   which is how a dalang starts. It rises and clears the screen. */
.uk-ky-draw{position:absolute;left:50%;top:50%;z-index:1;
  width:min(96vw,620px);height:min(92vh,660px);
  transform:translate(-50%,-56%);opacity:0;pointer-events:none;
  background:var(--ky-lamp);
  clip-path:polygon(50% 0,60% 9%,55% 18%,68% 27%,60% 36%,73% 45%,64% 55%,77% 64%,
                    67% 73%,80% 82%,69% 90%,82% 97%,18% 97%,31% 90%,20% 82%,33% 73%,
                    23% 64%,36% 55%,27% 45%,40% 36%,32% 27%,45% 18%,40% 9%)}
.uk-ky-gate.is-drawn .uk-ky-draw{animation:uk-ky-lift .9s cubic-bezier(.3,.9,.3,1) forwards}
@keyframes uk-ky-lift{
  from{opacity:.5;transform:translate(-50%,-56%)}
  60%{opacity:.34;transform:translate(-50%,-90%)}
  to{opacity:0;transform:translate(-50%,-124%)}}

/* COVER -------------------------------------------------------------------- */
/* Lamplit, not rosy. These values arrived here by derivation and still carried
   the previous family's rose-clay under wayang token names; the scrim two rules
   below was written fresh and sits on #1A140B, so the tokens now agree with it. */
.uk-ky-cover{--ky-screen:#1A140B;--ky-ink:#F4EBDA;--ky-mist:#BCA88A;--ky-moss:#AFBFA2;--ky-gold:#E0B060;--ky-line:rgba(244,235,218,.24);--ky-lamp:#E8B96A;--ky-shadow:#0F0A04;
  position:relative;display:grid;min-height:100svh;background:var(--ky-screen);color:var(--ky-ink)}
.uk-ky-cover-media{position:absolute;inset:0;overflow:hidden}
.uk-ky-cover-image{width:100%;height:100%;object-fit:cover;object-position:var(--ky-focus-mobile-x,50%) var(--ky-focus-mobile-y,38%)}
.uk-ky-cover-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(29,23,14,.3) 0%,rgba(29,23,14,.76) 60%,#1A140B 100%)}
.uk-ky-cover-empty{position:absolute;inset:0;display:grid;place-items:center;background:#241B10}
.uk-ky-cover-empty-grid{position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,rgba(241,231,214,.12) 0 1px,transparent 1px 24px),
    repeating-linear-gradient(180deg,rgba(241,231,214,.09) 0 1px,transparent 1px 28px)}
.uk-ky-cover-empty-mark{position:relative;font-family:var(--ky-display);font-size:23px;letter-spacing:.2em;padding:10px 18px;border:1px solid var(--ky-line);border-radius:999px;color:#F1E8D8}
.uk-ky-cover-panel{position:relative;align-self:end;padding:40px calc(var(--ky-col-w) + 12px) 56px;text-align:center}
.uk-ky-cover-panel h1{margin-top:8px;font-size:clamp(29px,8.4vw,52px)}
.uk-ky-cover-date{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:7px 16px;border:1px solid var(--ky-line);border-radius:999px;font-size:12px;letter-spacing:.08em;color:var(--ky-mist)}


.uk-ky-column{position:relative;width:min(100%,780px);margin-inline:auto;color:var(--ky-ink)}
/* A named scene. The mark above the heading is the lamp's own colour, so a scene
   head is tied to the light that is throwing it. It sits ABOVE and centred rather
   than beside: once the title is centred on the point, a mark pinned to left:0 of
   a 620px column hangs alone at the margin a quarter of the width away from the
   words it belongs to, and the 22px of padding it needed pushed the centred text
   11px off the figure it is supposed to sit under. */
.uk-ky-named{position:relative}
.uk-ky-named::before{content:"";display:block;margin:0 auto 10px;
  width:11px;height:11px;border-radius:2px;
  background:radial-gradient(circle at 34% 32%,var(--ky-lamp) 0 46%,var(--ky-shadow) 47% 100%);
  box-shadow:0 0 0 1px rgba(36,28,18,.26)}
.uk-ky-joint{position:absolute;right:18px;top:16px;font-family:var(--ky-display);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ky-mist)}
.uk-ky-head{position:relative;z-index:1;margin-bottom:14px}
/* The reading column is capped so a line never runs too long, and centred so a
   wide panel is not left with an empty half beside it. */
.uk-ky-head,.uk-ky-body{max-width:min(100%,620px);margin-inline:auto}
.uk-ky-body{position:relative;z-index:1}
.uk-ky-body h2{font-size:clamp(22px,5.2vw,32px)}
/* The title and the line under it are the text that sits INSIDE the point, so
   they are centred on it. Left-aligned, every line starts at the left edge of its
   own line box, and under a symmetric taper that is a ragged left margin that
   follows one side of the figure and not the other — it reads as broken rather
   than as tapered. Only these two: everything below them is out of the point's
   reach at full width, where centred prose would be worse than left-aligned. */
.uk-ky-body > h2,
.uk-ky-body > h2 + p{text-align:center;text-wrap:balance}
.uk-ky-body h3{font-size:18px}
.uk-ky-body h4{font-size:17px}
.uk-ky-narrow{width:min(100%,600px);margin-inline:auto;text-align:center}

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

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

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

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

/* GALLERY: the figures planted in the gedebog ----------------------------
   Before a performance the puppets are stood in a row in the banana log, all on
   one line, and they are NOT the same height: the tall ones go at the ends and
   the row steps down toward the middle. So does this.

   Every figure stands on the same baseline and the row grades by position, so
   the gallery reads as a row of figures rather than as a grid of tiles. The
   grade is the whole point: at one ratio for all of them this is an ordinary
   photo grid with a bar drawn under it. */
.uk-ky-gallery-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ky-mist)}
.uk-ky-gallery-tools div{display:flex;gap:8px}
.uk-ky-gallery-tools button{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--ky-line);border-radius:var(--ky-radius-sm);background:transparent;cursor:pointer}
.uk-ky-gallery{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:end;--ky-gal-gap:10px;column-gap:var(--ky-gal-gap);row-gap:30px;margin-top:22px;padding-bottom:28px}
/* The gedebog belongs to each FIGURE, not to the gallery box. Drawn once under
   the whole grid it ran beneath the LAST row only, and with seven photos the
   first four stood on nothing — visible the moment the gallery was looked at.
   Per figure, each segment overhangs HALF the column gap on each side, so two
   neighbours meet exactly — and the overhang is derived from --ky-gal-gap rather
   than hardcoded, because the gap is set in three places and a fixed 5px left a
   visible 2px break in the filmstrip's 12px gap and form one continuous log under every row, in every preset:
   a scrolling filmstrip carries its log along with it, and the one-per-row
   editorial gets a log under each figure instead of none at all.
   Square ends, not rounded: at radius 5px each segment curved away from its
   neighbour across the column gap and the row read as four short logs with
   notches between them rather than one. */
.uk-ky-figure::after{content:"";position:absolute;bottom:-16px;height:10px;
  left:calc(var(--ky-gal-gap,10px) / -2);right:calc(var(--ky-gal-gap,10px) / -2);
  border-radius:0;pointer-events:none;
  background:linear-gradient(180deg,var(--ky-gold) 0 40%,var(--ky-shadow) 40% 100%)}
.uk-ky-figure{position:relative;margin:0;background:var(--ky-panel);border-radius:var(--ky-radius-sm) var(--ky-radius-sm) 0 0}
.uk-ky-figure img{width:100%;object-fit:cover;border-radius:var(--ky-radius-sm) var(--ky-radius-sm) 0 0}
/* The grade across a row of four: tall at the ends, stepping down to the middle,
   which is how a simpanan is actually stood up. */
.uk-ky-figure:nth-child(4n+1) img,
.uk-ky-figure:nth-child(4n+0) img{aspect-ratio:3/5}
.uk-ky-figure:nth-child(4n+2) img,
.uk-ky-figure:nth-child(4n+3) img{aspect-ratio:3/4}
/* A figure left standing alone at the end of a row would be one puppet in an
   empty log. It takes the width of the pair instead and stands at the ratio of
   its own place in the grade. */
.uk-ky-figure:last-child:nth-child(4n+1){grid-column:span 2}
.uk-ky-figure button{position:absolute;right:6px;bottom:16px;display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:50%;background:rgba(28,20,12,.76);color:#F1E8D8;cursor:pointer}

/* Gift, contacts, FAQ ------------------------------------------------------ */
.uk-ky-streams{display:grid;gap:10px;margin-top:18px}
.uk-ky-streams a{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:3px;color:var(--ky-ink);text-decoration:none}
.uk-ky-streams a span{display:grid;flex:1}
.uk-ky-streams a strong{font-size:14px}
.uk-ky-streams a small{font-size:12px;color:var(--ky-mist)}
.uk-ky-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.uk-ky-tabs button{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border:1px solid var(--ky-line);border-radius:999px;background:transparent;font-size:12px;font-weight:600;cursor:pointer}
.uk-ky-tabs button.is-active{border-color:var(--ky-lamp);box-shadow:inset 0 0 0 1px var(--ky-lamp)}
.uk-ky-gift-panel{margin-top:16px}
.uk-ky-accounts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.uk-ky-accounts>*:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:min(100%,400px)}
.uk-ky-accounts article{padding:16px;border-radius:3px;text-align:center}
.uk-ky-accounts strong{display:block;margin-top:6px;font-family:var(--ky-display);font-size:20px;letter-spacing:.05em}
.uk-ky-accounts article p{margin-top:4px;font-size:13px;color:var(--ky-mist)}
.uk-ky-accounts article .uk-ky-button{margin-top:12px}
.uk-ky-address-card{padding:18px;border:1px dashed var(--ky-moss);border-radius:3px;text-align:center}
.uk-ky-address-card strong{display:block;margin-top:6px;font-family:var(--ky-display);font-size:18px}
.uk-ky-address-card p{margin-top:6px;font-size:14px;color:var(--ky-mist)}
.uk-ky-contacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}
.uk-ky-contacts>*:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:min(100%,400px)}
.uk-ky-contacts article{padding:16px;border-radius:3px;text-align:center}
.uk-ky-contacts strong{display:block;margin-top:6px;font-size:15px}
.uk-ky-contacts article p{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:6px;font-size:13px;color:var(--ky-mist)}
.uk-ky-contacts article .uk-ky-button{margin-top:12px}
.uk-ky-hashtags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px}
.uk-ky-hashtags button{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border:1px solid var(--ky-line);border-radius:999px;background:transparent;font-size:12px;cursor:pointer}
.uk-ky-faq{display:grid;gap:10px;margin-top:18px}
.uk-ky-faq details{padding:14px 16px;border-radius:3px}
.uk-ky-faq summary{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;font-weight:600;list-style:none}
.uk-ky-faq summary::-webkit-details-marker{display:none}
.uk-ky-faq p{margin-top:8px;color:var(--ky-mist);font-size:15px}
.uk-ky-engagement .uk-ky-body{margin-top:4px}
/* Fixed light background, so it carries the light register locally for the same
   reason the sheet panel does. */
/* The gold is a shade darker than the page's: this surface is #E7DCC7, not the
   lighter #F1E8D8, and the page's #8A5A1E lands on it at 4.34:1. */
.uk-ky-feedback{--ky-screen:#E7DCC7;--ky-ink:#241B12;--ky-mist:#6B5A45;--ky-moss:#4C5940;--ky-gold:#7E5119;
  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(76,89,64,.32);border-radius:var(--ky-radius-sm);background:#E7DCC7;color:#241B12;font-size:14px}

/* CLOSING: the dalem, the innermost room -------------------------------------------------- */
.uk-ky-closing{--ky-screen:#1E160C;--ky-ink:#F4EBDA;--ky-mist:#BFAB8C;--ky-moss:#AFBFA2;--ky-gold:#E0B060;--ky-line:rgba(244,235,218,.22);--ky-panel:#2A2013;--ky-lamp:#E2B36C;--ky-shadow:#120C05;
  position:relative;padding:72px calc(var(--ky-col-w) + 12px) 88px;
  background:var(--ky-screen);color:var(--ky-ink);text-align:center;scroll-margin-top:16px}
.uk-ky-closing h2{font-size:clamp(24px,6vw,36px)}
.uk-ky-closing-mark{display:grid;place-items:center;width:64px;height:64px;margin:20px auto 0;border:2px solid var(--ky-moss);border-radius:50%;font-family:var(--ky-display);font-size:14px;letter-spacing:.16em;color:var(--ky-moss);
  box-shadow:0 0 0 5px rgba(168,191,164,.16)}
.uk-ky-closing-share{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}

/* THE SCENE INDEX: gunungan, and how far each one is tilted ---------------
   A dalang tells you the state of the play with the kayon's ANGLE: planted
   upright between scenes, leaned over while one is running. So does this. Every
   scene is a small gunungan down the right margin, upright until you reach it
   and tilted while you are in it — the only index in this catalogue that says
   anything with rotation rather than with size or colour alone.

   It owns the right gutter and every scene reserves it, at every breakpoint. */
.uk-ky-scenes{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:26;
  display:flex;flex-direction:column;align-items:center;
  width:var(--ky-col-w);max-width:var(--ky-col-w);max-height:88svh;
  padding:10px 0;background:rgba(28,20,12,.93);border-left:1px solid rgba(241,232,216,.32);color:#F1E8D8}
/* The gedebog the figures are planted in, running the height of the index. */
.uk-ky-scenes-line{position:absolute;left:50%;top:0;bottom:0;width:2px;background:rgba(216,162,78,.34);transform:translateX(-50%)}
.uk-ky-scene-list{position:relative;list-style:none;display:grid;gap:0;margin:0;padding:0;width:100%;
  /* The figures are what gives way when the index runs out of room, so
     min-height:0 lets this shrink below its content and scroll instead. */
  flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:none}
.uk-ky-scene-list::-webkit-scrollbar{display:none}
/* A full-width row of the index, not the 11px figure it draws. An earlier family
   left this to height:100% with an item that never stretched and measured 40x9
   at one breakpoint only. */
.uk-ky-scene-item{display:flex;align-items:stretch}
/* The floor is stated once, here, rather than per breakpoint: a breakpoint that
   restates it is a breakpoint that can forget it. */
.uk-ky-scene-item button{position:relative;display:grid;place-items:center;width:100%;
  height:40px;min-height:38px;min-width:40px;border:0;background:transparent;color:inherit;cursor:pointer;padding:0}
/* A gunungan, planted upright. The clip-path is the same silhouette the scenes
   carry, so the index is made of the same figure the page is. */
.uk-ky-scene-item button i{display:block;width:12px;height:17px;
  background:rgba(241,232,216,.42);
  clip-path:polygon(50% 0,64% 16%,58% 30%,74% 46%,66% 62%,80% 78%,72% 92%,84% 100%,
                    16% 100%,28% 92%,20% 78%,34% 62%,26% 46%,42% 30%,36% 16%);
  transform-origin:50% 100%;
  transition:transform .32s ease,background .32s ease}
/* Leaned over while its scene is the one being played. The tilt IS the state —
   at zero degrees the index is an ordinary column of shapes and every rule about
   it still reads as correct. */
.uk-ky-scene-item button.is-active i{transform:rotate(-16deg) scale(1.2);background:var(--ky-lamp)}
.uk-ky-scene-item button:hover i{transform:rotate(-7deg);background:rgba(241,232,216,.7)}
/* The scene being played, named in standing type inside the index's own width so
   the chrome is never wider than the gutter the scenes reserved. */
.uk-ky-standing{display:none;
  /* flex:0 0 auto, never flex:1: a vertical line of type has no height of its
     own to grow from, and the index shrink-wraps its figures. */
  flex:0 0 auto;min-width:0;margin:8px 0 0;padding:0;
  writing-mode:vertical-rl;text-orientation:mixed;text-align:center;
  font-family:var(--ky-display);font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--ky-lamp);
  pointer-events:none;white-space:nowrap;max-height:50svh;overflow:hidden}

/* Controls rail, share sheet, lightbox, toast ----------------------------- */
.uk-ky-rail{position:fixed;right:14px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:24;display:grid;gap:8px;justify-items:center}
.uk-ky-rail-toggle,.uk-ky-rail-panel button{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(216,162,78,.52);border-radius:50%;background:rgba(28,20,12,.9);color:#F1E8D8;cursor:pointer}
.uk-ky-rail-panel{display:grid;gap:8px;justify-items:center}
.uk-ky-sheet,.uk-ky-lightbox{position:fixed;inset:0;z-index:46;display:grid;place-items:center;padding:20px 16px;background:rgba(18,14,8,.86);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.uk-ky-sheet.is-open,.uk-ky-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 --ky-ink and --ky-moss are both light, so on this
   fixed cream panel an eyebrow measured 1.62:1 and a close label 1.01:1 — the same
   colour as the panel. So the panel re-declares the light-surface register
   locally, --ky-screen included (it IS the light screen), and every rule inside it
   goes on reading tokens rather than being special-cased one at a time. */
.uk-ky-sheet-panel{--ky-screen:#F1E8D8;--ky-ink:#241B12;--ky-mist:#6B5A45;--ky-moss:#4C5940;--ky-gold:#8A5A1E;--ky-line:rgba(36,27,18,.16);
  width:min(100%,430px);padding:22px;border:1px solid var(--ky-moss);border-radius:var(--ky-radius);background:#F1E8D8;color:#241B12}
.uk-ky-share-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:16px}
.uk-ky-share-grid button{display:flex;align-items:center;gap:8px;padding:11px 13px;border:1px solid rgba(36,27,18,.16);border-radius:var(--ky-radius-sm);background:transparent;color:inherit;cursor:pointer;font-size:13px}
.uk-ky-sheet-close{width:100%;margin-top:14px}
.uk-ky-lightbox-panel{position:relative;width:min(100%,780px)}
.uk-ky-lightbox-panel img{width:100%;max-height:76svh;object-fit:contain;border-radius:var(--ky-radius);transition:opacity .2s ease}
.uk-ky-lightbox.is-switching .uk-ky-lightbox-panel img{opacity:0}
.uk-ky-lightbox-counter{margin-top:12px;color:#F1E8D8;font-size:12px;letter-spacing:.16em;text-align:center}
.uk-ky-lightbox-close,.uk-ky-lightbox-prev,.uk-ky-lightbox-next{position:absolute;display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;background:rgba(28,20,12,.8);color:#F1E8D8;cursor:pointer}
.uk-ky-lightbox-close{top:-52px;right:0}
.uk-ky-lightbox-prev{left:6px;top:50%;transform:translateY(-50%)}
.uk-ky-lightbox-next{right:6px;top:50%;transform:translateY(-50%)}
.uk-ky-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:#241B12;color:#F1E8D8;font-size:13px;pointer-events:none;transition:opacity .3s ease,transform .3s ease}
.uk-ky-toast.is-visible{opacity:1;transform:translate(-50%,0)}

/* Reveals: the beam settles onto its bearing ------------------------------
   A timber does not fade in. It comes down the last of the way and seats, and
   what it carries follows a beat later — so the beam drops and overshoots its
   rest by a hair, and the content under it arrives after. */
.uk-ky-reveal{opacity:0;transform:translateY(var(--ky-lift));transition:opacity .7s ease,transform .7s cubic-bezier(.22,.78,.2,1)}
.uk-ky-reveal.is-visible{opacity:1;transform:none}
/* The rule under a scene's eyebrow draws itself out as the scene arrives. This
   used to animate a "cue" span that had no box anywhere in the stylesheet: it
   animated nothing, sixteen times, while every rule about it read as correct. */
.uk-ky-reveal .uk-ky-rule{opacity:0;transform:scaleX(.2);transform-origin:left center;
  transition:opacity .42s ease,transform .52s cubic-bezier(.3,1.5,.5,1)}
.uk-ky-reveal.is-visible .uk-ky-rule{opacity:1;transform:none}
.uk-ky-reveal-item{opacity:0;transform:translateY(12px);
  transition:opacity .58s ease .14s,transform .58s ease .14s}
.uk-ky-reveal.is-visible .uk-ky-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 kelir cream, the blencong amber, the
   shadow the figure casts. Derivation had left terracotta and clay here. */
.uk-design-palette-template.uk-kayon{--ky-figure:#3B2A18;--ky-screen:#F1E8D8;--ky-ink:#241B12;--ky-mist:#6B5A45;--ky-moss:#4C5940;--ky-gold:#8A5A1E;--ky-panel:#E7DCC7;--ky-lamp:#D8A24E;--ky-shadow:#3B2A18}
.uk-design-palette-warm.uk-kayon{--ky-figure:#6B4620;--ky-screen:#F7EBD8;--ky-ink:#2E2317;--ky-mist:#6D5C42;--ky-moss:#6E5A33;--ky-gold:#8A5220;--ky-panel:#EEDEC4;--ky-lamp:#BE8A54;--ky-shadow:#6B4620}
.uk-design-palette-warm .uk-ky-closing{--ky-screen:#2A2418;--ky-ink:#F6F0E2;--ky-mist:#BDB49A;--ky-moss:#CFC08C;--ky-gold:#D3B184;--ky-panel:#1E1A0E;--ky-lamp:#D6A473;--ky-shadow:#3E2A12}
.uk-design-palette-romantic.uk-kayon{--ky-figure:#6B3F33;--ky-screen:#F7E6E2;--ky-ink:#30201F;--ky-mist:#6E5352;--ky-moss:#8C4351;--ky-gold:#8A4A43;--ky-panel:#EFD8D4;--ky-lamp:#C0806E;--ky-shadow:#6B3F33}
.uk-design-palette-romantic .uk-ky-closing{--ky-screen:#2B1F20;--ky-ink:#F6E7E8;--ky-mist:#C0A5A8;--ky-moss:#DDA3AE;--ky-gold:#D2A294;--ky-panel:#1F1517;--ky-lamp:#D69B84;--ky-shadow:#452724}
.uk-design-palette-sage.uk-kayon{--ky-figure:#57402A;--ky-screen:#EAEDE0;--ky-ink:#1E2620;--ky-mist:#535E4E;--ky-moss:#3D5C42;--ky-gold:#6A5433;--ky-panel:#DDE3D2;--ky-lamp:#A08056;--ky-shadow:#57402A}
.uk-design-palette-sage .uk-ky-closing{--ky-screen:#1E2620;--ky-ink:#E9F0E6;--ky-mist:#AFBCAD;--ky-moss:#AEC7A8;--ky-gold:#C9BB8E;--ky-panel:#171D15;--ky-lamp:#C5A478;--ky-shadow:#39291C}
/* Midnight is the lamp behind the cloth with the room dark: warm black, not the
   plum-black this arrived as. */
.uk-design-palette-midnight.uk-kayon{--ky-figure:#D8A24E;--ky-screen:#171209;--ky-ink:#EFE7D8;--ky-mist:#A79A85;--ky-moss:#A8BFA4;--ky-gold:#D8AE72;--ky-line:rgba(239,231,216,.2);--ky-panel:#221B10;--ky-lamp:#D8A24E;--ky-shadow:#0D0904}
.uk-design-palette-midnight .uk-ky-closing{--ky-screen:#171209;--ky-ink:#EFE7D8;--ky-mist:#A79A85;--ky-moss:#A8BFA4;--ky-gold:#D8AE72;--ky-panel:#120E07;--ky-lamp:#D8A24E;--ky-shadow:#0D0904}
.uk-design-type-classic .uk-ky-body h2,.uk-design-type-classic .uk-ky-gate-body h1{font-family:var(--ky-display)}
.uk-design-type-modern .uk-ky-body h2,.uk-design-type-modern .uk-ky-gate-body h1,.uk-design-type-modern .uk-ky-cover-panel h1{font-family:var(--ky-sans);letter-spacing:.02em}
.uk-design-type-editorial .uk-ky-body h2{font-size:clamp(26px,6.4vw,40px);letter-spacing:-.01em}
.uk-design-type-editorial .uk-ky-cover-panel h1{font-size:clamp(33px,9.4vw,60px);letter-spacing:-.02em}
/* The frame is the signature, so "surface" changes how HEAVY the timber is cut
   rather than flattening it away. The post and the beam move together, because a
   slender post carrying a heavy beam is not a lighter kayon — it is a wrong
   one. Every rule that draws structure reads these two, so one control moves the
   whole frame. */
/* COMPOUND, not descendant. The design classes are printed onto the SAME element
   as .uk-kayon, so ".uk-design-surface-soft .uk-kayon" asks for a root inside a
   root and matches nothing: measured, all three presets left --ky-point at 19%
   and --ky-radius at 8px. They are written as one compound selector each.
   And the values are the taper's own: a sharper surface gets a sharper point.
   The 92/84/74% that arrived here were the previous family's track widths, which
   as a taper would have left 8% of the column for the opening line. */
.uk-design-surface-soft.uk-kayon{--ky-point:16%;--ky-radius:10px;--ky-radius-sm:6px}
.uk-design-surface-balanced.uk-kayon{--ky-point:19%;--ky-radius:5px;--ky-radius-sm:3px}
.uk-design-surface-sharp.uk-kayon{--ky-point:23%;--ky-radius:0px;--ky-radius-sm:0px}
.uk-design-gallery-grid .uk-ky-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow-x:visible}
.uk-design-gallery-filmstrip .uk-ky-gallery{display:flex;grid-template-columns:none;--ky-gal-gap:12px;gap:var(--ky-gal-gap);overflow-x:auto;padding-bottom:28px;scroll-snap-type:x mandatory}
.uk-design-gallery-filmstrip .uk-ky-figure,
.uk-design-gallery-filmstrip .uk-ky-figure:last-child:nth-child(4n+1){flex:0 0 auto;grid-column:auto;width:min(62vw,240px);scroll-snap-align:center}
/* The filmstrip KEEPS the gedebog and KEEPS the grade. A filmstrip is a single
   row of figures on one baseline that you scroll along — which is what a row of
   puppets stood in a banana log is. Flattening every ratio to 4/5 and hiding the
   log, as this arrived doing, removed the whole gallery identity from the preset
   most people use and left an ordinary horizontal photo strip. Only the width is
   a filmstrip concern; the ratios stay with the grade rule above. */
.uk-design-gallery-editorial .uk-ky-gallery{display:grid;grid-template-columns:minmax(0,1fr);--ky-gal-gap:22px;column-gap:var(--ky-gal-gap);row-gap:34px;overflow-x:visible}
.uk-design-gallery-editorial .uk-ky-figure,
.uk-design-gallery-editorial .uk-ky-figure:last-child:nth-child(4n+1){grid-column:1/-1}
.uk-design-gallery-editorial .uk-ky-figure img,
.uk-design-gallery-editorial .uk-ky-figure:nth-child(4n+1) img,
.uk-design-gallery-editorial .uk-ky-figure:nth-child(4n+2) img,
.uk-design-gallery-editorial .uk-ky-figure:nth-child(4n+3) img,
.uk-design-gallery-editorial .uk-ky-figure:nth-child(4n+0) img{aspect-ratio:3/2}
.uk-design-motion-soft.uk-kayon{--ky-lift:22px}
.uk-design-motion-cinematic.uk-kayon{--ky-lift:36px}
.uk-design-motion-minimal.uk-kayon{--ky-lift:0px}
/* Stillness has to release the BEAM too. A beam left at its unseated transform
   sits two beam-heights above its bearing and never comes down, which on a
   machine that asked for no motion is a structure that never finishes. */
.uk-design-motion-minimal .uk-ky-reveal,.uk-design-motion-minimal .uk-ky-reveal-item,
.uk-design-motion-minimal .uk-ky-reveal .uk-ky-rule{opacity:1;transform:none;transition:none}
.uk-design-motion-minimal .uk-ky-gate.is-drawn .uk-ky-draw{animation:none}

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

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

.uk-ky-event{grid-template-columns:minmax(0,1fr);gap:10px}
.uk-design-gallery-grid .uk-ky-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
.uk-design-gallery-editorial .uk-ky-gallery{grid-template-columns:minmax(0,1fr)}
.uk-design-gallery-filmstrip .uk-ky-gallery{grid-template-columns:none}
}

/* Short viewports: a landscape phone and a short laptop window are different
   rooms, so every height rule names the width it means. */
@media(max-height:620px) and (max-width:1024px){
.uk-ky-cover{min-height:100svh}
.uk-ky-cover-panel{padding:22px calc(var(--ky-col-w) + 12px) 30px}
.uk-ky-cover-panel h1{font-size:clamp(22px,5.2vw,30px)}
.uk-ky-cover-empty-mark{font-size:17px;padding:8px 14px}
.uk-ky-gate{padding:12px}
.uk-ky-portrait{height:min(23svh,136px)}
.uk-ky-gate-body{padding:16px 16px 14px}
.uk-ky-gate-body h1{font-size:clamp(20px,4.4vw,26px)}
.uk-ky-lampfield{width:min(150vh,620px);height:min(96vh,420px)}
/* A landscape phone is short, not narrow, so narrowing the index gutter here buys
   nothing and used to push a 44px button out of a 38px bar. The gutter keeps its
   width; only the standing label gives way. */
.uk-ky-standing{font-size:11px;letter-spacing:.14em;max-width:30vw}
.uk-ky-rail{bottom:calc(10px + env(safe-area-inset-bottom))}
}
@media(max-height:620px) and (min-width:1025px){
.uk-ky-portrait{height:min(28svh,190px)}
.uk-kayon{--ky-col-w:44px}
}

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