/* ============================================================
   CU System — Innovation & Impact Report microsite
   Brand colors per cu.edu/brand-and-identity-guidelines:
     CU Gold       #CFB87C
     Black         #000000
     CU Dark Gray  #565A5C
     CU Light Gray #A2A4A3
   Typography: Inter (sans) / EB Garamond (serif); see --font-sans/--font-serif
   ============================================================ */

:root {
  --cu-gold: #CFB87C;
  --cu-black: #000000;
  --cu-dark-gray: #565A5C;
  --cu-light-gray: #A2A4A3;
  --cu-white: #FFFFFF;
  --cu-off-white: #FAFAF8;
  /* Darkened gold that meets 4.5:1 on white, for gold-colored TEXT.
     The lighter --cu-gold stays for borders/dots/fills (non-text). */
  --cu-gold-ink: #8A6D2F;

  --font-sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "EB Garamond", "Times New Roman", Georgia, serif;

  --max-width: 1140px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-space: clamp(3.5rem, 8vw, 7rem);
  --header-h: 70px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--cu-black);
  background: var(--cu-white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

/* Uniform hyperlink style: black text with a gold underline. Chrome/buttons
   (nav, wordmark, skip link, CTA, story/back links) opt out with
   text-decoration:none below; on dark backgrounds the hero/footer keep their
   own text color but inherit the gold underline. */
a {
  color: var(--cu-black);
  text-decoration: underline;
  text-decoration-color: var(--cu-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.16em;
  transition: text-decoration-color 0.15s ease;
}
a:hover { text-decoration-color: var(--cu-gold-ink); }

/* High-contrast focus ring. A dark outline clears WCAG 1.4.11/2.4.11 on the
   light body; dark sections (hero, footer) switch to gold, which is high
   contrast on their near-black backgrounds. */
:focus-visible {
  outline: 3px solid var(--cu-black);
  outline-offset: 2px;
  border-radius: 1px;
}
.hero :focus-visible,
.cu-footer :focus-visible {
  outline-color: var(--cu-gold);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--cu-black);
  color: var(--cu-white);
  padding: 0.75em 1.25em;
  font-size: 0.9rem;
  text-decoration: none;
}
.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Editable placeholder convention ----------
   Any copy the report owner still needs to fill in is wrapped
   in [data-fill]. It renders as plain black text with a dashed
   outline + label so it's obvious what to replace, but prints
   cleanly once the brackets/labels are deleted. */
[data-fill] {
  display: block;
  color: var(--cu-black);
  border: 1px dashed var(--cu-light-gray);
  background: var(--cu-off-white);
  padding: 0.6em 0.8em;
  border-radius: 2px;
}
[data-fill]::before {
  content: attr(data-fill);
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cu-black);
  margin-bottom: 0.35em;
}

/* ---------- Top utility bar (CU System, mirrors cu.edu) ---------- */
.util-bar {
  background: var(--cu-black);
  color: #fff;
}
.util-bar .wrap {
  display: flex;
  justify-content: flex-end;
}
.util-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
}
.util-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #e6e6e6;
  text-decoration: none;
  transition: color 0.18s ease;
}
.util-nav a:hover {
  color: var(--cu-gold);
  text-decoration: underline;
}

/* ---------- Site header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 50px;
  padding: 1.1rem 0;
  background: var(--cu-white);
  border-bottom: 1px solid #E8E5E0;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.site-header .wordmark {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}
.seal-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin-right: 0.65rem;
  border-radius: 50%;
  border: 1.5px solid var(--cu-black);
  outline: 1px solid var(--cu-gold);
  outline-offset: -4px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0;
  text-transform: none;
}
.site-header .wordmark-sub {
  color: var(--cu-black);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  margin-left: 0.5em;
}
/* Compact wordmark shown only on phones (see the max-width: 480px query). */
.wordmark-mobile {
  display: none;
  text-transform: none;
}
.site-nav {
  display: flex;
  gap: 0.15rem;
  flex-wrap: wrap;
}
.site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.6rem;
  border-radius: 5px;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  color: #333;
  letter-spacing: 0.01em;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.site-nav a:hover {
  background: #f0f0f0;
  color: #000;
}
.site-nav a.active {
  background: rgba(207, 184, 124, 0.35);
  color: #000;
  font-weight: 600;
}

