/* The blog (/blog/ and its posts): sits on top of pool.css, so it has the same fonts, colours, header and footer. Static HTML, no app code. */
.post, .blogindex { max-width: 46rem; margin: 0 auto; }
.posthead { padding: 28px 0 6px; }
.post h1, .blogindex h1 { font-size: clamp(36px, 7.2vw, 64px); line-height: .95; }
.byline { margin: 14px 0 0; font-size: 15px; color: var(--muted); }
.lede { margin: 22px 0 14px; font-size: 21px; line-height: 1.5; color: var(--text); }
.post p, .post li, .post dd { line-height: 1.62; }
.post a, .blogindex a { color: var(--text); text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.post a:hover, .blogindex a:hover { color: var(--accent); }
.post .cta, .post .cta:hover { color: var(--ink); text-decoration: none; }
.post h2 { scroll-margin-top: 16px; }
.post h3 { margin: 30px 0 6px; font: 900 clamp(22px, 4vw, 27px)/1.05 "Big Shoulders Display", Impact, sans-serif; text-transform: uppercase; letter-spacing: .01em; color: var(--text); }
.post h3 a { text-decoration: none; }

.note { margin: 22px 0; padding: 14px 18px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); }
.note p { margin: 0; font-size: 16px; }
.note strong { color: var(--text); }

.toc { margin: 22px 0 0; padding: 16px 18px 12px; background: var(--panel); border: 1px solid var(--line); }
.toc .groupname { margin: 0 0 6px; }
.toc ol { margin: 0; padding-left: 1.3em; columns: 2 15rem; column-gap: 28px; }
.toc li { margin: 2px 0; break-inside: avoid; }
.toc a { font-weight: 700; font-size: 16px; }

.picks, .criteria, .why { padding: 0; margin: 14px 0 0; list-style: none; display: grid; gap: 10px; }
.picks li, .why li { margin: 0; padding: 12px 16px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); }
.picks li:first-child { background: color-mix(in srgb, var(--accent) 14%, var(--panel)); }
.criteria { counter-reset: c; }
.criteria li { counter-increment: c; position: relative; margin: 0; padding: 4px 0 4px 44px; }
.criteria li::before { content: counter(c); position: absolute; left: 0; top: 0; font: 900 32px/1 "Big Shoulders Display", Impact, sans-serif; color: var(--accent); }

.winner { margin-top: 40px; padding: 4px 22px 24px; background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--accent); }
.winner h2 { margin-top: 26px; }
.winner .cta { margin-top: 6px; }

.meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 4px 0 12px; font-size: 15px; color: var(--text); }
.meta .m { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.meta b { padding: 2px 8px; background: var(--panel2); border: 1px solid var(--line); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.pair { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 26px 0 8px; }
.pair img { width: min(44%, 250px); height: auto; border-radius: 22px; border: 3px solid var(--line); background: var(--bg); box-shadow: 0 18px 38px rgba(0, 0, 0, .45); }
.pair figcaption { flex-basis: 100%; margin: 6px auto 0; max-width: 34rem; font-size: 15px; line-height: 1.45; color: var(--muted); text-align: center; }

.tablewrap { margin: 14px 0 0; overflow-x: auto; border: 1px solid var(--line); background: var(--panel); }
.tablewrap:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
table { width: 100%; min-width: 46rem; border-collapse: collapse; font-size: 15px; line-height: 1.4; }
th, td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); color: var(--muted); }
thead th { position: sticky; top: 0; background: var(--panel2); color: var(--text); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
tbody th { color: var(--text); font-weight: 700; }
tbody tr:last-child > * { border-bottom: 0; }
tr.us > * { background: color-mix(in srgb, var(--accent) 12%, var(--panel)); color: var(--text); }
tr.us th { box-shadow: inset 4px 0 0 var(--accent); }
.post .fine { display: block; margin: 10px 0 0; }

.post .end { margin-top: 44px; }

.blogindex .card { margin-top: 22px; padding: 18px 20px; background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--accent); }
.blogindex .card h2 { margin: 0; font-size: clamp(26px, 5vw, 36px); }
.blogindex .card h2::before { display: none; }
.blogindex .card h2 a { text-decoration: none; }
.blogindex .card .kicker { margin-bottom: 8px; }
.blogindex .card p:last-child { margin-bottom: 0; }

@media (max-width: 560px) { .winner { padding: 2px 16px 20px; } .pair img { width: 46%; } }