/* 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. */
.logo .wmark::after{content:"";display:inline-block;width:7px;height:7px;border-radius:2px;background:var(--amber);margin-left:3px;vertical-align:baseline}

/* 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)}