/* Pelat — Romance Flagship 1.0.0
 * A printed invitation of any weight goes through the press twice: once for each
 * ink, and the two impressions have to REGISTER — land exactly on top of one
 * another. The two plates here are not decoration. They are the two voices that
 * are in every wedding invitation ever written:
 *
 *   PLATE ONE  — what the couple SAY. Salam, names, parents, the story, the
 *                photographs, the thanks at the end.
 *   PLATE TWO  — what the guest has to DO. Where, when, what to wear, which
 *                account, how to confirm, whom to call.
 *
 * ONE DECISION: whose voice a line is. It decides the ink it is printed in, the
 * face it is set in, how wide its measure is, and which plate it appears on when
 * the two are pulled apart. Written as four decisions they part company the first
 * time a section is edited, and each one still reads as correct on its own.
 *
 * AND THE READER CAN PRINT ONE PLATE. That is not a filter bolted on: it is what
 * having two plates MEANS. A guest who needs only the practical sheet takes plate
 * two and gets every place, time and account on one screen.
 *
 * Things here that are easy to get wrong and invisible in a stylesheet read.
 *
 *   A SECOND INK TOO LIGHT TO SET TEXT IN. Plate two is not an accent: whole
 *   blocks of the invitation are printed in it. Measured, it has to clear 4.5:1
 *   on the stock as body copy, not as a highlight.
 *
 *   FURNITURE IN THE MESSAGE'S COLOUR. The registration marks and form numbers
 *   are not part of either plate. Printed in an ink they read as content, and the
 *   sheet stops being a press sheet.
 *
 *   AND A ONE-PLATE VIEW THAT LEAVES EMPTY FORMS BEHIND. A form with nothing on
 *   plate two has to fold down to its title when plate two is printed alone.
 *   Left at full height it is a screen of nothing between two useful ones.
 */

