/* ==========================================================================
   Troys Squad - wordmark

   Chakra Petch Bold. TROYS in white, SQUAD in the bright red, tagline
   letterspaced to justify across the width of the name above it.

   Live text, not an image: roughly 12 KB against the 993 KB PNG it replaces,
   sharp on every screen, and it recolours with one line. Override the colours
   per surface with --ts-wm-red / --ts-wm-ink / --ts-wm-sub.
   ========================================================================== */

.ts-wm{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1;
  text-decoration:none !important;
  --ts-wm-red:#FF3B4A;
  --ts-wm-ink:#FFFFFF;
  --ts-wm-sub:rgba(255,255,255,.46);
}
.ts-wm-top{
  font-family:"Chakra Petch","Barlow Semi Condensed",Helvetica,sans-serif;
  font-weight:700;
  font-size:23px;
  letter-spacing:.015em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--ts-wm-ink);
  transition:color .2s ease;
}
.ts-wm-top i{font-style:normal;color:var(--ts-wm-red);transition:color .2s ease}
.ts-wm-sub{
  font-family:"Chakra Petch","Barlow Semi Condensed",Helvetica,sans-serif;
  font-weight:600;
  font-size:8.5px;
  line-height:1;
  text-transform:uppercase;
  color:var(--ts-wm-sub);
  margin-top:7px;
  display:flex;
  justify-content:space-between;
  width:100%;
}
.ts-wm-sub span{display:block}
.ts-wm:hover .ts-wm-top i{color:#FF6470}
.ts-wm:focus-visible{outline:2px solid var(--ts-wm-red);outline-offset:4px}

/* light surfaces: the deep poster red reads better on white */
.ts-wm.is-light{--ts-wm-red:#A20403;--ts-wm-ink:#0B0E14;--ts-wm-sub:rgba(11,14,20,.55)}

/* sizes */
.ts-wm.is-lg .ts-wm-top{font-size:48px}
.ts-wm.is-lg .ts-wm-sub{font-size:15px;margin-top:13px}
.ts-wm.is-sm .ts-wm-top{font-size:17px}
.ts-wm.is-sm .ts-wm-sub{font-size:6.5px;margin-top:5px}

/* ---------- swap it in for the theme logo ---------- */
body.ts-dark .wd-logo img,
body.ts-dark .whb-header .wd-logo img,
body.ts-dark .whb-mobile-header .wd-logo img{display:none !important}
body.ts-dark .wd-logo,
body.ts-dark .wd-logo a{display:flex !important;align-items:center !important;
  max-width:none !important}
body.ts-dark .wd-logo .ts-wm{padding:3px 0}

@media(max-width:768px){
  .ts-wm-top{font-size:18px;letter-spacing:.012em}
  .ts-wm-sub{font-size:6.5px;margin-top:5px}
}