/* Hamburger toggle — hidden on desktop, shown on small screens (see media query). */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.45rem;
  background: none;
  border: 1px solid #DAD7D0;
  border-radius: 6px;
  padding: 0.45rem 0.7rem;
  cursor: pointer;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  color: #333;
  line-height: 1;
}
.nav-toggle:hover { background: #f0f0f0; color: #000; }
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.2s ease, top 0.2s ease, background-color 0.2s ease;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before { position: absolute; top: -6px; left: 0; }
.nav-toggle-bars::after { position: absolute; top: 6px; left: 0; }
/* Morph into an X when the menu is open. */
.site-header.nav-open .nav-toggle-bars { background: transparent; }
.site-header.nav-open .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
.site-header.nav-open .nav-toggle-bars::after { top: 0; transform: rotate(-45deg); }

/* ---------- Section scaffolding ---------- */
section[id] {
  scroll-margin-top: var(--header-h);
}
section {
  padding: var(--section-space) 0;
}
section + section {
  border-top: 1px solid #E8E5E0;
}
.section-label {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cu-black);
  margin-bottom: 0.9rem;
}
.section-label::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--cu-gold);
  border-radius: 50%;
  margin-right: 0.55em;
  vertical-align: middle;
}
h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.2rem; }
.lede {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--cu-black);
  max-width: 48em;
  margin-top: 0.5rem;
  text-wrap: pretty;
}

/* ---------- Hero ---------- */
.hero {
  background: var(--cu-black);
  color: var(--cu-white);
  padding: clamp(4rem, 10vw, 8rem) 0 clamp(4rem, 10vw, 7rem);
  position: relative;
  overflow: hidden;
}
/* Decorative gold dots (top-right cluster, like Anschutz report) */
.hero::after {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  border: 1px solid rgba(207,184,124,0.18);
  box-shadow:
    0 0 0 40px rgba(207,184,124,0.06),
    0 0 0 80px rgba(207,184,124,0.04),
    0 0 0 130px rgba(207,184,124,0.02);
  pointer-events: none;
}
.hero a { color: var(--cu-white); }

.seal-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 1.5px solid rgba(207,184,124,0.6);
  outline: 1px solid rgba(207,184,124,0.25);
  outline-offset: -8px;
  text-align: center;
  margin-bottom: 2rem;
  font-family: var(--font-serif);
}
.seal-top, .seal-bottom {
  font-size: 0.48rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.3;
  padding: 0 0.8rem;
  color: var(--cu-gold);
}
.seal-year {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0.1rem 0;
  color: var(--cu-white);
}
.hero h1 {
  color: var(--cu-white);
  max-width: 20ch;
}
.hero-intro {
  font-size: 1.15rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.82);
  max-width: 48em;
  margin-top: 1.75rem;
}
.hero-credit {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.6);
  max-width: 48em;
  margin-top: 1.25rem;
  font-style: italic;
}
.hero [data-fill] {
  font-size: 1.15rem;
  margin-top: 1.75rem;
  max-width: 48em;
  background: rgba(255,255,255,0.06);
  border-color: rgba(207,184,124,0.3);
  color: rgba(255,255,255,0.85);
}
.hero [data-fill]::before {
  color: var(--cu-gold);
}

/* ---------- Stats ---------- */
#impact {
  background: #F5F3EE;
}
.stat-group {
  margin-top: 3rem;
}
.stat-group:first-child {
  margin-top: 1.5rem;
}
.stat-group + .stat-group {
  padding-top: 3rem;
  border-top: 1px solid #DDD9D0;
}
.stat-group-heading {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
}
.stat-group-intro {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--cu-black);
  max-width: 52em;
  margin: 0 0 2rem;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #DDD9D0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.stat-group-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.5rem;
  padding: 0.7rem 1.4rem;
  background: var(--cu-black);
  color: var(--cu-white);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid var(--cu-black);
  border-radius: 2px;
  transition: background 0.15s ease, color 0.15s ease;
}
.stat-group-cta::after {
  content: "\2197";
  font-size: 0.95em;
}
.stat-group-cta:hover,
.stat-group-cta:focus-visible {
  background: var(--cu-gold);
  color: var(--cu-black);
  border-color: var(--cu-gold);
}
/* Education group has 4 stats — 2x2 reads better */
#stat-group-education .stats-grid {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 640px) {
  .stats-grid,
  #stat-group-education .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 400px) {
  .stats-grid,
  #stat-group-education .stats-grid {
    grid-template-columns: 1fr;
  }
}
.stat-card {
  background: #F5F3EE;
  padding: 2rem 1.75rem 1.75rem;
  border-top: 3px solid var(--cu-gold);
}
.stat-number {
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 4.5vw, 3.6rem);
  font-weight: 700;
  color: var(--cu-black);
  line-height: 1;
  display: block;
  margin-bottom: 0.6rem;
}
.stat-label {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--cu-black);
  margin: 0;
}

