/* Larik — Romance Flagship 1.0.0
 * Larik means a line: a line of verse, and a line of set type. This is the one
 * family in the catalogue with no metaphor at all. It is not a cloth, a screen, a
 * plate, a pavilion or a strip of folded card. It is an invitation that has been
 * SET, and the discipline of setting is the whole of its identity.
 *
 * ONE LINE, AND NOTHING OFF IT. There is a single vertical unit — the leading —
 * and every vertical measurement in this file is a whole number of it: the height
 * of a section mark, the space between sections, the depth of a plate, the height
 * of a button, the diameter of a portrait. Nothing is measured in pixels that are
 * not a multiple of the line, and nothing vertical is measured in ratios at all.
 *
 * It is what separates set type from arranged type, and it is the thing a reader
 * feels without being able to name it: the page keeps time. It costs flexibility —
 * a photograph cannot be whatever height its aspect gives it, it is cut to the
 * nearest whole number of lines. It buys a rhythm that survives every section,
 * every palette and every breakpoint, because the rhythm is the one thing that is
 * never recalculated.
 *
 * AND SECTIONS ARE DIVIDED BY RULES, NOT PANELS. No cards, no tinted grounds, no
 * boxes. A rule and a line of space, which is how a book does it.
 *
 * THE WAY THROUGH IS A FOLIO, AND IT DOES NOT LIST. Other releases in this
 * catalogue navigate by showing you something — an index, a rail, a drawing, a
 * dock, a travelling bead. This one does what a book does: the contents is a real
 * part of the document, set once near the front, and the folio at the foot takes
 * you BACK to it. The control names where you are and returns you to the one place
 * that lists everything. It shows nothing itself, which is why it can be this
 * small and still be the whole navigation.
 *
 * Things that are easy to get wrong here and invisible in a stylesheet read.
 *
 *   A MARGIN IN PIXELS. One margin of 10px among units of 28 and the rhythm is
 *   gone for everything below it — and the page still looks correct in a
 *   screenshot of any single section, which is why this is not caught by looking.
 *   Every vertical value is calc(var(--lk-line) * n).
 *
 *   A BORDER ON A BLOCK IN THE FLOW. A 1px border top and bottom is 2px of
 *   layout, and 2px is not a line. Every hairline in this file is either an
 *   absolutely positioned ::before or a box-shadow — both of which draw without
 *   occupying. The only borders are on things that do not sit in the vertical flow
 *   (buttons sized in whole lines, fixed chrome, the inset ring of a plate).
 *
 *   A LINE-HEIGHT THAT IS A RATIO. "line-height:1.6" resolves against the font
 *   size, so it lands on the grid at one size and nowhere else. Leading is set in
 *   the unit itself, including on headings, and a heading of n lines is n units
 *   tall at every size the clamp can produce.
 *
 *   A PLATE SIZED BY ITS ASPECT. aspect-ratio gives whatever height the width
 *   implies, which is almost never a whole number of lines. Plates are cut to the
 *   line and the image is covered into them.
 *
 *   A FIRST SCREEN THAT IS 100svh. The cover is the one block whose height comes
 *   from the window, and a window is not a whole number of lines — so everything
 *   after it would sit off the grid by whatever the remainder happened to be, on
 *   that device only. The cover is cut DOWN to the last whole line it fits.
 */

/* Tokens ------------------------------------------------------------------- */
.uk-larik{
  /* PAPER, INK, AND ONE ACCENT. There is no second face and no second accent: a
     set page takes its hierarchy from size, space and small caps, not from
     colour. Every one of these is redeclared in full by each palette below, so
     nothing is ever left holding the template's value while its neighbours
     flip. */
  --lk-paper:#FBF5E6;     /* the sheet */
  --lk-leaf:#F0E7D1;      /* the sheet where a plate or a panel is set into it */
  --lk-ink:#1F1B12;       /* the text, and the fill of a solid control */
  --lk-quiet:#554C3B;     /* the same text, set one step down */
  --lk-accent:#7B3215;    /* the one second colour: small caps, folios, plate numbers */
  --lk-rule:rgba(31,27,18,.22);
  --lk-deep:rgba(31,27,18,.34);
  --lk-radius:0px;        /* a set page has no rounded corners */

  /* THE LINE ----------------------------------------------------------------
     The single vertical unit. Every vertical measurement in this file is a whole
     number of it and there is no other vertical unit anywhere, which is why the
     surface control can be the leading itself: changing this one value re-sets
     the whole document and cannot leave anything behind. */
  --lk-line:28px;
  --lk-l1:var(--lk-line);
  --lk-l2:calc(var(--lk-line) * 2);
  --lk-l3:calc(var(--lk-line) * 3);
  --lk-l4:calc(var(--lk-line) * 4);
  --lk-plate:calc(var(--lk-line) * 8);   /* the depth of a plate, in lines */

  /* ONE measure for prose, and a band that side-by-side blocks may use. On a
     phone they are the same number: --lk-band only opens at 760px, so nothing
     about a phone page depends on it. */
  --lk-lag-step:0ms;
  /* THE MEASURE IS A NUMBER OF LINES WIDE. Everything else in this family is
     counted in lines, and so is the column: fifteen lines of prose. It follows the
     surface control with everything else, and it cannot be written in em — an em
     inside a custom property resolves against the font size of the element that
     READS it, so one token would be 420px on the copy and 728px on a heading, and
     the heading's line would run half again as long as the prose beneath it. */
  --lk-measure:calc(var(--lk-line) * 15);
  --lk-band:var(--lk-measure);
  /* AND SO IS THE MARGIN. The outer margin of a set page is not an arbitrary
     20px either: it is one line, the same unit the page is set in, which also puts
     the prose at 45 characters on a phone instead of 47 — in family with the rest
     of the catalogue, and inside the range a book is set at. */
  --lk-pad:var(--lk-line);

  --lk-display:"Lora",Georgia,Cambria,"Times New Roman",serif;
  --lk-sans:"Lora",Georgia,Cambria,"Times New Roman",serif;
  position:relative;min-height:100svh;background:var(--lk-paper);color:var(--lk-ink);
  font-family:var(--lk-sans);font-size:16px;line-height:var(--lk-line);
  -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 fixed descendant is
     unaffected but a sticky one would then stick to THIS element's scrollport
     instead of the window's. 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 — safe here only because the overflow
     sweep measures zero horizontal overflow. */
  overflow-x:hidden;
}
@supports (overflow-x:clip){.uk-larik{overflow-x:clip}}

