/* Pola — Romance Flagship 1.0.0
 * A garment is not drawn and then made; it is CUT. Every piece of it is laid on
 * the cloth at a chosen angle to the weave, and that angle is not a style: it
 * decides how the piece hangs, how much cloth it eats, and how much seam it needs.
 *
 * ONE DECISION PER PIECE: which way does its GRAIN run?
 *
 *   LURUS  — along the warp. Stable, so the piece is given the full measure and a
 *            modest allowance, and it settles straight down the warp.
 *   SERONG — on the bias, at 45 degrees. It drapes, which is why it is used, and
 *            it is greedy: the widest allowance and the NARROWEST measure of the
 *            three, because cutting on the bias wastes cloth. It settles at 45.
 *   LIPAT  — on the fold. Cut double and opening symmetrical, so it is centred on
 *            its fold line, needs no seam on that edge, and opens out sideways.
 *
 * That one decision is read FIVE times: the angle the ground is hatched at, the
 * allowance the piece is given, the measure its copy is set to, whether it ranges
 * to its fold or to its edge, and the direction it settles from. Written as five
 * decisions they part company the first time a section is edited, and every one of
 * them still reads as correct on its own.
 *
 * AND THE SHEET CARRIES NO INDEX. Every piece is labelled at its own head and that
 * label STICKS: while a piece is being read its label is at the top of the screen,
 * and the next piece's label pushes it out. Nothing is kept in step with the
 * reader because nothing is tracking the reader — the label you can see is the
 * label of the piece you are in, by construction.
 *
 * Things here that are easy to get wrong and invisible in a stylesheet read.
 *
 *   A LATER RULE OF EQUAL WEIGHT TURNING THE LABEL BACK INTO A RELATIVE BOX.
 *   ".uk-po-piece > *{position:relative}" has exactly the same specificity as
 *   ".uk-po-label{position:sticky}" and is written after it, so it wins, and the
 *   entire mechanism is gone with both rules still reading as correct. The
 *   children that need lifting are named one by one for that reason alone.
 *
 *   AN ALLOWANCE ON THE PIECE INSTEAD OF ON ITS BODY. position:sticky clamps a
 *   label to its containing block's CONTENT box, so a bottom allowance on the
 *   piece makes the label leave that many pixels before the piece does. Measured
 *   at 26px on a bias piece before it was moved onto the body.
 *
 *   AND A HATCH DARK ENOUGH TO READ THE WEAVE OF. It sits behind body copy. The
 *   contrast sweep measures the copy against the hatched ground, not the plain one.
 */
/* Tokens ------------------------------------------------------------------- */
.uk-pola{
  /* The cloth, what is written on it, and what joins it. THREAD is not an accent:
     whole blocks of the practical half of this invitation are set in it, so it is
     dark enough to read as body copy rather than as a highlight. */
  --po-cloth:#F2ECDF;
  --po-ink:#2B2822;      /* what is written on the cloth */
  --po-thread:#8E3B2B;   /* what joins it: every seam, and everything acted on */
  --po-soft:#5D5749;     /* the same hand, quieter */
  /* CHALK is neither. Grain arrows, piece numbers and grain names are the marks a
     cutter makes and a tailor brushes off; put them in ink or thread and they read
     as part of the garment, and the sheet stops being a pattern. */
  --po-chalk:#6A6354;
  --po-rule:rgba(43,40,34,.18);
  --po-deep:rgba(43,40,34,.34);
  --po-edge:#C4B79B;
    /* Three measures, one per grain. The bias measure is the narrowest because a
     bias-cut piece eats the most cloth for the least width, which is the whole
     trade a tailor makes when choosing it. */
  --po-radius:3px;--po-radius-sm:2px;
  --po-measure:34em;--po-measure-bias:26em;--po-measure-fold:30em;

  /* 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 --po-gutter, the
     preset (two classes) silently beats the media query (one), and the wider
     screen never widens. */
  --po-step:1;
  --po-gutter-u:40px;    /* the gutter, where the grain arrows are drawn */
  --po-gap-u:12px;
  --po-pad-u:16px;
  --po-seamline-u:11px;  /* how far a seam block is set in from its basting line */
  --po-gutter:calc(var(--po-gutter-u) * var(--po-step));
  --po-gap:calc(var(--po-gap-u) * var(--po-step));
  --po-pad:calc(var(--po-pad-u) * var(--po-step));
  --po-seamline:calc(var(--po-seamline-u) * var(--po-step));
  --po-settle:18px;
  --po-gal-gap:10px;
  --po-display:"Lora",Georgia,Cambria,"Times New Roman",serif;
  --po-sans:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  position:relative;min-height:100svh;background:var(--po-cloth);color:var(--po-ink);
  font-family:var(--po-sans);font-size:16px;line-height:1.65;
  --po-label-h:48px;     /* the stuck height of a piece label, and what anchors clear */
  -webkit-font-smoothing:antialiased;
  /* CLIP, NOT HIDDEN, AND EVERY PIECE LABEL 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 every piece
     label would ride away up the page with nothing in any stylesheet looking wrong.
     Measured on a sibling family: with hidden, the stuck strip sat 400px above the
     viewport after 400px of scroll; with clip, it held at 0. overflow-x:clip clips the same overflow
     without creating a scroll container. The hidden below is the fallback for
     engines without clip, where nothing is clipped — which is safe here only
     because the overflow sweep measures zero horizontal overflow. */
  overflow-x:hidden;
}
@supports (overflow-x:clip){.uk-pola{overflow-x:clip}}

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

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

