/* MOHUR collection — "Minted, not printed." A cotton-rag pressed card in a
   velvet jewel box: letterpress deboss, guilloché seal, one living-foil system
   driven by --foil-shift (rest 50 = engraved). Scope: .mhr-* under .mhr-root. */

/* ============ FONTS ============ */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 560;
  font-display: swap;
  src: url("/assets/fraunces-560-d338dcfd.woff2") format("woff2");
}
/* Fraunces has no Devanagari: Hindi in it is Noto Serif Devanagari, at the
   same weight (kard.tailwind.css, "Devanagari in the serif voices"). */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 560;
  font-display: swap;
  src: url("/assets/noto-serif-devanagari-600-83198297.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+A8E0-A8FF;
}
@font-face {
  font-family: "Fraunces-fallback";
  src: local("Georgia");
  size-adjust: 98%;
  ascent-override: 97%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/instrument-sans-var-400-600-570a9648.woff2") format("woff2");
}
@font-face {
  font-family: "InstrumentSans-fallback";
  src: local("Arial");
  size-adjust: 99%;
  ascent-override: 96%;
  descent-override: 25%;
  line-gap-override: 0%;
}
/* ₹ intentionally falls through to the system stack — the distributable
   Instrument Sans lacks U+20B9; every target OS ships it. */

/* ============ FOIL PHYSICS ============ */
/* Registered where supported; elsewhere --foil-shift still works as a plain
   custom property (the foil controller writes numbers inline, calc() follows). */
@property --foil-shift { syntax: "<number>"; inherits: true; initial-value: 50; }

/* ============ GROUND: the velvet box ============ */
.mhr-root {
  --velvet: #131110;
  --stock: #F5EFE3;
  --stock-hi: #FBF6EA;
  --well: #EFE7D4;
  --ink: #221D18;
  --ink-72: rgba(34, 29, 24, .74);
  --ink-60: rgba(34, 29, 24, .62);
  --ink-45: rgba(34, 29, 24, .5);
  --hairline: rgba(34, 29, 24, .16);
  --hairline-2: rgba(34, 29, 24, .3);
  --core: #C0392B;          /* Sindoor ink */
  --core-deep: #96271B;
  --foil-lo: #8C6D2F; --foil-mid: #C9A961; --foil-hi: #F7E7B4;
  --foil-g: linear-gradient(105deg, #8F7030 0%, #BE9A52 22%, #DCC07F 38%, #F8E9B8 50%, #DCC07F 62%, #BE9A52 78%, #8F7030 100%);
  --serif: "Fraunces", "Fraunces-fallback", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", "InstrumentSans-fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --settle: cubic-bezier(.22, 1, .36, 1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='64' height='64' filter='url(%23n)'/%3E%3C/svg%3E");
  --foil-shift: 50; /* plain-property fallback where @property is unsupported */

  min-height: 100dvh;
  background:
    radial-gradient(90% 46% at 50% 14%, rgba(192, 57, 43, .055), transparent 72%),
    radial-gradient(130% 92% at 50% -8%, #1F1713 0%, #141110 54%, #0F0D0C 100%);
  background-color: var(--velvet);
  font-family: var(--sans);
  color: var(--ink);
  padding: clamp(14px, 3.5vw, 64px) clamp(12px, 4vw, 24px) calc(clamp(24px, 5vh, 80px) + env(safe-area-inset-bottom));
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}
/* grain over the velvet — kills gradient banding on cheap panels */
.mhr-root::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--grain);
  background-size: 64px 64px;
  opacity: .07;
  mix-blend-mode: overlay;
}
.mhr-root ::selection { background: rgba(192, 57, 43, .25); }
.mhr-root :focus-visible { outline: 2px solid var(--core); outline-offset: 3px; border-radius: 3px; }
.mhr-root [hidden] { display: none !important; }

.mhr-stage { position: relative; z-index: 1; max-width: 26rem; margin-inline: auto; }

/* ============ THE OBJECT: cotton-rag card ============ */
.mhr-kard {
  position: relative;
  background: linear-gradient(172deg, var(--stock-hi) 0%, var(--stock) 34%, #F1EADB 100%);
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .42),
    0 12px 32px rgba(0, 0, 0, .4),
    0 40px 96px rgba(0, 0, 0, .5);
  padding: 0 clamp(18px, 6vw, 28px);
}
/* paper grain, multiplied into the stock */
.mhr-kard::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  border-radius: inherit;
  background: var(--grain);
  background-size: 64px 64px;
  opacity: .05;
  mix-blend-mode: multiply;
}

