/* Madya — Romance Flagship 1.0.0
 * A bound booklet falls open at its MIDDLE, because that is where the binding
 * is. In this invitation the middle is the VOW: everything before it is read
 * moving inward towards it, everything after it moving away.
 *
 * ONE DECISION runs the whole document — which side of the middle a leaf is on.
 * It decides the leaf's signed folio number, which way the leaf leans, which
 * side its heading is ranged to, where its gauge tick sits, and which way it
 * settles in as it arrives. Five readers, one fact, found once in the blade
 * before a single leaf is printed. Written as five decisions they part company
 * the first time a section is switched off, and each one still reads correct.
 *
 * AND THE CONTENTS ARE AT THE MIDDLE. Measured across the thirty-eight releases
 * before this one, every one of them keeps its index at an edge of the screen
 * and fourteen do it in the identical way. Here the index is a leaf of the book,
 * printed where the book opens, and the only thing that follows the reader is a
 * single control that takes them back to the middle.
 *
 * Things here that are easy to get wrong and invisible in a stylesheet read:
 *
 *   THE LEAN IS PADDING, NOT HEIGHT. The first control gave every leaf a height
 *   of 58vh so that "ranged to the bottom" would show. It showed a screen of
 *   nothing above every heading. The pull towards the middle is asymmetric
 *   padding; the page never holds an empty screen.
 *
 *   BODY COPY IS NEVER RANGED RIGHT. The turn at the middle is carried by the
 *   headings, by which side the measure sits on, and by the gauge. Ranging
 *   paragraphs right would carry it too, and cost more in legibility than the
 *   turn is worth.
 *
 *   THE RULE THAT LANDS A LEAF OUTWEIGHS THE RULE THAT LIFTS IT. The settle is
 *   written once, at two classes, with the direction as a SIGN. Split into one
 *   rule per side it would be three classes, and the two-class rule that puts
 *   the leaf back would lose — silently, with every leaf left standing off its
 *   place for good.
 */