[hidden]{display:none !important}
.uk-larik *,.uk-larik *::before,.uk-larik *::after{box-sizing:border-box}
.uk-larik img{display:block;max-width:100%}
/* :where() so these stay DEFAULTS. As ".uk-larik p" the reset is (0,1,1) and beats
   every single-class rule in this file whatever the order — which in this family's
   scaffold silently threw away a mark's margin while its width, set in the same
   rule, applied normally. A reset that outranks the components it is resetting is
   not a reset.
   The heading leading is the line itself, not a ratio: a ratio lands on the grid
   at one font size and nowhere else, and these sizes are clamps. */
.uk-larik :where(h1,h2,h3,h4){font-family:var(--lk-display);font-weight:600;
  line-height:var(--lk-l1);margin:0}
/* EVERY UA MARGIN, not just the ones that are easy to remember. The UA gives
   blockquote, dl, dd, ol and ul a margin of 1em, which at this font size is 17px —
   and 17px is not a line. One un-reset blockquote at the end of the opening
   section put its own height 17px off, and because each section's top is measured
   from the one above it, EVERY section below it stood 13px off the line, all the
   way to the colophon. The page looked correct in a screenshot of any single
   section. This is the reset that holds the grid together. */
.uk-larik :where(p,blockquote,figure,ol,ul,dl,dt,dd,pre,address){margin:0}
.uk-larik :where(ol,ul){padding:0;list-style:none}
.uk-larik :where(button){font-family:inherit;color:inherit}

/* Shared type and ornament ------------------------------------------------- */
/* Every one of these occupies a whole number of lines. The small sizes are set
   SOLID — one line tall — because a 11px label in a 28px line is exactly what a
   running head is on a set page. */
.uk-lk-eyebrow{font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--lk-accent)}
.uk-lk-preline{white-space:pre-line}
.uk-lk-signature{font-family:var(--lk-display);font-size:21px;color:var(--lk-ink)}
/* The quote is marked by a rule down its left side and NOTHING else: no tint, no
   box, no vertical padding. Vertical padding here would be the first thing to put
   the rest of the section off the line. */
.uk-lk-quote{max-width:var(--lk-measure);padding:0 0 0 var(--lk-l1);
  border-left:2px solid var(--lk-accent);color:var(--lk-ink);
  font-family:var(--lk-display);font-size:17px;font-style:italic}
.uk-lk-quote cite{display:block;margin-top:var(--lk-l1);font-family:var(--lk-sans);
  font-size:12px;font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--lk-quiet)}
.uk-lk-occasions{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
  column-gap:8px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--lk-quiet)}
.uk-lk-occasions span+span::before{content:"·";padding-right:8px;color:var(--lk-accent)}
/* A control is TWO LINES tall — 56px at the base leading, 52 at the tightest,
   which keeps it over the 44px touch minimum at every setting while still being a
   whole number of lines. Its border does not break the grid because its height is
   declared, so the border draws inside it. */
.uk-lk-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:var(--lk-l2);padding:0 18px;border:1px solid var(--lk-ink);border-radius:var(--lk-radius);
  background:transparent;color:var(--lk-ink);font-size:13px;font-weight:600;letter-spacing:.05em;
  text-decoration:none;cursor:pointer;transition:box-shadow .25s ease}
.uk-lk-button:hover{box-shadow:inset 0 -2px 0 var(--lk-accent)}
/* The label is --lk-paper, not a fixed cream, and the fill is --lk-ink — so the
   pair inverts with the palette instead of staying dark on a dark sheet. */
.uk-lk-button.is-solid{border-color:transparent;background:var(--lk-ink);color:var(--lk-paper)}
.uk-lk-button:focus-visible,.uk-larik button:focus-visible,.uk-larik a:focus-visible{
  outline:2px solid var(--lk-accent);outline-offset:3px}

/* A ROW THAT WRAPS IS TWO ROWS, AND THE GAP BETWEEN THEM IS VERTICAL.
   Every one of these is a flex row that wraps when the names, the tabs or the
   share buttons do not fit, and a column gap of 10px becomes a ROW gap of 10px
   the moment it does — which is 10px that is not a line. The closing block
   measured 730px tall instead of 750 for exactly this: three share buttons
   wrapped to two rows with 10px between them, on a phone only, in the last block
   of the document where nothing below it could reveal the drift.
   So the two gaps are declared separately: the column gap is a spacing choice,
   the row gap is the grid. */
.uk-lk-actions,.uk-lk-tabs,.uk-lk-hashtags,.uk-lk-closing-share,.uk-lk-couple-index,
.uk-lk-share-grid,.uk-lk-scope,.uk-lk-occasions,.uk-lk-swatch-tools div{row-gap:var(--lk-l1)}

/* THE SHEET ---------------------------------------------------------------- */
.uk-lk-sheet{position:relative;display:grid;grid-template-columns:minmax(0,1fr);
  width:min(100%,940px);margin-inline:auto}
.uk-lk-sheet > *{grid-column:1/-1}

/* A SECTION. Divided from the next by a RULE and a line of space, not by a card,
   a tint or a box. The rule is drawn by a ::before in the margin the next section
   opens with, so it costs no layout at all: a 1px border here would be 1px that
   is not a line, and everything below it would stand off the grid. */
.uk-lk-sec{position:relative;padding:var(--lk-l2) var(--lk-pad) 0}
.uk-lk-sec + .uk-lk-sec{margin-top:var(--lk-l1)}
.uk-lk-sec + .uk-lk-sec::before{content:"";position:absolute;left:var(--lk-pad);right:var(--lk-pad);
  top:calc(var(--lk-l1) * -1);height:1px;background:var(--lk-rule)}

