/* Page head (scripts/lib/components/page-head.mjs): a one-line breadcrumb, the h1 with its
   4px accent bar, a dek of two lines at most and a checked line. No band and no hero: on a
   390 by 844 phone the site header and this block stay within 40% of the first screen. */

.wfg-page-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: .35rem; min-width: 0; padding-block: var(--s-4) var(--s-3); }
.wfg-page-head .breadcrumb ol { flex-wrap: nowrap; overflow: hidden; }
.wfg-page-head .breadcrumb li { flex: none; }
.wfg-page-head .breadcrumb li:last-child { flex: 0 1 auto; min-width: 0; }
.wfg-page-head h1 {
  margin: 0;
  padding-left: .7rem;
  border-left: 4px solid var(--accent);
  font: 400 clamp(2.1rem, 5vw, 3.25rem)/.95 var(--font-display);
  letter-spacing: .01em;
  text-wrap: balance;
  color: var(--ink);
}
.wfg-page-head .wfg-dek { max-width: 66ch; margin: .2rem 0 0; font-size: 1.05rem; line-height: 1.5; color: var(--ink-2); }
.wfg-page-meta { display: flex; flex-wrap: wrap; gap: .15rem 1rem; margin: .1rem 0 0; font: 400 .82rem/1.4 var(--font-ui); color: var(--ink-3); }
.wfg-page-meta time { color: var(--ink-2); }
@media (max-width: 40rem) {
  .wfg-page-head { padding-block: var(--s-3) var(--s-2); gap: .25rem; }
  .wfg-page-head .wfg-dek { font-size: 1rem; }
}

/* Page intro lead (pageIntro): one or two answer-first sentences above the answer. Body text in the reading
   face, no band and no hero, so the answer below still clears the first screen. */
.wfg-intro { max-width: 70ch; margin: 0 0 var(--s-3); font: 400 1rem/1.6 var(--font-body); color: var(--ink-2); text-wrap: pretty; }
@media (max-width: 40rem) {
  .wfg-intro { margin-bottom: var(--s-2); }
}

/* The rest of the intro (introRest): its remaining sentences open the body below the answer,
   in the same voice and face as the lead. */
.wfg-intro-rest { margin: 0 0 var(--s-5); }
.ref-intro-rest { padding-top: var(--s-5); }
.ref-intro-rest .wfg-intro-rest { margin-bottom: 0; }

/* Byline (pageHead, core/authors.mjs): the author's picture in a 20px circle and "By <name>",
   linked to their card on /about, first on the date line. */
.wfg-byline { display: inline-flex; align-items: center; gap: .4rem; }
.wfg-byline-avatar { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line); object-fit: cover; }
.wfg-byline a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .15em; }
.wfg-byline a:hover { color: var(--accent-text); text-decoration-color: currentColor; }