/* LETTERHEAD collection — "Your name, typeset like it runs an empire."
   Ivory stock only in v1 (slate reserved for a future stock axis).
   Everything scoped under .lth-; root is main.lth-root. */

/* ============ FRAUNCES, SELF-HOSTED ============ */
/* A family name of its own: kard.css declares "Fraunces" faces for the
   restaurant layout (a static 600, an italic 400), and a same-named face
   that matches a weight exactly wins, so every 600 label here downloaded
   restaurant's 35 KB file on top of this one (letterhead_default checks).

   Static faces, about 18 KB each, where one variable file (300-700 and the
   optical size, 66 KB) and its italic (42 KB) were 110 KB of a first visit
   (public mobile audit, finding 20). Three weight groups; each group is the
   Latin face, the rupee sign, latin-ext and the Devanagari twin with the same
   font-weight, because a face joins its family's others only when its
   descriptors match: a twin of another weight range left the spaces between
   Hindi words to Georgia. The variable rupee and latin-ext files serve every
   group (one download each, and only for a page that has those letters).

   Each Latin face is two files (mobile audit 3's P20: 79 KB against 60):
   the core, which is Basic Latin, the punctuation a Kard sets and every
   accented letter eKard's own words use in Spanish, French, German and
   Portuguese (13-18 KB; the four 57 KB), and the rest of the face's
   characters (Å, Ø, ©, ½, €; 7-9 KB), fetched only by a page that sets one
   of them in that weight. Together they are the old face, glyph for glyph
   (experiments/ekard-rails/kard_speed_4/scripts/ks4_fonts.py; the ranges:
   test/integration/letterhead_page_test.rb). */
