/* ==========================================================================
   Design system  (site-wide: homepage + every case study)
   Link it after the Tailwind CDN script:
     <link rel="stylesheet" href="files/css/design-system.css">        (root pages)
     <link rel="stylesheet" href="../files/css/design-system.css">     (case-studies/)

   Typefaces (only two for the interface):
     serif  Newsreader  300, 400, 500, italic 300/400   headlines, quotes, numbers
     sans   Manrope     400, 500, 600, 700              body, labels, navigation
   Caveat (+ Architects Daughter fallback) exists ONLY inside the homepage hero
   illustration. Never use it for interface text.

   Canonical font request (copy verbatim into every page <head>):
     https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;1,6..72,300;1,6..72,400&family=Manrope:wght@400;500;600;700&display=swap
   A weight that is not requested is snapped or faux-bolded, so do not use one.

   Use a role class (.t-*) instead of ad-hoc Tailwind text-/font-/leading-/tracking-
   utilities. Roles set family, size, weight, line-height, letter-spacing and (where
   the surface is fixed) colour. Colour on roles that appear on both light and dark
   surfaces (.t-wordmark, .t-nav) is left to the element.

   Page display
     .t-display            page title (h1)
     .t-display-statement  homepage statement headline
     .t-display-editorial  homepage project index titles
     .t-marquee            homepage skills ticker
   Headings and text
     .t-h2  .t-h3  .t-lead  .t-body-lg  .t-body  .t-body-sm  .t-caption
   Labels
     .t-label (.tech-tag)  .t-eyebrow (.kicker)  .t-overline  .t-category
     .t-tagline  .t-action
   Site chrome
     .t-wordmark  .t-nav  .t-wordmark-xl  .t-footer-link  .t-fineprint
   Modifier
     .on-dark              switches a role to its on-dark colour
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Typefaces */
  --font-serif: 'Newsreader', Georgia, serif;
  --font-sans: 'Manrope', system-ui, -apple-system, sans-serif;

  /* Colour */
  --ink: #111111;
  --ink-soft: #374151;
  --muted: #5f5e5e;
  --text-muted: #747878;
  --text-inactive: #c4c4c4;
  --on-dark: #ffffff;
  --on-dark-muted: rgba(255, 255, 255, 0.75);
  --on-dark-label: rgba(255, 255, 255, 0.6);
  --surface: #ffffff;
  --surface-page: #f5f5f5;
  --surface-dark: #0a0a0a;

  /* Lines */
  --line: rgba(0, 0, 0, 0.08);
  --line-grid: rgba(0, 0, 0, 0.1);
  --line-frame: rgba(0, 0, 0, 0.12);
  --line-strong: rgba(0, 0, 0, 0.16);

  /* Weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Size scale */
  --fs-display: clamp(48px, 7.5vw, 72px);
  --fs-display-statement: clamp(4.1rem, 5.6vw, 6.3rem);
  --fs-display-editorial: clamp(3.4rem, 5.8vw, 6.2rem);
  --fs-marquee: clamp(44px, 4.8vw, 64px);
  --fs-h2: clamp(34px, 3.8vw, 48px);
  --fs-h3: clamp(24px, 2.4vw, 32px);
  --fs-section-label: 1.65rem;
  --fs-subsection-label: 1.15rem;
  --fs-lead: clamp(19px, 2.2vw, 24px);
  --fs-body-lg: 17px;
  --fs-body: 16px;
  --fs-body-sm: 0.9rem;
  --fs-item-title: 1rem;
  --fs-item-number: 1.35rem;
  --fs-meta: 0.875rem;
  --fs-panel-note: 0.875rem;
  --fs-caption: 0.75rem;
  --fs-label: 11px;
  --fs-category: 12px;
  --fs-tagline: 14px;
  --fs-action: 13px;
  --fs-nav: 13px;
  --fs-overline: 1rem;
  --fs-footer-link: 1rem;
  --fs-fineprint: 15px;
  --fs-wordmark: 1.875rem;
  --fs-wordmark-xl: clamp(140px, 24vw, 280px);

  /* Composite type tokens: font shorthand = weight size/line-height family */
  --type-display: var(--fw-regular) var(--fs-display) / 0.96 var(--font-serif);
  --type-display-statement: var(--fw-light) var(--fs-display-statement) / 1.16 var(--font-serif);
  --type-display-editorial: var(--fw-light) var(--fs-display-editorial) / 1 var(--font-serif);
  --type-marquee: var(--fw-light) var(--fs-marquee) / 1.15 var(--font-serif);
  --type-h2: var(--fw-regular) var(--fs-h2) / 1.12 var(--font-serif);
  --type-h3: var(--fw-regular) var(--fs-h3) / 1.34 var(--font-serif);
  --type-section-label: var(--fw-regular) var(--fs-section-label) / 1.05 var(--font-serif);
  --type-subsection-label: var(--fw-regular) var(--fs-subsection-label) / 1.2 var(--font-serif);
  --type-item-number: italic var(--fw-regular) var(--fs-item-number) / 1 var(--font-serif);
  --type-caption: italic var(--fw-regular) var(--fs-caption) / 1.35 var(--font-serif);
  --type-panel-note: var(--fw-regular) var(--fs-panel-note) / 1.4 var(--font-serif);
  --type-lead: var(--fw-regular) var(--fs-lead) / 1.45 var(--font-sans);
  --type-body-lg: var(--fw-regular) var(--fs-body-lg) / 1.7 var(--font-sans);
  --type-body: var(--fw-regular) var(--fs-body) / 1.6 var(--font-sans);
  --type-body-sm: var(--fw-regular) var(--fs-body-sm) / 1.65 var(--font-sans);
  --type-item-title: var(--fw-semibold) var(--fs-item-title) / 1.4 var(--font-sans);
  --type-meta: var(--fw-semibold) var(--fs-meta) / 1.4 var(--font-sans);
  --type-label: var(--fw-bold) var(--fs-label) / 1.5 var(--font-sans);
  --type-category: var(--fw-semibold) var(--fs-category) / 1.5 var(--font-sans);
  --type-tagline: var(--fw-medium) var(--fs-tagline) / 1.5 var(--font-sans);
  --type-action: var(--fw-semibold) var(--fs-action) / 1.5 var(--font-sans);
  --type-nav: var(--fw-medium) var(--fs-nav) / 1.5 var(--font-sans);
  --type-overline: var(--fw-medium) var(--fs-overline) / 1.5 var(--font-sans);
  --type-footer-link: var(--fw-semibold) var(--fs-footer-link) / 1.5 var(--font-sans);
  --type-fineprint: var(--fw-regular) var(--fs-fineprint) / 1.5 var(--font-sans);
  --type-wordmark: var(--fw-semibold) var(--fs-wordmark) / 1 var(--font-sans);
  --type-wordmark-xl: var(--fw-semibold) var(--fs-wordmark-xl) / 0.78 var(--font-sans);

  /* Letter-spacing */
  --ls-display: -0.035em;
  --ls-display-statement: -0.025em;
  --ls-display-editorial: -0.03em;
  --ls-h2: -0.02em;
  --ls-h3: -0.015em;
  --ls-section-label: -0.02em;
  --ls-subsection-label: -0.01em;
  --ls-item-number: -0.01em;
  --ls-label: 0.16em;
  --ls-eyebrow: 0.2em;
  --ls-category: 0.22em;
  --ls-tagline: 0.16em;
  --ls-action: 0.05em;
  --ls-nav: 0.25em;
  --ls-overline: 0.1em;
  --ls-footer-link: 0.05em;
  --ls-panel-title: 0.08em;
  --ls-wordmark: -0.04em;
}

