/* Interim Ghost theme — component styles that live in the Astro site's scoped
   component styles rather than global.css. Ported here so a Ghost-served
   Sunday letter or the Dumpling Club landing matches jackcheng.com. Base
   tokens, dot-grid, masthead, links, and typography come from the vendored
   global.css + jig.css; this file adds the letter sheet, the membership CTA,
   the subscribe block, and the interim "back to the apex" chrome.

   Astro scopes content styles with :global(); here the letter body is ordinary
   Ghost {{content}} HTML, so those become plain descendant selectors. */

/* ---- Dumpling Club membership CTA (from src/pages/dumpling-club.astro) ---- */

.dumpling-body h3 {
  font-family: var(--type-heading-face);
  font-weight: var(--type-heading-weight);
  font-size: var(--type-heading-size);
  line-height: var(--rhythm);
  margin: var(--space-1) 0 var(--space-half);
}
.membership-card {
  margin: 0 0 var(--space-1);
  padding: var(--space-three-quarter) var(--space-1);
  border: 1px solid var(--rule);
  border-radius: 6px;
}
.membership-card-title {
  margin: 0 0 var(--space-half);
  font: var(--type-meta-weight, 400) var(--type-meta-size)/var(--rhythm) var(--type-meta-face);
  color: var(--muted);
  letter-spacing: 0.02em;
}
.membership-card p {
  margin: 0;
  color: var(--text-soft);
}
.membership-cta-lead {
  font: var(--type-subhead-weight, 400) var(--type-subhead-size)/var(--rhythm) var(--type-subhead-face);
  color: var(--text-soft);
  margin: 0 0 var(--space-1);
}
.membership-cta-button {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: #fff;
  color: var(--accent);
  font: 500 0.9375rem/1.2 var(--font-sans);
  text-decoration: none;
  margin: 0 0 var(--space-three-quarter);
  cursor: pointer;
}
.membership-cta-button:hover {
  background: color-mix(in srgb, var(--accent) 8%, #fff);
  text-decoration: none;
}
.membership-cta-signin {
  font: var(--type-small-size)/var(--rhythm) var(--font-sans);
  color: var(--muted);
  margin: 0 0 var(--space-1-5);
  padding-bottom: var(--space-1);
}

/* ---- Sunday letter sheet (from src/pages/sunday/[slug].astro) ---- */

.letter-intro {
  max-width: 952px;
  margin: var(--space-1) auto 0;
  padding: 0 clamp(20px, 4vw, 44px);
  color: var(--muted);
  font-family: var(--type-meta-face);
  font-weight: var(--type-meta-weight);
  font-size: var(--type-meta-size);
  line-height: var(--type-meta-line-height);
  text-align: center;
}

.letter {
  --measure: 640px;
  max-width: 952px;
  margin: var(--space-half) auto var(--space-1-5);
  padding: var(--space-1-5) clamp(20px, 4vw, 44px) calc(var(--space-2) + var(--space-1));
  background: #fdfcf9;
  border-radius: 3px;
}

.letter-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  max-width: var(--measure);
  color: var(--muted);
  font-family: var(--type-meta-face);
  font-weight: var(--type-meta-weight);
  font-size: var(--type-meta-size);
  line-height: var(--rhythm);
  margin: var(--space-half) auto;
}
.letter-no {
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.letter-date {
  font-variant-numeric: tabular-nums;
}

.letter-title {
  font: var(--type-title-weight, 400) var(--type-title-size)/var(--rhythm) var(--type-title-face);
  max-width: var(--measure);
  margin: 0 auto var(--space-1);
  overflow-wrap: break-word;
}
.letter-title.is-wrapped {
  line-height: calc(var(--rhythm) * 1.5);
  margin-top: calc(var(--rhythm) * -0.25);
}

.letter-plate {
  margin: 0 0 var(--space-1);
}
.letter-plate img {
  width: 100%;
}
.letter-plate figcaption,
.letter-body figcaption {
  color: var(--muted);
  font-family: var(--type-meta-face);
  font-weight: var(--type-meta-weight);
  font-size: var(--type-meta-size);
  line-height: var(--rhythm);
  margin-top: 0;
}

.letter-body {
  max-width: var(--measure);
  margin-inline: auto;
}
.letter-body p,
.letter-body ul,
.letter-body ol {
  margin-bottom: var(--space-three-quarter);
}
.letter-body .signature-mark {
  height: 44px;
  width: auto;
  margin-top: calc(var(--space-1-5) + var(--space-1));
}
/* The letters are Ghost's own editorial voice — the site's hand-drawn pen rail
   reads as the site's own mark, so blockquotes here use a plain ruled border. */
.letter-body blockquote {
  border-left: 1px solid var(--rule);
}
.letter-body blockquote::before {
  content: none;
}
/* Ghost section-break rules render as the Sunday seven-spoke mark, muted. */
.letter-body hr {
  border: 0;
  margin: var(--rhythm) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dot-grid-color);
}
.letter-body hr::after {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='1.4' stroke-linecap='round' fill='none'%3E%3Cline x1='12' y1='12' x2='12' y2='3'/%3E%3Cline x1='12' y1='12' x2='19' y2='6.4'/%3E%3Cline x1='12' y1='12' x2='20.8' y2='14'/%3E%3Cline x1='12' y1='12' x2='15.9' y2='20.1'/%3E%3Cline x1='12' y1='12' x2='8.1' y2='20.1'/%3E%3Cline x1='12' y1='12' x2='3.2' y2='14'/%3E%3Cline x1='12' y1='12' x2='5' y2='6.4'/%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' stroke='black' stroke-width='1.4' stroke-linecap='round' fill='none'%3E%3Cline x1='12' y1='12' x2='12' y2='3'/%3E%3Cline x1='12' y1='12' x2='19' y2='6.4'/%3E%3Cline x1='12' y1='12' x2='20.8' y2='14'/%3E%3Cline x1='12' y1='12' x2='15.9' y2='20.1'/%3E%3Cline x1='12' y1='12' x2='8.1' y2='20.1'/%3E%3Cline x1='12' y1='12' x2='3.2' y2='14'/%3E%3Cline x1='12' y1='12' x2='5' y2='6.4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.letter-body h3 {
  margin-top: var(--space-2);
}
.letter-body hr + h3 {
  margin-top: 0;
}

.letter-body figure {
  margin: var(--space-1) 0;
}
.letter-body figure img {
  margin: 0;
}

.letter-foot {
  display: flex;
  justify-content: center;
  max-width: var(--measure);
  color: var(--accent);
  margin: var(--space-1-5) auto 0;
}
.letter-foot .spoke {
  width: 26px;
  height: 26px;
}

.letter-subscribe {
  max-width: 640px;
  margin: var(--space-1-5) auto 0;
  padding: 0 clamp(20px, 4vw, 44px);
}

/* ---- Subscribe block (from src/components/SundaySubscribe.astro) ---- */

.sunday-ctas {
  margin: 0 0 var(--space-1-5);
}
.sunday-subscribe {
  max-width: 40rem;
  margin-inline: auto;
}
.subscribe-lead {
  font: var(--type-subhead-weight, 400) var(--type-subhead-size)/var(--rhythm) var(--type-subhead-face);
  color: var(--text-soft);
  margin: 0 0 var(--space-half);
}
.subscribe-embed iframe {
  width: 100%;
  min-height: 52px;
}
.subscribe-note {
  font: var(--type-meta-weight) var(--type-meta-size)/var(--rhythm) var(--type-meta-face);
  color: var(--muted);
  margin: var(--space-quarter) 0 0;
}

/* ---- Ghost Koenig content-width cards ---- */
/* The letter body is a centered reading measure; images/embeds flagged "wide"
   or "full" in the editor break out and re-center on the sheet, capped at the
   sheet's own width so they never exceed the paper. */
.letter-body .kg-width-wide,
.post-content .kg-width-wide {
  width: min(90vw, 840px);
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}
.letter-body .kg-width-full,
.post-content .kg-width-full {
  width: min(94vw, 952px);
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}
.kg-width-full img {
  width: 100%;
}

/* ---- Interim chrome: a quiet link back to the canonical apex site ---- */

.apex-backlink {
  max-width: 640px;
  margin: var(--space-1-5) auto 0;
  padding: 0 clamp(20px, 4vw, 44px);
  font: var(--type-meta-weight) var(--type-meta-size)/var(--rhythm) var(--type-meta-face);
  color: var(--muted);
  text-align: center;
}