/* Tokens ------------------------------------------------------------------- */
.uk-madya{
  /* Book paper, and the middle spread a shade deeper — the same stock, printed
     one signature apart. The difference has to be small: a middle that is a
     different colour reads as a different document, not as the fold of one. */
  --my-page:#F3F0E7;--my-mid:#E7E2D4;
  --my-ink:#1E1C18;--my-muted:#585245;
  --my-thread:#8A3B2E;   /* the binding thread, and so the axis */
  --my-moss:#39503F;
  --my-rule:rgba(30,28,24,.17);
  --my-deep:rgba(30,28,24,.34);
  --my-edge:#C0B49B;
  --my-radius:3px;--my-radius-sm:2px;--my-measure:60ch;

  /* 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 --my-gutter, the
     preset (two classes) silently beats the media query (one), and the wider
     screen never widens: measured across the library, fifty-nine preset rules in
     nine releases are dead for exactly that reason. */
  --my-step:1;
  --my-gutter-u:38px;    /* the binding gutter: the column the folios live in */
  --my-gap-u:10px;
  --my-lean-u:24px;      /* how far a leaf leans towards the middle */
  --my-indent-u:16px;    /* how far its measure is set in from the outer edge */
  --my-pad-u:14px;
  --my-gutter:calc(var(--my-gutter-u) * var(--my-step));
  --my-gap:calc(var(--my-gap-u) * var(--my-step));
  --my-lean:calc(var(--my-lean-u) * var(--my-step));
  --my-indent:calc(var(--my-indent-u) * var(--my-step));
  --my-pad:calc(var(--my-pad-u) * var(--my-step));
  --my-settle:22px;      /* how far a leaf is from home when it arrives */
  --my-dir:0;            /* which way; the side class sets the sign */
  --my-gal-gap:10px;
  --my-display:"Lora",Georgia,Cambria,"Times New Roman",serif;
  --my-sans:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  position:relative;min-height:100svh;background:var(--my-page);color:var(--my-ink);
  font-family:var(--my-sans);font-size:16px;line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
[hidden]{display:none !important}
.uk-madya *,.uk-madya *::before,.uk-madya *::after{box-sizing:border-box}
.uk-madya 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-madya figure{margin:0}
.uk-madya h1,.uk-madya h2,.uk-madya h3,.uk-madya h4{font-family:var(--my-display);font-weight:600;line-height:1.24;margin:0}
.uk-madya p{margin:0}
/* :where() so this stays a DEFAULT. As ".uk-madya 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-madya :where(button){font-family:inherit;color:inherit}

/* Shared type and ornament ------------------------------------------------- */
.uk-my-eyebrow{font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--my-moss)}
.uk-my-title{font-size:clamp(22px,5vw,30px);text-wrap:balance}
.uk-my-title.is-sm{font-size:clamp(17px,3.4vw,20px)}
.uk-my-copy{max-width:var(--my-measure);color:var(--my-muted);font-size:15px}
.uk-my-lead{max-width:var(--my-measure);font-family:var(--my-display);font-size:19px;color:var(--my-ink)}
.uk-my-preline{white-space:pre-line}
.uk-my-signature{font-family:var(--my-display);font-size:22px;color:var(--my-ink)}
.uk-my-quote{max-width:var(--my-measure);padding:14px 18px;border-left:2px solid var(--my-moss);color:var(--my-ink);font-family:var(--my-display);font-size:17px;font-style:italic}
.uk-my-quote cite{display:block;margin-top:10px;font-family:var(--my-sans);font-size:12px;font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--my-muted)}
.uk-my-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(--my-muted)}
.uk-my-occasions span+span::before{content:"·";padding-right:6px;font-size:14px;color:var(--my-thread)}
.uk-my-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:11px 18px;border:1px solid var(--my-moss);border-radius:var(--my-radius);background:transparent;color:var(--my-ink);font-size:13px;font-weight:600;letter-spacing:.05em;text-decoration:none;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease}
.uk-my-button:hover{transform:translateY(-1px);box-shadow:inset 0 -2px 0 var(--my-thread)}
/* The label is --my-page, not a fixed cream, and the fill is --my-moss, 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-my-button.is-solid{border-color:transparent;background:var(--my-moss);color:var(--my-page)}
.uk-my-button:focus-visible,.uk-madya button:focus-visible,.uk-madya a:focus-visible{outline:2px solid var(--my-thread);outline-offset:3px}

/* THE BOOK ------------------------------------------------------------------
   Two columns for the whole document: the binding gutter, where the folios live,
   and the measure. Every leaf is a row of that one grid rather than a box of its
   own, so the folios line up down a single column from the first leaf to the last
   — which is what makes them read as one book instead of a stack of cards.

   The binding itself is a rule drawn between the two columns, unbroken from the
   top of the book to the bottom. It is drawn on the BOOK, once, and not per leaf:
   a rule repeated per leaf breaks at every gap and reads as a series of ticks. */
.uk-my-book{position:relative;display:grid;
  grid-template-columns:var(--my-gutter) minmax(0,1fr);
  column-gap:var(--my-gap);padding-right:var(--my-pad);background:var(--my-page)}
.uk-my-book::before{content:"";position:absolute;top:0;bottom:0;z-index:0;
  left:calc(var(--my-gutter) + var(--my-gap) / 2);width:1px;
  background:var(--my-rule)}

/* EVERY direct child of the book spans both columns. Written only on the leaf,
   the covers auto-place into whichever track comes next — and the gutter track is
   38px wide, so the closing's buttons hung 81px outside it. Measured, not read. */
.uk-my-book > *{grid-column:1/-1}

/* A LEAF. Which side of the middle it is on decides everything below, and it is
   ONE class doing it. */
.uk-my-leaf{position:relative;z-index:1;display:grid;grid-template-columns:subgrid;
  grid-column:1/-1;align-items:start;scroll-margin-top:12px}
.uk-my-leaf + .uk-my-leaf{border-top:1px solid var(--my-rule)}

/* 1. THE LEAN. A leaf before the middle keeps its air above it and sits down
      towards the middle; a leaf after keeps its air below and rises to it. The
      lean is in the PADDING: a leaf tall enough to show a bottom-ranged block
      holds a screen of nothing, which is what the first control of this template
      actually did. */
.uk-my-leaf.is-before{padding:calc(26px + var(--my-lean)) 0 14px;--my-dir:-1}
.uk-my-leaf.is-after{padding:14px 0 calc(26px + var(--my-lean));--my-dir:1}
.uk-my-leaf.is-centre{padding:30px 0;--my-dir:0;background:var(--my-mid);
  border-top:2px solid var(--my-thread);border-bottom:2px solid var(--my-thread)}

/* 2. THE GAUGE. The signed distance from the middle, and the only number in this
      document. It ticks at the leaf's INNER edge — the edge nearest the middle —
      so the gutter itself leans the way the leaves do. */
.uk-my-gauge{grid-column:1;margin:0;font-family:var(--my-display);font-size:15px;
  font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--my-muted);
  text-align:right;line-height:1.2}
.uk-my-gauge b{font-weight:600}
.uk-my-leaf.is-before .uk-my-gauge{align-self:end}
.uk-my-leaf.is-after .uk-my-gauge{align-self:start}
.uk-my-leaf.is-centre .uk-my-gauge{align-self:center;color:var(--my-thread);font-size:19px}

/* 3. THE HEAD RANGES TO THE SIDE. Headings and their kickers turn at the middle;
      body copy never does. Ranging paragraphs right would carry the turn too, and
      cost more in legibility than the turn is worth. */
.uk-my-body{grid-column:2;min-width:0;padding:0}
.uk-my-body > * + *{margin-top:12px}
/* The LEAF's own heading, not every heading inside it. Written as a descendant
   it also turned the venue names inside an event and the person names inside the
   couple, which are not headings of the leaf and read as loose centred lines. */
.uk-my-leaf.is-before > .uk-my-body > .uk-my-eyebrow,
.uk-my-leaf.is-before > .uk-my-body > .uk-my-title{text-align:right}
.uk-my-leaf.is-after > .uk-my-body > .uk-my-eyebrow,
.uk-my-leaf.is-after > .uk-my-body > .uk-my-title{text-align:left}
.uk-my-leaf.is-centre > .uk-my-body > .uk-my-eyebrow,
.uk-my-leaf.is-centre > .uk-my-body > .uk-my-title{text-align:center}

/* 4. AND THE MEASURE IS SET IN FROM THE SIDE IT LEANS FROM. This is the reader
      that survives a phone: whatever the width, a leaf before the middle has its
      indent on the left and one after it on the right, so the text column steps
      across at the middle and stays there. The text itself never stops ranging
      left. Measured: without it, an invitation whose vow sits early looks like an
      ordinary stack for the whole of its second half. */
.uk-my-leaf.is-before .uk-my-body{padding-left:var(--my-indent)}
.uk-my-leaf.is-after .uk-my-body{padding-right:var(--my-indent)}
.uk-my-leaf.is-before .uk-my-copy,
.uk-my-leaf.is-before .uk-my-lead,
.uk-my-leaf.is-before .uk-my-quote{margin-left:auto;margin-right:0}
.uk-my-leaf.is-after .uk-my-copy,
.uk-my-leaf.is-after .uk-my-lead,
.uk-my-leaf.is-after .uk-my-quote{margin-left:0;margin-right:auto}
.uk-my-leaf.is-centre .uk-my-copy,
.uk-my-leaf.is-centre .uk-my-lead{margin-inline:auto}

/* THE CONTENTS, AT THE MIDDLE ----------------------------------------------
   Not pinned, not an edge rail: a leaf of the book, printed where the book falls
   open, carrying the same signed numbers every leaf carries. */
/* This is the template's navigation landmark, and it is a LEAF: in the flow of
   the book, bounded by the measure like everything else, nothing pinned. */
.uk-my-contents{position:relative;z-index:1;grid-column:1/-1;display:block;
  width:min(100%,940px);margin-inline:auto;
  padding:8px 0 30px;background:var(--my-mid);
  border-bottom:2px solid var(--my-thread)}