/* Tokens ------------------------------------------------------------------- */
.uk-pelat{
  /* The stock, and the two inks it is printed in. The second ink is a working
     ink, not an accent: whole blocks are set in it, so it is dark enough to read
     as body copy rather than as a highlight. */
  --pl-stock:#F4F1E8;
  --pl-a:#22201B;        /* plate one — what the couple say */
  --pl-b:#7A2318;        /* plate two — what the guest has to do */
  --pl-soft:#5A5446;     /* plate one, quieter */
  /* FURNITURE is not either plate: registration marks, form numbers, ink names.
     Put in an ink they read as content and the sheet stops being a press sheet. */
  --pl-furniture:#6B6553;
  --pl-rule:rgba(34,32,27,.18);
  --pl-deep:rgba(34,32,27,.34);
  --pl-edge:#C2B79E;
  --pl-radius:3px;--pl-radius-sm:2px;--pl-measure:34em;--pl-measure-b:26em;

  /* THE ONE PLACE THESE SIZES ARE DECIDED. The surface preset sets the unit and
     the viewport sets the step, and the size is their product — so neither ever
     overrules the other. Written as two rules both declaring --pl-margin, the
     preset (two classes) silently beats the media query (one), and the wider
     screen never widens. */
  --pl-step:1;
  --pl-margin-u:40px;    /* the furniture margin, where the register marks sit */
  --pl-gap-u:12px;
  --pl-pad-u:16px;
  --pl-inset-u:11px;     /* how far a plate-two block is set in from its rule */
  --pl-margin:calc(var(--pl-margin-u) * var(--pl-step));
  --pl-gap:calc(var(--pl-gap-u) * var(--pl-step));
  --pl-pad:calc(var(--pl-pad-u) * var(--pl-step));
  --pl-inset:calc(var(--pl-inset-u) * var(--pl-step));
  --pl-settle:18px;
  --pl-gal-gap:10px;
  --pl-display:"Lora",Georgia,Cambria,"Times New Roman",serif;
  --pl-sans:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  position:relative;min-height:100svh;background:var(--pl-stock);color:var(--pl-a);
  font-family:var(--pl-sans);font-size:16px;line-height:1.65;
  --pl-docket-h:48px;    /* the pinned height of the docket, and what anchors clear */
  -webkit-font-smoothing:antialiased;
  /* CLIP, NOT HIDDEN, AND THE DOCKET DEPENDS ON IT. 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 the docket
     would ride away up the page with nothing in any stylesheet looking wrong.
     Measured: with hidden, the docket sits 400px above the viewport after 400px of
     scroll; with clip, it holds 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-pelat{overflow-x:clip}}

[hidden]{display:none !important}
.uk-pelat *,.uk-pelat *::before,.uk-pelat *::after{box-sizing:border-box}
.uk-pelat 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-pelat figure{margin:0}
.uk-pelat h1,.uk-pelat h2,.uk-pelat h3,.uk-pelat h4{font-family:var(--pl-display);font-weight:600;line-height:1.24;margin:0}
.uk-pelat p{margin:0}
/* :where() so this stays a DEFAULT. As ".uk-pelat 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-pelat :where(button){font-family:inherit;color:inherit}

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

/* THE SHEET ----------------------------------------------------------------
   Two columns for the whole document: the FURNITURE margin, where the
   registration marks and form numbers sit, and the message. Every form is a row
   of that one grid rather than a box of its own, so the register marks line up
   down a single column from the first form to the last — which is what a printer
   looks at to see that the two impressions landed on top of each other. */
.uk-pl-sheet{position:relative;display:grid;
  grid-template-columns:var(--pl-margin) minmax(0,1fr);
  column-gap:var(--pl-gap);padding-right:var(--pl-pad);background:var(--pl-stock)}
.uk-pl-sheet > *{grid-column:1/-1}

/* A FORM: one section as it comes off the press. */
.uk-pl-form{position:relative;display:grid;grid-template-columns:subgrid;
  grid-column:1/-1;align-items:start;padding:22px 0;
  /* Every anchor has to clear the pinned docket, or choosing a form from the docket
     lands that form's head underneath it. */
  scroll-margin-top:calc(var(--pl-docket-h) + 14px)}
/* The two engagement forms are anchored by the platform, inside the form, so the
   rule above never reaches them — they need the same clearance by their own ids. */
.uk-pelat #rsvp,.uk-pelat #wishes{scroll-margin-top:calc(var(--pl-docket-h) + 14px)}
.uk-pl-form + .uk-pl-form{border-top:1px solid var(--pl-rule)}

/* THE FURNITURE. Never in either ink: a register mark printed in the message's
   colour reads as part of the message, and the sheet stops being a press sheet. */
.uk-pl-furniture{grid-column:1;margin:0;color:var(--pl-furniture);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;
  font-weight:600;letter-spacing:.12em;line-height:1.5;text-align:center}
.uk-pl-furniture b{display:block;font-weight:600;font-size:11px}
.uk-pl-furniture em{display:block;font-style:normal;opacity:.85}
/* THE REGISTRATION MARK: a cross in a circle, the thing a printer lines up. */
.uk-pl-reg{position:relative;display:block;width:18px;height:18px;margin:0 auto 5px}
.uk-pl-reg::before,.uk-pl-reg::after{content:"";position:absolute;background:currentColor}
.uk-pl-reg::before{left:50%;top:0;bottom:0;width:1px;margin-left:-.5px}
.uk-pl-reg::after{top:50%;left:0;right:0;height:1px;margin-top:-.5px}
.uk-pl-reg i{position:absolute;inset:4px;border:1px solid currentColor;border-radius:50%}

.uk-pl-body{grid-column:2;min-width:0}
.uk-pl-body > * + *{margin-top:10px}

/* ---- PLATE ONE: what the couple say. ------------------------------------
   Their ink, the book face, the full measure. */
.uk-pl-title{font-family:var(--pl-display);color:var(--pl-a);
  font-size:clamp(21px,5.2vw,28px);line-height:1.22;text-wrap:balance}
.uk-pl-title.is-sm{font-size:clamp(17px,3.4vw,20px)}
.uk-pl-copy,.uk-pl-lead{max-width:var(--pl-measure);color:var(--pl-soft)}
.uk-pl-lead{font-family:var(--pl-display);font-size:19px;color:var(--pl-a)}
.uk-pl-copy{font-size:15px}

/* ---- PLATE TWO: what the guest has to DO. -------------------------------
   The second ink, the working face, a narrower measure, and a rule down the
   side saying where the second impression begins. One class carries all four,
   so the ink can never disagree with the face or with what the one-plate view
   shows. */
.uk-pl-do{max-width:var(--pl-measure-b);margin-top:14px;
  padding-left:var(--pl-inset);border-left:2px solid var(--pl-b);
  font-family:var(--pl-sans);font-size:15px;color:var(--pl-b)}
.uk-pl-do dt,.uk-pl-do .uk-pl-row-mark{margin:0 0 3px;
  font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--pl-b)}