/* ---------- Hero stories ---------- */
.stories-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 2.5rem;
}
@media (max-width: 640px) {
  .stories-grid { grid-template-columns: 1fr; }
}
.story-card {
  background: var(--cu-white);
  border: 1px solid #E8E5E0;
  border-radius: 2px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.story-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  transform: translateY(-2px);
}
.story-photo {
  aspect-ratio: 16 / 9;
  background: var(--cu-off-white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cu-black);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem;
  overflow: hidden;
}
.story-body {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1;
}
.story-campus {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cu-gold-ink);
}
.story-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  display: block;
}
.story-body h3 { margin: 0; font-size: 1.1rem; line-height: 1.3; }
.story-teaser {
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--cu-black);
  margin: 0;
}

/* Read full story expand */
/* "Read More" link on the story card — opens the full story page */
.story-read-more-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  align-self: flex-start;
  margin-top: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cu-black);
  border-bottom: 2px solid var(--cu-gold);
  padding-bottom: 0.1em;
  transition: border-color 0.15s ease;
}
.story-read-more-link:hover,
.story-read-more-link:focus-visible { border-color: var(--cu-gold-ink); }
.story-read-more-link span { transition: transform 0.15s ease; }
.story-read-more-link:hover span { transform: translateX(3px); }

/* ---------- Campus story pages (story.html) ---------- */
.campus-page {
  padding: var(--section-space) 0;
}
.campus-page .wrap {
  max-width: 820px;
}
.campus-page h1 {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  max-width: 24ch;
}
.campus-page-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 0;
}

/* ---------- Photo captions (figure/figcaption) ---------- */
.photo-figure { margin: 0; }
.photo-caption {
  font-size: 0.62rem;
  line-height: 1.35;
  font-style: italic;
  color: var(--cu-black);
  margin-top: 0.25rem;
}
.campus-page .photo-figure { margin: 1.75rem 0 2.5rem; }
.story-figure { margin: 0; }
.story-figure .photo-caption { padding: 0.3rem 1.75rem 0; }
.campus-page-body p {
  font-size: 1.05rem;
  line-height: 1.75;
  margin: 0 0 1.35em;
  text-wrap: pretty;
}
.campus-page-body a {
  text-decoration: none;
  border-bottom: 2px solid var(--cu-gold);
  padding-bottom: 0.05em;
  transition: border-color 0.15s ease;
}
.campus-page-body a:hover { border-color: var(--cu-gold-ink); }
.campus-page-links-heading {
  font-size: 1.25rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid #E8E5E0;
}
.campus-page-links,
.campus-page-index {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}
.campus-page-links li,
.campus-page-index li {
  padding: 0.75rem 0;
  border-bottom: 1px solid #E8E5E0;
  font-size: 0.95rem;
  line-height: 1.5;
}
.campus-page-links a,
.campus-page-index a {
  text-decoration: none;
  border-bottom: 2px solid var(--cu-gold);
  padding-bottom: 0.1em;
  transition: border-color 0.15s ease;
}
.campus-page-links a:hover,
.campus-page-index a:hover { border-color: var(--cu-gold-ink); }
.campus-page-back {
  display: block;
  width: max-content;
  max-width: 100%;
  margin-top: 2.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid var(--cu-gold);
  padding-bottom: 0.15em;
  transition: border-color 0.15s ease;
}
.campus-page-back:hover { border-color: var(--cu-gold-ink); }

/* ---------- I&E Leaders ---------- */
.leader-section + .leader-section {
  margin-top: 3.5rem;
}
.leader-section-heading {
  font-size: 1.4rem;
  margin-top: 1.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 3px solid var(--cu-gold);
}
.leader-group {
  margin-top: 2rem;
}
.leader-group-heading {
  font-size: 1rem;
  letter-spacing: 0.02em;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid #E8E5E0;
}
.leader-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
@media (max-width: 640px) {
  .leader-list { grid-template-columns: 1fr; }
}
.leader-card {
  padding: 1.25rem 1.4rem;
  background: var(--cu-off-white);
  border: 1px solid #E8E5E0;
  border-radius: 2px;
}
.leader-name {
  display: block;
  font-size: 1rem;
  margin-bottom: 0.3rem;
}
.leader-title {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--cu-black);
  margin: 0 0 0.5rem;
}
.leader-email {
  font-size: 0.85rem;
  word-break: break-all;
}