/* The band. Prose inside it keeps the measure — see --lk-measure on the title and
   copy — so a block that is genuinely side by side can use the width without
   stretching a line of reading to 140 characters. */
.uk-lk-body{position:relative;width:min(100%,var(--lk-band));margin-inline:auto}
/* The one place vertical space between blocks is set, and it is one line. */
.uk-lk-body > * + *{margin-top:var(--lk-l1)}

/* THE SECTION MARK. The folio number of the section and its name, in small caps
   and the one accent, set solid on a single line of the grid. This is the whole of
   this family's label vocabulary. */
.uk-lk-mark{display:flex;align-items:baseline;gap:14px;margin:0;height:var(--lk-l1);
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--lk-accent)}
.uk-lk-mark b{font-weight:600;font-variant-numeric:tabular-nums}
.uk-lk-mark em{font-style:normal;color:var(--lk-accent)}

/* Headings are clamped in SIZE and fixed in LEADING: two lines of a title are two
   units tall whether the clamp resolved to 20px or 30px. */
.uk-lk-title{max-width:var(--lk-measure);font-family:var(--lk-display);color:var(--lk-ink);
  font-size:clamp(20px,4.8vw,26px);line-height:var(--lk-l1);text-wrap:balance}
.uk-lk-title.is-sm{font-size:clamp(16px,3.2vw,19px)}
.uk-lk-copy,.uk-lk-lead{max-width:var(--lk-measure);color:var(--lk-quiet)}
.uk-lk-lead{font-family:var(--lk-display);font-size:18px;color:var(--lk-ink)}
.uk-lk-copy{font-size:15px}

/* WHAT THE GUEST MUST ACT ON — account numbers, an address — is set into the leaf,
   the one tone this family has besides the sheet. Its ring is a box-shadow and not
   a border: a border is 2px of layout on a block that sits in the flow, and 2px is
   not a line. Its vertical padding is one line top and bottom. */
/* IT TAKES THE BAND, NOT THE MEASURE. The measure is for prose — a line of
   reading that must not run to 100 characters. This panel holds labels and short
   values side by side, and capping it at the measure left a third of the band
   empty beside it on every desktop screen. */
.uk-lk-seam{padding:var(--lk-l1) 18px;
  box-shadow:inset 0 0 0 1px var(--lk-rule);background:var(--lk-leaf);
  font-family:var(--lk-sans);font-size:15px;color:var(--lk-ink)}
.uk-lk-seam dt,.uk-lk-seam .uk-lk-row-mark{margin:0;height:var(--lk-l1);
  font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--lk-accent)}
.uk-lk-seam dd{margin:0 0 var(--lk-l1);color:var(--lk-ink)}
.uk-lk-seam dd:last-child{margin-bottom:0}
.uk-lk-seam dd strong{display:block;font-weight:600;color:var(--lk-ink)}
/* :where() AROUND THE WHOLE DESCENDANT PART, not around the span alone. As
   ".uk-XX-seam dd span" this is (0,2,1) and outranks the component class of anything placed inside a
   dd — the row of action buttons in this very panel is a <span class="actions">,
   and it was laid out as a BLOCK with its row gap dead, in both this family and
   the one before it, while looking close enough to correct to survive a read and
   a screenshot. Measured: computed display block where the component says flex.
   Wrapping only the span leaves the dd behind and the rule is still (0,1,1),
   which still wins — the first fix measured exactly as broken as the bug. */
.uk-lk-seam :where(dd span){display:block;color:var(--lk-quiet);font-size:13px}
.uk-lk-seam .uk-lk-actions{margin-top:var(--lk-l1)}

/* THE FOLIO — this family's way through, and it does not LIST. A book sets its
   contents once, near the front, as a real part of the document, and every page
   after it carries a folio that tells you where you are. This one adds the only
   thing a paper folio cannot: press it and you are back at the contents.
   It is fixed, so it costs the grid nothing. */
.uk-lk-folio{position:fixed;z-index:26;right:var(--lk-pad);
  bottom:calc(var(--lk-l1) + env(safe-area-inset-bottom));
  display:flex;align-items:baseline;gap:9px;height:var(--lk-l2);padding:0 14px;
  border:1px solid var(--lk-rule);border-radius:var(--lk-radius);background:var(--lk-paper);
  color:var(--lk-accent);cursor:pointer;box-shadow:0 2px 10px var(--lk-deep);
  font-family:var(--lk-display);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none}