/* THE SHEET OF PIECES ------------------------------------------------------
   Two columns for the whole document: the GUTTER, where each piece's grain arrow
   is drawn, and the piece itself. Every piece is a row of that one grid rather
   than a box of its own, so the grain arrows line up down a single column from
   the first piece to the last — which is the whole reason a cutting layout has a
   straight edge to read against. */
.uk-po-sheet{position:relative;display:grid;
  grid-template-columns:var(--po-gutter) minmax(0,1fr);
  column-gap:var(--po-gap);padding-right:var(--po-pad);background:var(--po-cloth)}
.uk-po-sheet > *{grid-column:1/-1}

/* A PIECE. The seam allowance is on an INNER wrapper, not on the piece itself:
   position:sticky clamps a label to its containing block's CONTENT box, so an
   allowance on the piece would make the label leave that many pixels before the
   piece does. Measured: with the allowance on the piece, a bias piece's label
   left 26px early. */
.uk-po-piece{position:relative;display:grid;grid-template-columns:subgrid;
  grid-column:1/-1;align-items:start;
  --po-allow:calc(var(--po-allow-u) * var(--po-step));
  /* An anchor has to clear the label that will be stuck over it. */
  scroll-margin-top:calc(var(--po-label-h) + 10px)}
.uk-pola #rsvp,.uk-pola #wishes{scroll-margin-top:calc(var(--po-label-h) + 10px)}
.uk-po-piece + .uk-po-piece{border-top:1px dashed var(--po-rule)}

/* THE LABEL OF A PIECE — and the only navigation on this sheet.
   It sticks: it holds at the head of the screen for exactly as long as its own
   piece is being read, and the next piece's label pushes it out. Nothing keeps it
   in step with the reader, because the label you can see IS the label of the
   piece you are in. There is nothing to get out of step.
   The background is opaque on purpose: a label you can read the piece through is
   not a label. */
.uk-po-label{position:sticky;top:0;z-index:14;grid-column:1/-1;
  display:grid;grid-template-columns:var(--po-gutter) auto minmax(0,1fr) auto auto;
  column-gap:var(--po-gap);align-items:center;margin:0;
  min-height:var(--po-label-h);margin-right:calc(var(--po-pad) * -1);
  padding-right:var(--po-pad);background:var(--po-cloth);
  border-bottom:1px solid var(--po-rule)}
.uk-po-label > b{grid-column:2;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;font-weight:600;color:var(--po-chalk)}
/* One line, always. A name that wraps makes the stuck label two rows tall, and
   every anchor below it was cleared for one. */
.uk-po-label > span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  font-family:var(--po-display);font-size:15px;color:var(--po-ink)}
.uk-po-label > em{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-style:normal;
  font-size:10px;font-weight:600;letter-spacing:.14em;color:var(--po-thread)}
