/* Lereng — Romance Flagship 1.0.0
 * Lereng is the batik word for the diagonal-stripe family — it means "slope" —
 * and the rule that family is built on is simple and absolute: THE DIAGONAL NEVER
 * RESTARTS. A lereng that breaks at a seam is a broken lereng, so the slope is
 * declared once, across the whole cloth, and no section is allowed to begin its
 * own.
 *
 * (The geometry is drawn from CSS, not reproduced from any one traditional motif.
 * That is the same stance the cloth family in this catalogue already takes, and
 * the right one: the named motifs are heritage, not stock art.)
 *
 * WHAT THE SLOPE DECIDES. Because it never restarts, the slope is at a different
 * point in its repeat at every height down the page. Where it stands when a
 * section OPENS is that section's PHASE, and the phase picks one of four slots
 * that the section's block is aligned to. So the document steps across the cloth
 * as it descends, the way the motif does.
 *
 * AND THE PHASE IS NOT A TEMPLATE FACT. It is the real height of everything above
 * the section, which is the customer's own writing. Two couples with the same
 * sections in the same order get a different march if one of them wrote more. No
 * other family in this catalogue lets the customer's text decide the layout of the
 * text below it.
 *
 * THIS IS DELIBERATELY NOT AN ENUM. The six releases before this one each gave
 * every section TYPE a value and read it five times; six in a row is a house style
 * forming. Here nothing is assigned by type at all.
 *
 * Things that are easy to get wrong here and invisible in a stylesheet read.
 *
 *   A SLOT THAT NARROWS THE MEASURE. The obvious way to shift a block is to indent
 *   it, and an indent is width taken from the line. Measured on the control page:
 *   at slot 3 the measure fell from 34 characters to 27. The slot MOVES the block
 *   and never resizes it, and the container is padded so the widest shift still
 *   fits — so the line length is identical in all four slots.
 *
 *   A DIAGONAL THAT RESTARTS. Give the slope to the sections instead of the cloth
 *   and every section begins its own repeat. It still looks like a diagonal in a
 *   screenshot of one section, and the whole idea is gone.
 *
 *   A MOTIF UNDER THE WRITING. The slope is a decoration and body copy is not set
 *   on decorations: the cloth is left plain where the block sits, and the contrast
 *   sweep measures text against the real composited ground, never the plain one.
 *
 *   A PHASE READ BEFORE LAYOUT. Heights are not known until the browser has laid
 *   the page out, and they change on resize and when a gallery image loads. The
 *   phase is measured after layout and re-measured when the page changes shape;
 *   until then every section sits at slot 0 and reads correctly.
 */