.uk-lk-folio b{font-weight:600;font-variant-numeric:tabular-nums}
.uk-lk-folio span{color:var(--lk-quiet);text-transform:none;letter-spacing:.02em;
  font-size:13px;max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* THE CONTENTS, set once and in the flow — not pinned, not floating, not a panel
   that opens. It is part of the document the way it is part of a book, and the
   folio is what gets you back to it. Each row is exactly one line tall, which is
   what makes a contents page look like one. */
.uk-lk-contents{margin:0;padding:0;list-style:none}
.uk-lk-contents li{position:relative;display:grid;
  grid-template-columns:minmax(0,1fr) 2.8em;column-gap:14px;align-items:baseline;
  height:var(--lk-l1)}
.uk-lk-contents a{display:contents;color:var(--lk-ink);text-decoration:none}
/* The number sits at the RIGHT, after the leader, which is where a contents page
   has always put it. The section's own mark carries the same number at the left,
   in front of its name, which is where a running head has always put it. They are
   the same number from the same counter; only the convention differs. */
.uk-lk-contents b{font-weight:400;font-variant-numeric:tabular-nums;color:var(--lk-accent);
  font-size:13px;letter-spacing:.1em;text-align:right}
/* The leader: the row of dots a contents page runs out from the title. It is drawn
   by the row, in the overflow of a single line of text, so it is as long as the
   gap and never longer. */
.uk-lk-contents span{overflow:hidden;white-space:nowrap;font-size:14px}
.uk-lk-contents span::after{
  content:" ....................................................................";
  color:var(--lk-rule);letter-spacing:.14em}
.uk-lk-contents li.is-here b{font-weight:600}
.uk-lk-contents li.is-here span{color:var(--lk-accent)}

/* GATE: a title page -------------------------------------------------------
   The names, a rule, the date and one button. There is no device behind it
   because this family has no device; what it has is setting, and a title page is
   where setting is most visible. */
.uk-lk-gate{position:fixed;inset:0;z-index:40;display:grid;place-items:center;
  padding:var(--lk-l1) 0;overflow:hidden;
  background:var(--lk-paper);color:var(--lk-ink);transition:opacity .7s ease,visibility .7s ease}
.uk-lk-gate.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.uk-lk-gate-stage{position:relative;display:grid;place-items:center;width:100%}
.uk-lk-gate-panel{position:relative;z-index:2;display:grid;grid-template-rows:auto auto;
  overflow:hidden;width:min(100% - 40px,460px);background:var(--lk-paper);
  box-shadow:inset 0 0 0 1px var(--lk-rule)}
.uk-lk-portrait{position:relative;height:calc(var(--lk-line) * 9);overflow:hidden;background:var(--lk-leaf)}
.uk-lk-portrait img{width:100%;height:100%;object-fit:cover;
  object-position:var(--lk-focus-mobile-x,50%) var(--lk-focus-mobile-y,38%)}
.uk-lk-gate-body{position:relative;padding:var(--lk-l1) 22px var(--lk-l1);text-align:center}
.uk-lk-gate-body > * + *{margin-top:var(--lk-l1)}
.uk-lk-gate-names{font-size:clamp(25px,6.8vw,36px);line-height:var(--lk-l2)}
/* The date is set between two rules, which is what a title page does with a date.
   The rules are drawn by the pseudo-elements of a flex row, so they cost nothing
   vertically. */
.uk-lk-gate-date{display:flex;align-items:center;justify-content:center;gap:14px;
  height:var(--lk-l1);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lk-quiet)}
.uk-lk-gate-date::before,.uk-lk-gate-date::after{content:"";flex:1 1 auto;max-width:56px;
  height:1px;background:var(--lk-rule)}
.uk-lk-couple-list{display:grid;gap:var(--lk-l1)}
.uk-lk-couple-list span{display:grid}
.uk-lk-couple-list small{height:var(--lk-l1);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--lk-accent)}
.uk-lk-couple-list strong{font-family:var(--lk-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 instead of centred beneath it. */
.uk-lk-gate-open{display:flex;width:fit-content;margin-inline:auto;padding:0 26px;
  border-color:transparent;background:var(--lk-ink);color:var(--lk-paper);font-size:14px}
/* WHAT THE GATE DOES: the title page is lifted away by exactly one line and
   fades. One line is this family's whole motion vocabulary — the same distance
   every section arrives over — and the gate is that one gesture at the scale of
   the sheet. */
.uk-lk-gate.is-drawn .uk-lk-gate-panel{animation:uk-lk-settle .8s cubic-bezier(.3,.9,.3,1) forwards}
@keyframes uk-lk-settle{
  from{transform:translateY(0);opacity:1}
  to{transform:translateY(calc(var(--lk-line) * -1));opacity:0}}

/* COVER -------------------------------------------------------------------
   The one screen with a photograph on it, so the one screen that carries a dark
   register of its own — sheet and ink together, so a palette can never leave the
   names the colour of the scrim behind them.

   AND THE ONE BLOCK CUT TO THE LINE FROM THE WINDOW. 100svh is not a whole number
   of lines, so a cover that took the window's height would put every section after
   it off the grid by the remainder, on that device only and invisibly. The cover
   is cut DOWN to the last whole line that fits. */
.uk-lk-cover{--lk-paper:#171510;--lk-leaf:#0D0B07;--lk-ink:#F5F0E3;--lk-quiet:#BAB29A;
  --lk-accent:#EDAB7B;
  --lk-rule:rgba(245,240,227,.24);--lk-deep:rgba(0,0,0,.5);
  position:relative;display:grid;min-height:100svh;background:var(--lk-paper);color:var(--lk-ink)}
@supports (height:round(down,100px,7px)){
  .uk-lk-cover{min-height:round(down,100svh,var(--lk-line))}
}
.uk-lk-cover-media{position:absolute;inset:0;overflow:hidden}
.uk-lk-cover-image{width:100%;height:100%;object-fit:cover;
  object-position:var(--lk-focus-mobile-x,50%) var(--lk-focus-mobile-y,38%)}
.uk-lk-cover-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(23,21,16,.26) 0%,rgba(23,21,16,.78) 58%,#171510 100%)}
.uk-lk-cover-empty{position:absolute;inset:0;display:grid;place-items:center;background:#1D1A13}
.uk-lk-cover-empty-tone{position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(245,240,227,.1),transparent 60%)}
.uk-lk-cover-empty-mark{position:relative;display:grid;place-items:center;
  height:var(--lk-l2);padding:0 18px;box-shadow:inset 0 0 0 1px var(--lk-rule);
  font-family:var(--lk-display);font-size:22px;letter-spacing:.2em;color:var(--lk-ink)}
.uk-lk-cover-panel{position:relative;align-self:end;
  padding:var(--lk-l2) var(--lk-pad) var(--lk-l2);text-align:center}
.uk-lk-cover-panel > * + *{margin-top:var(--lk-l1)}
.uk-lk-cover-panel .uk-lk-title{margin-inline:auto;font-size:clamp(28px,8vw,46px);
  line-height:var(--lk-l2)}
.uk-lk-cover-date{display:flex;align-items:center;justify-content:center;gap:14px;
  height:var(--lk-l1);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lk-quiet)}
.uk-lk-cover-date::before,.uk-lk-cover-date::after{content:"";flex:1 1 auto;max-width:56px;
  height:1px;background:var(--lk-rule)}
/* The cover's monogram. NOT .uk-lk-mark: that name belongs to the section marks in
   the flow, and a second rule under the same name with the same specificity would
   silently turn every one of them into this box. Two lines square. */
.uk-lk-monogram{display:grid;place-items:center;width:var(--lk-l2);height:var(--lk-l2);
  margin-inline:auto;box-shadow:inset 0 0 0 1px var(--lk-rule);
  font-family:var(--lk-display);font-size:14px;letter-spacing:.16em;color:var(--lk-accent)}

/* People ------------------------------------------------------------------- */
.uk-lk-people{display:grid;gap:var(--lk-l1)}
.uk-lk-person{display:flex;align-items:flex-start;gap:14px}
/* Three lines across, so a portrait displaces exactly three lines of the page. */
.uk-lk-portrait-round{flex:0 0 auto;width:var(--lk-l3);height:var(--lk-l3);overflow:hidden;
  border-radius:50%;background:var(--lk-leaf);box-shadow:inset 0 0 0 1px var(--lk-rule)}
.uk-lk-portrait-round img{width:100%;height:100%;object-fit:cover}
.uk-lk-portrait-round.is-empty{display:grid;place-items:center}
.uk-lk-portrait-round.is-empty span{font-family:var(--lk-display);font-size:24px;color:var(--lk-accent)}
.uk-lk-person h4{font-size:19px}
.uk-lk-person > div > strong{display:block;height:var(--lk-l1);font-size:14px;font-weight:600;
  color:var(--lk-accent)}
.uk-lk-parents{color:var(--lk-quiet);font-size:14px}
.uk-lk-parents span{display:block;height:var(--lk-l1);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase}
.uk-lk-parents em{font-style:normal;padding:0 5px;color:var(--lk-accent)}
.uk-lk-bio{color:var(--lk-quiet);font-size:14px}
.uk-lk-chapter{margin-top:var(--lk-l1)}
.uk-lk-chapter > * + *{margin-top:var(--lk-l1)}
.uk-lk-couple-index{display:flex;flex-wrap:wrap;column-gap:8px}
.uk-lk-couple-index button{display:inline-flex;align-items:center;gap:8px;
  height:var(--lk-l2);padding:0 14px;border:1px solid var(--lk-rule);
  border-radius:var(--lk-radius);background:transparent;cursor:pointer}
.uk-lk-couple-index button span{font-family:var(--lk-display);font-size:11px;
  letter-spacing:.12em;color:var(--lk-accent)}
.uk-lk-couple-index button.is-active{border-color:var(--lk-ink);
  box-shadow:inset 0 0 0 1px var(--lk-ink)}

/* Rows, events, streams ----------------------------------------------------
   A list of rows is a set page's table: each row separated by a hairline that is
   drawn, not laid out, so a list of nine rows is a whole number of lines tall. */
.uk-lk-rows{list-style:none;display:grid;margin:0;padding:0}
.uk-lk-row{position:relative;display:grid}
.uk-lk-row + .uk-lk-row{margin-top:var(--lk-l1)}
.uk-lk-row + .uk-lk-row::before{content:"";position:absolute;left:0;right:0;
  top:calc(var(--lk-l1) * -.5);height:1px;background:var(--lk-rule)}
.uk-lk-row-mark{height:var(--lk-l1);font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lk-accent)}
.uk-lk-row > div > * + *{margin-top:var(--lk-l1)}
.uk-lk-events{display:grid}
.uk-lk-event{position:relative;display:grid}
.uk-lk-event + .uk-lk-event{margin-top:var(--lk-l1)}
.uk-lk-event + .uk-lk-event::before{content:"";position:absolute;left:0;right:0;
  top:calc(var(--lk-l1) * -.5);height:1px;background:var(--lk-rule)}
