/* ===========================================================================
 * Campus — campus.css
 * Product-specific composition. Loads THIRD, after carbon-core.css and
 * carbon-components.css (see src/views/partials/head.ejs).
 *
 * Scope rule: this file only ever composes — page rhythm, column behaviour,
 * list gaps, disclosure state. Every component's *look* stays owned by
 * carbon-core.css / carbon-components.css. Nothing here invents a visual
 * language: it is Carbon tokens and Carbon spacing only.
 *
 * HARD RULES inherited from the design system
 *   - no rounded corners (the universal reset in carbon-core.css sets
 *     border-radius: 0; nothing here overrides it)
 *   - headings are weight 300/400; only heading-01/02 and
 *     heading-compact-01 are 600
 *   - no external requests
 *
 * Contents
 *   1. Shared page rhythm
 *   2. Employer — search (filter rail, results, candidate tiles, empty state)
 *   3. Employer — candidate detail
 *   4. Employer — shortlist and compare
 *   5. Employer — outreach
 *   6. Employer — status pages
 * ======================================================================== */


/* ---------------------------------------------------------------------------
 * 1. SHARED PAGE RHYTHM
 * ------------------------------------------------------------------------ */

.campus-page-header {
  margin-block-end: var(--cds-spacing-07);
}

.campus-page-header__eyebrow {
  margin: 0 0 var(--cds-spacing-03);
  color: var(--cds-text-secondary);
}

.campus-page-header h1,
.campus-page-header .campus-page-header__title {
  margin: 0;
}

.campus-page-header__lede {
  max-width: 40rem;
  margin: var(--cds-spacing-03) 0 0;
  color: var(--cds-text-secondary);
}

/* A section inside a page: heading plus its content. */
.campus-section {
  margin-block-start: var(--cds-spacing-08);
}

.campus-section__title {
  margin: 0 0 var(--cds-spacing-05);
  padding-block-end: var(--cds-spacing-03);
  border-block-end: 1px solid var(--cds-border-subtle-00);
}

/* Horizontal run of buttons / links. */
.campus-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cds-spacing-03);
  margin-block-start: var(--cds-spacing-05);
}

.campus-actions form {
  display: inline-flex;
  margin: 0;
}

/* Tags never wrap tightly enough on their own. */
.campus-tag-set {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cds-spacing-02);
  margin-block: var(--cds-spacing-03);
}

.campus-tag-set:last-child {
  margin-block-end: 0;
}

/* Vertical stack at Carbon's 16px step. */
.campus-stack > * + * {
  margin-block-start: var(--cds-spacing-05);
}

.campus-meta {
  margin: var(--cds-spacing-02) 0 0;
  color: var(--cds-text-secondary);
}


/* ---------------------------------------------------------------------------
 * 2. EMPLOYER — SEARCH
 * ------------------------------------------------------------------------ */

.campus-filter-rail {
  padding: var(--cds-spacing-05);
}

.campus-filter-rail__title {
  margin: 0 0 var(--cds-spacing-05);
}

.campus-filter-rail__group {
  margin-block-end: var(--cds-spacing-06);
}

.campus-filter-rail__group:last-child {
  margin-block-end: 0;
}

/* ZIP + radius sit side by side; they are one idea. */
.campus-field-row {
  display: flex;
  gap: var(--cds-spacing-05);
}

.campus-field-row > .cds--form-item {
  flex: 1 1 0;
  min-width: 0;
}

/* Facet counts under the major field. */
.campus-facets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cds-spacing-02);
  margin-block-start: var(--cds-spacing-03);
}

.campus-saved-search {
  padding: 0;
  margin: 0 0 var(--cds-spacing-06);
  list-style: none;
}

.campus-saved-search__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cds-spacing-03);
  padding-block: var(--cds-spacing-02);
  border-block-end: 1px solid var(--cds-border-subtle-00);
}

.campus-saved-search__row form {
  display: flex;
  margin: 0;
}

@media (min-width: 66rem) {
  .campus-filter-rail {
    position: sticky;
    inset-block-start: calc(var(--cds-header-height) + var(--cds-spacing-05));
    max-height: calc(100vh - var(--cds-header-height) - var(--cds-spacing-07));
    overflow-y: auto;
  }
}

/* Results column ---------------------------------------------------------- */

.campus-results__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cds-spacing-03);
  margin-block-end: var(--cds-spacing-05);
}

.campus-results__summary p {
  margin: 0;
}

/* The applied-filter row sits above the toolbar. */
.campus-applied-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cds-spacing-02);
  margin-block-end: var(--cds-spacing-05);
}

/* Bulk bar: Carbon's batch-actions bar is revealed by
   .cds--batch-actions--active. search-interactions.js also writes the
   legacy `active` class, so honour both. */
.cds--batch-actions.active {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.campus-batch-actions__list {
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-03);
  padding-inline-end: var(--cds-spacing-03);
}

.campus-batch-actions__input {
  min-width: 14rem;
  max-width: 22rem;
}

/* Below lg the batch bar has no room for the message field. The field, its
   label and the Message submit are ONE control, so they go together: hiding
   the field alone left a visible Message button that posted an empty
   `message` — a tap that appeared to do nothing. Shortlist, which needs no
   field, stays. The button is matched on its `formaction` rather than on
   sibling order, so it survives a reshuffle of the toolbar. */
@media (max-width: 65.98rem) {
  .campus-batch-actions__list > label[for='bulk-message'],
  .campus-batch-actions__input,
  .campus-batch-actions__list .cds--btn[formaction*='/bulk/outreach'] {
    display: none;
  }
}

.campus-candidate-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.campus-candidate {
  display: flex;
  align-items: flex-start;
  gap: var(--cds-spacing-05);
}

.campus-candidate__body {
  min-width: 0;
  flex: 1 1 auto;
}

.campus-candidate__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cds-spacing-03);
}

.campus-candidate__name {
  margin: 0;
}

.campus-candidate__row-actions {
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-02);
}