.uk-po-label > button{display:grid;place-items:center;width:44px;height:44px;
  margin-right:-10px;border:0;background:transparent;color:var(--po-chalk);cursor:pointer}

/* THE GRAIN ARROW, drawn in the gutter. It is the one mark on a pattern piece
   that is not decoration: it is what the cutter lines up with the warp, and it is
   the reason the piece hangs. It is never in the thread colour — a grain arrow in
   the colour of the stitching reads as part of the garment. */
/* THE ARROW TURNS, SO ITS BOX HAS TO BE SQUARE AND ITS LENGTH HAS TO FIT THE
   TURN. A 16x60 mark rotated 90 degrees is 60 wide and leaves the gutter; at 45
   its bounding box is 54 across. Measured: three pieces pushed their arrow past
   the sheet on every phone width. The box is the gutter, square, and the mark
   inside it is 0.7 of that — the diagonal of a square of side 0.7 is the side
   itself, so no angle can take it outside. */
.uk-po-arrow{grid-column:1;justify-self:center;display:grid;place-items:center;
  width:var(--po-gutter);height:var(--po-gutter);
  margin-top:10px;color:var(--po-chalk)}
.uk-po-arrow svg{display:block;width:12px;height:calc(var(--po-gutter) * .7);
  transform:rotate(var(--po-tilt));transform-origin:50% 50%}

/* THE ALLOWANCE IS THE GRAIN'S TIMES THE SCREEN'S STEP, and the product is worked
   out HERE, on the piece, not on the root. A calc written at the root is
   substituted at the root, so a unit redeclared further down the tree never
   reaches it — a sibling family lost a whole format factor to exactly that. */
.uk-po-body{grid-column:2;min-width:0;padding:var(--po-allow) 0 calc(var(--po-allow) + 6px)}
.uk-po-body > * + *{margin-top:10px}

/* THE ONE DECISION: which way this piece's grain runs. Four readers, one source.
   Written as four separate decisions they part company the first time a section is
   edited, and each one still reads as correct on its own. */
.uk-po-piece.is-lurus{--po-tilt:0deg;--po-allow-u:16px;--po-measure-now:var(--po-measure);--po-range:left}
.uk-po-piece.is-serong{--po-tilt:45deg;--po-allow-u:26px;--po-measure-now:var(--po-measure-bias);--po-range:left}
.uk-po-piece.is-lipat{--po-tilt:90deg;--po-allow-u:12px;--po-measure-now:var(--po-measure-fold);--po-range:center}
.uk-po-body{text-align:var(--po-range)}
.uk-po-copy,.uk-po-lead{max-width:var(--po-measure-now);color:var(--po-soft)}
.uk-po-piece.is-lipat .uk-po-copy,.uk-po-piece.is-lipat .uk-po-lead{margin-inline:auto}
/* THE GROUND, hatched ALONG the grain. Faint: this sits behind body copy, and a
   hatch you can read the weave of is a hatch you cannot read the words through. */
.uk-po-piece::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(var(--po-tilt),transparent 0 11px,var(--po-rule) 11px 12px);
  opacity:.34}
/* NOT ".uk-po-piece > *": that selector has the same specificity as .uk-po-label
   and is written later, so it would quietly turn the sticky label into a relative
   one and the whole mechanism would be gone with every rule still reading as
   correct. This cost an hour the first time. Name the children instead. */
.uk-po-piece > .uk-po-body,.uk-po-piece > .uk-po-arrow{position:relative;z-index:1}

/* A PIECE LAID ON THE FOLD is cut double and opens symmetrical, so it is centred
   on its fold line and carries no seam on that edge. The fold line is drawn. */
.uk-po-piece.is-lipat .uk-po-body{position:relative}
.uk-po-piece.is-lipat .uk-po-body::before{content:"";position:absolute;left:50%;top:0;bottom:0;
  width:1px;margin-left:-.5px;background:var(--po-edge)}
.uk-po-title{font-family:var(--po-display);color:var(--po-ink);
  font-size:clamp(21px,5.2vw,28px);line-height:1.22;text-wrap:balance}
