/* DESIGN TOKENS — Modernist foundations, followed by SIPA digital colors.
   SIPA source: https://www.sipa.columbia.edu/communications-and-external-relations/visual-identity-guide */
:root {
  /* Charcoal text and neutral surfaces; Columbia Blue accents the branding.
     Cyan is reserved for keyboard focus. */
  --color-bg: #ffffff;
  --color-accent: var(--sipa-columbia-blue);
  --color-text: var(--sipa-ink);
  --color-surface: #f3f2f2;
  --color-surface-hover: #eae9e9;
  --color-divider: rgb(51 51 51 / 32%);
  --color-minor-rule: rgb(51 51 51 / 18%);
  --color-link-hover: var(--sipa-dark-azul);
  --color-footer-link-hover: var(--sipa-columbia-blue);
  --hero-background: #061217;
  /* Shift slightly farther left in narrow desktop windows to leave the face clear. */
  --hero-subject-position: min(25vw, calc(50vw - 240px));
  --hero-face-clearance: 220px;
  --hero-fade-start: calc(var(--hero-subject-position) + var(--hero-face-clearance));
  --hero-fade-edge-inset: 24px;
  --hero-subject-anchor: 38%;
  --color-secondary-kicker: rgb(51 51 51 / 65%);
  --sipa-columbia-blue: #b9d9eb;
  --sipa-sky: #74c7ea;
  --sipa-azul: #2494c2;
  --sipa-dark-azul: #1a85b1;
  --sipa-navy: #201d5d;
  --sipa-ink: #333333;
  --sipa-charcoal: #494949;
  --sipa-khaki: #d7d6c9;
  --sipa-sand: #f0efe8;
  --sipa-white: #ffffff;
  --sipa-tangerine: #ffa531;
  --sipa-persimmon: #eb6134;
  --sipa-focus: #00b5e2;
  --sipa-red: #d50032;
  /* SIPA's university cookie-notice colors. */
  --cookie-background: #444444;
  --cookie-button: #c0cd3f;
  /* Charcoal keeps small kickers readable without adding another accent. */
  --color-primary-kicker: var(--color-text);
  --font-body: "Inter", Helvetica, Arial, sans-serif;
  --font-statement: "Inter", Helvetica, Arial, sans-serif;
  --font-hero: "Inter", Helvetica, Arial, sans-serif;
  --nav-font-size: calc(0.875rem + 4pt);
  --area-nav-font-size: calc(0.875rem + 2pt);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-section: clamp(40px, 6vw, 72px);
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  /* Small radii soften navigation, filters, and research cards. */
  --radius-control: 6px;
  --radius-card: 6px;
  --content-width: 1200px;
  --page-gutter: clamp(20px, 4vw, 48px);
}

/* LOCAL TYPE — works from file:// and without an internet connection.
   Small Latin subsets preserve accented names, punctuation, and all weights.
   Extended Latin loads only when needed; other scripts use the fallback font.
   Source: rsms.me/inter. License: assets/fonts/Inter-LICENSE.txt. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/InterVariable-latin.woff2") format("woff2");
  unicode-range: U+0020-00FF, U+2000-206F, U+20A0-20CF, U+2100-214F, U+2190-21FF, U+2212;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/InterVariable-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0300-036F, U+1E00-1EFF;
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/InterVariable-Italic-latin.woff2") format("woff2");
  unicode-range: U+0020-00FF, U+2000-206F, U+20A0-20CF, U+2100-214F, U+2190-21FF, U+2212;
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/InterVariable-Italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0300-036F, U+1E00-1EFF;
}

/* BASE AND ACCESSIBILITY */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font: 400 16px / 1.6 var(--font-body);
  font-optical-sizing: auto;
}
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { line-height: 1.12; }
h1 { font-size: clamp(46px, 6vw, 76px); letter-spacing: -0.035em; }
h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 800; letter-spacing: -0.025em; }
h3 { font-size: 24px; }
a { color: inherit; text-underline-offset: 5px; }
a:hover { color: var(--color-link-hover); text-decoration: none; }
button, input { font: inherit; border-radius: var(--radius-sm); }
button { cursor: pointer; }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--sipa-focus); outline-offset: 4px; }
::selection { background: var(--sipa-columbia-blue); color: var(--color-text); }
.container {
  width: min(var(--content-width), calc(100% - var(--page-gutter) * 2));
  margin-inline: auto;
}
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--page-gutter);
  z-index: 10;
  padding: 12px 20px;
  background: var(--sipa-columbia-blue);
}
.skip-link:focus { top: 12px; }
.statement { font-family: var(--font-statement); font-weight: 400; }
.kicker {
  font-size: 13px;
  line-height: 1.5;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary-kicker);
}
.section { padding-block: var(--space-section); border-top: 2px solid var(--color-text); }
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  margin-bottom: 32px;
}
.text-link { display: inline-block; padding-block: 10px; font-size: 18px; font-weight: 600; }

