/* Cognition tokens, concatenated for the deploy build.
   Eight separate stylesheets were eight round trips on every page. The Google Fonts
   @import that lived in fonts.css is removed: it serialized (fetch this file, parse it,
   then fetch Google's CSS, then the font files) and pulled three families, two of which
   — DM Sans and Hanken Grotesk — are retired and unused. Newsreader is requested once,
   via a single <link> in the page head. */

/* ---- fonts.css ---- */
/* ============================================================
   Fonts
   ------------------------------------------------------------
   The studio's licensed brand faces are pending. These Google
   Fonts are the representative web equivalents already used in
   production across the microsites:
     · Newsreader     — editorial/scientific-journal display serif
     · DM Sans        — body + UI (sympathetic to the wordmark)
     · Hanken Grotesk — master-brand sans (parent cognitionstudio.com)
   Swap the @import for licensed @font-face rules when files land.
   ============================================================ */
/* @import removed for the deploy build */

/* ---- practices.css ---- */
/* ============================================================
   Practice reskins
   ------------------------------------------------------------
   The microsite kit is one architecture worn by several practice
   sub-brands. Per the studio: every practice shares the SAME
   palette (Science Cyan accent + Signal Yellow emphasis) and the
   SAME display face (Newsreader). The scope hooks stay in place so
   a practice CAN diverge later in exactly one file — but today all
   three are identical on purpose.
   Scope a page with  <div data-practice="venture">  (or wrap :root).

   scicomm   — Science Communications
   venture   — Venture Design
   onehealth — One Health
   ============================================================ */
[data-practice="scicomm"],
[data-practice="venture"],
[data-practice="onehealth"] {
  --accent: #00BCE1;
  --accent-hover: #5FD8EF;
  --emphasis: #FFCD00;
  --on-accent: #16181B;
  --font-display: 'Newsreader', Georgia, serif;
}

/* ---- colors.css ---- */
/* ============================================================
   Color
   ------------------------------------------------------------
   A disciplined system, not a colorful one. White, light gray
   and near-black text do the work. Cyan is the workhorse accent;
   yellow is punctuation only. Do not introduce new hues.
   ============================================================ */
:root {
  /* --- Brand core (master Cognition) --- */
  --cog-cyan: #00BCE1;          /* PANTONE 3545 C — science / clarity */
  --cog-cyan-hover: #5FD8EF;    /* cyan on dark, hover */
  --cog-yellow: #FFCD00;        /* PANTONE 116 C — energy / emphasis */
  --cog-charcoal: #53565A;      /* PANTONE Cool Gray 11 C — parent-brand ink */
  --cog-mist: #C1C6C8;          /* PANTONE 428 C — hairlines / quiet fills */

  /* --- Ink & surface (microsite system) --- */
  --ink: #16181B;              /* primary text; dark section & hero bg */
  --ink-deep: #0F1012;         /* footer, deepest sections, image wells */
  --surface: #FFFFFF;          /* default page bg */
  --surface-muted: #F5F6F6;    /* alternating light section bg, field wells */
  --surface-tint: #F7FBFC;     /* faint cyan wash on hover rows */

  /* --- Borders / dividers --- */
  --border: #E7E8E9;           /* hairlines on light */
  --border-alt: #EAEBEC;       /* grid dividers */
  --border-nav: #EBECED;       /* nav underline */
  --divider-dark: rgba(255, 255, 255, 0.14); /* hairlines on dark */

  /* --- Text --- */
  --text-heading: #16181B;
  --text-body: #53565A;        /* body copy on light */
  --text-body-dark: #C2C6C8;   /* body copy on dark */
  --text-muted: #8A8E91;       /* eyebrows, breadcrumb, captions */
  --text-muted-2: #6E7376;     /* footer labels */
  --text-faint: #A7AAAD;       /* "what you get" micro-labels */
  --numeral: #C1C6C8;          /* big serif index numerals, faint UI */
  --heading-on-dark: #F4F5F5;  /* near-white headings on dark */

  /* --- Semantic accents (overridden per practice) --- */
  --accent: var(--cog-cyan);
  --accent-hover: var(--cog-cyan-hover);
  --emphasis: var(--cog-yellow);
  --on-accent: #16181B;        /* text/icon sitting on an accent fill */

  /* --- Selection --- */
  --selection-bg: #00BCE1;
  --selection-fg: #ffffff;
}

/* ---- typography.css ---- */
/* ============================================================
   Typography
   ------------------------------------------------------------
   Journal authority (Newsreader) meets rounded clarity (DM Sans).
   Headings run LIGHT and editorial (weight 400, sometimes 300),
   not bold. Emphasis comes from weight + color, not all-caps bulk.
   Negative tracking + tight leading on large display sizes.
   ============================================================ */
