/* ── About page: this build's own additions ──
   Layered AFTER css/public/about.css, which is the approved stylesheet held byte-identical to the
   reference. Everything here is a selector the approved file does NOT define, kept because this
   build differs from the reference on purpose:

     .hx-flow …   the history timeline. The approved build assembles it from JSON at runtime; this
                  build renders the same markup server-side so the content survives a JS failure and
                  is in the HTML for crawlers (see core-public-site-technical.md). The DESIGN is not
                  a divergence — the approved build is a flow-scrolled timeline with a sticky year
                  column too ("no scroll hijacking", public.js), and about.css already carries every
                  rule for it. Only the four resets below are ours.
     .px-hero:before, .px-eyebrow:before   pseudo-element decoration this build adds.

   `.ab .bd-bio` used to be the third entry — board-member biography text on the card, which the
   reference's cards do not carry. It was here for one stated reason: the per-member detail page the
   approved build defers the biography to did not exist. §3 built it (2026-08-05), the biography
   renders under "Profile" on /board-member/{id}, and the card is now the approved name-and-role
   card. Rule removed with the markup that used it — a dead rule in a layer whose whole purpose is
   "only what the approved sheet does not define" is the next person's puzzle.

   Anything that appears in about.css must NOT be repeated here — duplicating it is how the About
   layer drifted into 67 conflicting selectors in the first place. Reconciled 2026-08-03.

   That rule was broken here and this file is the proof. A .hx-flow-scoped transcription of the
   ENTIRE approved hx-* layer sat below, and in copying it the `@media (max-width: 820px)` wrapper
   around the last eight rules was dropped — so the timeline's mobile treatment applied at every
   width. On desktop that meant no sticky year column, no rail, no dots, and a 44px year instead of
   one scaling to 96px. Removed 2026-08-05; about.css does the whole job.
*/

.px-hero:before { content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(62% 60% at 50% 44%,#ffffffdb,#ffffff80 62%,#ffffff4d);pointer-events:none }

.px-eyebrow:before { content:"";width:7px;height:7px;border-radius:50%;background:var(--px-brand-2);box-shadow:0 0 0 4px #4b4fd629 }

/* ── History timeline: neutralising the legacy carousel layer ──
   styles.css:5607-5950 still carries the pinned-carousel design this timeline replaced, and it
   uses the same class names. about.css loads after it and wins every property it declares — these
   four it does NOT declare, so the carousel's values leak through to the timeline. Scoping under
   .hx-flow does not prevent that on its own: raising specificity only wins the properties a rule
   actually sets. They have to be reset by name.

   .hx-flow is also the flag telling public.js this container is already populated, so the legacy
   builder leaves it alone; the legacy static About page keeps the same ids without the class. */

/* styles.css:5610 — `height:100vh;overflow:hidden` would clamp a flow-scrolled timeline to one
   viewport. about.css:702 sets this element's background and padding but never these two. */
.ab #history-sticky.hx-flow { height:auto;overflow:visible;position:relative }

/* styles.css:5640 — the carousel's panel is a solid centred flex card; the approved timeline's is a
   plain transparent block hung off a left rail. */
.hx-flow .hx-panel { display:block;background:none;z-index:auto }

/* styles.css:5661, :5678 — spacing and clipping the approved layer does not ask for. */
.hx-flow .hx-year { margin-bottom:0 }
.hx-flow .hx-body { overflow:visible }