.uk-pl-do dd{margin:0 0 10px;color:var(--pl-b)}
.uk-pl-do dd:last-child{margin-bottom:0}
.uk-pl-do dd strong{display:block;font-weight:600;color:var(--pl-b)}
.uk-pl-do dd span{display:block;color:var(--pl-soft);font-size:13px}
.uk-pl-do .uk-pl-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
/* A control inside a plate-two block was printed from plate two, so it carries
   that ink. Left in the plate-one accent it says the button is the couple
   speaking, which is the one thing it is not. */
.uk-pl-do .uk-pl-button{border-color:var(--pl-b);color:var(--pl-b)}
.uk-pl-do .uk-pl-button.is-solid{background:var(--pl-b);color:var(--pl-stock)}

/* THE JOB TICKET — the docket at the head of a press sheet, listing the forms on
   it and the plates each was printed from. It is this template's index, it is a ROW
   OF THE SHEET rather than a thing laid over it, and it STICKS: it stops at the
   head of the screen instead of scrolling away.

   Why it changed. Parked at the head of the document it was reachable from exactly
   one scroll position — the top — and from the second form onwards there was no way
   to the rest of the sheet at all. A docket you have to scroll back to the top to
   read is not a docket.

   Three things about this shape are load-bearing, and the contract measures all
   three rather than trusting the comment:

     IT IS STICKY, NOT FIXED. It occupies its row, it travels with the sheet, and
     its register mark is in the same furniture column as every form's, so the marks
     still line up down one column — which is the whole point of the column.

     IT IS HUNG AFTER THE PROOF. The cover is a press proof and nothing is docketed
     over a proof, so the strip is never laid across the couple's names.

     IT OPENS DOWNWARD, from the head. Fourteen older releases share one navigation
     — fixed to a SIDE edge, vertically centred, a column of marks — and Pigura's is
     fixed to the FOOT of the window and opens upward. This one is neither. */
.uk-pl-docket{position:sticky;top:0;z-index:23;grid-column:1/-1;display:block;
  margin-right:calc(var(--pl-pad) * -1);
  background:var(--pl-stock);border-bottom:2px solid var(--pl-a)}
/* The bar repeats the sheet's own two columns so the register mark lands in the
   furniture margin and the form name starts where every form's body starts. */
.uk-pl-docket-bar{display:grid;
  grid-template-columns:var(--pl-margin) auto minmax(0,1fr) auto auto;
  column-gap:var(--pl-gap);align-items:center;
  width:100%;min-height:var(--pl-docket-h);padding:0 var(--pl-pad) 0 0;
  border:0;background:transparent;font:inherit;text-align:left;cursor:pointer}
.uk-pl-docket-bar .uk-pl-reg{margin:0 auto;color:var(--pl-furniture)}
.uk-pl-docket-bar > b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;font-weight:600;color:var(--pl-furniture)}
/* One line, always. A name that wraps makes the pinned strip two rows tall, and
   every anchor below it then lands under a strip taller than it cleared for. */
.uk-pl-docket-name{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  font-family:var(--pl-display);font-size:15px;color:var(--pl-a)}
.uk-pl-docket-bar > em{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-style:normal;font-size:10px;letter-spacing:.14em;color:var(--pl-b)}
/* The cue points the way the list actually opens. Drawn from two borders so it is
   a caret and not a glyph that may or may not be in the face. */
.uk-pl-docket-cue{width:8px;height:8px;
  border-right:1.5px solid var(--pl-furniture);border-bottom:1.5px solid var(--pl-furniture);
  transform:rotate(45deg) translate(-1px,-2px);transition:transform .25s ease}
