/* ============================================================
   JHAROKHA collection — the merchant framed in gold.
   Scope: everything under .jrk-root; tokens are --jrk-*.
   Served standalone (not part of the Tailwind build); loaded
   only when a kard wears layout_type "jharokha".
   ============================================================ */

/* ---------- fonts (files in app/assets/fonts, Propshaft) ---------- */
@font-face {
  font-family: "Rozha One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/rozha-one-400-85f4dfd8.woff2") format("woff2");
}
@font-face {
  font-family: "Mukta";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/mukta-400-65c7726b.woff2") format("woff2");
}
@font-face {
  font-family: "Mukta";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/mukta-500-2b56e782.woff2") format("woff2");
}
@font-face {
  font-family: "Mukta";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/mukta-600-4988864e.woff2") format("woff2");
}
@font-face {
  font-family: "Spline Sans Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/spline-sans-mono-var-400-500-e63fcf3d.woff2") format("woff2");
}
/* Metrics-matched stand-ins so the name and body don't jump when the
   real faces arrive (approximate overrides; fonts are preloaded). */
@font-face {
  font-family: "Rozha One Fallback";
  src: local("Georgia");
  ascent-override: 105%;
  descent-override: 26%;
  line-gap-override: 0%;
  size-adjust: 103%;
}
@font-face {
  font-family: "Mukta Fallback";
  src: local("Arial");
  ascent-override: 98%;
  descent-override: 24%;
  line-gap-override: 0%;
  size-adjust: 97%;
}

/* ---------- tokens ---------- */
.jrk-root {
  /* constants */
  --jrk-ivory: #F6F0E4;
  --jrk-ivory-mute: rgba(246, 240, 228, .70);
  --jrk-ivory-dim: rgba(246, 240, 228, .45);
  --jrk-gold: #C9A86A;
  --jrk-gold-hi: #E4CE9A;
  --jrk-hair: rgba(201, 168, 106, .32);
  --jrk-hair-soft: rgba(201, 168, 106, .16);
  --jrk-ease-settle: cubic-bezier(.22, 1, .36, 1);
  --jrk-ease-press: cubic-bezier(.4, 0, .2, 1);
  --jrk-serif: "Rozha One", "Rozha One Fallback", Georgia, "Noto Serif", serif;
  --jrk-sans: "Mukta", "Mukta Fallback", system-ui, -apple-system, sans-serif;
  --jrk-mono: "Spline Sans Mono", ui-monospace, "Noto Sans Mono", monospace;
  /* ink — v1 ships sindoor only; the owner-side ink axis later swaps these
     four props (neel #1F2A52/#141C3B/#0D1329/#2A3763,
     kajal #23211E/#161513/#0F0E0C/#2E2B27). */
  --jrk-ink: #8E1F2F;
  --jrk-ink-deep: #641423;
  --jrk-ink-deeper: #470D18;
  --jrk-tint: #9A2B3C;
  color-scheme: dark;
}

/* ---------- base (scoped) ---------- */
.jrk-root {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--jrk-ink-deep);
  font-family: var(--jrk-sans);
  color: var(--jrk-ivory);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* :where() keeps this normalization below every .jrk-* component rule */