/* 300 500: the regular weight: About, the values, the address; the chips' 500 and the ghost's 340 draw in it */
@font-face {
  font-family: "Fraunces Letterhead";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("/assets/fraunces-letterhead-400-core-2eefd48b.woff2") format("woff2");
  unicode-range: U+0000-007E, U+00A0-00A1, U+00AB, U+00B7, U+00BA-00BB, U+00BF-00C1, U+00C4, U+00C7-00CA, U+00CD-00CE, U+00D4-00D6, U+00DA-00DC, U+00DF-00E4, U+00E7-00EB, U+00ED-00EF, U+00F1, U+00F3-00F6, U+00F9-00FC, U+0153, U+2013-2014, U+2018-2019, U+201C-201E, U+2022, U+2026, U+2122;
}
@font-face {
  font-family: "Fraunces Letterhead";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("/assets/fraunces-letterhead-400-rest-5c9a73c6.woff2") format("woff2");
  unicode-range: U+00A2-00AA, U+00AC-00B6, U+00B8-00B9, U+00BC-00BE, U+00C2-00C3, U+00C5-00C6, U+00CB-00CC, U+00CF-00D3, U+00D7-00D9, U+00DD-00DE, U+00E5-00E6, U+00EC, U+00F0, U+00F2, U+00F7-00F8, U+00FD-00FF, U+0131, U+0152, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-2012, U+2015-2017, U+201A-201B, U+201F-2021, U+2023-2025, U+2027-206F, U+20AC, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces Letterhead";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("/assets/fraunces-var-300-700-rupee-60208daa.woff2") format("woff2");
  unicode-range: U+20B9;
}
@font-face {
  font-family: "Fraunces Letterhead";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("/assets/fraunces-var-300-700-ext-53ea12c1.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B8, U+20BA-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces Letterhead";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("/assets/noto-serif-devanagari-400-982d9839.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+A8E0-A8FF;
}
/* 501 580: the name's 560 at a display optical size (60): the name, the UPI ID, About's drop cap, the exchange sheet's title */
@font-face {
  font-family: "Fraunces Letterhead";
  font-style: normal;
  font-weight: 501 580;
  font-display: swap;
  src: url("/assets/fraunces-letterhead-560-core-21909b6c.woff2") format("woff2");
  unicode-range: U+0000-007E, U+00A0-00A1, U+00AB, U+00B7, U+00BA-00BB, U+00BF-00C1, U+00C4, U+00C7-00CA, U+00CD-00CE, U+00D4-00D6, U+00DA-00DC, U+00DF-00E4, U+00E7-00EB, U+00ED-00EF, U+00F1, U+00F3-00F6, U+00F9-00FC, U+0153, U+2013-2014, U+2018-2019, U+201C-201E, U+2022, U+2026, U+2122;
}
@font-face {
  font-family: "Fraunces Letterhead";
  font-style: normal;
  font-weight: 501 580;
  font-display: swap;
  src: url("/assets/fraunces-letterhead-560-rest-1519641b.woff2") format("woff2");
  unicode-range: U+00A2-00AA, U+00AC-00B6, U+00B8-00B9, U+00BC-00BE, U+00C2-00C3, U+00C5-00C6, U+00CB-00CC, U+00CF-00D3, U+00D7-00D9, U+00DD-00DE, U+00E5-00E6, U+00EC, U+00F0, U+00F2, U+00F7-00F8, U+00FD-00FF, U+0131, U+0152, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-2012, U+2015-2017, U+201A-201B, U+201F-2021, U+2023-2025, U+2027-206F, U+20AC, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces Letterhead";
  font-style: normal;
  font-weight: 501 580;
  font-display: swap;
  src: url("/assets/fraunces-var-300-700-rupee-60208daa.woff2") format("woff2");
  unicode-range: U+20B9;
}
@font-face {
  font-family: "Fraunces Letterhead";
  font-style: normal;
  font-weight: 501 580;
  font-display: swap;
  src: url("/assets/fraunces-var-300-700-ext-53ea12c1.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B8, U+20BA-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces Letterhead";
  font-style: normal;
  font-weight: 501 580;
  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;
}
/* 581 700: the small caps' 600 at a text optical size (13): labels, eyebrows, the buttons */
@font-face {
  font-family: "Fraunces Letterhead";
  font-style: normal;
  font-weight: 581 700;
  font-display: swap;
  src: url("/assets/fraunces-letterhead-600-core-538841b5.woff2") format("woff2");
  unicode-range: U+0000-007E, U+00A0-00A1, U+00AB, U+00B7, U+00BA-00BB, U+00BF-00C1, U+00C4, U+00C7-00CA, U+00CD-00CE, U+00D4-00D6, U+00DA-00DC, U+00DF-00E4, U+00E7-00EB, U+00ED-00EF, U+00F1, U+00F3-00F6, U+00F9-00FC, U+0153, U+2013-2014, U+2018-2019, U+201C-201E, U+2022, U+2026, U+2122;
}
@font-face {
  font-family: "Fraunces Letterhead";
  font-style: normal;
  font-weight: 581 700;
  font-display: swap;
  src: url("/assets/fraunces-letterhead-600-rest-91164dad.woff2") format("woff2");
  unicode-range: U+00A2-00AA, U+00AC-00B6, U+00B8-00B9, U+00BC-00BE, U+00C2-00C3, U+00C5-00C6, U+00CB-00CC, U+00CF-00D3, U+00D7-00D9, U+00DD-00DE, U+00E5-00E6, U+00EC, U+00F0, U+00F2, U+00F7-00F8, U+00FD-00FF, U+0131, U+0152, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-2012, U+2015-2017, U+201A-201B, U+201F-2021, U+2023-2025, U+2027-206F, U+20AC, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces Letterhead";
  font-style: normal;
  font-weight: 581 700;
  font-display: swap;
  src: url("/assets/fraunces-var-300-700-rupee-60208daa.woff2") format("woff2");
  unicode-range: U+20B9;
}
@font-face {
  font-family: "Fraunces Letterhead";
  font-style: normal;
  font-weight: 581 700;
  font-display: swap;
  src: url("/assets/fraunces-var-300-700-ext-53ea12c1.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B8, U+20BA-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces Letterhead";
  font-style: normal;
  font-weight: 581 700;
  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;
}
/* Every italic here is set at 400 (the tagline, the slip's note, About's
   emphasis): the italic pinned at 400 and at the tagline's optical size
   (18), the restaurant layout's 23 KB file split as the faces above. Declared 400 alone,
   so a bold italic gets a synthetic bold rather than 400's outlines.
   Devanagari has no italic: its twin is upright. */
@font-face {
  font-family: "Fraunces Letterhead";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fraunces-letterhead-italic-400-core-3086c00a.woff2") format("woff2");
  unicode-range: U+0000-007E, U+00A0-00A1, U+00AB, U+00B7, U+00BA-00BB, U+00BF-00C1, U+00C4, U+00C7-00CA, U+00CD-00CE, U+00D4-00D6, U+00DA-00DC, U+00DF-00E4, U+00E7-00EB, U+00ED-00EF, U+00F1, U+00F3-00F6, U+00F9-00FC, U+0153, U+2013-2014, U+2018-2019, U+201C-201E, U+2022, U+2026, U+2122;
}
@font-face {
  font-family: "Fraunces Letterhead";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fraunces-letterhead-italic-400-rest-374dba06.woff2") format("woff2");
  unicode-range: U+00A2-00AA, U+00AC-00B6, U+00B8-00B9, U+00BC-00BE, U+00C2-00C3, U+00C5-00C6, U+00CB-00CC, U+00CF-00D3, U+00D7-00D9, U+00DD-00DE, U+00E5-00E6, U+00EC, U+00F0, U+00F2, U+00F7-00F8, U+00FD-00FF, U+0131, U+0152, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-2012, U+2015-2017, U+201A-201B, U+201F-2021, U+2023-2025, U+2027-206F, U+20AC, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces Letterhead";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-devanagari-400-982d9839.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+A8E0-A8FF;
}
/* Metrics-matched stand-in so the masthead doesn't jump when Fraunces arrives */
@font-face {
  font-family: "Fraunces-fallback";
  src: local("Georgia");
  ascent-override: 97%;
  descent-override: 27%;
  line-gap-override: 0%;
  size-adjust: 104%;
}

/* ============ TOKENS + ROOT ============ */
.lth-root {
  /* ivory stock; slate pair reserved for the future owner-side stock axis */
  --paper: #F5F1E8;
  --ink: #181510;
  --ink-62: rgba(24, 21, 16, .62);
  --ink-38: rgba(24, 21, 16, .38); /* rules and marks only: 2.4:1, too faint for words */
  --ink-muted: #6E675B; /* eyebrows and notes: 5:1 on the paper (public mobile audit, finding 5) */
  --hairline: rgba(24, 21, 16, .14);
  --wash: rgba(24, 21, 16, .06);
  --tear: rgba(24, 21, 16, .32);
  --ghost: rgba(24, 21, 16, .075);
  --accent: #B3271E;
  --accent-soft: rgba(179, 39, 30, .55);
  --deboss: 0 1px 0 rgba(255, 255, 255, .55);
  --press: cubic-bezier(.16, 1, .3, 1);
  --settle: cubic-bezier(.4, 0, .2, 1);

  color-scheme: light;
  background: var(--paper);
  color: var(--ink);
  /* Fraunces has Latin only. Names in other scripts take the device's own
     serif for theirs, by name where the system has one (Linux and ChromeOS's
     Noto Serif, Apple's Sangam MN, Arabic's Naskh), else the generic serif's
     fallback (Android's per-script Noto): nothing is downloaded for them. */
  font-family: "Fraunces Letterhead", "Fraunces-fallback", Georgia, "Noto Serif",
    "Noto Serif Devanagari", "Devanagari Sangam MN", "Noto Serif Gujarati", "Gujarati Sangam MN",
    "Noto Serif Tamil", "Tamil Sangam MN", "Noto Naskh Arabic", "Geeza Pro", serif;
  /* No slanted Devanagari, Arabic or Tamil: a font with no italic stays upright. */
  font-synthesis: weight;
  font-optical-sizing: auto;
  line-height: 1.6;
  min-height: 100svh;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
.lth-root ::selection { background: rgba(179, 39, 30, .2); }
.lth-root a { color: inherit; }
.lth-root :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.lth-num { font-variant-numeric: lining-nums tabular-nums; }

/* ============ THE SHEET ============ */
.lth-sheet {
  position: relative;
  background: var(--paper);
  min-height: 100svh;
  max-width: 440px;
  margin: 0 auto;
  padding: 20px;
}
.lth-sheet::before { /* paper grain, 64px tile, fixed low alpha (banding defense) */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='64' height='64' filter='url(%23g)'/%3E%3C/svg%3E") repeat;
  background-size: 64px 64px;
  opacity: .045;
}
@media (prefers-reduced-data: reduce) {
  .lth-sheet::before { display: none; }
}
.lth-frame {
  position: relative;
  z-index: 1;
  border: 1px solid var(--hairline);
  padding: 26px 22px 38px;
  min-height: calc(100svh - 40px);
}

/* ============ MASTHEAD ============ */
.lth-masthead { position: relative; }
.lth-eyebrow-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 34px;
}
.lth-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-62);
}
/* The team's name links to its front door: 44 px to tap around a 15 px
   line, the padding drawn over the margin it doesn't take (finding 5). */
.lth-eyebrow a { text-decoration: none; padding-block: 14.5px; }
.lth-eyebrow-logo {
  display: inline-block;
  width: 14px;
  height: 14px;
  object-fit: cover;
  vertical-align: -2px;
  margin-right: 5px;
  border-radius: 1px;
}
.lth-top-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
  position: relative;
  z-index: 3;
}
/* Keep (bookmark frame) — shared partial re-dressed in letterhead voice */
.lth-keep turbo-frame { display: block; }
.lth-keep form { display: flex; }
.lth-root .lth-keep .group > .absolute { display: none; } /* stock tooltip off */
/* 44 px to tap around a 17 px drawing; the negative margins keep the row
   where the small mark put it (finding 5). */
.lth-root .lth-keep form > button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: -13px -13px;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  color: var(--ink-62);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: color 160ms var(--settle);
}
.lth-root .lth-keep form > button:hover { background: transparent; box-shadow: none; color: var(--accent); }
.lth-root .lth-keep form > button.text-yellow-500 { color: var(--accent); }
.lth-root .lth-keep svg { width: 17px; height: 17px; }
.lth-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px; /* a short word ("مشاركة") still 44 px wide */
  min-height: 44px;
  margin: -13px 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-family: inherit;
  color: var(--ink-62);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-decoration-color: var(--hairline);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: pointer;
  transition: color 160ms var(--settle);
  flex: none;
}
.lth-share:active { color: var(--accent); }
.lth-ghost {
  position: absolute;
  top: -30px;
  right: -14px;
  z-index: 0;
  font-size: min(172px, 46vw);
  font-weight: 340;
  line-height: 1;
  letter-spacing: -.05em;
  color: var(--ghost);
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
}
.lth-portrait { /* affixed photograph — chassis identity slot, letterhead-dressed */
  position: absolute;
  top: 42px;
  right: 0;
  z-index: 2;
  width: 76px;
  margin: 0;
  padding: 4px 4px 6px;
  background: #FFFDF7;
  border: 1px solid var(--hairline);
  box-shadow: 0 1px 2px rgba(24, 21, 16, .14), 0 7px 16px rgba(24, 21, 16, .12);
  transform: rotate(1.6deg);
}
.lth-portrait img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
/* A logo (Kard#photo_as_logo?) heads the sheet as a letterhead's does:
   flat on the paper, whole, at its own shape, in place of the ghost. */
