/* open-sub.css: the section heading every page behind the homepage shares
   now that the pages are open rather than stacked panels.

   Asked for by the owner on 2026-09-16, with the homepage (open.css). The
   night bar that capped each panel, and the panel under it, read as boxes
   stacked on boxes. A heading now stands straight on the ground, centred,
   with a guide line running out from each side to the edge of the content.
   A line under it, where a page keeps one, sits centred beneath.

   The commentary page keeps its panels and its bars, at the owner's word:
   its content is a set of small boxes and the panel design suits it there.
   So every rule here skips body.listen.

   Loaded after sub.css and before a page's own open-*.css, which removes
   that page's panels and turns its text to cream. Every selector below is a
   class heavier than the bar rule in sub.css, so it wins on weight. */

body:not(.home):not(.listen) {
  --guide: var(--bar-edge);
  --box-r: 14px;
  --sec-gap: clamp(56px, 7vw, 112px);
}

html:has(body:not(.home):not(.listen)) { background: var(--page-ground); }
body:not(.home):not(.listen) { background: var(--page-ground); background-image: none; }

/* The heading: three columns, a guide line, the words, a guide line. */
body:not(.home):not(.listen) .sec > .sec__head {
  display: grid;
  grid-template-columns: minmax(24px, 1fr) auto minmax(24px, 1fr);
  align-items: center;
  column-gap: clamp(18px, 2.4vw, 36px);
  margin: 0 var(--inset) clamp(28px, 3.4vw, 48px);
  padding: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
  text-align: center;
  color: var(--cream);
  --ink: var(--cream);
  --ink-2: var(--pale);
  --focus: var(--cream);
  --accent-ink: var(--orange);
}
body:not(.home):not(.listen) .sec > .sec__head::before,
body:not(.home):not(.listen) .sec > .sec__head::after {
  content: "";
  grid-row: 1;
  height: 1px;
  background: var(--guide);
}
body:not(.home):not(.listen) .sec > .sec__head::before { grid-column: 1; }
body:not(.home):not(.listen) .sec > .sec__head::after { grid-column: 3; }
body:not(.home):not(.listen) .sec > .sec__head .tab {
  grid-column: 2;
  grid-row: 1;
  max-width: 20em;
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--cream);
  font-size: var(--fs-h2);
  --focus: var(--cream);
}
body:not(.home):not(.listen) .sec > .sec__head .sec__lede {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: center;
  margin-top: 10px;
  padding-inline: 0;
  /* No measure: the owner asked (2026-09-16) for a line under a heading to
     stay on one line unless the screen is too narrow for it. */
  max-width: none;
  text-wrap: balance;
}
body:not(.home):not(.listen) .sec > .sec__head .sec__lede .lede { color: var(--pale); }