.jrk-root :where(a) {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
/* :where() keeps this normalization below every .jrk-* component rule */
.jrk-root :where(button) {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.jrk-root svg { display: block; }
.jrk-root :focus-visible {
  outline: 2px solid var(--jrk-gold-hi);
  outline-offset: 3px;
  border-radius: 2px;
}

/* grain — one 56px noise tile over everything (trays included),
   kills banding on 6-bit panels */
.jrk-root::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='56'%20height='56'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.9'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='56'%20height='56'%20filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: .05;
}

/* ---------- page / sheet ---------- */
.jrk-page {
  position: relative;
  max-width: 430px;
  margin: 0 auto;
  background: linear-gradient(180deg, var(--jrk-ink-deep) 0%, var(--jrk-ink) 15%, var(--jrk-ink) 85%, var(--jrk-ink-deep) 100%);
  padding-bottom: calc(30px + env(safe-area-inset-bottom));
}
.jrk-wrap { padding-left: 22px; padding-right: 22px; }

@media (min-width: 720px) {
  .jrk-root { background: var(--jrk-ink-deeper); padding: 48px 0; }
  .jrk-page { border: 1px solid var(--jrk-hair-soft); border-radius: 3px; }
}

/* top actions — bookmark frame + share, pinned in the arch gutter */
.jrk-top-actions {
  position: absolute;
  right: 12px;
  top: 50px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

/* ---------- ornament: head/foot double rule with buti ---------- */
.jrk-toran {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px 0;
  position: relative;
  overflow: hidden;
}
.jrk-toran--foot { padding: 0 22px; margin-top: 44px; }
.jrk-tr { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.jrk-tr i { display: block; height: 1px; }
.jrk-tr i:first-child { background: rgba(201, 168, 106, .55); }
.jrk-tr i:last-child { background: rgba(201, 168, 106, .22); }
.jrk-toran .jrk-buti-mark { width: 14px; height: 20px; color: var(--jrk-gold); flex: none; }

/* ---------- jharokha arch ---------- */
.jrk-arch {
  position: relative;
  width: min(224px, 60vw);
  margin: 30px auto 0;
  aspect-ratio: 4 / 5;
  border-radius: 999px 999px 14px 14px;
  overflow: hidden;
  border: 1px solid rgba(201, 168, 106, .85);
  padding: 7px;
  background: transparent;
}
.jrk-arch-field {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 999px 999px 9px 9px;
  border: 1px solid rgba(201, 168, 106, .35);
  background: radial-gradient(130% 90% at 50% 12%, var(--jrk-tint) 0%, var(--jrk-ink-deep) 78%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.jrk-arch-field > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.jrk-arch-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 6, 10, 0) 58%, rgba(20, 6, 10, .38) 100%);
}
.jrk-arch-watermark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 148px;
  height: 211px;
  transform: translate(-50%, -47%) rotate(-7deg);
  color: var(--jrk-gold);
  opacity: .10;
}
.jrk-monogram {
  position: relative;
  font-family: var(--jrk-serif);
  font-size: 92px;
  line-height: 1;
  letter-spacing: .015em;
  color: var(--jrk-ivory);
  text-indent: .015em;
}
.jrk-mono-rule {
  position: relative;
  width: 34px;
  height: 1px;
  background: var(--jrk-gold);
  margin-top: 14px;
  opacity: .9;
}

/* ---------- nameplate ---------- */
.jrk-nameplate { margin-top: 24px; text-align: center; }
.jrk-eyebrow {
  font: 600 11px/1.4 var(--jrk-sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--jrk-gold-hi);
}
.jrk-eyebrow img { display: inline-block; vertical-align: -3px; margin-right: 4px; }
.jrk-name {
  font-family: var(--jrk-serif);
  font-weight: 400;
  font-size: clamp(32px, 9.8vw, 40px);
  line-height: 1.14;
  letter-spacing: -.004em;
  margin-top: 10px;
}
.jrk-tagline {
  font: 400 15px/1.55 var(--jrk-sans);
  color: var(--jrk-ivory-mute);
  max-width: 300px;
  margin: 10px auto 0;
}

/* ---------- mudras (Save / WhatsApp / Pay) ---------- */
.jrk-mudras {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 28px 22px 0;
}
.jrk-mudras[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.jrk-mudras[data-count="1"] { grid-template-columns: minmax(0, 224px); justify-content: center; }
.jrk-mudra {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 92px;
  padding: 18px 5px 11px;
  border: 1px solid var(--jrk-hair);
  border-radius: 10px;
  background: var(--jrk-tint);
  transition: transform .12s var(--jrk-ease-press), box-shadow .12s var(--jrk-ease-press);
  text-align: center;
}
.jrk-mudra:active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .38);
}
.jrk-mudra .jrk-m-glyph { width: 22px; height: 22px; color: var(--jrk-ivory); }
.jrk-mudra .jrk-m-label {
  font: 600 11px/1 var(--jrk-sans);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--jrk-ivory);
  white-space: nowrap;
}
.jrk-mudra .jrk-m-sub {
  font: 400 9.5px/1 var(--jrk-mono);
  letter-spacing: .01em;
  color: var(--jrk-gold-hi);
  margin-top: -2px;
}

