/* Tirta — Romance Flagship 1.0.0
 * A wedding invitation set on still water. The gate is a cover standing on its
 * own reflection; every section is split by a waterline with an inverted echo of
 * its heading beneath it; the gallery is photos each standing on their own
 * reflection; and the chapters are ripple rings down the left edge.
 *
 * Every surface declares its own water AND its own ink in the same rule, so a
 * palette can never leave text the colour of what is behind it.
 *
 * Two things here are easy to get wrong and invisible in a stylesheet read. A
 * reflection drawn in the colour of the surface behind it draws nothing — the
 * same trap that made three earlier templates ship a decoration nobody could
 * see. And a <figure> that never resets the browser's own margin loses 80px of
 * every gallery column, which is how three shipped templates ended up with
 * photos the size of a thumbnail on a phone.
 */

/* Tokens ------------------------------------------------------------------- */
.uk-tirta{
  --ti-water:#F2F6F7;--ti-ink:#1F2A2E;--ti-mist:#5C6B6E;--ti-teal:#2C6B72;--ti-sand:#8A5B34;
  --ti-line:rgba(31,42,46,.14);--ti-card:rgba(255,255,255,.66);--ti-deep:#E2EBED;
  --ti-radius:14px;--ti-radius-sm:9px;--ti-measure:58ch;
  --ti-echo:34px;          /* how far the reflection falls below the waterline */
  --ti-col-w:46px;         /* the ripple column's own gutter, reserved by every section */
  --ti-lift:24px;
  --ti-display:"Lora",Georgia,Cambria,"Times New Roman",serif;
  --ti-sans:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  position:relative;background:var(--ti-water);color:var(--ti-ink);
  font-family:var(--ti-sans);font-size:16px;line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
[hidden]{display:none !important}
.uk-tirta *,.uk-tirta *::before,.uk-tirta *::after{box-sizing:border-box}
.uk-tirta 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. */
.uk-tirta figure{margin:0}
.uk-tirta h1,.uk-tirta h2,.uk-tirta h3,.uk-tirta h4{font-family:var(--ti-display);font-weight:600;line-height:1.2;margin:0}
.uk-tirta p{margin:0}
/* :where() so this stays a DEFAULT. As ".uk-tirta button" it was (0,1,1)
   and outranked every button rule written as a single class, so 6 declared
   button colours in this file never applied and those buttons took the page
   ink instead — including the lightbox controls on their dark scrim. */
.uk-tirta :where(button){font-family:inherit;color:inherit}
#uk-ti-content{padding-top:0}

/* Shared type and ornament ------------------------------------------------- */
.uk-ti-eyebrow{font-size:11px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--ti-teal)}
.uk-ti-rule{display:block;width:min(100%,78px);height:1px;margin:10px 0;background:var(--ti-teal);opacity:.6}
.uk-ti-rule.is-center{margin-left:auto;margin-right:auto}
.uk-ti-copy{max-width:var(--ti-measure);margin-top:14px;color:var(--ti-mist);font-size:15px}
.uk-ti-lead{max-width:var(--ti-measure);margin-top:12px;font-family:var(--ti-display);font-size:20px;color:var(--ti-ink)}
.uk-ti-preline{white-space:pre-line}
.uk-ti-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.uk-ti-signature{margin-top:16px;font-family:var(--ti-display);font-size:22px;color:var(--ti-ink)}
.uk-ti-quote{max-width:var(--ti-measure);margin-top:20px;padding:16px 20px;border-left:2px solid var(--ti-teal);background:var(--ti-card);border-radius:0 var(--ti-radius-sm) var(--ti-radius-sm) 0;color:var(--ti-ink);font-family:var(--ti-display);font-size:17px;font-style:italic}
.uk-ti-quote cite{display:block;margin-top:10px;font-family:var(--ti-sans);font-size:12px;font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--ti-mist)}
.uk-ti-occasions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin-top:12px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ti-mist)}
.uk-ti-occasions span+span::before{content:"◇";padding-right:6px;font-size:10px;color:var(--ti-sand)}
.uk-ti-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border:1px solid var(--ti-teal);border-radius:999px;background:transparent;color:var(--ti-ink);font-size:13px;font-weight:600;letter-spacing:.06em;text-decoration:none;cursor:pointer;transition:transform .25s ease,background .25s ease}
.uk-ti-button:hover{transform:translateY(-1px);background:var(--ti-card)}
.uk-ti-button.is-solid{border-color:transparent;background:var(--ti-teal);color:#F4FAFA}
.uk-ti-button:focus-visible,.uk-tirta button:focus-visible,.uk-tirta a:focus-visible{outline:2px solid var(--ti-sand);outline-offset:3px}

/* THE WATERLINE AND ITS ECHO ----------------------------------------------
   The signature. A panel's heading is repeated once, flipped, and faded out
   downward — a reflection in still water. The echo is drawn in the ink colour,
   never in the water colour: ink-on-water at low opacity reads as a reflection,
   water-on-water reads as nothing at all. */
.uk-ti-waterline{position:relative;display:block;height:1px;margin:0;
  background:linear-gradient(90deg,transparent,var(--ti-teal) 18%,var(--ti-teal) 82%,transparent);opacity:.42}
.uk-ti-waterline::after{content:"";position:absolute;left:0;right:0;top:1px;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent)}
/* The echo repeats the label above it verbatim, so its type has to match the
   label's exactly or it stops reading as a reflection and starts reading as a
   second, stranger heading. Drawn in the ink colour at low opacity: ink on
   water reads as a reflection, water on water draws nothing at all. */
