/* ==========================================================================
   HOSTED BY — R23v
   A centred credit between §12's violet plate and the footer: the page's own
   eyebrow, the Ubrik wordmark, one line of copy, on black with a violet glow
   rising from the floor.

   BUILT FROM WHAT THE PAGE ALREADY OWNS, by direction ("take inspiration from
   rest of the page and adhere its style"). Nothing here is a new device:

     eyebrow   .eyebrow--emphasis --filled, the page's most-used variant (6x)
     glow      --gradient-glow-violet, §11's own token, re-anchored
     grain     .u-grain, which the glow carries exactly as §11's does
     ground    --color-bg-base, no new surface

   ⚠ THE BLOCK IS `.host`, NOT `.hosted`. `hosted.css` owned `.hosted__logo`
   and friends for §12's hidden Hosted By panel, so the name would have
   collided. R24u deleted that panel and `hosted.css` with it — the collision
   is gone, but the name is not worth churning now that `.host` is the one
   that renders.
   ========================================================================== */

/* The glow needs somewhere to be clipped, and the section is full-bleed. */
.host {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg-base);
}

/* ⚠⚠ R24j — PULLED IN AND DIMMED, by direction: "a bit subtle, need not have
   this much spread." R24g had matched §11's `-60% -15%` at full strength;
   that is right for §11, whose section is a full-height field of moving
   chips, and too much for a 433px credit line.

   ⚠⚠ THE INSET IS THE SPREAD CONTROL, NOT THE OPACITY — this is the part to
   understand before touching it again. --gradient-glow-violet sizes its
   ellipse at 80%/82% OF ITS OWN BOX, so the box decides how much of the
   falloff the section ever sees:

       -60%  box is 220% tall, ellipse radius ~180% of the section
             -> the section sees only the bright core: a broad even wash
       -25%  box is 150% tall, ellipse radius ~123% of the section
             -> the section sees the falloff too: light pools in the middle
                and the corners go dark

   The gradient is transparent by 72% of its radius, so at -25% the light
   stops well inside the section's left and right edges. That is the "less
   spread" being asked for, and NO opacity change can produce it — a dimmer
   wash is still a wash.

   ⚠ THE 0.7 IS THE SEPARATE HALF OF THE DIRECTION. A tighter box concentrates
   the light as well as containing it, so pulling in without dimming trades a
   wash for a hotspot — which is exactly what R23w hit at -25% and why it
   carried an opacity then too.

   ⚠ R23w's RULE STILL BINDS: any --gradient-glow-violet box must overhang on
   EVERY side. .u-grain paints its noise across the box, not the section, so a
   box that starts or stops inside the section shows its own edge as a hard
   band. -25% -10% is negative on all four. */
.host__glow {
  position: absolute;
  inset: -25% -10%;
  z-index: 0;
  background-image: var(--gradient-glow-violet);
  opacity: 0.7;
  pointer-events: none;
}

/* The content rides above the glow. */
.host__inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  text-align: center;
}

/* --gap-title-group is the space INSIDE a title group, which is what the
   eyebrow-to-mark interval is. */
.host__eyebrow { margin-block-end: var(--gap-title-group); }

/* ⚠ A BOX DIMENSION, NOT SPACING — §4 exempts these from the scale. The
   supplied file is 206 x 88; this is it at 1.26x, which is the size at which
   the wordmark reads as the section's subject without competing with §12's
   display figures above it. `block-size: auto` and the aspect ratio keep it
   honest if the file is ever re-exported at another size. */
.host__logo {
  display: block;
  /* R23x — 200 -> 160, by direction; 260 at R23v, 200 at R23w.
     ⚠ THE ANCHOR FOR ANY FURTHER MOVE IS THE TAGLINE, NOT THE SECTION. The
     wordmark's x-height — the 'u' bowl, 47 of the file's 88 units — lands at
     about 36px here against the tagline's ~11px, so the mark reads roughly
     3.3x the line beneath it. At 200 it was 4.1x. Below about 120 the mark
     stops being the subject of the section and the eyebrow starts competing
     with it. */
  inline-size: 160px;
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 206 / 88;
}

/* .t-lead supplies size, weight and line-height; only the colour and the
   measure are overridden — the utility's --measure-prose-wide would let this
   one line run 820px and it is meant to sit under the mark, not beside it. */
.host__line {
  margin-block-start: var(--space-lg);
  max-inline-size: var(--measure-prose);
  color: var(--color-text-heading);   /* 21:1 on black */
}

@media (max-width: 767px) {
  .host__logo { inline-size: 130px; }
}