.campus-candidate__toggle-icon {
  transition: transform var(--cds-duration-fast-02, 110ms) var(--cds-ease-standard, cubic-bezier(0.2, 0, 0.38, 0.9));
}

/* Disclosure. Default is OPEN in raw HTML so the panel degrades to visible
   if this stylesheet ever fails to load; the rule below closes it and
   search-interactions.js reopens it by toggling `details-open` on the wrap. */
.candidate-row-wrap .campus-candidate__details {
  display: none;
  padding-block-start: var(--cds-spacing-05);
  margin-block-start: var(--cds-spacing-05);
  border-block-start: 1px solid var(--cds-border-subtle-00);
}

.candidate-row-wrap.details-open .campus-candidate__details {
  display: block;
}

.candidate-row-wrap.details-open .campus-candidate__toggle-icon {
  transform: rotate(180deg);
}

.campus-map {
  padding: var(--cds-spacing-05);
  margin-block-end: var(--cds-spacing-05);
}

.campus-map svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 12rem;
  color: var(--cds-border-strong-01);
}

/* Empty / not-yet-searched state. */
.campus-empty-state {
  padding: var(--cds-spacing-09) var(--cds-spacing-07);
  text-align: center;
}

.campus-empty-state__icon {
  color: var(--cds-icon-secondary);
}

.campus-empty-state__title {
  margin: var(--cds-spacing-05) 0 var(--cds-spacing-03);
}

.campus-empty-state__body {
  max-width: 30rem;
  margin: 0 auto;
  color: var(--cds-text-secondary);
}

.campus-empty-state .campus-actions {
  justify-content: center;
}


/* ---------------------------------------------------------------------------
 * 3. EMPLOYER — CANDIDATE DETAIL
 * ------------------------------------------------------------------------ */

.campus-detail__facts {
  margin-block-start: var(--cds-spacing-05);
}

.campus-project {
  margin-block-end: 1px;
}

.campus-project__title {
  margin: 0 0 var(--cds-spacing-02);
}

.campus-project__body {
  margin: var(--cds-spacing-03) 0 0;
  color: var(--cds-text-secondary);
}

/* Endorsement tick sits inline with the coursework title. */
.campus-endorsed {
  display: inline-flex;
  align-items: center;
  gap: var(--cds-spacing-02);
  color: var(--cds-support-success);
}


/* ---------------------------------------------------------------------------
 * 4. EMPLOYER — SHORTLIST AND COMPARE
 * ------------------------------------------------------------------------ */

.campus-shortlist__notes-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--cds-spacing-03);
  min-width: 16rem;
}

.campus-shortlist__stage-form {
  min-width: 10rem;
}

.campus-shortlist__row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cds-spacing-02);
}

.campus-shortlist__row-actions form {
  display: flex;
  margin: 0;
}

/* Comparison table: the attribute column stays put while candidates scroll. */
.cds--data-table .campus-compare__row-header {
  position: sticky;
  inset-inline-start: 0;
  z-index: 2;
  min-width: 12rem;
  background-color: var(--cds-layer-accent-01);
  color: var(--cds-text-primary);
  font-weight: 600;
}

.cds--data-table thead .campus-compare__row-header {
  z-index: 3;
}

.campus-compare__check {
  color: var(--cds-support-success);
}

.campus-compare__absent {
  color: var(--cds-text-placeholder);
}


/* ---------------------------------------------------------------------------
 * 5. EMPLOYER — OUTREACH
 * ------------------------------------------------------------------------ */

/* Carbon's text-area label row: label left, character counter right.
   (Component-level rule kept here only because carbon-components.css does
   not ship the counter row; move it there if that file grows one.) */
.cds--text-area__label-wrapper {
  display: flex;
  width: 100%;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cds-spacing-05);
}

.campus-message-history {
  margin-block-start: var(--cds-spacing-07);
}


/* ---------------------------------------------------------------------------
 * 6. EMPLOYER — STATUS PAGES
 * ------------------------------------------------------------------------ */

.campus-status__icon {
  display: block;
  margin-block-end: var(--cds-spacing-05);
  color: var(--cds-icon-secondary);
}

.campus-status__icon--success {
  color: var(--cds-support-success);
}

.campus-status__icon--pending {
  color: var(--cds-support-info);
}

.campus-status__icon--error {
  color: var(--cds-support-error);
}

.campus-status__body {
  max-width: 40rem;
  color: var(--cds-text-secondary);
}


/* ===========================================================================
 * LANDING / MARKETING COMPOSITION                    (owner: landing.ejs)
 * ---------------------------------------------------------------------------
 * Everything below composes the marketing surface only — src/views/landing.ejs
 * (served at `/` and at the campus-branded `/u/:slug`). It is namespaced away
 * from the in-app blocks above: no selector here matches outside
 * `.campus-landing` unless the class name itself is landing-only.
 *
 * HARD RULES honoured here:
 *   - Only `--cds-*` tokens from carbon-core.css. No raw hex.
 *   - Nothing is rounded. (Carbon tags and the spinner are the only permitted
 *     exceptions and neither is styled in this file.)
 *   - Display type is weight 300 or 400. Never 600+.
 *   - No generic Carbon component is restyled: every override is scoped under
 *     a landing-only ancestor.
 *
 * Contents
 *   L1.  Landing shell and section rhythm
 *   L2.  Marketing type — eyebrow, display headings, lede, accent
 *   L3.  Hero
 *   L4.  Hero graphic (authored inline SVG, decorative)
 *   L5.  Supporter band
 *   L6.  01 / The opportunity — structured comparison list
 *   L7.  02 / The journey — progress indicator, pull quote, aside
 *   L8.  Audience tiles + pictograms
 *   L9.  03 / The invitation — CTA band + tagline strip
 *   L10. Reduced motion
 * ======================================================================== */


