/* The Whisper Conversation: the blog's index and posts (built by
   scripts/blog-build.js). On the donate page's light ground, set for long
   reading. Everything in a post hangs off one left edge: crumbs, title,
   meta, photo, boxes, headings, paragraphs, list text, quotes. Bullets and
   numbers hang outside that edge rather than indenting it. */

.blogpage main { padding-bottom: calc(140px + var(--s-14)); }   /* clear of the reveal footer's tuck */
/* the blog has no last section to be the sheet, so main is: white, its
   rounded foot lifting off the footer as on every other page */
.blogpage main { background: var(--bg); border-radius: 0 0 48px 48px; }
@media (min-width: 1024px) { .blogpage main { border-radius: 0 0 64px 64px; } }

/* News reads on white, not the donate page's grey */
.blogpage { --bg: #FFFFFF; background: #FFFFFF; }
html:has(.blogpage) { --ground: #FFFFFF; background: #FFFFFF; }

/* the bar's frosted band ran a quarter below the bar and swallowed the
   contents list as it stuck; on the blog it stops at the bar */
.blogpage .nav__blur { height: 100%; }

/* ── index ─────────────────────────────────────────────────────────────── */
.blogidx { padding-top: var(--s-12); }
/* The Whisper Conversation, as the newsletter's Blocks header: each word a
   little cube. Its front face is the word in a black block; the face under
   it is the plain word. The cubes roll forward a word at a time, hold, and
   roll back, on the GIF's five-second loop. */
.cvhead {
  --h: 1.24em;                      /* the block's height: a cube this deep */
  display: flex; flex-wrap: wrap; justify-content: center; gap: .1em .12em;
  margin: 0; font-weight: 400; font-size: clamp(40px, 7.4vw, 108px); line-height: 1; letter-spacing: -0.05em;
  perspective: 9em;
}
.cvhead__w { position: relative; display: inline-block; height: var(--h); transform-style: preserve-3d; animation: cvRoll 5s var(--ease) infinite; animation-delay: calc(var(--i) * .16s); }
.cvhead__w > span, .cvhead__w::after {
  display: flex; align-items: center; height: var(--h); padding: 0 .14em .04em;
  backface-visibility: hidden;
}
.cvhead__w > span { position: relative; border-radius: .16em; background: var(--fg); color: var(--bg); transform: translateZ(calc(var(--h) / 2)); }
.cvhead__w::after { content: attr(data-w); position: absolute; inset: 0; color: var(--fg); transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); }
@keyframes cvRoll {
  0%, 22% { transform: translateZ(calc(var(--h) / -2)) rotateX(0deg); }
  34%, 66% { transform: translateZ(calc(var(--h) / -2)) rotateX(90deg); }
  78%, 100% { transform: translateZ(calc(var(--h) / -2)) rotateX(0deg); }
}
@media (prefers-reduced-motion: reduce) { .cvhead__w { animation: none; } }
.blogidx .donate__sub { margin: var(--s-8) auto 0; max-width: 30ch; text-align: center; text-wrap: balance; }
.blogidx__list { list-style: none; margin: var(--s-14) auto 0; padding: 0; max-width: 820px; border-top: 1px solid var(--rule); }
.blogidx__item a { display: grid; gap: var(--s-2); padding: var(--s-8) 0; border-bottom: 1px solid var(--rule); }
.blogidx__item a:hover { opacity: 1; }
.blogidx__item a:hover h2 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; }
.blogidx__pic { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: var(--s-4); border-radius: 20px; }
.blogidx__cat, .post__label { color: var(--fg-60); font-size: 13px; line-height: 1.4; letter-spacing: -0.01em; }
.blogidx__item h2 { margin: 0; font-weight: 400; font-size: clamp(26px, 3vw, 36px); line-height: 1.1; letter-spacing: -0.035em; text-wrap: balance; }
.blogidx__item p { color: var(--fg-60); line-height: 1.55; max-width: 62ch; }
.blogidx__meta { color: var(--fg-50); font-size: 13px; }

/* ── post: one text column, contents in the left margin ─────────────────── */
.post {
  --col: 68ch;
  display: grid;
  grid-template-columns: minmax(0, var(--col));
  justify-content: center;
  padding-top: var(--s-12);
}
.post__head, .post__hero, .post__body { grid-column: 1; }
@media (min-width: 1180px) {
  .post { grid-template-columns: 1fr minmax(0, var(--col)) 1fr; column-gap: var(--s-12); }
  .post__head, .post__hero, .post__body { grid-column: 2; }
  .post__toc { grid-column: 1; grid-row: 3; justify-self: end; width: min(100%, 220px); position: sticky; top: 112px; align-self: start; }
}
@media (max-width: 1179px) { .post__toc { display: none; } }

