/* ==========================================================================
   The secondary-panel system (Ben, 1 Oct 2026, "final global panel system reset")

   ONE role for every major content-panel title and panel on the site, with ONE owner:
   this file. It supersedes every earlier rule about panel-heading size, length steps and
   panel spacing.

   THE REFERENCE. The frozen master's Case Study page (VIDA Markets), its shared
   `.display-sm` panel title, measured as rendered: 56 / 46 / 38px at 1600 / 1366 / 820,
   Montserrat 900, leading 0.96-0.98, tracking -0.035em, section padding 92 above and
   100 below (70 and 76 at laptop), the eyebrow 18px above the title (one gap site wide since 6 Oct 2026) and the
   copy 24px below it. (The Case Study has three sizes in one viewport, 60, 56 and 50 at 1600; Ben
   chose the shared `.display-sm` one, "A".) The phone value is 36px, deliberately under the
   master's 38, so a panel title can never tie with the 38px H1 of a long Work title.
   Values live in tokens.css (`--panel-title-size` and friends), fluid between the bands.

   THE RULE. At a given viewport every panel title computes to the same size, whatever the
   template and however long the words. There are no length steps: a long title wraps, and a
   title that is too long at this size is a copy problem, flagged for shortening, never a
   reason to shrink the type (Delinea EDGE: shorter copy gave a better result than smaller type).
   The old `work-title-medium|long|xlong` classes are still printed by the templates and still
   steer the H1 ladder, but they no longer size a panel title (work.css: now `h1` only).

   NOT PART OF IT: the hero / H1 of every page (and the Motion pages' hero statement under the H1); the orange closing CTA panels (`.funnel`,
   `.motion-funnel`, Home's financial strip); card, tile, stat and component titles
   (Home's panel title, a Work tile, a specialist card, the testimonial quote, the journey
   strip's small heading); the planner's question; the subheadings of an article's or a legal
   document's body copy.

   Stated at several classes' weight, as `.cta-chevron.cta-chevron` is: per-template rules
   written before this file are up to three classes deep and a sheet loaded after them still
   has to outrank them. The `:not(.panel-weight)` repeats add the weight and match nothing (no
   element has that class). No !important.
   ========================================================================== */

/* ---- the title: one size, one face, one leading, one tracking ---- */
main :is(
	h2.display-sm:not(.funnel *):not(.motion-funnel *),
	.work-detail-idea h2,
	.profile-sheet h2,
	.team-return h2,
	h2.motion-h2,
	.motion-others h2,
	.route-options h2.kicker,
	.case-rich-overview h2,
	.case-rich-gallery h2,
	.case-rich-deep h2
):not(.panel-weight):not(.panel-weight):not(.panel-weight) {
	font-family: var(--font);
	font-size: calc(var(--panel-title-size) * var(--type-heading));
	font-weight: var(--fw-title);
	line-height: var(--panel-title-lh);
	letter-spacing: var(--panel-title-ls);
}

/* ---- the copy under a title ---- */
main :is(
	h2.display-sm:not(.funnel *):not(.motion-funnel *),
	.work-detail-idea h2,
	h2.motion-h2,
	.case-rich-overview h2,
	.case-rich-deep h2
):not(.panel-weight):not(.panel-weight) + p {
	margin-top: var(--panel-copy-gap);
}

/* ---- the panel: the same vertical rhythm ---- */
main :is(
	.work-detail-brief,
	.work-detail-idea,
	.work-detail-motion,
	.work-rich-text-section,
	.work-detail-gallery,
	.work-detail-video-section,
	.work-rich-outcome,
	.work-case-feature,
	.work-detail-related,
	.case-rich-overview,
	.case-rich-performance,
	.case-rich-approach,
	.case-rich-gallery,
	.case-rich-deep,
	.about-beliefs,
	.team-section,
	.capability-section,
	.system,
	.work-section,
	.journey-next,
	.journey-insights,
	.route-options,
	.faq-section,
	.challenge-lead,
	.symptom-section.is-panel,
	.profile-sheet,
	.team-return,
	.motion-intro,
	.motion-gallery,
	.motion-faqs,
	.motion-others,
	.motion-services,
	.motion-ai,
	.insight-related,
	.insight-from-work
):not(.panel-weight):not(.panel-weight) {
	padding-top: var(--panel-space-top);
	padding-bottom: var(--panel-space-bottom);
}

/* ---- the eyebrow above a title ---- */
main :is(
	.work-detail-brief,
	.work-detail-idea,
	.work-detail-motion,
	.work-rich-text-section,
	.work-detail-gallery,
	.work-detail-video-section,
	.work-rich-outcome,
	.work-case-feature,
	.work-detail-related,
	.case-rich-overview,
	.case-rich-performance,
	.case-rich-approach,
	.case-rich-gallery,
	.case-rich-deep,
	.about-beliefs,
	.team-section,
	.capability-section,
	.system,
	.work-section,
	.journey-next,
	.journey-insights,
	.route-options,
	.faq-section,
	.challenge-lead,
	.symptom-section.is-panel,
	.profile-sheet,
	.team-return,
	.motion-intro,
	.motion-gallery,
	.motion-faqs,
	.motion-others,
	.motion-services,
	.motion-ai,
	.insight-related,
	.insight-from-work
) .eyebrow:has(+ h2):not(.panel-weight):not(.panel-weight) {
	margin-bottom: var(--panel-eyebrow-gap);
}