/* Tokens ------------------------------------------------------------------- */
.uk-lereng{
  /* THE CLOTH, THE DYE, AND WHAT IS WRITTEN ON IT. Soga is the brown the slope is
     drawn in; it 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. */
  --lg-cloth-fill:#EEE6D3;  /* plain cloth: the page, and the ground under the writing */
  --lg-raw:#FCF8ED;         /* cloth before any dye, the lightest thing here */
  --lg-shade:#E2D7BE;       /* cloth in a fold: panels, wells, the gallery's ground */
  --lg-ink:#2B2417;         /* what is written on the cloth */
  --lg-soga:#7C4A16;        /* the dye the slope is drawn in, and everything acted on */
  --lg-soft:#584E39;        /* the same hand, quieter */
  --lg-reserve:#58503F;     /* the mid-tone that holds against the cloth whichever way
                               the cloth goes: dark on pale cloth, pale on dark.
                               Rules, borders, eyebrows, solid button fills under
                               --lg-cloth-fill text. NOT a panel fill — a panel takes
                               --lg-shade, and text on --lg-reserve is unreadable. */
  --lg-mark:#514938;        /* phase marks and section numbers: the tailor's chalk,
                               neither the ink nor the dye */
  /* THE DYE IN CHANNEL FORM, because the slope is drawn at an alpha the surface
     preset sets. A literal here is a palette that is right in four cases and wrong
     in the fifth — which is exactly what a baked colour did to the family this one
     was scaffolded from, at 1.29:1 on its dark palette. */
  --lg-soga-rgb:124 74 22;
  --lg-rule:rgba(43,36,23,.2);
  --lg-deep:rgba(43,36,23,.36);
  --lg-radius:3px;--lg-radius-sm:2px;

  /* THE SLOPE ---------------------------------------------------------------
     Declared here, on the root, and read by the cloth. */
  --lg-pitch:96px;       /* how far the slope advances per repeat */
  --lg-slots:4;          /* how many alignment slots one repeat is divided into */
  --lg-slot:0;           /* which slot this section sits in — written by the script
                            after layout, because the phase is a real height and a
                            height is not known until the page has been laid out */
  --lg-step:14px;        /* how far one slot moves a block ACROSS the cloth */
  --lg-gutter:calc(29px * var(--lg-scale));
  --lg-throw:42px;       /* the widest a block is ever moved: (slots - 1) * step.
                            The measure is held clear of this, so the line length is
                            the same in every slot. */

  /* ONE measure, and only one. The slope never touches it. */
  --lg-measure:27em;
  /* 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 before this: the couple row sat in two 217px columns with 460px of cloth
     empty either side of it. Both start at the same left edge; the wide one simply
     runs further right. */
  --lg-wide:27em;

  /* THE ONE PLACE THESE SIZES ARE DECIDED. The surface preset sets the unit and
     the viewport sets the scale, 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. */
  --lg-scale:1;
  --lg-weight:1;         /* how heavily the slope is drawn — set by the preset */
  --lg-band-u:30px;      /* the cloth above and below a section's writing */
  --lg-gap-u:12px;
  --lg-pad-u:16px;
  --lg-band:calc(var(--lg-band-u) * var(--lg-scale));
  --lg-gap:calc(var(--lg-gap-u) * var(--lg-scale));
  --lg-pad:calc(var(--lg-pad-u) * var(--lg-scale));
  --lg-travel:1;
  --lg-gal-gap:10px;
  --lg-display:"Lora",Georgia,Cambria,"Times New Roman",serif;
  --lg-sans:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  position:relative;min-height:100svh;background:var(--lg-cloth-fill);color:var(--lg-ink);
  font-family:var(--lg-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-lereng{overflow-x:clip}}

[hidden]{display:none !important}
.uk-lereng *,.uk-lereng *::before,.uk-lereng *::after{box-sizing:border-box}
.uk-lereng 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-lereng figure{margin:0}
/* :where() so these stay DEFAULTS. As ".uk-lereng p" the reset is (0,1,1) and beats
   every single-class rule in this file whatever the order — which silently threw
   away the phase mark's margin-left while its width, set in the same rule, applied
   normally. A reset that outranks the components it is resetting is not a reset. */
.uk-lereng :where(h1,h2,h3,h4){font-family:var(--lg-display);font-weight:600;line-height:1.24;margin:0}
.uk-lereng :where(p){margin:0}
/* :where() so this stays a DEFAULT. As ".uk-lereng 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-lereng :where(button){font-family:inherit;color:inherit}

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

/* THE CLOTH -----------------------------------------------------------------
   One slope, declared here and nowhere else, over the WHOLE document. */
.uk-lg-cloth{position:relative;display:grid;grid-template-columns:minmax(0,1fr);
  width:min(100%,940px);margin-inline:auto;
  /* The paired stroke — one firm, one faint — is what makes a slope read as a
     slope rather than as hatching. It is declared on the cloth, so it carries
     straight through every seam; the sections paint no diagonal of their own. */
  background:
    repeating-linear-gradient(45deg,
      rgb(var(--lg-soga-rgb) / .17) 0 2px,
      transparent 2px 10px,
      rgb(var(--lg-soga-rgb) / .08) 10px 13px,
      transparent 13px var(--lg-pitch))}
.uk-lg-cloth > *{grid-column:1/-1}

/* A RUN: one section of cloth. It has no background of its own — a section that
   paints its own ground is a section that has cut the slope. */
/* The band the march happens in. On a phone max() picks the gutter and the block
   fills what is left. On a wide screen it picks the centring value instead, so the
   band — measure plus the widest shift — sits in the middle of the cloth.
   Without this the slot shift is a plain margin-left: on a phone the remaining
   width is used up, but once --lg-measure caps the block the whole remainder piles
   up on ONE side. Measured at 1440: 460px of empty cloth to the right of every
   block, with the seam rule running the full width past it. */
.uk-lg-run{position:relative;
  padding:var(--lg-band) max(var(--lg-gutter),calc((100% - var(--lg-measure) - var(--lg-throw)) / 2)) calc(var(--lg-band) + 6px)}
.uk-lg-run + .uk-lg-run{border-top:1px solid var(--lg-rule)}

/* THE WRITING NEVER CHANGES WIDTH. A phone has one scarce resource and it is
   horizontal, so the slope is never paid for out of the measure: the block moves
   across the cloth, it does not get narrower. The padding is set so the measure
   plus the widest shift still fits, which is what makes that true rather than
   merely intended. */
.uk-lg-body{position:relative;z-index:1;
  /* The block has to clear BOTH gutters AND the widest shift. Subtracting only the
     shift left a slot-3 block running sixteen pixels past the right edge of a
     390px window, with the line length still looking correct in a screenshot of
     slot 0. */
  /* The body is the BAND, not the measure. Prose inside it is capped at the
     measure and keeps the left edge; a block that is inherently side by side —
     two people, a row of event cards, a countdown — fills the band instead of
     being squeezed into a reading column. Capping the body itself made every
     child narrower than the page had room for: at 1440 the couple row sat in two
     217px columns with 460px empty either side. */
  width:min(100% - var(--lg-throw), var(--lg-wide));
  margin-left:calc(var(--lg-slot, 0) * var(--lg-step))}
.uk-lg-body > * + *{margin-top:10px}
/* The cloth is left plain under the writing. The slope runs in the margins and
   through the seams, never under a line of body copy. */
.uk-lg-body::before{content:"";position:absolute;z-index:-1;
  inset:-10px -14px;background:var(--lg-cloth-fill);border-radius:var(--lg-radius-sm)}

/* THE COURSE MARK, in the margin of the writing. Never in the gilding: a number
   in the colour of the ornament reads as ornament. */
/* THE PHASE MARK. It labels the block, so it MARCHES WITH IT: left where the slot
   puts it, and inside the plain cloth the block sits on. Left at the section's own
   edge it sat under the block's reserve and was read as clipped text — a label for
   a thing it was no longer beside. */
.uk-lg-mark{position:relative;z-index:1;display:flex;align-items:baseline;gap:9px;
  margin:0 0 10px;
  margin-left:calc(var(--lg-slot, 0) * var(--lg-step));
  width:min(100% - var(--lg-throw), var(--lg-measure));
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;
  font-weight:600;letter-spacing:.18em;color:var(--lg-mark)}
.uk-lg-mark b{font-size:11px;font-weight:600}
.uk-lg-mark em{font-style:normal;opacity:.9}

.uk-lg-title{max-width:var(--lg-measure);font-family:var(--lg-display);color:var(--lg-ink);
  font-size:clamp(21px,5.2vw,28px);line-height:1.22;text-wrap:balance}
.uk-lg-title.is-sm{font-size:clamp(17px,3.4vw,20px)}
.uk-lg-copy,.uk-lg-lead{max-width:var(--lg-measure);color:var(--lg-soft)}
.uk-lg-lead{font-family:var(--lg-display);font-size:19px;color:var(--lg-ink)}
.uk-lg-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 --lg-shade, the recessed tone of the timber itself, NOT
   --lg-reserve. --lg-reserve is a mid-tone that holds AGAINST the clay (it draws
   eyebrows, rules and borders, and fills solid buttons under --lg-cloth-fill text), so
   filling a panel with it and writing --lg-soga 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 --lg-shade the same text measures 5.0–8.7. */
.uk-lg-seam{max-width:var(--lg-measure);margin-top:14px;
  padding:12px 14px;border:1px solid var(--lg-soga);border-radius:var(--lg-radius-sm);
  background:var(--lg-shade);
  font-family:var(--lg-sans);font-size:15px;color:var(--lg-soga)}
.uk-lg-seam dt,.uk-lg-seam .uk-lg-row-mark{margin:0 0 3px;
  font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--lg-soga)}
