/* Tindih — Romance Flagship 1.0.0
 * Tindih means laid over. This family is a set of SHEETS laid down a board, each
 * one tucked under the sheet above it, and every section of the invitation is one
 * of those sheets.
 *
 * THE ONE LAW. Every sheet laps the one above it by the same amount, so the
 * document is SHORTER THAN THE SUM OF ITS SECTIONS — by exactly (n - 1) * lap, and
 * that is a number a browser can be asked for:
 *
 *     sum of the sheet heights  -  the real height of the board  =  (n - 1) * lap
 *
 * Nothing else in this file sets a vertical margin between sections. The lap is
 * the whole rhythm, and the surface control is the lap itself — a hand that lays
 * the sheets close and a hand that lays them loose are the only two ways to lay
 * sheets, and the document gets measurably shorter or longer with the choice.
 *
 * A LAP YOU CANNOT SEE IS A LAW NOBODY FEELS. This was built first as a shingled
 * roof, and it was abandoned on the control page after three attempts: shingle lay
 * on shingle, the two planes were the same colour, and a reader saw an ornamental
 * band every four hundred pixels rather than one plane over another. A sheet is a
 * LIGHTER plane on a darker board with an edge and a cast shadow, so the overlap
 * has something to be read against. Everything about this family's surface exists
 * to make the lap visible: the board at both margins, the edge highlight along the
 * top of each sheet, and the shadow each sheet throws on the one beneath it.
 *
 * AND YOU CAN ALWAYS SEE WHAT IS UNDERNEATH. That is what a laid sheet is, so the
 * control at the head of the screen names the sheet you are on AND the one under
 * it, and the second half is a link to it. No other family in this catalogue tells
 * the reader what is coming next, and none of them puts its control at the head.
 *
 * Things that are easy to get wrong here and invisible in a stylesheet read.
 *
 *   A SHEET THAT PAINTS UNDER THE ONE AFTER IT. Laid sheets stack from the top
 *   down, so the FIRST sheet is on top: --td-z counts down. Left to the document
 *   order, each new sheet would cover the one before it and the laps would all run
 *   the wrong way — a page that still looks deliberate and is upside down.
 *
 *   CONTENT UNDER THE LAP. The top --td-lap of every sheet is covered. A
 *   padding-top smaller than the lap buries the first line of the section, and it
 *   buries it only at the surface setting with the deepest lap.
 *
 *   A SECOND VERTICAL MARGIN. One extra margin anywhere between sections and the
 *   document is no longer shorter by (n - 1) * lap, which is the one claim this
 *   family makes that can be checked.
 */

/* Tokens ------------------------------------------------------------------- */
.uk-tindih{
  --td-board:#54534C;      /* the board the sheets are laid on */
  --td-sheet:#F6F1E4;      /* the sheet */
  --td-leaf:#EBE3D0;       /* the sheet where a panel is set into it */
  --td-ink:#231F16;
  --td-quiet:#575043;
  --td-mark:#7C4A20;       /* the one second colour */
  --td-line:rgba(34,30,23,.2);
  --td-deep:rgba(18,15,10,.44);
  --td-radius:0px;         /* a cut sheet has no rounded corners */

  /* THE LAW. How far each sheet is tucked under the one above it. */
  --td-lap:40px;
  /* How much of the board shows at either margin, and how far a sheet laid by
     hand sits off the one above. Both are what make the sheets read as separate
     objects rather than as one striped ground. */
  --td-reveal:10px;
  --td-shift:6px;
  /* Which way this sheet is off true. Written per sheet by the Blade; a stray
     element with no value lies square, which is the safe default. */
  --td-hand:0;
  /* Where this sheet sits in the stack. The first sheet is on top. */
  --td-z:1;

  --td-measure:30em;
  --td-band:30em;
  --td-pad:22px;

  --td-display:"Lora",Georgia,Cambria,"Times New Roman",serif;
  --td-sans:"Lora",Georgia,Cambria,"Times New Roman",serif;
  position:relative;min-height:100svh;background:var(--td-board);color:var(--td-ink);
  font-family:var(--td-sans);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
  /* CLIP, NOT HIDDEN. overflow-x:hidden forces overflow-y to a used value of auto,
     which makes this element a scroll container, and a sticky descendant then
     sticks to THIS element's scrollport instead of the window's. clip clips the
     same overflow without creating one — and this family needs it, because the
     sheets are deliberately laid a few pixels off true. */
  overflow-x:hidden;
}
@supports (overflow-x:clip){.uk-tindih{overflow-x:clip}}

[hidden]{display:none !important}
.uk-tindih *,.uk-tindih *::before,.uk-tindih *::after{box-sizing:border-box}
.uk-tindih img{display:block;max-width:100%}
/* Every UA margin, not only the ones that are easy to remember: blockquote, dl,
   dd, ol and ul all carry 1em, and :where() keeps the reset at zero specificity so
   it cannot outrank the components it is resetting. */
