/* Research Compendium — Penn MEDIATED
   Design tokens first (duplicated across every Penn MEDIATED repo — `home` is the
   style-guide reference; see README "Keeping the repos in sync"), then page CSS. */

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

:root {
  --space-025: 2px;  --space-100: 8px;  --space-300: 24px; --space-600: 48px;
  --space-050: 4px;  --space-150: 12px; --space-400: 32px; --space-800: 64px;
  --space-075: 6px;  --space-200: 16px; --space-500: 40px; --space-1000: 80px;
  --space-250: 20px;

  --c-bg:          #ffffff;
  --c-dark:        #0d0d0c;
  --c-light-bg:    #f8f7f4;
  --c-accent:      #5533ee;
  --c-red:         #f03d1f;
  /* Anything you click is --c-red-dark (clears 4.5:1 on white); --c-red stays
     the accent for things you don't click. See README "Hyperlinks". */
  --c-red-dark:    #df3611;
  --c-pale-orange: #fce4dc;
  --c-gray:        #888680;
  --c-gray-dark:   #54534f;
  --c-muted:       #c8c6c0;
  --c-white:       #ffffff;
  --c-border:      rgba(13,13,12,0.1);

  /* Accent palette — sitewide secondary colours (README "Accent palette").
     Slots are taken in this order on every page. Each has a solid, a tint
     (12% on white) and a dark text colour for use on the tint. Slots 1 and 2
     are the brand purple and orange-red, and their tints are the site's
     light purple and --c-pale-orange. This page reads them from
     THEME_COLORS in index.html; the tokens are here so other repos copy
     one set of values. */
  --c-acc-1: #5533ee; --c-acc-1-tint: #ebe7fd; --c-acc-1-text: #3d3c86;  /* purple */
  --c-acc-2: #f03d1f; --c-acc-2-tint: #fce4dc; --c-acc-2-text: #7b2719;  /* orange-red */
  --c-acc-3: #2bccb4; --c-acc-3-tint: #e6f9f6; --c-acc-3-text: #005b4a;  /* teal */
  --c-acc-4: #d120a9; --c-acc-4-tint: #f9e4f5; --c-acc-4-text: #6f285c;  /* magenta */
  --c-acc-5: #861d77; --c-acc-5-tint: #f0e4ef; --c-acc-5-text: #6d2961;  /* berry */
  --c-acc-6: #268bfc; --c-acc-6-tint: #e5f1ff; --c-acc-6-text: #0e4786;  /* azure */
  --c-acc-7: #1b9247; --c-acc-7-tint: #e4f2e9; --c-acc-7-text: #005820;  /* green */
  --c-acc-8: #b7a0fb; --c-acc-8-tint: #f6f4ff; --c-acc-8-text: #4d3680;  /* lilac */

  /* Serif for page titles and titles of works; sans for everything else,
     section headings included. See README "Typography". */
  --f-serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --f-sans:  'DM Sans', system-ui, -apple-system, sans-serif;

  --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-micro: 12px;

  --lh-display: 1.05;
  --lh-heading: 1.15;
  --lh-lede:    1.26;
  --lh-title:   1.3;
  --lh-body:    1.55;

  --shadow-lift: 0 12px 24px rgba(13,13,12,0.16);

  /* Corner radii, from home: cards match home's .news-card (6px); buttons,
     fields and tags match the Subscribe button (4px). */
  --radius-card:    6px;
  --radius-control: 4px;
}

body {
  font-family: var(--f-sans); font-size: var(--fs-body); line-height: var(--lh-body);
  background: var(--c-bg); color: var(--c-dark);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--c-red); outline-offset: 2px; }

/* Shared 1440px cap with the 80 / 32 / 20px gutter scale. */
.wrap { max-width: 1440px; margin-inline: auto; padding-inline: var(--space-1000); }
@media (max-width: 900px) { .wrap { padding-inline: var(--space-400); } }
@media (max-width: 480px) { .wrap { padding-inline: var(--space-250); } }

/* ---- Page header. No eyebrow above the page title (sitewide rule). ---- */
/* 80px from the site menu to the title, as on every page. */
.intro { padding-top: var(--space-1000); padding-bottom: var(--space-500); }
.intro__title {
  font-family: var(--f-serif); font-size: var(--fs-h1); font-weight: 600;
  line-height: var(--lh-display); color: var(--c-accent); margin-bottom: var(--space-250);
}
.intro__cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-600); align-items: start; }
@media (max-width: 900px) { .intro__cols { grid-template-columns: minmax(0, 1fr); gap: var(--space-400); } }
.intro__body { display: flex; flex-direction: column; gap: var(--space-250); }
.intro__body p { font-size: var(--fs-lede); font-weight: 300; line-height: var(--lh-lede); }