.uk-lg-seam dd{margin:0 0 10px;color:var(--lg-soga)}
.uk-lg-seam dd:last-child{margin-bottom:0}
.uk-lg-seam dd strong{display:block;font-weight:600;color:var(--lg-soga)}
.uk-lg-seam dd span{display:block;color:var(--lg-soft);font-size:13px}
.uk-lg-seam .uk-lg-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.uk-lg-seam .uk-lg-button{border-color:var(--lg-soga);color:var(--lg-soga)}
.uk-lg-seam .uk-lg-button.is-solid{background:var(--lg-soga);color:var(--lg-cloth-fill)}

/* THE BEAD — this family's way through, and it TRAVELS. Thirty-six releases in
   this catalogue navigate from a fixed place: a rail, a dock, a strip, a column, a
   drawing. On a slope, descending also means going across, so this one does not sit
   still: it starts at the left of the foot and arrives at the right as the last
   section is reached. Its position IS the progress, so there is no second bar.
   Only its x moves and the target stays 44px, so it is no harder to hit at the end
   than at the start. */
.uk-lg-bead{position:fixed;z-index:26;--lg-bead-w:86px;
  bottom:calc(14px + env(safe-area-inset-bottom));
  left:calc(14px + var(--lg-walk,0) * (100vw - 28px - var(--lg-bead-w)));
  transition:left .32s cubic-bezier(.3,.8,.3,1)}