/* ---------- ledger ---------- */
.jrk-ledger { margin: 32px 22px 0; border-top: 1px solid var(--jrk-hair-soft); }
.jrk-lrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 56px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--jrk-hair-soft);
  transition: transform .12s var(--jrk-ease-press);
}
.jrk-lrow:active { transform: translateY(1px); }
.jrk-l-label {
  font: 600 10.5px/1 var(--jrk-sans);
  letter-spacing: .20em;
  text-transform: uppercase;
  color: var(--jrk-gold-hi);
  flex: none;
}
.jrk-l-value {
  font: 500 15px/1.3 var(--jrk-sans);
  color: var(--jrk-ivory);
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
  background-image: linear-gradient(var(--jrk-gold), var(--jrk-gold));
  background-repeat: no-repeat;
  background-position: left 100%;
  background-size: 0% 1px;
  transition: background-size .2s var(--jrk-ease-press);
  padding-bottom: 2px;
}
.jrk-lrow:active .jrk-l-value { background-size: 100% 1px; }
.jrk-l-value--num {
  font: 400 15px/1.3 var(--jrk-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

/* ---------- social strand ---------- */
.jrk-strand {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin: 28px 22px 0;
}
.jrk-soc {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--jrk-hair);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--jrk-ivory);
  transition: transform .12s var(--jrk-ease-press), background .12s ease, color .12s ease;
}
.jrk-soc svg { width: 18px; height: 18px; }
.jrk-soc:active {
  transform: translateY(1px);
  background: var(--jrk-gold);
  color: var(--jrk-ink-deep);
  border-color: var(--jrk-gold);
}

/* ---------- sections / rubric ---------- */
.jrk-rubric {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 600 11px/1 var(--jrk-sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--jrk-gold-hi);
}
.jrk-rubric::after { content: ""; flex: 1; height: 1px; background: var(--jrk-hair-soft); }
.jrk-links, .jrk-about { margin: 36px 22px 0; }

.jrk-krow {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--jrk-hair-soft);
  transition: transform .12s var(--jrk-ease-press);
}
.jrk-links .jrk-krow:first-of-type { margin-top: 8px; }
.jrk-krow:active { transform: translateY(1px); }
.jrk-k-thumb {
  width: 36px;
  height: 36px;
  flex: none;
  border: 1px solid var(--jrk-hair);
  border-radius: 4px;
  overflow: hidden;
  background: var(--jrk-tint);
}
.jrk-k-thumb img { width: 100%; height: 100%; object-fit: cover; }
.jrk-k-title {
  font: 500 15.5px/1.35 var(--jrk-sans);
  color: var(--jrk-ivory);
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.jrk-k-meta {
  font: 400 10px/1 var(--jrk-mono);
  letter-spacing: .08em;
  color: var(--jrk-gold-hi);
  border: 1px solid var(--jrk-hair);
  border-radius: 4px;
  padding: 3px 6px 2px;
  flex: none;
}
.jrk-k-chev { width: 14px; height: 14px; color: var(--jrk-ivory-dim); flex: none; }

.jrk-about .trix-content {
  font: 400 15.5px/1.7 var(--jrk-sans);
  color: var(--jrk-ivory-mute);
  margin-top: 14px;
  max-width: 60ch;
}
.jrk-about .trix-content a {
  color: var(--jrk-gold-hi);
  border-bottom: 1px solid var(--jrk-hair);
}
.jrk-readmore {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  font: 600 11px/1 var(--jrk-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--jrk-gold-hi);
}
.jrk-readmore svg { width: 12px; height: 12px; }

/* ---------- colophon ---------- */
.jrk-colophon { text-align: center; }
.jrk-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
  padding: 0 22px;
}
.jrk-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 11.5px/1 var(--jrk-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--jrk-ivory);
  border: 1px solid var(--jrk-hair);
  border-radius: 99px;
  padding: 12px 18px 11px;
  transition: transform .12s var(--jrk-ease-press), box-shadow .12s var(--jrk-ease-press);
}
.jrk-chip svg { width: 13px; height: 13px; color: var(--jrk-gold-hi); }
.jrk-chip:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .38); }
.jrk-serial {
  margin-top: 26px;
  font: 400 11px/1.6 var(--jrk-mono);
  letter-spacing: .12em;
  color: var(--jrk-ivory-dim);
  padding: 0 22px;
  overflow-wrap: anywhere;
}
.jrk-press-line {
  margin-top: 9px;
  font: 400 12.5px/1.5 var(--jrk-sans);
  color: var(--jrk-ivory-dim);
}
.jrk-press-line a {
  color: var(--jrk-gold-hi);
  border-bottom: 1px solid var(--jrk-hair);
  padding-bottom: 1px;
}