.uk-lk-event > div > * + *{margin-top:var(--lk-l1)}
.uk-lk-scope{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;min-height:var(--lk-l1);
  font-size:12px;color:var(--lk-quiet)}
.uk-lk-scope strong{font-weight:600;color:var(--lk-accent);letter-spacing:.08em;
  text-transform:uppercase;font-size:11px}
/* Seven lines of map. Cut to the line like a plate, for the same reason. */
.uk-lk-map{width:100%;height:calc(var(--lk-line) * 7);border:0;
  box-shadow:inset 0 0 0 1px var(--lk-rule)}
.uk-lk-actions{display:flex;flex-wrap:wrap;column-gap:8px}
.uk-lk-streams{display:grid;gap:var(--lk-l1)}
.uk-lk-stream{position:relative;display:flex;align-items:center;gap:12px;
  height:var(--lk-l2);padding:0 14px;box-shadow:inset 0 0 0 1px var(--lk-rule);
  color:var(--lk-ink);text-decoration:none}
.uk-lk-stream span{display:grid;flex:1;min-width:0}
.uk-lk-stream small{font-size:12px;color:var(--lk-quiet)}

/* Countdown ----------------------------------------------------------------
   Four cells, three lines deep, separated by drawn hairlines rather than gaps
   filled with a background — a 1px gap is 1px of layout in a grid, and four
   columns of it would be fine, but the row below would not be. */
.uk-lk-count{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  box-shadow:inset 0 0 0 1px var(--lk-rule)}
.uk-lk-count div{position:relative;display:grid;align-content:center;height:var(--lk-l3);
  padding:0 8px;text-align:center}
.uk-lk-count div + div::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;
  background:var(--lk-rule)}
.uk-lk-count strong{display:block;font-family:var(--lk-display);
  font-size:clamp(22px,5.4vw,28px);line-height:var(--lk-l1);font-variant-numeric:tabular-nums}
.uk-lk-count span{height:var(--lk-l1);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--lk-quiet)}

/* PLATES ------------------------------------------------------------------
   The photographs in a book are plates, and a plate is bound in at a set depth.
   Its height is a whole number of lines and the photograph is covered into it —
   NOT aspect-ratio, which gives whatever height the width implies and is almost
   never a whole number of lines. A plate carries its number the way a plate does:
   the section's folio, then its place in the run. */
.uk-lk-swatch-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;
  height:var(--lk-l2);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--lk-quiet)}
.uk-lk-swatch-tools div{display:flex;column-gap:8px}
.uk-lk-swatch-tools button{display:grid;place-items:center;width:var(--lk-l2);height:var(--lk-l2);
  border:1px solid var(--lk-rule);border-radius:var(--lk-radius);background:transparent;cursor:pointer}