.uk-lg-bead-tab{display:flex;align-items:center;gap:8px;
  width:var(--lg-bead-w);min-height:44px;padding:8px 12px;
  border:1px solid var(--lg-rule);border-radius:var(--lg-radius);
  background:var(--lg-cloth-fill);cursor:pointer}
/* a short length of the slope itself, at the slope's own angle */
.uk-lg-slope{display:block;flex:0 0 auto;width:16px;height:16px;
  background:repeating-linear-gradient(45deg,var(--lg-soga) 0 2px,transparent 2px 6px);
  opacity:.85}
.uk-lg-bead-tab b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--lg-soga)}
.uk-lg-bead.is-open .uk-lg-bead-tab{border-color:var(--lg-soga)}
.uk-lg-bead-panel{position:absolute;left:0;bottom:calc(100% + 8px);
  width:min(calc(100vw - 28px),320px);max-height:min(56svh,420px);
  overflow-y:auto;overscroll-behavior:contain;
  padding:14px;border:1px solid var(--lg-rule);border-radius:var(--lg-radius);
  background:var(--lg-cloth-fill);box-shadow:0 10px 26px var(--lg-deep)}
.uk-lg-bead-panel[hidden]{display:none}
/* Once the bead has travelled past halfway the panel hangs off its RIGHT edge, or
   it would open half outside the window. */
.uk-lg-bead.is-far .uk-lg-bead-panel{left:auto;right:0}
.uk-lg-bead-head{margin:0 0 10px;font-size:10px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--lg-mark)}
.uk-lg-runs{list-style:none;display:grid;gap:0;margin:0;padding:0}
.uk-lg-runs li + li{border-top:1px dotted var(--lg-rule)}
.uk-lg-runs a{display:grid;grid-template-columns:10px auto minmax(0,1fr);
  column-gap:10px;align-items:center;min-height:44px;padding:9px 0;
  color:var(--lg-ink);text-decoration:none}
.uk-lg-tick{display:block;width:8px;height:12px;
  background:linear-gradient(45deg,transparent 42%,var(--lg-rule) 42% 58%,transparent 58%)}
.uk-lg-runs a.is-active .uk-lg-tick{background:linear-gradient(45deg,transparent 42%,var(--lg-soga) 42% 58%,transparent 58%)}
.uk-lg-runs b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  font-weight:600;color:var(--lg-mark)}
.uk-lg-runs span{font-size:14px}
.uk-lg-runs a.is-active span{font-weight:600}
.uk-lg-runs a.is-active b{color:var(--lg-soga)}

/* GATE: the strip still folded, seen edge-on ------------------------------ */
.uk-lg-gate{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:20px 0;overflow:hidden;
  background:var(--lg-raw);color:var(--lg-ink);transition:opacity .7s ease,visibility .7s ease}
.uk-lg-gate.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.uk-lg-gate-stage{position:relative;display:grid;place-items:center;width:100%}
/* THE FOLD ON THE BIAS. A length of cloth is folded corner to corner before it is
   put away, and along that crease the slope meets itself coming the other way —
   the one place in the whole document where the diagonal is allowed to turn back.
   Drawn wider and taller than the panel in front of it, because cloth does not
   stop at the thing laid on it. */
