/* The weather, everywhere.
 *
 * The vortex is the ground the whole product stands on, not a flourish on the front page — so
 * every page served from the hub gets the same shader at the same framing, and the eye lands on
 * the same pixel on each of them. That is what lets a page fall into it and the next one climb
 * back out without either end looking like a trick.
 *
 * Paired with hub-skin.js, which mounts it. Load both after hub.css.
 */

/* The pencil eddies stay loaded but off. Unloading their stylesheet does not unload the component
   that injects them — it leaves an unstyled div with two canvases on top of the page. */
.backdrop { display: none !important; }

#ground {
  position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity 1s ease; pointer-events: none;
}
#ground.on { opacity: 1; }
/* The mark, at the size it is on the front door. The orb has a floor — under about 26px the
   fluid stops being a vortex and becomes a smudge — so the word is sized to the mark on every
   page, rather than each page picking its own and the logo appearing to shrink on the way in. */
.hub-mark img, .hub-mark > span:not(.wm) { display: none; }
.hub-mark .wm {
  display: inline-flex; align-items: center;
  font-weight: 700; font-size: 38px; letter-spacing: -.035em; line-height: 1;
}
.hub-mark .wm b { position: relative; z-index: 2; font-weight: inherit; }
.hub-mark .glyph { position: relative; z-index: 1; width: .5em; height: 1em; flex: 0 0 auto; }
/* The flat mark, which is the `o` until the fluid is up. These pages carry no <symbol> definitions
   — index.html holds all fourteen — so it is three inline paths rather than a <use>, and it brings
   its own stroke because `.ic` is declared in front.css, which they do not load. Without it the
   wordmark read "v␣rtex" on /start, /guide and /login with scripting off, and /start is the page
   Create your account leads to (docs/notes/2026-10-04-wordmark-without-script.md). */
.hub-mark .glyph svg {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: .58em; height: .58em;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
/* The handover. A canvas JS *produces* starts invisible, so there is always something behind it to
   be seen instead; `live` arrives only once a frame has actually painted (hub-skin.js). */
.hub-mark .glyph .orb {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 1.68em; height: 1.68em; pointer-events: none; opacity: 0;
}
.hub-mark .glyph.live .orb { opacity: 1; }
.hub-mark .glyph.live svg { display: none; }
@media (max-width: 620px) { .hub-mark .wm { font-size: 29px; } }