/* ==========================================================================
   ARTICLES (/post/): layout for Insights posts. Loaded only by post pages, as
   article.css?v=N (assets are cached for a year: bump N on every post when
   this file changes). Uses the tokens from main.css.

   Width (Chris, 2026-10-26: "as wide as the header", with the UX call left to
   us): the headline and lede span the full header width, so the headline gets
   room and fewer, fuller lines. Body text does not: at the header's 75rem a
   line would run ~140 characters, well past the ~90 where justified text stops
   being comfortable and readers start losing their place on the return sweep.
   The body column is ~49rem (~85 characters), and the right rail that used to
   be empty carries the Key takeaways and a live "In this article" list, which
   takes the takeaways out of the reading flow and cuts scrolling.

   Everything is justified to both edges, headline included (article.js sizes
   the headline so its lines fill the width; see fitHeadline there).
   ========================================================================== */

.prose:has(> .post-meta) { max-width: none; }

/* ---- headline and lede: full header width ---- */
.prose:has(> .post-meta) > h1 {
  max-width: none; text-wrap: balance; hyphens: manual;
  margin-bottom: var(--space-3);
}
/* article.js sets the font size so the balanced lines fill the width; only
   then is it safe to justify the last line too (a short last line would open
   gaps wider than the words). */
.prose:has(> .post-meta) > h1.is-fit { text-align: justify; text-align-last: justify; }

.prose:has(> .post-meta) :is(p, li, blockquote, figcaption) {
  max-width: none; text-align: justify; hyphens: auto;
}
.prose:has(> .post-meta) > .lede { max-width: none; margin-bottom: var(--space-4); }

/* ---- Listen: the main button, directly under the headline ----
   Chris (2026-10-26): "on the top of the page and easy to find". Each post
   reserves the slot (.post-listen-row) so nothing moves when listen.js fills
   it; listen.js removes the slot if the article has no audio yet. Without
   JavaScript there is no player, so the slot never shows. */
.post-listen-row { display: none; }
html.js .post-listen-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;
  min-height: 3rem; margin: 0 0 var(--space-3);
}
.post-listen {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.35rem 1.4rem 0.35rem 0.35rem;
  background: var(--regal); color: var(--white);
  border: 0; border-radius: 999px; box-shadow: var(--shadow-lift);
  font: 600 1.05rem/1 var(--font-body); cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.post-listen:hover { background: var(--regal-deep); transform: translateY(-2px); }
.post-listen:focus-visible { outline: 3px solid var(--azure); outline-offset: 3px; }
.post-listen-icon {
  display: inline-grid; place-items: center;
  width: 2.3rem; height: 2.3rem; border-radius: 50%;
  background: var(--white); color: var(--regal);
}
.post-listen-icon svg { width: 1rem; height: 1rem; }
.post-listen-meta { font-weight: 400; font-size: 0.9rem; opacity: 0.8; font-variant-numeric: tabular-nums; }
.post-listen-meta:not(:empty)::before { content: "·"; margin-right: 0.5rem; }
.post-listen-note { font-size: var(--step--1); color: var(--text-3); }
@media print { .post-listen-row { display: none !important; } }

/* ---- body column + right rail ---- */
.article-grid { display: grid; gap: var(--space-3); }
.article-main { min-width: 0; }
.article-main > img:first-child { margin-top: 0; }

@media (min-width: 68rem) {
  .article-grid {
    grid-template-columns: minmax(0, 1fr) 24rem;
    column-gap: var(--space-4);
  }
  .article-main { grid-column: 1; grid-row: 1; }
  .article-rail { grid-column: 2; grid-row: 1; }
}

/* ---- Key takeaways: the 30-second version of the article ---- */
.takeaways {
  margin: 0;
  padding: var(--space-3) var(--space-3) calc(var(--space-3) - 0.5rem);
  background: var(--foam);
  border: 1px solid #cfe6f7; border-left: 4px solid var(--azure);
  border-radius: var(--radius);
}
.takeaways-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 0.25rem 1rem; margin-bottom: 0.75rem;
}
.prose .takeaways h2 { font-size: var(--step-1); margin: 0; color: var(--regal); }
.takeaways-time {
  display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap;
  font-family: var(--font-label); font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-3);
}
/* a small drawn clock face: the label is about time */
.takeaways-time::before {
  content: ""; width: 0.8rem; height: 0.8rem; border-radius: 50%;
  border: 1.5px solid currentColor;
  background:
    linear-gradient(currentColor, currentColor) 50% 18% / 1.5px 38% no-repeat,
    linear-gradient(currentColor, currentColor) 70% 50% / 38% 1.5px no-repeat;
}
.takeaways ul { margin: 0; padding-left: 1.2rem; }
.takeaways li { margin-bottom: 0.6rem; }
.takeaways li::marker { color: var(--azure); }
@media (min-width: 68rem) {
  .takeaways li { font-size: var(--step--1); line-height: 1.55; }
}

/* ---- "In this article": built by article.js from the section headings ---- */
.article-toc { display: none; }
@media (min-width: 68rem) {
  .article-toc {
    display: block; position: sticky; top: 7rem;
    margin-top: var(--space-4); padding-left: 1rem;
    border-left: 1px solid var(--line-strong);
  }
}
.article-toc-h {
  margin: 0 0 0.6rem; font-family: var(--font-label); font-size: 0.72rem;
  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3); text-align: left;
}
.article-toc ol { list-style: none; margin: 0; padding: 0; }
.article-toc li { margin: 0; text-align: left; }
.article-toc a {
  display: block; position: relative; padding: 0.3rem 0;
  font-size: var(--step--1); line-height: 1.35; color: var(--text-2);
  text-decoration: none; transition: color 0.15s ease;
}
.article-toc a:hover { color: var(--regal); }
.article-toc a[aria-current="true"] { color: var(--regal); font-weight: 600; }
.article-toc a[aria-current="true"]::before {
  content: ""; position: absolute; left: calc(-1rem - 1px); top: 0.3rem; bottom: 0.3rem;
  width: 3px; border-radius: 2px; background: var(--azure);
}
.article-toc a:focus-visible { outline: 3px solid var(--azure); outline-offset: 2px; border-radius: 4px; }

/* section headings clear the sticky header when jumped to */
.article-main h2[id] { scroll-margin-top: 7rem; }