/* ---------------------------------------------------------------------------
 * L1. LANDING SHELL AND SECTION RHYTHM
 *
 * Bands own their vertical padding so the shell content region stays flush.
 * The rhythm steps through Carbon spacing tokens at md and lg rather than
 * interpolating, which keeps every edge on the 8px grid.
 * ------------------------------------------------------------------------ */

.campus-landing {
  overflow-x: hidden;

  /* Local aliases so the whole page rhythm retunes in one place. Every value
     resolves to a Carbon spacing token. */
  --campus-band-space: var(--cds-spacing-09);    /* 3rem — sm */
  --campus-block-space: var(--cds-spacing-07);   /* 2rem */
  --campus-logo-chip: var(--cds-layer-02);       /* light chip behind logos */
}

@media (min-width: 42rem) {
  .campus-landing {
    --campus-band-space: var(--cds-spacing-11);  /* 5rem — md */
    --campus-block-space: var(--cds-spacing-09); /* 3rem */
  }
}

@media (min-width: 66rem) {
  .campus-landing {
    --campus-band-space: var(--cds-spacing-12);  /* 6rem — lg */
    --campus-block-space: var(--cds-spacing-10); /* 4rem */
  }
}

/* The UI Shell header is fixed at 3rem, so in-page anchors from the header nav
   (#the-opportunity, #how-it-works, #for-students, …) must clear it. */
.campus-landing [id] {
  scroll-margin-block-start: calc(var(--cds-header-height) + var(--cds-spacing-05));
}

.campus-band {
  padding-block: var(--campus-band-space);
  background-color: var(--cds-background);
}

/* Carbon marks a structural change with a 1px rule, never a shadow. */
.campus-band--ruled {
  border-block-start: 1px solid var(--cds-border-subtle-00);
}

.campus-band__head {
  max-width: 44rem;
  margin-block-end: var(--campus-block-space);
}

.campus-band__body {
  margin-block-start: var(--cds-spacing-07);
}


/* ---------------------------------------------------------------------------
 * L2. MARKETING TYPE
 *
 * Fluid clamps between Carbon's fixed heading tokens. Weight 300 throughout —
 * the single most recognisable Carbon signature.
 * ------------------------------------------------------------------------ */

.campus-eyebrow {
  display: block;
  margin: 0 0 var(--cds-spacing-05);
  color: var(--cds-text-secondary);
  font-family: var(--cds-font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.33333;
  letter-spacing: 0.32px;
  text-transform: uppercase;
}

/* The short rule above an eyebrow is Carbon's expressive section marker. */
.campus-eyebrow::before {
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-block-end: var(--cds-spacing-05);
  background-color: var(--cds-interactive);
  content: '';
}

.campus-eyebrow--inverse {
  color: var(--cds-gray-30);
}

.campus-eyebrow--inverse::before {
  background-color: var(--cds-blue-40);
}

/* Fluid display — hero. Clamps up from heading-06 (2.625rem) past heading-07
   to the 4.75rem expressive display size. */
.campus-display {
  margin: 0;
  color: var(--cds-text-primary);
  font-size: clamp(2.25rem, 1.5rem + 3.4vw, 4.75rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: 0;
  text-wrap: balance;
}

/* Fluid section heading — heading-05 (2rem) up to heading-07 (3.375rem). */
.campus-heading {
  margin: 0;
  color: var(--cds-text-primary);
  font-size: clamp(1.75rem, 1.25rem + 2vw, 3.375rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0;
  text-wrap: balance;
}

.campus-lede {
  max-width: 40rem;
  margin: var(--cds-spacing-06) 0 0;
  color: var(--cds-text-primary);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}

.campus-copy {
  max-width: 36rem;
  margin: var(--cds-spacing-05) 0 0;
  color: var(--cds-text-secondary);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}

/* Carbon Blue 60 accent inside a display heading. */
.campus-accent {
  color: var(--cds-link-primary);
}


/* ---------------------------------------------------------------------------
 * L3. HERO
 * ------------------------------------------------------------------------ */

.campus-hero {
  padding-block: var(--campus-band-space) var(--campus-block-space);
  background-color: var(--cds-background);
}

.campus-hero__row {
  align-items: center;
  row-gap: var(--campus-block-space);
}

.campus-hero__content {
  display: flex;
  flex-direction: column;
}

.campus-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cds-spacing-05);
  margin-block-start: var(--campus-block-space);
}

/* Full-bleed CTAs on the small grid, natural Carbon width from md up. */
.campus-hero__actions .cds--btn {
  flex: 1 1 15rem;
  max-width: 20rem;
}

@media (min-width: 42rem) {
  .campus-hero__actions .cds--btn {
    flex: 0 0 auto;
  }
}

.campus-hero__media {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 66rem) {
  .campus-hero__media {
    justify-content: flex-end;
  }
}


/* ---------------------------------------------------------------------------
 * L4. HERO GRAPHIC
 *
 * An authored, decorative Carbon "productive" composition: a 2x (16px) grid
 * field, flat overlapping Gray 20 / Blue 20 planes, a Blue 60 verification hub
 * and an orthogonal node-and-line network reading campus -> employer. Every
 * colour is a token, so it follows the theme with no second asset and no
 * external request.
 *
 * carbon-core.css sets `svg { fill: currentColor }`; children with their own
 * `fill` (set here by class) are unaffected, since that rule matches only the
 * <svg> element itself.
 * ------------------------------------------------------------------------ */

.campus-hero__graphic {
  display: block;
  width: 100%;
  max-width: 42rem;
  height: auto;
}

.campus-hero__grid-line {
  fill: none;
  stroke: var(--cds-border-subtle-00);
  stroke-width: 1;
}

.campus-hero__plane--gray   { fill: var(--campus-hero-plane-gray); }
.campus-hero__plane--blue   { fill: var(--campus-hero-plane-blue); }
.campus-hero__plane--accent { fill: var(--cds-interactive); }

.campus-hero__rule {
  fill: none;
  stroke: var(--cds-border-subtle-01);
  stroke-width: 1;
}

.campus-hero__wire {
  fill: none;
  stroke: var(--cds-border-strong-01);
  stroke-width: 1;
}

.campus-hero__wire--active {
  fill: none;
  stroke: var(--cds-interactive);
  stroke-width: 2;
}

.campus-hero__node         { fill: var(--campus-hero-node); }
.campus-hero__node--active { fill: var(--cds-interactive); }

.campus-hero__card         { fill: var(--cds-layer-02); }
.campus-hero__card-accent  { fill: var(--cds-interactive); }
.campus-hero__card-line    { fill: var(--campus-hero-card-line); }

.campus-hero__hub      { fill: var(--cds-interactive); }
.campus-hero__hub-mark { fill: var(--cds-text-on-color); }


/* ---------------------------------------------------------------------------
 * L5. SUPPORTER BAND
 *
 * Grayscale at rest, full colour on hover / keyboard focus — Carbon's standard
 * logo-band treatment. The colour reveal is hover-gated so touch users, who
 * never hover, get the colour logos straight away.
 *
 * Every logo sits on a light chip. 66842afcfc27e1eba6a5033d_LogoDark.png is
 * dark navy: the chip guarantees its contrast whatever the band colour is,
 * and grayscale only ever darkens it further.
 * ------------------------------------------------------------------------ */

.campus-supporters {
  padding-block: var(--cds-spacing-09);
  border-block: 1px solid var(--cds-border-subtle-00);
  background-color: var(--cds-layer-01);
}

.campus-supporters__label {
  margin: 0;
  color: var(--cds-text-secondary);
  font-family: var(--cds-font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.33333;
  letter-spacing: 0.32px;
  text-transform: uppercase;
}

.campus-supporters__note {
  max-width: 36rem;
  margin: var(--cds-spacing-03) 0 0;
  color: var(--cds-text-secondary);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.42857;
  letter-spacing: 0.16px;
}

.campus-supporters__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--cds-spacing-05);
  margin: var(--cds-spacing-07) 0 0;
  padding: 0;
  list-style: none;
}

