:root {
    color-scheme: light;
    /* ── Spacing scale — canonical, identical to about/styles.css ── */
    --space-025:   2px;
    --space-050:   4px;
    --space-075:   6px;
    --space-100:   8px;
    --space-150:  12px;
    --space-200:  16px;
    --space-250:  20px;
    --space-300:  24px;
    --space-400:  32px;
    --space-500:  40px;
    --space-600:  48px;
    --space-800:  64px;
    --space-1000: 80px;

    --c-bg: #ffffff;
    --c-dark: #0d0d0c;
    --c-light-bg: #f8f7f4;
    --c-white: #ffffff;
    --c-accent: #5533ee;
    --c-red: #f03d1f;
    /* Deeper red-orange — the gradient's closing stop, promoted to a token
       of its own. Link text on a white/light ground uses this: --c-red
       only reaches ~3.9:1 against white, this clears 4.5:1. --c-red stays
       the brand accent for fills, borders, icons, tags and labels. */
    --c-red-dark:   #df3611;
    --c-gray: #888680;
    --c-gray-dark: #54534f;
    --c-pale-orange: #fce4dc;
    --c-gradient: linear-gradient(150deg, #5533ee 0%, var(--c-red-dark) 81%);
    --border: rgba(13,13,12,0.08);
    --card-hover-shadow: rgba(13,13,12,0.16);
    /* Research pillars, from the sitewide accent palette (research-compendium
       README "Accent palette"): solid / tint / text-on-tint. Each pillar takes
       the colour its topic already has on the other research pages — media
       ecosystem = teal (compendium "Social Media & Platforms"), AI = azure
       (compendium "LLMs & Civic Discourse"), persuasion = magenta (compendium
       and llm-civic-discourse "Persuasion"). */
    --pillar-eco-solid: #2bccb4; --pillar-eco-bg: #e6f9f6; --pillar-eco-text: #005b4a;
    --pillar-ai-solid:  #268bfc; --pillar-ai-bg:  #e5f1ff; --pillar-ai-text:  #0e4786;
    --pillar-per-solid: #d120a9; --pillar-per-bg: #f9e4f5; --pillar-per-text: #6f285c;
    /* Corner radii — shared with research-compendium and llm-civic-discourse:
       cards 6px (home's .news-card), tags and controls 4px. */
    --radius-card:    6px;
    --radius-control: 4px;
    /* Two families, no third — and the split is by what the text IS, not by
       heading level. --f-serif: page titles, and titles of works or names of
       people (a post title, a paper title, a person's name), plus pull-quote
       copy. --f-sans: section headings, card and UI labels, running prose,
       metadata, controls and uppercase micro-labels.
       The one that trips people up: a SECTION HEADING IS NOT SERIF. Serif
       marks a thing that has its own name; sans marks the furniture around
       it. See README -> Typography. */
    --f-serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
    --f-sans: 'DM Sans', system-ui, -apple-system, sans-serif;

    /* ── Type scale (sitewide — see README) ────────────────────────────
       Fluid: each clamp() interpolates between the mobile floor and the
       desktop ceiling, so tablet needs no separate breakpoint override.
       12px is the hard floor; nothing on the site ships smaller.        */
    --fs-display:     clamp(36px, 22.7px + 3.70vw, 76px);
    --fs-h1:          clamp(36px, 29.3px + 1.85vw, 56px);
    --fs-h2:          clamp(26px, 21.3px + 1.30vw, 40px);
    --fs-h3:          clamp(20px, 18.7px + 0.37vw, 24px);
    --fs-lede:        clamp(18px, 17.3px + 0.19vw, 20px);
    --fs-body:        16px;
    --fs-small:       14px;
    --fs-small-serif: 15px;   /* EB Garamond runs ~1px small beside DM Sans */
    --fs-micro:       12px;   /* uppercase labels, tags, meta — the floor */

    --lh-display: 1.05;
    --lh-heading: 1.15;
    --lh-lede:    1.26;
    --lh-title:   1.3;
    --lh-body:    1.55;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; overflow-anchor: none; }
  body {
    font-family: var(--f-sans);
    background: var(--c-white);
    color: var(--c-dark);
    line-height: var(--lh-body);
  }
  .wrap { max-width: 1440px; margin: 0 auto; padding: 0 var(--space-1000); }
  @media (max-width: 900px) { .wrap { padding: 0 var(--space-400); } }
  @media (max-width: 480px) { .wrap { padding: 0 var(--space-250); } }

  /* ---- Header / intro ---- */
  /* Section-to-section rhythm matches about/grants/team-leadership's
     documented --space-1000 (80px) generous break — same top/bottom padding
     grants' own .intro uses (this section duplicates its copy). */
  header.page-header {
    background: var(--c-bg);
    padding: var(--space-1000) 0 var(--space-600);
  }
  header.page-header .wrap { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-250); flex-wrap: wrap; }
  header.page-header h1 {
    font-family: var(--f-serif); font-size: var(--fs-h1); font-weight: 600; letter-spacing: 0;
    color: var(--c-accent); margin: 0 0 var(--space-250); line-height: var(--lh-display);
  }
  header.page-header p {
    margin: 0; color: var(--c-dark); font-size: var(--fs-lede); font-weight: 300; line-height: var(--lh-lede);
  }
  /* ---- Purple stats band ---- */
  /* Chapter-heading + lede pattern, matching team-leadership's
     .team-section--gradient treatment (itself about's repeated colored-block
     chapter titles: 40px/600/-0.02em/1.15) rather than a one-off size — this
     is the shared "gradient section header" style, not something unique to
     this page. Lede is the same 20px/300/lh-25.2 body-copy size used
     site-wide (about's .mission__body p / grants' .intro__body p), in white
     since it sits on the gradient. */
  /* Same --space-1000 (80px) top/bottom as every colored-block chapter
     section on about/team-leadership (Orbital, Partners, team-section--gradient).
     Solid brand purple rather than the two-tone gradient — same treatment
     as about's Partners section / team-leadership's .team-section--purple
     (background: var(--c-accent)), a documented alternative to --c-gradient. */
  .stats-band { background: var(--c-accent); padding: var(--space-1000) 0; }
  .stats-band h2 {
    font-family: var(--f-sans); font-size: var(--fs-h2); font-weight: 600; letter-spacing: -0.02em;
    line-height: var(--lh-heading); color: #ffffff; margin: 0 0 var(--space-300);
  }
  .stats-lede { color: #ffffff; font-size: var(--fs-lede); font-weight: 300; line-height: var(--lh-lede); margin: 0 0 var(--space-300); }
  .stats-lede:last-of-type { margin-bottom: var(--space-300); }

  /* ---- Pillar boxes: three static research-area tiles, always showing
     their own description — no expand/collapse. Three equal-width columns;
     each box's height is just whatever its own text needs, so they run
     taller rather than wider. ---- */
  .pillar-group {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-200); margin-top: 0;
  }
  @media (max-width: 1024px) {
    .pillar-group { grid-template-columns: minmax(0, 1fr); }
  }
  .pillar-box {
    background: var(--c-light-bg); border: 1px solid rgba(255,255,255,0.16);
    border-radius: var(--radius-card); border-top: 4px solid var(--pillar-solid, var(--c-red));
    padding: var(--space-250) var(--space-300); display: flex; flex-direction: column; gap: var(--space-100); min-width: 0;
  }
  .pillar-group .pillar-box:nth-child(1) { --pillar-solid: var(--pillar-eco-solid); }
  .pillar-group .pillar-box:nth-child(2) { --pillar-solid: var(--pillar-ai-solid); }
  .pillar-group .pillar-box:nth-child(3) { --pillar-solid: var(--pillar-per-solid); }
  .pillar-box__title {
    font-family: var(--f-sans); font-size: var(--fs-body); font-weight: 600; color: var(--c-red); margin: 0;
  }
  .pillar-box__lede { font-family: var(--f-sans); font-size: var(--fs-small); font-weight: 300; line-height: var(--lh-body); color: var(--c-dark); margin: 0; }

  /* 80px top matches the same generous section break; 64px (--space-800)
     bottom follows team-leadership's :last-child rule for the page's final
     section (no footer content follows this one). */
  /* One bordered, softly-shadowed block holding the whole listing, matching
     /home's .about-center__card. --space-1000 margins carry the section
     rhythm; --space-800 padding is the block's own inset. */
  section.body-section {
    background: var(--c-white); border: 1px solid var(--border); border-radius: var(--radius-card);
    box-shadow: 0 20px 60px rgba(13, 13, 12, 0.08);
    padding: var(--space-800); margin-block: var(--space-1000);
  }
  @media (max-width: 900px) { section.body-section { padding: var(--space-400); } }
  @media (max-width: 480px) { section.body-section { padding: var(--space-250); } }

  /* The last block's bottom margin is the page's trailing margin, and a
     trailing margin on an iframed page is white space the frame is not sized
     to include (see the trailing-margin guard at the end of this file). The
     gap before the footer is the footer's own signal band now — it does not
     need 80px of help from here. */
  section.body-section:last-child { margin-bottom: 0; }

  /* Weight 700, not 600: sitewide, 700 is the white-background section
     heading weight and 600 is reserved for headings on colored blocks. */
  .section-title {
    font-family: var(--f-sans); font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.02em;
    line-height: var(--lh-heading); color: var(--c-dark); margin: 0 0 var(--space-300);
  }

  /* ---- Cards ---- */
  .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: var(--space-200); margin-bottom: var(--space-100); }
  .card {
    background: var(--c-bg); border: 1px solid var(--border); border-radius: var(--radius-card);
    padding: var(--space-200) var(--space-250) var(--space-200); display: flex; flex-direction: column;
    transition: box-shadow 0.15s, transform 0.15s;
  }
  /* Sitewide hover: box-shadow + translateY lift, never a border-color change. */
  .card:hover { box-shadow: 0 12px 24px var(--card-hover-shadow); transform: translateY(-4px); }
  @media (prefers-reduced-motion: reduce) {
    .card { transition: box-shadow 0.15s; }
    .card:hover { transform: none; }
  }
  .pillar-tag {
    display: inline-block; font-family: var(--f-sans); font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--c-red); background: var(--c-pale-orange); padding: var(--space-050) var(--space-100); margin-bottom: var(--space-200);
    border: 1px solid var(--c-red); border-radius: var(--radius-control); align-self: flex-start;
  }
  .pillar-tag--tab-ecosystem { color: var(--pillar-eco-text); background: var(--pillar-eco-bg); border-color: var(--pillar-eco-solid); }
  .pillar-tag--tab-ai { color: var(--pillar-ai-text); background: var(--pillar-ai-bg); border-color: var(--pillar-ai-solid); }
  .pillar-tag--tab-persuasion { color: var(--pillar-per-text); background: var(--pillar-per-bg); border-color: var(--pillar-per-solid); }
  .card h4 { font-family: var(--f-serif); font-size: var(--fs-body); font-weight: 600; margin: 0 0 var(--space-075); line-height: var(--lh-title); color: var(--c-dark); }
  .renamed-note { font-size: var(--fs-micro); color: var(--c-gray); font-style: italic; margin: -var(--space-050) 0 var(--space-100); }
  .card .researchers { font-family: var(--f-sans); font-size: var(--fs-micro); font-style: italic; color: var(--c-gray); margin-bottom: var(--space-100); }
  .card .org-name { font-size: var(--fs-micro); color: var(--c-gray); margin-bottom: var(--space-100); }
  .card .desc { font-size: var(--fs-small); color: var(--c-dark); font-weight: 300; line-height: var(--lh-body); margin-bottom: var(--space-100); }
  .tag-row { display: flex; flex-wrap: wrap; gap: var(--space-075); margin-bottom: var(--space-100); }
  .tag { font-size: var(--fs-micro); padding: var(--space-050) var(--space-100); background: var(--c-light-bg); color: var(--c-gray-dark); border: 1px solid var(--border); border-radius: var(--radius-control); }
  /* Topics + Expected outputs travel together to the card's bottom edge:
     the auto margin above the first group absorbs all the slack, so the two
     stay a normal --space-150 apart instead of splitting. */
  .card-meta { margin-bottom: var(--space-150); }
  .card-meta:not(.card-meta--outputs) { margin-top: auto; }
  .card-meta--outputs { margin-bottom: 0; }
  .card-meta__label {
    display: block; font-family: var(--f-sans); font-size: var(--fs-micro); font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-red); margin-bottom: var(--space-075);
  }
  .card-meta .tag-row { margin-bottom: 0; }


/* ── Trailing-margin guard ─────────────────────────────────────────────────
   These pages are embedded in an iframe that is resized to the height this
   page reports, and that height is measured from document.body.

   A bottom margin on the last element COLLAPSES THROUGH body and out to
   <html>. It never appears in body.scrollHeight, but it does extend
   documentElement.scrollHeight — so the frame gets sized short of the real
   document, the embedded page is left with a few px it can scroll, and it
   swallows the visitor's wheel events: the outer page then only scrolls when
   the cursor is over its scrollbar. It has bitten twice (home, 64px;
   grants-overview, 80px) and it is invisible in the builder.

   display: flow-root makes body a block formatting context, so descendant
   margins can no longer escape it and the measured height is always the whole
   document. Cheap, and it removes a whole class of bug rather than one
   instance. If a page grows here, something was relying on a margin escaping
   — convert that margin to padding rather than removing this.
   ====================================================================== */
body { display: flow-root; }