/* ═══════════════════════════════════════════════════════════════════════════
   §HH-ORB — the listing hero orbit, rebuilt to the HOMEPAGE geometry
   assets/css/ext/public-dir-hh-orbit.css                        (2026-08-17)
   ═══════════════════════════════════════════════════════════════════════════
   Loaded by every page that renders `.dir-hh` — the index, CATEGORY and TAG
   hubs of all twenty verticals (directory, models, GPTs, extensions, courses,
   guides, cheat sheets, skills, glossary, prompts, templates, workflows,
   projects, use cases, collections, compare, alternatives, best-of, deals,
   events). One file rather than a block appended to each of the three base
   sheets, so "these heroes look the same" is true by construction instead of
   by remembering to copy an edit three ways.

   ── The defect this closes ────────────────────────────────────────────────
   `.dir-hh` was built in July to "match the / hero band". It matched the
   homepage AS IT WAS: two mirrored dashed arcs pinned to the left and right
   edges at a fixed 260px, with the logo tiles placed by a SEPARATE set of
   hand-tuned percentages (`.dir-hh-t1{left:6%;top:8%}` and friends). The two
   systems shared no geometry, so the tiles never sat on the arcs — they
   floated beside them, and the gap changed with every viewport width.

   The homepage then moved on (homepage.css §HERO-ORB, 2026-08-13): the arcs
   became ONE ellipse, the tiles were re-placed by the ring's own equation,
   and a two-layer starfield plus eighteen glints were added. Twenty verticals
   were left wearing the superseded look. This sheet ports that pass across.

   ── The geometry ─────────────────────────────────────────────────────────
   The ring is a single `<ellipse cx=50 cy=50 rx=47 ry=43>` in a
   `viewBox="0 0 100 100"` with `preserveAspectRatio="none"`, stretched to the
   orbit box. That makes the SVG's coordinate space and the box's PERCENTAGE
   space the same space, so a point at angle θ on the ring is exactly:

       left = 50 + 47·cos θ  %        top = 50 + 43·sin θ  %

   Every tile and every node below is placed with that formula and nothing
   else — they are on the ring BY CONSTRUCTION at every width rather than by
   eye at one width. θ is measured the CSS way: 0° at three o'clock, growing
   clockwise, because y grows downward. Do not "tidy" these numbers; a
   rounded-off value is a tile off the path.

   ── ⚠️ Centring is done with MARGINS, not `transform` ─────────────────────
   The homepage centres each tile on its point with
   `transform: translate(-50%, -50%)`, which it can afford because its tile is
   two elements — an outer <a> that owns position and an inner span that owns
   motion. `.dir-hh-tile` is ONE element and the base sheet already spends its
   transform on the hover lift (`.v2x .dir-hh-tile:hover{transform:
   translateY(-4px) scale(1.05)}`, specificity (0,3,0) — it outranks anything
   here). Centring with a transform would therefore be DISCARDED on hover and
   the tile would jump half its own width sideways under the cursor. Negative
   margins are not a property anything else on this component competes for, so
   they compose with the lift instead of fighting it. The margins are half the
   tile box: 78px tiles → -39px, 66px tiles → -33px.

   ── Load order ───────────────────────────────────────────────────────────
   Emitted by `v2/public/partials/hh-orbit.blade.php` at the orbit's own place
   in the document, which is always AFTER the page's base sheet. Every rule
   here either matches (0,2,0) or exceeds the specificity of the one it
   replaces, so source order settles the cascade — the same idiom the
   directory sheet's own "HOMEPAGE PARITY PASS" block uses.

   ⚠️ Below 1180px the base sheets set `.dir-hh-orbit,.dir-hh-tiles{display:
   none}`. Everything here is desktop-only by design and that rule must keep
   winning, which is why nothing below is written with `!important`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── §HH-ORB-BOX) The box the equation is measured in ──────────────────────
   The orbit and the tiles MUST share one box or the percentage identity above
   is false. They already did — but the box was `inset:44px 0 auto;height:520px`,
   a fixed slab that ended above the counter card, so a ring drawn inside it
   stopped short of the composition it is supposed to enclose. Top-to-bottom
   instead, so the ellipse wraps the whole hero (badge through counters) the
   way the homepage's does, and so a hero WITHOUT a counter deck (the compact
   guides/cheat-sheet archives) gets a ring that fits what it actually has.

   ⚠️ Written as four longhands, NOT `inset: 0`. The base rule centres this box
   with `left:50%;transform:translateX(-50%)`; `inset:0` would also set
   `left:0` and the surviving transform would then drag the whole layer half a
   screen to the left. Longhands say exactly what changes and nothing else.

   1240px, not the base sheet's 1100px: at 1100px the tiles' 7.76%/92.24%
   columns land 46-124px and 976-1054px, and `.dir-hh-copy` is 860px centred
   (120-980px) — a 4px overlap at BOTH edges. 1240px clears it by 55px. */
