/* NAD design tokens
   ------------------------------------------------------------------------
   One palette, one type scale, used by both halves of the site — the
   WordPress theme on SiteGround and NAD Connect on the cloud server. A
   reader crossing between them should not be able to tell.

   Every colour is defined three times: once for light, once for the reader
   whose system is set to dark, and once for an explicit choice of dark. The
   third block is what makes a theme switch work in both directions; without
   it, a reader on a dark system who asks for light gets neither.

   Colours are NAD's own, taken from the pages the office has built most
   recently rather than from the older parts of the site.

   Nothing here sets a property on an element. Import it first, then write
   rules that use the variables — that way a colour is changed in one place.
*/

:root {
  /* --- ground and ink ------------------------------------------------- */
  --ground: #FFFFFF;      /* the page itself */
  --sunk:   #F2F4F3;      /* a panel set into the page */
  --raised: #FFFFFF;      /* a card standing on it */
  --ink:    #0C1110;      /* body text */
  --muted:  #6B7672;      /* secondary text — still readable on --ground */
  --faint:  #98A19D;      /* labels, counts, things you read only if looking */
  --line:      #E2E6E4;
  --line-soft: #EDF0EE;

  /* --- NAD green ------------------------------------------------------ */
  /* --nad is the ink-safe one: use it for text and borders.
     --nad-lift is for fills that carry white text.               */
  --nad:      #00806B;
  --nad-lift: #00B898;
  --nad-wash: #E3FAF5;

  /* --- the two systems, when a page needs to say which it came from --- */
  --connect:      #1F6D6D;
  --connect-wash: #E2F0F0;
  --press:        #C24000;   /* WordPress-authored, editorial */
  --press-wash:   #FDECE4;

  /* --- a clock is running ---------------------------------------------- */
  /* Deadlines only. NAD green says "this is ours"; it cannot also say "this
     closes on Monday", and a site where everything is green has no way left
     to be urgent. Deliberately close to --press and deliberately not the
     same variable: that one means "an editor wrote this", which is a fact
     about where a page came from, not a reason to hurry. */
  --urgent:      #C2381F;
  --urgent-lift: #E04A2B;
  --urgent-wash: #FDEAE6;

  --shade: 0 1px 2px rgba(12,17,16,.05), 0 10px 30px -22px rgba(12,17,16,.35);

  /* The halo around a focused field. NAD green, and a variable rather than a
     colour written out — because it had been written out, twice, inside NAD
     Connect's stylesheet, where it stayed the old blue through the whole
     change to green. A focused search box glowed blue on a green site for
     months. Found by Nicolas, 9 September 2026. */
  --focus-glow: rgba(0, 128, 107, .16);

  /* --- charts --------------------------------------------------------- */
  /* Four series, and no more. A chart that needs a fifth colour is two
     charts. --grid is the only line a reader should not notice.          */
  --c1: #C24000;  --c2: #00806B;  --c3: #3F7FD6;  --c4: #7C5CE0;
  --grid: #E8ECF1;

  /* --- the map -------------------------------------------------------- */
  --sea:   #EDF2F0;
  --land:  #FFFFFF;
  --coast: #C3CEDE;
  --pin-empty: #A9B6C6;
  --blue:   #2A78D6;   /* university campus */
  --violet: #4A3AA7;   /* hospital */
  --green:  #1BAF7A;   /* other */
  --orange: #EB6834;   /* the current selection */

  /* --- type ----------------------------------------------------------- */
  /* Lato for everything a person reads, IBM Plex Mono for anything that is
     a label or a number rather than a sentence.

     One family, not two. The file used to name Archivo for headings and
     Source Sans 3 for reading — and the site showed neither, because the
     font files were never added and every page quietly fell back to the
     system stack. Nicolas's draft answered both problems at once: it named
     Lato and it shipped the woff2 files. Søren, 9 September 2026: *"change
     the font to Lato like he suggests."*

     Headings ask for weight 600 and Lato here has 400 and 700. The browser's
     font-matching rules resolve a 600 request upward to 700, which is a real
     face — not a bold faked from the regular one. */
  --font-display: Lato, system-ui, -apple-system, sans-serif;
  --font-body:    Lato, system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  --text-xs:  12.5px;
  --text-sm:  14px;
  --text:     16.5px;
  --text-lg:  19px;
  --text-h3:  21px;
  --text-h2:  28px;
  --text-h1:  44px;
  --leading:  1.6;
  --leading-tight: 1.18;

  /* --- spacing and shape ---------------------------------------------- */
  --shell: 1120px;        /* the reading column at its widest */
  --gap-xs: 6px;  --gap-sm: 12px;  --gap: 22px;
  --gap-lg: 38px; --gap-xl: 64px;
  --radius: 12px;
  --radius-sm: 8px;
}