.campus-supporters__item {
  display: flex;
  min-width: 0;
  min-height: 5.5rem;
  flex: 1 1 7rem;
  align-items: center;
  justify-content: center;
  padding: var(--cds-spacing-05) var(--cds-spacing-06);
  background-color: var(--campus-logo-chip);
}

.campus-supporters__logo {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 2.5rem;
  object-fit: contain;
}

/* The square CSULB College of Engineering mark needs more height than the
   wordmarks to sit at the same optical weight. */
.campus-supporters__logo--square {
  max-height: 3.5rem;
}

@media (hover: hover) {
  .campus-supporters__logo {
    filter: grayscale(1);
    transition: filter var(--cds-duration-moderate-01) var(--cds-ease-standard);
  }

  .campus-supporters__item:hover .campus-supporters__logo,
  .campus-supporters__item:focus-within .campus-supporters__logo {
    filter: grayscale(0);
  }
}


/* ---------------------------------------------------------------------------
 * L6. 01 / THE OPPORTUNITY — structured comparison list
 *
 * A Carbon structured list with a row header per row. The Campus row is marked
 * by a Blue 60 rule AND its own row header text, so nothing is carried by
 * colour alone.
 * ------------------------------------------------------------------------ */

.campus-gap .cds--structured-list {
  margin-block-end: 0;
}

.campus-gap .cds--structured-list-row {
  border-block-end: 1px solid var(--cds-border-subtle-00);
}

.campus-gap .cds--structured-list-row:first-child {
  border-block-start: 1px solid var(--cds-border-subtle-00);
}

.campus-gap .cds--structured-list-th {
  width: 40%;
  padding-block: var(--cds-spacing-06);
  padding-inline-start: 0;
  color: var(--cds-text-primary);
}

.campus-gap .cds--structured-list-td {
  padding-block: var(--cds-spacing-06);
  padding-inline-end: 0;
  color: var(--cds-text-secondary);
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
}

.campus-gap__row--brand .cds--structured-list-th {
  padding-inline-start: var(--cds-spacing-05);
  border-inline-start: 2px solid var(--cds-interactive);
  color: var(--cds-link-primary);
}

.campus-gap__row--brand .cds--structured-list-td {
  color: var(--cds-text-primary);
}

.campus-gap__caption {
  margin: var(--cds-spacing-07) 0 0;
  color: var(--cds-text-primary);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}


/* ---------------------------------------------------------------------------
 * L7. 02 / THE JOURNEY — progress indicator, pull quote, aside
 *
 * carbon-components.css already flips `.cds--progress` to a column under
 * 672px, so horizontal-on-desktop / vertical-under-md is Carbon's own
 * behaviour. This block only supplies the marketing rhythm and the step index,
 * and lets the five labels wrap instead of truncating.
 * ------------------------------------------------------------------------ */

.campus-journey {
  margin-block-start: var(--cds-spacing-05);
}

.campus-journey .cds--progress-step {
  padding-block-end: var(--cds-spacing-05);
}

.campus-journey .cds--progress-label {
  overflow: visible;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-overflow: clip;
  white-space: normal;
}