.post__head { display: grid; justify-items: center; text-align: center; }
.post__mast { display: block; margin-bottom: var(--s-8); }
/* wide screens: the masthead rides up into the bar's line, centred between
   the logo and the buttons (pulled up past the spacer's lower half and the
   post's top padding, then centred on that line) */
@media (min-width: 900px) {
  .post__mast { margin-top: calc(var(--nav-rest-h, 132px) * -0.5 - var(--s-12)); translate: 0 -50%; margin-bottom: var(--s-14); }
}
.post__mast:hover { opacity: 1; }
.cvhead--sm { font-size: clamp(20px, 2.4vw, 28px); }
.post__crumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); color: var(--fg-60); font-size: 13px; }
.post__crumbs a { color: var(--fg-60); }
.post__crumbs a:hover { color: var(--fg); opacity: 1; }
.post__title { margin: var(--s-6) 0 0; max-width: 16ch; font-weight: 400; font-size: clamp(44px, 7vw, 96px); line-height: .96; letter-spacing: -0.05em; text-wrap: balance; }
.post__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-3); margin-top: var(--s-8); color: var(--fg-60); font-size: 13px; }
.post__meta [aria-hidden] { color: var(--fg-35); }
/* the title is wider than the reading column: it spans the whole post */
@media (min-width: 1180px) { .post__head { grid-column: 1 / -1 !important; } }
@media (prefers-reduced-motion: no-preference) {
  .post__head > *, .post__hero { animation: postIn .9s var(--ease) both; }
  .post__title { animation-delay: .08s; }
  .post__meta { animation-delay: .16s; }
  .post__hero { animation-delay: .24s; }
}
@keyframes postIn { from { opacity: 0; translate: 0 18px; } }

.post__hero { margin: var(--s-14) 0 0; }
/* wide screens: the photo breaks out of the reading column */
@media (min-width: 1180px) { .post__hero { grid-column: 1 / -1 !important; justify-self: center; width: min(100%, 1120px); } }
.post__hero img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 24px; background: color-mix(in srgb, var(--fg) 6%, transparent); }
.post__hero figcaption, .post__fig figcaption { margin-top: var(--s-2); color: var(--fg-60); font-size: 14px; line-height: 1.45; }

.post__toc ol { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.post__toc a { color: var(--fg-60); font-size: 15px; line-height: 1.35; }
.post__toc a:hover, .post__toc a.is-on { color: var(--fg); opacity: 1; }
.post__toc a { transition: color .25s; }

.post__body { margin-top: var(--s-8); }
.post__answer p:last-child { margin-top: var(--s-3); font-size: clamp(21px, 2.2vw, 25px); line-height: 1.4; letter-spacing: -0.02em; text-wrap: pretty; }
.post__takeaways { margin-top: var(--s-12); }
.post__takeaways .post__label { padding-bottom: var(--s-3); border-bottom: 1px solid var(--fg); }
.post__takeaways ol { list-style: none; margin: 0; padding: 0; }
.post__takeaways li { display: grid; grid-template-columns: 40px 1fr; padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); line-height: 1.5; }
.post__n { padding-top: .2em; color: var(--fg-50); font-size: 13px; }

/* lists: text on the column's edge, markers hanging in the gutter */
.post__prose ul, .post__prose ol, .post__sources ol { margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-2); list-style: none; }
.post__prose li, .post__sources li { position: relative; line-height: 1.55; }
.post__prose ul > li::before {
  content: ""; position: absolute; left: -16px; top: .68em;
  width: 5px; height: 5px; border-radius: 50%; background: currentColor;
}
.post__prose ol, .post__sources ol { counter-reset: n; }
.post__prose ol > li::before, .post__sources li::before {
  counter-increment: n; content: counter(n) "."; position: absolute; right: calc(100% + 8px); top: 0;
  color: var(--fg-60); font-variant-numeric: tabular-nums;
}

.post__prose { margin-top: var(--s-12); font-size: 18px; line-height: 1.7; }
.post__prose > :first-child { margin-top: 0; }
.post__prose h2, .post__faq h2, .post__sources h2 {
  margin: var(--s-12) 0 0; font-weight: 400; font-size: clamp(26px, 2.8vw, 34px); line-height: 1.12; letter-spacing: -0.035em;
  text-wrap: balance; scroll-margin-top: 112px;
}
.post__prose h3 { margin: var(--s-8) 0 0; font-weight: 400; font-size: 22px; letter-spacing: -0.02em; }
.post__prose p, .post__prose ul, .post__prose ol { margin-top: var(--s-4); }
.post__prose h2 + p, .post__prose h2 + ul { margin-top: var(--s-3); }
.post__prose a, .post__answer a, .post__faq a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.post__prose strong { font-weight: 700; }