.uk-lk-swatch{position:relative;display:flex;gap:var(--lk-l1);overflow-x:auto;
  padding-bottom:var(--lk-l1);scroll-snap-type:x mandatory;scrollbar-width:none}
.uk-lk-swatch::-webkit-scrollbar{display:none}
.uk-lk-swatch-no{position:absolute;left:0;bottom:0;z-index:3;height:var(--lk-l1);
  padding:0 8px;background:var(--lk-paper);color:var(--lk-accent);
  font-family:var(--lk-display);font-size:11px;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;box-shadow:inset 0 0 0 1px var(--lk-rule)}
.uk-lk-figure{position:relative;flex:0 0 auto;width:min(64vw,236px);scroll-snap-align:start}
.uk-lk-figure img{width:100%;height:var(--lk-plate);object-fit:cover;
  background:var(--lk-leaf);box-shadow:inset 0 0 0 1px var(--lk-rule)}
.uk-lk-figure button{position:absolute;right:0;top:0;z-index:3;display:grid;place-items:center;
  width:var(--lk-l2);height:var(--lk-l2);border:0;background:var(--lk-ink);color:var(--lk-paper);
  cursor:pointer}

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

/* A fixed light surface cannot inherit tokens that flip with the palette — in the
   dark palette --lk-ink is light, so ink on this fixed light strip would measure
   near 1:1. It carries the light register locally and every rule inside goes on
   reading tokens rather than being special-cased one at a time. */
.uk-lk-feedback{--lk-paper:#EFE8D5;--lk-leaf:#E3D9BF;--lk-ink:#2C2518;--lk-quiet:#595039;
  --lk-accent:#7D4B17;--lk-rule:rgba(44,37,24,.2);
  position:relative;z-index:24;display:flex;align-items:center;gap:10px;
  width:min(calc(100% - var(--lk-pad) * 2),680px);margin:var(--lk-l1) auto 0;
  min-height:var(--lk-l2);padding:0 16px;box-shadow:inset 0 0 0 1px var(--lk-rule);
  background:var(--lk-paper);color:var(--lk-ink);font-size:14px}

/* CLOSING ------------------------------------------------------------------ */
.uk-lk-closing{position:relative;padding:var(--lk-l4) var(--lk-pad) var(--lk-l4);
  background:var(--lk-paper);color:var(--lk-ink);text-align:center;scroll-margin-top:0}
/* Centred and outside the sections, so it has no mark — 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 measure a section's prose takes. */
.uk-lk-closing-body{width:min(100%,var(--lk-measure));margin-inline:auto}
.uk-lk-closing-body > * + *{margin-top:var(--lk-l1)}
.uk-lk-closing .uk-lk-title{margin-inline:auto;font-size:clamp(23px,5.6vw,32px);
  line-height:var(--lk-l2)}
.uk-lk-closing .uk-lk-copy{margin-inline:auto}
.uk-lk-closing-share{display:flex;flex-wrap:wrap;justify-content:center;column-gap:10px}

/* Controls rail, share dialog, lightbox, toast -----------------------------
   All fixed, so none of it touches the grid. The rail carries controls only:
   nothing that jumps to a place lives up here, because the one way through this
   document is the folio and the contents it returns to. */
/* FOUR LINES UP, because the folio stands three lines tall from the foot — one
   line of clearance, then this. At three the rail button sat ON the folio's top
   corner at every width. */
.uk-lk-rail{position:fixed;right:14px;bottom:calc(var(--lk-l4) + env(safe-area-inset-bottom));
  z-index:24;display:grid;gap:8px;justify-items:center}
.uk-lk-rail-toggle,.uk-lk-rail-panel button{display:grid;place-items:center;
  width:var(--lk-l2);height:var(--lk-l2);border:1px solid rgba(245,240,227,.26);
  border-radius:50%;background:#241E13;color:#F5F0E3;cursor:pointer}
.uk-lk-rail-panel{display:grid;gap:8px;justify-items:center}
.uk-lk-dialog,.uk-lk-lightbox{position:fixed;inset:0;z-index:46;display:grid;place-items:center;
  padding:var(--lk-l1) 16px;background:rgba(15,13,8,.9);opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease}
.uk-lk-dialog.is-open,.uk-lk-lightbox.is-open{opacity:1;visibility:visible}
/* Same reason as the feedback strip: a fixed light panel declares the light
   register and then reads it, rather than repeating hex values that drift apart
   the first time one of them is edited. */
.uk-lk-dialog-panel{--lk-paper:#EFE8D5;--lk-leaf:#E3D9BF;--lk-ink:#2C2518;--lk-quiet:#595039;
  --lk-accent:#7D4B17;--lk-rule:rgba(44,37,24,.2);
  width:min(100%,430px);padding:var(--lk-l1) 22px;box-shadow:inset 0 0 0 1px var(--lk-ink);
  background:var(--lk-paper);color:var(--lk-ink)}
.uk-lk-dialog-panel > * + *{margin-top:var(--lk-l1)}
.uk-lk-dialog-panel h2{font-size:21px}
.uk-lk-share-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:9px}
.uk-lk-share-grid button{display:flex;align-items:center;gap:8px;height:var(--lk-l2);
  padding:0 13px;border:1px solid var(--lk-rule);border-radius:var(--lk-radius);
  background:transparent;color:inherit;cursor:pointer;font-size:13px}
.uk-lk-dialog-close{width:100%}
.uk-lk-lightbox-panel{position:relative;width:min(100%,780px)}
.uk-lk-lightbox-panel img{width:100%;max-height:76svh;object-fit:contain;transition:opacity .2s ease}
.uk-lk-lightbox.is-switching .uk-lk-lightbox-panel img{opacity:0}
.uk-lk-lightbox-counter{margin-top:var(--lk-l1);color:#F5F0E3;font-size:12px;
  letter-spacing:.16em;text-align:center}
