/*
 * Blog articles: element rules for the Markdown body (`data-blog-prose`),
 * which is rendered HTML no Tamagui style prop can reach. Only blog documents
 * link it (`app/root.tsx`, keyed off the route handle). Colours are the gate's
 * `gateColor` values (app/components/gateValues.ts).
 */
[data-blog-prose] {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.65;
  color: #14243d;
}

[data-blog-prose] > :first-child { margin-top: 0; }

[data-blog-prose] h2 {
  margin: 48px 0 12px;
  font-size: 28px;
  line-height: 1.22;
  font-weight: 400;
  letter-spacing: -0.02em;
}

[data-blog-prose] h3 {
  margin: 32px 0 8px;
  font-size: 21px;
  line-height: 1.3;
  font-weight: 500;
}

[data-blog-prose] p { margin: 0 0 18px; }

[data-blog-prose] ul,
[data-blog-prose] ol { margin: 0 0 18px; padding-left: 1.4em; }

[data-blog-prose] li { margin: 6px 0; }

[data-blog-prose] strong { font-weight: 600; }

[data-blog-prose] a {
  color: #1b3a6b;
  text-decoration: underline;
  text-underline-offset: 3px;
}

[data-blog-prose] a:focus-visible {
  outline: 2px solid #1b3a6b;
  outline-offset: 3px;
  border-radius: 4px;
}

[data-blog-prose] em { color: #5b6272; }

[data-blog-list] { list-style: none; margin: 0; padding: 0; }

@media (max-width: 560px) {
  [data-blog-prose] { font-size: 17px; }
  [data-blog-prose] h2 { font-size: 24px; }
}

[data-blog-card] { transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; }
@media (prefers-reduced-motion: reduce) {
  [data-blog-card] { transition: none; }
}
[data-blog-card], [data-blog-card] * { text-decoration: none; }
[data-blog-card]:hover h2 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }