/* ==========================================================================
   The medium
   ==========================================================================
   Everything in here exists so the page and the loading video read as the
   same recorded object rather than as a video followed by a website.

   The ground (the gradient in base.css) is the other part of that. This file
   holds the way light behaves on a tube.

   Measured off the last frame of the old loading video — a rising edge across
   the wordmark, sampled left to right in luma:

       20  22  25  29  31  37  43  65  95  135  178  199  205

   That is a 10-90% rise across roughly five source pixels, about 3.7 CSS px
   at a 1440 viewport. Nothing on a real tube has a hard edge: the beam has
   width, the phosphor spreads, and the signal was low-pass filtered on the
   way in. The page's type, by contrast, is rendered perfectly sharp.

   The honest reproduction would be a blur over the whole page. That is not
   worth doing: it would make body copy unreadable, and a full-viewport blur
   is the single most expensive thing you can ask a compositor for on a page
   that also scrolls. So the softness is applied as a HALO on the elements
   that are large and bright enough to have shown it on the video, and body
   copy is left crisp — which is also where the video has no evidence to
   offer, since it never showed running text.
   ========================================================================== */
:root {
  /* Radius matches the measured ~3.7px rise. Fixed px rather than the --u
     design-scale unit: bloom is a property of the medium, not of the layout
     grid, so it should not shrink on a narrow viewport the way the type does.
     The colour is the page text carrying the same cool cast as the ground, so
     the halo reads as light spreading rather than as a drop shadow. */
  --bloom-near: 0 0 4px rgba(210, 222, 240, 0.28);
  --bloom-far:  0 0 14px rgba(150, 180, 230, 0.16);
}

/* Display type — the serif at heading sizes. Big, bright, and exactly the
   kind of shape the video shows a halo on. */
.readout__title {
  text-shadow: var(--bloom-near), var(--bloom-far);
}

/* Small mono UI gets the near halo only. At 11-12px the far one is just haze
   and costs legibility for nothing. The nav is left bare so it reads the same
   as the case-study header. */
.readout__role {
  text-shadow: var(--bloom-near);
}

/* The masthead mark is white, not the blue-gradient artwork the file ships
   with — that gradient belongs to the title card, where the mark is the
   subject. In the header it is chrome, and it should sit with the rest of the
   chrome.

   brightness(0) crushes every channel to black, then invert(1) lifts the
   whole shape to pure white, preserving the alpha edges exactly. That is why
   this works on a gradient source where a simple colour swap would not.

   No halo (author, 2026-09-27): the mark sits flat, like the nav buttons. */
.masthead__logo img {
  filter: brightness(0) invert(1);
}