.uk-tindih :where(p,blockquote,figure,ol,ul,dl,dt,dd,pre,address){margin:0}
.uk-tindih :where(ol,ul){padding:0;list-style:none}
.uk-tindih :where(h1,h2,h3,h4){font-family:var(--td-display);font-weight:600;line-height:1.24;margin:0}
.uk-tindih :where(button){font-family:inherit;color:inherit}

/* Shared type and ornament ------------------------------------------------- */
.uk-td-eyebrow{font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--td-mark)}
.uk-td-preline{white-space:pre-line}
.uk-td-signature{font-family:var(--td-display);font-size:21px;color:var(--td-ink)}
.uk-td-quote{max-width:var(--td-measure);padding:0 0 0 18px;border-left:2px solid var(--td-mark);
  color:var(--td-ink);font-family:var(--td-display);font-size:17px;font-style:italic}
.uk-td-quote cite{display:block;margin-top:10px;font-family:var(--td-sans);font-size:12px;
  font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--td-quiet)}
.uk-td-occasions{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
  column-gap:8px;row-gap:4px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--td-quiet)}
.uk-td-occasions span+span::before{content:"·";padding-right:8px;color:var(--td-mark)}
.uk-td-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;
  padding:11px 18px;border:1px solid var(--td-line);border-radius:var(--td-radius);
  background:transparent;color:var(--td-ink);font-size:13px;font-weight:600;letter-spacing:.05em;
  text-decoration:none;cursor:pointer;transition:box-shadow .25s ease}
.uk-td-button:hover{box-shadow:inset 0 -2px 0 var(--td-mark)}
/* The label is --td-sheet, not a fixed cream, and the fill is --td-ink, so the
   pair inverts with the palette instead of staying dark on a dark sheet. */
.uk-td-button.is-solid{border-color:transparent;background:var(--td-ink);color:var(--td-sheet)}
.uk-td-button:focus-visible,.uk-tindih button:focus-visible,.uk-tindih a:focus-visible{
  outline:2px solid var(--td-mark);outline-offset:3px}

/* THE BOARD ---------------------------------------------------------------- */
.uk-td-sheet{position:relative;display:grid;grid-template-columns:minmax(0,1fr);
  width:min(100%,940px);margin-inline:auto;isolation:isolate;background:var(--td-board)}
.uk-td-sheet > *{grid-column:1/-1}

/* A SHEET. It laps the one above it, and it is laid a few pixels off true in the
   direction --td-hand gives it. Its top --td-lap is covered, so its padding-top
   can never be less than the lap. The first sheet is on top: --td-z counts DOWN,
   because sheets laid one after another stack from the top. */
/* THE STRIP AT THE HEAD COVERS 44px FOREVER, so anything jumped to must stop
   below it — and below its own lap as well, or the first line of the sheet you
   just chose arrives under the sheet above it. */
.uk-td-sec,.uk-td-closing,.uk-td-cover{scroll-margin-top:calc(44px + var(--td-lap))}
.uk-td-sec{position:relative;z-index:var(--td-z);
  margin-inline:calc(var(--td-reveal) + var(--td-hand) * var(--td-shift))
                calc(var(--td-reveal) - var(--td-hand) * var(--td-shift));
  padding:calc(var(--td-lap) + 26px) var(--td-pad) 30px;
  background:var(--td-sheet);
  /* the sheet's own edges, and the shadow it throws on the sheet beneath it */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72), inset 0 -1px 0 var(--td-line),
             0 10px 18px -4px var(--td-deep), 0 2px 4px var(--td-deep)}
/* THE LAP, and the only vertical margin between sections in this file. The first
   sheet laps the COVER too: the cover is the board's own top, and a law with one
   exception at the head is a law with a hole in it — measured, it left the document
   exactly one lap too long. */
.uk-td-sec + .uk-td-sec,.uk-td-cover + .uk-td-sec{margin-top:calc(var(--td-lap) * -1)}

.uk-td-body{position:relative;width:min(100%,var(--td-band));margin-inline:auto}
.uk-td-body > * + *{margin-top:16px}

