/* ============================================================
   Site typography + header format.

   The measurements here come from Beyondsoft's own Innovation Lab site
   (ai.beyondsoft.com), taken at 1280px rather than eyeballed:

     logo              189 x 51      (this site was running 250 x 64)
     logo left inset   60px          (was 34px)
     nav items         Aileron 16px / 600, 32px apart   (was system sans 18px / 500, 24px)

   It also carries the site's typeface. Aileron started here as the header's font and is
   now the whole site's, at the client's request — the Lab and Tech Bridge mirrors were
   already set in it, and the rest of the site was on Helvetica, so the two halves did not
   look like one site.

   What this file does NOT do is colour. It sets type, size and spacing only, so a light
   page keeps its light bar; the Innovation Lab page paints itself black on top of this,
   in mirror-header.css.

   Aileron has no CJK glyphs, so the Chinese nav keeps its own tuning below rather than
   being dragged to Latin metrics it was never set for.
   ============================================================ */

/* Four files, but the stylesheet asks for seven weights: 400, 500, 600, 650, 700, 750 and
   800. Declaring RANGES rather than exact weights decides those substitutions here instead
   of leaving them to the browser's fallback rules, which would drop 500 to 400 and push 800
   to 900 — one step lighter and one step heavier than the page was drawn for.

   The ranges below reproduce what the site renders today. Helvetica has no 500 or 800
   either, so 500 has always come out as Regular and 800 as Bold; keeping that mapping means
   switching typeface changes the letterforms and nothing else. */
@font-face{font-family:Aileron;font-style:normal;font-weight:1 500;font-display:swap;
  src:url(fonts/aileron-400.woff2) format("woff2");}
@font-face{font-family:Aileron;font-style:normal;font-weight:501 650;font-display:swap;
  src:url(fonts/aileron-600.woff2) format("woff2");}
@font-face{font-family:Aileron;font-style:normal;font-weight:651 850;font-display:swap;
  src:url(fonts/aileron-700.woff2) format("woff2");}
@font-face{font-family:Aileron;font-style:normal;font-weight:851 1000;font-display:swap;
  src:url(fonts/aileron-900.woff2) format("woff2");}

/* Site-wide typeface. base.css routes every rule through these three variables — 161 uses,
   with exactly one hard-coded font-family in the file — so redefining them here is the whole
   change.

   Aileron carries no CJK glyphs, which is why the original stacks are kept intact behind it
   rather than replaced: a Chinese or Japanese character falls straight through to PingFang /
   Hiragino / YaHei exactly as before, and only the Latin is different. Aileron also has no
   italics in the four files shipped here; anything italic will be synthesised by the browser,
   the same as it was under Helvetica on Windows. */
:root{
  --f-body:Aileron,Helvetica,'Helvetica Neue',Arial,"PingFang SC","Source Han Sans SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --f-display:Aileron,Helvetica,'Helvetica Neue',Arial,"PingFang SC","Source Han Sans SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --f-mono:Aileron,Helvetica,'Helvetica Neue',Arial,"PingFang SC","Source Han Sans SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --f-nav:var(--f-body);
}
/* The two places base.css does not route through a variable. */
body{font-family:var(--f-body);}

/* base.css redeclares these under html[lang="zh"] with a CJK-first stack, and that selector
   is more specific than :root — so without this the Chinese site kept Helvetica for its
   Latin while the English site moved to Aileron. Same stack as base.css's, with Aileron
   in front of it: the Chinese characters still resolve to PingFang / Source Han / YaHei,
   and the Latin mixed into them now matches the rest of the site. */
html[lang="zh"]{
  --f-body:Aileron,Helvetica,'Helvetica Neue',Arial,"PingFang SC","Source Han Sans SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --f-display:Aileron,Helvetica,'Helvetica Neue',Arial,"PingFang SC","Source Han Sans SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --f-mono:Aileron,Helvetica,'Helvetica Neue',Arial,"PingFang SC","Source Han Sans SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}

/* ---- the mark ---------------------------------------------------------------- */
/* base.css sets 64px with a note about keeping the mark the most prominent thing in the
   bar. 51px is what the Lab site uses, and the client asked to follow it. The footer
   lockup (.foot-brand .brand img, 46px) is deliberately left alone. */
.site-header .brand img{height:51px;}

/* ---- inset ------------------------------------------------------------------- */
.site-header .container.nav{--pad:60px;}

/* ---- navigation -------------------------------------------------------------- */
.site-header .nav-links{gap:32px;}
.site-header .nav-top{
  font-family:var(--f-nav);
  font-size:16px;font-weight:600;letter-spacing:normal;
}

/* Chinese keeps the treatment base.css tuned for it — a shade smaller and further apart,
   because the characters are denser than the Latin they sit beside. Aileron is still
   first in the stack so any Latin inside a Chinese label matches the rest of the bar. */
html[lang="zh"] .site-header .nav-links{gap:29px;}
html[lang="zh"] .site-header .nav-top{font-size:16.5px;letter-spacing:.018em;}

/* ---- narrower viewports ------------------------------------------------------- */
/* 60px of inset and 32px between items is what the source measures at 1280px, but its
   labels are short ones and its bar carries no search/region/language cluster. Ours does,
   and "Our Clients & Partners" alone is 161px, so at 1280 the row runs out of bar. From
   1400 up the source's numbers hold; below that the inset and the gap give way rather
   than the type, since shrinking the labels would undo the point of this file. */
@media (max-width:1399.98px){
  .site-header .container.nav{--pad:40px;}
  .site-header .nav-links{gap:22px;}
  html[lang="zh"] .site-header .nav-links{gap:20px;}
}
@media (max-width:1279.98px){
  .site-header .container.nav{--pad:34px;}
}
@media (max-width:720px){
  /* base.css drops the mark to 48px here; the same proportional step from 51 is 40. */
  .site-header .brand img{height:40px;}
}