/* Shared design tokens + base chrome across kennethjensen.me and every
   JobMatch page under it (search, stats) — extracted 2026-09-16
   so a palette/type change (like the niniaazzopardi.com-inspired redesign)
   happens in one file instead of four copies that drift apart over time.
   Page-specific layout (hero art, job cards, stat grids, period pickers,
   etc.) stays inline in each page; this file is only what was already
   identical or near-identical everywhere. A copy of the relevant parts of
   this file also lives in kennethjensen-secret/design-system.css — that
   site is a different origin (secret.kennethjensen.me), so it can't <link>
   this file directly; keep the two in sync by eye when the palette changes. */

/* Self-hosted (2026-10-10, replacing the Google Fonts CDN link every page
   used to carry): one variable-font WOFF2 per family covers the whole
   weight range below — Google's own generated CSS was already serving a
   single variable file per family behind several discrete-weight
   @font-face buckets, so this is the same files, just fetched from this
   origin instead of fonts.gstatic.com. Saves a third-party DNS/TLS
   round-trip and the visitor's IP/UA being sent to Google on every page
   load — same reasoning as this site's other privacy choices (no
   third-party form backend, no cookies). Kept in sync with
   kennethjensen-secret/design-system.css. */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('fonts/Inter.woff2') format('woff2');
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:600 700;
  font-display:swap;
  src:url('fonts/SpaceGrotesk.woff2') format('woff2');
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url('fonts/JetBrainsMono.woff2') format('woff2');
}

