/* ==========================================================================
   The Data Human — design tokens and shared components.
   Page-specific layout stays in each page's <style> block.
   ========================================================================== */

@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/newsreader-var.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-display: swap;
  font-style: normal;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
  --display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Palette lifted from the existing brand: the cream, rust and charcoal
     already used on the post graphics and the Index scorer. */
  --paper: #faf3ea;
  --paper-raised: #fffdf9;
  --paper-sunk: #f2e9dc;

  --ink: #2d2d2d;
  --ink-soft: #6b5f56;
  --ink-faint: #9a8e83;

  --rule: #e6d9c8;
  --rule-strong: #d9c9b5;

  --accent: #c1622c;
  --accent-hover: #a4501f;
  --accent-wash: rgba(193, 98, 44, 0.09);

  /* The four Index bands. These are data, not decoration — they carry meaning
     on the score pages, so they hold their hue in both themes. */
  --band-extraction: #b0362c;
  --band-developing: #b07d24;
  --band-trust: #2b7671;
  --band-human: #2c6642;

  --measure: 34rem;      /* prose line length */
  --container: 70rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);

  --step: clamp(4rem, 9vw, 7.5rem);  /* vertical rhythm between sections */

  --radius: 4px;
  --shadow: 0 1px 2px rgba(22, 24, 28, 0.04), 0 8px 24px rgba(22, 24, 28, 0.06);
}

/* Everyone starts in the light room. The cream page is the brand, and a first-time
   visitor arriving from LinkedIn should see it, whatever their OS is set to.
   Dark is opt-in through the toggle, and the choice persists. */

:root[data-theme='light'] {
  --paper: #faf3ea;
  --paper-raised: #fffdf9;
  --paper-sunk: #f2e9dc;
  --ink: #2d2d2d;
  --ink-soft: #6b5f56;
  --ink-faint: #9a8e83;
  --rule: #e6d9c8;
  --rule-strong: #d9c9b5;
  --accent: #c1622c;
  --accent-hover: #a4501f;
  --accent-wash: rgba(193, 98, 44, 0.09);
  --band-extraction: #b0362c;
  --band-developing: #b07d24;
  --band-trust: #2b7671;
  --band-human: #2c6642;
  --shadow: 0 1px 2px rgba(22, 24, 28, 0.04), 0 8px 24px rgba(22, 24, 28, 0.06);
}