/* Category 1 in-text links (README "Hyperlinks"): --c-red-dark, weight 500,
   no underline, fade to 0.7 on hover. The tinted summary boxes (light purple,
   light orange) count as a light ground, so the same rule applies there. The
   extra selectors keep links inside bold lead-ins and the finding bodies on
   the same rule instead of inheriting weight or colour from around them. */
.newsletter__list a, .entry__detail a, .entry__detail strong a, .finding__body a {
  color: var(--c-red-dark); font-weight: 500; text-decoration: none; border-bottom: 0; transition: opacity 0.15s;
}
.newsletter__list a:hover, .entry__detail a:hover { opacity: 0.7; }

/* Newsletter panel — the sitewide white block (bordered + soft shadow),
   the same one home's .about-center__card uses. */
.newsletter {
  background: var(--c-white); border: 1px solid var(--c-border);
  box-shadow: 0 24px 48px rgba(13,13,12,0.06); padding: var(--space-400);
  border-radius: var(--radius-card);
}
@media (max-width: 480px) { .newsletter { padding: var(--space-300) var(--space-250); } }
.newsletter__label {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: 1.44px;
  text-transform: uppercase; color: var(--c-red); margin-bottom: var(--space-150);
}
.newsletter__lede { font-size: var(--fs-small); font-weight: 300; line-height: var(--lh-body); margin-bottom: var(--space-250); }
/* Category 3 — hover is movement, never a colour swap. */
.newsletter__cta {
  /* Shape and type match the footer's Subscribe button
     (footer .pm-footer__newsletter-submit): 40px tall, 24px side padding,
     4px corners, DM Sans 12px / 600 / 0.24px tracking. Colour stays the
     white-ground version (red-dark box, white text). */
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--space-500); padding-inline: var(--space-300);
  border-radius: var(--radius-control); white-space: nowrap;
  background: var(--c-red-dark); color: var(--c-white);
  font-family: var(--f-sans); font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.newsletter__cta:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(13,13,12,0.28); }
.newsletter__list {
  list-style: none; margin-top: var(--space-300); display: flex; flex-direction: column; gap: var(--space-150);
  font-size: var(--fs-small); font-weight: 300; line-height: var(--lh-body); color: var(--c-gray-dark);
}

/* ---- At a glance: the two theme charts, between the header and the filters ---- */
.glance { padding-bottom: var(--space-500); }
.glance[hidden] { display: none; }
/* Divider across the full page width that fades out toward both edges, with
   a soft shadow falling below its centre, so the chart section reads as its
   own layer (after the old compendium's control bar). .glance is full width;
   its content sits in the inner .wrap. */
.glance::before {
  content: ''; display: block; height: 14px; margin-bottom: var(--space-150);
  background:
    linear-gradient(90deg, transparent, rgba(13,13,12,0.16) 25%, rgba(13,13,12,0.16) 75%, transparent) top / 100% 1px no-repeat,
    radial-gradient(ellipse 50% 100% at 50% 0, rgba(13,13,12,0.06), transparent 100%) top / 100% 100% no-repeat;
}
/* Disclosure — the sitewide chevron + --c-red-dark label (README "Dropdowns
   and disclosures"). The chevron points up while the charts are open. */
.glance__toggle {
  display: inline-flex; align-items: center; gap: var(--space-075);
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: var(--fs-small); color: var(--c-red-dark); transition: opacity 0.15s;
}
.glance__toggle:hover { opacity: 0.7; }
.glance__toggle svg { transition: transform 0.25s; flex-shrink: 0; }
.glance__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.glance.is-collapsed { padding-bottom: var(--space-400); }
.glance__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-600);
  padding-top: var(--space-300);
}
.glance__grid[hidden] { display: none; }
@media (max-width: 900px) {
  .glance__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-500); }
  .glance__grid .panel { max-width: 720px; }
}
.panel h2 { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-heading); margin-bottom: var(--space-075); }
.panel__sub { font-size: var(--fs-small); font-weight: 300; color: var(--c-gray-dark); margin-bottom: var(--space-250); }