.campus-journey__index {
  display: block;
  color: var(--cds-link-primary);
  font-family: var(--cds-font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.33333;
  letter-spacing: 0.32px;
}

.campus-journey .cds--progress-optional {
  color: var(--cds-text-secondary);
}

@media (max-width: 41.98rem) {
  .campus-journey .cds--progress-step {
    min-height: 4.75rem;
  }
}

/* Pull quote — expressive light type under a short Blue 60 rule. */
.campus-quote {
  max-width: 46rem;
  margin: var(--campus-block-space) 0 0;
  padding-block-start: var(--cds-spacing-06);
  border-block-start: 2px solid var(--cds-interactive);
}

.campus-quote__text {
  margin: 0;
  color: var(--cds-text-primary);
  font-size: clamp(1.375rem, 1.05rem + 1.4vw, 2.625rem);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: 0;
  text-wrap: balance;
}

/* Rule-marked aside — Carbon's quiet emphasis mark. */
.campus-aside {
  max-width: 40rem;
  margin: var(--cds-spacing-07) 0 0;
  padding-inline-start: var(--cds-spacing-05);
  border-inline-start: 2px solid var(--cds-border-subtle-01);
  color: var(--cds-text-secondary);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}


/* ---------------------------------------------------------------------------
 * L8. AUDIENCE TILES
 * ------------------------------------------------------------------------ */

.campus-audiences__row {
  row-gap: var(--cds-spacing-07);
}

.campus-audiences__col {
  display: flex;
}

.campus-audience {
  display: flex;
  width: 100%;
  flex-direction: column;
  padding: var(--cds-spacing-07);
  border-block-start: 2px solid var(--cds-interactive);
}

.campus-audience__title {
  margin: var(--cds-spacing-06) 0 0;
  color: var(--cds-text-primary);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.28572;
  letter-spacing: 0;
}

.campus-audience__body {
  margin: var(--cds-spacing-05) 0 0;
  color: var(--cds-text-secondary);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}

.campus-audience__points {
  margin: var(--cds-spacing-06) 0 0;
  padding: 0;
  list-style: none;
}

.campus-audience__point {
  padding-block: var(--cds-spacing-04);
  border-block-start: 1px solid var(--cds-border-subtle-00);
  color: var(--cds-text-secondary);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.42857;
  letter-spacing: 0.16px;
}

.campus-audience__action {
  margin-block-start: auto;
  padding-block-start: var(--cds-spacing-07);
}

.campus-audience__action .cds--btn {
  width: 100%;
  max-width: 20rem;
}

/* The university tile closes on the deck's ask rather than a CTA: there is no
   university registration route, and none is invented here. */
.campus-audience__ask {
  margin: 0;
  margin-block-start: auto;
  padding-block-start: var(--cds-spacing-07);
  color: var(--cds-text-primary);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}

.campus-audience__ask-label {
  display: block;
  margin-block-end: var(--cds-spacing-03);
  color: var(--cds-text-secondary);
  font-family: var(--cds-font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.33333;
  letter-spacing: 0.32px;
  text-transform: uppercase;
}

/* Carbon pictogram language: geometric, single colour, thin open strokes.
   `fill: none` must be declared here — carbon-core.css sets
   `svg { fill: currentColor }`, and a CSS declaration beats a `fill="none"`
   presentation attribute. */
.campus-pictogram {
  width: 3.5rem;
  height: 3.5rem;
  fill: none;
  stroke: var(--cds-interactive);
  stroke-width: 1.5;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}


/* ---------------------------------------------------------------------------
 * L9. 03 / THE INVITATION — CTA band + tagline strip
 *
 * The closing band is Gray 100, like the UI Shell. Buttons inside keep their
 * own Carbon tokens: primary stays Blue 60 and secondary is Gray 80, which is
 * exactly Carbon's inverse pairing.
 * ------------------------------------------------------------------------ */

.campus-cta {
  padding-block: var(--campus-band-space);
  background-color: var(--campus-cta-bg);
  color: var(--cds-text-on-color);
}

.campus-cta__heading {
  margin: 0;
  color: var(--cds-text-on-color);
  font-size: clamp(1.75rem, 1.25rem + 2vw, 3.375rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0;
  text-wrap: balance;
}

.campus-cta__lede {
  max-width: 40rem;
  margin: var(--cds-spacing-06) 0 0;
  color: var(--cds-gray-30);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}

.campus-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cds-spacing-05);
  margin-block-start: var(--campus-block-space);
}

.campus-cta__actions .cds--btn {
  flex: 1 1 15rem;
  max-width: 20rem;
}

@media (min-width: 42rem) {
  .campus-cta__actions .cds--btn {
    flex: 0 0 auto;
  }
}

.campus-tagline-strip {
  margin: var(--campus-block-space) 0 0;
  padding-block-start: var(--cds-spacing-06);
  border-block-start: 1px solid var(--cds-gray-80);
  color: var(--cds-gray-40);
  font-family: var(--cds-font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.33333;
  letter-spacing: 0.32px;
  text-transform: uppercase;
}


/* ---------------------------------------------------------------------------
 * L10. REDUCED MOTION
 * carbon-core.css already neutralises durations globally; this restates the
 * intent for the transitions this landing block introduces.
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .campus-supporters__logo,
  .campus-landing * {
    animation: none;
    transition: none;
  }
}


/* ===========================================================================
 * LEGAL DOCUMENT COMPOSITION       (owner: views/legal/terms.ejs, privacy.ejs)
 * ---------------------------------------------------------------------------
 * The two legal documents are long-form reading, not app UI: a masthead, a
 * sticky contents rail, and one measured column of prose. carbon-core.css
 * zeroes the margins on h1-h6, p, ul, ol, li, dl, dt and dd and strips list
 * markers, so a document built from bare HTML renders as one unbroken wall of
 * text. Everything below restores that rhythm — but only INSIDE the
 * `campus-legal__*` scope, so no generic Carbon component is touched.
 *
 * HARD RULES honoured here:
 *   - Only `--cds-*` tokens. No raw hex, so both themes follow automatically.
 *   - Nothing is rounded.
 *   - Display type is weight 300/400.
 *   - Type sizes are set through `:where()`, which contributes no specificity:
 *     a `.cds--type-*` class on the element always still wins. These rules are
 *     a floor for unclassed elements, never an override of the type scale.
 *
 * Contents
 *   G1. Masthead — breadcrumb, eyebrow, title, standfirst, updated
 *   G2. Contents rail — static block under lg, sticky side navigation at lg
 *   G3. Prose — measure, sections, headings, paragraphs, lists, links, dl
 *   G4. Responsive rhythm, 320px -> 1584px
 *   G5. Print
 * ======================================================================== */


/* ---------------------------------------------------------------------------
 * G1. MASTHEAD
 *
 * Carbon page-header rhythm: eyebrow, fluid display title, standfirst, then a
 * rule over the "last updated" line.
 * ------------------------------------------------------------------------ */

.campus-legal__breadcrumb {
  padding-block-start: var(--cds-spacing-05);
}

.campus-legal__masthead {
  max-width: 44rem;
  padding-block: var(--cds-spacing-06) var(--cds-spacing-07);
}

.campus-legal__eyebrow {
  margin: 0 0 var(--cds-spacing-04);
  color: var(--cds-text-secondary);
  text-transform: uppercase;
}

/* Fluid between heading-05 (2rem) and heading-06 (2.625rem); weight 300 is the
   Carbon display signature and holds at every size. */
.campus-legal__title {
  margin: 0 0 var(--cds-spacing-05);
  color: var(--cds-text-primary);
  font-size: clamp(2rem, 1.5rem + 2.2vw, 2.625rem);
  font-weight: 300;
  line-height: 1.199;
  letter-spacing: 0;
  text-wrap: balance;
}

.campus-legal__standfirst {
  max-width: 40rem;
  margin: 0 0 var(--cds-spacing-06);
  color: var(--cds-text-secondary);
}

.campus-legal__updated {
  margin: 0;
  padding-block-start: var(--cds-spacing-04);
  border-block-start: 1px solid var(--cds-border-subtle-01);
  color: var(--cds-text-helper);
}


/* ---------------------------------------------------------------------------
 * G2. CONTENTS RAIL
 *
 * Below lg the rail is an ordinary block that sits above the prose (the grid
 * already stacks the two columns there). At lg it becomes Carbon side
 * navigation: sticky under the 3rem fixed UI Shell header, quiet text that
 * resolves to primary with a Blue 60 leading rule on hover and focus.
 * ------------------------------------------------------------------------ */

.campus-legal__toc {
  margin-block-end: var(--cds-spacing-07);
}

.campus-legal__toc-title {
  margin: 0 0 var(--cds-spacing-04);
  /* Matches the link rows below: their 2px leading rule plus their inline
     padding, so label and item text share one left edge. */
  padding-inline-start: calc(var(--cds-spacing-04) + 2px);
  padding-block-end: var(--cds-spacing-03);
  border-block-end: 1px solid var(--cds-border-subtle-01);
  color: var(--cds-text-secondary);
  text-transform: uppercase;
}

/* Navigation, not prose: Carbon's list classes stay, the browser marker goes. */
.campus-legal__toc ul,
.campus-legal__toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.campus-legal__toc li {
  margin: 0;
}

.campus-legal__toc .cds--link {
  display: block;
  padding-block: var(--cds-spacing-03);
  padding-inline: var(--cds-spacing-04);
  border-inline-start: 2px solid transparent;
  color: var(--cds-text-secondary);
  transition:
    color var(--cds-duration-fast-02) var(--cds-ease-standard),
    background-color var(--cds-duration-fast-02) var(--cds-ease-standard);
}

.campus-legal__toc .cds--link:hover,
.campus-legal__toc .cds--link:focus-visible {
  border-inline-start-color: var(--cds-border-interactive);
  background-color: var(--cds-background-hover);
  color: var(--cds-text-primary);
  text-decoration: none;
}

/* Carbon focus rings sit inset, not offset — the default 2px offset would be
   clipped by the rail's own scroll container at lg. */
.campus-legal__toc .cds--link:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
}


/* ---------------------------------------------------------------------------
 * G3. PROSE
 *
 * 44rem (704px) measure — roughly 75 characters at body-02, Carbon's reading
 * width for long-form text.
 * ------------------------------------------------------------------------ */

.campus-legal__prose {
  max-width: 44rem;
  color: var(--cds-text-primary);

  /* Section rhythm, retuned once per breakpoint in G4. */
  --campus-legal-section-space: var(--cds-spacing-07);

  /* Bare addresses (privacy@campus.hiretahoe.com) must not push the 320px
     grid sideways. */
  overflow-wrap: break-word;
}

/* --- Sections --- */

.campus-legal__prose .campus-legal__section {
  padding-block: var(--campus-legal-section-space);

  /* The UI Shell header is fixed at 3rem, so an in-page TOC link must land
     below it, not under it. */
  scroll-margin-block-start: calc(var(--cds-header-height) + var(--cds-spacing-05));
}

/* The first section's heading lines up with the rail's title. */
.campus-legal__prose > .campus-legal__section:first-child {
  padding-block-start: 0;
}

.campus-legal__section + .campus-legal__section {
  border-block-start: 1px solid var(--cds-border-subtle-00);
}

.campus-legal__prose > .campus-legal__section:last-child {
  padding-block-end: var(--cds-spacing-09);
}

/* --- Headings --- */

.campus-legal__prose h2,
.campus-legal__prose h3,
.campus-legal__prose h4 {
  color: var(--cds-text-primary);
}

.campus-legal__prose > .campus-legal__section > h2 {
  margin: 0 0 var(--cds-spacing-05);
}

.campus-legal__prose h3,
.campus-legal__prose h4 {
  margin: var(--cds-spacing-06) 0 var(--cds-spacing-04);
}

/* Type floor for unclassed headings: carbon-core's element defaults size a
   bare <h2> at 2rem and a bare <h3> at 1.75rem, which would invert the
   hierarchy the templates ask for. `:where()` adds no specificity, so
   `.cds--type-heading-03` / `-02` on the element still win. */
.campus-legal__prose :where(h2) {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
}

.campus-legal__prose :where(h3),
.campus-legal__prose :where(h4) {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
}

/* --- Paragraphs --- */

.campus-legal__prose p {
  margin: 0 0 var(--cds-spacing-05);
}

.campus-legal__prose p:last-child {
  margin-block-end: 0;
}

/* Same `:where()` floor: carbon-core sets bare <p> to body-01 (0.875rem), and
   long-form prose is body-02. */
.campus-legal__prose :where(p, li, dt, dd) {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}

/* The opening paragraph of a section, set quieter. Two classes so it beats the
   `.campus-legal__section p` colour rule wherever that is also declared. */
.campus-legal__prose .campus-legal__lede {
  color: var(--cds-text-secondary);
}

/* --- Lists --- */

.campus-legal__prose ul,
.campus-legal__prose ol {
  margin: 0 0 var(--cds-spacing-05);
  padding-inline-start: var(--cds-spacing-06);
}

.campus-legal__prose ul {
  list-style: disc outside;
}

.campus-legal__prose ol {
  list-style: decimal outside;
}

.campus-legal__prose li {
  margin-block-end: var(--cds-spacing-03);
}

.campus-legal__prose li:last-child {
  margin-block-end: 0;
}

.campus-legal__prose li::marker {
  color: var(--cds-text-secondary);
}

.campus-legal__prose ul ul,
.campus-legal__prose ul ol,
.campus-legal__prose ol ul,
.campus-legal__prose ol ol {
  margin-block: var(--cds-spacing-03) 0;
}

.campus-legal__prose ul ul {
  list-style: circle outside;
}

/* --- Definition lists --- */

.campus-legal__prose dl {
  margin: 0 0 var(--cds-spacing-05);
}

.campus-legal__prose dt {
  margin-block-start: var(--cds-spacing-05);
  color: var(--cds-text-primary);
  font-weight: 600;
}

.campus-legal__prose dt:first-child {
  margin-block-start: 0;
}

.campus-legal__prose dd {
  margin: var(--cds-spacing-02) 0 0;
  padding: 0;
  color: var(--cds-text-secondary);
}

/* --- Inline --- */

.campus-legal__prose strong {
  color: var(--cds-text-primary);
  font-weight: 600;
}

/* `.cds--link` is sized for UI (body-01). Inside a body-02 paragraph it has to
   take the size of the text it sits in, and running text needs the underline
   Carbon reserves for its inline link variant. */
.campus-legal__prose a,
.campus-legal__prose .cds--link {
  color: var(--cds-link-primary);
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-decoration: underline;
  text-underline-offset: 0.125rem;
}

/* code-01 is 12px, too small beside 16px prose; code-02 is the 14px pairing. */
.campus-legal__prose code {
  font-size: 0.875rem;
  overflow-wrap: break-word;
}

/* Carbon's inline notification has a 18rem floor that would overflow the
   320px grid; inside the prose column it takes the measure instead. */
.campus-legal__prose .cds--inline-notification {
  min-width: 0;
  margin: 0 0 var(--cds-spacing-06);
}


/* ---------------------------------------------------------------------------
 * G4. RESPONSIVE RHYTHM, 320px -> 1584px
 *
 * sm (320px)  one column; rail above the prose. The base rules above.
 * md (672px)  still one column, sections breathe a step wider.
 * lg (1056px) two columns; the rail becomes sticky side navigation.
 * max         `.cds--grid` caps at 99rem (1584px), so nothing to add.
 * ------------------------------------------------------------------------ */

@media (min-width: 42rem) {
  .campus-legal__masthead {
    padding-block: var(--cds-spacing-07) var(--cds-spacing-08);
  }

  .campus-legal__toc {
    margin-block-end: var(--cds-spacing-08);
  }
}

@media (min-width: 66rem) {
  .campus-legal__prose {
    --campus-legal-section-space: var(--cds-spacing-08);
  }

  .campus-legal__toc {
    position: sticky;
    inset-block-start: calc(var(--cds-header-height) + var(--cds-spacing-05));
    max-height: calc(100vh - var(--cds-header-height) - var(--cds-spacing-07));
    margin-block-end: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}


/* ---------------------------------------------------------------------------
 * G5. PRINT
 *
 * The contents rail and the breadcrumb are navigation and carry nothing on
 * paper. The prose drops its screen measure, keeps its rhythm, and no heading
 * is left stranded at the foot of a page.
 * ------------------------------------------------------------------------ */

@media print {
  .campus-legal__breadcrumb,
  .campus-legal__toc {
    display: none;
  }

  .campus-legal__masthead,
  .campus-legal__prose,
  .campus-legal__standfirst {
    max-width: none;
  }

  .campus-legal__title {
    font-size: 2rem;
  }

  .campus-legal__prose .campus-legal__section {
    padding-block: var(--cds-spacing-05);
    break-inside: auto;
  }

  .campus-legal__prose > .campus-legal__section:last-child {
    padding-block-end: 0;
  }

  .campus-legal__prose h2,
  .campus-legal__prose h3,
  .campus-legal__prose h4 {
    break-after: avoid;
  }

  .campus-legal__prose p,
  .campus-legal__prose li {
    orphans: 3;
    widows: 3;
  }

  .campus-legal__prose a,
  .campus-legal__prose .cds--link {
    text-decoration: underline;
  }
}


/* ---------------------------------------------------------------------------
 * T1. TEAM PAGE
 *
 * Reuses the landing page's band rhythm (--campus-band-space) and the
 * supporter-band logo chip (--campus-logo-chip), so /team reads as part of the
 * same marketing surface rather than a bolted-on page.
 * ------------------------------------------------------------------------ */

.campus-team__masthead {
  padding-block: var(--campus-band-space) var(--campus-block-space);
}

.campus-team__eyebrow {
  margin: 0 0 var(--cds-spacing-05);
  color: var(--cds-text-secondary);
  text-transform: uppercase;
}

.campus-team__title {
  margin: 0;
  color: var(--cds-text-primary);
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.375rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0;
  text-wrap: balance;
}

.campus-team__standfirst {
  max-width: 40rem;
  margin: var(--cds-spacing-06) 0 0;
  color: var(--cds-text-secondary);
  font-size: clamp(1rem, 0.925rem + 0.35vw, 1.25rem);
  font-weight: 400;
  line-height: 1.5;
}

.campus-team__section-title {
  margin: 0 0 var(--cds-spacing-06);
  color: var(--cds-text-primary);
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  font-weight: 300;
  line-height: 1.25;
}

.campus-team__body {
  max-width: 38rem;
  margin: 0 0 var(--cds-spacing-05);
  color: var(--cds-text-secondary);
  font-size: 1rem;
  line-height: 1.5;
}

.campus-team__body:last-child { margin-bottom: 0; }

/* ---- CSULB initiative band ---- */

.campus-team__initiative {
  padding-block: var(--campus-band-space);
  background-color: var(--cds-layer-01);
}

.campus-team__initiative-row {
  row-gap: var(--cds-spacing-08);
}

.campus-team__marks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cds-spacing-05);
  margin: 0;
  padding: 0;
  list-style: none;
}