/* ---------- trays on the shared modal chassis ----------
   .jrk-tray-wrap rides .modal-container/.active/.out from kard.css;
   the paper look and scrim tone are restyled inside this scope. */
.jrk-root .jrk-tray-wrap .modal-background {
  background: rgba(15, 5, 8, .55);
}
.jrk-root .jrk-tray-wrap.active .modal-background {
  background: rgba(15, 5, 8, .55);
}
.jrk-paper {
  --jrk-p-bg: #F4ECDC;
  --jrk-p-ink: #2A2016;
  --jrk-p-mute: rgba(42, 32, 22, .66);
  --jrk-p-gold: #8F6B2E;
  --jrk-p-hair: rgba(42, 32, 22, .18);
  --jrk-p-rubric: #9E2B25;
  background: var(--jrk-p-bg);
  color: var(--jrk-p-ink);
  color-scheme: light;
}
.jrk-paper :focus-visible { outline-color: var(--jrk-p-gold); }
.jrk-root .jrk-tray {
  max-width: 430px;
  margin: 0 auto;
  text-align: left;
  border-radius: 18px 18px 0 0;
  padding: 18px 22px calc(26px + env(safe-area-inset-bottom));
}
.jrk-paper-rules { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.jrk-paper-rules i { display: block; height: 1px; }
.jrk-paper-rules i:first-child { background: rgba(143, 107, 46, .65); }
.jrk-paper-rules i:last-child { background: rgba(143, 107, 46, .28); }
.jrk-t-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.jrk-t-rubric {
  font: 600 11px/1.4 var(--jrk-sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--jrk-p-gold);
  min-width: 0;
  overflow-wrap: anywhere;
}
.jrk-t-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--jrk-p-mute);
  border: 1px solid var(--jrk-p-hair);
  transition: transform .12s var(--jrk-ease-press);
}
.jrk-t-close svg { width: 12px; height: 12px; }
.jrk-t-close:active { transform: translateY(1px); }

