/* =====================================================================
   Cities Chair (CRE) — Front-end Kit
   ccre.css — design tokens + components
   Built on Bootstrap 5.3 (loaded separately). This file layers the
   Cities Chair design system on top.
   --------------------------------------------------------------------
   Brand colours are used as FUNCTIONAL ACCENTS over a restrained
   black / white / grey base. Logo lock-up is monotone (black).
   ===================================================================== */

/* ----------  1. TOKENS  ---------- */
:root {
  /* Brand accent palette */
  --cc-gold:   #F0A400;
  --cc-red:    #E53812;
  --cc-green:  #009640;
  --cc-brown:  #84746C;

  /* Tints (50%) for soft fills */
  --cc-gold-50:  #f7d27f;
  --cc-red-50:   #f29b88;
  --cc-green-50: #80ca9f;
  --cc-brown-50: #c1bab5;

  /* Neutral base */
  --cc-black:  #141414;
  --cc-ink:    #232323;
  --cc-grey-900: #2b2b2b;
  --cc-grey-700: #4d4d4d;
  --cc-grey-500: #777777;
  --cc-grey-300: #c9c9c9;
  --cc-grey-200: #e4e3e1;
  --cc-grey-100: #f3f2f0;
  --cc-paper:  #ffffff;

  /* Semantic */
  --cc-text:    var(--cc-ink);
  --cc-muted:   var(--cc-grey-500);
  --cc-surface: var(--cc-paper);
  --cc-surface-alt: var(--cc-grey-100);
  --cc-border:  var(--cc-grey-200);
  --cc-accent:  var(--cc-red);          /* primary action accent */
  --cc-accent-ink: #b82a0c;

  /* Type */
  --cc-font-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --cc-font-serif: "Spectral", Georgia, "Times New Roman", serif;

  /* Scale */
  --cc-fs-display: clamp(2.4rem, 1.4rem + 3.4vw, 4rem);
  --cc-fs-h1: clamp(2rem, 1.4rem + 2vw, 3rem);
  --cc-fs-h2: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);
  --cc-fs-h3: 1.4rem;
  --cc-fs-h4: 1.15rem;
  --cc-fs-lead: 1.2rem;
  --cc-fs-small: 0.85rem;
  --cc-fs-eyebrow: 0.78rem;

  /* Layout */
  --cc-radius: 4px;
  --cc-radius-lg: 8px;
  --cc-shadow-sm: 0 1px 3px rgba(20,20,20,.08), 0 1px 2px rgba(20,20,20,.06);
  --cc-shadow-md: 0 6px 20px rgba(20,20,20,.10);
  --cc-shadow-lg: 0 18px 50px rgba(20,20,20,.16);
  --cc-maxw: 1240px;
  --cc-header-h: 96px;
  --cc-transition: 180ms ease;
}