.swatch { width: 10px; height: 10px; border-radius: 50%; flex: none; }

/* Entries by theme — horizontal bars */
.hbars { display: grid; grid-template-columns: max-content minmax(0, 1fr) 2.5em; gap: var(--space-100) var(--space-150); align-items: center; }
.hbars .lab { font-size: var(--fs-small); display: flex; align-items: center; gap: var(--space-100); }
.hbars .lab.sel { font-weight: 700; }
.track { height: 16px; }
.bar { height: 100%; min-width: 2px; border-radius: 0 3px 3px 0; background: var(--c-accent); cursor: pointer; transition: opacity 0.15s, width 0.25s; }
.bar.dim { opacity: 0.28; }
.bar:hover { opacity: 0.8; }
.hbars .val { font-size: var(--fs-small); font-variant-numeric: tabular-nums; color: var(--c-gray-dark); text-align: right; }
@media (max-width: 600px) {
  .hbars { grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr) 2em; column-gap: var(--space-100); }
  .hbars .lab { font-size: var(--fs-micro); line-height: 1.25; }
}

/* Themes over time — heatmap */
.hm { display: grid; grid-template-columns: max-content repeat(var(--years, 5), minmax(36px, 1fr)); gap: 2px; }
.hm .rowlab { font-size: var(--fs-small); display: flex; align-items: center; gap: var(--space-100); padding-right: var(--space-150); }
.hm .collab { font-size: var(--fs-micro); color: var(--c-gray-dark); text-align: center; font-variant-numeric: tabular-nums; padding-bottom: var(--space-050); }
.hm-cell {
  height: 30px; display: grid; place-items: center; cursor: pointer; border-radius: 3px;
  font-size: var(--fs-small); font-variant-numeric: tabular-nums; border: 1px solid transparent;
}
.hm-cell.zero { color: var(--c-muted); cursor: default; border-color: var(--c-border); }
.legend { display: flex; align-items: center; gap: var(--space-100); margin-top: var(--space-150); font-size: var(--fs-micro); color: var(--c-gray-dark); }
.legend .ramp { width: 120px; height: 8px; background: linear-gradient(90deg, rgb(231, 226, 253), var(--c-accent)); }
@media (max-width: 600px) {
  .hm { grid-template-columns: minmax(0, 9.5em) repeat(var(--years, 5), minmax(0, 1fr)); }
  .hm .rowlab { font-size: var(--fs-micro); line-height: 1.25; padding-right: var(--space-075); }
  .hm-cell { height: 28px; font-size: var(--fs-micro); }
}

/* ---- Filter row — the same control strip as
   llm-civic-discourse and grants-overview. Spans the full width; the wrap
   goes inside it, never around it. ---- */
.controls { background: var(--c-light-bg); padding-block: var(--space-250); }
.filter-row {
  display: flex; gap: var(--space-150); flex-wrap: wrap; align-items: center;
  /* Controls sit directly on the --c-light-bg strip — no inner white box. */
  background: none; border: 0; padding: 0;
}
.filter-row input[type="search"], .filter-row select {
  border: 1px solid var(--c-border); border-radius: var(--radius-control); background: var(--c-bg);
  color: var(--c-dark); font-family: var(--f-sans); font-size: var(--fs-small);
  padding: var(--space-100) var(--space-150); outline: none;
  max-width: 100%; text-overflow: ellipsis;
}
.filter-row input[type="search"] { flex: 1 1 220px; min-width: 180px; }
.filter-row select { flex: 0 1 auto; }
.filter-row input[type="search"]:focus, .filter-row select:focus { border-color: var(--c-red); }
/* Never leave the dropdown marker to the browser. */
.filter-row select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: var(--space-400); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2 5l5 5 5-5' stroke='%23df3611' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 13px;
}
.btn-plain {
  font-size: var(--fs-small); font-weight: 500;
  padding: var(--space-100) var(--space-200); border: 1px solid var(--c-border);
  background: transparent; color: var(--c-dark); cursor: pointer; border-radius: var(--radius-control);
  transition: color 0.15s, border-color 0.15s;
}
.btn-plain:hover { color: var(--c-red-dark); border-color: var(--c-red-dark); }
.btn-plain[disabled] { color: var(--c-muted); border-color: var(--c-border); cursor: default; }
.result-count { margin-left: auto; font-size: var(--fs-micro); color: var(--c-gray-dark); white-space: nowrap; }
/* Tablet and down: an even grid instead of a ragged wrap. */
@media (max-width: 1100px) {
  .filter-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .filter-row input[type="search"] { grid-column: 1 / -1; min-width: 0; }
  .filter-row select { width: 100%; }
  .btn-plain { justify-self: start; }
  .result-count { grid-column: 2 / -1; justify-self: end; margin-left: 0; }
}
@media (max-width: 600px) {
  .filter-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #f-theme, #f-fac { grid-column: 1 / -1; }
  .result-count { grid-column: 2; }
}