/* --- pay tray --- */
.jrk-upi-copy {
  display: block;
  width: 100%;
  text-align: left;
  margin-top: 16px;
}
.jrk-upi-well {
  border: 1px dashed rgba(42, 32, 22, .38);
  border-radius: 10px;
  padding: 15px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: border-color .2s ease, transform .12s var(--jrk-ease-press);
}
.jrk-upi-copy:active .jrk-upi-well { transform: translateY(1px); }
.jrk-upi-copy.jrk-copied .jrk-upi-well { border-color: var(--jrk-p-gold); }
.jrk-upi-id {
  font: 500 clamp(17px, 5.4vw, 21px)/1.2 var(--jrk-mono);
  letter-spacing: .01em;
  color: var(--jrk-p-ink);
  overflow-wrap: anywhere;
  min-width: 0;
}
.jrk-upi-glyph { flex: none; color: var(--jrk-p-gold); }
.jrk-upi-glyph svg { width: 18px; height: 18px; }
.jrk-upi-caption {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  font: 400 11.5px/1 var(--jrk-sans);
  letter-spacing: .04em;
  color: var(--jrk-p-mute);
  min-height: 14px;
}
.jrk-upi-caption .jrk-tick-ic { width: 12px; height: 12px; color: var(--jrk-p-gold); }
.jrk-cap-done { display: none; align-items: center; gap: 6px; }
.jrk-copied .jrk-upi-caption { color: var(--jrk-p-gold); font-weight: 600; }
.jrk-copied .jrk-cap-idle { display: none; }
.jrk-copied .jrk-cap-done { display: inline-flex; }
.jrk-amounts { display: flex; gap: 8px; margin-top: 18px; }
.jrk-amt {
  flex: 1;
  min-width: 0;
  text-align: center;
  font: 500 14px/1 var(--jrk-mono);
  font-variant-numeric: tabular-nums;
  color: var(--jrk-p-ink);
  border: 1px solid rgba(42, 32, 22, .32);
  border-radius: 8px;
  padding: 12px 4px 11px;
  transition: transform .12s var(--jrk-ease-press), box-shadow .12s var(--jrk-ease-press);
}
.jrk-amt:active { transform: translateY(1px); box-shadow: inset 0 1px 2px rgba(42, 32, 22, .25); }
.jrk-amt--custom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding-left: 8px;
  padding-right: 8px;
  cursor: text;
}
.jrk-amt--custom input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  padding: 0;
  font: inherit;
  color: inherit;
}
.jrk-amt--custom input::placeholder { color: rgba(42, 32, 22, .35); }
.jrk-slab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 600 12.5px/1 var(--jrk-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--jrk-p-ink);
  color: var(--jrk-p-bg);
  border-radius: 8px;
  padding: 14px 18px 13px;
  transition: transform .12s var(--jrk-ease-press), box-shadow .12s var(--jrk-ease-press);
}
.jrk-slab:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .4); }
.jrk-slab--wide { width: 100%; margin-top: 12px; }
.jrk-slab-amt:empty { display: none; }
.jrk-pay-note {
  margin-top: 12px;
  font: 400 11px/1.5 var(--jrk-sans);
  color: var(--jrk-p-mute);
  text-align: center;
}

/* --- QR stamp sheet --- */
.jrk-root .jrk-sheet {
  max-width: 430px;
  margin: 0 auto;
  text-align: left;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: calc(16px + env(safe-area-inset-top)) 22px calc(22px + env(safe-area-inset-bottom));
}
.jrk-ss-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 0;
}
.jrk-ss-caption {
  font: 600 11px/1 var(--jrk-sans);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--jrk-p-gold);
}
.jrk-stamp {
  margin-top: 20px;
  background-color: #FCF8ED;
  background-image:
    radial-gradient(circle 3px at center, var(--jrk-p-bg) 2.4px, rgba(0, 0, 0, 0) 2.9px),
    radial-gradient(circle 3px at center, var(--jrk-p-bg) 2.4px, rgba(0, 0, 0, 0) 2.9px),
    radial-gradient(circle 3px at center, var(--jrk-p-bg) 2.4px, rgba(0, 0, 0, 0) 2.9px),
    radial-gradient(circle 3px at center, var(--jrk-p-bg) 2.4px, rgba(0, 0, 0, 0) 2.9px);
  background-size: 13px 13px;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-position: left 6.5px top -6.5px, left 6.5px bottom -6.5px, left -6.5px top 6.5px, right -6.5px top 6.5px;
  padding: 18px;
}
.jrk-stamp-inner {
  border: 1px solid var(--jrk-p-hair);
  padding: 12px;
}
.jrk-stamp-inner img {
  display: block;
  width: min(56vw, 230px);
  height: auto;
  background: #fff;
}
.jrk-ss-name {
  margin-top: 22px;
  font-family: var(--jrk-serif);
  font-size: 27px;
  line-height: 1.2;
  color: var(--jrk-p-ink);
  text-align: center;
}
.jrk-ss-link {
  margin-top: 6px;
  font: 400 12px/1.4 var(--jrk-mono);
  letter-spacing: .06em;
  color: var(--jrk-p-mute);
  text-align: center;
  overflow-wrap: anywhere;
}
.jrk-ss-share {
  margin-top: 22px;
  border-color: rgba(42, 32, 22, .3);
  color: var(--jrk-p-ink);
}
.jrk-ss-share svg { color: var(--jrk-p-gold); }
.jrk-ss-serial {
  text-align: center;
  font: 400 10.5px/1.6 var(--jrk-mono);
  letter-spacing: .12em;
  color: var(--jrk-p-mute);
}

