/* ===========================================================================
   The brand mark and wordmark (BrandHelper). Global: every layout that ships
   the site bundle can render them. Same layer statement as application.css /
   designer_v3.css — this file can load first, and the first @layer statement
   on a page fixes the order for everything after it.
   ------------------------------------------------------------------------- */
@layer properties, theme, base, components, rt, utilities;

@layer components {
  .rtd-mark { display: inline-block; flex: none; width: auto; height: 1em; overflow: visible }
  .rtd-mark .rtd-mark__start { stroke: var(--rtd-mark-accent, #ff7a1a) }

  /* The mark stands in for the R: sized to sit a hair over the caps and on
     the baseline, so "ACETRACK" reads on from it. Barlow Condensed is
     pit_wall's face (loaded by layouts/_pit_wall_head); Arial Narrow is the
     fallback shape it was drawn against. */
  .rtd-wordmark { display: inline-flex; align-items: baseline; white-space: nowrap; line-height: 1;
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-weight: 600; letter-spacing: .035em; text-transform: uppercase }
  .rtd-wordmark .rtd-mark { height: .8em; align-self: baseline; transform: translateY(.02em); margin-right: .015em }
  .rtd-wordmark .rtd-mark__lap { stroke-width: 6.5 }
  .rtd-wordmark__dim { color: var(--rtd-wordmark-dim, currentColor); opacity: var(--rtd-wordmark-dim-opacity, .6) }
  .rtd-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 }
}