/* HEADER — repeated HTML on every page */
.university-bar { background: var(--sipa-navy); color: var(--sipa-white); }
.university-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 72px;
  padding-block: 18px;
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: 0;
}
.university-links a { text-decoration: none; }
.university-links a:hover { color: var(--sipa-columbia-blue); }
.university-logo-link { flex: 0 0 auto; }
.university-logo { width: 220px; }
/* Match the optical center of the SVG lettering, below its crown. */
.university-links { display: flex; align-items: center; gap: 16px; min-width: 0; transform: translateY(3px); }
.main-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 28px;
  min-height: 100px;
  padding-block: 24px;
}
.wordmark { text-decoration: none; font-size: calc(22px + 2pt); font-weight: 500; line-height: 1.25; letter-spacing: -0.025em; }
.menu-toggle { display: none; }
.nav-links { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; list-style: none; padding: 0; margin: 0; }
.nav-links a { display: block; padding: 8px; border-radius: var(--radius-control); font-size: var(--nav-font-size); font-weight: 600; text-decoration: none; }
.research-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.area-nav { display: flex; flex-wrap: wrap; gap: 4px 6px; list-style: none; padding: 8px; margin: 0; border-radius: var(--radius-control); background: var(--color-surface); }
/* Faint decorative separators stay in the gap between research-area links. */
.area-nav li { position: relative; }
.area-nav li + li::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 1em;
  background: rgb(51 51 51 / 18%);
  pointer-events: none;
}
.area-nav a { font-weight: 400; font-size: var(--area-nav-font-size); }
.nav-links a[aria-current="page"], .nav-links a[aria-current="location"] { color: var(--color-text); text-decoration: underline; text-decoration-thickness: 2px; }
.nav-links a:hover, .nav-links a:focus-visible { background: var(--color-accent); color: var(--color-text); text-decoration: none; }

/* CROSSED-BOX IMAGE PLACEHOLDERS — replace a div with an img, keeping its size class */
.ph {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--color-divider);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 13px;
  text-align: center;
}
.ph::before, .ph::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top right, transparent calc(50% - 0.5px), var(--color-minor-rule) 50%, transparent calc(50% + 0.5px));
}
.ph::after { transform: scaleX(-1); }
.ph span { padding: 6px 12px; background: var(--color-surface); }

/* HOMEPAGE HERO */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* White beneath the fading image, with dark backing to its left. The
     background change is concealed by the still-opaque part of the image. */
  background: linear-gradient(90deg, var(--hero-background) var(--hero-fade-start), var(--color-bg) var(--hero-fade-start));
}
/* The child sits 38% across the supplied image. Anchor that point at 25%
   of the hero width, in the left half; text sits over the right-hand fade. */
