/* base.css — lead-owned fixes layered on the verbatim design system. Tokens only; no new colours or fonts.
   Loaded right after site.css (see src/layouts/Base.astro). */

/* WOFF2 copies of the same three families. Same family/weight/style descriptors as styles.css, declared later,
   so these faces win and the larger .ttf files are never fetched. */
@font-face{font-family:"Space Grotesk";src:url("../fonts/SpaceGrotesk-Variable.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("../fonts/HankenGrotesk-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("../fonts/HankenGrotesk-Italic-Variable.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Space Mono";src:url("../fonts/SpaceMono-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Space Mono";src:url("../fonts/SpaceMono-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Space Mono";src:url("../fonts/SpaceMono-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Space Mono";src:url("../fonts/SpaceMono-BoldItalic.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap}

/* Text for screen readers and crawlers only. */
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Typewriter headline without JavaScript: the <noscript> copy is shown as plain text. */
.type__nojs{display:inline}
html:not(.js) .type__caret{display:none}

/* Mobile menu. The design fades the collapsed menu with opacity only, which leaves its links focusable and
   readable by screen readers. Hide it with visibility too, delayed so the fade-out still plays. */
@media (max-width:1000px){
  .js .topnav{visibility:hidden;transition:opacity var(--duration-base) var(--ease-standard),transform var(--duration-base) var(--ease-standard),visibility 0s linear var(--duration-base)}
  .js .topnav.is-open{visibility:visible;transition-delay:0s}
  /* Without JavaScript the toggle cannot work: show the links as a plain list under the bar instead. */
  html:not(.js) .menu-toggle{display:none}
  html:not(.js) .topbar__in{flex-wrap:wrap}
  html:not(.js) .topnav{position:static;opacity:1;transform:none;pointer-events:auto;width:100%;padding:0 0 16px;border-bottom:0;background:transparent}
  html:not(.js) .topbar{position:relative;background:var(--pine)}
}

/* Performance: the stuck/mobile topbar is 92 % opaque, so its backdrop blur is barely visible but makes the
   browser re-blur the animated hero canvas on every scroll frame (stutter, worst in Safari). Dropped. */
.topbar,.topbar.is-stuck{backdrop-filter:none;-webkit-backdrop-filter:none}

/* Logo (decided 2026-10-12): the header and footer carry the primary logo, circle + ANTECH + Applied NewTech
   Nordics, instead of the compact one, so the company name is on every page. 48 px in the 88 px bar and in the
   footer, 44 px in the 72 px bars (stuck, mobile), 40 px under 360 px; bar heights and page offsets are the
   design's own. This is below the brand book's 64 px minimum for the primary logo, by choice: 80, 72, 64 and
   56 px were tried the same evening and judged too big. */
.topbar__logo img{height:48px}
.topbar.is-stuck .topbar__logo img{height:44px}
.foot img{height:48px}
@media (max-width:1000px){.topbar__logo img,.topbar.is-stuck .topbar__logo img{height:44px}}
@media (max-width:359px){.topbar__logo img,.topbar.is-stuck .topbar__logo img{height:40px}}