/* 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; 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; }
}