.hero-image {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--hero-subject-position);
  z-index: -2;
  width: auto;
  max-width: none;
  height: 100%;
  transform: translateX(calc(-1 * var(--hero-subject-anchor)));
  /* Fade across the image's remaining visible width. Finish just before its
     edge, or the viewport edge when the image extends beyond the screen. */
  mask-image: linear-gradient(
    90deg,
    #000 calc(var(--hero-subject-anchor) + var(--hero-face-clearance)),
    transparent min(
      calc(100% - var(--hero-fade-edge-inset)),
      calc(100vw - var(--hero-subject-position) + var(--hero-subject-anchor) - var(--hero-fade-edge-inset))
    )
  );
}
/* Gently lighten the text column for contrast. The image mask above supplies
   the longer transition to completely solid white at the image's edge. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgb(255 255 255 / 0%) var(--hero-fade-start),
    rgb(255 255 255 / 65%) min(50%, calc(var(--hero-fade-start) + 160px)),
    rgb(255 255 255 / 65%) 100%
  );
}
.hero-inner { display: grid; grid-template-columns: 1fr 1fr; min-height: 600px; }
.hero-copy { grid-column: 2; display: flex; flex-direction: column; justify-content: center; padding-block: 64px; }
/* A single line at every size; scale down on narrow screens instead of wrapping. */
.hero h1 { font-family: var(--font-hero); font-weight: 400; font-size: clamp(28px, 5.1vw, 65px); line-height: 1.05; letter-spacing: -0.055em; white-space: nowrap; }
.hero .standfirst { margin-top: 32px; max-width: 36ch; font-size: clamp(22px, 2vw, 26px); line-height: 1.45; }

/* HOMEPAGE AREA ROWS */
/* No rules surround the area rows or the start of featured work. */
.areas + .section { border-top: 0; }
.areas > h2 { margin-block: 32px 12px; }
.area-row {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) 24px;
  gap: 24px;
  align-items: center;
  /* Extend the background beyond the content edges; use equal inset on all sides. */
  margin-inline: -16px;
  padding: 32px;
  background: var(--color-surface);
  border-radius: var(--radius-card);
  text-decoration: none;
}
.area-row + .area-row { margin-top: 12px; }
.area-row h3 { font-family: var(--font-statement); font-size: clamp(34px, 4vw, 50px); font-weight: 300; letter-spacing: -0.035em; }
.area-row p { font-size: clamp(20px, 1.8vw, 23px); line-height: 1.5; }
/* Keep each Measurement question on its own line without changing the row link. */
.area-questions { display: grid; gap: 4px; }
.area-row .arrow { font-size: 25px; }
.area-row:hover, .area-row:focus-visible {
  background: var(--color-accent);
  color: var(--color-text);
  text-decoration: none;
}

/* RESEARCH CARDS */
.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.research-card { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-card); background: var(--color-surface); }
.research-card.research-clickable:hover, .research-card:focus-within { background: var(--color-surface-hover); }
/* Stretch the real title link over the whole card/row. Native keyboard,
   new-tab, and context-menu link behavior work without click handlers. */
.research-clickable { position: relative; cursor: pointer; }
.research-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-card); }
.research-clickable:hover .research-link,
.research-clickable:focus-within .research-link { color: var(--color-link-hover); text-decoration: none; }
.research-link:focus-visible { outline: none; }
.research-link:focus-visible::after { outline: 3px solid var(--sipa-focus); outline-offset: 4px; }
.research-card-content { display: flex; flex-direction: column; flex: 1; }
.research-card .research-title { font-family: var(--font-statement); font-size: clamp(26px, 3vw, 34px); font-weight: 400; line-height: 1.2; margin-block: 0 16px; }
.research-title a, .news-row h2 a { text-decoration: none; }
.research-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 12px; font-size: 14px; line-height: 1.6; color: var(--color-text); }
.research-authors { flex-basis: 100%; }
.research-type { display: inline-block; background: var(--color-surface-hover); padding: 2px 8px; font-size: 12px; font-weight: 600; }
.research-venue-inline { font-size: 12px; font-weight: 700; }
.research-detail, .research-areas { color: var(--sipa-charcoal); }
.research-blurb { margin-top: 16px; font-size: 16px; line-height: 1.6; max-width: 70ch; }
.research-link-pending { margin-top: 16px; font-size: 13px; color: var(--sipa-charcoal); }