.uk-po-title.is-sm{font-size:clamp(17px,3.4vw,20px)}
.uk-po-lead{font-family:var(--po-display);font-size:19px;color:var(--po-ink)}
.uk-po-copy{font-size:15px}

/* THE SEAM. Everything the guest has to act on — a place, a time, an account, a
   dress note — is set inside a seam: the basting line down its left edge is where
   two pieces are joined, and that is exactly what these blocks are. Dashed, in the
   thread colour, because a basting stitch is temporary and a cut line is not. */
.uk-po-seam{max-width:var(--po-measure-bias);margin-top:14px;
  padding-left:var(--po-seamline);border-left:2px dashed var(--po-thread);
  font-family:var(--po-sans);font-size:15px;color:var(--po-thread)}
.uk-po-seam dt,.uk-po-seam .uk-po-row-mark{margin:0 0 3px;
  font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--po-thread)}
.uk-po-seam dd{margin:0 0 10px;color:var(--po-thread)}
.uk-po-seam dd:last-child{margin-bottom:0}
.uk-po-seam dd strong{display:block;font-weight:600;color:var(--po-thread)}
.uk-po-seam dd span{display:block;color:var(--po-soft);font-size:13px}
.uk-po-seam .uk-po-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.uk-po-seam .uk-po-button{border-color:var(--po-thread);color:var(--po-thread)}
.uk-po-seam .uk-po-button.is-solid{background:var(--po-thread);color:var(--po-cloth)}
/* A seam inside a piece on the fold is centred with it, and its basting line moves
   to the fold side so the two halves still read as one. */
.uk-po-piece.is-lipat .uk-po-seam{margin-inline:auto;text-align:left}

/* THE CUTTING LAYOUT — the only other way through the sheet, opened from whichever
   label is stuck. Grouped BY GRAIN rather than listed in order, because that is how
   a layout is read: the pieces cut the same way are the ones nested together on the
   cloth. Listed in order it would be an index like any other, and this sheet is
   deliberately without one.
   inset:0 is what bounds it: pinned on all four edges it cannot grow off the
   screen whatever it holds, and the list inside it scrolls. */
.uk-po-plan{position:fixed;inset:0;z-index:46;display:grid;place-items:center;
  padding:20px 16px;background:var(--po-deep);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.uk-po-plan.is-open{opacity:1;visibility:visible}
.uk-po-plan-panel{width:min(100%,680px);max-height:86svh;overflow-y:auto;overscroll-behavior:contain;
  padding:20px;border:1px solid var(--po-edge);border-radius:var(--po-radius);
  background:var(--po-cloth);color:var(--po-ink)}
.uk-po-plan-head{margin:0 0 14px;font-size:10px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--po-chalk)}
.uk-po-plan-grid{display:grid;gap:18px}
.uk-po-plan-band h2{display:flex;align-items:baseline;gap:8px;margin:0 0 6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;font-weight:700;
  letter-spacing:.2em;color:var(--po-thread)}
.uk-po-plan-band h2 small{font-weight:600;color:var(--po-chalk)}
.uk-po-plan-band ol{list-style:none;display:grid;gap:0;margin:0;padding:0}
.uk-po-plan-band li + li{border-top:1px dotted var(--po-rule)}
.uk-po-plan-band a{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;
  align-items:center;min-height:44px;padding:10px 0;color:var(--po-ink);text-decoration:none}
.uk-po-plan-band b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  font-weight:600;color:var(--po-chalk)}
.uk-po-plan-band span{font-size:14px}
.uk-po-plan-close{margin-top:18px}
/* The band each piece is nested in is marked by its own grain, drawn the same way
   the piece's ground is — the layout and the sheet have to agree. */
.uk-po-plan-band.is-lurus{--po-tilt:0deg}
.uk-po-plan-band.is-serong{--po-tilt:45deg}
.uk-po-plan-band.is-lipat{--po-tilt:90deg}
.uk-po-plan-band h2::after{content:"";flex:1 1 auto;height:10px;
  background:repeating-linear-gradient(var(--po-tilt),transparent 0 5px,var(--po-rule) 5px 6px)}