/* ----------  2. BASE  ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--cc-font-sans);
  color: var(--cc-text);
  background: var(--cc-paper);
  font-size: 1.05rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,h5 { font-family: var(--cc-font-serif); font-weight: 600; line-height: 1.15; color: var(--cc-black); letter-spacing: -0.01em; }
h1 { font-size: var(--cc-fs-h1); }
h2 { font-size: var(--cc-fs-h2); }
h3 { font-size: var(--cc-fs-h3); }
h4 { font-size: var(--cc-fs-h4); font-weight: 600; }
p { margin: 0 0 1rem; }
a { color: var(--cc-accent-ink); text-decoration: none; transition: color var(--cc-transition); }
a:hover { color: var(--cc-red); text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
hr { border: 0; border-top: 1px solid var(--cc-border); margin: 2rem 0; }
.container-cc { max-width: var(--cc-maxw); margin-inline: auto; padding-inline: 1.25rem; }

/* Accessibility helpers */
.visually-hidden-focusable:focus { position: fixed; top: 8px; left: 8px; z-index: 2000; background:#fff; padding:.6rem 1rem; border:2px solid var(--cc-black); }
:focus-visible { outline: 3px solid var(--cc-gold); outline-offset: 2px; }

/* ----------  3. UTILITY ACCENTS  ---------- */
.cc-eyebrow {
  font-family: var(--cc-font-sans);
  font-size: var(--cc-fs-eyebrow);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cc-grey-500);
  display: inline-block;
  margin-bottom: .65rem;
}
.cc-rule { height: 4px; border: 0; background: linear-gradient(90deg, var(--cc-brown) 0 25%, var(--cc-gold) 0 50%, var(--cc-green) 0 75%, var(--cc-red) 0); opacity: 1; margin: 0; }
.cc-text-gold  { color: var(--cc-gold)  !important; }
.cc-text-red   { color: var(--cc-red)   !important; }
.cc-text-green { color: var(--cc-green) !important; }
.cc-text-brown { color: var(--cc-brown) !important; }
.cc-bg-soft    { background: var(--cc-surface-alt); }
.cc-bg-ink     { background: var(--cc-black); color: #fff; }

/* Section rhythm */
.cc-section { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.cc-section--tight { padding-block: clamp(2rem, 1.4rem + 2vw, 3rem); }
.cc-section-head { margin-bottom: 2rem; }
.cc-section-head .cc-section-title { font-size: var(--cc-fs-h2); margin: 0; }
.cc-section-head .cc-section-link { font-family: var(--cc-font-sans); font-weight: 600; font-size: .95rem; }

/* ----------  4. BUTTONS  ---------- */
.btn-cc {
  --btn-bg: var(--cc-black);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--cc-font-sans); font-weight: 600; font-size: .95rem;
  line-height: 1; padding: .8rem 1.4rem; border-radius: var(--cc-radius);
  background: var(--btn-bg); color: var(--btn-fg);
  border: 2px solid var(--btn-bg); cursor: pointer;
  transition: transform var(--cc-transition), background var(--cc-transition), color var(--cc-transition);
  text-decoration: none;
}
.btn-cc:hover { color: var(--btn-fg); text-decoration: none; transform: translateY(-2px); }
.btn-cc--accent { --btn-bg: var(--cc-red); border-color: var(--cc-red); }
.btn-cc--accent:hover { --btn-bg: var(--cc-accent-ink); border-color: var(--cc-accent-ink); }
.btn-cc--gold { --btn-bg: var(--cc-gold); --btn-fg: #1a1304; border-color: var(--cc-gold); }
.btn-cc--green { --btn-bg: var(--cc-green); border-color: var(--cc-green); }
.btn-cc--outline { --btn-bg: transparent; --btn-fg: var(--cc-black); }
.btn-cc--outline:hover { --btn-bg: var(--cc-black); --btn-fg: #fff; }
.btn-cc--ghost-light { --btn-bg: transparent; --btn-fg:#fff; border-color: rgba(255,255,255,.7); }
.btn-cc--ghost-light:hover { --btn-bg:#fff; --btn-fg: var(--cc-black); border-color:#fff; }
.btn-cc--sm { padding: .55rem 1rem; font-size: .85rem; }

/* ----------  5. HEADER / NAV  ---------- */
.cc-topbar { background: var(--cc-black); color: #fff; font-size: .8rem; }
.cc-topbar a { color: rgba(255,255,255,.8); }
.cc-topbar a:hover { color: #fff; }
.cc-topbar .container-cc { display: flex; justify-content: space-between; align-items: center; min-height: 38px; gap: 1rem; }
.cc-topbar__partners { display: flex; align-items: center; gap: .8rem; font-weight: 600; letter-spacing: .03em; }
.cc-topbar__links { display: flex; align-items: center; gap: 1.1rem; }

.cc-header { position: sticky; top: 0; z-index: 1030; background: #fff; border-bottom: 1px solid var(--cc-border); }
.cc-header .container-cc { display: flex; align-items: center; gap: 1.5rem; min-height: var(--cc-header-h); }
.cc-logo { display: flex; align-items: center; flex: none; }
.cc-logo svg, .cc-logo img { height: 58px; width: auto; display: block; }
@media (max-width: 575px){ .cc-logo svg, .cc-logo img { height: 46px; } }
.cc-nav { margin-left: auto; }
.cc-nav__list { display: flex; align-items: center; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.cc-nav__item { position: relative; }
.cc-nav__link {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--cc-font-sans); font-weight: 600; font-size: .95rem;
  color: var(--cc-ink); padding: .7rem .85rem; border-radius: var(--cc-radius);
}
.cc-nav__link:hover, .cc-nav__item:hover > .cc-nav__link { color: var(--cc-red); text-decoration: none; background: var(--cc-grey-100); }
.cc-nav__item--has-mega > .cc-nav__link::after { content: "\f107"; font-family:"Font Awesome 6 Free","FontAwesome"; font-weight:900; font-size:.7rem; opacity:.6; }

/* Mega panel */
.cc-mega {
  position: absolute; top: 100%; left: 0; min-width: 320px;
  background: #fff; border: 1px solid var(--cc-border); border-top: 4px solid var(--cc-red);
  box-shadow: var(--cc-shadow-md); padding: 1rem; border-radius: 0 0 var(--cc-radius-lg) var(--cc-radius-lg);
  display: none; z-index: 1040;
}
.cc-mega.is-open { display: block; }
@media (min-width: 992px) { .cc-nav__item:hover > .cc-mega { display: block; } }
.cc-mega--wide { min-width: 560px; columns: 2; column-gap: 1.5rem; }
.cc-mega a { display: block; padding: .5rem .6rem; color: var(--cc-ink); font-weight: 500; border-radius: var(--cc-radius); font-size:.92rem; break-inside: avoid; }
.cc-mega a:hover { background: var(--cc-grey-100); color: var(--cc-red); text-decoration: none; }
.cc-mega__title { font-family: var(--cc-font-sans); font-size: var(--cc-fs-eyebrow); letter-spacing:.12em; text-transform: uppercase; color: var(--cc-grey-500); font-weight:700; padding: .3rem .6rem; }

.cc-search-btn, .cc-nav-toggle {
  background: none; border: 0; font-size: 1.05rem; color: var(--cc-ink); padding: .6rem; cursor: pointer; border-radius: var(--cc-radius);
}
.cc-search-btn:hover, .cc-nav-toggle:hover { background: var(--cc-grey-100); color: var(--cc-red); }
.cc-nav-toggle { display: none; }

.cc-nav__close { display: none; background: none; border: 0; font-size: 1.6rem; color: var(--cc-ink); cursor: pointer; }
@media (max-width: 991px) {
  .cc-nav { position: fixed; inset: 0 0 0 auto; width: min(360px, 88vw); background:#fff; transform: translateX(100%); transition: transform 220ms ease; box-shadow: var(--cc-shadow-lg); padding: 4.5rem 1rem 2rem; overflow-y: auto; z-index:1055; }
  .cc-nav.is-open { transform: translateX(0); }
  .cc-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .cc-nav__link { justify-content: space-between; border-bottom: 1px solid var(--cc-border); border-radius: 0; padding: .9rem .5rem; }
  .cc-mega { position: static; display: none; box-shadow: none; border: 0; border-top: 0; padding: .25rem 0 .75rem .75rem; min-width: 0; columns: 1; }
  .cc-mega.is-open { display: block; }
  .cc-mega a { padding: .55rem .5rem; }
  .cc-nav-toggle { display: inline-flex; }
  .cc-nav__close { display: inline-flex; position: absolute; top: 1rem; right: 1rem; }
  .cc-backdrop { position: fixed; inset: 0; background: rgba(20,20,20,.5); z-index:1020; display:none; }
  .cc-backdrop.is-open { display: block; }
  body.cc-no-scroll { overflow: hidden; }
}

/* ----------  6. HERO  ---------- */
.cc-hero { position: relative; background: var(--cc-black); color: #fff; overflow: hidden; }
.cc-hero__media { position: absolute; inset: 0; }
.cc-hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.cc-hero__media::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(20,20,20,.72) 0%, rgba(20,20,20,.38) 55%, rgba(20,20,20,.15) 100%); }
.cc-hero__inner { position: relative; z-index: 2; padding-block: clamp(3.5rem, 2rem + 8vw, 7rem); max-width: 760px; }
.cc-hero__eyebrow { color: var(--cc-gold); }
.cc-hero h1 { color:#fff; font-size: var(--cc-fs-display); margin: 0 0 1rem; }
.cc-hero__lead { font-size: var(--cc-fs-lead); color: rgba(255,255,255,.9); margin-bottom: 1.75rem; max-width: 620px; }
.cc-hero__diamond { position: absolute; right: -90px; top: 50%; transform: translateY(-50%); width: 460px; opacity: .9; z-index:1; pointer-events:none; }
@media (max-width: 767px){ .cc-hero__diamond{ display:none; } }

/* ----------  7. CARDS  ---------- */
.cc-card {
  background: #fff; border: 1px solid var(--cc-border); border-radius: var(--cc-radius-lg);
  overflow: hidden; height: 100%; display: flex; flex-direction: column;
  transition: transform var(--cc-transition), box-shadow var(--cc-transition);
}
.cc-card:hover { transform: translateY(-4px); box-shadow: var(--cc-shadow-md); }
.cc-card__media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--cc-grey-200); }
.cc-card__media img { width:100%; height:100%; object-fit: cover; transition: transform 400ms ease; }
.cc-card:hover .cc-card__media img { transform: scale(1.05); }
.cc-card__body { padding: 1.15rem 1.25rem 1.4rem; display:flex; flex-direction:column; flex:1; }
.cc-card__title { font-size: 1.18rem; margin: .35rem 0 .5rem; }
.cc-card__title a { color: var(--cc-black); }
.cc-card__title a:hover { color: var(--cc-red); text-decoration: none; }
.cc-card__meta { font-size: var(--cc-fs-small); color: var(--cc-muted); margin-top: auto; padding-top: .8rem; display:flex; gap:.8rem; align-items:center; }
.cc-card__excerpt { font-size: .95rem; color: var(--cc-grey-700); }

/* Category chip — colour-coded by content type */
.cc-chip {
  display: inline-flex; align-items: center; gap:.4rem;
  font-family: var(--cc-font-sans); font-weight: 700; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .3rem .6rem; border-radius: 100px; color:#fff; background: var(--cc-grey-700);
}
.cc-chip--research { background: var(--cc-gold); color:#1a1304; }
.cc-chip--output   { background: var(--cc-green); }
.cc-chip--news     { background: var(--cc-brown); }
.cc-chip--event    { background: var(--cc-brown); }
.cc-chip--soft { background: #fff; color: var(--cc-grey-700); border: 1px solid var(--cc-border); }

/* Themes grid tile */
.cc-theme {
  position: relative; display: block; padding: 1.5rem 1.4rem; border-radius: var(--cc-radius-lg);
  background: var(--cc-grey-100); border: 1px solid var(--cc-border); color: var(--cc-black);
  min-height: 150px; overflow: hidden; transition: transform var(--cc-transition), box-shadow var(--cc-transition);
}
.cc-theme:hover { transform: translateY(-4px); box-shadow: var(--cc-shadow-md); color: var(--cc-black); text-decoration:none; }
.cc-theme__no { font-family: var(--cc-font-serif); font-size: 2.4rem; color: var(--cc-grey-300); line-height:1; }
.cc-theme__title { font-family: var(--cc-font-serif); font-size: 1.25rem; font-weight:600; margin-top:.4rem; }
/* Research themes are keyed to the research accent (gold) */
.cc-theme::before { content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background: var(--cc-gold); }
.cc-theme__no { color: var(--cc-gold-50); }

/* ----------  8. PROMO / FEATURE STRIP  ---------- */
.cc-feature { display:grid; grid-template-columns: 1.1fr .9fr; gap: 0; background: var(--cc-grey-100); border-radius: var(--cc-radius-lg); overflow:hidden; }
.cc-feature__media { min-height: 320px; background: var(--cc-grey-300); }
.cc-feature__media img { width:100%; height:100%; object-fit:cover; }
.cc-feature__body { padding: clamp(1.5rem, 1rem + 2vw, 3rem); align-self:center; }
@media (max-width: 767px){ .cc-feature{ grid-template-columns: 1fr; } }

/* ----------  9. NEWSLETTER  ---------- */
.cc-subscribe { background: var(--cc-brown); color:#fff; }
.cc-subscribe h2 { color:#fff; }
.cc-subscribe .form-control { border:0; border-radius: var(--cc-radius); padding:.85rem 1rem; }
.cc-subscribe__form { display:flex; gap:.6rem; flex-wrap:wrap; max-width:520px; }
.cc-subscribe__form .form-control { flex:1; min-width: 220px; }

/* ----------  10. FILTER SIDEBAR + LIST  ---------- */
.cc-filters { border:1px solid var(--cc-border); border-radius: var(--cc-radius-lg); padding: 1.2rem; position: sticky; top: calc(var(--cc-header-h) + 1rem); }
.cc-filters h3 { font-family: var(--cc-font-sans); font-size: .8rem; letter-spacing:.12em; text-transform:uppercase; color: var(--cc-grey-500); margin: 1rem 0 .5rem; }
.cc-filters h3:first-child { margin-top:0; }
.cc-filter-opt { display:flex; align-items:center; gap:.5rem; padding:.25rem 0; font-size:.95rem; }
.cc-result { display:grid; grid-template-columns: 220px 1fr; gap: 1.25rem; padding: 1.5rem 0; border-bottom:1px solid var(--cc-border); }
.cc-result__media { aspect-ratio: 4/3; border-radius: var(--cc-radius); overflow:hidden; background: var(--cc-grey-200); }
.cc-result__media img { width:100%; height:100%; object-fit:cover; }
@media (max-width: 575px){ .cc-result{ grid-template-columns: 1fr; } }

/* Pagination */
.cc-pagination { display:flex; gap:.4rem; justify-content:center; margin-top:2.5rem; list-style:none; padding:0; }
.cc-pagination a, .cc-pagination span { display:inline-flex; min-width:42px; height:42px; align-items:center; justify-content:center; border:1px solid var(--cc-border); border-radius: var(--cc-radius); color: var(--cc-ink); font-weight:600; }
.cc-pagination .is-active { background: var(--cc-black); color:#fff; border-color: var(--cc-black); }

/* Breadcrumbs */
.cc-breadcrumb { font-size:.85rem; color: var(--cc-muted); padding: 1rem 0; }
.cc-breadcrumb a { color: var(--cc-grey-700); }
.cc-breadcrumb .sep { margin: 0 .5rem; color: var(--cc-grey-300); }

/* ----------  11. ARTICLE / SINGLE  ---------- */
.cc-article { max-width: 760px; }
.cc-article p { font-size: 1.08rem; }
.cc-article h2 { margin-top: 2.2rem; }
.cc-article blockquote { border-left: 4px solid var(--cc-gold); padding-left: 1.2rem; margin: 1.5rem 0; font-family: var(--cc-font-serif); font-size: 1.3rem; color: var(--cc-grey-900); }
.cc-article figure img { border-radius: var(--cc-radius-lg); }
.cc-article figcaption { font-size:.82rem; color: var(--cc-muted); margin-top:.5rem; }
.cc-meta-bar { display:flex; flex-wrap:wrap; gap:1rem 1.5rem; align-items:center; font-size:.9rem; color: var(--cc-grey-700); padding: 1rem 0; border-top:1px solid var(--cc-border); border-bottom:1px solid var(--cc-border); }

/* Download / citation box */
.cc-download { border:1px solid var(--cc-border); border-radius: var(--cc-radius-lg); padding: 1.25rem; background: var(--cc-grey-100); }
.cc-download__row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.6rem 0; border-bottom:1px solid var(--cc-border); }
.cc-download__row:last-child{ border-bottom:0; }

/* Staff */
.cc-staff { text-align:center; }
.cc-staff__photo { aspect-ratio:1; border-radius: 50%; overflow:hidden; background: var(--cc-grey-200); margin: 0 auto .9rem; max-width: 170px; }
.cc-staff__photo img { width:100%; height:100%; object-fit:cover; }
.cc-staff__name { font-family: var(--cc-font-serif); font-weight:600; font-size:1.1rem; }
.cc-staff__role { font-size:.85rem; color: var(--cc-muted); }

/* ----------  12. FOOTER  ---------- */
.cc-footer { background: var(--cc-black); color: rgba(255,255,255,.78); }
.cc-footer a { color: rgba(255,255,255,.78); }
.cc-footer a:hover { color:#fff; }
.cc-footer__top { padding-block: 3.5rem; }
.cc-footer__title { font-family: var(--cc-font-sans); font-size: var(--cc-fs-eyebrow); letter-spacing:.12em; text-transform:uppercase; color:#fff; font-weight:700; margin-bottom: 1rem; }
.cc-footer ul { list-style:none; padding:0; margin:0; }
.cc-footer li { margin-bottom:.5rem; font-size:.92rem; }
.cc-footer__brand { max-width: 260px; }
.cc-footer__brand svg, .cc-footer__brand img { height:64px; width:auto; margin-bottom:1rem; display:block; }
.cc-footer__partners { display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; padding: 1.5rem 0; border-top:1px solid rgba(255,255,255,.14); }
.cc-footer__partner { background:#fff; border-radius: var(--cc-radius); padding:.5rem .8rem; font-weight:700; color: var(--cc-black); font-size:.85rem; }
.cc-footer__bottom { border-top: 1px solid rgba(255,255,255,.14); padding-block: 1.25rem; font-size:.82rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; }

/* ----------  13. FORMS  ---------- */
.form-control, .form-select {
  border:1px solid var(--cc-grey-300); border-radius: var(--cc-radius); padding:.7rem .9rem; font-size:.98rem;
}
.form-control:focus, .form-select:focus { border-color: var(--cc-gold); box-shadow: 0 0 0 .2rem rgba(240,164,0,.25); }
.cc-form-card { max-width: 460px; margin-inline:auto; border:1px solid var(--cc-border); border-radius: var(--cc-radius-lg); padding: 2rem; box-shadow: var(--cc-shadow-sm); }
label { font-weight:600; font-size:.9rem; margin-bottom:.3rem; display:inline-block; }

/* ----------  13b. SEARCH OVERLAY  ---------- */
.cc-search-overlay { position: fixed; inset: 0; background: rgba(20,20,20,.94); z-index: 1060; display: none; align-items: flex-start; justify-content: center; padding-top: 14vh; }
.cc-search-overlay.is-open { display: flex; }
.cc-search-overlay__box { width: min(680px, 90vw); }
.cc-search-overlay input { width: 100%; font-size: 1.5rem; padding: 1rem 0; background: transparent; border: 0; border-bottom: 3px solid var(--cc-gold); color: #fff; }
.cc-search-overlay input::placeholder { color: rgba(255,255,255,.5); }
.cc-search-overlay input:focus { outline: 0; box-shadow: none; }
.cc-search-overlay__hint { color: rgba(255,255,255,.6); font-size: .85rem; margin-top: 1rem; }
.cc-search-overlay__close { position: absolute; top: 1.5rem; right: 1.5rem; background: none; border: 0; color: #fff; font-size: 1.6rem; cursor: pointer; }

/* ----------  12b. FOOTER PARTNER LOGOS  ---------- */
.cc-footer__partner { display: inline-flex; align-items: center; }
.cc-footer__partner img { height: 39px; width: auto; display: block; }

/* ----------  7b. IMAGE TILES (GCRO-style, version C)  ---------- */
.cc-tile {
  position: relative; display: block; border-radius: var(--cc-radius-lg); overflow: hidden;
  aspect-ratio: 4/5; background: var(--cc-grey-300); color: #fff;
  transition: transform var(--cc-transition), box-shadow var(--cc-transition);
}
.cc-tile:hover { transform: translateY(-4px); box-shadow: var(--cc-shadow-lg); color: #fff; text-decoration: none; }
.cc-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cc-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,20,20,0) 30%, rgba(20,20,20,.38) 55%, rgba(20,20,20,.9) 100%); z-index: 1; }
.cc-tile__chip { position: absolute; top: 1rem; left: 1rem; z-index: 2; }
.cc-tile__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.25rem; }
.cc-tile__title { font-family: var(--cc-font-serif); font-weight: 600; font-size: 1.2rem; color: #fff; margin: .4rem 0 .25rem; line-height: 1.2; }
.cc-tile__meta { font-size: var(--cc-fs-small); color: rgba(255,255,255,.85); }
.cc-tile__bar { position: absolute; top: 0; left: 0; right: 0; height: 5px; z-index: 2; background: var(--cc-gold); }
.cc-tile--output .cc-tile__bar { background: var(--cc-green); }
.cc-tile--news .cc-tile__bar { background: var(--cc-red); }
.cc-tile--event .cc-tile__bar { background: var(--cc-brown); }

/* Mission statement — heading style used for the intro statement */
.cc-statement { font-family: var(--cc-font-serif); font-weight: 600; color: var(--cc-black); font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.5rem); line-height: 1.35; letter-spacing: -0.01em; }

/* ----------  16. IMAGE EMPTY-STATE  ----------
   Shows a branded placeholder mark whenever an image slot has no image.
   In production: render the <img> only when the CMS item has an upload;
   when it doesn't, this background shows through automatically.
   Also covers broken URLs via onerror="this.remove()" on the <img>. */
.cc-card__media, .cc-feature__media, .cc-tile {
  background-color: var(--cc-grey-100);
  background-image: url("../img/placeholder-mark.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 76px auto;
}
.cc-card__media img, .cc-feature__media img { position: relative; z-index: 1; }

/* ----------  7d. MOSAIC (version C) — varied-size image-tile grid  ----------
   Desktop (>=992px): 4 columns. Left two columns = six small square tiles (2x3);
   top-right = a large 2x2 feature; bottom-right = an auto-rotating promo (2x1).
   Smaller screens: everything reflows to 2 columns / single column. */
.cc-mosaic { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.cc-mosaic > .cc-tile { aspect-ratio: 1 / 1; }
.cc-mosaic > .cc-tile--feature { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.cc-mosaic > .cc-rotator { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
@media (min-width: 992px) {
  .cc-mosaic { grid-template-columns: repeat(4, 1fr); }
  .cc-mosaic > .cc-tile--feature { grid-column: 3 / 5; grid-row: 1 / 3; aspect-ratio: auto; }
  .cc-mosaic > .cc-rotator { grid-column: 3 / 5; grid-row: 3 / 4; aspect-ratio: auto; }
}
.cc-tile--feature .cc-tile__title { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); }
.cc-tile--feature .cc-tile__body { padding: 1.6rem; }

/* Auto-rotating promo block (the "changing" tile) */
.cc-rotator { position: relative; border-radius: var(--cc-radius-lg); overflow: hidden; background: var(--cc-grey-200); }
.cc-rotator__slide { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; opacity: 0; border-radius: 0; transition: opacity .6s ease; pointer-events: none; }
.cc-rotator__slide.is-active { opacity: 1; pointer-events: auto; }
.cc-rotator__dots { position: absolute; bottom: .7rem; right: .9rem; z-index: 4; display: flex; gap: .4rem; }
.cc-rotator__dots button { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; background: rgba(255,255,255,.45); cursor: pointer; }
.cc-rotator__dots button.is-active { background: #fff; }

/* ----------  17. NAV LOGO HOVER (monotone -> full colour)  ---------- */
.cc-logo { position: relative; }
.cc-logo img { transition: opacity .2s ease; }
.cc-logo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("../img/logo-colour.png") left center / 100% 100% no-repeat;
  opacity: 0; transition: opacity .2s ease;
}
.cc-logo:hover img { opacity: 0; }
.cc-logo:hover::after { opacity: 1; }

/* ----------  18. INNER PAGES (header band, content flag, prose)  ---------- */
.cc-pagehead { background: var(--cc-black); color:#fff; position:relative; overflow:hidden; }
.cc-pagehead__media { position:absolute; inset:0; }
.cc-pagehead__media img { width:100%; height:100%; object-fit:cover; opacity:1; }
.cc-pagehead__media::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(20,20,20,.86), rgba(20,20,20,.55)); }
.cc-pagehead__inner { position:relative; z-index:2; padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); max-width:780px; }
.cc-pagehead h1 { color:#fff; margin:.2rem 0 .5rem; }
.cc-pagehead .cc-eyebrow { color: var(--cc-gold); }
.cc-pagehead__lead { color:rgba(255,255,255,.9); font-size:var(--cc-fs-lead); margin:0; }
.cc-pagehead .cc-breadcrumb { color:rgba(255,255,255,.6); padding-bottom:.4rem; }
.cc-pagehead .cc-breadcrumb a { color:rgba(255,255,255,.8); }
.cc-pagehead .cc-breadcrumb .sep { color:rgba(255,255,255,.4); }

/* Content-to-supply flag (clearly marks example/placeholder content for UFS) */
.cc-flag { display:inline-flex; align-items:center; gap:.4rem; font-family:var(--cc-font-sans); font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#7a5b00; background:#fff6df; border:1px solid #f0d98a; padding:.25rem .6rem; border-radius:100px; }
.cc-flag::before { content:"\f071"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:.85em; }
.cc-flag--block { display:flex; width:100%; padding:.7rem 1rem; border-radius:var(--cc-radius); text-transform:none; letter-spacing:0; font-weight:600; }

/* Prose for article/detail bodies */
.cc-prose p { font-size:1.05rem; color:var(--cc-grey-900); }
.cc-prose h2 { margin-top:2.2rem; font-size:1.5rem; }
.cc-prose h3 { margin-top:1.6rem; }
.cc-prose ul { margin:0 0 1.2rem 1.2rem; }
.cc-prose li { margin-bottom:.45rem; }
.cc-sidebar-card { border:1px solid var(--cc-border); border-radius:var(--cc-radius-lg); padding:1.25rem; }
.cc-sidebar-card h3 { font-family:var(--cc-font-sans); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cc-grey-500); margin:0 0 .8rem; }

.cc-nav__link[aria-current="page"] { color: var(--cc-red); }

/* §19 Partner logo cards (About > Who we work with) */
.cc-partner-logo { flex:1 0 auto; min-height:90px; display:flex; align-items:center; justify-content:center; padding:.5rem 0; }
.cc-partner-logo img { max-height:64px; max-width:100%; width:auto; object-fit:contain; }
.cc-partner-mark { font-family:var(--cc-font-serif); font-weight:600; font-size:1.6rem; color:var(--cc-ink); letter-spacing:.02em; }

/* Partner cards as links (open institution site in new tab) */
.cc-partner-link { text-decoration:none; color:inherit; transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.cc-partner-link:hover, .cc-partner-link:focus-visible { border-color:var(--cc-gold); box-shadow:0 6px 18px rgba(0,0,0,.07); transform:translateY(-2px); }
.cc-partner-link:focus-visible { outline:2px solid var(--cc-gold); outline-offset:2px; }.cc-reflist { padding-left:1.1rem; margin-top:.5rem; }
.cc-reflist li { margin-bottom:.55rem; font-size:.93rem; color:var(--cc-grey-700); line-height:1.5; }
/* Category pills (chips) hug their content — never stretch full-width in flex columns */
.cc-chip { align-self: flex-start; }

/* Overlaid category pill on card media (top-left, aligned with body text) */
.cc-card__chip { position: absolute; top: .9rem; left: 1.25rem; z-index: 2; display: flex; gap: .4rem; flex-wrap: wrap; }
.cc-card__chip .cc-chip { box-shadow: 0 1px 4px rgba(0,0,0,.25); }
/* Featured: clickable title + media link */
.cc-feature__media { display: block; }
.cc-feature__body h2 a { color: var(--cc-black); }
.cc-feature__body h2 a:hover { color: var(--cc-red); text-decoration: none; }

/* ---- Core image fallback (ALWAYS ON, production behaviour) ----
   Each image slot carries its branded placeholder as a background. A real <img>
   sits on top and covers it; when no image is inserted (or it fails / is switched
   off by the demo toggle) the placeholder shows through automatically. */
.cc-card__media, .cc-feature__media, .cc-result__media, .cc-tile { background: #e9e7e4 url("../img/ph-grey.svg") center / cover no-repeat; }
.cc-staff__photo { background: #e9e7e4 url("../img/ph-staff.svg") center / cover no-repeat; }
.cc-hero__media, .cc-pagehead__media { background: #1c1c1c url("../img/ph-hero.svg") center / cover no-repeat; }
.cc-card__media img, .cc-feature__media img, .cc-result__media img, .cc-staff__photo img { position: relative; z-index: 1; }
/* Reserve room for the native dropdown arrow (the shared form padding above clipped it) */
.form-select { padding-right: 2.4rem; background-position: right .75rem center; }

/* Standalone auth screen (login) — no site header/footer */
.cc-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2.5rem 1rem; background: var(--cc-grey-100); }
.cc-auth__inner { width: 100%; max-width: 430px; }
.cc-auth__logo { display: block; text-align: center; margin: 0 auto 1.5rem; }
.cc-auth__logo img { height: 56px; width: auto; }

/* About — team avatar row (fun stacked mini-portraits before 'Meet the team') */
.cc-team-avatars { display: inline-flex; }
.cc-team-avatars img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--cc-border); margin-left: -8px; }
.cc-team-avatars img:first-child { margin-left: 0; }
.cc-team-link { font-weight: 600; white-space: nowrap; }
/* ============================================================
   NEWS & EVENTS — dedicated subpage layouts (v2)
   ============================================================ */

/* Shared: intro note under a pagehead */
.cc-ne-intro { max-width: 70ch; color: var(--cc-grey-700); font-size: 1.05rem; }
.cc-ne-intro a { color: var(--cc-accent-ink); font-weight: 600; }

/* ---- NEWSLETTERS: date-forward timeline list ---------------- */
.cc-nl { border-top: 1px solid var(--cc-border); }
.cc-nl__item {
  display: grid;
  grid-template-columns: 150px 1fr 200px;
  gap: 1.75rem;
  align-items: center;
  padding: 1.75rem 0 1.75rem 1.25rem;
  border-bottom: 1px solid var(--cc-border);
  border-left: 3px solid transparent;
  transition: border-color .15s ease, background .15s ease;
}
.cc-nl__item:hover { border-left-color: var(--cc-gold); background: var(--cc-surface-alt); }
.cc-nl__date { font-family: var(--cc-font-serif); line-height: 1; text-align: left; }
.cc-nl__date .m { display: block; font-size: 1.7rem; font-weight: 700; color: var(--cc-accent-ink); }
.cc-nl__date .y { display: block; font-size: 1.1rem; color: var(--cc-muted); margin-top: .15rem; }
.cc-nl__date .vol { display: block; font-family: var(--cc-font-sans); font-size: .68rem; letter-spacing: .02em; text-transform: uppercase; color: var(--cc-muted); margin-top: .5rem; white-space: nowrap; }
.cc-nl__body h3 { font-size: 1.3rem; margin: 0 0 .4rem; }
.cc-nl__body h3 a { color: var(--cc-ink); }
.cc-nl__body h3 a:hover { color: var(--cc-accent-ink); }
.cc-nl__body p { color: var(--cc-grey-700); margin: 0 0 .6rem; }
.cc-nl__more { font-weight: 600; color: var(--cc-accent-ink); font-size: .9rem; }
.cc-nl__more i { font-size: .75rem; }
.cc-nl__thumb { position: relative; aspect-ratio: 4/3; border-radius: var(--cc-radius); overflow: hidden; background: var(--cc-surface-alt); box-shadow: 0 1px 0 var(--cc-border); }
.cc-nl__thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 768px) {
  .cc-nl__item { grid-template-columns: 1fr; gap: .85rem; padding-left: 1rem; }
  .cc-nl__date { display: flex; align-items: baseline; gap: .5rem; }
  .cc-nl__date .y { margin-top: 0; }
  .cc-nl__date .vol { margin-left: auto; }
  .cc-nl__thumb { max-width: 280px; }
}

/* ---- LETTERS FROM THE CHAIR: portrait lead + date-led list -- */
.cc-letters-lead {
  display: grid; grid-template-columns: 160px 1fr; gap: 1.75rem; align-items: center;
  padding: 1.5rem; margin-bottom: 2.25rem;
  background: var(--cc-surface-alt); border-radius: var(--cc-radius-lg);
  border-left: 4px solid var(--cc-gold);
}
.cc-letters-lead__img { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--cc-border); }
.cc-letters-lead__txt h2 { font-size: 1.4rem; margin: 0 0 .35rem; }
.cc-letters-lead__txt p { margin: 0; color: var(--cc-grey-700); }
.cc-letters-lead__txt .cc-eyebrow { color: var(--cc-accent-ink); }
@media (max-width: 640px) { .cc-letters-lead { grid-template-columns: 1fr; justify-items: center; text-align: center; } .cc-letters-lead__img { width: 120px; height: 120px; } }

.cc-letterlist { border-top: 1px solid var(--cc-border); }
.cc-letterlist__item {
  display: grid; grid-template-columns: 150px 1fr; gap: 1.75rem; align-items: baseline;
  padding: 1.5rem 0 1.5rem 1.25rem; border-bottom: 1px solid var(--cc-border);
  border-left: 3px solid transparent; transition: border-color .15s ease, background .15s ease;
}
.cc-letterlist__item:hover { border-left-color: var(--cc-gold); background: var(--cc-surface-alt); }
.cc-letterlist__date { font-family: var(--cc-font-serif); font-size: 1.05rem; color: var(--cc-accent-ink); font-weight: 600; }
.cc-letterlist__date .d { display:block; font-size: 2.1rem; font-weight: 700; color: var(--cc-ink); line-height: .95; }
.cc-letterlist__body h3 { font-size: 1.3rem; margin: 0 0 .4rem; }
.cc-letterlist__body h3 a { color: var(--cc-ink); }
.cc-letterlist__body h3 a:hover { color: var(--cc-accent-ink); }
.cc-letterlist__body p { color: var(--cc-grey-700); margin: 0 0 .6rem; }
.cc-letterlist__more { font-weight: 600; color: var(--cc-accent-ink); font-size: .9rem; }
@media (max-width: 640px) { .cc-letterlist__item { grid-template-columns: 1fr; gap: .5rem; padding-left: 1rem; } .cc-letterlist__date .d { display:inline; font-size: 1.4rem; } }

/* ---- MEDIA: citation list, year accordions (GCRO-close) ----- */
.cc-media__year { border: 1px solid var(--cc-border); border-radius: var(--cc-radius); margin-bottom: 1rem; overflow: hidden; }
.cc-media__year > summary {
  list-style: none; cursor: pointer; padding: .5rem 1.1rem; font-weight: 700; font-size: .98rem;
  background: var(--cc-brown-50); color: var(--cc-ink); display: flex; justify-content: space-between; align-items: center;
  transition: background .15s ease, color .15s ease;
}
.cc-media__year[open] > summary { background: var(--cc-red); color: #fff; }
.cc-media__year > summary::-webkit-details-marker { display: none; }
.cc-media__year > summary::after { content: "\002B"; font-weight: 400; font-size: 1.3rem; line-height: 1; }
.cc-media__year[open] > summary::after { content: "\2212"; }
.cc-media__inner { padding: 1.25rem 1.5rem 1.5rem; }
.cc-media__group { font-family: var(--cc-font-serif); font-size: 1.15rem; font-weight: 600; color: var(--cc-ink); margin: 1.25rem 0 .75rem; }
.cc-media__group:first-child { margin-top: 0; }
.cc-media__item { padding: .5rem 0; border-bottom: 1px dotted var(--cc-border); color: var(--cc-grey-900); line-height: 1.55; }
.cc-media__item:last-child { border-bottom: 0; }
.cc-media__item a { color: var(--cc-accent-ink); font-weight: 600; }
.cc-media__item .src { font-style: italic; }

/* ---- EVENTS: banner image + date badge, upcoming / past ----- */
.cc-eventlist { display: flex; flex-direction: column; gap: 1.5rem; }
.cc-event-row {
  display: grid; grid-template-columns: 320px 1fr; gap: 0;
  border: 1px solid var(--cc-border); border-radius: var(--cc-radius-lg); overflow: hidden;
  background: var(--cc-surface); transition: box-shadow .15s ease, transform .15s ease;
}
.cc-event-row:hover { box-shadow: 0 10px 30px rgba(0,0,0,.08); transform: translateY(-2px); }
.cc-event-row__media { position: relative; min-height: 200px; background: var(--cc-surface-alt); }
.cc-event-row__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cc-event-date {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  background: var(--cc-accent); color: #fff; border-radius: var(--cc-radius); padding: .5rem .7rem;
  text-align: center; font-family: var(--cc-font-serif); line-height: 1; box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.cc-event-date .d { display: block; font-size: 1.7rem; font-weight: 700; }
.cc-event-date .my { display: block; font-size: .75rem; font-family: var(--cc-font-sans); letter-spacing: .03em; margin-top: .2rem; text-transform: uppercase; }
.cc-event-row__body { padding: 1.5rem 1.75rem; display: flex; flex-direction: column; }
.cc-event-row__time { font-size: .85rem; color: var(--cc-muted); font-weight: 600; margin-bottom: .4rem; }
.cc-event-row__time i { color: var(--cc-accent-ink); }
.cc-event-row__body h3 { font-size: 1.35rem; margin: 0 0 .5rem; }
.cc-event-row__body h3 a { color: var(--cc-ink); }
.cc-event-row__body h3 a:hover { color: var(--cc-accent-ink); }
.cc-event-row__body p { color: var(--cc-grey-700); margin: 0 0 1rem; }
.cc-event-row__actions { margin-top: auto; display: flex; gap: .75rem; flex-wrap: wrap; }
.cc-event-row.is-past .cc-event-date { background: var(--cc-brown); }
@media (max-width: 768px) { .cc-event-row { grid-template-columns: 1fr; } .cc-event-row__media { min-height: 180px; } }

/* ---- SINGLE (article) shared: long-form reading ------------- */
.cc-article { max-width: 760px; }
.cc-article__date { color: var(--cc-accent-ink); font-weight: 600; font-size: .95rem; margin-bottom: .5rem; }
.cc-article__lead { font-family: var(--cc-font-serif); font-size: 1.25rem; line-height: 1.6; color: var(--cc-grey-900); margin-bottom: 1.5rem; }
.cc-article p { line-height: 1.75; margin-bottom: 1.1rem; color: var(--cc-grey-900); }
.cc-article h2 { font-size: 1.4rem; margin: 1.75rem 0 .75rem; }
.cc-letter-portrait { float: right; width: 130px; height: 130px; border-radius: 50%; object-fit: cover; margin: 0 0 1rem 1.5rem; box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--cc-border); }
.cc-letter-sign { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--cc-border); }
.cc-letter-sign .name { font-family: var(--cc-font-serif); font-size: 1.15rem; font-weight: 700; color: var(--cc-ink); }
.cc-letter-sign .role { color: var(--cc-muted); font-size: .9rem; }
.cc-media-cite { background: var(--cc-surface-alt); border-left: 4px solid var(--cc-gold); border-radius: var(--cc-radius); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; }
.cc-media-cite .src { font-style: italic; color: var(--cc-grey-700); }

/* ---- Placeholder backups + demo-toggle wiring for N&E v2 ---- */
.cc-nl__thumb, .cc-event-row__media { background: #e9e7e4 url("../img/ph-grey.svg") center / cover no-repeat; }
.cc-letters-lead__photo, .cc-letter-portrait { background: #e9e7e4 url("../img/ph-staff.svg") center / cover no-repeat; }
.cc-nl__thumb img { position: relative; z-index: 1; }
.cc-event-row__media img { z-index: 1; }/* portrait containers (replace bare imgs) */
.cc-letters-lead__photo { display:block; width:160px; height:160px; border-radius:50%; overflow:hidden; box-shadow:0 0 0 4px #fff, 0 0 0 5px var(--cc-border); }
.cc-letters-lead__photo img { width:100%; height:100%; object-fit:cover; }
.cc-letter-portrait { display:block; float:right; width:130px; height:130px; border-radius:50%; overflow:hidden; margin:0 0 1rem 1.5rem; box-shadow:0 0 0 4px #fff, 0 0 0 5px var(--cc-border); }
.cc-letter-portrait img { width:100%; height:100%; object-fit:cover; }
@media (max-width: 640px){ .cc-letters-lead__photo { width:120px; height:120px; } }

/* Newsletter list thumbnail -> portrait, keep height the same (~150px) */
.cc-nl__item .cc-nl__thumb { aspect-ratio: 3 / 4; height: 150px; width: auto; justify-self: end; margin-right: 1.25rem; }


/* Letter single: face beside the signed name */
.cc-letter-sign { display: flex; align-items: center; gap: 1rem; }
.cc-letter-sign__photo { display: block; flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: #e9e7e4 url("../img/ph-staff.svg") center / cover no-repeat; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--cc-border); }
.cc-letter-sign__photo img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
/* ============================================================
   OUTPUTS / PUBLICATIONS — GCRO-style list (portrait covers)
   ============================================================ */
.cc-pub { display: grid; grid-template-columns: 160px 1fr; gap: 1.5rem; padding: 1.5rem 0; border-bottom: 1px solid var(--cc-border); }
.cc-pub__media { position: relative; align-self: start; width: 160px; aspect-ratio: 3/4; border-radius: var(--cc-radius); overflow: hidden; background: #e9e7e4 url("../img/ph-grey.svg") 85% center / cover no-repeat; box-shadow: 0 1px 0 var(--cc-border); display: block; }
.cc-pub__media img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }.cc-pub__body { min-width: 0; }
.cc-pub__type { font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--cc-muted); font-weight: 700; }
.cc-pub__body h3 { font-size: 1.25rem; margin: .2rem 0 .5rem; }
.cc-pub__body h3 a { color: var(--cc-ink); }
.cc-pub__body h3 a:hover { color: var(--cc-accent-ink); }
.cc-pub__excerpt { color: var(--cc-grey-700); margin: 0 0 .55rem; }
.cc-pub__byline { font-size: .85rem; color: var(--cc-muted); margin: 0 0 .75rem; }
.cc-pub__byline em { color: var(--cc-grey-700); }
.cc-pub__foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem; }
.cc-pub__date { font-size: .85rem; color: var(--cc-muted); }
@media (max-width: 560px) { .cc-pub { grid-template-columns: 120px 1fr; gap: 1rem; } .cc-pub__media { width: 120px; } }

/* Lazy-load "Load more" for all list views */
.cc-loadmore { text-align: center; margin-top: 2.25rem; }
[data-loadmore] > .is-hidden { display: none !important; }
.cc-spin { animation: cc-spin .7s linear infinite; }
@keyframes cc-spin { to { transform: rotate(360deg); } }

/* ============================================================
   MOSAIC (home variant) — aligned 2-row × 4-col layout
   ============================================================ */
.cc-mtiles { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.cc-mtiles > * { position: relative; min-height: 220px; border-radius: var(--cc-radius-lg); overflow: hidden; }
@media (min-width: 768px) {
  .cc-mtiles { grid-template-columns: repeat(4, 1fr); grid-template-rows: 235px 235px;
    grid-template-areas: "letters media news outputs" "events events news outputs"; }
  .cc-mtiles .m-letters { grid-area: letters; }
  .cc-mtiles .m-media   { grid-area: media; }
  .cc-mtiles .m-events  { grid-area: events; }
  .cc-mtiles .m-news    { grid-area: news; }
  .cc-mtiles .m-outputs { grid-area: outputs; }
}

/* Mosaic tiles fill their grid area (override base .cc-tile aspect-ratio) */
.cc-mtiles .cc-tile, .cc-mtiles .cc-rotator { aspect-ratio: auto; height: 100%; }

/* Mobile: collapsible output filter panel */
@media (max-width: 991.98px) {
  .cc-filters { display: none; }
  .cc-filters.is-open { display: block; }
}
.cc-filter-toggle__chev { transition: transform .2s ease; }
[data-filter-toggle][aria-expanded="true"] .cc-filter-toggle__chev { transform: rotate(180deg); }

/* Mobile filter panel actions */
.cc-filters__actions { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--cc-border); }

/* Anchor offset for in-page links under the sticky header */
.cc-prose h2 { scroll-margin-top: calc(var(--cc-header-h) + 1.5rem); }

/* Footer partners: stack centred on mobile */
@media (max-width: 575.98px) {
  .cc-footer__partners { flex-direction: column; align-items: center; text-align: center; gap: .9rem; }
  .cc-footer__partner { align-self: center; }
}
/* Any in-page anchor target clears the sticky header */
:target { scroll-margin-top: calc(var(--cc-header-h) + 1.5rem); }

/* In-page lead figure for research theme pages */
.cc-prose-fig { position: relative; display: block; width: 100%; aspect-ratio: 16/9; border-radius: var(--cc-radius-lg); overflow: hidden; margin: 0 0 1.5rem; background: #e9e7e4 url("../img/ph-grey.svg") center / cover no-repeat; }
.cc-prose-fig img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
/* Outputs filter dropdown bar (replaces left sidebar) */
.cc-filterbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.5rem; }
.cc-filtermenu { min-width: 300px; max-width: 360px; padding: 1rem 1.15rem; }
.cc-filtermenu h4 { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cc-muted); margin: 1rem 0 .45rem; }
.cc-filtermenu h4:first-child { margin-top: 0; }
.cc-filtermenu .cc-filter-opt { margin: .15rem 0; }
.cc-filtermenu__cols { columns: 2; column-gap: 1rem; }
/* Outputs landing cards */
.cc-outcard { display:flex; flex-direction:column; height:100%; }
.cc-outcard .cc-card__body { flex:1 1 auto; }

.cc-cite__view { white-space: nowrap; font-weight: 600; color: var(--cc-accent-ink); font-size: .85rem; margin-left: .35rem; }
a.cc-outcard:hover .cc-card__title { color: var(--cc-accent-ink); }
a.cc-outcard .cc-card__title { color: var(--cc-ink); }

/* Mosaic Version B — newsletter replaced with Staff + Students */
@media (min-width: 768px) {
  .cc-mtiles--b { grid-template-areas: "bmedia bstaff bstudents boutputs" "bevents bevents bpartner boutputs"; }
  .cc-mtiles--b .m-bmedia { grid-area: bmedia; }
  .cc-mtiles--b .m-bstaff { grid-area: bstaff; }
  .cc-mtiles--b .m-bstudents { grid-area: bstudents; }
  .cc-mtiles--b .m-bevents { grid-area: bevents; }
  .cc-mtiles--b .m-bpartner { grid-area: bpartner; }
  .cc-mtiles--b .m-boutputs { grid-area: boutputs; }
}
.cc-mtiles__label { font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cc-accent-ink); margin: 0 0 .6rem; }
.cc-mtiles + .cc-mtiles__label { margin-top: 2rem; }

/* Outputs full-width accordion filter (portrait categories) */
.cc-filterblock { border: 1px solid var(--cc-border); border-radius: var(--cc-radius-lg); margin-bottom: 1.5rem; overflow: hidden; }
.cc-filterblock > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: .8rem 1.15rem; font-weight: 600; color: var(--cc-ink); background: var(--cc-surface-alt); }
.cc-filterblock > summary::-webkit-details-marker { display: none; }
.cc-filterblock > summary i.fa-filter { color: var(--cc-accent-ink); }
.cc-filterblock__chev { transition: transform .2s ease; color: var(--cc-muted); }
.cc-filterblock[open] .cc-filterblock__chev { transform: rotate(180deg); }
.cc-filterblock__body { padding: 1.1rem 1.25rem 1.3rem; border-top: 1px solid var(--cc-border); display: grid; grid-template-columns: 1fr 1.5fr 1.5fr; gap: 1.25rem 2rem; }
.cc-filterblock__group h4 { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cc-muted); margin: 0 0 .5rem; }
.cc-filterblock__group .cc-fgroup-title { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cc-muted); margin: 0 0 .5rem; font-weight: 700; }
.cc-filterblock__cols { columns: 2; column-gap: 1.5rem; }
@media (max-width: 640px) { .cc-filterblock__body { grid-template-columns: 1fr; } }

/* Output item action links (GCRO "Read more | Download" style) */
.cc-pub__actions { display: inline-flex; align-items: center; gap: .5rem; font-size: .88rem; font-weight: 600; }
.cc-pub__actions a { color: var(--cc-accent-ink); }
.cc-pub__sep { color: var(--cc-grey-300); font-weight: 400; }

/* Output item: action links aligned to the top, on the eyebrow line */
.cc-pub__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.cc-pub__top .cc-pub__type { padding-top: .15rem; }

/* Outputs list constrained to 2/3 width on desktop */
@media (min-width: 768px) { .cc-outcol { max-width: 66%; } }