/* ---- Entry list ---- */
.entries-head {
  display: grid; grid-template-columns: 2fr 150px 84px 2.6fr; gap: var(--space-300);
  /* 1px extra each side = the entry card's border, so the labels sit over the columns */
  padding: var(--space-300) calc(var(--space-250) + 1px) var(--space-100);
  border-bottom: 1px solid var(--c-border);
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-gray-dark);
}
.entries-head + .entries { padding-top: var(--space-200); }
/* Per-cell labels: hidden visually while the header row is showing (still read
   by screen readers, since the header row is aria-hidden); shown above each
   value once the header row goes away under 1100px. */
.cell-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Names read as body text and turn --c-red-dark on hover (like a category 5
   linked heading: no underline, no arrow). */
.faculty-link { color: var(--c-dark); transition: color 0.15s; }
.faculty-link:hover { color: var(--c-red-dark); }
/* No bottom padding: the global footer's 132px white signal band is the gap
   before the footer on every page. */
.entries { padding-top: var(--space-300); padding-bottom: 0; display: flex; flex-direction: column; gap: var(--space-150); }

/* Sitewide card treatment (llm-civic-discourse .paper-row, team-leadership
   .person-card): fade-slide in, then lift with depth on hover. */
@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.entry { border: 1px solid var(--c-border); border-radius: var(--radius-card); background: var(--c-bg); transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s; }
.entries.is-entering .entry { animation: fadeSlideIn 0.3s ease both; }
/* Hover: the lift, plus a brand-purple border and a purple-tinted shadow, so
   the entry under the pointer stands out clearly from its neighbours. Hover
   only, not :focus-within: clicking an entry leaves focus on its toggle, and
   that kept the last-clicked entry highlighted after the pointer moved on.
   Keyboard users still get each button's own focus ring. */
.entry:hover {
  transform: translateY(-4px);
  border-color: var(--c-accent);
  box-shadow: 0 14px 30px rgba(85, 51, 238, 0.18);
}

.entry__top {
  display: grid; grid-template-columns: 2fr 150px 84px 2.6fr; gap: var(--space-300); align-items: start;
  padding: var(--space-250) var(--space-250) var(--space-150); cursor: pointer; text-align: left; width: 100%;
  background: none; border: 0; scroll-margin-top: var(--space-800);
}
.entry__top, .entry__top *, .entry__footer, .entry__footer * { min-width: 0; }

.entry__title { font-family: var(--f-serif); font-size: var(--fs-body); font-weight: 600; line-height: var(--lh-title); margin-bottom: var(--space-100); }
/* The "New" badge sits in its own column; the title wraps beside it, never under it. */
.entry__title { display: flex; align-items: baseline; gap: var(--space-100); }
.entry__title .badge-new { flex: none; margin-right: 0; }
.entry__title-text { flex: 1 1 auto; }
/* Category 5 — a heading that is itself a link. */
.entry__title a { color: var(--c-dark); transition: color 0.15s; }
.entry__title a:hover { color: var(--c-red-dark); }
/* Theme tags sit at the right end of the footer row, under the takeaway. */
.entry__themes { display: flex; gap: var(--space-075); flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.theme-badge { font-size: var(--fs-micro); font-weight: 500; padding: var(--space-025) var(--space-100); white-space: nowrap; border-radius: var(--radius-control); }
.badge-new {
  display: inline-block; margin-right: var(--space-100);
  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-025) var(--space-100); vertical-align: middle; border-radius: var(--radius-control);
}
.entry__meta { font-size: var(--fs-small); }
/* No orange "Key takeaway" label on each entry: the column header names it, and
   under 1100px it gets the same gray cell label as faculty and date. The
   takeaway is the entry's main read, so it runs at body size in the widest column. */