.uk-pl-docket.is-open .uk-pl-docket-cue{transform:rotate(225deg) translate(-1px,-2px)}
/* The list scrolls inside itself rather than growing past the screen, and it keeps
   its scroll to itself so reaching its end does not carry on scrolling the sheet. */
.uk-pl-docket-list{max-height:min(56svh,440px);overflow-y:auto;overscroll-behavior:contain;
  padding:12px var(--pl-pad) 16px calc(var(--pl-margin) + var(--pl-gap));
  border-top:1px solid var(--pl-rule);background:var(--pl-stock)}
.uk-pl-slugline{margin:0 0 8px;font-size:10px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--pl-furniture)}
.uk-pl-forms{list-style:none;display:grid;gap:0;margin:0;padding:0}
.uk-pl-forms li + li{border-top:1px dotted var(--pl-rule)}
/* 44px, not 42. A docket parked at the head of the document was read once and
   scrolled past; a docket that follows the reader is a control they reach for
   repeatedly, and 42px measured out as the one control on this sheet below the
   fingertip minimum. */
.uk-pl-forms a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  column-gap:12px;align-items:center;min-height:44px;padding:10px 0;
  color:var(--pl-a);text-decoration:none}
.uk-pl-forms b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;font-weight:600;color:var(--pl-furniture)}
.uk-pl-forms span{font-size:14px}
.uk-pl-forms em{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-style:normal;font-size:10px;letter-spacing:.14em;color:var(--pl-furniture)}
/* A form that carries plate two says so IN THE SECOND INK — the one place the
   docket is allowed an ink, because it is naming one. This rule used to set the
   furniture colour, which is what the line above it already sets: it drew nothing,
   and the docket never said which forms carry the guest's half. */
.uk-pl-forms a em{color:var(--pl-b)}
/* THE FORM BEING READ. The script has always marked this row; nothing rendered the
   mark, so the docket opened with every row looking identical and no answer to
   "where am I". The mark is the second ink and a rule in the furniture margin —
   never a background wash, which would fight the stock the sheet is printed on. */
.uk-pl-forms a.is-active{color:var(--pl-b)}
.uk-pl-forms a.is-active > b{color:var(--pl-b)}
.uk-pl-forms a.is-active > span{font-weight:600}
.uk-pl-forms li:has(a.is-active){box-shadow:inset 3px 0 0 var(--pl-b)}
.uk-pl-forms li:has(a.is-active) a{padding-left:9px}

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

/* COVER -------------------------------------------------------------------
   The one screen with a photograph on it, so the one screen that carries a dark
   register of its own — face and ink together, so a palette can never leave the
   names the colour of the scrim behind them. */
.uk-pl-cover{--pl-stock:#201C16;--pl-stockB:#17140F;--pl-a:#F0EBDF;--pl-soft:#B4AC98;--pl-b2:#9C9584;--pl-b:#E9A176;
  --pl-rule:rgba(243,238,225,.24);--pl-deep:rgba(0,0,0,.5);--pl-edge:#706757;
  position:relative;display:grid;min-height:100svh;background:var(--pl-stock);color:var(--pl-a)}