.campus-team__mark {
  display: flex;
  min-width: 0;
  min-height: 6.5rem;
  flex: 1 1 9rem;
  align-items: center;
  justify-content: center;
  padding: var(--cds-spacing-05) var(--cds-spacing-06);
  background-color: var(--campus-logo-chip);
}

.campus-team__mark-img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 3rem;
  object-fit: contain;
}

/* The square College of Engineering mark needs more height than the wordmark
   to carry the same optical weight — same rule as the supporter band. */
.campus-team__mark-img--square { max-height: 4.25rem; }

/* ---- roster ---- */

.campus-team__people {
  padding-block: var(--campus-band-space);
}

.campus-team__roster {
  row-gap: var(--cds-spacing-09);
}

.campus-person {
  display: grid;
  gap: var(--cds-spacing-07);
  grid-template-columns: 1fr;
  align-items: start;
}

.campus-person__portrait-wrap {
  position: relative;
  width: 100%;
  max-width: 15rem;
  background-color: var(--cds-layer-01);
}

/* Carbon accent: a 4px Blue 60 rule along the top of the portrait, echoing the
   tile treatment used by the audience cards on the landing page. */
.campus-person__portrait-wrap::before {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background-color: var(--cds-interactive);
  content: "";
}

.campus-person__portrait {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Grid/flex children need an explicit min-width:0, or a long unbroken string
   (a URL in a bio, a wide logo) blows the column out instead of wrapping. */
.campus-person__body,
.campus-team__initiative-text {
  min-width: 0;
}

.campus-team__initiative-marks {
  display: flex;
  min-width: 0;
  align-items: center;
}

.campus-person__name {
  margin: 0;
  color: var(--cds-text-primary);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.28572;
}

.campus-person__role {
  margin: var(--cds-spacing-03) 0 0;
  color: var(--cds-text-secondary);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.16px;
  text-transform: uppercase;
}

.campus-person__bio {
  max-width: 36rem;
  margin: var(--cds-spacing-05) 0 0;
  color: var(--cds-text-secondary);
  font-size: 1rem;
  line-height: 1.5;
}

.campus-person__actions {
  margin: var(--cds-spacing-06) 0 0;
}

.campus-person__link {
  display: inline-flex;
  align-items: center;
  gap: var(--cds-spacing-03);
}

.campus-person__link-icon { flex: none; }

/* ---- closing CTA ---- */

.campus-team__closing {
  padding-block: var(--campus-band-space);
  border-block-start: 1px solid var(--cds-border-subtle-00);
}

.campus-team__cta-heading {
  margin: 0;
  color: var(--cds-text-primary);
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.625rem);
  font-weight: 300;
  line-height: 1.2;
}

