/*
  Predictable Innovation, the guides (/methods and /methods/<slug>): the v2 header on a guide page (ours).
  Loaded only on the guide pages, after the package's styles.css and the kit's blog.css.

  Jose's correction to the blog kit (2026-10-03): the upper menu stays the black v2 header from the approved home, as
  on every other v2 page, not the kit's white one. The kit's reading progress bar (3 px, red) sits along its bottom
  edge. The kit's blog.js needs a sticky header (the contents rail and the jump links sit under it), so on these pages
  only the header is sticky and black instead of absolute over a photo. Every rule needs the .blog wrapper on the page
  (html:has(.blog)), so this file changes nothing on a page without it. v2 tokens only (styles.css :root).
*/

/* The real height of the v2 header: its bar is 88 px tall at every width, plus its 1 px bottom rule. */
html:has(.blog) { --header-h: 89px; }

html:has(.blog) .site-header {
  position: sticky;
  top: 0;
  background: var(--ink);
}

/* The reading progress bar, on the header's bottom edge, over its rule; blog behavior scales it from 0 to 1. */
html:has(.blog) .site-header .read-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  html:has(.blog) .site-header .read-progress { transition: none; }
}

@media print {
  html:has(.blog) .site-header .read-progress { display: none; }
}

/* The Guides index: no cover column, so the head ends with the title and the cards follow without the empty band. */
html:has(.blog) .post-head--index{padding-bottom:16px}
html:has(.blog) .post-head--index + .read-next{border-top:0;margin-top:0;padding-top:0}
html:has(.blog) .post-head--index + .read-next .read-next-inner{padding-top:24px}
html:has(.blog) .post-head--index + .read-next .next-grid{margin-top:0}