/* THE SHEET MARK, written on the strip of the sheet that the lap leaves clear. */
.uk-td-mark{display:flex;align-items:baseline;gap:12px;margin:0 0 4px;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--td-mark)}
.uk-td-mark b{font-weight:700;font-variant-numeric:tabular-nums}
.uk-td-mark em{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.uk-td-title{max-width:var(--td-measure);font-family:var(--td-display);color:var(--td-ink);
  font-size:clamp(21px,5.2vw,28px);text-wrap:balance}
.uk-td-title.is-sm{font-size:clamp(16px,3.2vw,19px)}
.uk-td-copy,.uk-td-lead{max-width:var(--td-measure);color:var(--td-quiet)}
.uk-td-lead{font-family:var(--td-display);font-size:18px;color:var(--td-ink)}
.uk-td-copy{font-size:15px}

/* WHAT THE GUEST MUST ACT ON is set into the sheet a shade deeper. Its ring is a
   box-shadow so the panel does not grow by two pixels it did not ask for. */
.uk-td-seam{padding:16px 18px;box-shadow:inset 0 0 0 1px var(--td-line);background:var(--td-leaf);
  font-family:var(--td-sans);font-size:15px;color:var(--td-ink)}
.uk-td-seam dt,.uk-td-seam .uk-td-row-mark{margin:0 0 3px;font-size:10px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--td-mark)}
.uk-td-seam dd{margin:0 0 14px;color:var(--td-ink)}
.uk-td-seam dd:last-child{margin-bottom:0}
.uk-td-seam dd strong{display:block;font-weight:600;color:var(--td-ink)}
/* :where() AROUND THE WHOLE DESCENDANT PART. As ".uk-td-seam dd span" this is
   (0,2,1) and outranks the component class of anything placed inside a dd — the
   row of action buttons in this very panel is a <span class="uk-td-actions">, and
   two families shipped it laid out as a BLOCK with its row gap dead. Wrapping only
   the span leaves the dd outside and the rule is still (0,1,1), which still wins. */
.uk-td-seam :where(dd span){display:block;color:var(--td-quiet);font-size:13px}
.uk-td-seam .uk-td-actions{margin-top:12px}

/* THE HEAD STRIP — this family's way through, and it is at the HEAD of the screen.
   Every other release in this catalogue puts its control at the foot or along an
   edge. A laid sheet shows you what is under it, so this one names the sheet you
   are on and the sheet beneath it, and the second half is a link to it. Nothing
   else here tells the reader what is coming. */
.uk-td-folio{position:fixed;z-index:30;left:0;right:0;top:0;
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;
  min-height:44px;padding:0 var(--td-pad);border:0;border-radius:0;
  background:var(--td-sheet);color:var(--td-ink);cursor:pointer;text-decoration:none;
  box-shadow:0 4px 12px -2px var(--td-deep), inset 0 -1px 0 var(--td-line);
  font-family:var(--td-display);font-size:12px;text-align:left}
.uk-td-folio b{font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.16em;
  color:var(--td-mark);padding-right:8px}
.uk-td-folio span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  letter-spacing:.04em;font-size:13px}
/* the sheet underneath, named — the one thing no other family's control does */
.uk-td-folio em{display:block;font-style:normal;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--td-quiet);max-width:40vw;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uk-td-folio em::before{content:"↓ ";color:var(--td-mark)}
/* The board must not run under the fixed strip at the head of the document. */
.uk-td-sheet{padding-top:44px}

/* THE CONTENTS, set once in the flow. The head strip returns to it. */
.uk-td-contents{display:grid;gap:2px}
.uk-td-contents li{position:relative}
.uk-td-contents a{display:grid;grid-template-columns:2.6em minmax(0,1fr);column-gap:14px;
  align-items:baseline;min-height:36px;align-content:center;color:var(--td-ink);text-decoration:none}
.uk-td-contents b{font-weight:400;font-variant-numeric:tabular-nums;color:var(--td-mark);
  font-size:13px;letter-spacing:.1em}
.uk-td-contents span{font-size:15px}
.uk-td-contents li + li::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
  background:var(--td-line)}
.uk-td-contents li.is-here span{color:var(--td-mark)}
.uk-td-contents li.is-here b{font-weight:700}

/* GATE: the topmost sheet, lifted off the board ----------------------------- */
.uk-td-gate{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:20px;
  overflow:hidden;background:var(--td-board);color:var(--td-ink);
  transition:opacity .7s ease,visibility .7s ease}
.uk-td-gate.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.uk-td-gate-stage{position:relative;display:grid;place-items:center;width:100%}
/* one sheet, held above the board, with the edges of the ones beneath showing */
.uk-td-gate-panel{position:relative;z-index:2;display:grid;justify-items:center;
  width:min(100% - 32px,420px);padding:30px 24px 34px;text-align:center;
  background:var(--td-sheet);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72),
             0 18px 34px -8px rgba(18,15,10,.6),
             /* the two sheets still on the board under it */
             10px 12px 0 -4px var(--td-leaf), 10px 12px 0 -3px var(--td-deep),
             20px 24px 0 -8px var(--td-leaf), 20px 24px 0 -7px var(--td-deep)}
.uk-td-portrait{position:relative;width:100%;height:min(38svh,260px);overflow:hidden;
  background:var(--td-leaf);box-shadow:inset 0 0 0 1px var(--td-line)}
.uk-td-portrait img{width:100%;height:100%;object-fit:cover;
  object-position:var(--td-focus-mobile-x,50%) var(--td-focus-mobile-y,38%)}