.campus-team__cta-lede {
  max-width: 36rem;
  margin: var(--cds-spacing-05) 0 0;
  color: var(--cds-text-secondary);
  font-size: 1rem;
  line-height: 1.5;
}

.campus-team__cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cds-spacing-05);
  margin-block-start: var(--cds-spacing-07);
}

.campus-team__cta-actions .cds--btn { flex: 0 1 auto; }

@media (min-width: 42rem) {
  .campus-person {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--cds-spacing-08);
  }
}

@media (hover: hover) {
  .campus-team__mark-img {
    filter: grayscale(1);
    transition: filter var(--cds-duration-moderate-01) var(--cds-ease-standard);
  }

  .campus-team__mark:hover .campus-team__mark-img,
  .campus-team__mark:focus-within .campus-team__mark-img {
    filter: grayscale(0);
  }
}


/* ---------------------------------------------------------------------------
 * L9. THEME-AWARE SURFACES
 *
 * Everything above paints from --cds-* tokens, which flip with the theme on
 * their own. These four are the exception: the hero illustration and the
 * closing CTA band deliberately pick values off the ABSOLUTE ramps (Gray 20,
 * Blue 20, Gray 100 ...), because they are composed surfaces rather than
 * semantic UI. Absolute ramps must never be re-themed, so the values are
 * indirected through local properties and swapped here instead.
 *
 * Without this, dark mode renders glaring Gray 20 / Blue 20 planes on a
 * #161616 page, near-invisible Gray 70 nodes, and a CTA band whose Gray 100
 * background is the same colour as the page behind it — the section break
 * simply disappears.
 * ------------------------------------------------------------------------ */

:root {
  --campus-hero-plane-gray: var(--cds-gray-20);
  --campus-hero-plane-blue: var(--cds-blue-20);
  --campus-hero-node: var(--cds-gray-70);
  --campus-hero-card-line: var(--cds-gray-40);
  --campus-cta-bg: var(--cds-gray-100);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --campus-hero-plane-gray: var(--cds-gray-80);
    --campus-hero-plane-blue: var(--cds-blue-80);
    --campus-hero-node: var(--cds-gray-30);
    --campus-hero-card-line: var(--cds-gray-60);
    /* Gray 80, not Gray 100: the band must stay distinct from the page. */
    --campus-cta-bg: var(--cds-gray-80);
  }
}

:root[data-theme="dark"] {
  --campus-hero-plane-gray: var(--cds-gray-80);
  --campus-hero-plane-blue: var(--cds-blue-80);
  --campus-hero-node: var(--cds-gray-30);
  --campus-hero-card-line: var(--cds-gray-60);
  --campus-cta-bg: var(--cds-gray-80);
}