/* FEATURED WORK — publication names sit immediately before the type tag. */
.featured-card { padding: clamp(28px, 3.5vw, 44px); }
.featured-card h3 { font-size: clamp(26px, 2.7vw, 36px); line-height: 1.25; }
.featured-card .research-meta { padding-top: 8px; }
.featured-card .research-type { background: var(--sipa-white); }

/* NEWS AND NEWSLETTER BAND */
.update-band { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.news-teasers { list-style: none; padding: 0; margin: 24px 0 0; }
.news-teasers li { padding-block: 15px; border-top: 1px solid var(--color-minor-rule); }
.news-teasers a { text-decoration: none; }
.newsletter > p { margin-block: 16px 24px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 24px; border: 1px solid var(--color-text); background: transparent; color: var(--color-text); text-decoration: none; font-size: 16px; font-weight: 600; }
.button-primary { background: var(--color-text); color: var(--color-bg); }
.button:hover { background: var(--color-accent); border-color: var(--color-text); color: var(--color-text); text-decoration: none; }
.research-button { background: var(--color-text); color: var(--sipa-white); font-size: 18px; }
.button:disabled { cursor: default; opacity: 0.5; }

/* AREA PAGES */
/* Full-width title bands retain the same content alignment as the page below. */
.page-intro { padding-block: 56px 48px; background: var(--color-surface); }
/* The first content section follows the title band without a separating rule. */
.page-content > .section:first-child,
.page-content > .filters:first-child,
.page-content > .news-list:first-child { border-top: 0; }
.measurement-plan + .section { border-top: 0; }
.page-intro p:not(.kicker) { max-width: 760px; font-size: 18px; margin-top: 24px; }
.page-intro .statement { font-weight: 300; }
.question { margin-top: 64px; }
.question:first-of-type { margin-top: 32px; }
.question-heading { margin-bottom: 16px; }
/* Headings and summaries share the full width of the research grid below. */
.question-heading h3 {
  font-family: var(--font-statement);
  font-size: clamp(26px, 2.5vw, 32px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--color-text);
}
/* Editable findings sit above the cards with matching left and right edges.
   Pretty wrapping avoids a lone word on the final line where supported. */
.question-summary {
  display: grid;
  gap: 22px;
  margin: 0 0 28px;
  font-size: 18px;
  line-height: 1.6;
  text-wrap: pretty;
}
.summary-part h4 { margin-bottom: 6px; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; }
/* Research titles sit one step below the question heading in the hierarchy. */
.question .card-grid { gap: 28px 32px; }
.question .research-card .research-title { font-size: clamp(22px, 2vw, 26px); line-height: 1.3; margin-bottom: 12px; }
.area-index-link { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; padding-block: 32px; border-top: 1px solid var(--color-minor-rule); }

/* RESEARCH INDEX FILTERS AND LISTS */
.research-area-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.research-area-links a { display: inline-flex; justify-content: space-between; align-items: center; gap: 28px; padding: 12px 20px; min-height: 48px; background: var(--sipa-white); border: 1px solid var(--color-divider); font-size: 18px; font-weight: 600; text-decoration: none; }
.research-area-links a:hover { background: var(--color-text); color: var(--sipa-white); }
.filters { padding-block: 24px 32px; border-top: 2px solid var(--color-text); border-bottom: 1px solid var(--color-minor-rule); }
.filter-intro { margin-bottom: 24px; font-size: 18px; }
.filter-row { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px; }
.filter-row + .filter-row { margin-top: 20px; }
.filter-label { flex: 0 0 125px; padding-top: 9px; font-size: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; border: 1px solid var(--color-minor-rule); border-radius: var(--radius-control); padding: 8px 16px; background: var(--color-surface); color: var(--color-text); font-size: 15px; }
.chip:hover { background: var(--color-accent); border-color: var(--color-text); }
.chip[aria-pressed="true"] { background: var(--color-text); border-color: var(--color-text); color: var(--sipa-white); }
.chip[aria-pressed="true"]:hover { box-shadow: inset 0 0 0 2px var(--color-accent); }
.research-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 32px; border-radius: var(--radius-card); border-bottom: 1px solid var(--color-minor-rule); }
.research-row h2 { margin-block: 0 14px; font-family: var(--font-statement); font-size: clamp(25px, 3vw, 34px); font-weight: 400; letter-spacing: -0.015em; line-height: 1.2; }
.research-row.research-clickable:hover, .research-row:focus-within { background: var(--color-surface); }
.pagination { display: flex; justify-content: space-between; align-items: center; padding-block: 32px 56px; gap: 20px; }
.result-count { font-size: 14px; }
.result-count-top { margin-block: 20px 8px; }
.empty-state { padding-block: 40px; }

