/* ============================================================================
   SYSTEM TRADING · CONTRACTING · SERVICES — the wordmark, in HTML and CSS.

   The approved artwork is a raster PNG. Rather than place that image, the mark
   is rebuilt here as live text: it stays sharp at every size, prints as vector,
   is selectable and searchable, recolours for dark grounds, and costs one font
   request instead of an image per breakpoint.

   APPROVED CUT, 2026-10-09: the owner chose the header artwork — SYS[TE]M with
   both the T and the E in charcoal, a middle-dot descriptor, and no W.L.L.
   suffix. (The earlier cut — SYST[E]M with "TRADING CONTRACTING & SERVICES
   W.L.L." — is retired; the legal form now appears only in the registration
   table, where it belongs.)

   Every number below was measured off that artwork
   (Downloads/logo (2).png, 1983 x 793 RGBA), not guessed:

       SYSTEM cap height        293 px   <- the unit everything else is in
       SYSTEM width            1873 px   (6.3925 x cap)
       clear air between lines   38 px   (0.1297 x cap)
       descriptor cap height     74 px   (0.2526 x cap)
       descriptor width        1834 px   (6.2594 x cap)
       middle dot                26 px square, optically centred on the line
       air either side of a dot  31 px   (0.1058 x cap)
       charcoal run in line 1   48.3% .. 77.8% across SYSTEM — i.e. the T and E
       red                    #E31A15
       charcoal               #1B1E20

   The three CSS values that no ruler can give — the skew, the width axis and
   the tracking — were fitted rather than eyeballed: each candidate was rendered
   in Chromium, scaled to the artwork's cap height and scored by
   intersection-over-union against the artwork's own ink mask.

       line 1   skew 8deg, wdth 125, tracking -0.030em   IoU 0.860, width -0.16%
       line 2   skew 8deg, wdth  95, tracking  0.055em, dot margin 0.26em

   Line 2 was then fitted a second time, on word position rather than on total
   width: matching the width alone still let the two middle dots take the wrong
   share of the line, so TRADING sat right but CONTRACTING and SERVICES drifted.
   Sweeping the dot margin against the tracking and scoring where each word
   starts puts all three within 4 px of the artwork over an 1833 px line.

   Saira was chosen by rendering ten heavy italic families against the artwork
   and scoring the overlap; Saira's variable width axis is what lets one family
   carry both the wide SYSTEM line and the narrower descriptor.

   Markup:
       <span class="sys-mark">
         <span class="sys-l1">SYS<i>TE</i>M</span>
         <span class="sys-l2"><b>TRADING<s>&middot;</s>CONTRACTING<s>&middot;</s>SERVICES</b></span>
       </span>

   Size it by setting --cap (the height of the SYSTEM capitals), nothing else:
       .site-header .sys-mark { --cap: 26px }
   ========================================================================= */

/* Load Saira from the document head, not with @import — an @import can still be
   in flight when a headless browser prints, and the mark then falls back to a
   serif. Put this in every page that shows the mark:

   <link href="https://fonts.googleapis.com/css2?family=Saira:ital,wdth,wght@1,50..125,400..900&display=swap" rel="stylesheet">
*/

.sys-mark {
  --cap: 40px;              /* height of the SYSTEM capitals — the only size knob */
  --sys-red: #E31A15;
  --sys-ink: #1B1E20;
  --sys-slant: 8deg;        /* on top of Saira's own italic, to reach the artwork */

  display: inline-block;
  font-family: 'Saira', 'Archivo', system-ui, sans-serif;
  font-style: italic;
  font-synthesis: none;     /* never let a fallback fake the italic or the weight */
  line-height: 1;
  color: var(--sys-ink);
  -webkit-font-smoothing: antialiased;
}

/* The mark is dropped into pages that have their own type rules, and a host
   rule like `.brand span { font-family: serif }` beats an inherited value.
   So every element inside the mark states its own family and colour. */
