/* ==========================================================================
   Thomas Surface Coatings — Logo
   PRIMARY: stacked wordmark. Scale with the --u unit (1u = 1px at 1x).
   ========================================================================== */

.tsc-logo{display:inline-flex;flex-direction:column;line-height:1;--u:1px}
.tsc-logo .l1{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:calc(var(--u)*46);letter-spacing:.01em;color:var(--ink)}
.tsc-logo .rule{height:calc(var(--u)*4);background:var(--red);margin:calc(var(--u)*6) 0 calc(var(--u)*5);width:100%}
.tsc-logo .l2{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:calc(var(--u)*19.5);letter-spacing:.145em;color:var(--ink);white-space:nowrap}

/* Ground variants */
.tsc-logo.on-dark .l1,.tsc-logo.on-dark .l2{color:var(--bone)}
.tsc-logo.on-red  .l1,.tsc-logo.on-red  .l2{color:#fff}
.tsc-logo.on-red  .rule{background:#fff}
.tsc-logo.one-color-bone .l1,.tsc-logo.one-color-bone .l2{color:var(--bone)}
.tsc-logo.one-color-bone .rule{background:var(--bone)}
.tsc-logo.one-color-ink  .l1,.tsc-logo.one-color-ink  .l2{color:var(--ink)}
.tsc-logo.one-color-ink  .rule{background:var(--ink)}

/* Companion square glyph — favicons, avatars, square spaces ONLY.
   The wordmark has no compact form; this is its stand-in, never a co-logo. */
.tsc-glyph{width:var(--g,48px);height:var(--g,48px);flex-shrink:0;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:calc(var(--g,48px)*.42);letter-spacing:.01em;line-height:1}
.tsc-glyph.on-ink{background:var(--ink);color:var(--bone)}
.tsc-glyph.on-bone{background:var(--bone);color:var(--ink)}

/* Markup:
   <div class="tsc-logo" style="--u:1.2px">
     <div class="l1">Thomas</div>
     <div class="rule"></div>
     <div class="l2">Surface Coatings</div>
   </div>

   <div class="tsc-glyph" style="--g:32px">TSC</div>
*/