/* ============================================================
   SOLENIC — BASE
   Universal primitives shared by every page. Linked after the
   tokens, before each page's own stylesheet.

   NOTE: page-specific base rules intentionally live in the page
   stylesheets, not here. The homepage is a fixed full-screen
   panel carousel (html,body { overflow:hidden }); About and
   Technology are normal scrolling documents (scroll-behavior:
   smooth). That divergence is by design, not debt.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Brand logo sizing, in a real stylesheet ──
   The nav and footer are web components that inject their own <style> alongside
   their markup. On a page with no loader covering the first paint (About and
   Science), that style landed a frame or two after the <img> did, and for ~55ms
   the logo rendered unstyled — a 1380x840 asset filling the container width.
   Measured on /about/: 1496px wide at t=160ms, correct 108x66 at t=215ms.
   Live-reload made it obvious because the page reloads on every save, but a
   first-time visitor sees the same flash.
   These rules live here because this file is a <link> in the head of all three
   pages, so it is parsed before any component script runs. The components keep
   their own copies — this is the floor, not a replacement. */
/* ── Trademark marks ──
   ® ™ ℠ set inline render at full type size, which beside a 42px headline is a
   glyph the size of a letter. This raises and shrinks them wherever they appear.
   Sized in em so it tracks the surrounding text; line-height:0 stops the raised
   mark opening up the line it sits on.
   solenic-marks.js wraps bare marks in this class at runtime, so authored copy
   and CMS content never has to carry the markup. */
.sol-mark {
  font-size: .42em;
  vertical-align: .62em;
  line-height: 0;
  letter-spacing: 0;
  margin-left: .02em;
  font-weight: 400;
}

.snav-logo img { height: 46px; width: auto; display: block; }
@media (min-width: 901px) { .snav-logo img { height: 66px; } }
.sf-brand-logo { height: 44px; width: auto; display: block; }