/* ═══ THE RESOLVE BRAND, ON THIS SITE: ONE MARK (kit 17c-1) ══════════════
   One mark for every Resolve property: the R cut out of a disc, a brush ring
   and a pearl. It replaced the R/R, R/S and R/ai marks on 2026-10-23 (Billy:
   "the same logos should apply everywhere ... no more distinction between
   sports and ai"). The kit's files live beside this sheet in
   /assets/brand/v4/, copied byte for byte. Every other Resolve site points at
   them or carries its own v4 copy.

   Linked LAST on every page, after bar.css and after each page's inline
   <style>. It lives at a new path on purpose. ⛔ Cloudflare ignores query
   strings in its cache key and keeps /assets for 7 days, so an edited file
   at an old path keeps serving its old copy. A new URL cannot be stale. A
   later change that has to land at once needs a new filename too, not a ?v=.

   ⚠️ Specificity. Bar rules here are written `.bar.bar-v2 .door …`, one class
   deeper than the bar.css / bar3.css rules they replace, so they win whatever
   the order. The hero rules are scoped to `.hero-center`, which only the home
   page has; /sportshome/ and /aihome/ keep their own photo-matched wordmarks.

   ⚠️ Italic. Billy's house rule is no italics in copy, and theme.css enforces
   it (`.suffix { font-style: normal }`). The ONE exception he chose is the
   product word inside the logo: "research" in the bar and in the home hero.
   Nothing else on the site slants. The Bodoni Moda italic that stands in for
   Didot italic where Didot is missing is already in every page's Google Fonts
   request (`ital,opsz,wght@0,6..96,400;1,6..96,400`); keep it there.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── the mark: two files, the theme picks one ───────────────────────────
   The disc and pearl are gradients, so the mark cannot follow the theme with
   tokens. Every page carries both pictures, platinum (.rr-mark-dk) and plum
   (.rr-mark-lt), and these two rules hide the wrong one. They only ever HIDE,
   so the one left showing keeps whatever display its context gives it.
   `!important` is on purpose: bar3.css's `.bar.bar-v2 .door img` sets display
   one class deeper than this, and the vendored copies elsewhere do the same.
   Dark is the default (theme.js removes data-theme for dark), so a page with
   no script still shows the platinum mark. */
html:not([data-theme="light"]) .rr-mark.rr-mark-lt { display: none !important; }
html[data-theme="light"] .rr-mark.rr-mark-dk { display: none !important; }

/* ── the bar: mark + wordmark ───────────────────────────────────────────
   34px, the kit's bar size. The door's 44px target holds it, and the 62px
   bar has room. */
.bar.bar-v2 .door .rr-mark {
  width: 34px; height: 34px; display: block; flex: none;
}
/* "resolve" tracked open in the text colour, as the kit sets it; "research"
   in the accent, in italic. */
.bar.bar-v2 .door .nm .q {
  letter-spacing: .06em; color: var(--text, #C8DACE);
}
.bar.bar-v2 .door .nm .s {
  font-style: italic; letter-spacing: .02em; padding-right: .06em;
}

@media (max-width: 900px) {
  .bar.bar-v2 .door .rr-mark { width: 30px; height: 30px; }
}
@media (max-width: 420px) {
  .bar.bar-v2 .door .rr-mark { width: 28px; height: 28px; }
}
/* The open tracking costs about 8px. On the narrowest phones the bar had no
   8px to give, so the name steps down a pixel instead and the bar keeps the
   width it had before the brand change. */
@media (max-width: 380px) {
  .bar.bar-v2 .door .nm { font-size: 15px; }
  .bar.bar-v2 .door .rr-mark { width: 26px; height: 26px; }
}

/* ── the home hero: the mark over the wordmark ──────────────────────────
   The kit's dark and light mark, a file per theme, swapped the way the skull
   pair was. The wordmark below it stays live text (it is the page's h1). */
.hero-center .hero-mark {
  display: block; margin: 0 auto 6px;
  /* shrunk in step with the headline (102px -> 86px, x0.84) so the pair
     keeps its proportion (Billy, 2026-10-22: "the logo size is reduced to
     match"). Was clamp(160px, 22vw, 260px). */
  height: clamp(136px, 18.5vw, 220px); width: auto; aspect-ratio: 1 / 1;
  opacity: 0; animation: rise .6s .05s forwards;
}
.hero-center .hero-mark.is-light { display: none; }
html[data-theme="light"] .hero-center .hero-mark.is-dark  { display: none; }
html[data-theme="light"] .hero-center .hero-mark.is-light { display: block; }

.hero-center .wordmark { letter-spacing: .06em; }
.hero-center .wordmark .suffix {
  font-style: italic; letter-spacing: .02em; padding-right: .06em;
}