/* ---------- Timeline (zig-zag spine, ported from reference_material/cu-innovation-timeline-example.jsx) ---------- */
section#timeline { padding: 0; }

.cu-timeline {
  --bg: #FBF8F1;
  --paper: #FFFFFF;
  --ink: #221E1A;
  --ink-soft: #5A5248;
  --line: #E4DCCB;
  /* Deepened from #B59A5C so it clears contrast both as text on the parchment
     background and as the active decade-pill background with white text. */
  --root: #6E5A2A;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 80% -10%, #F3ECDC 0%, transparent 60%),
    var(--bg);
  padding: var(--section-space) 0 6rem;
  -webkit-font-smoothing: antialiased;
}
.cu-timeline * { box-sizing: border-box; }

.masthead {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 1.5rem 2.5rem;
  text-align: center;
}
.mh-eyebrow {
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
}
.mh-title {
  font-family: 'Fraunces', serif;
  font-weight: 800;
  font-size: clamp(2.8rem, 8vw, 5.2rem);
  line-height: .95;
  letter-spacing: -.02em;
  margin: 1.1rem 0 0;
}
.mh-accent {
  font-style: italic;
  font-weight: 500;
  color: var(--root);
}
.mh-sub {
  max-width: 36rem;
  margin: 1.4rem auto 0;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink);
}

.filterbar {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  padding: 1rem 1.25rem;
  margin: 0 auto 2.5rem;
  max-width: 1000px;
  background: rgba(251,248,241,.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.chip {
  --c: #999; --ci: #555;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font: inherit;
  font-size: .85rem;
  font-weight: 500;
  padding: .46rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: all .18s ease;
  white-space: nowrap;
}
.chip:hover { border-color: var(--c); transform: translateY(-1px); }
.chip:focus-visible { outline: 2px solid var(--ci); outline-offset: 2px; }
/* Use the darker ink (a deepened version of each campus hue) so white text
   on the active chip meets 4.5:1 — the light --c fails for gold/orange. */
.chip.on {
  background: var(--ci);
  border-color: var(--ci);
  color: #fff;
}
.chip.on .chip-n { color: #fff; opacity: .85; }
.chip.on .chip-dot { background: #fff; }
.chip-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c);
  display: inline-block;
}
.chip-n {
  font-variant-numeric: tabular-nums;
  font-size: .72rem;
  color: var(--ink);
  font-weight: 600;
}

/* Decade navigator — pages through one decade at a time instead of one
   long continuous scroll of all 150 years */
.decade-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  max-width: 1000px;
  margin: 0 auto 1rem;
  padding: 0 1.25rem;
}
.decade-arrow {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: all .18s ease;
}
.decade-arrow:hover:not(:disabled) { border-color: var(--root); color: var(--root); transform: translateY(-1px); }
.decade-arrow:disabled { opacity: .3; cursor: not-allowed; }
.decade-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem;
}
.decade-pill {
  font-family: 'Fraunces', serif;
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .03em;
  padding: .35rem .85rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: all .18s ease;
}
.decade-pill:hover { border-color: var(--root); color: var(--ink); }
.decade-pill.on {
  background: var(--root);
  border-color: var(--root);
  color: #fff;
}

.spine-wrap {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1.25rem;
  min-height: 12rem;
}

/* Empty / loading / not-found helper text (timeline, story page,
   course table). Kept centered and readable rather than an unstyled
   flush-left paragraph. */
.timeline-empty {
  margin: 2rem auto;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--cu-black);
}
td.timeline-empty { padding: 1.5rem 0.75rem; }
.spine {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(var(--root), var(--line));
}
.decade { position: relative; }
.decade-mark {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 0 2rem;
  z-index: 2;
  text-align: center;
}
.decade-mark span {
  font-family: 'Fraunces', serif;
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: -.01em;
  color: var(--root);
  background: var(--bg);
  padding: .2rem 1.4rem;
}
.decade-mark .decade-count {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--bg);
  padding: .15rem 1rem;
  margin-top: .25rem;
}