.v2x .dir-hh-orbit,
.v2x .dir-hh-tiles {
    top: 0;
    bottom: 0;
    left: 50%;
    right: auto;
    width: 100%;
    height: auto;
    max-width: 1240px;
    transform: translateX(-50%);
}

/* The starfield is deliberately `inset:-4% -2%` — it bleeds past the orbit box
   so its edge fades out instead of stopping on a straight line. On a viewport
   between 1181px (where the orbit switches on) and 1240px the box is the full
   hero width, so that bleed is ~25px of absolutely-positioned layer sitting
   outside it. It is decoration and it can never be scrolled to, but a stray
   25px is enough to give the DOCUMENT a horizontal scrollbar, and a page that
   rocks sideways on a laptop is a real bug caused by an invisible one.

   `clip`, not `hidden`: `overflow:hidden` on one axis forces the other to
   `auto` and turns the hero into a scroll container, which would break any
   `position:sticky` descendant and swallow scroll momentum. `clip` cuts the
   overflow without creating one. Safari below 16 ignores it and simply keeps
   today's behaviour, so this is a guard that can only help. */
.v2x .dir-hh {
    overflow-x: clip;
}

/* The arcs are gone from the markup. Kept as a stop so a cached compiled view
   or a blade this pass missed degrades to "no decoration" rather than drawing
   the old arcs ACROSS the new ring. */
.v2x .dir-hh-arc { display: none; }

/* ── §HH-ORB-RING) The ellipse ────────────────────────────────────────────
   `.dir-hh-orb`, not `.dir-hh-ring` — `dir-hh-ring-flow` / `dir-hh-ring-glint`
   are already taken by the search field's animated gradient border in the base
   sheet, and two unrelated "ring"s in one namespace is how the wrong keyframe
   gets edited.

   NOT the base sheet's `--v2-line`: that token is a hairline card edge, and at
   1.4px, dashed, stretched over 1200px of near-white hero it is invisible —
   which is what made the old arcs read as absent rather than subtle. Drawn in
   the brand hue at a measured alpha instead. `vector-effect:non-scaling-stroke`
   in the markup keeps the hairline at 1.4px while the viewBox is stretched, so
   the dashes neither fatten on a wide screen nor vanish on a narrow one. */
.v2x .dir-hh-orb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: rgba(54, 128, 237, .55);
    overflow: visible;
    pointer-events: none;
}

/* Two rings, two jobs. The main ring carries the tiles; the outer one is depth
   only and never has anything placed on it, so it is deliberately fainter and
   more sparsely dashed. */
.v2x .dir-hh-orb-main { opacity: 1; }
.v2x .dir-hh-orb-far  { opacity: .5; }

/* Dark: the same hue lifted. A 55%-alpha blue that reads clearly over #FFFFFF
   loses most of its contrast over #0E0E11 — the asymmetry every other token
   pair in this namespace is tuned for. */
body.theme-dark .v2x .dir-hh-orb     { color: rgba(120, 180, 255, .62); }
body.theme-dark .v2x .dir-hh-orb-far { opacity: .6; }

/* ── §HH-ORB-POS) Everything that sits on the ring ────────────────────────
   Each left/top pair is `50 + 47·cos θ` / `50 + 43·sin θ` for that element's
   θ. Angles are the homepage's, so the two heroes are the same picture:

       t1 left-upper   206°     t2 right-upper   334°
       t3 left-lower   154°     t4 right-lower    26°
       t5 left-foot    124°     t6 right-foot     56°

   The tile ORDER is the one the blades already emit (odd = left, even = right,
   filling from the top), so a 4-tile hero uses t1-t4 and lands symmetrically
   with no per-count special-casing.

   `right:auto` because the base sheet places the even tiles from the right
   edge; leaving both set would pin a tile to two edges at once. */
