/* A blog post's own pieces (Troy, 3 Nov 2026: "I want it to be research backed and I want it to also opinionate
   instead of just saying information. Then I want it structured nicely"): what's in the post, numbered sections, the
   research as numbers with their sources, Troy's take, and the sources at the end. Markdown: tools/build-content.js. */

/* In this post */
.prose .post-toc { margin: 0 0 44px; padding: 20px 24px 14px; border-radius: 20px; border: 1px solid var(--line); background: #fffdf8; }
.prose .post-toc .fig { margin: 0 0 6px; }
.prose .post-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.prose .post-toc li { counter-increment: toc; margin: 0; }
.prose .post-toc a { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px dashed #0d10241f; font-size: 16px; line-height: 1.35; color: var(--ink); text-decoration: none; }
.prose .post-toc li:last-child a { border-bottom: 0; }
.prose .post-toc a::before { content: counter(toc, decimal-leading-zero); flex: none; width: 22px; font: 600 12px/1.75 var(--font-mono); color: #6030b2; }
@media (hover: hover) { .prose .post-toc a:hover { color: #6030b2; } }
@media (min-width: 900px) { .prose .post-toc ol { columns: 2; column-gap: 28px; } .prose .post-toc li { break-inside: avoid; } .prose .post-toc li:last-child a { border-bottom: 1px dashed #0d10241f; } }

/* Numbered sections: the number sits in a lime chip. */
.prose h2 .h-num { display: inline-grid; place-items: center; min-width: 1.45em; height: 1.45em; margin-right: .4em; padding: 0 .25em; border-radius: .45em; background: var(--lime); color: var(--ink); font-size: .62em; letter-spacing: 0; vertical-align: .2em; }

/* The research, as numbers with their source. */
.prose .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-block: 34px; }
.prose .stat { display: grid; align-content: start; gap: 10px; margin: 0; padding: 20px 18px 18px; border-radius: 20px; background: var(--ink); color: #fffdf9; }
.prose .stat b { font: 800 clamp(42px, 4vw, 54px)/.9 var(--font-display); letter-spacing: -.045em; color: var(--lime); }
.prose .stat figcaption { font-size: 15.5px; line-height: 1.4; color: #ebe7f4; }
.prose .stat a { display: block; margin-top: 10px; font: 500 11px/1.35 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: #cdbdf7; text-decoration: none; }
.prose .stat a::after { content: " ↗"; }
.prose .stat:nth-child(3n+2) { background: #6b32c2; }
.prose .stat:nth-child(3n+2) a { color: #e4dafc; }
.prose .stat:nth-child(3n+3) { background: #fff1e8; color: var(--ink); box-shadow: inset 0 0 0 1px #ff6a3d40; }
.prose .stat:nth-child(3n+3) b { color: #d8461b; }
.prose .stat:nth-child(3n+3) figcaption { color: #33303f; }
.prose .stat:nth-child(3n+3) a { color: #b13c16; }

/* Troy's take: his opinion, in his voice. */
.prose .take { margin-block: 36px; padding: 20px 24px 22px; border-radius: 22px 22px 22px 6px; border: 1px solid #ff6a3d33;
  background: radial-gradient(90% 90% at 100% 0%, #ffd2bf, transparent 70%), #fff4ea; }
.prose .take__who { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font: 600 12px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: #b13c16; }
.prose .take__who img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fffdf9, 0 0 0 4px var(--coral); }
.prose .take p:last-child { margin: 0; font: italic 400 clamp(21px, 2vw, 24px)/1.4 var(--font-aside); color: var(--ink); }

/* The sources, numbered, at the end. */
.prose .post-sources { margin-top: 52px; }
.prose .post-sources h2 { margin-top: 0; font-size: clamp(24px, 2.4vw, 30px); }
.prose .post-sources ol { margin: 16px 0 0; padding: 0; list-style: none; counter-reset: src; }
.prose .post-sources li { position: relative; display: grid; gap: 3px; padding: 0 0 0 38px; counter-increment: src; font-size: 16px; line-height: 1.4; }
.prose .post-sources li + li { margin-top: 14px; }
.prose .post-sources li::before { content: counter(src); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--wash-violet); color: #6030b2; font: 600 12px/1 var(--font-mono); }
.prose .post-sources b { font: 600 11px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); }
.byline .byline__sources { color: inherit; text-decoration: underline; text-decoration-color: var(--violet); text-underline-offset: .3em; }

@media (max-width: 560px) {
  .prose .stats { grid-template-columns: minmax(0, 1fr); }
  .prose .stat { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 16px; padding: 16px 18px; }
  .prose .stat b { min-width: 2.2em; font-size: 40px; }
  .prose .take p:last-child { font-size: 20px; }
}