.uk-my-contents .uk-my-eyebrow{padding-left:calc(var(--my-gutter) + var(--my-gap));text-align:left}
.uk-my-index{list-style:none;display:grid;gap:0;margin:10px 0 0;padding:0}
.uk-my-index-row + .uk-my-index-row{border-top:1px dotted var(--my-rule)}
.uk-my-index-row a{display:grid;grid-template-columns:var(--my-gutter) minmax(0,1fr);
  column-gap:var(--my-gap);align-items:baseline;min-height:42px;padding:9px 0;
  color:inherit;text-decoration:none}
.uk-my-index-row b{font-family:var(--my-display);font-size:14px;font-weight:600;
  font-variant-numeric:tabular-nums;text-align:right;color:var(--my-muted)}
.uk-my-index-row span{font-size:14px;letter-spacing:.02em}
/* The index leans the way the leaves do: a row for a leaf before the middle
   ranges to the middle from above, one after it from below. Same class, same
   fact — the index cannot disagree with the book it indexes. */
.uk-my-index-row.is-centre b,
.uk-my-index-row.is-centre span{color:var(--my-thread);font-weight:700}

/* GATE: the strip still folded, seen edge-on ------------------------------ */
.uk-my-gate{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:20px 0;overflow:hidden;
  background:var(--my-mid);color:var(--my-ink);transition:opacity .7s ease,visibility .7s ease}
.uk-my-gate.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.uk-my-gate-stage{position:relative;display:grid;place-items:center;width:100%}
/* The rest of the strip, still folded, seen from the side. Drawn WIDER than the
   panel in front of it — a stack no wider than what covers it reads as nothing. */
/* ABOVE and BELOW the panel, because that is where the rest of a concertina is.
   Laid at fixed offsets from the middle they fell INSIDE the panel's own height
   and only their ends showed, a pair of stubs at each margin — which reads as
   nothing. The stage is exactly as tall as the panel, so the edges hang off its
   top and bottom and the strip visibly continues past what you can read. */
.uk-my-fore-edge{position:absolute;left:50%;top:0;bottom:0;z-index:0;
  width:min(100% - 16px,520px);transform:translateX(-50%);pointer-events:none}
.uk-my-fore-edge i{position:absolute;left:0;right:0;height:9px;border-radius:var(--my-radius-sm);
  background:linear-gradient(180deg,var(--my-page) 0 45%,var(--my-edge) 45% 100%);
  box-shadow:0 1px 0 var(--my-deep)}
.uk-my-fore-edge i:nth-child(1){top:-27px;transform:scaleX(.94)}
.uk-my-fore-edge i:nth-child(2){top:-14px;transform:scaleX(.97)}
.uk-my-fore-edge i:nth-child(3){bottom:-14px;transform:scaleX(.97)}
.uk-my-fore-edge i:nth-child(4){bottom:-27px;transform:scaleX(.94)}
.uk-my-fore-edge i:nth-child(5){top:-40px;transform:scaleX(.9)}
.uk-my-fore-edge i:nth-child(6){bottom:-40px;transform:scaleX(.9)}
/* THE MARKER RIBBON, lying at the middle of the shut book. It is the one thing
   on the gate that says where this invitation opens, so it has to read on its
   own: a band of the binding colour crossing the whole panel, with its tail
   hanging PAST the foot. A ribbon no longer than the panel is a stripe. */
.uk-my-ribbon{position:absolute;right:11%;top:-30px;bottom:-46px;z-index:4;
  width:13px;background:var(--my-thread);pointer-events:none}
.uk-my-ribbon::after{content:"";position:absolute;left:0;right:0;bottom:-11px;
  height:13px;background:var(--my-thread);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 54%,0 100%)}
.uk-my-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(--my-radius);background:var(--my-page);
  /* A 46px blur at .34 measured out over the folded edges above and below it: the
     rest of the strip came up 0.7 dL* from the background, which is nothing. */
  box-shadow:0 12px 26px rgba(35,32,25,.2)}