.lth-logo {
  position: relative;
  z-index: 1;
  max-width: min(240px, 72%);
  max-height: 72px;
  margin-bottom: 22px;
}
/* The name, as large as its longest word lets it be on the line
   (kard_names_logos, .kard-name): the room is the sheet's width less its
   margins and, beside the print, the print's. Down to 24 px, where a word
   too long even for that breaks at its soft hyphens. */
.lth-name {
  --name-floor: 24px;
  --name-pad: 0px;
  --name-room: calc(min(100vw, 440px) - 86px - var(--name-pad));
  position: relative;
  z-index: 1;
  font-size: max(var(--name-floor), min(clamp(44px, 13.5vw, 76px), calc(var(--name-room) / var(--name-em, 1))));
  font-weight: 560;
  line-height: .98;
  letter-spacing: -.015em;
  text-wrap: balance;
  text-shadow: var(--deboss);
  max-width: calc(9ch + var(--name-pad));
}
.lth-masthead--photo .lth-name { --name-pad: 88px; padding-right: 88px; }
/* A word wider than the stacked measure takes the line. */
.lth-name--wide { max-width: none; }
/* Long names trade the monumental size for fit; words wrap whole, never clip. */
.lth-name--long {
  font-size: max(var(--name-floor), min(clamp(28px, 8.4vw, 48px), calc(var(--name-room) / var(--name-em, 1))));
  max-width: none;
}
.lth-rule {
  width: 44px;
  height: 3px;
  background: var(--accent);
  margin: 20px 0 16px;
  transform-origin: left center;
}
/* Job title · company, set small in caps like a letterhead's second line. */
.lth-role {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  max-width: 34ch;
  overflow-wrap: break-word;
}
.lth-role + .lth-tagline { margin-top: 8px; }
.lth-tagline {
  font-style: italic;
  font-size: 19px;
  line-height: 1.35;
  color: var(--ink-62);
  max-width: 30ch;
}
/* The owner's name, role, tagline or team in a script Fraunces doesn't
   have (LetterheadHelper#lth_script_class): untracked, so Devanagari's
   headline and Arabic's joins stay whole; room between a name's lines for
   the marks above and below the letters; the tagline upright, as these
   scripts have no italic; the small-caps lines a size up, since they
   have no capitals to carry them. */