/* The reader's system is dark and they have not asked for anything else. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #080C0B;
    --sunk:   #0E1413;
    --raised: #121A18;
    --ink:    #E9EEEC;
    --muted:  #96A19D;
    --faint:  #6D7874;
    --line:      #222C29;
    --line-soft: #19211F;

    --nad:      #00D6B2;
    --nad-lift: #5BF0D3;
    --nad-wash: #06251F;
    --connect:      #5FC7C7;
    --connect-wash: #0B2424;
    --press:        #FF7A45;
    --press-wash:   #2B1509;

    --urgent:      #FF7E63;
    --urgent-lift: #FF9A82;
    --urgent-wash: #2E100A;

    --shade: 0 1px 2px rgba(0,0,0,.45), 0 10px 30px -22px rgba(0,0,0,.9);
    --focus-glow: rgba(0, 184, 152, .22);

    --c1: #FF8A5C;  --c2: #3FD9BB;  --c3: #6AA9F0;  --c4: #A992F7;
    --grid: #232D2A;

    --sea:   #0E1413;
    --land:  #28322F;
    --coast: #4B5A56;
    --pin-empty: #5A6878;
    --blue:   #6AA9F0;
    --violet: #9B8CF0;
    --green:  #4CC79B;
    --orange: #F08A5E;
  }
}

/* The reader has asked for dark, whatever their system says. */
:root[data-theme="dark"] {
  --ground: #080C0B;
  --sunk:   #0E1413;
  --raised: #121A18;
  --ink:    #E9EEEC;
  --muted:  #96A19D;
  --faint:  #6D7874;
  --line:      #222C29;
  --line-soft: #19211F;

  --nad:      #00D6B2;
  --nad-lift: #5BF0D3;
  --nad-wash: #06251F;
  --connect:      #5FC7C7;
  --connect-wash: #0B2424;
  --press:        #FF7A45;
  --press-wash:   #2B1509;

  --urgent:      #FF7E63;
  --urgent-lift: #FF9A82;
  --urgent-wash: #2E100A;

  --shade: 0 1px 2px rgba(0,0,0,.45), 0 10px 30px -22px rgba(0,0,0,.9);
  --focus-glow: rgba(0, 184, 152, .22);

  --c1: #FF8A5C;  --c2: #3FD9BB;  --c3: #6AA9F0;  --c4: #A992F7;
  --grid: #232D2A;

  --sea:   #0E1413;
  --land:  #28322F;
  --coast: #4B5A56;
  --pin-empty: #5A6878;
  --blue:   #6AA9F0;
  --violet: #9B8CF0;
  --green:  #4CC79B;
  --orange: #F08A5E;
}

/* A reader who has asked their system not to animate means it. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ------------------------------------------------------------------ fonts
   Served from this site's own folder, never from Google.

   Two reasons, and the second is the one to give the office: one fewer host
   for a page to reach, and no request that carries a reader's IP address to
   a third country. A German court has already found that embedding Google
   Fonts without consent breaches the GDPR, and NAD is about to become the
   data controller for a directory of 660 named researchers. This removes the
   question rather than answering it.

   The files sit beside this stylesheet — `fonts/` here, in both halves — so
   one relative url() is correct whether this file is served from the
   WordPress theme or from NAD Connect's static folder. That is why they are
   in css/fonts/ rather than the assets/fonts/ you might expect.

   `font-display: swap`, so text appears immediately in the fallback and is
   replaced when the real face lands. A page whose words wait for a font is a
   page that looks broken on a slow connection — which is why every stack in
   this file names a real system fallback after the web font.

   Lato has 100, 300, 400, 700 and 900 — and no 600, which is the weight the
   design asks for on headings, menu items and buttons. Asked for 600 with
   only 400 and 700 loaded, a browser picks 700. That is a real face, not a
   bold synthesised from the regular one, so the result is correct; it is
   noted here because it is not obvious from reading either file alone. */

@font-face {
  font-family: Lato; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/lato-latin-400-normal.e1b3b5908c9c.woff2") format("woff2");
}
@font-face {
  font-family: Lato; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/lato-latin-400-italic.efee2d080d7b.woff2") format("woff2");
}
@font-face {
  font-family: Lato; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/lato-latin-700-normal.de69cf9e514d.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-400-normal.79936b18df9f.woff2") format("woff2");
}