.v2x .dir-hh-t1,
.v2x .dir-hh-t2,
.v2x .dir-hh-t3,
.v2x .dir-hh-t4,
.v2x .dir-hh-t5,
.v2x .dir-hh-t6 { right: auto; }

/* 78px tiles → -39px. See the margins note in the header. */
.v2x .dir-hh-t1 { left:  7.76%; top: 31.15%; margin: -39px 0 0 -39px; }   /* θ 206° */
.v2x .dir-hh-t2 { left: 92.24%; top: 31.15%; margin: -39px 0 0 -39px; }   /* θ 334° */

/* 66px tiles → -33px. The base sheet already shrinks t3/t4; t5/t6 have no base
   rule at all, so they carry their own box here — four tiles is what every
   blade emits today and this is what a fifth and sixth would land on. */
.v2x .dir-hh-t3 { left:  7.76%; top: 68.85%; margin: -33px 0 0 -33px; }   /* θ 154° */
.v2x .dir-hh-t4 { left: 92.24%; top: 68.85%; margin: -33px 0 0 -33px; }   /* θ  26° */
.v2x .dir-hh-t5 { left: 23.72%; top: 85.65%; margin: -33px 0 0 -33px;
                  width: 66px; height: 66px; border-radius: 16px; padding: 11px; }  /* θ 124° */
.v2x .dir-hh-t6 { left: 76.28%; top: 85.65%; margin: -33px 0 0 -33px;
                  width: 66px; height: 66px; border-radius: 16px; padding: 11px; }  /* θ  56° */

/* The nodes. Placed BETWEEN the tiles so the ring reads as populated rather
   than as four objects with empty wire between them. 6px → -3px margins, which
   also leaves the base sheet's `dir-hh-float` animation (a bare translateY)
   free to compose instead of clobbering a centring transform. The per-dot
   `animation-delay` set in the base sheet is untouched and still staggers them. */
.v2x .dir-hh-dot {
    right: auto;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    opacity: .55;
}

.v2x .dir-hh-d1 { left: 17.35%; top: 19.07%; }   /* θ 226° */
.v2x .dir-hh-d2 { left:  3.00%; top: 50.00%; }   /* θ 180° */
.v2x .dir-hh-d3 { left: 17.35%; top: 80.93%; }   /* θ 134° */
.v2x .dir-hh-d4 { left: 82.65%; top: 19.07%; }   /* θ 314° */
.v2x .dir-hh-d5 { left: 97.00%; top: 50.00%; }   /* θ   0° */
.v2x .dir-hh-d6 { left: 82.65%; top: 80.93%; }   /* θ  46° */

body.theme-dark .v2x .dir-hh-dot { opacity: .7; }

/* ── §HH-ORB-STARS) The field ─────────────────────────────────────────────
   Ported verbatim from homepage.css §HERO-ORB-STARS. Two elements, ~140
   layered radial-gradients, so the field costs two DOM nodes rather than a
   hundred and forty. Read that section for the reasoning; the only change
   here is the namespace.
   ------------------------------------------------------------------------ */