/* Values that change with the viewport must be set on :root, because the
   composite --type-* tokens above are resolved there. */
@media (min-width: 640px) {
  :root {
    --fs-category: 13px;
    --fs-tagline: 15px;
  }
}
@media (max-width: 700px) {
  :root { --fs-section-label: 1.45rem; }
}
@media (max-width: 640px) {
  :root { --fs-body-lg: 16px; }
}

/* ---------- Base ---------- */
html { background-color: var(--surface-page); }
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-sans);
  background-color: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font-family: var(--font-sans); }
h1, h2, h3, .font-editorial { font-family: var(--font-serif); }

/* ---------- Display ---------- */
.t-display {
  font: var(--type-display);
  letter-spacing: var(--ls-display);
  color: var(--ink);
}
.t-display-statement {
  font: var(--type-display-statement);
  letter-spacing: var(--ls-display-statement);
  color: var(--ink);
}
.t-display-editorial {
  font: var(--type-display-editorial);
  letter-spacing: var(--ls-display-editorial);
  color: var(--text-inactive);
}
.t-marquee {
  font: var(--type-marquee);
  color: var(--ink);
}

/* ---------- Headings and text ---------- */
.t-h2 {
  font: var(--type-h2);
  letter-spacing: var(--ls-h2);
  color: var(--ink);
}
.t-h3 {
  font: var(--type-h3);
  letter-spacing: var(--ls-h3);
  color: var(--ink);
}
.t-lead {
  font: var(--type-lead);
  color: var(--muted);
}
.t-body-lg {
  font: var(--type-body-lg);
  color: var(--muted);
}
.t-body {
  font: var(--type-body);
  color: var(--muted);
}
.t-body-sm {
  font: var(--type-body-sm);
  color: var(--muted);
}
.t-caption {
  font: var(--type-caption);
  color: var(--text-muted);
}

/* ---------- Labels ---------- */
.t-label,
.tech-tag {
  font: var(--type-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.t-eyebrow,
.kicker {
  font: var(--type-label);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.t-eyebrow::before,
.kicker::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--ink);
  border-radius: 50%;
}
.t-overline {
  font: var(--type-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--ink);
}
.t-category {
  font: var(--type-category);
  letter-spacing: var(--ls-category);
  text-transform: uppercase;
  color: var(--ink);
}
.t-tagline {
  font: var(--type-tagline);
  letter-spacing: var(--ls-tagline);
  text-transform: uppercase;
}
.t-action {
  font: var(--type-action);
  letter-spacing: var(--ls-action);
  text-transform: uppercase;
  color: var(--ink);
}

/* ---------- Site chrome ---------- */
.t-wordmark {
  font: var(--type-wordmark);
  letter-spacing: var(--ls-wordmark);
}
.t-nav {
  font: var(--type-nav);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
}
.t-wordmark-xl {
  font: var(--type-wordmark-xl);
  letter-spacing: var(--ls-wordmark);
  color: var(--ink);
}
.t-footer-link {
  font: var(--type-footer-link);
  letter-spacing: var(--ls-footer-link);
  text-transform: uppercase;
  color: var(--ink);
}
.t-fineprint {
  font: var(--type-fineprint);
  text-transform: uppercase;
  color: var(--ink);
}

/* ---------- Dark surfaces ---------- */
/* Sticky header: the page colour at 95% so content blurs beneath it */
.header-surface { background-color: color-mix(in srgb, var(--surface-page) 95%, transparent); }

.on-dark { color: var(--on-dark); }
.t-body.on-dark { color: var(--on-dark-muted); }
.t-label.on-dark,
.tech-tag.on-dark { color: var(--on-dark-label); }