@media(min-width:620px){
.uk-po-plan-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:22px}
}

/* GATE: the strip still folded, seen edge-on ------------------------------ */
.uk-po-gate{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:20px 0;overflow:hidden;
  background:var(--po-cloth2);color:var(--po-ink);transition:opacity .7s ease,visibility .7s ease}
.uk-po-gate.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.uk-po-gate-stage{position:relative;display:grid;place-items:center;width:100%}
/* THE CLOTH THE SHEET IS LAID ON. Drawn WIDER than the sheet in front of it and
   hanging off its top and bottom, because cloth does not stop at the pattern: a
   weave no wider than what covers it reads as nothing at all. Six threads —
   warp above, weft below — so the two directions the whole template is about are
   visible before a word is read. */
.uk-po-weave{position:absolute;left:50%;top:0;bottom:0;z-index:0;
  width:min(100% - 8px,560px);transform:translateX(-50%);pointer-events:none}
.uk-po-weave i{position:absolute;left:0;right:0;height:8px;
  background:repeating-linear-gradient(90deg,var(--po-edge) 0 6px,transparent 6px 12px);
  opacity:.75}
.uk-po-weave i:nth-child(1){top:-30px}
.uk-po-weave i:nth-child(2){top:-16px;opacity:.55}
.uk-po-weave i:nth-child(3){top:-44px;opacity:.4}
/* The three below run the other way: this is a weave, and a weave crossed in one
   direction only is a set of stripes. */
.uk-po-weave i:nth-child(4){bottom:-16px;background:repeating-linear-gradient(0deg,var(--po-edge) 0 6px,transparent 6px 12px);opacity:.55}
.uk-po-weave i:nth-child(5){bottom:-30px;background:repeating-linear-gradient(0deg,var(--po-edge) 0 6px,transparent 6px 12px)}
.uk-po-weave i:nth-child(6){bottom:-44px;background:repeating-linear-gradient(0deg,var(--po-edge) 0 6px,transparent 6px 12px);opacity:.4}

/* THE PIN holding the pattern to the cloth. It is the one thing on the gate that
   says this sheet is not a drawing but a thing laid on fabric, so it has to read
   on its own: a shaft crossing the corner with its head OUTSIDE the sheet. A pin
   no longer than what it pins is a stripe. */
.uk-po-pin{position:absolute;right:6%;top:-34px;z-index:4;
  width:3px;height:118px;transform:rotate(18deg);transform-origin:50% 0;
  background:linear-gradient(180deg,var(--po-chalk) 0 88%,var(--po-ink) 88% 100%);
  pointer-events:none}
.uk-po-pin::after{content:"";position:absolute;left:50%;top:-9px;width:13px;height:13px;
  margin-left:-6.5px;border-radius:50%;background:var(--po-thread);
  box-shadow:0 1px 0 var(--po-deep)}

.uk-po-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(--po-radius);background:var(--po-cloth);
  /* The sheet has to lift off the cloth, or the weave behind it reads as printed
     on it. Measured in perceptual lightness, not guessed at. */
  box-shadow:0 12px 26px rgba(43,40,34,.2)}