.uk-my-portrait{position:relative;height:min(40svh,272px);overflow:hidden;background:var(--my-mid)}
.uk-my-portrait img{width:100%;height:100%;object-fit:cover;object-position:var(--my-focus-mobile-x,50%) var(--my-focus-mobile-y,38%)}
.uk-my-gate-body{position:relative;padding:24px 22px 24px;text-align:center}
.uk-my-gate-stage{padding-right:0}
.uk-my-gate-names{margin-top:8px;font-size:clamp(26px,7.2vw,40px)}
.uk-my-gate-date{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:7px 16px;border:1px solid var(--my-rule);border-radius:999px;font-size:12px;letter-spacing:.08em;color:var(--my-muted)}
.uk-my-couple-list{display:grid;gap:8px;margin-top:14px}
.uk-my-couple-list span{display:grid;gap:2px}
.uk-my-couple-list small{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--my-muted)}
.uk-my-couple-list strong{font-family:var(--my-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-my-gate-open{position:relative;display:flex;width:fit-content;margin:18px auto 0;padding:13px 26px;
  border-color:transparent;background:var(--my-moss);color:var(--my-page);font-size:14px}
/* WHAT THE GATE DOES: the strip opens out. The panel swings down off its crease
   and the folded edges spread — one gesture, the one the whole family is named
   for. */
.uk-my-gate.is-drawn .uk-my-gate-panel{animation:uk-my-open .9s cubic-bezier(.3,.9,.3,1) forwards}
@keyframes uk-my-open{
  from{transform:perspective(1200px) rotateX(0deg);opacity:1}
  to{transform:perspective(1200px) rotateX(-26deg) translateY(-8%);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-my-cover{--my-page:#1D1A14;--my-mid:#161410;--my-ink:#F1ECDF;--my-muted:#B2AA96;--my-moss:#B3C9A7;--my-thread:#E3A87F;
  --my-rule:rgba(243,238,225,.24);--my-deep:rgba(0,0,0,.5);--my-edge:#6E6555;
  position:relative;display:grid;min-height:100svh;background:var(--my-page);color:var(--my-ink)}
.uk-my-cover-media{position:absolute;inset:0;overflow:hidden}
.uk-my-cover-image{width:100%;height:100%;object-fit:cover;object-position:var(--my-focus-mobile-x,50%) var(--my-focus-mobile-y,38%)}
.uk-my-cover-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,28,22,.26) 0%,rgba(31,28,22,.78) 58%,#1D1A14 100%)}
.uk-my-cover-empty{position:absolute;inset:0;display:grid;place-items:center;background:#231F17}
.uk-my-cover-empty-tone{position:absolute;inset:0;background:linear-gradient(160deg,rgba(243,238,225,.1),transparent 60%)}
.uk-my-cover-empty-mark{position:relative;font-family:var(--my-display);font-size:23px;letter-spacing:.2em;padding:10px 18px;border:1px solid var(--my-rule);border-radius:var(--my-radius);color:#F1ECDF}
.uk-my-cover-panel{position:relative;align-self:end;padding:40px var(--my-pad) 56px;text-align:center}
.uk-my-cover-panel .uk-my-title{margin-top:8px;font-size:clamp(29px,8.4vw,52px)}
.uk-my-cover-panel > * + *{margin-top:10px}
.uk-my-cover-date{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:7px 16px;border:1px solid var(--my-rule);border-radius:999px;font-size:12px;letter-spacing:.08em;color:var(--my-muted)}
.uk-my-mark{display:grid;place-items:center;width:62px;height:62px;margin:20px auto 0;
  border:1px solid var(--my-moss);border-radius:var(--my-radius);
  font-family:var(--my-display);font-size:14px;letter-spacing:.16em;color:var(--my-moss)}

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

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

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

/* 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-my-plate-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--my-muted)}
.uk-my-plate-tools div{display:flex;gap:8px}
.uk-my-plate-tools button{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--my-rule);border-radius:var(--my-radius-sm);background:transparent;cursor:pointer}
.uk-my-plate{position:relative;display:flex;gap:var(--my-gal-gap);overflow-x:auto;padding-bottom:10px;
  scroll-snap-type:x mandatory;scrollbar-width:none}
.uk-my-plate::-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-my-plate-no{position:absolute;left:0;bottom:6px;z-index:3;padding:3px 7px;
  border-radius:var(--my-radius-sm);background:var(--my-page);color:var(--my-muted);
  font-family:var(--my-display);font-size:11px;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;box-shadow:0 0 0 1px var(--my-rule)}
.uk-my-figure{position:relative;flex:0 0 auto;width:min(64vw,236px);scroll-snap-align:start}
.uk-my-figure img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--my-radius-sm);background:var(--my-mid)}
.uk-my-figure button{position:absolute;right:6px;top:6px;z-index:3;display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:50%;background:rgba(35,32,25,.78);color:#F1ECDF;cursor:pointer}

/* Gift, contacts, FAQ ------------------------------------------------------ */
.uk-my-tabs{display:flex;flex-wrap:wrap;gap:8px}
.uk-my-tabs button{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:9px 15px;border:1px solid var(--my-rule);border-radius:var(--my-radius);background:transparent;font-size:12px;font-weight:600;cursor:pointer}
.uk-my-tabs button.is-active{border-color:var(--my-thread);box-shadow:inset 0 0 0 1px var(--my-thread)}
.uk-my-gift-panel{display:block}
.uk-my-account strong{display:block;font-family:var(--my-display);font-size:20px;letter-spacing:.05em;font-variant-numeric:tabular-nums}
.uk-my-account p{font-size:13px;color:var(--my-muted)}
.uk-my-contacts{display:grid}
.uk-my-contact strong{display:block;font-size:15px}
.uk-my-contact p{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--my-muted)}
.uk-my-faq{display:grid;gap:0}
.uk-my-faq-item{padding:12px 0}
.uk-my-faq-item + .uk-my-faq-item{border-top:1px dotted var(--my-rule)}
.uk-my-faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:40px;cursor:pointer;font-weight:600;list-style:none}
.uk-my-faq-item summary::-webkit-details-marker{display:none}
.uk-my-faq-item p{margin-top:8px;color:var(--my-muted);font-size:15px}
.uk-my-hashtags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.uk-my-hashtags button{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:6px 13px;border:1px solid var(--my-rule);border-radius:999px;background:transparent;font-size:12px;cursor:pointer}
.uk-my-engagement .uk-my-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-my-feedback{--my-page:#F3F0E7;--my-mid:#E7E2D4;--my-ink:#1E1C18;--my-muted:#585245;--my-moss:#39503F;--my-thread:#8A3B2E;
  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(62,81,66,.36);border-radius:var(--my-radius);background:#F3F0E7;color:#1E1C18;font-size:14px}

/* CLOSING: the end of the strip -------------------------------------------- */
.uk-my-closing{position:relative;padding:60px var(--my-pad) 76px;
  background:var(--my-page);color:var(--my-ink);text-align:center;scroll-margin-top:0}
.uk-my-closing-body{width:min(100%,600px);margin-inline:auto}
.uk-my-closing-body > * + *{margin-top:14px}
.uk-my-closing .uk-my-title{font-size:clamp(24px,6vw,36px)}
.uk-my-closing .uk-my-copy{margin-inline:auto}
.uk-my-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-my-rail{position:fixed;right:14px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:24;display:grid;gap:8px;justify-items:center}
.uk-my-rail-toggle,.uk-my-rail-panel button{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(124,59,43,.5);border-radius:50%;background:#1E1C18;color:#F1ECDF;cursor:pointer}
.uk-my-rail-panel{display:grid;gap:8px;justify-items:center}
.uk-my-rail-panel button[data-lipatan-fold][aria-pressed="true"]{background:#8A3B2E}
.uk-my-dialog,.uk-my-lightbox{position:fixed;inset:0;z-index:46;display:grid;place-items:center;padding:20px 16px;background:rgba(24,21,16,.88);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.uk-my-dialog.is-open,.uk-my-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 --my-ink and --my-moss 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-my-dialog-panel{--my-page:#F3F0E7;--my-mid:#E7E2D4;--my-ink:#1E1C18;--my-muted:#585245;--my-moss:#39503F;--my-thread:#8A3B2E;--my-rule:rgba(35,32,25,.18);
  width:min(100%,430px);padding:22px;border:1px solid var(--my-moss);border-radius:var(--my-radius);background:#F3F0E7;color:#1E1C18}
.uk-my-dialog-panel h2{margin-top:6px;font-size:22px}
.uk-my-share-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:16px}
.uk-my-share-grid button{display:flex;align-items:center;gap:8px;min-height:40px;padding:11px 13px;border:1px solid rgba(35,32,25,.18);border-radius:var(--my-radius-sm);background:transparent;color:inherit;cursor:pointer;font-size:13px}
.uk-my-dialog-close{width:100%;margin-top:14px}
.uk-my-lightbox-panel{position:relative;width:min(100%,780px)}
.uk-my-lightbox-panel img{width:100%;max-height:76svh;object-fit:contain;border-radius:var(--my-radius);transition:opacity .2s ease}
.uk-my-lightbox.is-switching .uk-my-lightbox-panel img{opacity:0}
.uk-my-lightbox-counter{margin-top:12px;color:#F1ECDF;font-size:12px;letter-spacing:.16em;text-align:center}
.uk-my-lightbox-close,.uk-my-lightbox-prev,.uk-my-lightbox-next{position:absolute;display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;background:rgba(35,32,25,.86);color:#F1ECDF;cursor:pointer}
.uk-my-lightbox-close{top:-52px;right:0}
.uk-my-lightbox-prev{left:6px;top:50%;transform:translateY(-50%)}
.uk-my-lightbox-next{right:6px;top:50%;transform:translateY(-50%)}
.uk-my-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:#1E1C18;color:#F1ECDF;font-size:13px;pointer-events:none;transition:opacity .3s ease,transform .3s ease}
.uk-my-toast.is-visible{opacity:1;transform:translate(-50%,0)}

/* MOTION: every leaf settles TOWARDS the middle -----------------------------
   A leaf above the middle arrives from higher up and comes down to its place; a
   leaf below arrives from lower down and comes up. Both move towards the middle,
   which is the same fact the lean and the gauge and the ranging are reading.

   ONE rule declares the settle, at TWO classes, with the direction as a SIGN.
   Split into one rule per side it would be three classes each, and the two-class
   rule below that puts a leaf back would lose — so every leaf would stand off its
   place for good, with each rule still reading as correct. That is not a guess:
   the release before this one shipped exactly that fault. */
.uk-my-reveal{opacity:0;transition:opacity .58s ease,transform .7s cubic-bezier(.22,.78,.2,1)}
.uk-my-leaf.uk-my-reveal{transform:translateY(calc(var(--my-settle) * var(--my-dir)))}
.uk-my-cover.uk-my-reveal,.uk-my-closing.uk-my-reveal{transform:translateY(12px)}
.uk-my-contents.uk-my-reveal{transform:translateY(10px)}
.uk-my-reveal.is-visible{opacity:1;transform:none}
.uk-my-reveal-item{opacity:0;transform:translateY(10px);
  transition:opacity .56s ease .18s,transform .56s ease .18s}
.uk-my-reveal.is-visible .uk-my-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-madya{--my-page:#F3F0E7;--my-mid:#E7E2D4;--my-ink:#1E1C18;--my-muted:#585245;--my-thread:#8A3B2E;--my-moss:#39503F;--my-edge:#C0B49B;--my-rule:rgba(30,28,24,.17);--my-deep:rgba(30,28,24,.34)}
.uk-design-palette-warm.uk-madya{--my-page:#F6EFDE;--my-mid:#E9DFC8;--my-ink:#2A2414;--my-muted:#6A5B36;--my-thread:#914B13;--my-moss:#4F5A26;--my-edge:#C4B487;--my-rule:rgba(42,36,20,.17);--my-deep:rgba(42,36,20,.34)}
.uk-design-palette-romantic.uk-madya{--my-page:#F8ECE9;--my-mid:#EDDCD8;--my-ink:#2C1E1C;--my-muted:#6B4B42;--my-thread:#9C3A40;--my-moss:#7F3847;--my-edge:#C6A49A;--my-rule:rgba(44,30,28,.17);--my-deep:rgba(44,30,28,.34)}
.uk-design-palette-sage.uk-madya{--my-page:#EDF0E9;--my-mid:#DFE4D8;--my-ink:#1B2317;--my-muted:#4F5A3E;--my-thread:#71491F;--my-moss:#2A5438;--my-edge:#A7B094;--my-rule:rgba(27,35,23,.17);--my-deep:rgba(27,35,23,.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-madya{--my-page:#221F1A;--my-mid:#191612;--my-ink:#EFEADD;--my-muted:#B2AA96;--my-thread:#E3A87F;--my-moss:#B3C9A7;--my-edge:#6E6555;--my-rule:rgba(239,234,221,.2);--my-deep:rgba(0,0,0,.58)}
.uk-design-palette-midnight .uk-my-count div{background:var(--my-page)}

.uk-design-type-classic .uk-my-title,.uk-design-type-classic .uk-my-gate-names{font-family:var(--my-display)}
.uk-design-type-modern .uk-my-title,.uk-design-type-modern .uk-my-gate-names{font-family:var(--my-sans);letter-spacing:.02em}
.uk-design-type-editorial .uk-my-title{font-size:clamp(25px,6.2vw,38px);letter-spacing:-.01em}
.uk-design-type-editorial .uk-my-cover-panel .uk-my-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-madya, so ".uk-design-surface-soft .uk-madya" 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-madya{--my-gutter-u:52px;--my-gap-u:14px;--my-lean-u:34px;--my-indent-u:26px;--my-pad-u:20px;--my-radius:6px;--my-radius-sm:4px}
.uk-design-surface-balanced.uk-madya{--my-gutter-u:38px;--my-gap-u:10px;--my-lean-u:24px;--my-indent-u:16px;--my-pad-u:14px;--my-radius:3px;--my-radius-sm:2px}
.uk-design-surface-sharp.uk-madya{--my-gutter-u:29px;--my-gap-u:8px;--my-lean-u:14px;--my-indent-u:9px;--my-pad-u:10px;--my-radius:0px;--my-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-my-figure{width:min(48vw,176px)}
.uk-design-gallery-filmstrip .uk-my-figure{width:min(64vw,236px)}
.uk-design-gallery-editorial .uk-my-figure{width:min(84vw,330px)}
.uk-design-gallery-editorial .uk-my-figure img{aspect-ratio:3/2}

.uk-design-motion-soft.uk-madya{--my-settle:16px}
.uk-design-motion-cinematic.uk-madya{--my-settle:34px}
.uk-design-motion-minimal.uk-madya{--my-settle:0px}
/* Stillness has to lay the strip FLAT. A panel left at its unopened angle is a
   card that never finished folding out, which on a machine that asked for no
   motion is a page stuck mid-gesture. */
.uk-design-motion-minimal .uk-my-reveal,
.uk-design-motion-minimal .uk-my-leaf.uk-my-reveal,
.uk-design-motion-minimal .uk-my-reveal-item{opacity:1;transform:none;transition:none}
.uk-design-motion-minimal .uk-my-gate.is-drawn .uk-my-gate-panel{animation:none}

/* Wider viewports ---------------------------------------------------------- */
@media(min-width:760px){
.uk-madya{font-size:17px;--my-step:1.7}
.uk-my-body{padding:28px 0 36px}
.uk-my-portrait{height:min(38svh,296px)}
.uk-my-portrait img,.uk-my-cover-media .uk-my-cover-image{object-position:var(--my-focus-desktop-x,50%) var(--my-focus-desktop-y,42%)}
.uk-my-cover-panel{padding:56px var(--my-pad) 74px}
.uk-my-gate-panel{width:min(100% - 48px,540px)}
.uk-my-fore-edge{width:min(100% - 24px,600px)}
.uk-my-closing{padding:84px var(--my-pad) 100px}
.uk-my-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-my-people>*:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:min(100%,400px)}
.uk-my-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-my-book{width:min(100%,940px);margin-inline:auto}
.uk-my-closing{padding:100px var(--my-pad) 116px}
}

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

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