.uk-lk-lightbox-close,.uk-lk-lightbox-prev,.uk-lk-lightbox-next{position:absolute;display:grid;
  place-items:center;width:var(--lk-l2);height:var(--lk-l2);border:0;border-radius:50%;
  background:#241E13;color:#F5F0E3;cursor:pointer}
.uk-lk-lightbox-close{top:calc(var(--lk-l2) * -1);right:0}
.uk-lk-lightbox-prev{left:6px;top:50%;transform:translateY(-50%)}
.uk-lk-lightbox-next{right:6px;top:50%;transform:translateY(-50%)}
.uk-lk-toast{position:fixed;left:50%;bottom:calc(var(--lk-l1) + env(safe-area-inset-bottom));
  z-index:48;transform:translate(-50%,14px);opacity:0;height:var(--lk-l2);padding:0 18px;
  display:grid;align-content:center;background:#241E13;color:#F5F0E3;font-size:13px;
  pointer-events:none;transition:opacity .3s ease,transform .3s ease}
.uk-lk-toast.is-visible{opacity:1;transform:translate(-50%,0)}

/* MOTION: THE PAGE SETTLES BY EXACTLY ONE LINE -----------------------------
   The whole motion vocabulary of this family is one number, and it is the same
   number as the grid: a section arrives one line above where it belongs and comes
   down onto the line. Not a distance chosen for the look of it — a distance that
   is the unit the page is set in, which is why nothing here is measured in
   pixels, percentages or viewport units.

   ONE rule declares the lift. Written as one rule per state it would be two
   classes each, and the single-class rule that puts a section back on the line
   would lose — so every section would stand one line high for good, with each
   rule still reading as correct. That is not a guess: a release two families back
   shipped exactly that fault, and its contract is still in this suite. */
.uk-lk-reveal{opacity:0;transition:opacity .5s ease,transform .6s cubic-bezier(.22,.78,.2,1)}
.uk-lk-body.uk-lk-reveal,.uk-lk-cover.uk-lk-reveal,.uk-lk-closing.uk-lk-reveal{
  transform:translateY(calc(var(--lk-line) * -1))}
/* THE FOLIO CARRIES NO REVEAL. It is the only way through the document, and a
   navigation that starts at opacity 0 is a navigation missing at the moment the
   reader first needs it. */
.uk-lk-reveal.is-visible{opacity:1;transform:none}
/* Inside a section the blocks come down in order, one after another, each delayed
   by --lk-lag. The distance is still one line; what the motion control changes is
   whether they arrive together or in sequence. */
.uk-lk-reveal-item{opacity:0;transform:translateY(calc(var(--lk-line) * -1));
  transition:opacity .48s ease var(--lk-lag,0ms),transform .48s ease var(--lk-lag,0ms)}
.uk-lk-reveal.is-visible .uk-lk-reveal-item{opacity:1;transform:none}

/* Design controls ---------------------------------------------------------- */
/* "Template" is the template's OWN colours, so it restates the tokens at the top
   of this file rather than a near-miss of them. Every palette declares every
   token: a palette that sets four of them and leaves the accent behind leaves that
   accent at the template's value, which in the dark palette is the one colour
   nobody looked at. */
.uk-design-palette-template.uk-larik{--lk-paper:#FBF5E6;--lk-leaf:#F0E7D1;--lk-ink:#1F1B12;--lk-quiet:#554C3B;--lk-accent:#7B3215;--lk-rule:rgba(31,27,18,.22);--lk-deep:rgba(31,27,18,.34)}
.uk-design-palette-warm.uk-larik{--lk-paper:#FDF3DF;--lk-leaf:#F2E4C3;--lk-ink:#271F0D;--lk-quiet:#625435;--lk-accent:#8B4A07;--lk-rule:rgba(39,31,13,.22);--lk-deep:rgba(39,31,13,.34)}
.uk-design-palette-romantic.uk-larik{--lk-paper:#FBEFE9;--lk-leaf:#F0DBD0;--lk-ink:#2E1E19;--lk-quiet:#6A4639;--lk-accent:#96333C;--lk-rule:rgba(46,30,25,.22);--lk-deep:rgba(46,30,25,.34)}
.uk-design-palette-sage.uk-larik{--lk-paper:#EDF2E7;--lk-leaf:#DCE5D1;--lk-ink:#1A2615;--lk-quiet:#4B5838;--lk-accent:#1D5245;--lk-rule:rgba(26,38,21,.22);--lk-deep:rgba(26,38,21,.34)}
/* The same setting read after dark. Sheet and ink flip together in one rule, so
   nothing is left the colour of what is behind it, and the rule — which is an
   rgba of the INK — becomes light on a dark sheet, which a fixed dark rgba never
   could. */
.uk-design-palette-midnight.uk-larik{--lk-paper:#1A1812;--lk-leaf:#0F0D08;--lk-ink:#F4EFE1;--lk-quiet:#B7AF97;--lk-accent:#E8A572;--lk-rule:rgba(244,239,225,.2);--lk-deep:rgba(0,0,0,.58)}

.uk-design-type-classic .uk-lk-title,.uk-design-type-classic .uk-lk-gate-names{font-family:var(--lk-display)}
.uk-design-type-modern .uk-lk-title,.uk-design-type-modern .uk-lk-gate-names{font-family:var(--lk-sans);letter-spacing:.02em}
/* A bigger title is a bigger SIZE, never a bigger leading: the leading is the
   grid. Two lines of an editorial title are still two units tall. */
.uk-design-type-editorial .uk-lk-title{font-size:clamp(23px,5.6vw,31px);letter-spacing:-.01em}
.uk-design-type-editorial .uk-lk-cover-panel .uk-lk-title{font-size:clamp(31px,8.8vw,52px);letter-spacing:-.02em}

/* COMPOUND, not descendant. The design classes are printed onto the SAME element
   as .uk-larik, so ".uk-design-surface-soft .uk-larik" asks for a root inside a
   root and matches nothing: measured in nine shipped releases, all three presets
   left their tokens where the root put them and moved nothing at all.
   Here SURFACE IS THE LEADING ITSELF. In a family where every vertical value is a
   multiple of one number, that number is the only surface control worth having —
   it re-sets the whole document at once, section spacing, plate depth, portrait
   diameter and control height together, and it cannot leave anything behind
   because there is nothing else to leave. 26px keeps a two-line control at 52px,
   which is still over the touch minimum. */
.uk-design-surface-soft.uk-larik{--lk-line:30px}
.uk-design-surface-balanced.uk-larik{--lk-line:28px}
.uk-design-surface-sharp.uk-larik{--lk-line:26px}

/* The gallery presets are descendants of the root, which is where the design class
   is printed, so these selectors do match. A plate's depth stays a whole number of
   lines in every one of them; what changes is how many lines deep and how much of
   the page each takes. */
.uk-design-gallery-grid.uk-larik{--lk-plate:calc(var(--lk-line) * 6)}
.uk-design-gallery-grid .uk-lk-figure{width:min(48vw,176px)}
.uk-design-gallery-filmstrip.uk-larik{--lk-plate:calc(var(--lk-line) * 8)}
.uk-design-gallery-filmstrip .uk-lk-figure{width:min(64vw,236px)}
.uk-design-gallery-editorial.uk-larik{--lk-plate:calc(var(--lk-line) * 10)}
.uk-design-gallery-editorial .uk-lk-figure{width:min(84vw,330px)}

/* MOTION CHANGES THE ORDER, NOT THE DISTANCE. The distance is one line, which is
   the signature; a preset that assigned the distance outright would be a preset
   that overwrote the identity. So soft brings a section's blocks down together,
   cinematic brings them down one after another — the lag is per block, set in the
   markup's own order — and minimal does not move at all.
   These three previously set --lk-settle and --lk-travel, which no rule in this
   file reads: the soft and cinematic presets were byte-for-byte the same page. */
.uk-design-motion-soft.uk-larik{--lk-lag-step:40ms}
.uk-design-motion-cinematic.uk-larik{--lk-lag-step:110ms}
.uk-design-motion-minimal.uk-larik{--lk-lag-step:0ms}
.uk-lk-reveal-item:nth-child(2){--lk-lag:calc(var(--lk-lag-step) * 1)}
.uk-lk-reveal-item:nth-child(3){--lk-lag:calc(var(--lk-lag-step) * 2)}
.uk-lk-reveal-item:nth-child(4){--lk-lag:calc(var(--lk-lag-step) * 3)}
.uk-lk-reveal-item:nth-child(n+5){--lk-lag:calc(var(--lk-lag-step) * 4)}
/* And stillness is not a short lift, it is NO lift: a section left part-way up is
   a page that never finished settling, which on a machine that asked for no
   motion is a document stuck mid-gesture. */
.uk-design-motion-minimal .uk-lk-reveal,
.uk-design-motion-minimal .uk-lk-body.uk-lk-reveal,
.uk-design-motion-minimal .uk-lk-cover.uk-lk-reveal,
.uk-design-motion-minimal .uk-lk-closing.uk-lk-reveal,
.uk-design-motion-minimal .uk-lk-reveal-item{opacity:1;transform:none;transition:none}
.uk-design-motion-minimal .uk-lk-gate.is-drawn .uk-lk-gate-panel{animation:none}

/* Wider viewports ---------------------------------------------------------- */
@media(min-width:760px){
/* The font size goes up and the LINE DOES NOT. That is deliberate and it is the
   whole discipline: a set page does not re-lead itself because the window grew.
   16px in 28 becomes 17px in 28 — slightly tighter, still set. */
.uk-larik{font-size:17px;--lk-band:calc(var(--lk-line) * 25)}
/* The band is sized on the WIDER of the two, so a side-by-side block has somewhere
   to go and the prose still starts where it always did. */
.uk-lk-sec{padding-inline:max(var(--lk-pad),calc((100% - var(--lk-band)) / 2))}
.uk-lk-portrait{height:calc(var(--lk-line) * 10)}
.uk-lk-portrait img,.uk-lk-cover-media .uk-lk-cover-image{
  object-position:var(--lk-focus-desktop-x,50%) var(--lk-focus-desktop-y,42%)}
.uk-lk-cover-panel{padding:var(--lk-l3) var(--lk-pad) var(--lk-l3)}
.uk-lk-gate-panel{width:min(100% - 48px,540px)}
.uk-lk-closing{padding:calc(var(--lk-line) * 6) var(--lk-pad) calc(var(--lk-line) * 6)}
.uk-lk-people{gap:var(--lk-l1) 26px;grid-template-columns:repeat(2,minmax(0,1fr))}
/* An odd last person takes the row and is centred, so a pair never ends with
   somebody hanging in the left column — capped, because one portrait stretched
   across a desktop page is a banner. */
.uk-lk-people>*:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:min(100%,400px)}
.uk-lk-portrait-round{width:var(--lk-l4);height:var(--lk-l4)}
}
@media(min-width:1100px){
.uk-lk-closing{padding:calc(var(--lk-line) * 7) var(--lk-pad) calc(var(--lk-line) * 7)}
}

/* Narrow phones ------------------------------------------------------------ */
@media(max-width:400px){
.uk-lk-count{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Two columns means two rows, and the hairline between the columns must not be
   drawn down the first cell of the second row. */
.uk-lk-count div:nth-child(odd)::before{display:none}
}
@media(max-width:560px){
.uk-lk-share-grid{grid-template-columns:minmax(0,1fr)}
.uk-lk-lightbox-close{top:auto;bottom:calc(var(--lk-l2) * -1);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-lk-cover-panel{padding:var(--lk-l1) var(--lk-pad) var(--lk-l1)}
.uk-lk-cover-panel .uk-lk-title{font-size:clamp(21px,5vw,28px);line-height:var(--lk-l1)}
.uk-lk-cover-empty-mark{font-size:17px}
.uk-lk-portrait{height:calc(var(--lk-line) * 5)}
.uk-lk-gate-names{font-size:clamp(19px,4.2vw,24px);line-height:var(--lk-l1)}
.uk-lk-rail{bottom:calc(var(--lk-l3) + env(safe-area-inset-bottom))}
}
@media(max-height:620px) and (min-width:1025px){
.uk-lk-portrait{height:calc(var(--lk-line) * 7)}
}

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