/* Section headers. The page h1 and lede live in the page band the router draws (V2-SHELL, js/routes.js).
   .page-head is the fallback for a page without a band (the GM panel, error screens); inside a banded view
   the router folds it away. Every block inside a view is an h2 .block-title (or .block-head) with the gem;
   cards use h3. No eyebrow or kicker labels above headings, ever.
   .rule  the filigree divider: a gold hairline with the gem in the middle. */

.page-head { max-width: 64ch; margin-bottom: var(--s-7); }
.page-head h1 { font-size: var(--fs-3xl); }
.page-head .lede { margin-top: var(--s-4); }
.page-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4) var(--s-6); max-width: none; }
.page-head-row > :first-child { max-width: 64ch; }

.block { margin-top: var(--block); }
.block-first { margin-top: 0; }
.block-title {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
  font-size: var(--fs-xl);
}
.block-title::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  background: var(--action);
  border: 1px solid var(--accent);
  transform: rotate(45deg);
}
.block-lede { max-width: 65ch; margin-top: calc(var(--s-3) * -1); margin-bottom: var(--s-5); color: var(--text-2); }

.section-head { max-width: 62ch; margin-bottom: var(--s-6); }
.section-head p { margin-top: var(--s-3); color: var(--text-2); }

.rule {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-block: var(--s-7);
  color: var(--accent);
}
.rule::before, .rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong)); }
.rule::after { background: linear-gradient(90deg, var(--line-strong), transparent); }
.rule > .gem { width: 8px; height: 8px; }