.node {
  position: relative;
  width: 50%;
  padding: .9rem 2.4rem;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
}
.node.in { opacity: 1; transform: none; }
.node.left { left: 0; text-align: right; }
.node.right { left: 50%; text-align: left; }

.node-dot {
  position: absolute;
  top: 1.7rem;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--c);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 1px var(--c);
  z-index: 3;
}
.node.left .node-dot { right: -7.5px; }
.node.right .node-dot { left: -7.5px; }

.card {
  display: inline-block;
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--c);
  border-radius: 12px;
  padding: 1.05rem 1.15rem 1rem;
  box-shadow: 0 1px 2px rgba(40,30,10,.04);
  transition: box-shadow .2s ease, transform .2s ease;
  max-width: 100%;
}
.card:hover {
  box-shadow: 0 8px 26px rgba(40,30,10,.10);
  transform: translateY(-2px);
}
.card-top {
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: .5rem;
}
.year {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--ci);
  line-height: 1;
}
.campus-tag {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ci);
  padding: .2rem .5rem;
  border-radius: 5px;
}
.card-title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.12rem;
  line-height: 1.25;
  margin: 0 0 .35rem;
  letter-spacing: -.01em;
}
.card-people {
  font-size: .82rem;
  font-weight: 600;
  color: var(--ci);
  margin-bottom: .5rem;
}
.card-desc {
  font-size: .9rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 .8rem;
}
.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  border-top: 1px solid var(--line);
  padding-top: .6rem;
}
.cat {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink);
}
.src {
  font-size: .78rem;
  font-weight: 600;
  color: var(--ci);
  text-decoration: none;
  white-space: nowrap;
}
.src:hover { text-decoration: underline; }

.spine-end {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 2.5rem 0 1rem;
}
.seed {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--root);
  box-shadow: 0 0 0 6px rgba(181,154,92,.18);
}