.uk-td-gate-body{position:relative;width:100%;margin-top:22px}
.uk-td-gate-body > * + *{margin-top:14px}
.uk-td-gate-names{font-size:clamp(26px,7.2vw,38px)}
.uk-td-gate-date{display:flex;align-items:center;justify-content:center;gap:14px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--td-quiet)}
.uk-td-gate-date::before,.uk-td-gate-date::after{content:"";flex:1 1 auto;max-width:48px;
  height:1px;background:var(--td-line)}
.uk-td-couple-list{display:grid;gap:10px}
.uk-td-couple-list span{display:grid;gap:2px}
.uk-td-couple-list small{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--td-mark)}
.uk-td-couple-list strong{font-family:var(--td-display);font-size:18px;font-weight:600}
.uk-td-gate-open{display:flex;width:fit-content;margin-inline:auto;padding:13px 26px;
  border-color:transparent;background:var(--td-ink);color:var(--td-sheet);font-size:14px}
/* WHAT THE GATE DOES: the top sheet is lifted off and the board is what was under
   it. It goes UP and away, which is the one gesture this family has, run backwards. */
.uk-td-gate.is-drawn .uk-td-gate-panel{animation:uk-td-lift .85s cubic-bezier(.3,.9,.3,1) forwards}
@keyframes uk-td-lift{
  from{transform:translateY(0);opacity:1}
  to{transform:translateY(calc(var(--td-lap) * -1.6));opacity:0}}

/* COVER -------------------------------------------------------------------
   The one screen with a photograph on it, so the one screen that carries a dark
   register of its own — sheet and ink together, so no palette can leave the names
   the colour of the scrim behind them. */
.uk-td-cover{--td-sheet:#17150F;--td-leaf:#0C0A06;--td-ink:#F3EEDF;--td-quiet:#B8B09A;
  --td-mark:#DFA46B;--td-line:rgba(243,238,223,.22);--td-deep:rgba(0,0,0,.5);
  position:relative;z-index:var(--td-z);display:grid;min-height:100svh;
  background:var(--td-sheet);color:var(--td-ink)}
.uk-td-cover-media{position:absolute;inset:0;overflow:hidden}
.uk-td-cover-image{width:100%;height:100%;object-fit:cover;
  object-position:var(--td-focus-mobile-x,50%) var(--td-focus-mobile-y,38%)}
.uk-td-cover-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(23,21,15,.24) 0%,rgba(23,21,15,.76) 58%,#17150F 100%)}
.uk-td-cover-empty{position:absolute;inset:0;display:grid;place-items:center;background:#1C1912}
.uk-td-cover-empty-tone{position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(243,238,223,.1),transparent 60%)}
.uk-td-cover-empty-mark{position:relative;display:grid;place-items:center;height:60px;padding:0 20px;
  box-shadow:inset 0 0 0 1px var(--td-line);
  font-family:var(--td-display);font-size:21px;letter-spacing:.18em;color:var(--td-ink)}
.uk-td-cover-panel{position:relative;align-self:end;padding:48px var(--td-pad) 60px;text-align:center}
.uk-td-cover-panel > * + *{margin-top:14px}
.uk-td-cover-panel .uk-td-title{margin-inline:auto;font-size:clamp(29px,8.4vw,50px)}
.uk-td-cover-date{display:flex;align-items:center;justify-content:center;gap:14px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--td-quiet)}
.uk-td-cover-date::before,.uk-td-cover-date::after{content:"";flex:1 1 auto;max-width:48px;
  height:1px;background:var(--td-line)}
/* the cover's monogram. NOT .uk-td-mark: that name belongs to the sheet marks in
   the flow, and a second rule under the same name at the same specificity would
   silently turn every one of them into this box. */
.uk-td-monogram{display:grid;place-items:center;width:62px;height:62px;margin-inline:auto;
  box-shadow:inset 0 0 0 1px var(--td-mark);
  font-family:var(--td-display);font-size:14px;letter-spacing:.16em;color:var(--td-mark)}

/* People ------------------------------------------------------------------- */
.uk-td-people{display:grid;gap:22px}
.uk-td-person{display:flex;align-items:flex-start;gap:14px}
.uk-td-portrait-round{flex:0 0 auto;width:78px;height:78px;overflow:hidden;
  background:var(--td-leaf);box-shadow:0 3px 7px -2px var(--td-deep),inset 0 0 0 1px var(--td-line)}