.entry__takeaway { font-size: var(--fs-body); font-weight: 300; line-height: var(--lh-body); color: var(--c-dark); }
/* Disclosure — the sitewide chevron, never the browser's own. */
.entry__toggle { display: inline-flex; align-items: center; gap: var(--space-075); font-size: var(--fs-small); color: var(--c-red-dark); }
.entry__toggle svg { transition: transform 0.25s; flex-shrink: 0; }
.entry.is-open .entry__toggle svg { transform: rotate(180deg); }

/* Footer — the last row of every entry: "Read paper", "Copy link" and the
   summary toggle on the left, theme tags on the right. When the entry is open
   the footer sits below the summary, so "Show less" is reachable without
   scrolling back up. */
.entry__footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-150) var(--space-300); padding: 0 var(--space-250) var(--space-250);
}
.entry.is-open .entry__footer { border-top: 1px solid var(--c-border); padding-top: var(--space-200); }
.entry__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-150) var(--space-300); }
.entry__toggle { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; transition: opacity 0.15s; }
.entry__toggle:hover { opacity: 0.7; }
/* Category 2 — independent link to a research paper: body colour, underline
   rule, thin arrow; text and rule turn --c-red-dark on hover. */
.link-independent {
  display: inline-flex; align-items: baseline; gap: var(--space-075);
  color: var(--c-dark); font-size: var(--fs-small); font-weight: 600;
  border-bottom: 1px solid rgba(13,13,12,0.35);
  transition: color 0.15s, border-color 0.15s;
}
.link-independent:hover { color: var(--c-red-dark); border-color: var(--c-red-dark); }
.copy-link {
  display: inline-flex; align-items: center; gap: var(--space-075);
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: var(--fs-small); font-weight: 500; color: var(--c-gray-dark);
  transition: color 0.15s;
}
.copy-link:hover { color: var(--c-red-dark); }
.copy-link.is-done { color: var(--c-dark); }

.entry__detail {
  /* Light gray so the open area reads as "inside" the entry and the white
     "Why is this important?" card stands off it. */
  background: var(--c-light-bg);
  border-top: 1px solid var(--c-border);
  padding: var(--space-300) var(--space-250) var(--space-300);
  display: flex; flex-direction: column; gap: var(--space-300);
}

/* Two columns when there's a "Why is this important?" panel: the overview on
   the left, the panel as a raised card on the right, topped with the brand
   gradient (--c-gradient stops, written out because this repo has no token). */
.entry__detail--aside {
  display: grid; gap: var(--space-300);
  /* --ov is set per entry from the two boxes' text lengths (overviewShare()
     in the script), so they come out close in height; stretch evens out
     the rest. */
  grid-template-columns: minmax(0, var(--ov, 1.7fr)) minmax(260px, 1fr);
  align-items: stretch;
}
.entry__detail--uneven { align-items: start; }
/* Three boxes in an open entry, all the same card shape: Overview on light
   purple, "Why is this important?" on white with the gradient top edge, Key
   findings on light orange. Text stays --c-dark in all three. */
.entry__keytake, .entry__overview, .entry__why, .entry__findings {
  position: relative; overflow: hidden;
  border: 1px solid var(--c-border); border-radius: var(--radius-card);
  box-shadow: 0 16px 40px rgba(13,13,12,0.10);
  padding: var(--space-300);
}
.entry__overview { background: var(--c-acc-1-tint); }
/* Key takeaway, featured: the first card in an open entry, full width, on the
   brand gradient. While the entry is open the takeaway leaves the top row, so
   it isn't shown twice. White text on the gradient's orange end is about
   3.9:1, so it is set large and semi-bold (WCAG "large text"). */
.entry__keytake {
  grid-column: 1 / -1;
  background: linear-gradient(150deg, #5533ee 0%, #df3611 81%);
  border-color: transparent; color: var(--c-white);
}
.entry__detail .entry__keytake h4 {
  font-size: var(--fs-body); font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; margin-bottom: var(--space-150); color: var(--c-white);
}
.entry__detail .entry__keytake p { font-size: var(--fs-lede); font-weight: 600; line-height: var(--lh-lede); color: var(--c-white); }
.entry.is-open .entry__takeaway-col { display: none; }
.entry__why { background: var(--c-white); }
.entry__findings { background: var(--c-pale-orange); }
.entry__why::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(150deg, #5533ee 0%, #df3611 81%);
}
@media (max-width: 900px) {
  .entry__detail--aside { grid-template-columns: minmax(0, 1fr); }
}
.entry__detail h4 { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-heading); margin-bottom: var(--space-150); }
/* The card headings (Overview, Why is this important?, Key findings /
   recommendations) use the Key takeaway heading's style: 16px, extra-bold (800),
   uppercase, tracked. Dark text on their light cards. */