:root {
  /* Families */
  --font-display: 'Newsreader', Georgia, serif;                       /* display / headings / pull-quotes / numerals @kind font */
  --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;       /* body, nav, labels, buttons, forms @kind font */
  --font-brand: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; /* master-brand sans (parent site) @kind font */

  /* Fluid display scale (clamp: min, preferred, max) */
  --fs-hero: clamp(38px, 5.4vw, 78px);      /* @kind font */ /* home hero H1 */
  --fs-h1: clamp(34px, 4.8vw, 70px);        /* @kind font */ /* interior page H1 */
  --fs-h2: clamp(28px, 3.6vw, 50px);        /* @kind font */ /* section H2 */
  --fs-h3: clamp(19px, 2.4vw, 33px);        /* @kind font */ /* card H3 / service headline */
  --fs-quote: clamp(24px, 3vw, 38px);       /* @kind font */ /* pull-quote */
  --fs-lead: clamp(16px, 1.3vw, 19px);      /* @kind font */ /* lead / intro body */
  --fs-body: 16px;                          /* default body @kind font */
  --fs-small: 14px;                         /* dense body, nav, links @kind font */
  --fs-eyebrow: 12px;                       /* uppercase tracked label @kind font */
  --fs-micro: 11px;                         /* "what you get" micro-label @kind font */

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

  /* Leading */
  --lh-display: 1.04;  /* @kind font */
  --lh-heading: 1.16;  /* @kind font */
  --lh-body: 1.6;      /* @kind font */
  --lh-relaxed: 1.65;  /* @kind font */

  /* Tracking */
  --ls-display: -0.02em;   /* large serif display @kind font */
  --ls-tight: -0.015em;    /* section headings @kind font */
  --ls-eyebrow: 0.2em;     /* uppercase eyebrow labels @kind font */
  --ls-micro: 0.16em;      /* uppercase micro-labels @kind font */

  /* Reading measure — copy never runs edge to edge */
  --measure: 46ch;         /* @kind font */
  --measure-wide: 62ch;    /* @kind font */
}

/* ---- spacing.css ---- */
/* ============================================================
   Spacing & layout
   ------------------------------------------------------------
   White space signals confidence. A centered 1180px container,
   wide fluid margins, an 8px baseline rhythm. Space is a
   deliberate element, not leftover room.
   ============================================================ */
:root {
  /* Container */
  --container: 1180px;

  /* Section padding (block / inline) */
  --section-y: clamp(60px, 8vw, 116px); /* @kind spacing */
  --section-x: clamp(24px, 6vw, 120px); /* @kind spacing */

  /* Gaps */
  --gap-section: clamp(28px, 4vw, 80px);
  --gap-cards: clamp(16px, 2vw, 26px);
  --card-pad: clamp(26px, 3vw, 42px);

  /* 8px baseline scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Column model */
  --columns: 12; /* @kind other */
}

/* ---- radius-elevation.css ---- */
/* ============================================================
   Radius & elevation
   ------------------------------------------------------------
   Pills for actions, softly-rounded cards, minimal shadow.
   Elevation is used sparingly — mostly on lifted feature imagery.
   ============================================================ */
:root {
  /* Radius */
  --radius-pill: 999px;    /* buttons, filter pills, tags */
  --radius-card: 16px;     /* cards, image wells, dark panels */
  --radius-card-sm: 14px;  /* smaller cards / media */
  --radius-chip: 12px;     /* small chips / stat tiles */
  --radius-input: 10px;    /* form fields */

  /* Elevation */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-feature: 0 20px 48px -24px rgba(0, 0, 0, 0.28);
  --shadow-feature-deep: 0 40px 100px -30px rgba(0, 0, 0, 0.82); /* video / modal */

  /* Hairline widths */
  --hairline: 1px;
  --rule-accent: 2px;      /* cyan under-rule on text links / top borders */
}

/* ---- motion.css ---- */
/* ============================================================
   Motion
   ------------------------------------------------------------
   Motion drawn by someone who understands what they're showing.
   Purposeful, restrained, slow editorial easing. The signature
   is the asterisk-as-catalyst: a draw-in on load, a slow radiate.
   ALL motion is disabled under prefers-reduced-motion.
   ============================================================ */
:root {
  --dur-fast: 0.15s; /* @kind other */
  --dur-base: 0.2s; /* @kind other */
  --dur-slow: 0.22s; /* @kind other */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1); /* @kind other */ /* editorial ease-out */

  /* Signature asterisk speeds */
  --spin-watermark: 70s;  /* @kind other */ /* oversized faint background mark */
  --spin-accent: 13s;     /* @kind other */ /* small accent mark */
  --radiate: 3.6s;        /* @kind other */ /* cyan signal ring */
}

/* Signature keyframes */
@keyframes ds-spin {
  to { transform: rotate(360deg); }
}
@keyframes ds-radiate {
  0%   { transform: translate(-50%, -50%) scale(0.34); opacity: 0.65; }
  100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
}
@keyframes ds-in {
  0%   { opacity: 0; transform: scale(0.5) rotate(-50deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes sci-halo {
  0%, 100% { transform: scale(1); opacity: 0.55; }
  50%      { transform: scale(1.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}

/* ---- base.css ---- */
/* ============================================================
   Base resets & element defaults
   ============================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text-body);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--selection-bg); color: var(--selection-fg); }

/* Link defaults — users add links later; never leave them browser-blue */
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

img { max-width: 100%; display: block; }