.lth-root .lth-script { letter-spacing: normal; }
.lth-name.lth-script { line-height: 1.3; }
.lth-tagline.lth-script { font-style: normal; }
.lth-role.lth-script { font-size: 14px; }
.lth-eyebrow.lth-script { font-size: 13px; }

/* ============ PRIMARY ACTION ============ */
.lth-actions { margin-top: 30px; }
.lth-root .lth-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: transform 120ms var(--settle), box-shadow 120ms var(--settle);
}
.lth-cta:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .4); }
/* Exchange under the Save block: underlined small caps in a 44 px line */
.lth-root .lth-exchange {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-family: inherit;
  color: var(--ink-62);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-decoration-color: var(--hairline);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  cursor: pointer;
  transition: color 160ms var(--settle);
}
.lth-exchange:active { color: var(--accent); }
/* booking on (scheduling): Book is the ink block, and Save my card and
   Exchange cards step down to two outlined buttons side by side beneath it
   (finding 5: they were 24 px text links). */
/* Save my card and Exchange cards side by side, each on one line; where a
   language's two don't fit (German at 360), each takes the row. */
.lth-subactions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.lth-subactions > * { flex: 1 1 0; min-width: min(max-content, 100%); white-space: nowrap; }
.lth-root .lth-subactions .lth-outline { padding-inline: 6px; letter-spacing: .07em; }
.lth-root .lth-outline {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 6px 8px;
  box-shadow: inset 0 0 0 1px var(--ink);
  color: var(--ink);
  text-decoration: none;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: transform 120ms var(--settle), background-color 120ms var(--settle);
}
.lth-outline:active { transform: translateY(1px); background: var(--wash); }
/* next free chips under the Book block: square, hairline, in the ink */
.lth-root .kn { color: var(--ink); margin-top: 14px; }
.lth-root .kn-eyebrow, .lth-root .kn-zone { color: var(--ink-62); opacity: 1; }
.lth-root .kn-slot { border-radius: 0; box-shadow: inset 0 0 0 1px var(--hairline); }
/* French's "AUJOURD'HUI" in Fraunces' capitals is 96 px in a chip with 78
   at 360 px, and still 88 untracked. Its days are set as words instead
   ("Aujourd'hui", "Demain", "Mar. 21"), 61 px (visitor-language review,
   2026-10-20). */
