/* Stillna — design tokens and the base layer, for every page on the site.
   One home for the tokens. They used to live in five files (index.html, contact/index.html,
   research/style.css, tutorials/style.css, privacy/style.css); a contrast fix meant five
   edits, and the fifth copy arrived with the privacy pages before anyone noticed the pattern.
   Section stylesheets now hold only what is genuinely theirs and load after this one. */

:root {
  --bg:    #F7F5F1;
  --card:  #FFFFFF;
  --ink:   #2E2D28;
  --prose: #55534B;
  /* --soft and --moss are darker than the originals (#8A867C / #6E7F62). Those failed WCAG AA
     at every size the site uses them — and they are every link and every caption on it.
     Now 4.67:1 and 5.52:1 on --bg, and both clear AA on --card and --btn too. Same hues, deliberately. */
  --soft:  #726E65;
  --moss:  #57684E;
  --mark:  #486042;
  --line:  #DDD8CD;
  --btn:   #E9E3D8;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:    #24384C;
    --card:  #2B4159;
    --ink:   #F2EEE4;
    --prose: #C9CFD6;
    --soft:  #A3B4C7;   /* was #8FA0B4 — 3.92:1 on --card, below AA. Now 4.95:1. */
    --moss:  #B7C4AA;
    --mark:  #ECDFD0;
    --line:  #3C526A;
    --btn:   #3C526A;
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Schibsted Grotesk", system-ui, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Header: wordmark left, crumb and language switcher right. Shared by every section. */
header.site { display: flex; align-items: center; margin-bottom: 44px; }
header.site > a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); }
header.site .wordmark { font-weight: 500; font-size: 22px; letter-spacing: 0.01em; }
header.site .crumb { margin-left: auto; }
header.site .crumb a, header.site .crumb span {
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--moss); border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 12px; text-decoration: none;
}
header.site .crumb a:hover { border-color: var(--moss); }
header.site .langs { display: flex; gap: 6px; font-size: 13px; margin-left: 12px; }
header.site .crumb + .langs { margin-left: 12px; }
header.site .langs:first-of-type:not(.crumb + .langs) { margin-left: auto; }
header.site .langs a {
  color: var(--soft); text-decoration: none; padding: 2px 8px;
  border-radius: 999px; border: 1px solid transparent;
}
header.site .langs a.on { color: var(--moss); border-color: var(--line); }
header.site .langs a:hover { color: var(--ink); }

h1 { font-weight: 500; font-size: clamp(26px, 5vw, 34px); margin-bottom: 14px; }

/* The site footer carries the cross-links. Every page reaches every section from here —
   research and the tutorials used to be invisible to each other. */
footer.site {
  border-top: 1px solid var(--line); margin-top: 56px; padding-top: 22px;
  font-size: 14.5px; color: var(--soft);
}
footer.site nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 12px; }
footer.site a { color: var(--moss); text-decoration: none; border-bottom: 1px solid var(--line); }
footer.site a:hover { border-bottom-color: var(--moss); }
footer.site .sign {
  font-family: "Newsreader", Georgia, serif; font-style: italic; color: var(--soft);
}

/* Honeypot: off-screen for people, irresistible to bots. Used by the waitlist and contact forms. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

footer.site .lead { color: var(--soft); margin-bottom: 14px; max-width: 640px; }
footer.site .lead a { color: var(--moss); }

/* External links open in a new tab, so they say so — silently breaking the back button is
   the fair criticism of target="_blank" (WCAG 3.2.5). The arrow is the visible half, the
   .vh span the half a screen reader announces. */
a[target="_blank"]::after {
  content: "\2197";           /* ↗ */
  display: inline-block;
  margin-left: 0.25em;
  font-size: 0.82em;
  line-height: 1;
  vertical-align: baseline;
  text-decoration: none;
  opacity: 0.75;
}
.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}