.dir-hh-stars {
    position: absolute;
    inset: -4% -2%;
    pointer-events: none;
    color: rgba(54, 128, 237, .62);
    background-repeat: no-repeat;
    background-image:
        radial-gradient(2.1px 2.1px at 5.9% 4.1%, currentColor, transparent 100%),
        radial-gradient(1.6px 1.6px at 10.7% 10.9%, currentColor, transparent 100%),
        radial-gradient(1.5px 1.5px at 19.7% 3.3%, currentColor, transparent 100%),
        radial-gradient(6.8px 6.8px at 19.7% 3.3%, currentColor, transparent 70%),
        radial-gradient(1.8px 1.8px at 27.4% 5.1%, currentColor, transparent 100%),
        radial-gradient(8.1px 8.1px at 27.4% 5.1%, currentColor, transparent 70%),
        radial-gradient(1.4px 1.4px at 32.1% 6.6%, currentColor, transparent 100%),
        radial-gradient(1.8px 1.8px at 36.5% 9.0%, currentColor, transparent 100%),
        radial-gradient(1.6px 1.6px at 46.9% 4.0%, currentColor, transparent 100%),
        radial-gradient(1.6px 1.6px at 65.5% 2.6%, currentColor, transparent 100%),
        radial-gradient(1.4px 1.4px at 73.6% 9.7%, currentColor, transparent 100%),
        radial-gradient(1.5px 1.5px at 9.5% 19.3%, currentColor, transparent 100%),
        radial-gradient(1.5px 1.5px at 33.0% 25.0%, currentColor, transparent 100%),
        radial-gradient(1.7px 1.7px at 36.7% 23.4%, currentColor, transparent 100%),
        radial-gradient(1.8px 1.8px at 54.4% 23.6%, currentColor, transparent 100%),
        radial-gradient(1.2px 1.2px at 58.1% 23.3%, currentColor, transparent 100%),
        radial-gradient(1.6px 1.6px at 65.1% 16.1%, currentColor, transparent 100%),
        radial-gradient(2.1px 2.1px at 73.6% 26.6%, currentColor, transparent 100%),
        radial-gradient(1.8px 1.8px at 79.2% 21.1%, currentColor, transparent 100%),
        radial-gradient(1.7px 1.7px at 89.4% 20.4%, currentColor, transparent 100%),
        radial-gradient(1.6px 1.6px at 94.7% 23.9%, currentColor, transparent 100%),
        radial-gradient(1.7px 1.7px at 6.3% 30.1%, currentColor, transparent 100%),
        radial-gradient(1.6px 1.6px at 11.0% 37.6%, currentColor, transparent 100%),
        radial-gradient(1.3px 1.3px at 15.1% 32.9%, currentColor, transparent 100%),
        radial-gradient(1.9px 1.9px at 38.6% 34.3%, currentColor, transparent 100%),
        radial-gradient(1.1px 1.1px at 63.4% 40.0%, currentColor, transparent 100%),
        radial-gradient(1.1px 1.1px at 65.9% 35.0%, currentColor, transparent 100%),
        radial-gradient(1.7px 1.7px at 77.5% 39.1%, currentColor, transparent 100%),
        radial-gradient(1.3px 1.3px at 81.6% 38.0%, currentColor, transparent 100%),
        radial-gradient(1.4px 1.4px at 89.4% 35.0%, currentColor, transparent 100%),
        radial-gradient(1.6px 1.6px at 98.5% 39.7%, currentColor, transparent 100%),
        radial-gradient(1.2px 1.2px at 13.1% 48.4%, currentColor, transparent 100%),
        radial-gradient(5.4px 5.4px at 13.1% 48.4%, currentColor, transparent 70%),
        radial-gradient(1.9px 1.9px at 17.7% 54.4%, currentColor, transparent 100%),
        radial-gradient(8.5px 8.5px at 17.7% 54.4%, currentColor, transparent 70%),
        radial-gradient(1.9px 1.9px at 33.7% 46.7%, currentColor, transparent 100%),
        radial-gradient(1.5px 1.5px at 39.6% 54.9%, currentColor, transparent 100%),
        radial-gradient(6.8px 6.8px at 39.6% 54.9%, currentColor, transparent 70%),
        radial-gradient(1.5px 1.5px at 48.2% 48.6%, currentColor, transparent 100%),
        radial-gradient(1.7px 1.7px at 55.8% 46.0%, currentColor, transparent 100%),
        radial-gradient(1.4px 1.4px at 59.4% 52.7%, currentColor, transparent 100%),
        radial-gradient(1.6px 1.6px at 66.9% 47.6%, currentColor, transparent 100%),
        radial-gradient(2.1px 2.1px at 72.6% 54.0%, currentColor, transparent 100%),
        radial-gradient(1.4px 1.4px at 79.3% 55.3%, currentColor, transparent 100%),
        radial-gradient(2.1px 2.1px at 89.2% 55.0%, currentColor, transparent 100%),
        radial-gradient(1.4px 1.4px at 4.3% 68.3%, currentColor, transparent 100%),
        radial-gradient(1.3px 1.3px at 11.7% 63.3%, currentColor, transparent 100%),
        radial-gradient(2.0px 2.0px at 17.1% 61.6%, currentColor, transparent 100%),
        radial-gradient(1.6px 1.6px at 34.0% 67.4%, currentColor, transparent 100%),
        radial-gradient(1.8px 1.8px at 41.8% 69.7%, currentColor, transparent 100%),
        radial-gradient(8.1px 8.1px at 41.8% 69.7%, currentColor, transparent 70%),
        radial-gradient(1.8px 1.8px at 44.8% 63.4%, currentColor, transparent 100%),
        radial-gradient(1.6px 1.6px at 52.0% 68.6%, currentColor, transparent 100%),
        radial-gradient(1.7px 1.7px at 73.6% 62.9%, currentColor, transparent 100%),
        radial-gradient(1.8px 1.8px at 82.4% 69.4%, currentColor, transparent 100%),
        radial-gradient(8.1px 8.1px at 82.4% 69.4%, currentColor, transparent 70%),
        radial-gradient(1.2px 1.2px at 89.0% 58.7%, currentColor, transparent 100%),
        radial-gradient(5.4px 5.4px at 89.0% 58.7%, currentColor, transparent 70%),
        radial-gradient(1.7px 1.7px at 97.4% 66.9%, currentColor, transparent 100%),
        radial-gradient(1.8px 1.8px at 12.4% 75.4%, currentColor, transparent 100%),
        radial-gradient(1.2px 1.2px at 19.4% 78.0%, currentColor, transparent 100%),
        radial-gradient(1.1px 1.1px at 27.6% 76.0%, currentColor, transparent 100%),
        radial-gradient(5.0px 5.0px at 27.6% 76.0%, currentColor, transparent 70%),
        radial-gradient(1.7px 1.7px at 29.3% 75.3%, currentColor, transparent 100%),
        radial-gradient(2.0px 2.0px at 42.1% 77.0%, currentColor, transparent 100%),
        radial-gradient(1.8px 1.8px at 51.8% 76.0%, currentColor, transparent 100%),
        radial-gradient(1.4px 1.4px at 59.3% 76.4%, currentColor, transparent 100%),
        radial-gradient(2.0px 2.0px at 66.6% 82.1%, currentColor, transparent 100%),
        radial-gradient(1.8px 1.8px at 77.0% 75.7%, currentColor, transparent 100%),
        radial-gradient(1.5px 1.5px at 84.9% 82.1%, currentColor, transparent 100%),
        radial-gradient(1.7px 1.7px at 95.6% 78.0%, currentColor, transparent 100%),
        radial-gradient(1.1px 1.1px at 11.2% 95.6%, currentColor, transparent 100%),
        radial-gradient(1.3px 1.3px at 20.6% 94.7%, currentColor, transparent 100%),
        radial-gradient(2.1px 2.1px at 27.7% 95.1%, currentColor, transparent 100%),
        radial-gradient(1.8px 1.8px at 34.4% 93.1%, currentColor, transparent 100%),
        radial-gradient(1.7px 1.7px at 40.4% 91.3%, currentColor, transparent 100%),
        radial-gradient(1.8px 1.8px at 44.5% 89.6%, currentColor, transparent 100%),
        radial-gradient(1.2px 1.2px at 55.8% 97.0%, currentColor, transparent 100%),
        radial-gradient(5.4px 5.4px at 55.8% 97.0%, currentColor, transparent 70%),
        radial-gradient(1.7px 1.7px at 61.1% 87.9%, currentColor, transparent 100%),
        radial-gradient(1.7px 1.7px at 66.1% 95.9%, currentColor, transparent 100%),
        radial-gradient(1.5px 1.5px at 72.6% 91.7%, currentColor, transparent 100%),
        radial-gradient(6.8px 6.8px at 72.6% 91.7%, currentColor, transparent 70%),
        radial-gradient(1.8px 1.8px at 91.4% 91.7%, currentColor, transparent 100%),
        radial-gradient(1.8px 1.8px at 96.1% 93.1%, currentColor, transparent 100%);
    opacity: .85;
    animation: dir-hh-star-twinkle 6.5s ease-in-out infinite;
}