.lth-root .kn-slot span[data-vt-lang="fr"] { text-transform: none; letter-spacing: 0; }
.lth-root .kn-slot span[data-vt-lang="fr"]::first-letter { text-transform: uppercase; }
.lth-root .kn-more { color: var(--accent); }
.lth-arrow {
  width: 13px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============ THE LEDGER ============ */
.lth-ledger { margin-top: 40px; border-top: 1px solid var(--hairline); }
.lth-row {
  display: grid;
  grid-template-columns: 18px auto 1fr;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 56px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  text-align: left;
  transition: background-color 120ms var(--settle);
}
.lth-row:active { background: var(--wash); }
.lth-glyph {
  width: 18px;
  height: 18px;
  color: var(--ink-38);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lth-lab {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-62);
}
.lth-val {
  justify-self: end;
  text-align: right;
  font-size: 17px;
  line-height: 1.3;
  color: var(--ink);
  min-width: 0;
  box-shadow: 0 2px 0 transparent;
  transition: box-shadow 120ms var(--settle);
}
.lth-row:active .lth-val { box-shadow: 0 2px 0 var(--accent); }
/* An email or a website, whole: a long one wraps at its @ and dots
   (KardsHelper#pay_id), never cut short. An Arabic label is wider than the
   English, and "priya@glowstudio.exa…" was all a visitor could read
   (field round 1, V-F13). */
.lth-val-sm {
  font-size: 15px;
  max-width: 100%;
}
.lth-row-pay .lth-val { color: var(--accent); }

/* ============ OTHER WAYS TO PAY: ledger rows (kards/pay_options) ============ */
.lth-pay-opts { list-style: none; margin: 0; padding: 0; }
.lth-pay-opt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "label value" "label hint";
  align-items: center;
  column-gap: 13px;
  row-gap: 2px;
  width: 100%;
  min-height: 56px;
  padding: 9px 2px 9px 33px; /* the label lines up under the rows' labels, past their glyph */
  border: 0;
  border-bottom: 1px solid var(--hairline);
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms var(--settle);
}
.lth-pay-opt:active { background: var(--wash); }
.lth-pay-opt--long { grid-template-areas: "label hint" "value value"; row-gap: 6px; }
.lth-pay-opt-label {
  grid-area: label;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-62);
}
.lth-pay-opt-value {
  grid-area: value;
  justify-self: end;
  text-align: right;
  font-size: 15px;
  line-height: 1.3;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  min-width: 0;
}
.lth-pay-opt--long .lth-pay-opt-value { justify-self: start; text-align: left; font-size: clamp(14px, 4.1vw, 16px); letter-spacing: .02em; text-shadow: var(--deboss); }
.lth-pay-opt-hint {
  grid-area: hint;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.lth-pay-opt-hint svg { width: 12px; height: 12px; }
.lth-pay-opt-tick:empty { display: none; }
.lth-pay-opt--app .lth-pay-opt-hint,
.lth-pay-opt--copied .lth-pay-opt-hint { color: var(--accent); }
.lth-pay-opt-details {
  margin: -1px 0 0;
  padding: 0 2px 10px 33px;
  border-bottom: 1px solid var(--hairline);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-62);
}
.lth-pay-opt-item:has(.lth-pay-opt-details) .lth-pay-opt { border-bottom: 0; }
.lth-pay-opt-details > span > span:first-child { color: var(--ink-muted); }