:root[data-theme='dark'] {
  --paper: #191614;
  --paper-raised: #211d1a;
  --paper-sunk: #100e0d;
  --ink: #f0e9df;
  --ink-soft: #b3a597;
  --ink-faint: #857a6e;
  --rule: rgba(217, 201, 181, 0.16);
  --rule-strong: rgba(217, 201, 181, 0.3);
  --accent: #e07a3e;
  --accent-hover: #ee8d52;
  --accent-wash: rgba(224, 122, 62, 0.13);
  --band-extraction: #d4574c;
  --band-developing: #d3a044;
  --band-trust: #45a49e;
  --band-human: #4f9068;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;

  /* Newsreader is an editorial face drawn for screens, with no decorative
     alternates to distract from the sentence. Its optical size axis is left to
     font-optical-sizing so a small heading is not given the same extreme
     thick-thin contrast as the hero. */
  font-optical-sizing: auto;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
a:hover { color: var(--accent-hover); text-decoration-color: currentColor; }

img, svg { max-width: 100%; height: auto; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Numerals line up in columns wherever a score is shown. */
.tabular { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.prose { max-width: var(--measure); }

.section { padding-block: var(--step); }

.section + .section { border-top: 1px solid var(--rule); }

/* A small caps label that opens a section. */
.eyebrow {
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1.25rem;
}

.lede {
  font-size: clamp(1.15rem, 1.7vw, 1.35rem);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Site header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--rule);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.25rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
.wordmark:hover { color: var(--ink); }

/* "The Data Human" has no descenders, so its letters sit between cap-height and
   the baseline. Centring the mark on the line box therefore drops it below the
   optical centre of the type by roughly 0.17em. Nudged up to match the letters
   rather than the box; in em so it holds when the wordmark shrinks on mobile. */
.wordmark svg {
  display: block;
  width: 22px;
  height: 22px;
  transform: translateY(-0.17em);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
}

.nav a {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current='page'] { color: var(--ink); font-weight: 500; }

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--rule-strong); }
.theme-toggle svg { width: 15px; height: 15px; display: block; }

@media (max-width: 40rem) {
  .nav { gap: 1rem; }
  .nav a { font-size: 0.875rem; }
}

/* On a narrow phone the wordmark wrapped to two lines and shunted into the nav.
   Keep it on one line and let both sides shrink instead. */
@media (max-width: 34rem) {
  .site-header__inner { gap: 0.6rem; }
  .wordmark { font-size: 0.9375rem; white-space: nowrap; }
  .wordmark svg { width: 19px; height: 19px; }
  .nav { gap: 0.65rem; }
  .nav a { font-size: 0.8125rem; white-space: nowrap; }
  .theme-toggle { width: 1.75rem; height: 1.75rem; }
}

/* Four nav items plus the toggle stop fitting alongside the words, so the mark
   carries the brand on its own and the navigation keeps the room. */
@media (max-width: 27rem) {
  .wordmark { font-size: 0; gap: 0; }
  .wordmark svg { width: 22px; height: 22px; }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--body);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn--primary {
  background: var(--accent);
  color: #fff;
}
.btn--primary:hover { background: var(--accent-hover); color: #fff; }

.btn--ghost {
  border-color: var(--rule-strong);
  color: var(--ink);
  background: transparent;
}
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }

/* An arrow link, the site's most common call to action. */
.arrow-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}
.arrow-link::after {
  content: '→';
  transition: transform 0.15s ease;
}
.arrow-link:hover::after { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
  display: block;
  padding: 1.5rem;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

a.card:hover {
  border-color: var(--rule-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  color: inherit;
}

/* --------------------------------------------------------------------------
   The dimension shape — the site's core visual.
   Five spokes, one per Index dimension, each 0 to 4.
   -------------------------------------------------------------------------- */

/* The host must carry the width: an SVG with only a viewBox has no intrinsic
   size, so inside an auto-sized grid or flex cell it collapses to nothing. */
.shape-host {
  width: 100%;
  max-width: 300px;
}

.shape {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.shape__grid { fill: none; stroke: var(--rule); stroke-width: 1; }
.shape__axis { stroke: var(--rule); stroke-width: 1; }
/* Falls back to the accent when no brand colour is supplied. */
.shape { --shape-colour: var(--accent); }

/* Scored brands draw in their own colour, so a shape is identifiable at a
   glance. One variable feeds both the logo and the polygon. Each brand carries a
   dark-theme variant for where its own colour would vanish — TikTok's black
   disappears on a dark page. */
.brand-facebook { --brand-colour: #1877f2; }
.brand-tiktok   { --brand-colour: #1e1e1e; }
.brand-apple    { --brand-colour: #555555; }
.brand-linkedin { --brand-colour: #0a66c2; }
.brand-meta     { --brand-colour: #0064e0; }
.brand-spotify  { --brand-colour: #1db954; }
.brand-handm    { --brand-colour: #e50010; }
.brand-rbc      { --brand-colour: #005daa; }
.brand-td       { --brand-colour: #00833e; }
.brand-gander   { --brand-colour: var(--accent); }

:root[data-theme='dark'] .brand-facebook { --brand-colour: #4a94f7; }
:root[data-theme='dark'] .brand-tiktok   { --brand-colour: #ece9e3; }
:root[data-theme='dark'] .brand-apple    { --brand-colour: #c9c5be; }
:root[data-theme='dark'] .brand-linkedin { --brand-colour: #3d8de0; }
:root[data-theme='dark'] .brand-meta     { --brand-colour: #4a94f7; }
:root[data-theme='dark'] .brand-spotify  { --brand-colour: #3ddb74; }
:root[data-theme='dark'] .brand-handm    { --brand-colour: #f2555f; }
:root[data-theme='dark'] .brand-rbc      { --brand-colour: #4d94d6; }
:root[data-theme='dark'] .brand-td       { --brand-colour: #35b070; }

/* Set on .shape itself so it beats the fallback above. */
.brand-facebook .shape, .brand-tiktok .shape, .brand-apple .shape,
.brand-linkedin .shape, .brand-meta .shape, .brand-spotify .shape,
.brand-handm .shape, .brand-rbc .shape, .brand-td .shape,
.brand-gander .shape { --shape-colour: var(--brand-colour); }

/* Brand logo lockup, sitting above each shape. */
.brand-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.15rem;
}
/* Masked rather than inlined: the logo file is a flat silhouette, so painting it
   with background-color lets it take the brand colour (and the dark-theme
   variant) with no JS and no per-logo markup. */
.brand-lockup__logo {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  display: block;
  background-color: var(--brand-colour, var(--ink));
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.brand-lockup__logo[data-logo='facebook'] {
  -webkit-mask-image: url('/brand/logos/facebook.svg');
  mask-image: url('/brand/logos/facebook.svg');
}
.brand-lockup__logo[data-logo='tiktok'] {
  -webkit-mask-image: url('/brand/logos/tiktok.svg');
  mask-image: url('/brand/logos/tiktok.svg');
}
.brand-lockup__logo[data-logo='apple'] {
  -webkit-mask-image: url('/brand/logos/apple.svg');
  mask-image: url('/brand/logos/apple.svg');
}
.brand-lockup__logo[data-logo='linkedin'] {
  -webkit-mask-image: url('/brand/logos/linkedin.svg');
  mask-image: url('/brand/logos/linkedin.svg');
}
.brand-lockup__logo[data-logo='meta'] {
  -webkit-mask-image: url('/brand/logos/meta.svg');
  mask-image: url('/brand/logos/meta.svg');
}
.brand-lockup__logo[data-logo='spotify'] {
  -webkit-mask-image: url('/brand/logos/spotify.svg');
  mask-image: url('/brand/logos/spotify.svg');
}
.brand-lockup__logo[data-logo='handm'] {
  -webkit-mask-image: url('/brand/logos/handm.svg');
  mask-image: url('/brand/logos/handm.svg');
}

/* Brands with no icon available get a lettermark in the brand colour, so every
   row is identifiable rather than some rows silently having nothing. */
.brand-lockup__logo--letter {
  -webkit-mask-image: none; mask-image: none;
  background: transparent;
  color: var(--brand-colour, var(--ink));
  display: grid; place-items: center;
  font-family: var(--body); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.02em;
  border: 1.5px solid currentColor; border-radius: 3px;
}

.shape__area {
  fill: color-mix(in srgb, var(--shape-colour) 16%, transparent);
  stroke: var(--shape-colour);
  stroke-width: 1.75;
  stroke-linejoin: round;
}
.shape__dot { fill: var(--shape-colour); }
.shape__label {
  font-family: var(--body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   Score band pill
   -------------------------------------------------------------------------- */

.band {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid currentColor;
}
.band::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}
.band--extraction { color: var(--band-extraction); }
.band--developing { color: var(--band-developing); }
.band--trust      { color: var(--band-trust); }
.band--human      { color: var(--band-human); }

/* The address is shown as plain text rather than a mailto link. A mailto opens
   nothing for anyone on webmail, and Cloudflare's email obfuscation rewrites the
   href into a /cdn-cgi/l/email-protection URL that needs JavaScript to decode —
   so the link silently did nothing. The contact form is the reliable path; this
   is here to be read and copied. */
.email {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  border-bottom: 1px dotted var(--rule-strong);
  cursor: text;
  user-select: all;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--rule);
  padding-block: 3rem 4rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  align-items: flex-start;
}

.site-footer a { color: var(--ink-soft); text-decoration: none; }
.site-footer a:hover { color: var(--ink); }

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.site-footer__fine {
  margin-top: 2.5rem;
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
}
.skip-link:focus { left: 1rem; top: 1rem; }