/* The second field is offset, finer and slower, and twinkles in ANTIPHASE
   (negative delay of half the period). Two fields drifting against each other
   is what gives the impression of depth from what is really two flat layers. */
.dir-hh-stars-2 {
    inset: -6% -3%;
    color: rgba(139, 92, 246, .5);
    background-image:
        radial-gradient(1.7px 1.7px at 6.9% 14.7%, currentColor, transparent 100%),
        radial-gradient(1.3px 1.3px at 14.3% 11.5%, currentColor, transparent 100%),
        radial-gradient(1.5px 1.5px at 22.2% 12.2%, currentColor, transparent 100%),
        radial-gradient(1.1px 1.1px at 27.3% 2.8%, currentColor, transparent 100%),
        radial-gradient(1.1px 1.1px at 62.4% 10.7%, currentColor, transparent 100%),
        radial-gradient(0.9px 0.9px at 87.3% 3.3%, currentColor, transparent 100%),
        radial-gradient(1.1px 1.1px at 94.8% 10.5%, currentColor, transparent 100%),
        radial-gradient(1.2px 1.2px at 5.4% 29.2%, currentColor, transparent 100%),
        radial-gradient(1.4px 1.4px at 12.0% 18.5%, currentColor, transparent 100%),
        radial-gradient(1.0px 1.0px at 17.3% 18.2%, currentColor, transparent 100%),
        radial-gradient(1.3px 1.3px at 32.2% 18.5%, currentColor, transparent 100%),
        radial-gradient(1.4px 1.4px at 39.8% 25.8%, currentColor, transparent 100%),
        radial-gradient(1.1px 1.1px at 56.0% 31.2%, currentColor, transparent 100%),
        radial-gradient(1.5px 1.5px at 64.4% 28.7%, currentColor, transparent 100%),
        radial-gradient(1.4px 1.4px at 68.6% 24.8%, currentColor, transparent 100%),
        radial-gradient(1.1px 1.1px at 78.2% 19.7%, currentColor, transparent 100%),
        radial-gradient(1.1px 1.1px at 84.2% 31.5%, currentColor, transparent 100%),
        radial-gradient(1.6px 1.6px at 94.1% 25.3%, currentColor, transparent 100%),
        radial-gradient(1.5px 1.5px at 2.2% 37.0%, currentColor, transparent 100%),
        radial-gradient(1.5px 1.5px at 15.0% 47.3%, currentColor, transparent 100%),
        radial-gradient(1.4px 1.4px at 23.3% 46.0%, currentColor, transparent 100%),
        radial-gradient(0.9px 0.9px at 25.7% 48.7%, currentColor, transparent 100%),
        radial-gradient(1.6px 1.6px at 44.2% 44.5%, currentColor, transparent 100%),
        radial-gradient(1.2px 1.2px at 53.8% 48.3%, currentColor, transparent 100%),
        radial-gradient(1.1px 1.1px at 62.8% 47.7%, currentColor, transparent 100%),
        radial-gradient(1.5px 1.5px at 79.3% 35.5%, currentColor, transparent 100%),
        radial-gradient(1.5px 1.5px at 85.4% 38.7%, currentColor, transparent 100%),
        radial-gradient(1.7px 1.7px at 93.1% 42.3%, currentColor, transparent 100%),
        radial-gradient(1.4px 1.4px at 2.9% 58.8%, currentColor, transparent 100%),
        radial-gradient(1.0px 1.0px at 9.5% 60.8%, currentColor, transparent 100%),
        radial-gradient(1.3px 1.3px at 19.5% 52.8%, currentColor, transparent 100%),
        radial-gradient(1.5px 1.5px at 28.5% 63.3%, currentColor, transparent 100%),
        radial-gradient(1.0px 1.0px at 43.2% 57.7%, currentColor, transparent 100%),
        radial-gradient(1.4px 1.4px at 78.3% 57.0%, currentColor, transparent 100%),
        radial-gradient(1.6px 1.6px at 96.3% 63.5%, currentColor, transparent 100%),
        radial-gradient(1.0px 1.0px at 13.6% 81.0%, currentColor, transparent 100%),
        radial-gradient(1.2px 1.2px at 23.7% 77.7%, currentColor, transparent 100%),
        radial-gradient(1.3px 1.3px at 27.0% 71.7%, currentColor, transparent 100%),
        radial-gradient(1.2px 1.2px at 46.1% 68.3%, currentColor, transparent 100%),
        radial-gradient(1.4px 1.4px at 57.3% 72.5%, currentColor, transparent 100%),
        radial-gradient(1.0px 1.0px at 69.6% 76.3%, currentColor, transparent 100%),
        radial-gradient(0.9px 0.9px at 78.0% 78.7%, currentColor, transparent 100%),
        radial-gradient(1.6px 1.6px at 87.7% 77.5%, currentColor, transparent 100%),
        radial-gradient(1.6px 1.6px at 12.2% 90.5%, currentColor, transparent 100%),
        radial-gradient(1.0px 1.0px at 23.6% 87.7%, currentColor, transparent 100%),
        radial-gradient(1.2px 1.2px at 31.4% 91.2%, currentColor, transparent 100%),
        radial-gradient(1.4px 1.4px at 38.7% 97.5%, currentColor, transparent 100%),
        radial-gradient(1.3px 1.3px at 47.2% 87.8%, currentColor, transparent 100%),
        radial-gradient(1.4px 1.4px at 51.3% 92.0%, currentColor, transparent 100%),
        radial-gradient(1.5px 1.5px at 59.8% 91.0%, currentColor, transparent 100%),
        radial-gradient(1.6px 1.6px at 68.3% 93.7%, currentColor, transparent 100%),
        radial-gradient(1.5px 1.5px at 80.2% 96.2%, currentColor, transparent 100%),
        radial-gradient(1.1px 1.1px at 90.3% 87.2%, currentColor, transparent 100%);
    opacity: .7;
    animation: dir-hh-star-twinkle 9s ease-in-out infinite -4.5s;
}