/* ============ THE PAYMENT SLIP (perforated, open by design) ============ */
.lth-tear {
  position: relative;
  height: 12px;
  margin: 0 -23px; /* reaches the frame border so the notches punch it */
}
.lth-tear::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 6px;
  height: 1px;
  background-image: repeating-linear-gradient(90deg, var(--tear) 0 5px, transparent 5px 11px);
}
.lth-notch {
  position: absolute;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--hairline);
}
.lth-notch-l { left: -6px; }
.lth-notch-r { right: -6px; }
.lth-slip-body { padding: 20px 2px 24px; }
.lth-slip-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.lth-upiid {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  margin-top: 12px;
  padding: 0;
}
.lth-upiid-text {
  display: block;
  font-size: clamp(19px, 6.4vw, 24px);
  font-weight: 560;
  letter-spacing: -.005em;
  color: var(--ink);
  text-shadow: var(--deboss);
  word-break: break-all;
}
.lth-upiid-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 18px;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-62);
  transition: color 160ms var(--settle);
}
.lth-upiid-ic { display: none; }
.lth-upiid-ic svg { width: 13px; height: 13px; }
.lth-upiid.lth-copied .lth-upiid-meta { color: var(--accent); }
.lth-upiid.lth-copied .lth-upiid-ic { display: inline-flex; }
.lth-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.lth-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 72px;
  padding: 8px 16px;
  border: 1px solid var(--ink);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  transition: transform 120ms var(--settle), background-color 120ms var(--settle);
}
.lth-chip:active { transform: translateY(1px); background: var(--wash); }
.lth-anyrow {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 24px; /* the field reaches 11 px up (below): 13 px clear of the chips */
}
.lth-anyrow-cur { font-size: 16px; color: var(--ink-62); }
.lth-anyrow-input {
  flex: 0 1 150px;
  min-width: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink-38);
  border-radius: 0;
  padding: 4px 0 6px;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
  transition: border-color 160ms var(--settle);
}
.lth-anyrow-input:focus { outline: none; border-bottom-color: var(--accent); }
/* 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.) */
.lth-root .lth-anyrow-input { padding: 15px 4px 4px; margin-top: -11px; }
.lth-anyrow-input::placeholder { color: var(--ink-62); font-style: italic; font-size: 14px; } /* 4.5:1 on the paper */
.lth-root .lth-anyrow-open {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 6px;
  min-height: 44px;
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent-soft);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  /* On one line: the amount field beside it gives way ("App öffnen" broke
     in two at 360 px). */
  flex: none;
  white-space: nowrap;
}
.lth-slip-note {
  margin-top: 14px;
  font-size: 13px;
  color: var(--ink-muted);
  font-style: italic;
}

/* ============ SECTIONS ============ */
.lth-section { margin-top: 46px; }
.lth-seclab {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 14px;
}
.lth-about { font-size: 17px; line-height: 1.6; max-width: 62ch; }
/* The drop cap, when the first word can carry one (LetterheadHelper#drop_cap?:
   "I'm" split as a large "I'" and "m", field round 1, S-F14). */
.lth-drop-cap .trix-content > div:first-child::first-letter,
.lth-drop-cap .trix-content > p:first-child::first-letter {
  float: left;
  font-size: 56px;
  line-height: .8;
  font-weight: 560;
  color: var(--accent);
  padding: 6px 10px 0 0;
}
.lth-about .trix-content a {
  text-decoration: underline;
  text-decoration-color: var(--hairline);
  text-underline-offset: 4px;
}
.lth-readmore-row { margin-top: 10px; }
.lth-readmore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-62);
  text-decoration: underline;
  text-decoration-color: var(--hairline);
  text-underline-offset: 5px;
}
.lth-readmore svg { width: 12px; height: 12px; }