.uk-ti-echo{display:block;overflow:hidden;height:var(--ti-echo);margin-top:3px;pointer-events:none;
  color:var(--ti-ink);opacity:.22;
  font-size:11px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
  transform:scaleY(-1);transform-origin:top center;
  -webkit-mask-image:linear-gradient(to top,transparent,#000 78%);
  mask-image:linear-gradient(to top,transparent,#000 78%)}

/* GATE: a cover standing on its own reflection ----------------------------
   The reflection is a row below the card, never over it, so the way in cannot
   be covered by the thing that opens. */
.uk-ti-gate{--ti-water:#121B1E;--ti-ink:#EAF1F2;--ti-mist:#A9BABD;--ti-teal:#7FBCC4;--ti-sand:#D9A871;--ti-line:rgba(234,241,242,.22);--ti-card:rgba(255,255,255,.06);
  position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:20px;background:#0C1416;color:var(--ti-ink);transition:opacity .7s ease,visibility .7s ease}
.uk-ti-gate.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.uk-ti-pool{position:relative;display:grid;grid-template-rows:auto auto auto;align-items:start;width:min(100%,440px)}
.uk-ti-card{position:relative;z-index:2;grid-row:1;display:grid;grid-template-rows:auto auto;overflow:hidden;border:1px solid var(--ti-line);border-radius:var(--ti-radius);background:#182427}
.uk-ti-surface{position:relative;z-index:2;grid-row:2;height:1px;margin:0;background:linear-gradient(90deg,transparent,var(--ti-teal),transparent);opacity:.7}
/* The gate's own reflection: a flipped, faded copy of the card, in its own row
   beneath. A row, not an overlay — an overlay is how an invitation ends up with
   no reachable way in. */
.uk-ti-mirror{position:relative;z-index:1;grid-row:3;height:clamp(54px,12svh,104px);overflow:hidden;pointer-events:none;
  border-radius:0 0 var(--ti-radius) var(--ti-radius);
  background:linear-gradient(180deg,#182427,rgba(24,36,39,0));opacity:.5;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent);mask-image:linear-gradient(to bottom,#000,transparent)}
.uk-ti-mirror::after{content:"";position:absolute;left:0;right:0;top:0;bottom:0;
  background:repeating-linear-gradient(180deg,rgba(234,241,242,.09) 0 1px,transparent 1px 7px)}
.uk-ti-portrait{position:relative;height:min(40svh,272px);overflow:hidden;background:#1E2C30}
.uk-ti-portrait img{width:100%;height:100%;object-fit:cover;object-position:var(--ti-focus-mobile-x,50%) var(--ti-focus-mobile-y,38%)}
.uk-ti-gate-body{position:relative;padding:26px 22px 24px;text-align:center}
.uk-ti-gate-body h1{margin-top:8px;font-size:clamp(27px,7.6vw,42px)}
.uk-ti-gate-date{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:7px 16px;border:1px solid var(--ti-line);border-radius:999px;font-size:12px;letter-spacing:.08em;color:var(--ti-mist)}
.uk-ti-couple-list{display:grid;gap:8px;margin-top:14px}
.uk-ti-couple-list span{display:grid;gap:2px}
.uk-ti-couple-list small{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ti-mist)}
.uk-ti-couple-list strong{font-family:var(--ti-display);font-size:18px;font-weight:600}
.uk-ti-gate-open{margin-top:18px;padding:13px 24px;border-color:transparent;background:var(--ti-teal);color:#0B1719;font-size:14px}
/* The ripple the gate sends out when it is touched. */
.uk-ti-ripple{position:absolute;left:50%;top:50%;z-index:0;width:10px;height:10px;margin:-5px 0 0 -5px;border:1px solid var(--ti-teal);border-radius:50%;opacity:0;pointer-events:none}
.uk-ti-gate.is-touched .uk-ti-ripple{animation:uk-ti-spread .9s ease-out forwards}
@keyframes uk-ti-spread{from{opacity:.6;transform:scale(1)}to{opacity:0;transform:scale(46)}}

/* COVER -------------------------------------------------------------------- */
.uk-ti-cover{--ti-water:#141E21;--ti-ink:#EAF1F2;--ti-mist:#B3C3C6;--ti-teal:#7FBCC4;--ti-sand:#D9A871;--ti-line:rgba(234,241,242,.24);
  position:relative;display:grid;min-height:100svh;background:var(--ti-water);color:var(--ti-ink)}
.uk-ti-cover-media{position:absolute;inset:0;overflow:hidden}
.uk-ti-cover-image{width:100%;height:100%;object-fit:cover;object-position:var(--ti-focus-mobile-x,50%) var(--ti-focus-mobile-y,38%)}
.uk-ti-cover-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,30,33,.28) 0%,rgba(20,30,33,.74) 60%,#141E21 100%)}
.uk-ti-cover-empty{position:absolute;inset:0;display:grid;place-items:center;background:#162326}
.uk-ti-cover-empty-grid{position:absolute;inset:0;background-image:repeating-linear-gradient(180deg,rgba(127,188,196,.11) 0 1px,transparent 1px 26px)}
.uk-ti-cover-empty-mark{position:relative;font-family:var(--ti-display);font-size:23px;letter-spacing:.2em;padding:10px 18px;border:1px solid var(--ti-line);border-radius:999px;color:#EAF1F2}
.uk-ti-cover-panel{position:relative;align-self:end;padding:40px calc(var(--ti-col-w) + 12px) 56px;text-align:center}
.uk-ti-cover-panel h1{margin-top:8px;font-size:clamp(29px,8.4vw,52px)}
.uk-ti-cover-date{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:7px 16px;border:1px solid var(--ti-line);border-radius:999px;font-size:12px;letter-spacing:.08em;color:var(--ti-mist)}

/* THE POOL: panels split by a waterline -----------------------------------
   The ripple column owns the left gutter and every section reserves it, at
   every breakpoint, so no line of text can run underneath the rings. */
.uk-ti-sec{position:relative;padding:0 14px 26px calc(var(--ti-col-w) + 10px);background:var(--ti-water);scroll-margin-top:16px}
.uk-ti-panel{position:relative;width:min(100%,780px);margin-inline:auto;
  padding:30px 24px 26px;color:var(--ti-ink);
  background:var(--ti-card);border:1px solid var(--ti-line);
  border-radius:var(--ti-radius);box-shadow:0 12px 26px rgba(31,42,46,.07)}
/* The panel's own reflection band, below its content, in the deeper water. */
.uk-ti-panel::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--ti-echo);pointer-events:none;
  border-radius:0 0 var(--ti-radius) var(--ti-radius);
  background:linear-gradient(180deg,rgba(255,255,255,0),var(--ti-deep));opacity:.55}
.uk-ti-mark{position:absolute;right:18px;top:16px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ti-mist)}
.uk-ti-head{position:relative;z-index:1;margin-bottom:14px}
/* The reading column is capped so a line never runs too long, and centred so a
   wide panel is not left with an empty half beside it. */
.uk-ti-head,.uk-ti-body{max-width:min(100%,620px);margin-inline:auto}
.uk-ti-body{position:relative;z-index:1}
.uk-ti-body h2{font-size:clamp(22px,5.2vw,32px)}
.uk-ti-body h3{font-size:18px}
.uk-ti-body h4{font-size:17px}
.uk-ti-narrow{width:min(100%,600px);margin-inline:auto;text-align:center}

/* Entries (story, agenda) -------------------------------------------------- */
.uk-ti-entries{position:relative;list-style:none;display:grid;gap:14px;margin:22px 0 0;padding:0}
.uk-ti-entry{position:relative;padding:15px 18px 15px 26px;border:1px solid var(--ti-line);border-radius:var(--ti-radius-sm);background:var(--ti-card)}
.uk-ti-entry-mark{position:absolute;left:10px;top:20px;width:8px;height:8px;border:1px solid var(--ti-teal);border-radius:50%}
.uk-ti-entry-label{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ti-teal)}
.uk-ti-entry h3{margin-top:4px}
.uk-ti-entry p{margin-top:6px;color:var(--ti-mist);font-size:15px}

/* People ------------------------------------------------------------------- */
.uk-ti-people{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px;margin-top:22px}
.uk-ti-person{text-align:center}
.uk-ti-portrait-round{width:134px;height:134px;margin:0 auto 12px;overflow:hidden;border:1px solid var(--ti-teal);border-radius:50%;background:var(--ti-card)}
.uk-ti-portrait-round img{width:100%;height:100%;object-fit:cover}
.uk-ti-portrait-round.is-empty{display:grid;place-items:center}
.uk-ti-portrait-round.is-empty span{font-family:var(--ti-display);font-size:34px;color:var(--ti-teal)}
.uk-ti-person h4{margin-top:8px;font-size:21px}
.uk-ti-person>strong{display:block;margin-top:2px;font-size:14px;font-weight:600;color:var(--ti-mist)}
.uk-ti-parents{margin-top:8px;color:var(--ti-mist);font-size:14px}
.uk-ti-parents em{font-style:normal;padding:0 5px;color:var(--ti-sand)}
.uk-ti-bio{margin-top:8px;color:var(--ti-mist);font-size:14px}
.uk-ti-couples{display:grid;gap:26px;margin-top:20px}
.uk-ti-couple{margin-top:26px}
.uk-ti-couple header{text-align:center;margin-bottom:14px}
.uk-ti-couple header span{font-family:var(--ti-display);font-size:25px;color:var(--ti-teal)}
.uk-ti-couple-index{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
.uk-ti-couple-index button{padding:7px 14px;border:1px solid var(--ti-line);border-radius:999px;background:transparent;cursor:pointer}
.uk-ti-couple-index button span{font-size:11px;letter-spacing:.12em;color:var(--ti-teal)}

/* Events ------------------------------------------------------------------- */
.uk-ti-events{display:grid;gap:16px;margin-top:20px}
.uk-ti-event{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;padding:20px;border:1px solid var(--ti-line);border-radius:var(--ti-radius-sm);background:var(--ti-card)}
.uk-ti-event-mark{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--ti-teal);border-radius:50%;color:var(--ti-teal)}
.uk-ti-event-body{min-width:0}
.uk-ti-event h3{margin-top:4px;font-size:21px}
.uk-ti-when{margin-top:6px;font-weight:600}
.uk-ti-address{margin-top:4px;color:var(--ti-mist);font-size:14px}
.uk-ti-scope{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;font-size:12px;color:var(--ti-mist)}
.uk-ti-scope strong{padding:3px 9px;border:1px solid var(--ti-line);border-radius:999px;font-weight:600;color:var(--ti-ink)}
.uk-ti-map{width:100%;height:190px;margin-top:12px;border:1px solid var(--ti-line);border-radius:var(--ti-radius-sm)}
.uk-ti-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

/* Countdown ---------------------------------------------------------------- */
.uk-ti-count{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:20px}
.uk-ti-count div{padding:14px 8px;border:1px solid var(--ti-line);border-radius:var(--ti-radius-sm);background:var(--ti-card);text-align:center}
.uk-ti-count strong{display:block;font-family:var(--ti-display);font-size:29px;line-height:1.1}
.uk-ti-count span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ti-mist)}

/* GALLERY: each photo standing on its own reflection ----------------------
   The reflection is a second copy of the photo, flipped and faded into the
   water. It is a child of the tile, so it can never be mistaken for the photo
   itself by a lightbox or a screen reader. */
.uk-ti-gallery-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ti-mist)}
.uk-ti-gallery-tools div{display:flex;gap:8px}
.uk-ti-gallery-tools button{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--ti-line);border-radius:var(--ti-radius-sm);background:transparent;cursor:pointer}
.uk-ti-gallery{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px;margin-top:22px}
.uk-ti-plate{position:relative;display:grid;grid-template-rows:auto auto;margin:0;overflow:visible}
.uk-ti-plate>img{width:100%;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--ti-line);border-radius:var(--ti-radius-sm) var(--ti-radius-sm) 0 0;background:var(--ti-deep)}
/* The waterline the photo stands on. */
.uk-ti-plate::after{content:"";position:absolute;left:0;right:0;top:calc(100% - var(--ti-echo));height:1px;
  background:linear-gradient(90deg,transparent,var(--ti-teal),transparent);opacity:.5;pointer-events:none}