/* ABOUT AND PEOPLE */
.about-image { width: 100%; aspect-ratio: 3 / 1; object-fit: cover; margin-block: 40px var(--space-section); }
.people-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 32px; }
.person-photo { width: 160px; height: 160px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; overflow: hidden; }
.person-initials { display: grid; place-items: center; background: var(--color-surface); color: var(--sipa-charcoal); font-size: 36px; font-weight: 500; letter-spacing: -0.025em; }
/* Center the portrait and readable text as a single profile. */
.person-card { text-align: center; padding-inline: 12px; }
.person-card .person-photo { margin-inline: auto; }
.person-card h3 { font-size: 22px; font-weight: 600; line-height: 1.3; margin-block: 20px 8px; letter-spacing: -0.015em; }
.person-card h3 a { text-decoration: none; }
.person-card p { max-width: 34ch; margin-inline: auto; font-size: 15px; line-height: 1.6; text-wrap: balance; color: var(--sipa-charcoal); }
/* About uses spacing to separate sections, with no horizontal rules. */
body[data-page="about"] .section,
body[data-page="about"] .affiliate-list li { border-top: 0; }
.affiliate-list { margin: 24px 0 0; padding: 0; list-style: none; }
.affiliate-list li { padding-block: 16px; border-top: 1px solid var(--color-minor-rule); }

/* NEWS PAGE — same editorial rhythm as the research list */
.news-list { border-top: 2px solid var(--color-text); padding-bottom: 56px; }
.news-row { display: grid; grid-template-columns: 168px 1fr; gap: 32px; padding-block: 32px; border-bottom: 1px solid var(--color-minor-rule); }
.news-date { font-size: 14px; padding-top: 3px; }
.news-row h2 { font-family: var(--font-statement); font-size: 34px; font-weight: 400; margin-block: 10px 14px; }

/* FOOTER — repeated HTML on every page */
.site-footer { background: var(--sipa-navy); color: var(--sipa-white); padding-block: 56px; }
.footer-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.footer-brand, .footer-nav { padding-top: 0; }
.footer-brand-link { display: block; width: 520px; max-width: 100%; }
.cdep-logo { width: 100%; }
.footer-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.footer-heading { margin: 0 0 20px; padding-top: 0; line-height: 1; color: var(--sipa-columbia-blue); }
.footer-links { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; font-size: 16px; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: var(--color-footer-link-hover); }

/* UNIVERSITY POLICY ROW — repeated plain HTML at the bottom of each footer. */
.footer-legal { display: flex; align-items: baseline; flex-wrap: wrap; gap: 16px 32px; margin-top: 48px; font-size: 12px; line-height: 1.6; }
.footer-policy-links { display: flex; flex-wrap: wrap; gap: 12px 24px; list-style: none; padding: 0; margin: 0; }
.footer-legal a { text-decoration: none; }
.footer-legal a:hover { color: var(--color-footer-link-hover); text-decoration: underline; }

/* COLUMBIA / SIPA COOKIE NOTICE — standard component selectors and layout.
   Source: www.sipa.columbia.edu/themes/custom/columbiasipa/dist/css/style.css
   Explicit bottom/left/right and colors avoid shorthand/inheritance differences.
   Long notices remain scrollable on short screens; dismissal is immediate. */