.uk-td-portrait-round img{width:100%;height:100%;object-fit:cover}
.uk-td-portrait-round.is-empty{display:grid;place-items:center}
.uk-td-portrait-round.is-empty span{font-family:var(--td-display);font-size:25px;color:var(--td-mark)}
.uk-td-person h4{margin-top:2px;font-size:20px}
.uk-td-person > div > strong{display:block;margin-top:2px;font-size:14px;font-weight:600;color:var(--td-mark)}
.uk-td-parents{margin-top:8px;color:var(--td-quiet);font-size:14px}
.uk-td-parents span{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.uk-td-parents em{font-style:normal;padding:0 5px;color:var(--td-mark)}
.uk-td-bio{margin-top:8px;color:var(--td-quiet);font-size:14px}
.uk-td-chapter{margin-top:18px}
.uk-td-chapter > * + *{margin-top:10px}
.uk-td-couple-index{display:flex;flex-wrap:wrap;column-gap:8px;row-gap:8px}
.uk-td-couple-index button{display:inline-flex;align-items:center;gap:8px;min-height:46px;
  padding:9px 14px;border:1px solid var(--td-line);border-radius:var(--td-radius);
  background:transparent;cursor:pointer}
.uk-td-couple-index button span{font-family:var(--td-display);font-size:11px;letter-spacing:.12em;
  color:var(--td-mark)}
.uk-td-couple-index button.is-active{border-color:var(--td-ink);box-shadow:inset 0 0 0 1px var(--td-ink)}

/* Rows, events, streams ---------------------------------------------------- */
.uk-td-rows{display:grid}
.uk-td-row{position:relative;display:grid;gap:4px;padding:14px 0}
.uk-td-row + .uk-td-row{box-shadow:inset 0 1px 0 var(--td-line)}
.uk-td-row-mark{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--td-mark)}
.uk-td-row > div > * + *{margin-top:6px}
.uk-td-events{display:grid}
.uk-td-event{position:relative;display:grid;gap:4px;padding:16px 0}
.uk-td-event + .uk-td-event{box-shadow:inset 0 1px 0 var(--td-line)}
.uk-td-event > div > * + *{margin-top:8px}
.uk-td-scope{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:6px;
  font-size:12px;color:var(--td-quiet)}
.uk-td-scope strong{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--td-mark)}
.uk-td-map{width:100%;height:190px;border:0;box-shadow:inset 0 0 0 1px var(--td-line)}
.uk-td-actions{display:flex;flex-wrap:wrap;column-gap:8px;row-gap:8px}
.uk-td-streams{display:grid;gap:10px}
.uk-td-stream{position:relative;display:flex;align-items:center;gap:12px;min-height:56px;
  padding:10px 14px;box-shadow:inset 0 0 0 1px var(--td-line);color:var(--td-ink);text-decoration:none}
.uk-td-stream span{display:grid;flex:1;min-width:0}
.uk-td-stream small{font-size:12px;color:var(--td-quiet)}

/* Countdown ---------------------------------------------------------------- */
.uk-td-count{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  box-shadow:inset 0 0 0 1px var(--td-line)}
.uk-td-count div{position:relative;display:grid;align-content:center;padding:16px 8px;text-align:center}
.uk-td-count div + div::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;
  background:var(--td-line)}
.uk-td-count strong{display:block;font-family:var(--td-display);font-size:clamp(23px,6vw,30px);
  line-height:1.1;font-variant-numeric:tabular-nums}
.uk-td-count span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--td-quiet)}

/* PRINTS: the same law at the size of a photograph --------------------------
   Loose prints laid across the sheet, each one lapping the print before it by the
   same amount the sheets lap each other. It is the one decision read a second
   time, at a scale a reader meets head on. */
.uk-td-swatch-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--td-quiet)}
.uk-td-swatch-tools div{display:flex;column-gap:8px}
.uk-td-swatch-tools button{display:grid;place-items:center;width:46px;height:46px;
  border:1px solid var(--td-line);border-radius:var(--td-radius);background:transparent;cursor:pointer}
.uk-td-swatch{position:relative;display:flex;overflow-x:auto;padding:6px 0 16px;
  scroll-snap-type:x mandatory;scrollbar-width:none}
.uk-td-swatch::-webkit-scrollbar{display:none}
.uk-td-swatch-no{position:absolute;left:0;bottom:0;z-index:3;padding:2px 8px;
  background:var(--td-leaf);color:var(--td-mark);font-family:var(--td-display);font-size:11px;
  letter-spacing:.06em;font-variant-numeric:tabular-nums;box-shadow:inset 0 0 0 1px var(--td-line)}
.uk-td-figure{position:relative;flex:0 0 auto;width:min(66vw,250px);scroll-snap-align:start}
/* the prints lap each other, and the earlier one stays on top */
.uk-td-figure + .uk-td-figure{margin-left:calc(var(--td-lap) * -1)}
.uk-td-figure img{width:100%;height:var(--td-print,224px);object-fit:cover;background:var(--td-leaf);
  box-shadow:0 6px 12px -3px var(--td-deep), inset 0 0 0 1px var(--td-line)}
.uk-td-figure button{position:absolute;right:0;top:0;z-index:3;display:grid;place-items:center;
  width:46px;height:46px;border:0;background:var(--td-ink);color:var(--td-sheet);cursor:pointer}

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

