/* Qdate public content pages — extends landing.css (kit light tokens) */

main.wrap { padding-top: 56px; padding-bottom: 110px; }

.crumb { display: block; font-size: 14px; font-weight: 500; color: var(--mu); margin-bottom: 28px; text-decoration: none; }
.crumb a { color: var(--mu); text-decoration: none; }
.crumb a:hover { color: var(--pri); }

.page { max-width: 780px; margin: 0 auto; }

/* prose rendering for CMS bodies (markdown or TinyMCE HTML) */
.prose { font-size: 18px; line-height: 1.75; color: #26262b; }
.prose > h1 { display: none; }
.prose h2 { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--tx); margin: 40px 0 12px; }
.prose h3 { font-size: 23px; font-weight: 700; color: var(--tx); margin: 32px 0 10px; }
.prose h4, .prose h5 { font-size: 19px; font-weight: 700; color: var(--tx); margin: 26px 0 8px; }
.prose p { margin: 0 0 18px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 24px; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--tx); font-weight: 700; }
.prose a { color: var(--pri); text-decoration: none; border-bottom: 1px solid rgba(247, 28, 105, .35); }
.prose a:hover { border-bottom-color: var(--pri); }
.prose img { max-width: 100%; height: auto; border-radius: var(--r2); margin: 8px 0 18px; }
.prose blockquote { border-left: 3px solid var(--pri); background: var(--el); border-radius: 0 var(--r2) var(--r2) 0; padding: 14px 20px; margin: 0 0 18px; color: var(--tx); font-style: normal; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 16px; }
.prose th, .prose td { border: 1px solid var(--bd); padding: 10px 14px; text-align: left; }
.prose th { background: var(--el); font-weight: 700; }
.prose hr { border: none; border-top: 1px solid var(--bd); margin: 32px 0; }

.page-title { font-size: 44px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; margin-bottom: 10px; }
.page-lede { font-size: 20px; color: var(--mu); margin-bottom: 36px; max-width: 640px; }

/* blog grid */
.bgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 8px; }
@media (max-width: 1000px) { .bgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .bgrid { grid-template-columns: 1fr; } }
.bcard { display: block; text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--bd); border-radius: var(--r3); overflow: hidden; transition: box-shadow .15s, transform .15s; }
.bcard:hover { box-shadow: 0 10px 30px rgba(10, 10, 10, .07); transform: translateY(-2px); }
.bcard .cover { aspect-ratio: 16/9; width: 100%; object-fit: cover; display: block; background: var(--el); }
.bcard .bd { padding: 20px 22px 24px; }
.bcard .date { font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--mu); }
.bcard h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; margin: 8px 0; line-height: 1.3; }
.bcard p { font-size: 15px; color: var(--mu); line-height: 1.6; }
.bempty { text-align: center; color: var(--mu); padding: 80px 0; font-size: 18px; }
.pager { display: flex; justify-content: center; gap: 8px; margin-top: 44px; }
.pager a, .pager span { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--bd); font-size: 15px; font-weight: 600; color: var(--tx); text-decoration: none; }
.pager [aria-current], .pager .on { background: var(--pri); border-color: var(--pri); color: #fff; }

/* post hero */
.post-hero { border-radius: var(--r3); overflow: hidden; margin: 0 0 36px; }
.post-hero img { width: 100%; max-height: 420px; object-fit: cover; display: block; }
.post-meta { font-size: 14px; color: var(--mu); font-weight: 500; margin-bottom: 26px; }

/* signup */
.card-f { background: #fff; border: 1px solid var(--bd); border-radius: var(--r3); padding: 36px; max-width: 520px; }
.card-f label { display: block; font-size: 14px; font-weight: 600; margin: 0 0 6px; }
.card-f input { width: 100%; font: 400 16px var(--f); padding: 13px 16px; border: 1px solid #D4D4D8; border-radius: var(--r2); background: #fff; margin-bottom: 18px; }
.card-f input:focus { outline: none; border-color: var(--pri); box-shadow: 0 0 0 3px rgba(247, 28, 105, .12); }
.field-err { color: #b91c1c; font-size: 13.5px; margin: -12px 0 14px; }
.ok-box { background: rgba(21, 128, 61, .07); border: 1px solid rgba(21, 128, 61, .25); color: #14532d; border-radius: var(--r2); padding: 14px 18px; font-size: 15.5px; margin-bottom: 24px; }
.bad-box { background: rgba(185, 28, 28, .06); border: 1px solid rgba(185, 28, 28, .25); color: #991b1b; border-radius: var(--r2); padding: 14px 18px; font-size: 15.5px; margin-bottom: 24px; }