/* bookmark chip, restyled to sit on the stock */
.mhr-top-actions { position: absolute; top: 12px; right: 12px; z-index: 7; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.mhr-top-actions .p-2 {
  background: rgba(251, 246, 234, .92);
  box-shadow: inset 0 0 0 1px var(--hairline), 0 1px 2px rgba(34, 29, 24, .16);
  border-radius: 9px;
  color: var(--ink-60);
}

/* ============ FOIL SURFACES — one shared system, one light ============ */
.mhr-foil {
  --fp: calc((var(--foil-shift, 50) - var(--fo, 0)) * 1.4%);
  background-image: linear-gradient(150deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 46%), var(--foil-g);
  background-size: 100% 100%, 260% 100%;
  background-position: 0 0, var(--fp) 0;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4), inset 0 -1px 1px rgba(96, 72, 26, .45), 0 1px 2px rgba(34, 29, 24, .22);
}

/* letterpress: dark bites above, paper ridge below */
.mhr-deboss { text-shadow: 0 -1px 0 rgba(34, 29, 24, .2), 0 1px 0 rgba(255, 255, 255, .74); }

/* ============ THE FACE ============ */
.mhr-face { padding-top: 34px; text-align: center; }
.mhr-seal {
  position: relative;
  width: 116px;
  height: 116px;
  margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(closest-side, #F2EBDB 62%, #EDE4D0 100%);
  box-shadow: inset 0 2px 5px rgba(34, 29, 24, .2), inset 0 -1px 0 rgba(255, 255, 255, .7), 0 1px 0 rgba(255, 255, 255, .75);
}
.mhr-seal svg { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); }
.mhr-portrait {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: inset 0 1px 4px rgba(34, 29, 24, .35);
}
.mhr-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mhr-cartouche {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 560 18px/1 var(--serif);
  letter-spacing: .05em;
  color: #FBF5E6;
  text-shadow: 0 1px 1px rgba(96, 72, 26, .55);
}
/* A logo (Kard#photo_as_logo?, kard_names_logos): whole, on the stock. */
.mhr-logo-wrap { display: flex; justify-content: center; }
.mhr-logo { max-width: min(220px, 64%); max-height: 96px; }
.mhr-mint {
  margin-top: 12px;
  font: 500 10px/1 var(--sans);
  letter-spacing: .24em;
  color: var(--ink-45);
  font-feature-settings: 'tnum';
}
.mhr-eyebrow { margin-top: 26px; font: 600 10.5px/1.5 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-60); }
.mhr-eyebrow a { color: inherit; text-decoration: none; }
.mhr-eyebrow a:active { color: var(--core-deep); }
.mhr-eyebrow-logo { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin: -2px 5px 0 0; vertical-align: middle; }
/* As large as its longest word lets it be on the line (kard_names_logos,
   .kard-name): the stage less the room's and the card's margins; down to 22 px. */
.mhr-name {
  --name-floor: 22px;
  --name-room: calc(min(100vw - 2 * clamp(12px, 4vw, 24px), 26rem) - 2 * clamp(18px, 6vw, 28px));
  margin-top: 10px;
  font: 560 clamp(36px, 10.4vw, 42px)/1.04 var(--serif);
  font-size: max(var(--name-floor), min(clamp(36px, 10.4vw, 42px), calc(var(--name-room) / var(--name-em, 1))));
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}
.mhr-rule { width: 74px; height: 3px; border-radius: 2px; margin: 16px auto 0; --fo: 10; }
/* Job title · company: struck in the serif, under the foil rule. */
.mhr-role {
  margin: 14px auto 0;
  max-width: 30ch;
  font: 500 16px/1.4 var(--serif);
  color: var(--ink-72);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.mhr-role + .mhr-tagline { margin-top: 10px; }
.mhr-tagline {
  margin: 14px auto 0;
  max-width: 32ch;
  font: 500 10px/1.9 var(--sans);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-60);
}

/* the verbs */
.mhr-actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; margin-top: 26px; }
.mhr-medal {
  position: relative;
  display: grid;
  place-items: center;
  gap: 7px;
  padding: 15px 4px 12px;
  background: linear-gradient(178deg, var(--stock-hi), #F2EBDC);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(34, 29, 24, .16), 0 3px 8px rgba(34, 29, 24, .08);
  text-decoration: none;
  color: var(--ink);
  transition: transform .08s ease-out, box-shadow .08s ease-out;
}
.mhr-medal:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(34, 29, 24, .28), inset 0 -1px 0 rgba(255, 255, 255, .5); }
.mhr-medal svg { width: 22px; height: 22px; stroke: var(--ink); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mhr-medal span { font: 600 10px/1 var(--sans); letter-spacing: .15em; text-transform: uppercase; }
.mhr-medal--save { color: var(--core-deep); }
.mhr-medal--save svg { stroke: var(--core-deep); }

/* Book (scheduling): the primary verb, a sindoor slab struck above the medals */
.mhr-book {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 26px;
  padding: 17px 16px;
  border-radius: 11px;
  text-decoration: none;
  background: linear-gradient(178deg, var(--core), var(--core-deep));
  color: var(--stock-hi);
  font: 600 11px/1 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 2px 6px rgba(150, 39, 27, .32);
  transition: transform .08s ease-out;
}
.mhr-book:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .3); }
.mhr-book svg { width: 18px; height: 18px; flex: none; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* Room above and below the 1-line box it cuts to: an accent over a capital
   (French's RÉSERVER, Portuguese's SESSÃO) rises past it. */
.mhr-book span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-block: .3em; margin-block: -.3em; }
.mhr-book + .mhr-actions { margin-top: 12px; }
/* next free chips under the Book slab: paper chips on the stock */
.mhr-root .kn { margin-top: 12px; color: var(--ink); }
.mhr-root .kn-eyebrow, .mhr-root .kn-zone { color: var(--ink-60); opacity: 1; font-family: var(--sans); }
.mhr-root .kn-slot { background: linear-gradient(178deg, var(--stock-hi), #F2EBDC); box-shadow: inset 0 0 0 1px var(--hairline); }
.mhr-root .kn-more { color: var(--core-deep); }
.mhr-root .kn + .mhr-actions, .mhr-root .kn-frame + .mhr-actions { margin-top: 12px; }

/* ============ THE PAYMENT SLIP ============ */
.mhr-perf { position: relative; height: 19px; margin-top: 30px; }
.mhr-perf::before {
  content: '';
  position: absolute;
  left: 20px;
  right: 20px;
  top: 9px;
  height: 1px;
  background-image: linear-gradient(90deg, var(--hairline-2) 0 7px, transparent 7px 13px);
  background-size: 13px 1px;
}
.mhr-notch {
  position: absolute;
  top: 1px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #0D0B0A;
  box-shadow: inset 0 1.5px 2.5px rgba(0, 0, 0, .85), 0 1px 0 rgba(255, 255, 255, .5);
}
.mhr-notch--l { left: calc(clamp(18px, 6vw, 28px) * -1); margin-left: -8.5px; }
.mhr-notch--r { right: calc(clamp(18px, 6vw, 28px) * -1); margin-right: -8.5px; }

.mhr-slip-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; }
/* The payment slip's labels: 12 px at 6:1 on the stock (finding 27: 8.5 px
   at 3.09:1). */
.mhr-slip-kicker { font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-72); }
.mhr-slip-title { margin-top: 7px; font: 560 21px/1.1 var(--serif); letter-spacing: .005em; color: var(--ink); }
.mhr-roundel {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 500 20px/1 var(--sans);
  color: #FBF5E6;
  text-shadow: 0 1px 1px rgba(96, 72, 26, .55);
  --fo: 20;
}
.mhr-plate {
  width: 100%;
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--well);
  border: 0;
  border-radius: 10px;
  padding: 14px 14px 13px 16px;
  box-shadow: inset 0 2px 4px rgba(34, 29, 24, .2), inset 0 -1px 0 rgba(255, 255, 255, .65);
  font-family: var(--sans);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: transform .08s ease-out;
}
.mhr-plate:active { transform: translateY(1px); }
.mhr-upi-id { display: block; font: 600 17.5px/1.2 var(--sans); letter-spacing: .005em; font-feature-settings: 'tnum'; overflow-wrap: anywhere; }
/* 12 px (finding 27) in sentence case, so every language's "UPI ID · tap
   to copy" keeps one line beside Copy at 360 px. */