/* A fixed light surface cannot inherit tokens that flip with the palette: on the
   dark board --td-ink is light, so ink on this strip would measure near 1:1. */
.uk-td-feedback{--td-sheet:#F1EBDC;--td-leaf:#E3D9C3;--td-ink:#262117;--td-quiet:#5A5243;
  --td-mark:#72441C;--td-line:rgba(38,33,23,.22);
  position:relative;z-index:29;display:flex;align-items:center;gap:10px;
  width:min(calc(100% - var(--td-pad) * 2),680px);margin:16px auto 0;min-height:52px;padding:10px 16px;
  box-shadow:inset 0 0 0 1px var(--td-line);background:var(--td-sheet);color:var(--td-ink);font-size:14px}

/* CLOSING: the last sheet on the board ------------------------------------- */
.uk-td-closing{position:relative;z-index:0;
  margin-inline:var(--td-reveal);margin-top:calc(var(--td-lap) * -1);
  padding:calc(var(--td-lap) + 56px) var(--td-pad) 76px;
  background:var(--td-sheet);color:var(--td-ink);text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72),
             0 10px 18px -4px var(--td-deep), 0 2px 4px var(--td-deep)}
.uk-td-closing-body{width:min(100%,var(--td-measure));margin-inline:auto}
.uk-td-closing-body > * + *{margin-top:16px}
.uk-td-closing .uk-td-title{margin-inline:auto;font-size:clamp(24px,6vw,34px)}
.uk-td-closing .uk-td-copy{margin-inline:auto}
.uk-td-closing-share{display:flex;flex-wrap:wrap;justify-content:center;column-gap:10px;row-gap:10px}

/* Controls rail, share dialog, lightbox, toast ----------------------------- */
.uk-td-rail{position:fixed;right:14px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:24;
  display:grid;gap:8px;justify-items:center}
.uk-td-rail-toggle,.uk-td-rail-panel button{display:grid;place-items:center;width:46px;height:46px;
  border:1px solid rgba(243,238,223,.26);border-radius:50%;background:#201C14;color:#F3EEDF;cursor:pointer}
.uk-td-rail-panel{display:grid;gap:8px;justify-items:center}
.uk-td-dialog,.uk-td-lightbox{position:fixed;inset:0;z-index:46;display:grid;place-items:center;
  padding:20px 16px;background:rgba(14,12,8,.9);opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease}
.uk-td-dialog.is-open,.uk-td-lightbox.is-open{opacity:1;visibility:visible}
.uk-td-dialog-panel{--td-sheet:#F1EBDC;--td-leaf:#E3D9C3;--td-ink:#262117;--td-quiet:#5A5243;
  --td-mark:#72441C;--td-line:rgba(38,33,23,.22);
  width:min(100%,430px);padding:22px;box-shadow:inset 0 0 0 1px var(--td-ink);
  /* reads the tokens it just declared rather than repeating their hex: two
     authorities on one colour drift apart the first time one of them is edited */
  background:var(--td-sheet);color:var(--td-ink)}
.uk-td-dialog-panel > * + *{margin-top:14px}
.uk-td-dialog-panel h2{font-size:21px}
.uk-td-share-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:9px;row-gap:9px}
.uk-td-share-grid button{display:flex;align-items:center;gap:8px;min-height:46px;padding:11px 13px;
  border:1px solid var(--td-line);border-radius:var(--td-radius);background:transparent;color:inherit;
  cursor:pointer;font-size:13px}
.uk-td-dialog-close{width:100%}
.uk-td-lightbox-panel{position:relative;width:min(100%,780px)}
.uk-td-lightbox-panel img{width:100%;max-height:76svh;object-fit:contain;transition:opacity .2s ease}
.uk-td-lightbox.is-switching .uk-td-lightbox-panel img{opacity:0}
.uk-td-lightbox-counter{margin-top:12px;color:#F3EEDF;font-size:12px;letter-spacing:.16em;text-align:center}
.uk-td-lightbox-close,.uk-td-lightbox-prev,.uk-td-lightbox-next{position:absolute;display:grid;
  place-items:center;width:46px;height:46px;border:0;border-radius:50%;background:#201C14;
  color:#F3EEDF;cursor:pointer}
.uk-td-lightbox-close{top:-56px;right:0}
.uk-td-lightbox-prev{left:6px;top:50%;transform:translateY(-50%)}
.uk-td-lightbox-next{right:6px;top:50%;transform:translateY(-50%)}
.uk-td-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;background:#201C14;color:#F3EEDF;
  font-size:13px;pointer-events:none;transition:opacity .3s ease,transform .3s ease}
.uk-td-toast.is-visible{opacity:1;transform:translate(-50%,0)}

/* MOTION: A SHEET IS LAID DOWN --------------------------------------------
   It comes from one lap above where it belongs and settles onto the board, which
   is the gate's gesture run forwards. The distance is the lap — the same number
   the whole page is built on — so nothing here invents a length of its own.

   ONE rule declares it. Written as one rule per state it would be two classes
   each, and the single-class rule that puts a sheet down would lose, so every
   sheet would stand one lap high for good with each rule still reading correct. */
.uk-td-reveal{opacity:0;transition:opacity .5s ease,transform .62s cubic-bezier(.2,.8,.25,1)}
.uk-td-body.uk-td-reveal,.uk-td-cover.uk-td-reveal,.uk-td-closing.uk-td-reveal{
  transform:translateY(calc(var(--td-lap) * -.4))}
.uk-td-reveal.is-visible{opacity:1;transform:none}
.uk-td-reveal-item{opacity:0;transform:translateY(calc(var(--td-lap) * -.25));
  transition:opacity .5s ease var(--td-lag,0ms),transform .5s ease var(--td-lag,0ms)}
.uk-td-reveal.is-visible .uk-td-reveal-item{opacity:1;transform:none}
.uk-td-reveal-item:nth-child(2){--td-lag:calc(var(--td-lag-step,0ms) * 1)}
.uk-td-reveal-item:nth-child(3){--td-lag:calc(var(--td-lag-step,0ms) * 2)}
.uk-td-reveal-item:nth-child(4){--td-lag:calc(var(--td-lag-step,0ms) * 3)}
.uk-td-reveal-item:nth-child(n+5){--td-lag:calc(var(--td-lag-step,0ms) * 4)}

/* Design controls ---------------------------------------------------------- */
/* "Template" is the family's OWN colours, so it restates the tokens at the head of
   this file rather than a near-miss of them. Every palette declares every token: a
   palette that sets four and leaves the mark behind leaves it at the template's
   value, which on the dark board is the one colour nobody looked at. */
.uk-design-palette-template.uk-tindih{--td-board:#54534C;--td-sheet:#F6F1E4;--td-leaf:#EBE3D0;--td-ink:#231F16;--td-quiet:#575043;--td-mark:#7C4A20;--td-line:rgba(34,30,23,.2);--td-deep:rgba(18,15,10,.44)}
.uk-design-palette-warm.uk-tindih{--td-board:#6B5436;--td-sheet:#FBF3DE;--td-leaf:#F0E4C6;--td-ink:#2A2109;--td-quiet:#64563A;--td-mark:#8A4C06;--td-line:rgba(42,33,9,.2);--td-deep:rgba(28,20,6,.46)}
.uk-design-palette-romantic.uk-tindih{--td-board:#7A5B58;--td-sheet:#FBEFE8;--td-leaf:#F0DACF;--td-ink:#30201C;--td-quiet:#6D4B40;--td-mark:#9B3B38;--td-line:rgba(48,32,28,.2);--td-deep:rgba(32,20,18,.44)}
.uk-design-palette-sage.uk-tindih{--td-board:#4C5A4A;--td-sheet:#F1F4E9;--td-leaf:#DFE6D2;--td-ink:#1B2616;--td-quiet:#4A5838;--td-mark:#2C5726;--td-line:rgba(27,38,22,.2);--td-deep:rgba(16,24,13,.44)}
/* After dark the board is nearly black and the sheets go to a warm grey. Board,
   sheet and ink flip together in one rule, so nothing is left the colour of what
   is behind it, and the hairline — an rgba of the INK — becomes light on a dark
   sheet, which a fixed dark rgba never could. */
.uk-design-palette-midnight.uk-tindih{--td-board:#141310;--td-sheet:#2E2B25;--td-leaf:#242118;--td-ink:#F1ECDD;--td-quiet:#B3AB96;--td-mark:#DDA86C;--td-line:rgba(241,236,221,.2);--td-deep:rgba(0,0,0,.6)}

.uk-design-type-classic .uk-td-title,.uk-design-type-classic .uk-td-gate-names{font-family:var(--td-display)}
.uk-design-type-modern .uk-td-title,.uk-design-type-modern .uk-td-gate-names{font-family:var(--td-sans);letter-spacing:.02em}
.uk-design-type-editorial .uk-td-title{font-size:clamp(24px,6.2vw,34px);letter-spacing:-.01em}
.uk-design-type-editorial .uk-td-cover-panel .uk-td-title{font-size:clamp(32px,9.4vw,58px);letter-spacing:-.02em}

/* COMPOUND, not descendant. The design classes are printed onto the SAME element
   as .uk-tindih, so ".uk-design-surface-soft .uk-tindih" asks for a root inside a
   root and matches nothing: measured in nine shipped releases, all three presets
   left their tokens where the root put them and moved nothing at all.
   Here SURFACE IS THE LAP. A hand that lays sheets close and a hand that lays them
   loose are the only two ways to lay sheets, and the choice is measurable: the
   document gets shorter by (n - 1) times the difference. It cannot be dead,
   because the one rule that spaces two sections reads it. */
.uk-design-surface-soft.uk-tindih{--td-lap:24px}
.uk-design-surface-balanced.uk-tindih{--td-lap:40px}
.uk-design-surface-sharp.uk-tindih{--td-lap:58px}

/* The gallery presets are descendants of the root, which is where the design class
   is printed, so these selectors do match. The prints lap each other in every one
   of them; what changes is how big a print is. */
.uk-design-gallery-grid.uk-tindih{--td-print:172px}
.uk-design-gallery-grid .uk-td-figure{width:min(48vw,186px)}
.uk-design-gallery-filmstrip.uk-tindih{--td-print:224px}
.uk-design-gallery-filmstrip .uk-td-figure{width:min(66vw,250px)}
.uk-design-gallery-editorial.uk-tindih{--td-print:288px}
.uk-design-gallery-editorial .uk-td-figure{width:min(82vw,330px)}

/* MOTION SETS THE ORDER, NOT THE GESTURE. The gesture is a sheet being laid down,
   which is the signature; a preset that replaced it would overwrite the identity.
   Soft lays a sheet's blocks together, cinematic lays them one after another, and
   minimal lays nothing at all.
   These three previously set --td-settle and --td-travel, which no rule in this
   file reads: soft and cinematic were byte-for-byte the same page. */
.uk-design-motion-soft.uk-tindih{--td-lag-step:40ms}
.uk-design-motion-cinematic.uk-tindih{--td-lag-step:110ms}
.uk-design-motion-minimal.uk-tindih{--td-lag-step:0ms}
/* And stillness is not a slow lay: a sheet caught above the board on a machine
   that asked for no motion is a page stuck mid-gesture. */
.uk-design-motion-minimal .uk-td-reveal,
.uk-design-motion-minimal .uk-td-body.uk-td-reveal,
.uk-design-motion-minimal .uk-td-cover.uk-td-reveal,
.uk-design-motion-minimal .uk-td-closing.uk-td-reveal,
.uk-design-motion-minimal .uk-td-reveal-item{opacity:1;transform:none;transition:none}
.uk-design-motion-minimal .uk-td-gate.is-drawn .uk-td-gate-panel{animation:none}

/* Wider viewports ---------------------------------------------------------- */
@media(min-width:760px){
.uk-tindih{font-size:17px;--td-band:40em;--td-reveal:22px;--td-shift:10px}
/* The band is sized on the wider of the two, so a side-by-side block has somewhere
   to go and the prose still starts where it always did. */
.uk-td-sec{padding-inline:max(var(--td-pad),calc((100% - var(--td-band)) / 2))}
.uk-td-portrait{height:min(34svh,280px)}
.uk-td-portrait img,.uk-td-cover-media .uk-td-cover-image{
  object-position:var(--td-focus-desktop-x,50%) var(--td-focus-desktop-y,42%)}
.uk-td-cover-panel{padding:64px var(--td-pad) 78px}
.uk-td-closing{padding:calc(var(--td-lap) + 80px) var(--td-pad) 100px}
.uk-td-people{gap:26px;grid-template-columns:repeat(2,minmax(0,1fr))}
/* An odd last person takes the row and is centred, so a pair never ends with
   somebody hanging in the left column — capped, because one portrait stretched
   across a desktop page is a banner. */
.uk-td-people>*:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:min(100%,400px)}
.uk-td-portrait-round{width:92px;height:92px}
}
@media(min-width:1100px){
.uk-td-closing{padding:calc(var(--td-lap) + 96px) var(--td-pad) 118px}
}

/* Narrow phones ------------------------------------------------------------ */
@media(max-width:400px){
.uk-tindih{--td-reveal:6px;--td-shift:4px}
.uk-td-count{grid-template-columns:repeat(2,minmax(0,1fr))}
/* two columns means two rows, and the hairline between the columns must not be
   drawn down the first cell of the second row */
.uk-td-count div:nth-child(odd)::before{display:none}
}
@media(max-width:560px){
.uk-td-share-grid{grid-template-columns:minmax(0,1fr)}
.uk-td-lightbox-close{top:auto;bottom:-56px;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-td-cover-panel{padding:24px var(--td-pad) 30px}
.uk-td-cover-panel .uk-td-title{font-size:clamp(22px,5.2vw,30px)}
.uk-td-cover-empty-mark{height:48px;font-size:17px}
.uk-td-gate{padding:12px}
.uk-td-portrait{height:min(26svh,150px)}
.uk-td-gate-panel{padding:18px 20px 22px}
.uk-td-gate-body{margin-top:14px}
.uk-td-gate-names{font-size:clamp(20px,4.4vw,26px)}
.uk-td-rail{bottom:calc(10px + env(safe-area-inset-bottom))}
}
@media(max-height:620px) and (min-width:1025px){
.uk-td-portrait{height:min(30svh,210px)}
}

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