/* ============================================================
 * THE ODDLY WORDMARK. One definition. Every surface.
 * ============================================================
 *
 * Before this file the mark was implemented fifteen different ways: eight
 * shared stylesheets, twenty-five per-page <style> blocks and one JS renderer,
 * in four different treatments (gold leading o, teal leading o, all-teal word,
 * gold terminal period). Changing "the mark" meant finding all of them, and in
 * practice nobody did. The legacy /dashboard pages had drifted to a teal
 * leading o while canon has said gold since 2026-06-15, and nothing caught it
 * because there was no place the answer was supposed to live.
 *
 * THE MARK, as ruled by Kyle 2026-07-31: the ink wordmark, plus a gold terminal
 * period. The gold leading o is retired.
 *
 * This file is that place. It owns exactly two things:
 *
 *   1. COLOUR, as two custom properties. --oddly-mark-ink is the word on a
 *      light surface; --oddly-mark-accent is the accent glyph. Change the
 *      accent here and it changes on landing, /platform, /developers, the v2
 *      dashboard, the legacy dashboard and every embedded /app surface at once.
 *   2. FORM: which glyph carries the accent.
 *
 * It deliberately does NOT own typography. A nav mark at 20px sans and a
 * masthead nameplate at clamp(38px, 6.6vw, 72px) serif are the same mark at
 * different sizes, and per-surface type stays with the surface that sets it.
 * Colour and form are the brand; size and family are layout. Surface inversion
 * is a fact about the surface too: a mark on a navy band or a dark hero goes
 * cream by RE-POINTING --oddly-mark-ink for that surface, never by redefining
 * the mark. That is the pattern for every future exception.
 *
 * THE ALIASES. The site names the mark ten different ways for historical
 * reasons (.oc-mark in marketing chrome, .brand-mark in the legacy dashboard,
 * .app-brand in the embedded app, and so on). Renaming all of them at once
 * would be a rename commit, not a brand commit, so instead every alias is
 * listed here and resolves to the same two properties. Adding an eleventh
 * alias without adding it here is the bug this file exists to make obvious.
 *
 * LOAD ORDER. This sheet is linked LAST among a page's stylesheets so it wins
 * the colour cascade at equal specificity, and before any per-page <style>
 * block so a page can still set its own type.
 * ============================================================ */

:root {
  /* The word, on a light surface. */
  --oddly-mark-ink: var(--oddly-ink, #1A1A2E);
  /* The accent glyph. Gold is the consequence and accent colour; teal is the
   * interaction colour, and a teal mark reads as a control the eye keeps
   * trying to click (Kyle ruling 2026-07-30). */
  --oddly-mark-accent: var(--oddly-gold, #B08D57);
}

/* ---- The word ---------------------------------------------------------- */
.oc-mark,
.oc-foot-logo,
a.oddly-mark,
.app-brand,
.brand-mark,
.ea-mark,
.oi-frame-mark,
.hm-nameplate,
.odv2-wordmark,
.dv-subnav-mark {
  color: var(--oddly-mark-ink);
}
/* Surface inversion is a fact about the surface, not about the mark, so an
 * inverted surface re-points the ink property rather than redefining the mark.
 * The site footer is a navy band: the word goes cream there and the accent
 * stays gold, from the same two properties. */
.oc-foot {
  --oddly-mark-ink: var(--oddly-canvas, #FAFAF7);
}

/* ---- The leading o is a letter again ----------------------------------- */
/* The markup still wraps the first letter (72 marketing pages, the footer
 * injector, the legacy dashboard, the embedded app). Rather than rewrite that
 * markup everywhere, the wrapper is neutralised here: the o takes the word's
 * colour and loses the 5 degree tilt that made it a logomark. One rule retires
 * the gold leading o on every surface at once. */
.oc-mark .oc-o,
.oc-foot-logo .o,
.oddly-mark .o,
.brand-mark .o,
.brand-mark span.o,
.app-brand .o,
.ea-mark .o,
.oi-frame-mark .oc-o {
  color: inherit;
  display: inline;
  transform: none;
}

/* ---- The accent is a terminal period ----------------------------------- */
/* Generated, not markup, for two reasons. It reaches every lockup on the site
 * from one rule with no page edits. And it keeps the period OUT of the DOM
 * text, so the element's text content stays exactly "oddly": the mark still
 * reads as oddly with the period removed, which is the test the brief set.
 *
 * ACCESSIBILITY. Gold #B08D57 on cream #FAFAF7 is about 2.9:1, which fails
 * WCAG AA for text. The period is not text: it is decorative punctuation
 * carrying no information, the word is fully legible without it, and nothing
 * about the mark's meaning is lost if a reader cannot resolve the accent
 * against the background. The WORD itself is ink on cream and passes at 15:1,
 * and the word is what has to be read.
 *
 * Only lockups get it. span.oddly-mark below is the word inside a sentence and
 * a period there would break the sentence. */
.oc-mark::after,
.oc-foot-logo::after,
a.oddly-mark::after,
.brand-mark::after,
.app-brand::after,
.hm-nameplate::after,
.ea-mark::after,
.oi-frame-mark::after {
  content: ".";
  color: var(--oddly-mark-accent);
}

/* The v2 dashboard and the platform/developers subnav already carried a DOM
 * period, under two class names for one glyph; both are now .om-dot. On the
 * subnav the mono "platform" suffix follows the period, so there the period
 * cannot be generated content and the DOM node stays. */
.om-dot {
  color: var(--oddly-mark-accent);
}

/* ---- The word inside a sentence ---------------------------------------- */
/* <span class="oddly-mark">oddly</span> appears 189 times mid-sentence: "What
 * oddly does about this", "oddly's Conversion Tracking Audit". That is the
 * word, not the lockup. It takes the colour of the copy around it, carries no
 * accent glyph and no period, and is distinguished by weight alone. The two
 * standalone <a class="oddly-mark"> lockups (/onboard, /pricing/success) are
 * matched by a.oddly-mark above and do carry the period. */
span.oddly-mark {
  color: inherit;
}