.uk-pl-cover-media{position:absolute;inset:0;overflow:hidden}
.uk-pl-cover-image{width:100%;height:100%;object-fit:cover;object-position:var(--pl-focus-mobile-x,50%) var(--pl-focus-mobile-y,38%)}
.uk-pl-cover-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,28,22,.26) 0%,rgba(31,28,22,.78) 58%,#201C16 100%)}
.uk-pl-cover-empty{position:absolute;inset:0;display:grid;place-items:center;background:#262118}
.uk-pl-cover-empty-tone{position:absolute;inset:0;background:linear-gradient(160deg,rgba(243,238,225,.1),transparent 60%)}
.uk-pl-cover-empty-mark{position:relative;font-family:var(--pl-display);font-size:23px;letter-spacing:.2em;padding:10px 18px;border:1px solid var(--pl-rule);border-radius:var(--pl-radius);color:#F0EBDF}
.uk-pl-cover-panel{position:relative;align-self:end;padding:40px var(--pl-pad) 56px;text-align:center}
.uk-pl-cover-panel .uk-pl-title{margin-top:8px;font-size:clamp(29px,8.4vw,52px)}
.uk-pl-cover-panel > * + *{margin-top:10px}
.uk-pl-cover-date{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:7px 16px;border:1px solid var(--pl-rule);border-radius:999px;font-size:12px;letter-spacing:.08em;color:var(--pl-soft)}
.uk-pl-mark{display:grid;place-items:center;width:62px;height:62px;margin:20px auto 0;
  border:1px solid var(--pl-b2);border-radius:var(--pl-radius);
  font-family:var(--pl-display);font-size:14px;letter-spacing:.16em;color:var(--pl-b2)}

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

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

/* Countdown ---------------------------------------------------------------- */
.uk-pl-count{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--pl-rule);border:1px solid var(--pl-rule);border-radius:var(--pl-radius-sm);overflow:hidden}
.uk-pl-count div{padding:14px 8px;background:var(--pl-stock);text-align:center}
.uk-pl-do .uk-pl-count div{background:var(--pl-stock)}
.uk-pl-count strong{display:block;font-family:var(--pl-display);font-size:clamp(24px,6vw,32px);line-height:1.1;font-variant-numeric:tabular-nums}
.uk-pl-count span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--pl-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-pl-plate-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--pl-soft)}
.uk-pl-plate-tools div{display:flex;gap:8px}
.uk-pl-plate-tools button{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--pl-rule);border-radius:var(--pl-radius-sm);background:transparent;cursor:pointer}
.uk-pl-plate{position:relative;display:flex;gap:var(--pl-gal-gap);overflow-x:auto;padding-bottom:10px;
  scroll-snap-type:x mandatory;scrollbar-width:none}
.uk-pl-plate::-webkit-scrollbar{display:none}
/* A PLATE NUMBER. The photographs in a book are plates, and a plate is numbered
   from the leaf it is bound into: this leaf's own signed folio, then the plate's
   place on it. The gallery is not a separate world with a numbering of its own. */
.uk-pl-plate-no{position:absolute;left:0;bottom:6px;z-index:3;padding:3px 7px;
  border-radius:var(--pl-radius-sm);background:var(--pl-stock);color:var(--pl-soft);
  font-family:var(--pl-display);font-size:11px;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;box-shadow:0 0 0 1px var(--pl-rule)}
