/* Sorapis chrome: the parts that must look identical on every page.
 *
 * This file exists because they did not. The wordmark carried a CSS triangle
 * on 21 pages and a dot on one, for four days, because each page kept its own
 * copy of the same rules and only the homepage got the redesign. Anything in
 * here is changed once and every page follows.
 *
 * The colour tokens (--amber, --ink, --sans) stay in each page's own :root.
 * Custom properties resolve where they are used, not where they are declared,
 * so this file reads them fine wherever it is linked.
 *
 * Rules to keep it working:
 *   - Add to this file, do not re-add these selectors to a page.
 *   - scripts/sync-nav.py checks the link tag is present on every page.
 */

/* ---- wordmark ---- */

.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;letter-spacing:-0.02em;text-decoration:none}
.logo .wmark{position:relative;display:inline-block;font:700 19px/1 var(--sans);letter-spacing:-0.02em;color:var(--ink);padding-top:2px}

/* The dot. One mechanism, not two: it used to be this pseudo-element on most
   pages and a <span class="wordmark-dot"> in the markup on two others, which
   is how a page ended up able to show one, both or neither. */
/* The dot, and the ONLY place its size is set. The brand file says 8px with a 2px
   radius; this said 7px with a 3px margin since 31.07 and nobody noticed, because
   7px and 8px are indistinguishable by eye at this size. It was found when a second
   8px rule was added per page and the dot did not change: `.logo .wmark::after` is
   two classes deep and beats a one-class rule regardless of source order.
   One definition, here, so there is nothing left to disagree with. */
.logo .wmark::after{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--amber);margin-left:5px;vertical-align:baseline;transform-origin:50% 100%}

/* On a dark ground the wordmark inverts. Pages that put the nav on ink set
   this class on the anchor rather than redeclaring the colour themselves. */
.logo.on-dark .wmark{color:var(--white,#fff)}