/* quotes sit on the column edge too: a big quote, the speaker under it */
.post__prose blockquote { margin: var(--s-8) 0 0; padding: 0; }
.post__end { margin-left: .4em; color: #F4A0AA; }
.post__prose blockquote p { margin: 0; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.3; letter-spacing: -0.02em; text-wrap: pretty; }
.post__prose blockquote cite { display: block; margin-top: var(--s-3); font-style: normal; color: var(--fg-60); font-size: 15px; }
.post__prose blockquote cite::before { content: "— "; }

.post__fig { margin: var(--s-8) 0 0; }
.post__fig img { display: block; width: 100%; height: auto; border-radius: 20px; background: color-mix(in srgb, var(--fg) 6%, transparent); }

/* a statistic as 100 dots, as on the homepage */
.post__stat { display: grid; grid-template-columns: 120px 1fr; gap: var(--s-6); align-items: center; margin: var(--s-6) 0 0; padding: var(--s-6); border-radius: 20px; background: var(--fg); color: var(--bg); }
.post__stat svg { width: 120px; height: 120px; }
.post__stat circle { fill: color-mix(in srgb, var(--bg) 22%, transparent); }
.post__stat circle.on { fill: var(--bg); }
.post__stat figcaption { display: grid; gap: var(--s-1); }
.post__stat b { font-weight: 400; font-size: clamp(44px, 5vw, 64px); line-height: 1; letter-spacing: -0.05em; }
.post__stat span { line-height: 1.4; }
.post__stat small { color: color-mix(in srgb, var(--bg) 60%, transparent); font-size: 13px; }
@media (max-width: 520px) { .post__stat { grid-template-columns: 88px 1fr; gap: var(--s-4); padding: var(--s-5); } .post__stat svg { width: 88px; height: 88px; } }

.post__faq details { border-bottom: 1px solid var(--rule); }
.post__faq details:first-of-type { margin-top: var(--s-4); border-top: 1px solid var(--rule); }
.post__faq summary { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding: var(--s-4) 0; cursor: pointer; font-size: 18px; line-height: 1.4; list-style: none; }
.post__faq summary::-webkit-details-marker { display: none; }
.post__faq summary::after { content: "+"; flex: none; color: var(--fg-60); font-size: 22px; line-height: 1; transition: rotate .2s var(--ease); }
.post__faq details[open] summary::after { rotate: 45deg; }
.post__faq details p { padding-bottom: var(--s-5); color: var(--fg-60); line-height: 1.6; }

.post__sources { color: var(--fg-60); font-size: 15px; }
.post__sources a { color: var(--fg-60); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }

/* the colophon: share, author and bio; labels down the left, hairlines between rows */
.post__colophon { display: grid; grid-template-columns: 128px 1fr; margin: var(--s-12) 0 0; border-bottom: 1px solid var(--rule); }
.post__colophon dt, .post__colophon dd { margin: 0; padding: var(--s-4) 0; border-top: 1px solid var(--rule); }
.post__colophon dt { padding-top: calc(var(--s-4) + 3px); color: var(--fg-60); font-size: 13px; }
.post__colophon dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-4); font-size: 15px; }
.post__colophon a, .post__copy { color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: var(--fg-35); }
.post__copy { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.post__colophon small { color: var(--fg-60); font-size: 13px; }
.post__colophon p { margin: 0; color: var(--fg-60); line-height: 1.55; }
@media (max-width: 520px) { .post__colophon { grid-template-columns: 96px 1fr; } }

.post__cta { margin-top: var(--s-12); padding: var(--s-8); border-radius: 24px; background: var(--fg); color: var(--bg); }
.post__ctah { font-size: clamp(26px, 3vw, 36px); line-height: 1.1; letter-spacing: -0.035em; }
.post__cta > p:not(.post__ctah) { margin-top: var(--s-2); color: color-mix(in srgb, var(--bg) 70%, transparent); }
.post__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s-6); }
.post__cta .btn--solid { background: var(--bg); color: var(--fg); border-color: var(--bg); }
.post__cta .btn--ghost { color: var(--bg); border-color: color-mix(in srgb, var(--bg) 40%, transparent); }

/* phones: hung list markers need somewhere to hang */
@media (max-width: 600px) {
  .post__prose ul, .post__prose ol, .post__sources ol { padding-left: 18px; }
}