/* index of enclosures + links */
.lth-index { border-top: 1px solid var(--hairline); }
.lth-index .lth-seclab { padding-top: 14px; margin-bottom: 2px; }
.lth-toc {
  display: grid;
  grid-template-columns: 34px 1fr auto auto;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  transition: background-color 120ms var(--settle);
}
.lth-toc:active { background: var(--wash); }
.lth-folio { font-size: 13px; color: var(--ink-muted); }
.lth-toc-t {
  font-size: 17px;
  justify-self: start;
  box-shadow: 0 2px 0 transparent;
  transition: box-shadow 120ms var(--settle);
}
.lth-toc:active .lth-toc-t { box-shadow: 0 2px 0 var(--accent); }
.lth-toc-thumb {
  width: 30px;
  height: 38px;
  border: 1px solid var(--hairline);
  background: #FFFDF7;
  padding: 2px;
}
.lth-toc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lth-toc-k {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* elsewhere */
.lth-else-line { font-size: 17px; line-height: 2; color: var(--ink); }
.lth-else-line a {
  display: inline-block;
  padding: 5px 0; /* 44 px to tap on the 34 px line (finding 5) */
  text-decoration: underline;
  text-decoration-color: var(--hairline);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: text-decoration-color 160ms var(--settle);
}
.lth-else-line a:active { text-decoration-color: var(--accent); }
.lth-interpunct { color: var(--ink-muted); padding: 0 6px; }

/* The exchange sheet's title in the letterhead's own display face (560), not
   kard.css's Fraunces Display: one 17 KB file fewer (finding 20). */
.lth-root .xch-title,
.lth-root .xch-back-done { font-family: "Fraunces Letterhead", "Fraunces-fallback", Georgia, serif; }

/* intent sentinel — invisible scroll marker */
.lth-sentinel { height: 1px; }

/* ============ REVIEW (kards/_review_us): "Review us on Google" ============ */
.lth-root .lth-review-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  box-shadow: inset 0 0 0 1px var(--ink);
  color: var(--ink);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  transition: transform 120ms var(--settle), background 120ms var(--settle);
}
.lth-review-stars { display: inline-flex; gap: 2px; flex: none; color: var(--accent); }
.lth-review-stars svg { width: 13px; height: 13px; }
.lth-review-link:active { transform: translateY(1px); background: var(--wash); }
/* The Google rating under it (kard_google_ratings/): ink on the paper, the accent's stars, gray Maps logo. */
.lth-rating { --kgr-ink: var(--ink); --kgr-dim: var(--ink-muted); --kgr-star: var(--accent); --kgr-hair: var(--ink-38);
              --kgr-surface: transparent; --kgr-accent: var(--ink); --kgr-logo: #5E5E5E; }
.lth-rating .kgr-review { border-radius: 0; }

/* ============ COLOPHON ============ */
.lth-colophon {
  margin-top: 52px;
  padding-top: 30px;
  border-top: 1px solid var(--hairline);
}
/* Right under the ledger (no address, About, links or profiles between):
   the last row's hairline closes the ledger, and a second one 52 px below
   it framed nothing, an empty band that read like a missing row (field
   round 1, V-F39). */
.lth-ledger + .lth-colophon { margin-top: 34px; padding-top: 0; border-top: 0; }
.lth-seal { /* red chop framing the real generated QR */
  position: relative;
  width: 118px;
  height: 118px;
  transform: rotate(-2deg);
  margin: 6px 0 14px 2px;
  border: 1px solid var(--accent);
  background: #FCFAF4;
  padding: 6px;
  overflow: hidden;
}
.lth-seal::before { /* inner hairline ring */
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid var(--accent-soft);
  pointer-events: none;
}
.lth-seal-pad { display: block; width: 100%; height: 100%; }
.lth-seal-pad img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lth-seal::after { /* the glint band, driven by --glint (glint controller) */
  content: "";
  position: absolute;
  top: -12px;
  bottom: -12px;
  left: -52px;
  width: 52px;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(calc(var(--glint, 50) * 1.7px)) skewX(-8deg);
  pointer-events: none;
}
.lth-seal-cap {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
/* The foot's one line (kards/_made_with), where the colophon's serial and
   "Set in Fraunces. Printed by eKard — press your own" were (field round 1, D13). */
.lth-made { margin-top: 18px; font-size: 14px; color: var(--ink-62); }
.lth-made .kard-made-own {
  vertical-align: middle;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent-soft);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.lth-root .lth-share-inline { margin: 0 0 14px; }

/* ============ ENTRANCE: THE NAME, PRESSED (runs once, settles fast) ============
   Only the name moves. The eyebrow, rule, ghost letters, actions, next
   times, contact rows and sections pressed in after it, from 140 ms to about
   1 s, and a visitor read the page as still loading (field round 1, V-F28):
   they're there with the page now. Reduced motion: nothing moves. */
@media (prefers-reduced-motion: no-preference) {
  /* transform-only stamp: opacity + rise + scaleX settle — no letter-spacing tween */
  .lth-press-name {
    transform-origin: 0 70%;
    animation: lth-stamp 420ms var(--press) both;
  }
  @keyframes lth-stamp {
    from { opacity: 0; transform: translateY(6px) scaleX(1.012); }
    to { opacity: 1; transform: translateY(0) scaleX(1); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .lth-cta, .lth-chip, .lth-row, .lth-val, .lth-toc-t, .lth-share,
  .lth-exchange, .lth-outline, .lth-upiid-meta, .lth-anyrow-input { transition: none; }
}

/* ============ DESKTOP: PAPER ON THE DESK ============ */
@media (min-width: 720px) {
  .lth-root {
    /* holds the sheet's top margin, which otherwise collapsed through the
       root and left a band of the page's own grey above the desk */
    display: flow-root;
    background: #2E2A23;
    background-image: radial-gradient(130% 100% at 50% 0%, #3B362C 0%, #2E2A23 55%, #241F19 100%);
  }
  .lth-sheet {
    min-height: 0;
    margin: 56px auto 72px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 14px 40px rgba(0, 0, 0, .38), 0 40px 90px rgba(0, 0, 0, .32);
  }
  .lth-frame { min-height: 0; }
}

/* ============ ADDRESS (kards/_address): the lines, then Directions ============ */
.lth-address-lines { font-style: normal; font-variant-numeric: lining-nums; font-size: 17px; line-height: 1.55; color: var(--ink-62); overflow-wrap: anywhere; }
.lth-address-line:first-child { color: var(--ink); }
.lth-directions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 8px;
  padding: 0;
  text-decoration: underline;
  text-decoration-color: var(--accent-soft);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: text-decoration-color 160ms var(--settle);
}
.lth-directions svg { width: 16px; height: 16px; flex: none; }
.lth-directions:active { text-decoration-color: var(--accent); }

/* Right to left (Arabic): the colophon's share button and language pill
   sit on lines with no letter of their own to set their direction, so they
   fell back to the left; the colophon starts at the right, as Arabic does. */
html[dir="rtl"] .lth-colophon { text-align: right; }

/* Right to left (Arabic), the name block (field round 1, V-F13): every run
   takes its direction from its own first letter in a right-to-left page
   (kard.tailwind.css), so a Latin name, job title and tagline set
   themselves at the left while the rule, the team and the rest sat at the
   right. They start at the right; the ghost letters and the print, which
   sit opposite the name, move to the left, the print tilted the other way;
   the rule draws from the right. A value in the ledger sits at its row's
   end, the left. */
html[dir="rtl"] .lth-masthead { text-align: right; }
html[dir="rtl"] .lth-rule { transform-origin: right center; }
html[dir="rtl"] .lth-ghost { right: auto; left: -14px; }
html[dir="rtl"] .lth-portrait { right: auto; left: 0; transform: rotate(-1.6deg); }
html[dir="rtl"] .lth-masthead--photo .lth-name { padding-right: 0; padding-left: 88px; }
html[dir="rtl"] .lth-val { text-align: left; }

/* Devanagari and Arabic in the small labels (field round 1, V-F33): 12 px
   was tuned for letter-spaced Latin capitals, and these scripts, with no
   capitals to carry them, read a size smaller. 2 px up, the same colours. */
.lth-root:is(:lang(hi), :lang(ar)) :is(.lth-eyebrow, .lth-lab, .lth-seclab, .lth-seal-cap, .lth-slip-eyebrow, .lth-toc-k,
                                        .lth-pay-opt-label, .lth-pay-opt-hint, .lth-upiid-meta) { font-size: 14px; }

/* ============ PRODUCTS (kards/_products): a catalogue ledger ============ */
/* A small square photo beside each name, the price set right, in the
   ledger's hairline rules; the button a quiet outlined chip. */
.lth-products .kp-prod { border-top: 1px solid var(--hairline); }
.lth-products .kp-prod:last-child { border-bottom: 1px solid var(--hairline); }
.lth-products .kp-photo { border-radius: 2px; box-shadow: 0 0 0 1px var(--hairline); }
.lth-products .kp-name { font-size: 16px; font-weight: 600; color: var(--ink); }
.lth-products .kp-price { font-size: 15px; color: var(--ink); }
.lth-products .kp-line, .lth-products .kp-note { color: var(--ink-62); }
.lth-products .kp-btn { border: 1px solid var(--ink); border-radius: 2px; color: var(--ink); background: transparent; }
.lth-products .kp-btn:active { background: var(--wash); }
.lth-products .kp-btn--sold-out { border-color: var(--hairline); color: var(--ink-muted); }
.lth-products .kp-tag { color: var(--accent); }
.lth-products .kp-foot-note { color: var(--ink-muted); }
.lth-products .kp-all { justify-content: flex-start; padding-inline: 0; color: var(--accent); }
.lth-kpp-back { color: var(--ink-62); }