/* post-embed.css — the Viral Moment's posts, tap-to-load, and the tips line
   under the story (2026-10-08, docs/FORMATS.md 90). Markup from
   scripts/viral_moment.py, loading from /post-embed.js. Linked only by the
   pages that carry them (served immutable like every stylesheet: bump the ?v=
   token in viral_moment.EMBED_CSS when this file changes).

   Until a reader taps, a post is a quiet quoted card and nothing loads from
   the platform. One rule system (a near-black top rule), the house faces,
   upright, nothing under 12px. */

article.story .post-embed {
  margin: 30px 0;
  padding: 18px 20px 16px;
  border-top: 2px solid var(--rule-strong, #121212);
  background: var(--paper, #fff);
  box-shadow: inset 0 0 0 1px var(--rule, #dcdcdc);
}
article.story .post-embed blockquote {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  background: none;
  font: 400 1rem/1.5 var(--serif, Georgia, serif);
  color: var(--ink, #121417);
}
article.story .post-embed blockquote p { margin: 0 0 .5em; }
article.story .post-embed blockquote a { color: var(--blue-deep, #1a35b0); }
article.story .post-embed-load {
  display: inline-block;
  font: 700 14px/1 var(--ui, Arial, sans-serif);
  letter-spacing: .02em;
  color: var(--paper, #fff);
  background: var(--ink, #121417);
  border: 0;
  border-radius: 2px;
  padding: 12px 16px;
  min-height: 44px;
  cursor: pointer;
}
article.story .post-embed-load:hover,
article.story .post-embed-load:focus-visible { background: var(--blue-deep, #1a35b0); }
article.story .post-embed-note {
  display: block;
  margin-top: 8px;
  font: 400 12.5px/1.45 var(--ui, Arial, sans-serif);
  color: var(--ink-3, #63676f);
}
article.story .post-embed.is-loaded { padding: 0; box-shadow: none; border-top: 0; }
article.story .post-embed-frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* The tips line and the preferred-source link under a Viral Moment. */
.story-tipline {
  display: block;
  max-width: var(--measure, 700px);
  margin: 26px auto 0;
  padding: 14px 16px 0;
  border-top: 1px solid var(--rule, #dcdcdc);
  font: 400 14px/1.55 var(--ui, Arial, sans-serif);
  color: var(--ink-2, #55585f);
}
.story-tipline a { color: var(--blue-deep, #1a35b0); }
.story-tipline .pref-source { display: inline-block; margin-left: 6px; font-weight: 700; }