/* ---------- overture (entrance) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .jrk-ov {
    animation: jrk-rise .64s var(--jrk-ease-settle) backwards;
    animation-delay: var(--jrk-d, 0ms);
  }
  @keyframes jrk-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
  }
  .jrk-toran--head .jrk-tr { animation: jrk-draw .56s var(--jrk-ease-settle) backwards 80ms; }
  .jrk-toran--head .jrk-tr-l { transform-origin: right center; }
  .jrk-toran--head .jrk-tr-r { transform-origin: left center; }
  @keyframes jrk-draw {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
  .jrk-toran--head .jrk-buti-mark { animation: jrk-stampin .4s var(--jrk-ease-settle) backwards 120ms; }
  @keyframes jrk-stampin {
    from { opacity: 0; transform: scale(.5); }
    to { opacity: 1; transform: scale(1); }
  }
  .jrk-arch {
    animation: jrk-develop .9s var(--jrk-ease-settle) backwards 120ms;
    transform-origin: bottom center;
  }
  @keyframes jrk-develop {
    from { opacity: 0; transform: scale(1.045); }
    to { opacity: 1; transform: scale(1); }
  }

  /* THE CATCH — one pass of light across the zari, then stillness forever */
  .jrk-zari::before {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: 5;
    pointer-events: none;
    transform: translateX(-135%) skewX(-16deg);
    background: linear-gradient(100deg, rgba(244, 227, 183, 0) 22%, rgba(244, 227, 183, .34) 44%, rgba(255, 246, 220, .6) 50%, rgba(244, 227, 183, .34) 56%, rgba(244, 227, 183, 0) 78%);
    animation: jrk-catch .9s cubic-bezier(.4, 0, .2, 1) both;
    animation-delay: calc(1050ms + var(--jrk-catch-d, 0ms));
  }
  @keyframes jrk-catch {
    to { transform: translateX(135%) skewX(-16deg); }
  }

  .jrk-mudra--pay:active { animation: jrk-goldring .3s var(--jrk-ease-press); }
  @keyframes jrk-goldring {
    0% { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .38), 0 0 0 0 rgba(201, 168, 106, .55); }
    100% { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .38), 0 0 0 6px rgba(201, 168, 106, 0); }
  }
  .jrk-copied .jrk-tickpath {
    stroke-dasharray: 26;
    stroke-dashoffset: 26;
    animation: jrk-drawtick .3s ease-out forwards;
  }
  @keyframes jrk-drawtick {
    to { stroke-dashoffset: 0; }
  }
}
.jrk-zari { position: relative; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .jrk-root .jrk-tray-wrap.active .modal-background .modal { animation-duration: 1ms; }
  .jrk-l-value { transition: none; }
  .jrk-root .jrk-tickpath { animation: none !important; stroke-dashoffset: 0 !important; }
}