/* Dark is where a starfield belongs, so it gets true white for the near layer
   and a cool blue for the far one, both a step brighter. */
body.theme-dark .v2x .dir-hh-stars   { color: rgba(255, 255, 255, .92); opacity: 1; }
body.theme-dark .v2x .dir-hh-stars-2 { color: rgba(160, 200, 255, .8);  opacity: .95; }

@keyframes dir-hh-star-twinkle {
    0%, 100% { opacity: .38; }
    50%      { opacity: .92; }
}

/* ── §HH-ORB-SPARK) The eighteen glints ────────────────────────────────────
   Ported verbatim from homepage.css §HERO-ORB-SPARK. Each glint is ONE span
   carrying the house four-point mark as a MASK, so the shape is the same star
   the band headings flank themselves with — not a second, nearly-identical
   star invented here. A mask rather than a coloured data-URI because a baked-in
   fill would stay light-mode blue at night.

   Positions come from a seeded generator that REJECTS the centred copy column,
   so no glint can land on the headline, the search field or the counters.
   ------------------------------------------------------------------------ */
.dir-hh-spark {
    position: absolute;
    width: var(--sp, 16px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
    background: currentColor;
    color: var(--brand-blue, #3680ED);
    /* ⚠️ A RESTING opacity, not 0. The first version flashed each sparkle
       from 0 → .95 → 0 on its own long cycle, so at any given moment most of
       the eighteen were fully invisible — the field read as three or four
       stars, not seventeen. They are part of the composition, so they are
       always drawn; the animation only breathes around this value. */
    opacity: .55;
    pointer-events: none;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.4c1.6 6.2 3.4 8 9.6 9.6C15.4 13.6 13.6 15.4 12 21.6 10.4 15.4 8.6 13.6 2.4 12 8.6 10.4 10.4 8.6 12 2.4z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.4c1.6 6.2 3.4 8 9.6 9.6C15.4 13.6 13.6 15.4 12 21.6 10.4 15.4 8.6 13.6 2.4 12 8.6 10.4 10.4 8.6 12 2.4z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-position: center;
            mask-position: center;
    animation: dir-hh-spark-flash var(--sp-dur, 7s) ease-in-out infinite var(--sp-delay, 0s);
}

/* ⚠️ NO ::before / ::after. The first version drew the star as two crossed
   tapered bars, which is a PLUS, not the house mark — the brand star has
   concave curves between its points and that is the whole difference between
   "a sparkle" and "a cross". One mask, one element, the real shape. */

.dir-hh-s1  { left:  92.9%; top:  11.7%; --sp: 17px; --rot:   1deg; --sp-delay: -4.0s; --sp-dur: 9.8s; }
.dir-hh-s2  { left:   9.1%; top:  12.7%; --sp: 13px; --rot:   9deg; --sp-delay: -5.4s; --sp-dur: 5.7s; }
.dir-hh-s3  { left:  85.8%; top:  20.0%; --sp: 26px; --rot: -14deg; --sp-delay: -2.4s; --sp-dur: 7.4s; }
.dir-hh-s4  { left:  77.4%; top:  23.3%; --sp: 13px; --rot: -16deg; --sp-delay: -4.2s; --sp-dur: 8.0s; }
.dir-hh-s5  { left:  20.8%; top:  32.8%; --sp: 22px; --rot:  -1deg; --sp-delay: -2.2s; --sp-dur: 5.5s; }
.dir-hh-s6  { left:   4.8%; top:  33.1%; --sp: 13px; --rot: -11deg; --sp-delay: -5.5s; --sp-dur: 9.7s; }
.dir-hh-s7  { left:   3.3%; top:  44.4%; --sp: 22px; --rot:  22deg; --sp-delay: -8.2s; --sp-dur: 9.3s; }
.dir-hh-s8  { left:  82.2%; top:  47.8%; --sp: 15px; --rot:  24deg; --sp-delay: -3.1s; --sp-dur: 5.3s; }
.dir-hh-s9  { left:  83.8%; top:  61.9%; --sp: 22px; --rot:  16deg; --sp-delay: -6.7s; --sp-dur: 7.7s; }
.dir-hh-s10 { left:  11.7%; top:  69.1%; --sp: 19px; --rot: -10deg; --sp-delay: -8.7s; --sp-dur: 5.4s; }
.dir-hh-s11 { left:  96.9%; top:  75.3%; --sp: 15px; --rot:   9deg; --sp-delay: -4.7s; --sp-dur: 8.7s; }
.dir-hh-s12 { left:   3.3%; top:  77.6%; --sp: 22px; --rot:   5deg; --sp-delay: -1.6s; --sp-dur: 9.8s; }
.dir-hh-s13 { left:  20.4%; top:  80.4%; --sp: 22px; --rot:  23deg; --sp-delay: -8.1s; --sp-dur: 8.0s; }
.dir-hh-s14 { left:  86.2%; top:  84.4%; --sp: 13px; --rot: -18deg; --sp-delay: -6.6s; --sp-dur: 5.1s; }
.dir-hh-s15 { left:   9.5%; top:  89.6%; --sp: 17px; --rot: -12deg; --sp-delay: -7.7s; --sp-dur: 9.8s; }
.dir-hh-s16 { left:  35.9%; top:  91.0%; --sp: 19px; --rot: -12deg; --sp-delay: -6.0s; --sp-dur: 8.0s; }
.dir-hh-s17 { left:  64.3%; top:  92.0%; --sp: 15px; --rot:  13deg; --sp-delay: -2.7s; --sp-dur: 5.9s; }
.dir-hh-s18 { left:  90.9%; top:  95.5%; --sp: 19px; --rot:  -2deg; --sp-delay: -3.1s; --sp-dur: 6.4s; }

/* Violet on two of them, so the field is not one hue repeated five times. */
.dir-hh-s3, .dir-hh-s7, .dir-hh-s10, .dir-hh-s13, .dir-hh-s16 { color: #7048E8; }

body.theme-dark .v2x .dir-hh-spark { color: #DCEAFF; }
body.theme-dark .v2x .dir-hh-s3, body.theme-dark .v2x .dir-hh-s7, body.theme-dark .v2x .dir-hh-s10,
body.theme-dark .v2x .dir-hh-s13, body.theme-dark .v2x .dir-hh-s16 { color: #C9B6FF; }

/* Asymmetric: a fast bloom and a slow fade reads as a glint catching the
   light. A symmetric ease reads as a pulsing lamp. */
/* A slow breath with one brighter peak per cycle. Because every sparkle has
   its own duration AND its own negative delay, the eighteen never pulse
   together — which is the difference between a night sky and a string of
   fairy lights blinking in unison. */
@keyframes dir-hh-spark-flash {
    0%, 100% { opacity: .42; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(.9); }
    38%      { opacity: .72; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1.02); }
    62%      { opacity: 1;   transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1.12); }
    80%      { opacity: .66; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1); }
}

/* ── §HH-ORB-A11Y) Reduced motion / forced colours ────────────────────────
   The glints stop flashing and settle at a readable resting opacity rather
   than vanishing — they are part of the composition, not just an animation.
   The fields stop twinkling and hold their mid value.

   The base sheets' own reduced-motion block already stills `.dir-hh-dot`; this
   only has to cover what this sheet added. */
@media (prefers-reduced-motion: reduce) {
    .dir-hh-stars,
    .dir-hh-stars-2 { animation: none; opacity: .6; }

    .dir-hh-spark {
        animation: none;
        opacity: .7;
        transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
    }
}

@media (forced-colors: active) {
    /* Pure decoration, and a starfield in system colours is noise on top of
       the one thing that matters here — the headline. The ring goes too: a
       dashed ellipse forced to CanvasText reads as a border round the hero. */
    .dir-hh-stars,
    .dir-hh-stars-2,
    .dir-hh-spark,
    .v2x .dir-hh-orb { display: none; }
}