/* Formatting for post bodies — used by the post page AND the admin editor,
   so what you see while writing is what visitors see. */
.post-content { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: #1f2937; line-height: 1.75; font-size: 17px; overflow-wrap: anywhere; }
.post-content p, .post-content div { margin: 0 0 1em; }
.post-content h2 { font-family: 'Barlow Condensed', 'Inter', sans-serif; font-size: 1.75em; font-weight: 700; line-height: 1.2; letter-spacing: .005em; margin: 1.3em 0 0.45em; color: #0b1220; }
.post-content h3 { font-family: 'Barlow Condensed', 'Inter', sans-serif; font-size: 1.4em; font-weight: 700; line-height: 1.25; margin: 1.1em 0 0.35em; color: #0b1220; }
.post-content h4 { font-size: 1.1em; font-weight: 700; margin: 0.6em 0 0.3em; }
.post-content ul, .post-content ol { padding-inline-start: 1.5em; padding-inline-end: 0; margin: 0 0 1em; }
.post-content li { margin: .25em 0; }
.post-content ul { list-style: disc; }
.post-content ol { list-style: decimal; }
.post-content blockquote { border-inline-start: 4px solid #84cc16; background: #f5f9ee; margin: 1em 0; padding: 0.7em 1.1em; border-radius: 8px; }
.post-content a { color: #3f7d0a; text-decoration: underline; text-underline-offset: 2px; }
.post-content img { display: block; max-width: 100%; height: auto; margin: 1em auto; border-radius: 12px; }
.post-content strong, .post-content b { font-weight: 700; }

/* headings: leave room for the fixed header when jumping from the table of contents */
.post-content h2, .post-content h3 { scroll-margin-top: 96px; }
/* automatic table of contents (3+ headings) */
.post-content .post-toc { background: #f5f9ee; border: 1px solid #dfe9cf; border-radius: 14px; padding: 14px 18px; margin: 0 0 1.4em; }
.post-content .post-toc-title { font-weight: 700; color: #0b1220; margin: 0 0 6px; }
.post-content .post-toc ol { list-style-type: decimal; padding-inline-start: 1.4em; padding-inline-end: 0; margin: 0; }
.post-content .post-toc ol ol { padding-inline-start: 1.3em; margin: 2px 0 4px; font-size: .94em; }
.post-content .post-toc li { margin: 2px 0; }
.post-content .post-toc a { color: #3f7d0a; text-decoration: none; }
.post-content .post-toc a:hover { text-decoration: underline; }

/* "more posts" cards under an article (outside .post-content, on the dark page) */
.rel-wrap { margin: 32px 0 0; }
.rel-head { font-family: 'Barlow Condensed', sans-serif; color: #f1f5f9; font-size: 24px; font-weight: 700; margin: 0 2px 12px; }
.rel-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px; }
.rel-track::-webkit-scrollbar { display: none; }
.rel-track > * { flex: 0 0 calc((100% - 24px) / 3); min-width: 0; scroll-snap-align: start; }
@media (max-width: 639px) { .rel-track > * { flex-basis: 72%; } }
.rel-nav { display: flex; justify-content: space-between; margin-top: 12px; }
.rel-nav[hidden] { display: none; }
.rel-arrow { width: 42px; height: 42px; border-radius: 9999px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .07);
  color: #e5e7eb; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.rel-arrow:hover:not(:disabled) { border-color: #c8ff3d; color: #c8ff3d; }
.rel-arrow:disabled { opacity: .3; cursor: default; }
.rel-card { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; text-decoration: none;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); transition: border-color .15s ease, transform .15s ease; }
.rel-card:hover { border-color: #c8ff3d; transform: translateY(-2px); }
.rel-thumb { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: #0f1621; overflow: hidden; }
.rel-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rel-noimg { opacity: .55; }
.rel-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: #e5e7eb; font-size: 14px; font-weight: 600; line-height: 1.4; padding: 10px 12px 12px; }
.rel-track .ad-related { min-height: 0; height: 100%; }

/* the prediction: a dark "bet slip" ticket with a lime edge and punched-out sides */
.post-content .pred-box { position: relative; margin: 1.3em 0; padding: 18px 22px 16px 26px; border-radius: 16px; color: #e6edf5;
  background:
    linear-gradient(135deg, #131c28 0%, #0f1621 60%, #142312 100%);
  -webkit-mask: radial-gradient(circle 11px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 11px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  box-shadow: inset 4px 0 0 #c8ff3d, inset 0 0 0 1px rgba(200, 255, 61, .22); }
.post-content .pred-box::after { content: ""; position: absolute; top: 12px; right: 16px; width: 26px; height: 26px; opacity: .9;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23c8ff3d' fill-rule='evenodd' d='M94.64 88.18 L85.40 72.74 L83.72 73.37 L82.46 73.58 L80.25 73.37 L78.15 72.43 L76.16 70.33 L75.53 69.07 L75.21 67.91 L75.11 66.44 L75.32 65.07 L76.47 62.66 L77.63 61.40 L78.68 60.66 L78.68 60.35 L73.21 51.10 L69.12 53.52 L68.38 53.52 L67.86 52.99 L67.75 52.15 L68.17 51.63 L71.95 49.42 L72.06 48.90 L59.24 26.31 L50.53 11.61 L50.32 11.61 L30.46 45.22 L5.36 88.39 L25.63 88.39 L39.60 61.50 L46.64 47.53 L47.06 47.01 L54.52 62.13 L68.28 88.39 L94.64 88.39Z M60.19 57.93 L60.19 58.67 L59.77 59.19 L56.72 61.08 L55.78 61.19 L55.25 60.77 L55.25 59.61 L58.51 57.51 L59.45 57.30Z M66.49 54.04 L66.49 54.88 L65.97 55.41 L63.24 57.09 L62.29 57.41 L61.55 56.88 L61.45 55.93 L61.76 55.51 L65.02 53.52 L65.97 53.52Z'/%3E%3C/svg%3E"); }
.post-content .pred-box > p:first-child, .post-content .pred-box > blockquote > p:first-child { padding-right: 34px; }
.post-content .pred-box strong, .post-content .pred-box b { color: #c8ff3d; }
.post-content .pred-box a { color: #c8ff3d; }
.post-content .pred-box > p:first-child { font-size: 1.12em; font-weight: 700; color: #fff; }
.post-content .pred-box > ul, .post-content .pred-box > ol { margin: 0; }
.post-content .pred-box > p { margin: .3em 0; }
.post-content .pred-box-bq > blockquote { border: 0; background: none; padding: 0; margin: 0; }