/* The fade lives on the container, not on the image. A mask is applied in the
   element's own coordinate space and the transform is applied after it, so a
   "to bottom" gradient on a scaleY(-1) image arrives on screen opaque at the
   bottom and transparent at the top — and the top is the only part the 34px
   window shows. Measured: a reflection that varied from the water by two units
   of luminance, which is nothing. The container is never flipped, so the fade
   here means what it says. */
.uk-ti-reflect{height:var(--ti-echo);overflow:hidden;border-radius:0 0 var(--ti-radius-sm) var(--ti-radius-sm);
  -webkit-mask-image:linear-gradient(to bottom,#000,rgba(0,0,0,.15));
  mask-image:linear-gradient(to bottom,#000,rgba(0,0,0,.15))}
/* The default transform-origin, deliberately. With origin at the top the
   flipped copy is mapped entirely ABOVE its own container and overflow:hidden
   throws all of it away — measured as a blank 240x34 strip. Flipped about its
   centre the box stays where it was laid out, and the visible top of the window
   shows the photo's bottom edge mirrored, which is what water does. */
.uk-ti-reflect img{width:100%;aspect-ratio:4/5;object-fit:cover;transform:scaleY(-1);
  opacity:.5;filter:blur(1px) saturate(.88)}
.uk-ti-plate button{position:absolute;right:8px;top:8px;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:rgba(18,27,30,.74);color:#F2F6F7;cursor:pointer}
/* An odd last photo stands centred rather than leaving half the pool empty. */
.uk-ti-plate:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:min(100%,330px)}

/* Gift, contacts, FAQ ------------------------------------------------------ */
.uk-ti-streams{display:grid;gap:10px;margin-top:18px}
.uk-ti-streams a{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--ti-line);border-radius:var(--ti-radius-sm);background:var(--ti-card);color:var(--ti-ink);text-decoration:none}
.uk-ti-streams a span{display:grid;flex:1}
.uk-ti-streams a strong{font-size:14px}
.uk-ti-streams a small{font-size:12px;color:var(--ti-mist)}
.uk-ti-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.uk-ti-tabs button{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border:1px solid var(--ti-line);border-radius:999px;background:transparent;font-size:12px;font-weight:600;cursor:pointer}
.uk-ti-tabs button.is-active{border-color:var(--ti-teal);background:var(--ti-card)}
.uk-ti-gift-panel{margin-top:16px}
.uk-ti-accounts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.uk-ti-accounts>*:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:min(100%,400px)}
.uk-ti-accounts article{padding:16px;border:1px solid var(--ti-line);border-radius:var(--ti-radius-sm);background:var(--ti-card);text-align:center}
.uk-ti-accounts strong{display:block;margin-top:6px;font-family:var(--ti-display);font-size:20px;letter-spacing:.05em}
.uk-ti-accounts article p{margin-top:4px;font-size:13px;color:var(--ti-mist)}
.uk-ti-accounts article .uk-ti-button{margin-top:12px}
.uk-ti-address-card{padding:18px;border:1px dashed var(--ti-teal);border-radius:var(--ti-radius-sm);background:var(--ti-card);text-align:center}
.uk-ti-address-card strong{display:block;margin-top:6px;font-family:var(--ti-display);font-size:18px}
.uk-ti-address-card p{margin-top:6px;font-size:14px;color:var(--ti-mist)}
.uk-ti-contacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}
.uk-ti-contacts>*:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:min(100%,400px)}
.uk-ti-contacts article{padding:16px;border:1px solid var(--ti-line);border-radius:var(--ti-radius-sm);background:var(--ti-card);text-align:center}
.uk-ti-contacts strong{display:block;margin-top:6px;font-size:15px}
.uk-ti-contacts article p{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:6px;font-size:13px;color:var(--ti-mist)}
.uk-ti-contacts article .uk-ti-button{margin-top:12px}
.uk-ti-hashtags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px}
.uk-ti-hashtags button{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border:1px solid var(--ti-line);border-radius:999px;background:transparent;font-size:12px;cursor:pointer}
.uk-ti-faq{display:grid;gap:10px;margin-top:18px}
.uk-ti-faq details{padding:14px 16px;border:1px solid var(--ti-line);border-radius:var(--ti-radius-sm);background:var(--ti-card)}
.uk-ti-faq summary{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;font-weight:600;list-style:none}
.uk-ti-faq summary::-webkit-details-marker{display:none}
.uk-ti-faq p{margin-top:8px;color:var(--ti-mist);font-size:15px}
.uk-ti-dress{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.uk-ti-video{width:100%;aspect-ratio:16/9;margin-top:16px;border:1px solid var(--ti-line);border-radius:var(--ti-radius-sm)}
.uk-ti-engagement .uk-ti-body{margin-top:4px}
.uk-ti-feedback{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(44,107,114,.32);border-radius:var(--ti-radius-sm);background:#E7F1F2;color:#183034;font-size:14px}

/* CLOSING ------------------------------------------------------------------ */
.uk-ti-closing{--ti-water:#162225;--ti-ink:#EAF1F2;--ti-mist:#B0C1C4;--ti-teal:#7FBCC4;--ti-sand:#D9A871;--ti-line:rgba(234,241,242,.22);--ti-card:rgba(255,255,255,.07);--ti-deep:#0E181A;
  position:relative;padding:72px calc(var(--ti-col-w) + 12px) 88px;
  background:var(--ti-water);color:var(--ti-ink);text-align:center;scroll-margin-top:16px}
.uk-ti-closing h2{font-size:clamp(24px,6vw,36px)}
.uk-ti-closing-mark{display:grid;place-items:center;width:60px;height:60px;margin:20px auto 0;border:1px solid var(--ti-teal);border-radius:50%;font-family:var(--ti-display);font-size:14px;letter-spacing:.16em;color:var(--ti-teal)}
.uk-ti-closing-share{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}

/* THE RIPPLE COLUMN: chapters as rings down the left edge ------------------
   The chapter being read widens its ring. A ring is drawn inside a full-height
   row of the column's own width, not the ring itself, so every chapter is a
   real target to press. */
.uk-ti-column{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:26;display:flex;flex-direction:column;align-items:center;
  width:var(--ti-col-w);max-width:var(--ti-col-w);max-height:88svh;
  padding:8px 0;background:rgba(18,27,30,.92);border-right:1px solid rgba(127,188,196,.4);color:#EAF1F2}
.uk-ti-column-line{position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(127,188,196,.42);transform:translateX(-50%)}
/* The fill that tracks how far down the page the reader has come. */
.uk-ti-column-fill{position:absolute;left:50%;top:0;width:3px;height:var(--ti-progress,0%);background:var(--ti-teal);opacity:.55;transform:translateX(-50%);transition:height .25s ease}
.uk-ti-rings{position:relative;list-style:none;display:grid;gap:0;margin:0;padding:0;width:100%;
  /* The rings are what gives way when the column runs out of room, so
     min-height:0 lets this shrink below its content and scroll instead. */
  flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:none}
.uk-ti-rings::-webkit-scrollbar{display:none}
.uk-ti-ring button{display:grid;place-items:center;width:100%;height:44px;border:0;background:transparent;color:inherit;cursor:pointer;padding:0}
.uk-ti-ring button i{display:block;width:9px;height:9px;border:1px solid rgba(234,241,242,.5);border-radius:50%;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.uk-ti-ring button.is-active i{transform:scale(1.5);border-color:#7FBCC4;box-shadow:0 0 0 3px rgba(127,188,196,.22)}
.uk-ti-ring button:hover i{transform:scale(1.25)}
/* The chapter being read, named in standing type inside the column's own width
   so the chrome is never wider than the gutter the sections reserved. */
.uk-ti-standing{display:none;
  /* flex:0 0 auto, never flex:1. A vertical line of type has no height of its
     own to grow from, and the column shrink-wraps its rings, so a name asking
     for leftover space is drawn a few pixels wide and none tall. */
  flex:0 0 auto;min-width:0;margin:6px 0 0;padding:0;
  writing-mode:vertical-rl;text-orientation:mixed;text-align:center;
  font-family:var(--ti-display);font-size:13px;letter-spacing:.26em;text-transform:uppercase;color:#7FBCC4;
  pointer-events:none;white-space:nowrap;max-height:52svh;overflow:hidden}

/* Controls rail, share sheet, lightbox, toast ----------------------------- */
.uk-ti-rail{position:fixed;right:14px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:24;display:grid;gap:8px;justify-items:center}
.uk-ti-rail-toggle,.uk-ti-rail-panel button{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(127,188,196,.42);border-radius:50%;background:rgba(18,27,30,.9);color:#EAF1F2;cursor:pointer}
.uk-ti-rail-panel{display:grid;gap:8px;justify-items:center}
.uk-ti-sheet,.uk-ti-lightbox{position:fixed;inset:0;z-index:46;display:grid;place-items:center;padding:20px 16px;background:rgba(12,20,22,.86);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.uk-ti-sheet.is-open,.uk-ti-lightbox.is-open{opacity:1;visibility:visible}
.uk-ti-sheet-panel{width:min(100%,430px);padding:22px;border:1px solid var(--ti-teal);border-radius:var(--ti-radius);background:#F2F6F7;color:#1F2A2E}
.uk-ti-share-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:16px}
.uk-ti-share-grid button{display:flex;align-items:center;gap:8px;padding:11px 13px;border:1px solid rgba(31,42,46,.16);border-radius:var(--ti-radius-sm);background:transparent;color:inherit;cursor:pointer;font-size:13px}
.uk-ti-sheet-close{width:100%;margin-top:14px}
.uk-ti-lightbox-panel{position:relative;width:min(100%,780px)}
.uk-ti-lightbox-panel img{width:100%;max-height:76svh;object-fit:contain;border-radius:var(--ti-radius);transition:opacity .2s ease}
.uk-ti-lightbox.is-switching .uk-ti-lightbox-panel img{opacity:0}
.uk-ti-lightbox-counter{margin-top:12px;color:#EAF1F2;font-size:12px;letter-spacing:.16em;text-align:center}
.uk-ti-lightbox-close,.uk-ti-lightbox-prev,.uk-ti-lightbox-next{position:absolute;display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;background:rgba(18,27,30,.8);color:#EAF1F2;cursor:pointer}
.uk-ti-lightbox-close{top:-52px;right:0}
.uk-ti-lightbox-prev{left:6px;top:50%;transform:translateY(-50%)}
.uk-ti-lightbox-next{right:6px;top:50%;transform:translateY(-50%)}
.uk-ti-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:#1F2A2E;color:#F2F6F7;font-size:13px;pointer-events:none;transition:opacity .3s ease,transform .3s ease}
.uk-ti-toast.is-visible{opacity:1;transform:translate(-50%,0)}

/* Reveals: the surface settles ------------------------------------------- */
.uk-ti-reveal{opacity:0;transform:translateY(var(--ti-lift));transition:opacity .7s ease,transform .7s cubic-bezier(.22,.78,.2,1)}
.uk-ti-reveal.is-visible{opacity:1;transform:none}
.uk-ti-reveal-item{opacity:0;transform:translateY(12px);transition:opacity .58s ease .08s,transform .58s ease .08s}
.uk-ti-reveal.is-visible .uk-ti-reveal-item{opacity:1;transform:none}

/* Design controls ---------------------------------------------------------- */
.uk-design-palette-template.uk-tirta{--ti-water:#F2F6F7;--ti-ink:#1F2A2E;--ti-mist:#5C6B6E;--ti-teal:#2C6B72;--ti-sand:#8A5B34;--ti-deep:#E2EBED}
.uk-design-palette-warm.uk-tirta{--ti-water:#FAF2E6;--ti-ink:#2C2418;--ti-mist:#6B6050;--ti-teal:#8A5A23;--ti-sand:#8A4B1E;--ti-deep:#F0E4CE}
.uk-design-palette-warm .uk-ti-closing{--ti-water:#2C2418;--ti-ink:#FBF3E5;--ti-mist:#CDBEA6;--ti-teal:#E0BC8A;--ti-sand:#E5A173;--ti-deep:#1D180F}
.uk-design-palette-romantic.uk-tirta{--ti-water:#FBF0F1;--ti-ink:#2E1F23;--ti-mist:#6A5155;--ti-teal:#9A3B53;--ti-sand:#8D5533;--ti-deep:#F2DFE2}
.uk-design-palette-romantic .uk-ti-closing{--ti-water:#2E1F23;--ti-ink:#FAE9EA;--ti-mist:#CFADB3;--ti-teal:#E7A7B4;--ti-sand:#E79A94;--ti-deep:#1D1316}
.uk-design-palette-sage.uk-tirta{--ti-water:#EDF3EC;--ti-ink:#1F2A22;--ti-mist:#546055;--ti-teal:#3A6349;--ti-sand:#7A5A2E;--ti-deep:#DDE8DC}
.uk-design-palette-sage .uk-ti-closing{--ti-water:#1F2A22;--ti-ink:#ECF3E8;--ti-mist:#BDCEB8;--ti-teal:#B4CFA9;--ti-sand:#DCBE86;--ti-deep:#131B16}
.uk-design-palette-midnight.uk-tirta{--ti-water:#101619;--ti-ink:#EAF1F2;--ti-mist:#A6B7BA;--ti-teal:#8FC4CB;--ti-sand:#D9A871;--ti-line:rgba(234,241,242,.2);--ti-card:rgba(255,255,255,.07);--ti-deep:#0A1012}
.uk-design-palette-midnight .uk-ti-closing{--ti-water:#101619;--ti-ink:#EAF1F2;--ti-mist:#A6B7BA;--ti-teal:#8FC4CB;--ti-sand:#D9A871;--ti-deep:#070C0D}
.uk-design-type-classic .uk-ti-body h2,.uk-design-type-classic .uk-ti-gate-body h1{font-family:var(--ti-display)}
.uk-design-type-modern .uk-ti-body h2,.uk-design-type-modern .uk-ti-gate-body h1,.uk-design-type-modern .uk-ti-cover-panel h1{font-family:var(--ti-sans);letter-spacing:.02em}
.uk-design-type-editorial .uk-ti-body h2{font-size:clamp(26px,6.4vw,40px);letter-spacing:-.01em}
.uk-design-type-editorial .uk-ti-cover-panel h1{font-size:clamp(33px,9.4vw,60px);letter-spacing:-.02em}
/* The reflection is the signature, so "surface" changes how far it falls
   rather than flattening it away. */
.uk-design-surface-soft .uk-tirta{--ti-echo:34px;--ti-radius:14px;--ti-radius-sm:9px}
.uk-design-surface-balanced .uk-tirta{--ti-echo:22px;--ti-radius:8px;--ti-radius-sm:6px}
.uk-design-surface-sharp .uk-tirta{--ti-echo:13px;--ti-radius:0px;--ti-radius-sm:0px}
.uk-design-gallery-grid .uk-ti-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow-x:visible}
.uk-design-gallery-filmstrip .uk-ti-gallery{display:flex;grid-template-columns:none;gap:14px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}
.uk-design-gallery-filmstrip .uk-ti-plate{flex:0 0 auto;width:min(62vw,240px);scroll-snap-align:center}
.uk-design-gallery-filmstrip .uk-ti-plate:last-child:nth-child(odd){grid-column:auto;justify-self:auto;width:min(62vw,240px)}
.uk-design-gallery-editorial .uk-ti-gallery{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;overflow-x:visible}
.uk-design-gallery-editorial .uk-ti-plate:last-child:nth-child(odd){grid-column:auto;justify-self:auto;width:auto}
.uk-design-motion-soft .uk-tirta{--ti-lift:24px}
.uk-design-motion-cinematic .uk-tirta{--ti-lift:38px}
.uk-design-motion-minimal .uk-tirta{--ti-lift:0px}
.uk-design-motion-minimal .uk-ti-reveal,.uk-design-motion-minimal .uk-ti-reveal-item{opacity:1;transform:none;transition:none}
.uk-design-motion-minimal .uk-ti-gate.is-touched .uk-ti-ripple{animation:none}

/* Wider viewports ---------------------------------------------------------- */
@media(min-width:760px){
.uk-tirta{font-size:17px;--ti-col-w:56px;--ti-echo:42px}
.uk-ti-sec{padding:0 28px 34px calc(var(--ti-col-w) + 22px)}
.uk-ti-panel{padding:44px 44px 40px}
.uk-ti-portrait{height:min(38svh,296px)}
.uk-ti-portrait img,.uk-ti-cover-media .uk-ti-cover-image{object-position:var(--ti-focus-desktop-x,50%) var(--ti-focus-desktop-y,42%)}
.uk-ti-cover-panel{padding:56px calc(var(--ti-col-w) + 24px) 74px}
.uk-ti-pool{width:min(100%,540px)}
.uk-ti-event{grid-template-columns:42px minmax(0,1fr);gap:16px;padding:24px}
.uk-ti-closing{padding:96px calc(var(--ti-col-w) + 24px) 112px}
.uk-ti-ring button{height:48px}
.uk-ti-standing{display:block;font-size:14px}
/* The presets are restated at every width where the base grid changes, because
   a preset declared once at base width is silently replaced by the breakpoint
   underneath it. */
.uk-design-gallery-grid .uk-ti-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
.uk-design-gallery-editorial .uk-ti-gallery{grid-template-columns:minmax(0,1fr)}
.uk-design-gallery-filmstrip .uk-ti-gallery{grid-template-columns:none}
}
@media(min-width:1100px){
.uk-ti-panel{width:min(100%,900px);padding:56px 64px 52px}
.uk-ti-sec{padding:0 40px 42px calc(var(--ti-col-w) + 38px)}
.uk-ti-closing{padding:112px calc(var(--ti-col-w) + 38px) 124px}
.uk-design-gallery-grid .uk-ti-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
.uk-design-gallery-editorial .uk-ti-gallery{grid-template-columns:minmax(0,1fr)}
.uk-design-gallery-filmstrip .uk-ti-gallery{grid-template-columns:none}
}

/* Narrow phones ------------------------------------------------------------ */
@media(max-width:560px){
.uk-ti-count{grid-template-columns:repeat(2,minmax(0,1fr))}
.uk-ti-people{grid-template-columns:minmax(0,1fr);gap:24px}
.uk-ti-accounts,.uk-ti-contacts{grid-template-columns:minmax(0,1fr)}
.uk-ti-share-grid{grid-template-columns:minmax(0,1fr)}
.uk-ti-lightbox-close{top:auto;bottom:-52px;right:50%;transform:translateX(50%)}
}
@media(max-width:360px){
.uk-tirta{--ti-col-w:36px;--ti-echo:24px}
.uk-ti-sec{padding:0 10px 20px calc(var(--ti-col-w) + 6px)}
.uk-ti-closing{padding:52px calc(var(--ti-col-w) + 6px) 66px}
.uk-ti-panel{padding:22px 16px 18px}
.uk-ti-event{grid-template-columns:minmax(0,1fr);gap:10px}
.uk-ti-ring button{height:38px}
.uk-design-gallery-grid .uk-ti-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
.uk-design-gallery-editorial .uk-ti-gallery{grid-template-columns:minmax(0,1fr)}
.uk-design-gallery-filmstrip .uk-ti-gallery{grid-template-columns:none}
}

/* 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-ti-cover{min-height:100svh}
.uk-ti-cover-panel{padding:22px calc(var(--ti-col-w) + 10px) 30px}
.uk-ti-cover-panel h1{font-size:clamp(22px,5.2vw,30px)}
.uk-ti-cover-empty-mark{font-size:17px;padding:8px 14px}
.uk-ti-gate{padding:12px}
.uk-ti-portrait{height:min(23svh,136px)}
.uk-ti-gate-body{padding:16px 16px 14px}
.uk-ti-gate-body h1{font-size:clamp(20px,4.4vw,26px)}
.uk-ti-mirror{height:clamp(30px,8svh,54px)}
.uk-ti-ring button{height:38px}
.uk-ti-standing{font-size:11px;letter-spacing:.18em;max-height:66svh}
.uk-ti-rail{bottom:calc(10px + env(safe-area-inset-bottom))}
}
@media(max-height:620px) and (min-width:1025px){
.uk-ti-portrait{height:min(28svh,190px)}
.uk-ti-ring button{height:38px}
}

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