.uk-lg-bias{position:absolute;left:50%;top:-10%;z-index:0;
  width:min(100% - 8px,560px);height:120%;transform:translateX(-50%);pointer-events:none;
  background:
    repeating-linear-gradient(45deg,
      rgb(var(--lg-soga-rgb) / .2) 0 2px, transparent 2px 10px,
      rgb(var(--lg-soga-rgb) / .09) 10px 13px, transparent 13px var(--lg-pitch)),
    repeating-linear-gradient(-45deg,
      rgb(var(--lg-soga-rgb) / .2) 0 2px, transparent 2px 10px,
      rgb(var(--lg-soga-rgb) / .09) 10px 13px, transparent 13px var(--lg-pitch));
  /* the crease itself: the two directions meet on this line and nowhere else */
  -webkit-mask-image:linear-gradient(180deg,#000 0 50%,#000 50% 100%);
  transition:transform .9s cubic-bezier(.3,.9,.3,1),opacity .7s ease}
.uk-lg-bias::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:rgb(var(--lg-soga-rgb) / .34)}

.uk-lg-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(--lg-radius);background:var(--lg-cloth-fill);
  /* 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-lg-portrait{position:relative;height:min(40svh,272px);overflow:hidden;background:var(--lg-shade)}
.uk-lg-portrait img{width:100%;height:100%;object-fit:cover;object-position:var(--lg-focus-mobile-x,50%) var(--lg-focus-mobile-y,38%)}
.uk-lg-gate-body{position:relative;padding:24px 22px 24px;text-align:center}
.uk-lg-gate-stage{padding-right:0}
.uk-lg-gate-names{margin-top:8px;font-size:clamp(26px,7.2vw,40px)}
.uk-lg-gate-date{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:7px 16px;border:1px solid var(--lg-rule);border-radius:999px;font-size:12px;letter-spacing:.08em;color:var(--lg-soft)}
.uk-lg-couple-list{display:grid;gap:8px;margin-top:14px}
.uk-lg-couple-list span{display:grid;gap:2px}
.uk-lg-couple-list small{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--lg-soft)}
.uk-lg-couple-list strong{font-family:var(--lg-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-lg-gate-open{position:relative;display:flex;width:fit-content;margin:18px auto 0;padding:13px 26px;
  border-color:transparent;background:var(--lg-reserve);color:var(--lg-cloth-fill);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-lg-gate.is-drawn .uk-lg-gate-panel{animation:uk-lg-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-lg-gate.is-drawn .uk-lg-bias{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-lg-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-lg-cover{--lg-cloth-fill:#1B1913;--lg-shade:#110F09;--lg-ink:#F3EEE2;--lg-soft:#B9B19A;--lg-reserve:#AEA796;--lg-soga:#E9A776;
  --lg-cloth-rgb:28 26 20;--lg-soga-rgb:110 102 82;
  --lg-rule:rgba(244,239,227,.24);--lg-deep:rgba(0,0,0,.5);--lg-raw:#3E3930;
  position:relative;display:grid;min-height:100svh;background:var(--lg-cloth-fill);color:var(--lg-ink)}
.uk-lg-cover-media{position:absolute;inset:0;overflow:hidden}
.uk-lg-cover-image{width:100%;height:100%;object-fit:cover;object-position:var(--lg-focus-mobile-x,50%) var(--lg-focus-mobile-y,38%)}
.uk-lg-cover-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,26,20,.26) 0%,rgba(28,26,20,.78) 58%,#1B1913 100%)}
.uk-lg-cover-empty{position:absolute;inset:0;display:grid;place-items:center;background:#1F1B14}
.uk-lg-cover-empty-tone{position:absolute;inset:0;background:linear-gradient(160deg,rgba(241,236,224,.1),transparent 60%)}
.uk-lg-cover-empty-mark{position:relative;font-family:var(--lg-display);font-size:23px;letter-spacing:.2em;padding:10px 18px;border:1px solid var(--lg-rule);border-radius:var(--lg-radius);color:#F3EEE2}
.uk-lg-cover-panel{position:relative;align-self:end;padding:40px var(--lg-pad) 56px;text-align:center}
.uk-lg-cover-panel .uk-lg-title{margin-top:8px;font-size:clamp(29px,8.4vw,52px)}
.uk-lg-cover-panel > * + *{margin-top:10px}
.uk-lg-cover-date{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:7px 16px;border:1px solid var(--lg-rule);border-radius:999px;font-size:12px;letter-spacing:.08em;color:var(--lg-soft)}
/* The cover's monogram. NOT .uk-lg-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-lg-monogram{display:grid;place-items:center;width:62px;height:62px;margin:20px auto 0;
  border:1px solid var(--lg-reserve);border-radius:var(--lg-radius);
  font-family:var(--lg-display);font-size:14px;letter-spacing:.16em;color:var(--lg-reserve)}

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

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

/* Countdown ---------------------------------------------------------------- */
.uk-lg-count{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--lg-rule);border:1px solid var(--lg-rule);border-radius:var(--lg-radius-sm);overflow:hidden}
.uk-lg-count div{padding:14px 8px;background:var(--lg-cloth-fill);text-align:center}
.uk-lg-seam .uk-lg-count div{background:var(--lg-cloth-fill)}
.uk-lg-count strong{display:block;font-family:var(--lg-display);font-size:clamp(24px,6vw,32px);line-height:1.1;font-variant-numeric:tabular-nums}
.uk-lg-count span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--lg-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-lg-swatch-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--lg-soft)}
.uk-lg-swatch-tools div{display:flex;gap:8px}
.uk-lg-swatch-tools button{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--lg-rule);border-radius:var(--lg-radius-sm);background:transparent;cursor:pointer}
.uk-lg-swatch{position:relative;display:flex;gap:var(--lg-gal-gap);overflow-x:auto;padding-bottom:10px;
  scroll-snap-type:x mandatory;scrollbar-width:none}