.mhr-plate-cap { display: block; margin-top: 6px; font: 600 12px/1.2 var(--sans); letter-spacing: .02em; color: var(--ink-72); }
.mhr-copytag {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--hairline-2);
  border-radius: 5px;
  padding: 6px 9px;
  font: 600 12px/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-72);
  background: var(--stock-hi);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 1px 2px rgba(34, 29, 24, .12);
}
.mhr-copytag svg { width: 11px; height: 11px; stroke: var(--core-deep); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mhr-copytag.mhr-did { border-color: transparent; color: var(--core-deep); background: transparent; box-shadow: none; }
/* the other ways to pay on the slip (kards/pay_options): wells like the UPI plate */
.mhr-pay-opts { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.mhr-plate + .mhr-chips ~ .mhr-pay-opts, .mhr-amountline + .mhr-pay-opts { margin-top: 22px; }
.mhr-pay-opt {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label hint" "value hint";
  align-items: center;
  column-gap: 12px;
  row-gap: 5px;
  background: var(--well);
  border: 0;
  border-radius: 10px;
  padding: 13px 14px 13px 16px;
  box-shadow: inset 0 2px 4px rgba(34, 29, 24, .2), inset 0 -1px 0 rgba(255, 255, 255, .65);
  font-family: var(--sans);
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: transform .08s ease-out;
}
.mhr-pay-opt--app {
  background: linear-gradient(178deg, var(--stock-hi), #F2EBDC);
  box-shadow: inset 0 0 0 1px var(--hairline), inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(34, 29, 24, .14);
}
.mhr-pay-opt--long { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "value" "hint"; }
.mhr-pay-opt:active { transform: translateY(1px); }
.mhr-pay-opt-label { grid-area: label; font: 600 12px/1.2 var(--sans); letter-spacing: .1em; color: var(--ink-72); text-transform: uppercase; }
.mhr-pay-opt-value { grid-area: value; font: 600 16.5px/1.25 var(--sans); letter-spacing: .005em; font-feature-settings: 'tnum'; overflow-wrap: anywhere; min-width: 0; }
.mhr-pay-opt-hint {
  grid-area: hint;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--hairline-2);
  border-radius: 5px;
  padding: 6px 9px;
  font: 600 12px/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-72);
  background: var(--stock-hi);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 1px 2px rgba(34, 29, 24, .12);
}
.mhr-pay-opt-hint svg { width: 11px; height: 11px; stroke: var(--core-deep); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mhr-pay-opt-tick:empty { display: none; }
.mhr-pay-opt--app .mhr-pay-opt-hint { color: var(--core-deep); }
.mhr-pay-opt--copied .mhr-pay-opt-hint { border-color: transparent; color: var(--core-deep); background: transparent; box-shadow: none; }
.mhr-pay-opt-details { margin: 7px 4px 0; font: 400 12.5px/1.5 var(--sans); color: var(--ink-60); }
.mhr-pay-opt-details > span > span:first-child { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-72); }
.mhr-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.mhr-chip {
  display: grid;
  place-items: center;
  min-height: 44px; /* finding 24: 37 px */
  padding: 11px 2px;
  border-radius: 9px;
  text-decoration: none;
  background: linear-gradient(178deg, var(--stock-hi), #F2EBDC);
  border: 1px solid var(--hairline);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(34, 29, 24, .14);
  font: 600 13px/1 var(--sans);
  font-feature-settings: 'tnum';
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .08s ease-out, box-shadow .08s ease-out;
}
.mhr-chip small { font: 600 12px/1 var(--sans); letter-spacing: .06em; color: var(--ink-72); text-transform: uppercase; }
.mhr-chip:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(34, 29, 24, .26); }

/* the cheque's amount line */
.mhr-amountline { display: flex; align-items: center; gap: 10px; margin-top: 16px; } /* clear of the chips' rings */
.mhr-amount-rupee { font: 500 15px/1 var(--sans); color: var(--ink-60); }
.mhr-amount-input {
  flex: 1;
  min-width: 0;
  padding: 8px 2px 9px;
  font: 500 15px/1.2 var(--sans);
  font-feature-settings: 'tnum';
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px dotted rgba(34, 29, 24, .34);
  border-radius: 0;
}
.mhr-amount-input::placeholder { color: rgba(34, 29, 24, .68); } /* 4.5:1 on the cheque */
.mhr-amount-input:focus { outline: none; border-bottom: 1.5px solid var(--core); }
/* 44 px to tap: the box reaches up into the space above its line, and the
   line stays where it was. (Above kard.css's [type='text'] padding, which
   the rule before loses to.) */
.mhr-amountline .mhr-amount-input { padding: 15px 4px 4px; margin-top: -11px; }
.mhr-amount-go {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px; /* finding 24: 32 px */
  padding: 11px 13px;
  border-radius: 9px;
  text-decoration: none;
  background: linear-gradient(178deg, #2E2620, var(--ink));
  color: var(--stock);
  font: 600 12px/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 5px rgba(0, 0, 0, .25);
  transition: transform .08s ease-out;
}
.mhr-amount-go:active { transform: translateY(1px); }
.mhr-amount-sum { font: 600 12px/1 var(--sans); font-feature-settings: 'tnum'; letter-spacing: .02em; }

/* ============ SECTIONS ============ */
.mhr-sec { margin-top: 34px; }
.mhr-sec-h {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 600 10px/1 var(--sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-45);
}
.mhr-sec-h::before { content: ''; width: 12px; height: 1px; background: var(--core); opacity: .8; }
.mhr-sec-h::after { content: ''; flex: 1; height: 1px; background: var(--hairline); }

/* copperplate leader rows */
.mhr-rows { margin-top: 6px; }
.mhr-row {
  display: flex;
  align-items: baseline;
  gap: 11px;
  padding: 14px 2px; /* 44 px to tap */
  text-decoration: none;
  color: var(--ink);
  border-radius: 6px;
}
.mhr-row:active { background: rgba(34, 29, 24, .05); }
.mhr-lbl { flex: none; font: 600 10px/1 var(--sans); letter-spacing: .17em; text-transform: uppercase; color: var(--ink-60); }
.mhr-lead { flex: 1; min-width: 18px; border-bottom: 1px dotted rgba(34, 29, 24, .34); transform: translateY(-3px); }
.mhr-val {
  flex: 0 1 auto; /* shrinks when label + leader + value overrun the row */
  min-width: 0; /* let it shrink past the nowrap text; .mhr-valt then ellipsizes */
  max-width: 62%;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 500 13.5px/1.2 var(--sans);
  font-feature-settings: 'tnum';
  color: var(--ink);
}
.mhr-valt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Tailwind preflight blocks svg; flex-none keeps the arrow on the line */
.mhr-ne { flex: none; width: 11px; height: 11px; stroke: var(--ink-45); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* enclosure rows carry a specimen thumb */
.mhr-row--enc { align-items: center; }
.mhr-row--enc .mhr-lbl { max-width: 52%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mhr-row--enc .mhr-lead { transform: none; }
.mhr-enc-thumb {
  flex: none;
  width: 24px;
  height: 31px;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--stock-hi);
  box-shadow: 0 1px 2px rgba(34, 29, 24, .18);
}
.mhr-enc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* about — the house style */
.mhr-about { margin-top: 16px; font: 400 15px/1.68 var(--sans); color: var(--ink-72); }
.mhr-about .trix-content { font: inherit; color: inherit; }
/* The drop cap, when the first word can carry one (LetterheadHelper#drop_cap?). */
.mhr-drop-cap .trix-content::first-letter {
  float: left;
  font: 560 46px/.84 var(--serif);
  color: var(--core);
  padding: 5px 9px 0 0;
}
.mhr-about a { color: var(--core-deep); text-decoration: underline; text-underline-offset: 2px; }
.mhr-readmore-row { margin-top: 8px; text-align: center; }
.mhr-readmore {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 600 9.5px/1 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-60);
  text-decoration: none;
  border-bottom: 1px dotted rgba(34, 29, 24, .34);
  padding-bottom: 3px;
}
.mhr-readmore svg { width: 12px; height: 12px; }

/* review (kards/_review_us): "Review us on Google", a hairline plate with
   foil stars */
.mhr-review-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 7px 12px;
  width: 100%;
  min-height: 44px; /* finding 24: 42 px */
  padding: 13px 12px;
  border: 1px solid var(--hairline-2);
  border-radius: 8px;
  background: var(--stock-hi);
  color: var(--ink);
  text-decoration: none;
  font: 600 11px/1.3 var(--sans);
  letter-spacing: .17em;
  text-transform: uppercase;
  text-align: center;
}
.mhr-review-stars { display: inline-flex; gap: 2px; flex: none; color: var(--foil-lo); }
.mhr-review-stars svg { width: 13px; height: 13px; }
.mhr-review-link:active { background: rgba(34, 29, 24, .05); }
/* The Google rating under it (kard_google_ratings/): ink on the stock, foil stars, dark gray Maps logo. */
.mhr-rating { --kgr-ink: var(--ink); --kgr-dim: var(--ink-72); --kgr-star: var(--foil-lo); --kgr-hair: var(--hairline-2);
              --kgr-surface: var(--stock-hi); --kgr-accent: var(--ink); --kgr-logo: #1F1F1F; }

/* ============ THE HALLMARK ============ */
.mhr-hallmark { margin-top: 38px; text-align: center; }
.mhr-qrframe { display: inline-block; padding: 4px; border-radius: 14px; --fo: 28; }
.mhr-qrpad {
  background: var(--stock-hi);
  border-radius: 10px;
  padding: 12px;
  box-shadow: inset 0 1px 3px rgba(34, 29, 24, .16);
}
/* real generated QR PNG; multiply seats it into the stock pad */
.mhr-qrpad img { display: block; width: 146px; height: 146px; mix-blend-mode: multiply; }
.mhr-qr-cap { margin-top: 13px; font: 600 9.5px/1 var(--sans); letter-spacing: .26em; color: var(--ink-60); text-transform: uppercase; }
.mhr-share {
  margin-top: 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--hairline-2);
  border-radius: 999px;
  min-height: 44px; /* finding 24: 35 px */
  padding: 10px 17px;
  font: 600 12px/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-72);
  cursor: pointer;
  transition: transform .08s ease-out;
}
.mhr-share svg { width: 13px; height: 13px; stroke: var(--ink-72); stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mhr-share:active { transform: translateY(1px); background: rgba(34, 29, 24, .05); }

/* ============ THE EXCHANGE ============ */
.mhr-exchange { margin-top: 34px; text-align: center; }
.mhr-exchange-kicker { font: 500 9px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-45); }
.mhr-exchange-btn {
  display: block; /* a link to the sheet's own page now (finding 2) */
  width: 100%;
  text-align: center;
  text-decoration: none;
  margin-top: 10px;
  padding: 16.5px 16px; /* 44 px to tap */
  border: 0;
  border-radius: 11px;
  cursor: pointer;
  background: linear-gradient(178deg, #2E2620, var(--ink));
  color: var(--stock);
  font: 600 11px/1 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 6px rgba(0, 0, 0, .3);
  transition: transform .08s ease-out;
}
.mhr-exchange-btn:active { transform: translateY(1px); }

/* ============ COLOPHON ============ */
.mhr-colophon { margin-top: 36px; padding-bottom: 30px; text-align: center; }
.mhr-punch {
  display: inline-block;
  width: 19px;
  height: 19px;
  --fo: 36;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C13.3 6.9 17.1 10.7 24 12 17.1 13.3 13.3 17.1 12 24 10.7 17.1 6.9 13.3 0 12 6.9 10.7 10.7 6.9 12 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C13.3 6.9 17.1 10.7 24 12 17.1 13.3 13.3 17.1 12 24 10.7 17.1 6.9 13.3 0 12 6.9 10.7 10.7 6.9 12 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.mhr-colophon p { margin-top: 9px; font: 600 9px/1.8 var(--sans); letter-spacing: .24em; color: var(--ink-45); text-transform: uppercase; }
.mhr-colophon a { color: var(--ink-60); text-decoration: underline; text-decoration-color: rgba(192, 57, 43, .55); text-underline-offset: 3px; }

/* intent sentinel — invisible scroll marker */
.mhr-sentinel { display: block; height: 2px; }

/* ============ TILT PILL (iOS permission gate) ============ */
/* In the card's empty top corner, opposite the bookmark and clear of the
   medal (half the card less the medal's half), never over the content:
   finding 27. 44 px to tap, 12 px words: one word ("Tilt", "Neigen",
   "Miringkan"), on one line in every language; the sentence is its name. */
.mhr-tiltpill {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 7;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  max-width: calc(50% - 82px);
  background: #241D17;
  border: 1px solid rgba(201, 169, 97, .5);
  border-radius: 14px;
  padding: 6px 10px;
  font: 600 12px/1.2 var(--sans);
  letter-spacing: .02em;
  white-space: nowrap;
  color: #D9BC77;
  text-align: left;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
  cursor: pointer;
  animation: mhr-pill-in .25s ease-out both;
}
@keyframes mhr-pill-in { from { opacity: 0; transform: translateY(-4px); } }
.mhr-tiltpill svg { width: 11px; height: 11px; fill: currentColor; flex: none; }
@media (max-width: 374px) { .mhr-tiltpill svg { display: none; } }
.mhr-tiltpill:focus-visible { outline-color: #C9A961; }

/* the shared connect modal, dressed as a paper sheet on the velvet */
.mhr-root .modal-container .container { background: linear-gradient(174deg, #FBF6EA, #F5EFE3); }

/* ============ ENTRANCE — the card settles onto the velvet ============ */
.mhr-kard { animation: mhr-settle .48s var(--settle) .04s both; }
@keyframes mhr-settle { from { opacity: 0; transform: translateY(24px) scale(.965); } }
.mhr-face > * { animation: mhr-rise .35s ease-out both; animation-delay: calc(.26s + var(--i, 0) * .06s); }
@keyframes mhr-rise { from { opacity: 0; transform: translateY(8px); } }

/* no-JS: the foil still breathes once every 14s. Runs on background-position
   (var() resolves per element), so it needs neither @property nor the engine;
   the foil controller adds .mhr-js and takes over. */
.mhr-root:not(.mhr-js) .mhr-foil { animation: mhr-foildrift 14s ease-in-out 2s infinite alternate; }
@keyframes mhr-foildrift {
  from { background-position: 0 0, calc((34 - var(--fo, 0)) * 1.4%) 0; }
  to { background-position: 0 0, calc((66 - var(--fo, 0)) * 1.4%) 0; }
}

/* ============ REDUCED MOTION — engraved stillness ============ */
@media (prefers-reduced-motion: reduce) {
  .mhr-root, .mhr-root *, .mhr-root ::before, .mhr-root ::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ============ WIDER STAGES: the card centered in the velvet box ============ */
@media (min-width: 760px) {
  .mhr-root { padding-top: max(7vh, 48px); }
  .mhr-kard { border-radius: 16px; }
}

/* ============ ADDRESS (kards/_address): the lines, then Directions ============ */
.mhr-address-lines {
  margin-top: 14px;
  font-family: var(--serif);
  font-style: normal;
  font-variant-numeric: lining-nums;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink-72);
  overflow-wrap: anywhere;
}
.mhr-address-line:first-child { color: var(--ink); }
.mhr-directions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px; /* finding 24: 37 px */
  margin-top: 14px;
  padding: 11px 18px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--hairline-2);
  color: var(--core-deep);
  font: 600 11px/1 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
}
.mhr-directions svg { width: 15px; height: 15px; flex: none; }
.mhr-directions:active { box-shadow: inset 0 0 0 1px var(--core); }

/* Hindi and Arabic in the smallest labels (visitor-language): Devanagari
   or Arabic set at a tracked capital's 8.5–9.5px reads a size smaller than
   the capitals did, so a label holding either steps up to 10.5px. The
   payment slip's labels are 12px now (public mobile audit, finding 27), so
   they keep that. */
.mhr-root :is(.mhr-readmore, .mhr-qr-cap, .mhr-exchange-kicker, .mhr-colophon p):is([data-vt-lang="hi"], :has([data-vt-lang="hi"]), [data-vt-lang="ar"], :has([data-vt-lang="ar"])) { font-size: 10.5px; }

/* The foot's one line (kards/_made_with), in words a visitor reads, not the
   engraved capitals ("Engraved by eKard · Mint your own"; field round 1,
   D13). After the Hindi and Arabic step-up above, which it doesn't need. */
.mhr-root .mhr-colophon p.mhr-made { font: 500 12.5px/1.6 var(--sans); letter-spacing: .01em; text-transform: none; color: var(--ink-60); }
.mhr-root .mhr-colophon p.mhr-made a { color: var(--core-deep); }

/* ============ PRODUCTS (kards/_products): cards on the cotton stock ============ */
.mhr-products .kp-prod { border-radius: 10px; overflow: hidden; background: var(--stock-hi); box-shadow: 0 0 0 1px var(--hairline); }
.mhr-products .kp-name { font-family: var(--serif); font-weight: 600; color: var(--ink); }
.mhr-products .kp-price { color: var(--ink-72); }
.mhr-products .kp-line, .mhr-products .kp-note, .mhr-products .kp-foot-note { color: var(--ink-60); }
.mhr-products .kp-btn { border-radius: 8px; background: var(--core); color: var(--stock-hi); }
.mhr-products .kp-btn:active { background: var(--core-deep); }
.mhr-products .kp-btn--sold-out, .mhr-products .kp-btn--sold-out:active { background: var(--well); color: var(--ink-60); }
.mhr-products .kp-tag { color: var(--core); }
.mhr-products .kp-all { border-radius: 10px; color: var(--core); box-shadow: inset 0 0 0 1px var(--hairline-2); }
.mhr-kard.kpp-card { padding-block: 22px 30px; }
.mhr-kpp-back { color: var(--ink-72); }