#cu-privacy-notice {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  margin: auto;
  padding: 20px 30px;
  max-height: 100%;
  max-height: calc(100% - 16px);
  overflow-y: auto;
  background: #444444;
  background: var(--cookie-background, #444444);
  color: #ffffff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 19px;
  line-height: 1.42857;
}
#cu-privacy-notice[hidden] { display: none !important; }
#cu-privacy-notice.full-width { width: 100%; }
#cu-privacy-notice-text { min-width: 0; color: #ffffff; }
#cu-privacy-notice a {
  color: #ffffff;
  font-weight: 700;
  text-decoration: underline;
}
#cu-privacy-notice .cu-privacy-notice-close {
  display: block;
  margin: 15px auto 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #000000;
  font: inherit;
  cursor: pointer;
}
#cu-privacy-notice-button {
  display: block;
  padding: 15px 30px;
  background: #c0cd3f;
  background: var(--cookie-button, #c0cd3f);
  color: #000000;
  font-size: 19px;
  font-weight: 700;
  white-space: nowrap;
}
#cu-privacy-notice a:hover { color: #b9d9eb; }
#cu-privacy-notice .cu-privacy-notice-close:hover #cu-privacy-notice-button { background: #ffffff; }
#cu-privacy-notice a:focus,
#cu-privacy-notice .cu-privacy-notice-close:focus {
  outline: 3px solid #00b5e2;
  outline-offset: 4px;
}
#cu-privacy-notice .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
@media (min-width: 768px) {
  #cu-privacy-notice-wrapper { display: flex; align-items: center; }
  #cu-privacy-notice-text { flex: 1; }
  #cu-privacy-notice .cu-privacy-notice-close { flex-shrink: 0; margin: 0; }
  #cu-privacy-notice-button { margin-left: 60px; }
}
@media (max-width: 719px) {
  .footer-legal { font-size: 13px; }
  .footer-policy-links { flex-direction: column; }
}

/* COMPACT HEADER — a disclosure menu keeps content close on phones/tablets. */
@media (max-width: 1279px) {
  .main-nav { min-height: 80px; padding-block: 16px; gap: 12px; }
  .wordmark { flex: 1; max-width: 420px; font-size: calc(20px + 2pt); }
  .menu-toggle {
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 88px;
    min-height: 44px;
    padding: 8px;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 15px;
    font-weight: 600;
  }
  .menu-toggle:hover { background: var(--color-accent); border-color: var(--color-text); }
  .js .menu-toggle { display: inline-flex; }
  .nav-links { width: 100%; align-items: stretch; gap: 8px; padding-block: 16px 4px; }
  .js .nav-links { display: none; }
  .js .nav-links.is-open { display: flex; }
  .research-nav { width: 100%; display: block; }
  .nav-links a { min-height: 44px; padding: 12px; }
  .research-nav > a { width: fit-content; }
  .area-nav { margin: 4px 0 8px 12px; gap: 4px; }
  .area-nav li + li::before { left: -2px; }
  .area-nav a { font-size: 16px; }
}

/* Small laptops retain the desktop wordmark size beside the compact menu. */
@media (min-width: 1000px) and (max-width: 1279px) {
  .wordmark { max-width: none; font-size: calc(22px + 2pt); }
}