@media (max-width: 720px) {
  .spine { left: 18px; transform: none; }
  .decade-mark { justify-content: flex-start; padding-left: 4px; }
  .node, .node.left, .node.right {
    width: 100%;
    left: 0;
    text-align: left;
    padding: .7rem 0 .7rem 2.8rem;
  }
  .node.left .node-dot, .node.right .node-dot { left: 11px; right: auto; }
  .card { display: block; }
  .spine-end { justify-content: flex-start; padding-left: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .node { transition: none; opacity: 1; transform: none; }
  .card { transition: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Appendix / course table ---------- */
.appendix-controls {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 2rem 0 1.5rem;
  align-items: center;
}
.appendix-controls input,
.appendix-controls select {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  padding: 0.55em 0.8em;
  border: 1px solid var(--cu-light-gray);
  border-radius: 2px;
}
.appendix-controls input { flex: 1; min-width: 200px; }

.course-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.course-table th,
.course-table td {
  text-align: left;
  padding: 0.85rem 0.75rem;
  border-bottom: 1px solid var(--cu-light-gray);
  vertical-align: top;
}
.course-table th {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cu-black);
  border-bottom: 3px double var(--cu-black);
}
.course-table tbody tr:hover { background: var(--cu-off-white); }
.appendix-note {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--cu-black);
}

/* ---------- CU System footer (replicated to match cu.edu/impact-cu) ---------- */
.cu-footer { font-family: "Roboto", "Helvetica Neue", Arial, sans-serif; }
.cu-footer a { text-decoration: none; }
.cu-footer .inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Address band — centered, gold rule, light-gold display title */
.cu-footer-address { border-top: 5px solid #cfb97d; background: #333; }
.cu-footer-address .inner { padding: 30px 24px; text-align: center; }
.cu-footer-address h2 {
  color: #d7ccaf;
  margin: 0;
  font-weight: 300;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: 1px 1px #000;
}
.cu-footer-address p { color: #BBB; font-size: 14px; line-height: 22px; margin: 3px 0 0; }

/* Main band — dark gradient, centered logo + link columns */
.cu-footer-main { border-top: 1px solid #6F6F6F; background: linear-gradient(#555, #222); }
.cu-footer-main .inner {
  padding: 40px 24px 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 30px 40px;
  justify-content: center;
  align-items: flex-start;
}
.cu-footer-logo { flex: 0 0 auto; text-align: center; }
.cu-footer-logo img { width: 270px; max-width: 100%; height: auto; display: block; }
.cu-footer-cols { display: flex; flex-wrap: wrap; gap: 30px 40px; flex: 1 1 auto; justify-content: center; }
.cu-footer-cols ul { list-style: none; margin: 0; padding: 0; }
.cu-footer-cols li { line-height: 20px; }
.cu-footer-cols a { font-size: 12px; color: #AAA; }
.cu-footer-cols a:hover, .cu-footer-cols a:focus-visible { color: #FFF; text-decoration: none; }

/* Post band — near-black, legal + social */
.cu-footer-post { background: #111; }
.cu-footer-post .inner {
  min-height: 87px;
  padding: 15px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.cu-footer-legal { color: #AAA; font-size: 11px; line-height: 15px; margin: 0; }
.cu-footer-legal a { color: #AAA; }
.cu-footer-legal a:hover, .cu-footer-legal a:focus-visible { color: #FFF; text-decoration: none; }
.cu-footer-social { display: inline-flex; gap: 2px; }
.cu-footer-social a {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 2px;
  background: #4A4845;
  color: #9C9A96;
  transition: background-color .2s ease, color .2s ease;
}
.cu-footer-social a:hover, .cu-footer-social a:focus-visible { background: #5ca7d7; color: #FFF; text-decoration: none; }
.cu-footer-social svg { width: 20px; height: 20px; margin: 6px; display: block; fill: currentColor; }

@media (max-width: 700px) {
  .cu-footer-main .inner { flex-direction: column; align-items: center; }
  .cu-footer-cols { gap: 24px; }
  .cu-footer-post .inner { flex-direction: column; align-items: center; text-align: center; }
}

/* =========================================================
   Mobile / small-screen refinements
   ========================================================= */

/* Below ~760px the wordmark + nav no longer fit on one line and the
   nav wraps beneath the wordmark, making the sticky header taller.
   Bump --header-h so anchored sections (scroll-margin-top) and the
   sticky timeline filterbar (top: var(--header-h)) clear the taller
   wrapped header instead of hiding under it. Tighten header padding
   and nav gaps so the sticky bar doesn't eat too much of the screen,
   while keeping the 44px nav tap targets. */
@media (max-width: 760px) {
  :root { --header-h: 84px; }
  .site-header { padding: 0.7rem 0; }

  /* Collapse the section nav behind a Menu button that expands it
     vertically, so every item is visible on tap without any horizontal
     scrolling. The button and wordmark share the top row; the open menu
     drops down as a full-width list beneath them. */
  .nav-toggle { display: inline-flex; }
  .site-header .wrap {
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
  }
  .site-header .wordmark { flex: 1 1 auto; min-width: 0; }
  .nav-toggle { flex: 0 0 auto; }
  .site-nav {
    flex-basis: 100%;
    display: none;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0 calc(-1 * var(--gutter));
    padding: 0.35rem var(--gutter) 0.1rem;
    border-top: 1px solid #E8E5E0;
  }
  .site-header.nav-open .site-nav { display: flex; }
  .site-nav a {
    width: 100%;
    min-height: 46px;
    border-radius: 6px;
    background: transparent;
    color: var(--cu-black);
    font-size: 0.9rem;
  }
  .site-nav a:hover { background: #f0f0f0; }
  .site-nav a.active { background: rgba(207, 184, 124, 0.35); }

  /* Center and shrink the utility links so they wrap tidily. */
  .util-bar { padding: 0.15rem 0; }
  .util-bar .wrap { justify-content: center; }
  .util-nav { justify-content: center; gap: 0.2rem 0.85rem; }
  .util-nav a { min-height: 30px; font-size: 0.68rem; }
}

@media (max-width: 480px) {
  :root { --header-h: 72px; }
  .site-header .wordmark { font-size: 0.95rem; }
  /* On phones the header collapses to a compact "I&E Impact Report". */
  .seal-mark,
  .site-header .wordmark-main,
  .site-header .wordmark-sub { display: none; }
  .wordmark-mobile { display: inline; }
  /* Slightly smaller decorative hero seal so it doesn't dominate, with the
     text scaled down to fit inside the smaller circle. */
  .seal-badge { width: 96px; height: 96px; margin-bottom: 1.5rem; outline-offset: -6px; }
  .seal-top, .seal-bottom { font-size: 0.4rem; padding: 0 0.5rem; line-height: 1.25; }
  .seal-year { font-size: 1.15rem; }
}

/* Timeline: keep the sticky campus filterbar compact on phones so it
   doesn't cover the cards below it, and ensure the chips wrap/tap well. */
@media (max-width: 720px) {
  .filterbar { padding: 0.7rem 1rem; margin-bottom: 1.75rem; }
  .chip { padding: 0.5rem 0.75rem; }
  /* Give tapped chips/pills a comfortable minimum touch height. */
  .chip, .decade-pill { min-height: 38px; }
  .decade-arrow { width: 2.5rem; height: 2.5rem; }
}

/* =========================================================
   Print — this microsite replaces a printed PDF report, so a
   clean printout is worth a small amount of investment. Drops
   the sticky/interactive chrome, avoids awkward card breaks, and
   keeps the gold underline off paper for legibility.
   ========================================================= */
@media print {
  html { scroll-behavior: auto; }
  body { color: #000; background: #fff; }
  .site-header,
  .skip-link,
  .filterbar,
  .decade-nav,
  .stat-group-cta,
  .story-read-more-link { display: none !important; }
  .hero,
  .cu-footer,
  .cu-footer-address,
  .cu-footer-main,
  .cu-footer-post {
    background: #fff !important;
    color: #000;
  }
  .hero::after { display: none; }
  .hero h1,
  .hero-intro,
  .hero-credit,
  .seal-top,
  .seal-year,
  .seal-bottom,
  .hero a,
  .cu-footer,
  .cu-footer a,
  .cu-footer-legal { color: #000 !important; }
  .seal-badge { border-color: #000; }
  a { text-decoration: underline; text-decoration-color: #000; }
  .story-card,
  .stat-card,
  .leader-card,
  .card,
  .photo-figure { break-inside: avoid; page-break-inside: avoid; }
  .story-card:hover,
  .card:hover { box-shadow: none; transform: none; }
}

/* ============================================================
   Featured Innovators directory (innovators.html)
   ============================================================ */
.innovators { padding: var(--section-space) 0; }
.innovators .lede { margin-bottom: 2rem; }

.innovator-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #E8E5E0;
}
#innovator-search {
  flex: 1 1 260px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  padding: 0.6em 0.9em;
  border: 1px solid var(--cu-light-gray);
  border-radius: 2px;
  min-height: 44px;
}
.innovator-facet { display: flex; flex-direction: column; gap: 0.5rem; }
.innovator-facet-label {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--cu-black);
}
.innovator-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.innovator-pill {
  font: inherit; font-size: 0.8rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--cu-light-gray);
  border-radius: 999px;
  background: var(--cu-white);
  color: var(--cu-black);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.innovator-pill:hover { border-color: var(--cu-black); }
.innovator-pill.on { background: var(--cu-black); border-color: var(--cu-black); color: var(--cu-white); }

.innovator-status { font-size: 0.85rem; color: var(--cu-black); margin: 0 0 1.25rem; }

.innovator-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1.25rem;
}
.innovator-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  font: inherit;
  /* Explicit color so the card text stays black — a bare <button> otherwise
     picks up the UA default (blue) on iOS Safari. */
  color: var(--cu-black);
  padding: 0;
  background: var(--cu-white);
  border: 1px solid #E8E5E0;
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.innovator-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.12); transform: translateY(-2px); border-color: var(--cu-gold); }
.innovator-card-photo { aspect-ratio: 1 / 1; background: var(--cu-off-white); overflow: hidden; }
.innovator-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.innovator-card-photo.placeholder {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 3rem; color: var(--cu-gold-ink);
}
.innovator-card-body { padding: 0.9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.innovator-card-name { font-weight: 700; font-size: 1rem; line-height: 1.25; }
.innovator-card-company { font-size: 0.82rem; line-height: 1.35; }

.innovator-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.15rem; }
.innovator-badge {
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--cu-black);
  padding: 0.22rem 0.5rem; border-radius: 3px;
  border: 1px solid var(--cu-light-gray);
}
.innovator-badge.campus { border-color: var(--cu-gold); background: rgba(207,184,124,0.16); }

.innovator-empty { font-size: 1rem; padding: 2rem 0; }

/* Detail modal */
.innovator-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding: 5vh 1rem; overflow-y: auto; }
.innovator-modal[hidden] { display: none; }
.innovator-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); }
.innovator-modal-dialog {
  position: relative; z-index: 1;
  background: var(--cu-white);
  max-width: 720px; width: 100%;
  border-radius: 4px;
  border-top: 4px solid var(--cu-gold);
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  padding: 2rem clamp(1.25rem, 4vw, 2.5rem) 2.5rem;
}
.innovator-modal-close {
  position: absolute; top: 0.5rem; right: 0.5rem;
  width: 40px; height: 40px; border: none; background: none;
  font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--cu-black);
  border-radius: 50%;
}
.innovator-modal-close:hover { background: var(--cu-off-white); }
.innovator-modal-photo { width: 120px; height: 120px; object-fit: cover; border-radius: 50%; display: block; margin-bottom: 1rem; border: 2px solid var(--cu-gold); }
.innovator-modal-head h2 { margin: 0 0 0.25rem; font-size: clamp(1.4rem, 3vw, 1.7rem); }
.innovator-modal-title { margin: 0 0 0.15rem; font-weight: 600; }
.innovator-modal-company { margin: 0 0 0.6rem; }
.innovator-modal-sub { margin: 1.5rem 0 0.5rem; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cu-gold-ink); }
#innovator-modal-body p { line-height: 1.7; margin: 0 0 0.8em; }
.innovator-modal-links { margin: 0.5rem 0 0; padding-left: 1.1rem; }
.innovator-modal-links li { margin-bottom: 0.3rem; word-break: break-word; }

@media (max-width: 560px) {
  .innovator-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.9rem; }
  .innovator-controls { gap: 1rem; }
}

/* Black→gold CTA buttons: "Meet the Featured Innovators" (Leaders) and
   "Learn More about Innovation at [campus]" (story pages) */
.leaders-cta,
.campus-ecosystem-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2.5rem;
  padding: 0.85rem 1.6rem;
  background: var(--cu-black);
  color: var(--cu-white);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 1px solid var(--cu-black);
  border-radius: 2px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.leaders-cta:hover,
.leaders-cta:focus-visible,
.campus-ecosystem-cta:hover,
.campus-ecosystem-cta:focus-visible {
  background: var(--cu-gold);
  color: var(--cu-black);
  border-color: var(--cu-gold);
}
.campus-ecosystem-cta span { transition: transform 0.15s ease; }
.campus-ecosystem-cta:hover span { transform: translateX(3px); }
/* the ecosystem CTA sits above the back link — give the back link room */
.campus-ecosystem-cta + .campus-page-back { margin-top: 2rem; }

/* Innovator modal: tagline + "Learn More" description expander */
.innovator-tagline {
  font-size: 1.1rem;
  line-height: 1.5;
  font-weight: 500;
  margin: 0 0 0.9rem;
}
.innovator-more { margin: 0 0 0.5rem; }
.innovator-more-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: max-content;
  cursor: pointer;
  list-style: none;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--cu-black);
  border-radius: 2px;
  background: var(--cu-white);
  color: var(--cu-black);
  transition: background 0.15s ease, color 0.15s ease;
}
.innovator-more-toggle::-webkit-details-marker { display: none; }
.innovator-more-toggle::after { content: "\25B8"; font-size: 0.85em; }
.innovator-more[open] .innovator-more-toggle::after { content: "\25BE"; }
.innovator-more-toggle:hover,
.innovator-more-toggle:focus-visible { background: var(--cu-black); color: var(--cu-white); }
.innovator-more-body { margin-top: 0.9rem; }

/* Innovator modal: featured team-member circles across the top */
.innovator-modal-team {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 1.1rem;
}
.innovator-modal-team img {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--cu-gold);
  background: var(--cu-off-white);
}
@media (max-width: 480px) {
  .innovator-modal-team img { width: 68px; height: 68px; }
}

/* Full campus story page: featured story lead-in + "Innovation at" section */
.campus-page-body .campus-page-lead {
  font-size: 1.2rem;
  line-height: 1.6;
  font-weight: 500;
  margin: 0 0 1.2em;
}
.campus-page-section { margin-top: 3.5rem; }
.campus-page-divider {
  border: 0;
  border-top: 1px solid #E8E5E0;
  margin: 0 0 2.5rem;
}
.campus-page-section .campus-page-title { margin-top: 0; }

/* Innovator modal Bio: clamp to ~6 lines with a Learn More toggle */
.innovator-bio-body.clamp {
  max-height: 10.2em; /* ~6 lines at the modal's 1.7 line-height */
  overflow: hidden;
}
.innovator-more-toggle.open::after { content: "\25BE"; }
.innovator-bio-body + .innovator-more-toggle { margin-top: 0.9rem; }