/* logo.css — the optionHack wordmark. Vector, 2026-08-08.
 *
 * The mark is now an OUTLINED SVG, inline in each page. Everything that used to be here is gone
 * with it: two base64 font payloads, the @font-face rules, the per-letter sizes, the hand-set
 * kerning, the dotless-i trick and the tittle element. The type is paths, so there is no font to
 * load, nothing to fall back to, and the spacing is fixed in the geometry rather than re-derived
 * by a text layout engine that may not agree with the one it was tuned in.
 *
 * The master is files/web/brand/optionhack-logo.svg. It was generated from the tuner, which reads
 * the laid-out position of every glyph out of the DOM and drops that glyph's outline at that spot —
 * so the vector matches what was tuned exactly, rather than being redrawn by hand.
 *
 * WHAT A CALLER SETS
 *   height    drives the mark. The SVG scales to it; the aspect is 5.826:1 (783.48 x 134.48).
 *   --knock   the colour BEHIND the crossing. The weave's over-and-under is painted in it, so it
 *             must be whatever the mark stands on or the crossing shows as a coloured scar. This
 *             is why the SVG has no background of its own — it sits transparent, and only the
 *             weave needs to know the ground.
 */

.ohmark {
    /* The four inks. Defaults are the dark-chrome mark; a light ground restates the first. */
    --ohm-ink: #dadbde;             /* "option" and the dot */
    --ohm-acc: #6AAB73;             /* "HACK" */
    --ohm-l1:  #6AAB73;             /* the near link */
    --ohm-l2:  #eab308;             /* the far link */

    display: block;
    height: 26px;
    width: auto;
    flex: 0 0 auto;
}

/* The marketing pages wrap the mark in a link; keep the anchor tight to it. */
.brandlink {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

/* ---- grounds -----------------------------------------------------------------------------------
 * --knock per place the mark stands, and the inks with it.
 */

/* THE BAR IS CHROME, AND CHROME DOES NOT FOLLOW THE THEME. theme.css keeps the furniture dark on
 * every palette — the light theme only lifts it a shade, to #3b3c40, and deliberately leaves the
 * wordmark near-white because the bar still has to carry it.
 *
 * So all five values are bound to the --ch-* tokens rather than left to inherit. Without the four
 * ink lines the light-page rule below reached into the bar and handed it #2c2d31 ink on a #3b3c40
 * ground, which is a mark you cannot see. An id beats a class, so this wins wherever it applies.
 */
#appbar .ohmark {
    --knock:   var(--ch-surface);
    --ohm-ink: var(--ch-text);
    --ohm-acc: var(--ch-accent);
    --ohm-l1:  var(--ch-accent);
    --ohm-l2:  var(--ch-gold);
}

/* A light PAGE — the marketing pages, or any light surface that hosts the mark in content rather
 * than in furniture. #dadbde would vanish on it, so the ink takes #3b3c40: the LIGHTER of the two
 * chrome greys, the one the light theme lifts its bar to — not the dark bar's #252629. */
.theme-light .ohmark,
body.light .ohmark { --knock: #ffffff; --ohm-ink: #3b3c40; }