/* MOBILE AND NARROW WINDOWS — grids stack below 720px */
@media (max-width: 719px) {
  .university-inner { flex-direction: column; align-items: flex-start; gap: 8px; padding-block: 12px; font-size: 14px; }
  .university-logo { width: 200px; }
  .university-links > span { display: none; }
  .university-links { transform: none; }
  .wordmark { font-size: calc(18px + 2pt); max-width: 245px; }
  /* Stack image and text on mobile, keeping the face free of any overlay. */
  .hero { background: var(--color-bg); }
  .hero::before { display: none; }
  .hero-image {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    z-index: auto;
    width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: 35% center;
    transform: none;
    mask-image: none;
  }
  .hero-inner { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { grid-column: 1; padding-block: 32px; }
  .hero h1 { font-size: clamp(32px, 9.5vw, 48px); }
  .area-row { grid-template-columns: 1fr 24px; gap: 10px 16px; margin-inline: -12px; padding: 28px; }
  .area-row p { grid-column: 1; }
  .area-row .arrow { grid-column: 2; grid-row: 1; }
  .card-grid, .people-grid, .update-band, .footer-inner { grid-template-columns: 1fr; }
  .update-band, .footer-inner { gap: 40px; }
  .section-heading { flex-wrap: wrap; gap: 16px; }
  .page-intro { padding-block: 40px; }
  .question { margin-top: 48px; }
  .research-row, .news-row { grid-template-columns: 1fr; gap: 20px; }
  .research-row { padding: 24px; }
  .research-area-links { display: grid; grid-template-columns: 1fr; }
  .about-image { aspect-ratio: 4 / 3; margin-top: 28px; }
  .person-photo { width: 128px; height: 128px; }
  .pagination { flex-wrap: wrap; }
}

/* NARROW PHONES — leave room for the larger wordmark beside the menu button. */
@media (max-width: 359px) {
  .main-nav { gap: 8px; }
  .menu-toggle { min-width: 64px; padding: 6px; gap: 4px; font-size: 14px; }
}

/* PRINT */
@media print {
  .university-bar, .skip-link, .menu-toggle, .filters, .pagination, #cu-privacy-notice { display: none !important; }
  body { padding-bottom: 0 !important; }
  .js .nav-links { display: flex; }
  .container { width: 100%; }
  a { text-decoration: none; }
}

/* FROM THE RESEARCH — open editorial columns, with numbers in the prose. */
.research-strip { padding-block: 48px 24px; }
.research-strip > h2 { font-size: 22px; font-weight: 600; margin-bottom: 28px; }
.research-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.research-note h3 { font-family: var(--font-statement); font-size: 26px; font-weight: 400; line-height: 1.25; letter-spacing: -0.02em; text-wrap: balance; }
.research-note p { margin-block: 16px; font-size: 17px; line-height: 1.6; text-wrap: pretty; }
.research-note-link { display: inline-block; font-size: 15px; font-weight: 600; text-decoration: none; }
/* The reading link covers its entire note, retaining native link behavior. */
.research-note:hover h3, .research-note:focus-within h3 { color: var(--color-link-hover); }

/* SECTION INTRODUCTIONS */
.section-lead { margin-top: 20px; font-size: 18px; line-height: 1.6; }

/* RESEARCH GEOGRAPHY — study settings and geographic scope appear as text tags. */
.research-locations { margin-top: 18px; font-size: 12px; font-weight: 600; color: var(--sipa-charcoal); }
.filter-row .chips { flex: 1; }

/* PARTNERS AND COLLABORATION */
.partner-list { display: flex; flex-wrap: wrap; gap: 16px; list-style: none; margin: 28px 0 0; padding: 0; }
.partner-list a { display: block; padding: 16px 24px; background: var(--color-surface); border-radius: var(--radius-card); font-size: 20px; font-weight: 600; text-decoration: none; }
.partner-list a:hover { background: var(--color-surface-hover); }
.pathway-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.pathway { display: flex; flex-direction: column; align-items: flex-start; padding: 28px; background: var(--color-surface); border-radius: var(--radius-card); }
.pathway h3 { font-size: 23px; line-height: 1.25; }
.pathway p { margin-block: 18px 24px; }
.pathway a { margin-top: auto; }
.ethics-note > p + p { margin-top: 20px; }

/* NEWS SOURCE AND HOMEPAGE TEASERS */
.news-teaser-meta { font-size: 12px; color: var(--sipa-charcoal); margin-bottom: 6px; }
.news-all { display: inline-block; margin-top: 20px; }

/* NEW COMPONENTS ON PHONES — short readable stacks without horizontal scrolling. */
@media (max-width: 999px) {
  .pathway-grid { grid-template-columns: 1fr; }

}
@media (max-width: 719px) {
  .research-notes { grid-template-columns: 1fr; gap: 32px; }
  .research-strip { padding-top: 32px; }
  .research-note h3 { font-size: 24px; }
  .filter-label { flex-basis: 100%; padding-top: 0; }
  .pathway { padding: 24px; }
}