.uk-pl-figure{position:relative;flex:0 0 auto;width:min(64vw,236px);scroll-snap-align:start}
.uk-pl-figure img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--pl-radius-sm);background:var(--pl-stockB)}
.uk-pl-figure button{position:absolute;right:6px;top:6px;z-index:3;display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:50%;background:rgba(35,32,25,.78);color:#F0EBDF;cursor:pointer}

/* Gift, contacts, FAQ ------------------------------------------------------ */
.uk-pl-tabs{display:flex;flex-wrap:wrap;gap:8px}
.uk-pl-tabs button{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:9px 15px;border:1px solid var(--pl-rule);border-radius:var(--pl-radius);background:transparent;font-size:12px;font-weight:600;cursor:pointer}
.uk-pl-tabs button.is-active{border-color:var(--pl-b);box-shadow:inset 0 0 0 1px var(--pl-b)}
.uk-pl-gift-panel{display:block}
.uk-pl-account strong{display:block;font-family:var(--pl-display);font-size:20px;letter-spacing:.05em;font-variant-numeric:tabular-nums}
.uk-pl-account p{font-size:13px;color:var(--pl-soft)}
.uk-pl-contacts{display:grid}
.uk-pl-contact strong{display:block;font-size:15px}
.uk-pl-contact p{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--pl-soft)}
.uk-pl-faq{display:grid;gap:0}
.uk-pl-faq-item{padding:12px 0}
.uk-pl-faq-item + .uk-pl-faq-item{border-top:1px dotted var(--pl-rule)}
.uk-pl-faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:40px;cursor:pointer;font-weight:600;list-style:none}
.uk-pl-faq-item summary::-webkit-details-marker{display:none}
.uk-pl-faq-item p{margin-top:8px;color:var(--pl-soft);font-size:15px}
.uk-pl-hashtags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.uk-pl-hashtags button{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:6px 13px;border:1px solid var(--pl-rule);border-radius:999px;background:transparent;font-size:12px;cursor:pointer}
.uk-pl-engagement .uk-pl-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-pl-feedback{--pl-stock:#F4F1E8;--pl-stockB:#E6E1D3;--pl-a:#22201B;--pl-soft:#5A5446;--pl-b2:#6B6553;--pl-b:#7A2318;
  position:relative;z-index:24;display:flex;align-items:center;gap:10px;width:min(100%,680px);margin:16px auto 0;padding:13px 16px;border:1px solid rgba(62,81,66,.36);border-radius:var(--pl-radius);background:#F4F1E8;color:#22201B;font-size:14px}

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

/* ---- PRINTING ONE PLATE ----------------------------------------------- */
/* Plate one alone: the invitation as the couple wrote it. */
.uk-pelat[data-plate="a"] .uk-pl-do{display:none}
/* Plate two alone: every place, time and account, and nothing else. A form with
   nothing on this plate keeps its title and folds down — left at full height it
   is a screen of nothing between two useful ones. */
.uk-pelat[data-plate="b"] .uk-pl-copy,
.uk-pelat[data-plate="b"] .uk-pl-lead,
.uk-pelat[data-plate="b"] .uk-pl-quote,
.uk-pelat[data-plate="b"] .uk-pl-people,
.uk-pelat[data-plate="b"] .uk-pl-plate,
.uk-pelat[data-plate="b"] .uk-pl-plate-tools,
.uk-pelat[data-plate="b"] .uk-pl-rows:not(.uk-pl-do),
.uk-pelat[data-plate="b"] .uk-pl-couple-index,
.uk-pelat[data-plate="b"] .uk-pl-hashtags,
.uk-pelat[data-plate="b"] .uk-pl-signature{display:none}
.uk-pelat[data-plate="b"] .uk-pl-form{padding:12px 0}
/* The cover and the closing are plate one entire. On the practical sheet they
   keep their line and give up their height — a full-bleed photograph with
   nothing on it is a screen of nothing between two useful ones. */
.uk-pelat[data-plate="b"] .uk-pl-cover{min-height:0}
.uk-pelat[data-plate="b"] .uk-pl-cover-media,
.uk-pelat[data-plate="b"] .uk-pl-cover-panel > *:not(.uk-pl-title),
.uk-pelat[data-plate="b"] .uk-pl-closing-body > *:not(.uk-pl-title),
.uk-pelat[data-plate="b"] .uk-pl-closing-share{display:none}
.uk-pelat[data-plate="b"] .uk-pl-cover-panel,
.uk-pelat[data-plate="b"] .uk-pl-closing{display:flex;align-items:center;
  min-height:44px;padding:0 var(--pl-pad);text-align:left}
.uk-pelat[data-plate="b"] .uk-pl-closing-body{width:auto;margin-inline:0}
.uk-pelat[data-plate="b"] .uk-pl-cover-panel .uk-pl-title,
.uk-pelat[data-plate="b"] .uk-pl-closing .uk-pl-title{margin:0;font-size:13px;letter-spacing:.06em}
.uk-pelat[data-plate="b"] .uk-pl-title{font-family:var(--pl-sans);font-size:15px;
  letter-spacing:.05em;color:var(--pl-furniture)}
.uk-pelat[data-plate="b"] .uk-pl-do{margin-top:8px}

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

   ONE rule declares the settle, at TWO classes, with the direction as a SIGN.
   Split into one rule per side it would be three classes each, and the two-class
   rule below that puts a leaf back would lose — so every leaf would stand off its
   place for good, with each rule still reading as correct. That is not a guess:
   the release before this one shipped exactly that fault. */
.uk-pl-reveal{opacity:0;transition:opacity .58s ease,transform .7s cubic-bezier(.22,.78,.2,1)}
.uk-pl-form.uk-pl-reveal{transform:translateY(var(--pl-settle))}
.uk-pl-cover.uk-pl-reveal,.uk-pl-closing.uk-pl-reveal{transform:translateY(12px)}
/* The docket carries no reveal. A sticky element with a transform on it is offset
   from where it stuck, and one that starts at opacity 0 is a navigation that is
   not there when the reader first needs it. */
.uk-pl-reveal.is-visible{opacity:1;transform:none}
.uk-pl-reveal-item{opacity:0;transform:translateY(10px);
  transition:opacity .56s ease .18s,transform .56s ease .18s}
.uk-pl-reveal.is-visible .uk-pl-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-pelat{--pl-stock:#F4F1E8;--pl-stockB:#E6E1D3;--pl-a:#22201B;--pl-soft:#5A5446;--pl-b:#7A2318;--pl-b2:#6B6553;--pl-furniture:#6B6553;--pl-edge:#C2B79E;--pl-rule:rgba(34,32,27,.18);--pl-deep:rgba(34,32,27,.34)}
.uk-design-palette-warm.uk-pelat{--pl-stock:#F7F0DD;--pl-stockB:#EBE1C7;--pl-a:#2D2616;--pl-soft:#6D5E38;--pl-b:#8B4A11;--pl-b2:#736A4E;--pl-furniture:#736A4E;--pl-edge:#C7B689;--pl-rule:rgba(45,38,22,.18);--pl-deep:rgba(45,38,22,.34)}
.uk-design-palette-romantic.uk-pelat{--pl-stock:#F9EDEA;--pl-stockB:#EFDED9;--pl-a:#2F201E;--pl-soft:#6E4E45;--pl-b:#8E2F35;--pl-b2:#75605B;--pl-furniture:#75605B;--pl-edge:#C9A79C;--pl-rule:rgba(47,32,30,.18);--pl-deep:rgba(47,32,30,.34)}
.uk-design-palette-sage.uk-pelat{--pl-stock:#EEF2EA;--pl-stockB:#E1E6D9;--pl-a:#1F2719;--pl-soft:#525D40;--pl-b:#1F5340;--pl-b2:#66705A;--pl-furniture:#66705A;--pl-edge:#A9B296;--pl-rule:rgba(31,39,25,.18);--pl-deep:rgba(31,39,25,.34)}
/* Midnight is the same card read after dark: the two faces go to slate and the
   crease is the only thing catching light. Every token flips together, face and
   ink in one rule, so nothing is left the colour of what is behind it — and the
   lit half of a fold has to become light ON a dark card, which a fixed white
   rgba already is and a fixed dark one never could be. */
.uk-design-palette-midnight.uk-pelat{--pl-stock:#24211C;--pl-stockB:#1B1814;--pl-a:#F0EBDF;--pl-soft:#B4AC98;--pl-b:#E9A176;--pl-b2:#9C9584;--pl-furniture:#9C9584;--pl-edge:#706757;--pl-rule:rgba(240,235,223,.2);--pl-deep:rgba(0,0,0,.58)}
.uk-design-palette-midnight .uk-pl-count div{background:var(--pl-stock)}

.uk-design-type-classic .uk-pl-title,.uk-design-type-classic .uk-pl-gate-names{font-family:var(--pl-display)}
.uk-design-type-modern .uk-pl-title,.uk-design-type-modern .uk-pl-gate-names{font-family:var(--pl-sans);letter-spacing:.02em}
.uk-design-type-editorial .uk-pl-title{font-size:clamp(25px,6.2vw,38px);letter-spacing:-.01em}
.uk-design-type-editorial .uk-pl-cover-panel .uk-pl-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-pelat, so ".uk-design-surface-soft .uk-pelat" 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-pelat{--pl-margin-u:54px;--pl-gap-u:16px;--pl-inset-u:15px;--pl-pad-u:22px;--pl-radius:6px;--pl-radius-sm:4px}
.uk-design-surface-balanced.uk-pelat{--pl-margin-u:40px;--pl-gap-u:12px;--pl-inset-u:11px;--pl-pad-u:16px;--pl-radius:3px;--pl-radius-sm:2px}
.uk-design-surface-sharp.uk-pelat{--pl-margin-u:30px;--pl-gap-u:9px;--pl-inset-u:8px;--pl-pad-u:11px;--pl-radius:0px;--pl-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-pl-figure{width:min(48vw,176px)}
.uk-design-gallery-filmstrip .uk-pl-figure{width:min(64vw,236px)}
.uk-design-gallery-editorial .uk-pl-figure{width:min(84vw,330px)}
.uk-design-gallery-editorial .uk-pl-figure img{aspect-ratio:3/2}

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

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

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

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