.uk-po-portrait{position:relative;height:min(40svh,272px);overflow:hidden;background:var(--po-cloth2)}
.uk-po-portrait img{width:100%;height:100%;object-fit:cover;object-position:var(--po-focus-mobile-x,50%) var(--po-focus-mobile-y,38%)}
.uk-po-gate-body{position:relative;padding:24px 22px 24px;text-align:center}
.uk-po-gate-stage{padding-right:0}
.uk-po-gate-names{margin-top:8px;font-size:clamp(26px,7.2vw,40px)}
.uk-po-gate-date{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:7px 16px;border:1px solid var(--po-rule);border-radius:999px;font-size:12px;letter-spacing:.08em;color:var(--po-soft)}
.uk-po-couple-list{display:grid;gap:8px;margin-top:14px}
.uk-po-couple-list span{display:grid;gap:2px}
.uk-po-couple-list small{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--po-soft)}
.uk-po-couple-list strong{font-family:var(--po-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-po-gate-open{position:relative;display:flex;width:fit-content;margin:18px auto 0;padding:13px 26px;
  border-color:transparent;background:var(--po-thread2);color:var(--po-cloth);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-po-gate.is-drawn .uk-po-gate-panel{animation:uk-po-open .9s cubic-bezier(.3,.9,.3,1) forwards}
@keyframes uk-po-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-po-cover{--po-cloth:#1F1D17;--po-cloth2:#161309;--po-ink:#F1ECE0;--po-soft:#B6AE99;--po-thread2:#9D9685;--po-thread:#E7A277;
  --po-rule:rgba(241,236,224,.24);--po-deep:rgba(0,0,0,.5);--po-edge:#4A443A;
  position:relative;display:grid;min-height:100svh;background:var(--po-cloth);color:var(--po-ink)}
.uk-po-cover-media{position:absolute;inset:0;overflow:hidden}
.uk-po-cover-image{width:100%;height:100%;object-fit:cover;object-position:var(--po-focus-mobile-x,50%) var(--po-focus-mobile-y,38%)}
.uk-po-cover-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,29,23,.26) 0%,rgba(31,29,23,.78) 58%,#1F1D17 100%)}
.uk-po-cover-empty{position:absolute;inset:0;display:grid;place-items:center;background:#221E17}
.uk-po-cover-empty-tone{position:absolute;inset:0;background:linear-gradient(160deg,rgba(241,236,224,.1),transparent 60%)}
.uk-po-cover-empty-mark{position:relative;font-family:var(--po-display);font-size:23px;letter-spacing:.2em;padding:10px 18px;border:1px solid var(--po-rule);border-radius:var(--po-radius);color:#F1ECE0}
.uk-po-cover-panel{position:relative;align-self:end;padding:40px var(--po-pad) 56px;text-align:center}
.uk-po-cover-panel .uk-po-title{margin-top:8px;font-size:clamp(29px,8.4vw,52px)}
.uk-po-cover-panel > * + *{margin-top:10px}
.uk-po-cover-date{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:7px 16px;border:1px solid var(--po-rule);border-radius:999px;font-size:12px;letter-spacing:.08em;color:var(--po-soft)}
.uk-po-mark{display:grid;place-items:center;width:62px;height:62px;margin:20px auto 0;
  border:1px solid var(--po-thread2);border-radius:var(--po-radius);
  font-family:var(--po-display);font-size:14px;letter-spacing:.16em;color:var(--po-thread2)}

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

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

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

/* Gift, contacts, FAQ ------------------------------------------------------ */
.uk-po-tabs{display:flex;flex-wrap:wrap;gap:8px}
.uk-po-tabs button{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:9px 15px;border:1px solid var(--po-rule);border-radius:var(--po-radius);background:transparent;font-size:12px;font-weight:600;cursor:pointer}
.uk-po-tabs button.is-active{border-color:var(--po-thread);box-shadow:inset 0 0 0 1px var(--po-thread)}
.uk-po-gift-panel{display:block}
.uk-po-account strong{display:block;font-family:var(--po-display);font-size:20px;letter-spacing:.05em;font-variant-numeric:tabular-nums}
.uk-po-account p{font-size:13px;color:var(--po-soft)}
.uk-po-contacts{display:grid}
.uk-po-contact strong{display:block;font-size:15px}
.uk-po-contact p{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--po-soft)}
.uk-po-faq{display:grid;gap:0}
.uk-po-faq-item{padding:12px 0}
.uk-po-faq-item + .uk-po-faq-item{border-top:1px dotted var(--po-rule)}
.uk-po-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-po-faq-item summary::-webkit-details-marker{display:none}
.uk-po-faq-item p{margin-top:8px;color:var(--po-soft);font-size:15px}
.uk-po-hashtags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.uk-po-hashtags button{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 13px;border:1px solid var(--po-rule);border-radius:999px;background:transparent;font-size:12px;cursor:pointer}
.uk-po-engagement .uk-po-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-po-feedback{--po-cloth:#F2ECDF;--po-cloth2:#E4DCCA;--po-ink:#2B2822;--po-soft:#5D5749;--po-thread2:#6A6354;--po-thread:#8E3B2B;
  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(106,99,84,.36);border-radius:var(--po-radius);background:#F2ECDF;color:#2B2822;font-size:14px}

/* CLOSING: the end of the strip -------------------------------------------- */
.uk-po-closing{position:relative;padding:60px var(--po-pad) 76px;
  background:var(--po-cloth);color:var(--po-ink);text-align:center;scroll-margin-top:0}
.uk-po-closing-body{width:min(100%,600px);margin-inline:auto}
.uk-po-closing-body > * + *{margin-top:14px}
.uk-po-closing .uk-po-title{font-size:clamp(24px,6vw,36px)}
.uk-po-closing .uk-po-copy{margin-inline:auto}
.uk-po-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-po-rail{position:fixed;right:14px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:24;display:grid;gap:8px;justify-items:center}
.uk-po-rail-toggle,.uk-po-rail-panel button{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(142,59,43,.5);border-radius:50%;background:#2B2822;color:#F1ECE0;cursor:pointer}
.uk-po-rail-panel{display:grid;gap:8px;justify-items:center}
.uk-po-dialog,.uk-po-lightbox{position:fixed;inset:0;z-index:46;display:grid;place-items:center;padding:20px 16px;background:rgba(22,19,9,.88);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.uk-po-dialog.is-open,.uk-po-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 --po-ink and --po-thread2 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-po-dialog-panel{--po-cloth:#F2ECDF;--po-cloth2:#E4DCCA;--po-ink:#2B2822;--po-soft:#5D5749;--po-thread2:#6A6354;--po-thread:#8E3B2B;--po-rule:rgba(43,40,34,.18);
  width:min(100%,430px);padding:22px;border:1px solid var(--po-thread2);border-radius:var(--po-radius);background:#F2ECDF;color:#2B2822}
.uk-po-dialog-panel h2{margin-top:6px;font-size:22px}
.uk-po-share-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:16px}
.uk-po-share-grid button{display:flex;align-items:center;gap:8px;min-height:40px;padding:11px 13px;border:1px solid rgba(43,40,34,.18);border-radius:var(--po-radius-sm);background:transparent;color:inherit;cursor:pointer;font-size:13px}
.uk-po-dialog-close{width:100%;margin-top:14px}
.uk-po-lightbox-panel{position:relative;width:min(100%,780px)}
.uk-po-lightbox-panel img{width:100%;max-height:76svh;object-fit:contain;border-radius:var(--po-radius);transition:opacity .2s ease}
.uk-po-lightbox.is-switching .uk-po-lightbox-panel img{opacity:0}
.uk-po-lightbox-counter{margin-top:12px;color:#F1ECE0;font-size:12px;letter-spacing:.16em;text-align:center}
.uk-po-lightbox-close,.uk-po-lightbox-prev,.uk-po-lightbox-next{position:absolute;display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;background:rgba(43,40,34,.86);color:#F1ECE0;cursor:pointer}
.uk-po-lightbox-close{top:-52px;right:0}
.uk-po-lightbox-prev{left:6px;top:50%;transform:translateY(-50%)}
.uk-po-lightbox-next{right:6px;top:50%;transform:translateY(-50%)}
.uk-po-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:#2B2822;color:#F1ECE0;font-size:13px;pointer-events:none;transition:opacity .3s ease,transform .3s ease}
.uk-po-toast.is-visible{opacity:1;transform:translate(-50%,0)}

/* MOTION: A PIECE SETTLES ALONG ITS OWN GRAIN -------------------------------
   The fifth reader of the one decision, and the one that makes it felt rather
   than seen: a piece cut on the straight grain arrives down the warp; a piece on
   the bias arrives along its 45 degrees; a piece on the fold opens out from the
   fold, sideways. Nothing here chooses a direction — the direction is the grain
   the piece was already cut on.

   EVERY HORIZONTAL OFFSET IS NEGATIVE, and that is not a taste. The body is the
   right-hand column of the sheet and its right edge IS the trim, so a piece
   arriving from +x travels outside the sheet to get to its place. Measured: a bias
   piece's body sat 23px past the trim at the start of its settle. Coming from -x it
   crosses the gutter instead, which is the margin of the pattern and has room.

   ONE rule declares the settle, with the direction carried as two signed offsets
   set beside the grain itself. Written as one rule per grain it would be two
   classes each, and the single-class rule below that puts a piece back would
   lose — so every piece would stand off its place for good, with each rule still
   reading as correct. That is not a guess: a release two families back shipped
   exactly that fault, and the contract for it is still in the suite. */
.uk-po-piece.is-lurus{--po-set-x:0px;--po-set-y:var(--po-settle)}
.uk-po-piece.is-serong{--po-set-x:calc(var(--po-settle) * -.7);--po-set-y:calc(var(--po-settle) * .7)}
.uk-po-piece.is-lipat{--po-set-x:calc(var(--po-settle) * -1);--po-set-y:0px}
.uk-po-reveal{opacity:0;transition:opacity .58s ease,transform .7s cubic-bezier(.22,.78,.2,1)}
.uk-po-body.uk-po-reveal{transform:translate(var(--po-set-x,0px),var(--po-set-y,14px))}
.uk-po-cover.uk-po-reveal,.uk-po-closing.uk-po-reveal{transform:translateY(12px)}
/* THE LABEL 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 the navigation missing
   at the moment the reader first needs it. */
.uk-po-reveal.is-visible{opacity:1;transform:none}
.uk-po-reveal-item{opacity:0;transform:translateY(10px);
  transition:opacity .56s ease .18s,transform .56s ease .18s}
.uk-po-reveal.is-visible .uk-po-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-pola{--po-cloth:#F2ECDF;--po-cloth2:#E4DCCA;--po-ink:#2B2822;--po-soft:#5D5749;--po-thread:#8E3B2B;--po-thread2:#6A6354;--po-chalk:#6A6354;--po-edge:#C4B79B;--po-rule:rgba(43,40,34,.18);--po-deep:rgba(43,40,34,.34)}
.uk-design-palette-warm.uk-pola{--po-cloth:#F8F1DA;--po-cloth2:#ECE2C4;--po-ink:#2E2715;--po-soft:#6C5D34;--po-thread:#8D4C0E;--po-thread2:#645B45;--po-chalk:#645B45;--po-edge:#C9B885;--po-rule:rgba(46,39,21,.18);--po-deep:rgba(46,39,21,.34)}
.uk-design-palette-romantic.uk-pola{--po-cloth:#FAEEE9;--po-cloth2:#F0DFD7;--po-ink:#30211D;--po-soft:#6F4F43;--po-thread:#8F3033;--po-thread2:#776159;--po-chalk:#776159;--po-edge:#CBA89A;--po-rule:rgba(48,33,29,.18);--po-deep:rgba(48,33,29,.34)}
.uk-design-palette-sage.uk-pola{--po-cloth:#EDF3E9;--po-cloth2:#E0E7D7;--po-ink:#1E281A;--po-soft:#515E3F;--po-thread:#1E5442;--po-thread2:#59614B;--po-chalk:#59614B;--po-edge:#A7B394;--po-rule:rgba(30,40,26,.18);--po-deep:rgba(30,40,26,.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-pola{--po-cloth:#1F1D17;--po-cloth2:#161309;--po-ink:#F1ECE0;--po-soft:#B6AE99;--po-thread:#E7A277;--po-thread2:#9D9685;--po-chalk:#9D9685;--po-edge:#4A443A;--po-rule:rgba(241,236,224,.2);--po-deep:rgba(0,0,0,.58)}
.uk-design-palette-midnight .uk-po-count div{background:var(--po-cloth)}

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

.uk-design-motion-soft.uk-pola{--po-settle:16px}
.uk-design-motion-cinematic.uk-pola{--po-settle:34px}
.uk-design-motion-minimal.uk-pola{--po-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-po-reveal,
.uk-design-motion-minimal .uk-po-body.uk-po-reveal,
.uk-design-motion-minimal .uk-po-reveal-item{opacity:1;transform:none;transition:none}
.uk-design-motion-minimal .uk-po-gate.is-drawn .uk-po-gate-panel{animation:none}

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

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

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