:root{
  --ink:#132a33;
  --ink-soft:#5c7680;
  --ink-faint:#8fa3aa;
  --bg:#ffffff;
  --bg-alt:#f1faf7;
  --accent:#12b892;
  --accent-light:#4fe3bf;
  --accent-soft:#e2f7f1;
  --cta-bg:#0f2027;
  --line:#dcf0ea;
  --up:#1a8a5f;
  --down:#c0392b;
  /* Compare-mode-only pair (period A / period B), used by /jobmatch/stats/
     when its Compare periods toggle is active — harmless as unused
     custom properties on every other page. */
  --a:#12b892;
  --a-soft:#e2f7f1;
  --b:#1f4d8f;
  --b-soft:#eaf0fa;
  --radius:14px;
  --maxw:1120px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
.num{font-family:'JetBrains Mono','Inter',monospace;font-variant-numeric:tabular-nums;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
img,svg{display:block;max-width:100%;}
.display{font-family:'Space Grotesk','Inter',system-ui,sans-serif;}

.stat-ticker{
  position:sticky;top:0;z-index:21;
  background:var(--cta-bg);
  border-bottom:1px solid rgba(79,227,191,.22);
  display:flex;align-items:stretch;
}
.stat-ticker-label{
  flex:none;display:flex;align-items:center;
  padding:11px 20px 11px 28px;font-size:13.5px;font-weight:700;letter-spacing:.01em;
  color:#fff;text-decoration:none;white-space:nowrap;
  border-right:1px solid rgba(79,227,191,.22);
  transition:color .15s;
}
.stat-ticker-label:hover{color:var(--accent-light);}
.stat-ticker-label .label-short{display:none;}
.stat-ticker-scroll{flex:1 1 auto;min-width:0;overflow:hidden;}
.stat-ticker-track{
  display:flex;align-items:center;width:max-content;height:100%;
  animation:ticker-scroll 26s linear infinite;
}
.stat-ticker:hover .stat-ticker-track{animation-play-state:paused;}
.stat-ticker-item{
  display:inline-block;flex:none;vertical-align:middle;
  padding:11px 0;font-size:14px;font-weight:500;letter-spacing:.01em;
  color:rgba(216,238,232,.75);text-decoration:none;white-space:nowrap;
  transition:color .15s;
}
.stat-ticker-item:hover{color:#fff;}
.stat-ticker-item strong{color:#fff;font-weight:700;}
.tk-up{color:#5ee6a8;font-weight:700;}
.tk-down{color:#ff8a80;font-weight:700;}
.tk-tags{display:inline-flex;align-items:center;gap:6px;margin-left:10px;vertical-align:middle;}
.tk-tag{
  display:inline-block;background:rgba(79,227,191,.14);color:var(--accent-light);
  padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:700;
}
/* Flattening (week-over-week declining) tags — same red already used for
   .tk-down above, tinted the same way .tk-tag tints the accent colour. */
.tk-tag-down{background:rgba(255,138,128,.16);color:#ff8a80;}
.stat-ticker-sep{display:inline-block;flex:none;margin:0 60px;color:rgba(79,227,191,.35);font-size:11px;vertical-align:middle;}
@keyframes ticker-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
  .stat-ticker-track{animation:none;}
  .stat-ticker-scroll{overflow-x:auto;}
}
@media (max-width:640px){
  /* The full label ("Following the Nordic/Baltic job market:") ate close
     to half the ticker's width on a phone screen, leaving barely any room
     for the actual scrolling content — swap to a much shorter label
     rather than just shrinking the font further. */
  .stat-ticker-label{padding:9px 12px;font-size:12px;}
  .stat-ticker-label .label-full{display:none;}
  .stat-ticker-label .label-short{display:inline;}
  .stat-ticker-item{padding:9px 0;font-size:13px;}
  .stat-ticker-sep{margin:0 32px;}
}

header{
  position:sticky;top:32px;z-index:20;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0;}
/* Groups the CTA and the mobile hamburger so they sit together on the
   right — without this wrapper, hiding .nav-links on mobile left .nav
   with 3 space-between children (brand / cta / hamburger), which put
   "Get in touch" floating in the dead centre of the header. */
.nav-actions{display:flex;align-items:center;gap:14px;}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;letter-spacing:-0.01em;text-decoration:none;}
.brand-mark{width:26px;height:26px;flex:none;}
.back-link{font-size:14px;font-weight:500;color:var(--ink-soft);text-decoration:none;transition:color .15s;}
.back-link:hover{color:var(--ink);}
.nav-right{display:flex;align-items:center;gap:22px;}
.nav-right a{font-size:14px;font-weight:500;color:var(--ink-soft);text-decoration:none;transition:color .15s;}
.nav-right a:hover{color:var(--ink);}
.nav-right a.current{color:var(--accent);font-weight:700;}
.nav-cta{
  background:var(--cta-bg);color:var(--accent-light);padding:10px 20px;border-radius:999px;
  font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap;transition:opacity .15s;
}
.nav-cta:hover{opacity:.85;}

.eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:18px;}
.eyebrow-alt{display:block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;}
h1{
  font-family:'Space Grotesk','Inter',system-ui,sans-serif;
  font-size:clamp(34px,4.6vw,52px);line-height:1.08;letter-spacing:-0.02em;font-weight:700;margin:0 0 22px;
}
h1 em{font-style:normal;color:var(--accent);}
h2{
  font-family:'Space Grotesk','Inter',system-ui,sans-serif;
  font-size:clamp(26px,3.2vw,36px);letter-spacing:-0.02em;font-weight:700;margin:0 0 12px;
}
.lede{font-size:18px;color:var(--ink-soft);max-width:52ch;margin:0 0 18px;}
.body-copy{font-size:16px;color:var(--ink-soft);max-width:56ch;margin:0 0 28px;}

section{padding:84px 0;}
.section-head{max-width:640px;margin:0 0 44px;}
.section-sub{color:var(--ink-soft);font-size:16px;margin:0;}

.btn-primary{
  background:var(--cta-bg);color:var(--accent-light);padding:14px 26px;border-radius:999px;
  font-weight:700;font-size:15px;text-decoration:none;display:inline-block;transition:opacity .15s;
}
.btn-primary:hover{opacity:.85;}
.btn-ghost{
  padding:14px 26px;border-radius:999px;font-weight:700;font-size:15px;text-decoration:none;
  display:inline-block;border:1px solid var(--line);color:var(--ink);transition:border-color .15s,color .15s;
}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);}

.contact-email{
  display:inline-flex;align-items:center;gap:12px;margin-top:8px;
  font-family:'Space Grotesk','Inter',system-ui,sans-serif;
  font-size:clamp(24px,3.4vw,34px);font-weight:700;text-decoration:none;color:var(--ink);
  border-bottom:3px solid var(--accent);padding-bottom:6px;letter-spacing:-0.01em;
}
.contact-email svg{width:24px;height:24px;flex:none;color:var(--accent);}
.contact-note{color:var(--ink-soft);font-size:14.5px;margin-top:22px;}
#contact .wrap{text-align:center;}

footer{border-top:1px solid var(--line);padding:34px 0;}
footer .wrap{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:16px;}
.footer-left{font-size:14px;color:var(--ink-soft);}
.footer-right a{font-size:14px;color:var(--ink-soft);text-decoration:none;}
.footer-right a:hover{color:var(--accent);}

@media (max-width:520px){
  .nav{flex-wrap:wrap;row-gap:8px;}
  .nav-right{gap:14px;font-size:13px;}
}