.uk-lg-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-lg-swatch-no{position:absolute;left:0;bottom:6px;z-index:3;padding:3px 7px;
  border-radius:var(--lg-radius-sm);background:var(--lg-cloth-fill);color:var(--lg-soft);
  font-family:var(--lg-display);font-size:11px;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;box-shadow:0 0 0 1px var(--lg-rule)}
.uk-lg-figure{position:relative;flex:0 0 auto;width:min(64vw,236px);scroll-snap-align:start}
.uk-lg-figure img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--lg-radius-sm);background:var(--lg-shade)}
.uk-lg-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:#F3EEE2;cursor:pointer}

/* Gift, contacts, FAQ ------------------------------------------------------ */
.uk-lg-tabs{display:flex;flex-wrap:wrap;gap:8px}
.uk-lg-tabs button{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:11px 15px;border:1px solid var(--lg-rule);border-radius:var(--lg-radius);background:transparent;font-size:12px;font-weight:600;cursor:pointer}
.uk-lg-tabs button.is-active{border-color:var(--lg-soga);box-shadow:inset 0 0 0 1px var(--lg-soga)}
.uk-lg-gift-panel{display:block}
.uk-lg-account strong{display:block;font-family:var(--lg-display);font-size:20px;letter-spacing:.05em;font-variant-numeric:tabular-nums}
.uk-lg-account p{font-size:13px;color:var(--lg-soft)}
.uk-lg-contacts{display:grid}
.uk-lg-contact strong{display:block;font-size:15px}
.uk-lg-contact p{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--lg-soft)}
.uk-lg-faq{display:grid;gap:0}
.uk-lg-faq-item{padding:12px 0}
.uk-lg-faq-item + .uk-lg-faq-item{border-top:1px dotted var(--lg-rule)}
.uk-lg-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-lg-faq-item summary::-webkit-details-marker{display:none}
.uk-lg-faq-item p{margin-top:8px;color:var(--lg-soft);font-size:15px}
.uk-lg-hashtags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.uk-lg-hashtags button{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 13px;border:1px solid var(--lg-rule);border-radius:999px;background:transparent;font-size:12px;cursor:pointer}
.uk-lg-engagement .uk-lg-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-lg-feedback{--lg-cloth-fill:#EEE6D3;--lg-shade:#E2D7BE;--lg-ink:#2B2417;--lg-soft:#584E39;--lg-reserve:#58503F;--lg-soga:#7C4A16;--lg-mark:#514938;
  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(--lg-radius);background:var(--lg-cloth-fill);color:var(--lg-ink);font-size:14px}

/* CLOSING: the end of the strip -------------------------------------------- */
.uk-lg-closing{position:relative;padding:60px var(--lg-pad) 76px;
  background:var(--lg-cloth-fill);color:var(--lg-ink);text-align:center;scroll-margin-top:0}
/* The closing is centred and outside the runs, so it has no slot — but it is the
   same reading, and a line that gets eight characters longer at the end of the
   document is a different voice. It takes the width a run's block takes. */
