/* ══════════════════════════════════════════════════════════════════════════
   work-booking.css — THE TOKEN BRIDGE FOR THE BOOKING BAND ON /work.
   Loaded by work.html, work/software.html and work/camera.html, after
   css/booking-band.css. It adds ONE class, `.bkx--work`, and nothing else.
   ──────────────────────────────────────────────────────────────────────────

   WHY IT EXISTS, AND WHY IT IS NOT A COLOUR FILE.

   css/booking-band.css asks for exactly three fonts by name —
   `--font-display`, `--font-body`, `--font-mono` — and those three are
   declared in css/site.css, which the nine selling pages load and these three
   pages do NOT. Everything else the band reaches for carries its own literal
   fallback (`var(--red, #c8102e)`, `var(--ink-true, #0a0a0a)`,
   `var(--header-h, 72px)`, and the whole dark tone scale is restated inside
   `.bkx` itself), so the band's colour, spacing and motion are already
   correct on an unfamiliar page. The fonts are the one gap.

   An undefined custom property in `font-family: var(--font-mono)` is not a
   no-op: the declaration is invalid at computed-value time, which for an
   inherited property means `inherit`. So without this file the band's kicker,
   its slot times and its price line all silently take the page's body face,
   and the three type levels the component is built on collapse into one.
   Measured before this file existed: `.bkx__k`, `.bkx__h` and `.bkx__sub` all
   computed to the same family.

   ── WHY IT ALIASES THE PAGE'S FONTS RATHER THAN NAMING FRAUNCES ───────────
   /work and /work/software declare their own faces in css/work.css
   (`--serif`, `--sans`, `--mono`) and /work/camera declares `--display`,
   `--sans`, `--mono` in css/work-camera.css. Hard-coding Fraunces here would
   put a face in the band that two of the three pages never load, so the band
   would be the only element on the page rendering in a fallback serif. The
   chain therefore reads the page's OWN display token first and only falls
   through to the site default if a page declares neither — the same pattern
   css/invoice.css already uses at l.147.

   ── ONE FINDING THIS FILE DOES NOT FIX ───────────────────────────────────
   css/work.css sets `--serif: 'Bodoni Moda'` and `--sans: 'Inter'`, which are
   NOT the site's tokens (Fraunces / IBM Plex Sans), and work.html plus
   work/software.html load those two families from Google Fonts instead. That
   is a page-wide typography question in a stylesheet this task does not own,
   so it is reported and left alone rather than half-corrected here — a band
   set in Fraunces on a page set in Bodoni would be worse than either.
   ══════════════════════════════════════════════════════════════════════════ */

.bkx--work {
  --font-display: var(--serif, var(--display, 'Fraunces', 'Times New Roman', Times, serif));
  --font-body:    var(--sans, 'IBM Plex Sans', system-ui, -apple-system, sans-serif);
  --font-mono:    var(--mono, 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace);
}

/* ── THE PRICE ANCHOR, HELD TOGETHER ──────────────────────────────────────
   The site rule is that `6 x $700 + 2 x $900 = $6,000` is SHOWN AS ARITHMETIC,
   so a customer can check a quote against it. An expression split across a line
   break stops being checkable — measured at 1440 with only non-breaking spaces
   inside each term, the line ended on "6 x $700 +" and the next one opened on
   "2 x $900 = $6,000", which reads as two fragments rather than one sum.

   So the whole expression is `nowrap` and moves to the next line intact. The
   worry with nowrap is overflow, and it does not happen here: the expression is
   28 characters at .92rem, about 200px, and the narrowest column .bkx__sum ever
   sits in is /work/software at 320px viewport. Measured at 320, 390 and 1440 —
   no horizontal overflow on the document at any of the three. Tabular figures
   so $700, $900 and $6,000 align on their digits rather than their glyph
   widths, which is what makes it read as a calculation and not as prose. */
.bkx--work__sum { white-space: nowrap; font-variant-numeric: tabular-nums; }