.sys-mark .sys-l1,
.sys-mark .sys-l2,
.sys-mark .sys-l1 i,
.sys-mark .sys-l2 b,
.sys-mark .sys-l2 s {
  font-family: 'Saira', 'Archivo', system-ui, sans-serif;
  font-style: italic;
  font-synthesis: none;
  text-transform: none;
  /* a host page that sets `direction: rtl` on its brand block would otherwise
     reorder the middle dots and break the descriptor — the mark is always set
     left to right, whatever the page around it is doing */
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
}

/* host pages style bare <b>/<i>/<s> too — a `.brand b { display:block }` would
   push the descriptor onto its own line, so the flow is pinned as well */
.sys-mark .sys-l1 i,
.sys-mark .sys-l2 b,
.sys-mark .sys-l2 s { display: inline; vertical-align: baseline; }

.sys-mark .sys-l1,
.sys-mark .sys-l2 {
  display: block;
  white-space: nowrap;
  line-height: .705;        /* Saira's cap/em, so each line's box IS its cap height */
  transform: skewX(calc(var(--sys-slant) * -1));
  transform-origin: left bottom;
}

/* line 1 — SYSTEM, widest cut, the T and the E in charcoal */
.sys-mark .sys-l1 {
  font-weight: 900;
  font-stretch: 125%;
  font-size: calc(var(--cap) * 1.4251);
  letter-spacing: -.030em;
  color: var(--sys-red);
}

/* Each line states its own font-size, and the elements inside inherit it.
   That matters more than it looks: a line box is at least as tall as the
   strut of the element that owns it, so leaving the descriptor's size on the
   inner <b> alone let the host page's body size drive the line height. At a
   large --cap nothing showed, because the glyphs were taller than the strut.
   At a header-sized --cap of 20px the strut won, and the lockup came out a
   fifth too tall. */
.sys-mark .sys-l1 i { font-style: italic; color: var(--sys-ink); }

/* line 2 — the descriptor, narrower cut, wide tracking, middle dots */
.sys-mark .sys-l2 {
  margin-top: calc(var(--cap) * .1297);
  font-size: calc(var(--cap) * .3600);
  transform-origin: left top;
  color: var(--sys-ink);
}
.sys-mark .sys-l2 b {
  font-weight: 900;
  font-stretch: 95%;
  font-size: inherit;
  letter-spacing: .055em;
}
/* the separator. <s> carries it so a host page's generic <b>/<i> rules cannot
   reach it, and so the dot keeps its own air when the tracking changes. */
.sys-mark .sys-l2 s {
  font-weight: 900;
  font-stretch: 95%;
  font-size: inherit;
  text-decoration: none;
  margin: 0 .26em;   /* fitted: this is what puts the three words where the
                        artwork puts them, not just the line's total width */
  letter-spacing: 0;
}

/* ---------------------------------------------------------------- variants */

/* on a dark ground the charcoal would disappear, so it becomes paper white */
.sys-mark.on-dark, .sys-mark.on-dark .sys-l2 { color: #fff; }
.sys-mark.on-dark .sys-l1 i { color: #fff; }

/* one colour only — for a stamp, a fax, an embroidery file, a single-ink print */
.sys-mark.mono, .sys-mark.mono .sys-l1, .sys-mark.mono .sys-l1 i { color: currentColor; }

/* the short cut: SYSTEM alone, for a favicon, an avatar or a tight header */
.sys-mark.short .sys-l2 { display: none; }

/* Saira's width axis is a variable-font feature. Where it is unavailable the
   mark would set too narrow, so fall back to a horizontal scale that keeps the
   measured proportions rather than letting the lockup collapse. */
@supports not (font-stretch: 125%) {
  .sys-mark .sys-l1 { transform: skewX(calc(var(--sys-slant) * -1)) scaleX(1.25); }
  .sys-mark .sys-l2 { transform: skewX(calc(var(--sys-slant) * -1)) scaleX(.95); }
}

@media print {
  .sys-mark { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}