.uk-lg-closing-body{width:min(100% - var(--lg-gutter) * 2 - var(--lg-throw),var(--lg-measure));margin-inline:auto}
.uk-lg-closing-body > * + *{margin-top:14px}
.uk-lg-closing .uk-lg-title{font-size:clamp(24px,6vw,36px)}
.uk-lg-closing .uk-lg-copy{margin-inline:auto}
.uk-lg-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-lg-rail{position:fixed;right:14px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:24;display:grid;gap:8px;justify-items:center}
.uk-lg-rail-toggle,.uk-lg-rail-panel button{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(138,73,21,.5);border-radius:50%;background:#2B2417;color:#F3EEE2;cursor:pointer}
.uk-lg-rail-panel{display:grid;gap:8px;justify-items:center}
.uk-lg-dialog,.uk-lg-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-lg-dialog.is-open,.uk-lg-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 --lg-ink and --lg-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-lg-dialog-panel{--lg-cloth-fill:#EEE6D3;--lg-shade:#E2D7BE;--lg-ink:#2B2417;--lg-soft:#584E39;--lg-reserve:#58503F;--lg-soga:#7C4A16;--lg-mark:#514938;--lg-rule:rgba(44,36,25,.18);
  width:min(100%,430px);padding:22px;border:1px solid var(--lg-reserve);border-radius:var(--lg-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(--lg-cloth-fill);color:var(--lg-ink)}
.uk-lg-dialog-panel h2{margin-top:6px;font-size:22px}
.uk-lg-share-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:16px}
.uk-lg-share-grid button{display:flex;align-items:center;gap:8px;min-height:44px;padding:11px 13px;border:1px solid var(--lg-rule);border-radius:var(--lg-radius-sm);background:transparent;color:inherit;cursor:pointer;font-size:13px}
.uk-lg-dialog-close{width:100%;margin-top:14px}
.uk-lg-lightbox-panel{position:relative;width:min(100%,780px)}
.uk-lg-lightbox-panel img{width:100%;max-height:76svh;object-fit:contain;border-radius:var(--lg-radius);transition:opacity .2s ease}
.uk-lg-lightbox.is-switching .uk-lg-lightbox-panel img{opacity:0}
.uk-lg-lightbox-counter{margin-top:12px;color:#F3EEE2;font-size:12px;letter-spacing:.16em;text-align:center}
.uk-lg-lightbox-close,.uk-lg-lightbox-prev,.uk-lg-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:#F3EEE2;cursor:pointer}
.uk-lg-lightbox-close{top:-52px;right:0}
.uk-lg-lightbox-prev{left:6px;top:50%;transform:translateY(-50%)}
.uk-lg-lightbox-next{right:6px;top:50%;transform:translateY(-50%)}
.uk-lg-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:#2B2417;color:#F3EEE2;font-size:13px;pointer-events:none;transition:opacity .3s ease,transform .3s ease}
.uk-lg-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-lg-reveal{opacity:0;transition:opacity .58s ease,transform .7s cubic-bezier(.22,.78,.2,1)}
.uk-lg-body.uk-lg-reveal{transform:translateY(var(--lg-raise,16px))}
.uk-lg-cover.uk-lg-reveal,.uk-lg-closing.uk-lg-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-lg-reveal.is-visible{opacity:1;transform:none}
.uk-lg-reveal-item{opacity:0;transform:translateY(10px);
  transition:opacity .56s ease .18s,transform .56s ease .18s}
.uk-lg-reveal.is-visible .uk-lg-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-lereng{--lg-cloth-fill:#EEE6D3;--lg-raw:#FCF8ED;--lg-shade:#E2D7BE;--lg-ink:#2B2417;--lg-soft:#584E39;--lg-soga:#7C4A16;--lg-reserve:#58503F;--lg-mark:#514938;--lg-soga-rgb:124 74 22;--lg-rule:rgba(43,36,23,.18);--lg-deep:rgba(43,36,23,.34)}
.uk-design-palette-warm.uk-lereng{--lg-cloth-fill:#F5EDD1;--lg-raw:#FFFAE6;--lg-shade:#E8DCAD;--lg-ink:#2D2611;--lg-soft:#64572A;--lg-soga:#89490A;--lg-reserve:#675D41;--lg-mark:#5A5134;--lg-soga-rgb:137 73 10;--lg-rule:rgba(45,38,17,.18);--lg-deep:rgba(45,38,17,.34)}
.uk-design-palette-romantic.uk-lereng{--lg-cloth-fill:#F6EAE1;--lg-raw:#FFF6F0;--lg-shade:#EAD5C5;--lg-ink:#31201A;--lg-soft:#6B493C;--lg-soga:#97363B;--lg-reserve:#7A6155;--lg-mark:#644E41;--lg-soga-rgb:151 54 59;--lg-rule:rgba(49,32,26,.18);--lg-deep:rgba(49,32,26,.34)}
.uk-design-palette-sage.uk-lereng{--lg-cloth-fill:#E8EFE2;--lg-raw:#F6FBF1;--lg-shade:#D4DFC8;--lg-ink:#1E2918;--lg-soft:#4D5A39;--lg-soga:#1F5648;--lg-reserve:#5A6347;--lg-mark:#4A5137;--lg-soga-rgb:31 86 72;--lg-rule:rgba(30,41,24,.18);--lg-deep:rgba(30,41,24,.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-lereng{--lg-cloth-fill:#1B1913;--lg-raw:#3E3930;--lg-shade:#110F09;--lg-ink:#F3EEE2;--lg-soft:#B9B19A;--lg-soga:#E9A776;--lg-reserve:#AEA796;--lg-mark:#BAB29F;--lg-soga-rgb:233 167 118;--lg-rule:rgba(243,238,226,.2);--lg-deep:rgba(0,0,0,.58)}
.uk-design-palette-midnight .uk-lg-count div{background:var(--lg-cloth-fill)}

.uk-design-type-classic .uk-lg-title,.uk-design-type-classic .uk-lg-gate-names{font-family:var(--lg-display)}
.uk-design-type-modern .uk-lg-title,.uk-design-type-modern .uk-lg-gate-names{font-family:var(--lg-sans);letter-spacing:.02em}
.uk-design-type-editorial .uk-lg-title{font-size:clamp(25px,6.2vw,38px);letter-spacing:-.01em}
.uk-design-type-editorial .uk-lg-cover-panel .uk-lg-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-lereng, so ".uk-design-surface-soft .uk-lereng" 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-lereng{--lg-band-u:40px;--lg-gap-u:16px;--lg-weight:1.3;--lg-pad-u:22px;--lg-radius:6px;--lg-radius-sm:4px}
.uk-design-surface-balanced.uk-lereng{--lg-band-u:30px;--lg-gap-u:12px;--lg-weight:1;--lg-pad-u:16px;--lg-radius:3px;--lg-radius-sm:2px}
.uk-design-surface-sharp.uk-lereng{--lg-band-u:22px;--lg-gap-u:9px;--lg-weight:.74;--lg-pad-u:11px;--lg-radius:0px;--lg-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-lg-figure{width:min(48vw,176px)}
.uk-design-gallery-filmstrip .uk-lg-figure{width:min(64vw,236px)}
.uk-design-gallery-editorial .uk-lg-figure{width:min(84vw,330px)}
.uk-design-gallery-editorial .uk-lg-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 --lg-travel of 1.
   These three previously set --lg-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-lereng{--lg-travel:.66}
.uk-design-motion-cinematic.uk-lereng{--lg-travel:1.85}
.uk-design-motion-minimal.uk-lereng{--lg-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-lg-reveal,
.uk-design-motion-minimal .uk-lg-body.uk-lg-reveal,
.uk-design-motion-minimal .uk-lg-reveal-item{opacity:1;transform:none;transition:none}
.uk-design-motion-minimal .uk-lg-gate.is-drawn .uk-lg-gate-panel{animation:none}
.uk-design-motion-minimal .uk-lg-bias{transition:none}

/* Wider viewports ---------------------------------------------------------- */
@media(min-width:760px){
.uk-lereng{font-size:17px;--lg-scale:1.7;--lg-wide:43em}
/* The march band is sized on the WIDER of the two, so a wide block has somewhere
   to go and the prose still starts where it always did. */
.uk-lg-run{padding-inline:max(var(--lg-gutter),calc((100% - var(--lg-wide) - var(--lg-throw)) / 2))}
.uk-lg-portrait{height:min(38svh,296px)}
.uk-lg-portrait img,.uk-lg-cover-media .uk-lg-cover-image{object-position:var(--lg-focus-desktop-x,50%) var(--lg-focus-desktop-y,42%)}
.uk-lg-cover-panel{padding:56px var(--lg-pad) 74px}
.uk-lg-gate-panel{width:min(100% - 48px,540px)}
.uk-lg-bias{width:min(100% - 24px,620px)}
.uk-lg-closing{padding:84px var(--lg-pad) 100px}
.uk-lg-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-lg-people>*:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:min(100%,400px)}
.uk-lg-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-lg-closing{padding:100px var(--lg-pad) 116px}
}

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

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