.entry__detail .entry__overview > h4,
.entry__detail .entry__why > h4,
.entry__detail .entry__findings > h4 {
  font-family: var(--f-sans); font-size: var(--fs-body); font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; line-height: var(--lh-heading); margin-bottom: var(--space-150); color: var(--c-dark);
}
.entry__detail p { font-size: var(--fs-body); font-weight: 300; line-height: var(--lh-body); margin-bottom: var(--space-200); }
.entry__detail p:last-child { margin-bottom: 0; }
.entry__detail ol, .entry__detail ul { display: flex; flex-direction: column; gap: var(--space-150); padding-left: var(--space-300); margin-bottom: var(--space-200); }
/* Key findings — its own full-width section under the Overview / "Why is
   this important?" row; findings run in one numbered column. Numbers
   follow the sitewide ordinal style (grants, grants-rfp): "01", DM Sans 800,
   --c-red, baseline-aligned beside the text. */
.entry__findings { grid-column: 1 / -1; }
.entry__detail ol.findings {
  list-style: none; padding-left: 0; margin-bottom: 0;
  display: flex; flex-direction: column; gap: var(--space-250); max-width: 1000px;
}
.entry__detail ol.findings > li { display: flex; align-items: baseline; gap: var(--space-250); }
/* Ordinal numbers — the sitewide numbering system exactly as grants /
   grants-rfp define it: --f-sans, --fs-body, weight 800, --c-red (not
   --c-red-dark: numbers aren't clickable), min-width 24px, baseline-aligned
   on a flex row with a --space-250 gap (set on the li above). */
.finding__num {
  flex-shrink: 0; min-width: 24px;
  font-family: var(--f-sans); font-size: var(--fs-body); font-weight: 800; color: var(--c-red);
  line-height: inherit; font-variant-numeric: normal;
}
.finding__body { flex: 1 1 auto; min-width: 0; }
/* A list left inside the Overview (no findings lead-in) is one column. */
.entry__overview ol.findings { margin-bottom: var(--space-200); }
@media (max-width: 600px) { .entry__keytake, .entry__overview, .entry__why, .entry__findings { padding: var(--space-250) var(--space-200); } }

.entry__detail li { font-size: var(--fs-body); font-weight: 300; line-height: var(--lh-body); }
.entry__detail strong { font-weight: 600; }

.no-results { font-size: var(--fs-lede); font-weight: 300; color: var(--c-gray-dark); padding: var(--space-800) 0; text-align: center; }

@media (max-width: 1100px) {
  .entries-head { display: none; }
  .entries-head + .entries { padding-top: var(--space-300); }
  .cell-label {
    position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
    display: block; margin-bottom: var(--space-025);
    font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-gray-dark);
  }
  .entry__top {
    grid-template-columns: 1fr auto;
    grid-template-areas: "title title" "faculty date" "takeaway takeaway";
    gap: var(--space-150) var(--space-200);
  }
  .entry__title-col { grid-area: title; }
  .entry__faculty { grid-area: faculty; }
  .entry__date { grid-area: date; }
  .entry__takeaway-col { grid-area: takeaway; }
}
@media (max-width: 600px) {
  .entry__themes { justify-content: flex-start; margin-left: 0; }
  .entry__top { grid-template-columns: 1fr; grid-template-areas: "title" "faculty" "date" "takeaway"; gap: var(--space-100); padding-inline: var(--space-200); }
  .entry__footer { padding-inline: var(--space-200); }
  .entry__detail { padding-inline: var(--space-200); }
}

/* Chart tooltip */
#tip {
  position: fixed; pointer-events: none; z-index: 50; max-width: 260px;
  background: var(--c-dark); color: var(--c-white); font-size: var(--fs-micro); line-height: 1.4;
  padding: var(--space-075) var(--space-150); opacity: 0; transition: opacity 0.1s; border-radius: var(--radius-control);
}
#tip.on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .newsletter__cta, .entry, .entry__toggle svg, .glance__toggle svg, .bar { transition: none; }
  .newsletter__cta:hover, .entry:hover, .entry:focus-within { transform: none; }
  .entries.is-entering .entry { animation: none; }
}

/* ── 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; }