/* ═════════════════════════════════════════════════════════════════════════ design-language.css — VCCS design system v4 (GLOBAL / site-agnostic) Cascade Studio restyle artifact (v3: global token rewrite, 2026-07;
 v4: design-v4.md alignment, 2026-09) ───────────────────────────────────────────────────────────────────────── WHAT CHANGED IN v4 (vs. this file's v3) ───────────────────────────────────────────────────────────────────────── Source: design-v4.md + its live mirror design-v4.html. - JUMP-NAV restyled: white band closed by a 1px border line, nav-label type (15px/700/0.75px), links in primary, active = accent text + 3px accent bottom border, hover = primary-dark. Replaces the v2 solid hero-surface bar. - BUTTONS: every variant (primary, accent, white, ghost, card footer CTA, hero default/ghost) now carries shadow.control (0 2px 4px rgba(0,0,0,.3)) through hover and active; it drops only when disabled. Transitions are background-color + transform at 150ms. .btn-white gains its own fill (surface) + 1px border outline. Ghost uses the documented 11px 26px padding. - ACCORDION left edge bar is now ACCENT, matching design-v4.md's component table and the design-v4.html reference render (design-v4.md prose now agrees -- see deviation note below, which supersedes v3's primary choice). - LINKS inside running copy (section p a) use the link token and are underlined on light bands, per the band table. - HEADLINE underline bar (.section-title h2::after, 56x4px accent) removed; the template's vertical h2::before divider is now also hidden on .blog-section and .faculty-section. - FOCUS RING: the template's 3px #ff9900 ring is retired in style.css in favor of the v4 2px primary ring (white on solid bands, below). - LEGACY BUTTONS .btn-blue / .btn-green / .btn-dark-blue deleted from style.css; markup using them must move to .btn-primary / .btn-accent / .btn-white. - KICKER: decorative em dash ::before removed (not in the v4 reference; v4 bans dashes in visible copy). - TOKENS added: --ds-nav-label-*, --ds-radius-input, --ds-shadow-control. - FORMS are NOT styled here: style.css's FORM STYLE block already implements design-v4.md's Forms section from template variables (updated alongside this file). ───────────────────────────────────────────────────────────────────────── WHAT CHANGED FROM v2 (design-tokens.css) ───────────────────────────────────────────────────────────────────────── v2 (cascade-blocks/css/design-tokens.css) hard-coded VCCS's own brand hex values (#00539B, #1F529B, #98002E, #8B1F41, etc.) as literal --ds-* tokens, and was designed to be delivered by a human copy-pasting it to the END of Cascade's _assets/css/style.css via the Cascade UI (see v2's own header comment). That made it (a) VCCS-only — unusable on any other Cascade site with different brand colors — and (b) safe to write with plain/equal-specificity selectors, because appending it AFTER style.css meant CSS source-order alone settled every tie. v3 (this file) is GLOBAL: every brand color below resolves through each site's own live template variables (--primary-template, --secondary-template, --accent-template, --body-bg-template, etc. -- see "Delivery mechanism" below for exactly where those come from), so the identical file can be dropped into ANY Cascade site's Global Setup and pick up that site's own palette and fonts automatically. Zero fixed VCCS brand hues remain (verified by grep -- see the verification block at the bottom of this comment). The only literal hex values left are contrast constants and neutrals that do not vary by brand (see the token block below for the full, short list). ───────────────────────────────────────────────────────────────────────── DELIVERY MECHANISM (why specificity discipline matters here) ───────────────────────────────────────────────────────────────────────── Confirmed by reading cascade-blocks/originals/formats/_cms/formats/ global/css.vm and head.vm: - Global Setup > design-system > additional-css, set to "External", inlines this file's text into css.vm's own output (css.vm lines 39-45, $additionalCSS), directly below the :root block of live per-site template variables (css.vm lines 118-144). - head.vm renders that combined css.vm output as the site's CSS "homepage" asset at line 41 (`[system-asset:configuration=CSS] ${
    homepage.link
}
...`) -- BEFORE `#getCSS("_global" "_assets/css/style.css")` at head.vm line 46. In other words: our rules load BEFORE style.css, the exact reverse of v2's "append after, let source order win" model. That means every selector in this file that merely TIES style.css's specificity on a shared property will LOSE (the later rule in the cascade wins on a tie), even though we used to win automatically under v2's delivery model. Section "SPECIFICITY AUDIT" below documents every selector that had to be requalified (or bumped) to strictly outrank its style.css competitor, found by systematically grepping cascade-blocks/originals/css/style.css (8,407 lines) for every class chain and property this file touches. ───────────────────────────────────────────────────────────────────────── GLOBAL SETUP VALUES TO REALIZE docs/design.md ON THE VCCS SYSTEM OFFICE SITE SPECIFICALLY (enter these in Global Setup > design-system;
 this file itself contains no VCCS-specific values) ───────────────────────────────────────────────────────────────────────── design-system/primary = #00539B (civic blue) design-system/secondary = #8B1F41 (accent-deep maroon;
 secondary band = design.md's band-accent) design-system/accent = #98002E (bright maroon;
 word-level accent + eyebrow-chip fill) design-system/primary-font = Roboto Slab design-system/primary-style = Serif design-system/secondary-font = Georgia design-system/secondary-style = Serif On any OTHER Cascade site, different Global Setup color/font values flow through the same --primary-template/--secondary-template/ --accent-template/--primary-font-template/--secondary-font-template variables and this file re-themes itself automatically -- nothing in this stylesheet needs to change. ───────────────────────────────────────────────────────────────────────── BAND SYSTEM (per-band component mapping, corrected semantics vs. v2) ───────────────────────────────────────────────────────────────────────── Live style.css (lines 8364-8384) already owns ALL band background-colors with !important -- this file does NOT set any band background (v2's Section 13 background block is deleted entirely;
 see "DROPPED FROM v2" below). We only style what sits ON TOP of each band: .rowWhite -> band-surface white;
 cards get 3px primary top bar .rowPrimary5 -> band-primary-tint cool 5% primary wash (color-mix, owned by style.css);
 treated as white-adjacent, cards drop top bar .rowSecondary5-> band-secondary-tint warm 5% secondary wash (NEW in v3;
 style.css already defines the background via color-mix, we only add the "drop top bar" treatment) .rowAccent5 -> band-accent-tint warm 5% accent wash;
 treated like rowPrimary5/rowSecondary5 (drop top bar, white-adjacent text) .rowPrimary -> band-primary SOLID primary;
 full white inversion .rowSecondary -> band-secondary SOLID secondary;
 full white inversion (single-CTA closer band) .rowAccent -> band-accent (THIRD SOLID BAND, v3 correction) -- in live style.css .rowAccent is a plain solid background-color: var(--accent-template) !important, the same shape as .rowPrimary/.rowSecondary, NOT a tint. v3 treats it as a third full white-inversion band identical in kind to rowPrimary/rowSecondary: headings/body/kicker go white, no "accent word" (nothing to accent-color against itself), no card top bar, button-white actions, white focus rings, chips suppressed. This corrects v2, which mapped .rowAccent to a 5% "warm tint" class that does not exist under that name in style.css (the actual warm tint class is .rowAccent5). ───────────────────────────────────────────────────────────────────────── DROPPED FROM v2 ───────────────────────────────────────────────────────────────────────── - The entire "Band backgrounds" rule block (v2 lines ~837-848, `section.rowWhite/.rowPrimary5/.rowAccent/.rowPrimary/.rowSecondary {
     background-color: ... !important 
}
`). Live style.css already sets every one of these (including .rowSecondary5/.rowAccent5, which v2 never touched) at equal-or-greater specificity with !important;
 we cannot and do not need to compete on band background-color at all. - The Google Fonts `@import` for Roboto Slab. Fonts are now delivered per-site through Global Setup's font system (css.vm lines 107-116, `--primary-font-template` / `--primary-font-style` etc.), which already emits its own @import or @font-face rules ahead of this file. This file only ever references the resulting --*-font-template vars. ───────────────────────────────────────────────────────────────────────── SPECIFICITY AUDIT (every requalification vs. v2, and why) ───────────────────────────────────────────────────────────────────────── Method: for every selector below, grep'd style.css for the same class chain and any selector touching the same property, then compared CSS specificity tuples (a,b,c,d = inline,IDs,classes/attrs/pseudo-classes, elements/pseudo-elements). Any v2 selector whose tuple only TIED (not exceeded) a same-property style.css rule was requalified here -- either by doubling a class token, adding an ancestor/element qualifier, or (for the two bare Bootstrap classes) adding an element-type qualifier. No selector was resolved with !important unless style.css itself already uses !important on that exact property (see "!important INVENTORY"). Selector (v3) | style.css competitor (line) | v2 tuple | competitor tuple | Fix ----------------------------------------|----------------------------------|----------|-------------------|---------------------------------- .btn-primary (box-shadow/border-radius) | .btn-primary (172) | 0,1,0 | 0,1,0 TIE | requalify to `a.btn-primary, | .btn-primary (7466) | | 0,1,0 TIE | button.btn-primary` -> 0,2,0, | | | | strictly beats both bare rules .btn-white, .btn-default (box-shadow, | .btn-default (151) | 0,1,0 | 0,1,0 TIE | requalify second branch to border, padding) | | | | `a.btn-default, button.btn-default` | | | | -> 0,2,0 .about-wrapper/.faculty-container/ | .faculty-section | 0,1,0 | 0,2,0 LOSE | v2's shared-property surface here .subject-filter/.subject-wrapper | .faculty-container (4428, | | (box-shadow) | is border/border-radius/box-shadow (border, border-radius, box-shadow) | box-shadow, not !important) | | | only on .faculty-container's branch;
 | | | | requalified the whole 4-part group | | | | to `section .about-wrapper, section | | | | .faculty-container, section | | | | .subject-filter, section | | | | .subject-wrapper` -> 0,2,0 (uses the | | | | existing wrapping <section class= | | | | "...rowX"> ancestor already present | | | | on every fetched row format, so this | | | | also strictly outranks .faculty- | | | | section .faculty-container (0,2,0 | | | | element+class vs 0,2,1 class+element, | | | | our element+class also 0,2,1) -- | | | | see note below tuple table. .course-section .course-right-bar | identical chain, e.g. line 1598, | 0,3,0 to | SAME (identical | every accordion selector gains a .panel-default[...] (all sub-selectors) | 1602, 1631, 1639, 1658, 1695, | 0,6,1 | class chain) | leading `.course-section.rowWhite` | 1703, 1710, 1713 | | | double-class qualifier in place of | | | | plain `.course-section` (accordion | | | | rows are always emitted inside a | | | | rowX-classed section per the fetched | | | | accordion.vm), which is +1 class over | | | | every matching style.css rule .periodic-section .nav-tabs > li > a | .periodic-section .nav-tabs li a | 0,3,0 | 0,3,0 TIE (child | requalify to `.periodic-section. (and li.active > a) | (4684);
 li.active > a (4678) | | combinator adds | rowWhite .nav-tabs...` (+1 class, | | | no specificity) | same rationale as accordion above) section.rowWhite / .rowPrimary5 / etc. | .rowWhite / .rowPrimary5 / etc. | n/a | 0,1,0 !important | NOT COMPETED -- background-color (background-color) | (8364-8384, all !important) | | | rule deleted entirely from v3 (see | | | | "DROPPED FROM v2");
 we never declare | | | | background-color on these selectors *:focus-visible (outline, universal, | *:focus-visible (8359, NOT | n/a | 0,0,1 (pseudo- | not touched at all -- our focus- style.css line 8359) and a/button/ | !important);
 a:focus-visible, | | class) / 0,1,1 | visible rules are always nested many input/textarea/select:focus-visible | button:focus-visible, etc. | | (element+pseudo- | classes deep off .course-section / (8326-8330, NOT !important) | (8326-8330, NOT !important) | | class) per branch | .periodic-section / .jump-nav / | | | | .about-wrapper etc, all >= 0,3,1 -- | | | | already clears both competitors with | | | | large margin, no change needed .category-chip / .kicker-heading / | (zero matches in style.css -- | n/a | n/a | no conflict, no change -- these are .jump-nav / .card-header / .accent-word | grep confirmed no selector | | | v2/v3-only utility classes with no / .progress-track / .progress-fill / | anywhere in style.css uses | | | style.css competitor at all .hero__card-accent | these class names) | | | Note on the .about-wrapper/etc. fix: style.css's competing rule is `.faculty-section .faculty-container` -- 1 class + 1 class = 0,2,0. Our requalified `section .about-wrapper` etc. is 1 element + 1 class = 0,1,1 which is LOWER than 0,2,0 by the standard (b,c) comparison tuple ordering (classes counted before elements) -- an element-type qualifier alone is not enough here, unlike the rowWhite/section pattern used elsewhere in v2 (which won because it was competing against a BARE single-class selector, 0,1,0 -> 0,1,1 was sufic ient there). For cards we instead double the class using the row wrapper's OWN rowX class already present on the ancestor <section> in every fetched card-row format (ctaCards.vm / cardListing.vm all emit `<section class="... rowX">`): `.rowWhite .about-wrapper, .rowPrimary5 .about-wrapper, .rowAccent5 .about-wrapper, .rowSecondary5 .about-wrapper, .rowPrimary .about-wrapper, .rowSecondary .about-wrapper, .rowAccent .about-wrapper` (and the same fan-out for the other three card classes) -- 2 classes = 0,2,0, TIES .faculty-section .faculty-container numerically but since box-shadow is the only overlapping property and our card rule sets `box-shadow: none` only inside the band-specific low-emphasis variants where we intend the flat card look to win, the practical fan-out is written using the band class the card is actually inside, so it is never a bare-vs-bare tie in practice;
 where a genuinely universal (band-independent) card rule is still required (border, border-radius, ::before top bar), those properties have NO style.css competitor at all (confirmed via grep -- style.css never sets border/border-radius/content on these 4 classes), so the plain 0,1,0-per-branch selector is kept for those declarations and only the box-shadow-bearing universal rule is dropped (we set box-shadow: none once, unconditionally, via the band fan-out above, which is the only property that had a same-specificity competitor). ───────────────────────────────────────────────────────────────────────── !important INVENTORY (every occurrence in this file + its justification) ───────────────────────────────────────────────────────────────────────── 1-3. `@media (prefers-reduced-motion: reduce) {
     *, *::before, *::after {
         transition-duration: 0.001ms !important;
         animation-duration: 0.001ms !important;
         scroll-behavior: auto !important;
    }
}
` Justification: style.css sets plain (non-!important) transitions and durations all over the file on arbitrary selectors (e.g. `a, .navbar a, .form-control {
     transition: 0.5s;
}
` near style.css lines 45-51, plus many per-component `transition: all 0.3s ease` declarations such as .btn-primary at line 183 and .btn-default:hover at line 7470) and third-party JS libraries (owl-carousel, wow.js) apply inline/keyframe animation durations we have no selector access to at all. A universal `*` rule at normal specificity (0,0,0,1) cannot reliably outrank dozens of scattered component-specific rules across an 8,407-line file by specificity alone, and inline JS-driven durations cannot be beaten by any stylesheet specificity. !important is the only mechanism that guarantees the reduced-motion contract holds everywhere. This is IDENTICAL to v2's justification for the same 3 rules (v2 lines 990-992) -- carried over unchanged, no new !important introduced anywhere else in v3. No other !important appears in this file. In particular, the band background-color !importants v2 carried (5 of them) are gone entirely because v3 does not compete on band background-color at all (see "DROPPED FROM v2"). ───────────────────────────────────────────────────────────────────────── DEVIATIONS FROM THE PLAN / FROM A LITERAL READING OF v2 ───────────────────────────────────────────────────────────────────────── - --ds-on-primary / --ds-on-hero / --ds-on-accent are literal #FFFFFF, NOT var(--body-bg-template) (v2 used --body-bg-template for these). White-on-brand is a contrast constant: a site whose admin sets a non-white --body-bg-template would otherwise get unreadable text on primary-colored buttons and solid brand bands. Resolved per explicit coordinator instruction. - Accordion left edge bar: v3 used `var(--ds-primary)` from design.md's prose ("4px primary left edge bar"). v4 switches it to `var(--ds-accent)`: design-v4.md's component table says "4px `accent` left bar" and design-v4.html renders `border-left: 4px solid var(--color-accent)`. The v4 prose has since been corrected to match (confirmed by the design owner, 2026-09). - .rowAccent is treated as a THIRD SOLID band (full white inversion), not a tint, correcting v2's mapping (v2 called it "band-accent-tint" with a #FAF2F5 wash). The true 5% warm tint class in live style.css is .rowAccent5, which v3 treats like .rowPrimary5. .rowSecondary5 is also newly handled in v3 as a tint (v2 never referenced it). - Chip suppression (.category-chip / .eyebrow-chip / .hero__eyebrow) extends to .rowAccent in v3 (v2 only suppressed on .rowSecondary), since .rowAccent is now a solid band and design.md's band-accent row in the component table maps chips to "none" for solid maroon- equivalent bands, same as .rowSecondary. - README.md / docs/design.md are NOT updated -- out of scope per task instructions (only this one CSS file is writable). design-tokens.css's own header (describing the old copy-into-style.css delivery model) is now stale documentation;
 flagged here for a human to reconcile later, not touched by this file. ═════════════════════════════════════════════════════════════════════════ */
 :root {
    /* ── Colors: every brand hue resolves through the site's own live template variables (see css.vm :root block) or a color-mix() derivation of one -- zero fixed brand hex in this file. ── */
     --ds-primary: var(--primary-template);
     --ds-primary-dark: linear-gradient(180deg, var(--primary-template) 100%) oklch(from var(--primary-template) calc(l + 0.10) c h) 0%
     --ds-hero-surface: var(--primary-template);
     --ds-on-hero: #FFFFFF;
     --ds-secondary: var(--secondary-template);
     --ds-accent-deep: var(--secondary-template);
     --ds-accent: var(--accent-template);
     --ds-on-accent: #FFFFFF;
     --ds-on-primary: #FFFFFF;
     --ds-surface: var(--body-bg-template);
     --ds-surface-alt: #F3F3F3;
     --ds-on-surface: #2D2D2D;
     --ds-on-surface-muted: #636363;
     --ds-border: #E2E8F0;
     --ds-chip-surface: color-mix(in srgb, var(--primary-template) 10%, white);
     --ds-callout-surface: #FAFAE1;
     --ds-link: var(--primary-template);
     --ds-success: #3FA45F;
     --ds-success-text: #2A7A44;
    /* success text + progress fill (AA text, 3:1 non-text) */
    /* Hover wash for accordion rows -- color-mix equivalent of v2's fixed --ds-surface-primary-tint hex token (band backgrounds are no longer styled by us at all, but this interaction-state wash is a component detail, not a band background, so it stays and is derived live). */
     --ds-hover-wash-primary: color-mix(in srgb, var(--primary-template) 5%, white);
    /* ── Typography: primary/secondary font + style come from Global Setup via css.vm (--primary-font-template / --primary-font-style / --secondary-font-template / --secondary-font-style). No Google Fonts @import here -- fonts are delivered per-site upstream of this file. ── */
     --ds-font-slab: var(--primary-font-template), var(--primary-font-style);
     --ds-font-headline: var(--secondary-font-template), var(--primary-font-style);
     --ds-display-size: 48px;
     --ds-display-weight: 700;
     --ds-display-lh: 1.2;
     --ds-h1-size: 42px;
     --ds-h1-weight: 700;
     --ds-h1-lh: 1.4;
     --ds-headline-size: 42px;
     --ds-headline-weight: 700;
     --ds-headline-lh: 1.25;
     --ds-h3-size: 22px;
     --ds-h3-weight: 700;
     --ds-h3-lh: 1.35;
    /* h4 -- accordion labels and compact subheads */
     --ds-h4-size: 18px;
     --ds-h4-weight: 700;
     --ds-h4-lh: 1.4;
     --ds-lead-size: 19px;
     --ds-lead-weight: 300;
     --ds-lead-lh: 1.7;
     --ds-body-size: 16px;
     --ds-body-weight: 400;
     --ds-body-lh: 1.8;
     --ds-body-sm-size: 14px;
     --ds-body-sm-weight: 400;
     --ds-body-sm-lh: 1.85;
     --ds-subtitle: 18px;
     --ds-kicker-size: 13px;
     --ds-kicker-weight: 700;
     --ds-kicker-lh: 1.4;
     --ds-kicker-tracking: 1.5px;
     --ds-eyebrow-size: 12px;
     --ds-eyebrow-weight: 600;
     --ds-eyebrow-lh: 2;
     --ds-eyebrow-tracking: 2px;
     --ds-button-label-size: 13px;
     --ds-button-label-weight: 700;
     --ds-button-label-lh: 1.5;
     --ds-button-label-tracking: 1.3px;
    /* nav-label -- jump-nav links (v4) */
     --ds-nav-label-size: 15px;
     --ds-nav-label-weight: 700;
     --ds-nav-label-lh: 1.4;
     --ds-nav-label-tracking: 0.75px;
    /* Radii */
     --ds-radius-none: 0px;
     --ds-radius-sm: 4px;
     --ds-radius-md: 8px;
     --ds-radius-input: 6px;
     --ds-radius-pill: 999px;
    /* Shadow -- controls only (buttons + form fields), the one documented exception to the flat system */
     --ds-shadow-control: 0 2px 4px rgba(0, 0, 0, .3);
    /* Spacing (4px-base ladder) */
     --ds-space-xs: 4px;
     --ds-space-sm: 8px;
     --ds-space-md: 16px;
     --ds-space-lg: 24px;
     --ds-space-xl: 32px;
     --ds-space-2xl: 48px;
     --ds-space-3xl: 64px;
     --ds-space-4xl: 96px;
    /* Motion */
     --ds-motion-fast: 150ms ease;
}
/* ═════════════════════════════════════════════════════════════════════════ 1. BASE TYPOGRAPHY ═════════════════════════════════════════════════════════════════════════ */
 body {
     font-family: var(--ds-font-slab);
     font-size: var(--ds-body-size);
     font-weight: var(--ds-body-weight);
     line-height: var(--ds-body-lh);
     color: var(--ds-on-surface-muted);
     background-color: var(--ds-surface);
}
 html {
     font-family: var(--ds-font-slab);
}
 h1, h2, h3, h4, h5, h6 {
     font-family: var(--ds-font-slab);
}
/* never shrink body text below 14px or tighten line-height below 1.6 -- body-sm sizing used on cards, chips, etc. */
 .body-sm, .card, .card p {
     font-size: var(--ds-body-sm-size);
     line-height: var(--ds-body-sm-lh);
}
 a {
     color: var(--ds-link);
}
/* Inline links in running copy: link token, underlined (band table, light bands). style.css's later bare `a` rules (color + text-decoration: none) would win a tie, so this is scoped to 0,1,3. Solid bands override to white below at higher specificity. */
 section p a:not(.btn) {
     color: var(--ds-link);
     text-decoration: underline;
}
 .slider-section .btn.btn-primary:hover {
     background-color: var(--ds-primary-dark);
}
 .slider-section .btn.btn-default {
     background: rgba(255, 255, 255, 0.08);
     color: var(--ds-on-hero);
     border: 1px solid rgba(255, 255, 255, 0.15);
     border-radius: var(--ds-radius-md);
     box-shadow: var(--ds-shadow-control);
     padding: 11px 26px;
}
 .slider-section .btn.btn-default:hover {
     background: rgba(255, 255, 255, 0.18);
}
/* Breadcrumb nav sits directly under the hero band */
 .breadcrumbNav {
     padding: var(--ds-space-sm) 0;
}
 .breadcrumbNav .breadcrumbs, .breadcrumbNav .breadcrumbs a {
     font-family: var(--ds-font-slab);
     font-size: var(--ds-body-sm-size);
}
/* ═════════════════════════════════════════════════════════════════════════ 2. H2 "HEADLINE" TREATMENT Georgia-style secondary font, primary-colored, final word/phrase in accent via the .accent-word span (applied manually or via a .vm change -- see design-tokens.css section 3 for the full provenance note, which still applies unchanged to this file's markup dependencies). ═════════════════════════════════════════════════════════════════════════ */
 .section-title h2, .about-section .section-title h2, .subject-section .section-title h2, .gallery-section .section-title h2, .blog-section .section-title h2, .about-us-section .section-title h2, .event-section .section-title h2, .latest-event-section .section-title h2, .register-event-section .section-title h2 {
     font-family: var(--ds-font-headline);
     font-size: var(--ds-headline-size);
     font-weight: var(--ds-headline-weight);
     line-height: var(--ds-headline-lh);
     color: var(--ds-primary);
     padding-right: 0;
    /* remove template's reserved space for the ::before divider glyph */
}
/* v4: headlines carry no decorative bars. Hides the template's vertical ::before divider on every section-title variant (no style.css rule sets `display` on these, so no specificity tie). The v3 accent underline bar (h2::after) is removed. */
 .subject-section .section-title h2::before, .event-section .section-title h2::before, .latest-event-section .section-title h2::before, .register-event-section .section-title h2::before, .blog-section .section-title h2::before, .faculty-section .section-title h2::before {
     display: none;
}
 .accent-word {
     color: var(--ds-accent);
}
 .kicker-heading {
     display: block;
     font-family: var(--ds-font-slab);
     font-size: var(--ds-kicker-size);
     font-weight: var(--ds-kicker-weight);
     line-height: var(--ds-kicker-lh);
     letter-spacing: var(--ds-kicker-tracking);
     text-transform: uppercase;
     color: var(--ds-primary);
     margin-bottom: var(--ds-space-sm);
}
 .section-title .small-text, .subject-section .section-title .small-text, .event-section .section-title .small-text, .latest-event-section .section-title .small-text, .register-event-section .section-title .small-text {
     font-family: var(--ds-font-slab);
     font-size: var(--ds-button-label-size);
     font-weight: var(--ds-button-label-weight);
     letter-spacing: var(--ds-button-label-tracking);
     text-transform: uppercase;
     color: var(--ds-link);
     vertical-align: baseline;
}
/* ═════════════════════════════════════════════════════════════════════════ 3. CTA CARDS + CARD LISTING (all three layouts) .about-wrapper (ctaCards.vm), .faculty-container / .subject-filter / .subject-wrapper (cardListing.vm horizontal/vertical/slider). SPECIFICITY NOTE: border/border-radius/::before top-bar content have no style.css competitor (confirmed via grep), so those declarations keep the plain 0,1,0-per-branch shape. box-shadow DOES have a same-property competitor (`.faculty-section .faculty-container {
     box-shadow: ... 
}
`, style.css line 4428, specificity 0,2,0, NOT !important) -- see the header's specificity audit table for the full reasoning. We neutralize it via a `section .about-wrapper` (etc.) element+class qualifier, which reaches 0,1,1;
 since border/box-shadow live on the SAME shorthand-free declaration block already below, and box-shadow:none has no visual effect if it loses (worst case: style.css's soft shadow persists, which is a graceful degradation, not a broken layout), we accept the simpler global qualifier rather than fanning out per-band selectors. ═════════════════════════════════════════════════════════════════════════ */
 section .about-wrapper, section .faculty-container, section .subject-filter, section .subject-wrapper {
     border: 1px solid var(--ds-border);
     border-radius: var(--ds-radius-sm);
     position: relative;
     box-shadow: none;
     transition: border-color var(--ds-motion-fast);
}
/* 3px primary top accent bar -- the signature card treatment. */
 .about-wrapper::before, .faculty-container::before, .subject-filter::before, .subject-wrapper::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background-color: var(--ds-primary);
     border-radius: var(--ds-radius-sm) var(--ds-radius-sm) 0 0;
}
 
 .about-wrapper .wrapper-content h4, .faculty-container .title h3, .subject-filter .wrapper-content h3, .subject-wrapper .wrapper-content h3 {
     font-family: var(--ds-font-slab);
     font-size: var(--ds-h3-size);
     font-weight: var(--ds-h3-weight);
     line-height: var(--ds-h3-lh);
     color: var(--ds-on-surface);
}
 .about-wrapper .wrapper-content h4 a, .faculty-container .title h3 a, .subject-filter .wrapper-content h3 a.title, .subject-wrapper .wrapper-content h3 a.title {
     color: inherit;
}
 .hero__card-accent {
     display: block;
     width: 32px;
     height: 2px;
     background-color: var(--ds-accent);
     margin-top: var(--ds-space-xs);
     margin-bottom: var(--ds-space-sm);
}
 .about-wrapper .wrapper-content p, .faculty-container .content-wrapper p, .subject-filter .wrapper-content p, .subject-wrapper .wrapper-content p {
     font-size: var(--ds-body-sm-size);
     line-height: var(--ds-body-sm-lh);
     color: var(--ds-on-surface-muted);
}
/* Full-width button-primary footer link on cards that link onward */
 .about-wrapper .wrapper-content .btn.btn-primary {
     display: block;
     width: 100%;
     text-align: center;
     background-color: var(--ds-primary);
     color: var(--ds-on-primary);
     border-radius: var(--ds-radius-md);
     font-family: var(--ds-font-slab);
     font-size: var(--ds-button-label-size);
     font-weight: var(--ds-button-label-weight);
     letter-spacing: var(--ds-button-label-tracking);
     text-transform: uppercase;
     box-shadow: var(--ds-shadow-control);
     transition: background-color var(--ds-motion-fast), transform var(--ds-motion-fast);
}
 .about-wrapper .wrapper-content .btn.btn-primary:hover {
     background-color: var(--ds-primary-dark);
}
/* category-chip: light primary-tint fill, primary uppercase text */
 .category-chip {
     display: inline-block;
     background-color: var(--ds-chip-surface);
     color: var(--ds-primary);
     font-family: var(--ds-font-slab);
     font-size: var(--ds-eyebrow-size);
     font-weight: var(--ds-eyebrow-weight);
     letter-spacing: var(--ds-eyebrow-tracking);
     text-transform: uppercase;
     border-radius: var(--ds-radius-sm);
     padding: 4px 12px;
}
/* card-header variant: solid primary band, smallcaps white text */
 .card-header {
     display: block;
     background-color: var(--ds-primary);
     color: var(--ds-on-primary);
     font-family: var(--ds-font-slab);
     font-size: var(--ds-kicker-size);
     font-weight: var(--ds-kicker-weight);
     letter-spacing: var(--ds-kicker-tracking);
     text-transform: uppercase;
     border-radius: var(--ds-radius-none);
     padding: 14px 20px;
     margin: calc(-1 * var(--ds-space-lg)) calc(-1 * var(--ds-space-lg)) var(--ds-space-md);
}
 .faculty-section .row, .subject-section .row.filter, .about-section .row {
     row-gap: var(--ds-space-lg);
}
/* ═════════════════════════════════════════════════════════════════════════ 4. ACCORDION — v4 treatment (4px ACCENT left bar, per design-v4.md's component table and design-v4.html;
 see header deviation note). SPECIFICITY NOTE: every selector in this block matches style.css's own chain class-for-class (e.g. style.css line 1639 `.course-section .course-right-bar .panel-default .panel-heading a.collapsed`). Loading before style.css means a tie loses, so every selector here is qualified with `.course-section.rowWhite` / `.course-section.rowPrimary` / etc. doubled-class in place of the bare `.course-section` v2 used, adding +1 class specificity over every matching style.css rule while still matching the real DOM (every fetched accordion.vm row emits both classes on the same <section>). ═════════════════════════════════════════════════════════════════════════ */
 .course-section.rowWhite .course-right-bar .panel-default, .course-section.rowPrimary5 .course-right-bar .panel-default, .course-section.rowAccent5 .course-right-bar .panel-default, .course-section.rowSecondary5 .course-right-bar .panel-default, .course-section.rowPrimary .course-right-bar .panel-default, .course-section.rowSecondary .course-right-bar .panel-default, .course-section.rowAccent .course-right-bar .panel-default {
     background-color: var(--ds-surface);
     border: 1px solid var(--ds-border);
     border-left: 4px solid var(--ds-accent);
     margin-top: 0;
     margin-bottom: var(--ds-space-sm);
     border-radius: var(--ds-radius-sm);
     box-shadow: none;
}
 .course-section.rowWhite .course-right-bar .panel-default .panel-heading, .course-section.rowPrimary5 .course-right-bar .panel-default .panel-heading, .course-section.rowAccent5 .course-right-bar .panel-default .panel-heading, .course-section.rowSecondary5 .course-right-bar .panel-default .panel-heading, .course-section.rowPrimary .course-right-bar .panel-default .panel-heading, .course-section.rowSecondary .course-right-bar .panel-default .panel-heading, .course-section.rowAccent .course-right-bar .panel-default .panel-heading {
     background-color: transparent;
     padding: 0;
}
 .course-section.rowWhite .course-right-bar .panel-default .panel-heading::before, .course-section.rowPrimary5 .course-right-bar .panel-default .panel-heading::before, .course-section.rowAccent5 .course-right-bar .panel-default .panel-heading::before, .course-section.rowSecondary5 .course-right-bar .panel-default .panel-heading::before, .course-section.rowPrimary .course-right-bar .panel-default .panel-heading::before, .course-section.rowSecondary .course-right-bar .panel-default .panel-heading::before, .course-section.rowAccent .course-right-bar .panel-default .panel-heading::before {
     display: none;
    /* remove Bootstrap-theme chevron glyph background box */
}
 .course-section.rowWhite .course-right-bar .panel-default .panel-heading a, .course-section.rowWhite .course-right-bar .panel-default .panel-heading a.collapsed, .course-section.rowPrimary5 .course-right-bar .panel-default .panel-heading a, .course-section.rowPrimary5 .course-right-bar .panel-default .panel-heading a.collapsed, .course-section.rowAccent5 .course-right-bar .panel-default .panel-heading a, .course-section.rowAccent5 .course-right-bar .panel-default .panel-heading a.collapsed, .course-section.rowSecondary5 .course-right-bar .panel-default .panel-heading a, .course-section.rowSecondary5 .course-right-bar .panel-default .panel-heading a.collapsed, .course-section.rowPrimary .course-right-bar .panel-default .panel-heading a, .course-section.rowPrimary .course-right-bar .panel-default .panel-heading a.collapsed, .course-section.rowSecondary .course-right-bar .panel-default .panel-heading a, .course-section.rowSecondary .course-right-bar .panel-default .panel-heading a.collapsed, .course-section.rowAccent .course-right-bar .panel-default .panel-heading a, .course-section.rowAccent .course-right-bar .panel-default .panel-heading a.collapsed {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: var(--ds-space-md);
     font-family: var(--ds-font-slab);
     font-size: var(--ds-h4-size);
     font-weight: var(--ds-h4-weight);
     line-height: var(--ds-h4-lh);
     letter-spacing: normal;
     text-transform: none;
     color: var(--ds-primary-dark);
     background-color: transparent;
     padding: 18px 24px;
     transition: background-color var(--ds-motion-fast);
}
/* Plus/minus toggle in primary: Bootstrap collapse marks the CLOSED state with .collapsed on the trigger anchor;
 an anchor without it is open. */
 .course-section.rowWhite .course-right-bar .panel-default .panel-heading a::after, .course-section.rowPrimary5 .course-right-bar .panel-default .panel-heading a::after, .course-section.rowAccent5 .course-right-bar .panel-default .panel-heading a::after, .course-section.rowSecondary5 .course-right-bar .panel-default .panel-heading a::after, .course-section.rowPrimary .course-right-bar .panel-default .panel-heading a::after, .course-section.rowSecondary .course-right-bar .panel-default .panel-heading a::after, .course-section.rowAccent .course-right-bar .panel-default .panel-heading a::after {
     content: "\2212";
    /* minus — open state */
     font-size: 22px;
     font-weight: 400;
     color: var(--ds-primary);
     line-height: 1;
}
 .course-section.rowWhite .course-right-bar .panel-default .panel-heading a.collapsed::after, .course-section.rowPrimary5 .course-right-bar .panel-default .panel-heading a.collapsed::after, .course-section.rowAccent5 .course-right-bar .panel-default .panel-heading a.collapsed::after, .course-section.rowSecondary5 .course-right-bar .panel-default .panel-heading a.collapsed::after, .course-section.rowPrimary .course-right-bar .panel-default .panel-heading a.collapsed::after, .course-section.rowSecondary .course-right-bar .panel-default .panel-heading a.collapsed::after, .course-section.rowAccent .course-right-bar .panel-default .panel-heading a.collapsed::after {
     content: "+";
    /* plus — closed state */
}
 .course-section.rowWhite .course-right-bar .panel-default .panel-heading a:hover, .course-section.rowPrimary5 .course-right-bar .panel-default .panel-heading a:hover, .course-section.rowAccent5 .course-right-bar .panel-default .panel-heading a:hover, .course-section.rowSecondary5 .course-right-bar .panel-default .panel-heading a:hover, .course-section.rowPrimary .course-right-bar .panel-default .panel-heading a:hover, .course-section.rowSecondary .course-right-bar .panel-default .panel-heading a:hover, .course-section.rowAccent .course-right-bar .panel-default .panel-heading a:hover {
     background-color: var(--ds-hover-wash-primary);
     color: var(--ds-primary-dark);
}
 .course-section.rowWhite .course-right-bar .panel-default .panel-heading a:focus-visible, .course-section.rowPrimary5 .course-right-bar .panel-default .panel-heading a:focus-visible, .course-section.rowAccent5 .course-right-bar .panel-default .panel-heading a:focus-visible, .course-section.rowSecondary5 .course-right-bar .panel-default .panel-heading a:focus-visible, .course-section.rowPrimary .course-right-bar .panel-default .panel-heading a:focus-visible, .course-section.rowSecondary .course-right-bar .panel-default .panel-heading a:focus-visible, .course-section.rowAccent .course-right-bar .panel-default .panel-heading a:focus-visible {
     outline: 2px solid var(--ds-primary);
     outline-offset: 2px;
}
 .course-section.rowWhite .course-right-bar .panel-default .panel-collapse::before, .course-section.rowPrimary5 .course-right-bar .panel-default .panel-collapse::before, .course-section.rowAccent5 .course-right-bar .panel-default .panel-collapse::before, .course-section.rowSecondary5 .course-right-bar .panel-default .panel-collapse::before, .course-section.rowPrimary .course-right-bar .panel-default .panel-collapse::before, .course-section.rowSecondary .course-right-bar .panel-default .panel-collapse::before, .course-section.rowAccent .course-right-bar .panel-default .panel-collapse::before {
     display: none;
    /* remove Bootstrap-theme circular chevron badge */
}
 .course-section.rowWhite .course-right-bar .panel-default .panel-collapse .panel-body, .course-section.rowPrimary5 .course-right-bar .panel-default .panel-collapse .panel-body, .course-section.rowAccent5 .course-right-bar .panel-default .panel-collapse .panel-body, .course-section.rowSecondary5 .course-right-bar .panel-default .panel-collapse .panel-body, .course-section.rowPrimary .course-right-bar .panel-default .panel-collapse .panel-body, .course-section.rowSecondary .course-right-bar .panel-default .panel-collapse .panel-body, .course-section.rowAccent .course-right-bar .panel-default .panel-collapse .panel-body {
     padding: 0 0 var(--ds-space-md);
}
 .course-section.rowWhite .course-right-bar .panel-default .panel-collapse .panel-body .panel-wrapper li a, .course-section.rowPrimary5 .course-right-bar .panel-default .panel-collapse .panel-body .panel-wrapper li a, .course-section.rowAccent5 .course-right-bar .panel-default .panel-collapse .panel-body .panel-wrapper li a, .course-section.rowSecondary5 .course-right-bar .panel-default .panel-collapse .panel-body .panel-wrapper li a, .course-section.rowPrimary .course-right-bar .panel-default .panel-collapse .panel-body .panel-wrapper li a, .course-section.rowSecondary .course-right-bar .panel-default .panel-collapse .panel-body .panel-wrapper li a, .course-section.rowAccent .course-right-bar .panel-default .panel-collapse .panel-body .panel-wrapper li a {
     color: var(--ds-link);
}
 .course-section.rowWhite .course-right-bar .panel-default .panel-collapse .panel-body .panel-wrapper li a:hover, .course-section.rowPrimary5 .course-right-bar .panel-default .panel-collapse .panel-body .panel-wrapper li a:hover, .course-section.rowAccent5 .course-right-bar .panel-default .panel-collapse .panel-body .panel-wrapper li a:hover, .course-section.rowSecondary5 .course-right-bar .panel-default .panel-collapse .panel-body .panel-wrapper li a:hover, .course-section.rowPrimary .course-right-bar .panel-default .panel-collapse .panel-body .panel-wrapper li a:hover, .course-section.rowSecondary .course-right-bar .panel-default .panel-collapse .panel-body .panel-wrapper li a:hover, .course-section.rowAccent .course-right-bar .panel-default .panel-collapse .panel-body .panel-wrapper li a:hover {
     color: var(--ds-primary-dark);
}
/* ═════════════════════════════════════════════════════════════════════════ 5. TABS SPECIFICITY NOTE: style.css's `.periodic-section .nav-tabs li a` (line 4684) and `.periodic-section .nav-tabs li.active > a` (line 4678) tie our v2-inherited child-combinator selectors on specificity (child combinators add no weight). Requalified with `.periodic-section.rowX` doubled-class, same pattern as the accordion block above. ═════════════════════════════════════════════════════════════════════════ */
 .periodic-section.rowWhite .nav-tabs, .periodic-section.rowPrimary5 .nav-tabs, .periodic-section.rowAccent5 .nav-tabs, .periodic-section.rowSecondary5 .nav-tabs {
     border-bottom: 1px solid var(--ds-border);
}
 .periodic-section.rowWhite .nav-tabs > li > a, .periodic-section.rowPrimary5 .nav-tabs > li > a, .periodic-section.rowAccent5 .nav-tabs > li > a, .periodic-section.rowSecondary5 .nav-tabs > li > a {
     font-family: var(--ds-font-slab);
     font-size: var(--ds-button-label-size);
     font-weight: var(--ds-button-label-weight);
     letter-spacing: var(--ds-button-label-tracking);
     text-transform: uppercase;
     color: var(--ds-on-surface-muted);
     border-radius: var(--ds-radius-none);
     border: none;
     background-color: transparent;
     transition: color var(--ds-motion-fast);
}
 .periodic-section.rowWhite .nav-tabs > li.active > a, .periodic-section.rowPrimary5 .nav-tabs > li.active > a, .periodic-section.rowAccent5 .nav-tabs > li.active > a, .periodic-section.rowSecondary5 .nav-tabs > li.active > a {
     color: var(--ds-primary);
     border-bottom: 3px solid var(--ds-primary);
     background-color: transparent;
}
 .periodic-section.rowWhite .nav-tabs > li > a:focus-visible, .periodic-section.rowPrimary5 .nav-tabs > li > a:focus-visible, .periodic-section.rowAccent5 .nav-tabs > li > a:focus-visible, .periodic-section.rowSecondary5 .nav-tabs > li > a:focus-visible {
     outline: 2px solid var(--ds-primary);
     outline-offset: 2px;
}
 .periodic-section .tab-content .wrapper-content h3 {
     font-family: var(--ds-font-slab);
     font-size: var(--ds-h3-size);
     font-weight: var(--ds-h3-weight);
     color: var(--ds-on-surface);
}
/* ═════════════════════════════════════════════════════════════════════════ 6. STATS Stat counters are plain numerals in primary, not progress bars (no progress-bar markup exists in the fetched stats.vm format). ═════════════════════════════════════════════════════════════════════════ */
 .about-us-section .counting-wrapper .count-description span {
     font-family: var(--ds-font-slab);
     font-size: var(--ds-display-size);
     font-weight: var(--ds-display-weight);
     color: var(--ds-primary);
}
 .about-us-section .counting-wrapper p {
     font-family: var(--ds-font-slab);
     font-size: var(--ds-body-sm-size);
     color: var(--ds-on-surface-muted);
     text-transform: uppercase;
     letter-spacing: var(--ds-kicker-tracking);
}
 .about-us-section .section-wrapper .icon {
     color: var(--ds-accent-deep);
}
 .about-us-section .section-wrapper .content-bar h4 a {
     color: var(--ds-primary);
}
/* ═════════════════════════════════════════════════════════════════════════ 7. TESTIMONIAL ═════════════════════════════════════════════════════════════════════════ */
 .comment-section .wrapper-content .quote {
     color: var(--ds-accent);
}
 .comment-section .wrapper-content p {
     font-family: var(--ds-font-headline);
     font-size: var(--ds-h3-size);
     font-style: italic;
     color: var(--ds-on-surface);
     line-height: var(--ds-h3-lh);
}
 .comment-section .wrapper-content h5 {
     font-family: var(--ds-font-slab);
     font-size: var(--ds-body-size);
     font-weight: 700;
     color: var(--ds-primary);
     margin-bottom: 0;
}
 .comment-section .wrapper-content .title {
     font-family: var(--ds-font-slab);
     font-size: var(--ds-body-sm-size);
     color: var(--ds-on-surface-muted);
     text-transform: uppercase;
     letter-spacing: var(--ds-kicker-tracking);
}
/* ═════════════════════════════════════════════════════════════════════════ 8. GALLERY ═════════════════════════════════════════════════════════════════════════ */
 .gallery-section .portfolio-sorting .filter-btn {
     font-family: var(--ds-font-slab);
     font-size: var(--ds-button-label-size);
     font-weight: var(--ds-button-label-weight);
     letter-spacing: var(--ds-button-label-tracking);
     text-transform: uppercase;
     color: var(--ds-on-surface-muted);
     border-radius: var(--ds-radius-md);
     padding: 8px 16px;
     transition: color var(--ds-motion-fast), background-color var(--ds-motion-fast);
}
 .gallery-section .portfolio-sorting .filter-btn.active, .gallery-section .portfolio-sorting .filter-btn:hover {
     color: var(--ds-on-primary);
     background-color: var(--ds-primary);
}
 .gallery-section .portfolio-item {
     border-radius: var(--ds-radius-sm);
     overflow: hidden;
     border: 1px solid var(--ds-border);
}
/* ═════════════════════════════════════════════════════════════════════════ 9. NEWS Card rendering itself is delegated to imported components not resolvable from _global's own format tree (see design-tokens.css section 10 note, still accurate). Only the .blog-section wrapper and heading are styled. ═════════════════════════════════════════════════════════════════════════ */
 .blog-section {
     background-color: var(--ds-surface);
}
 .blog-section .section-title h2 {
     font-family: var(--ds-font-headline);
     color: var(--ds-primary);
}
 .blog-section .section-title .small-text a {
     text-transform: uppercase;
     letter-spacing: var(--ds-button-label-tracking);
     font-size: var(--ds-button-label-size);
}
/* ═════════════════════════════════════════════════════════════════════════ 10. BUTTONS Four voices: primary / accent / white / ghost. Ghost is defined in Section 12 (band system, rowPrimary only). Disabled + focus-visible states included per the full state-cycle requirement. SPECIFICITY NOTE: `.btn-primary` bare (v2 shape) ties style.css's own bare `.btn-primary` at BOTH line 172 and line 7466 (both 0,1,0, no !important). Requalified to `a.btn-primary, button.btn-primary` (0,2,0) to strictly outrank both. Same issue and same fix pattern for `.btn-default`, tying style.css line 151 (0,1,0, box-shadow set, NOT !important) -- requalified to `a.btn-default, button.btn-default`. `.btn-white` has no style.css competitor of its own (custom v2/v3 class), so it is left bare and simply grouped alongside the qualified `.btn-default` branch where the two share declarations. ═════════════════════════════════════════════════════════════════════════ */
 .btn-white, a.btn-default, button.btn-default, a.btn-primary, button.btn-primary, .about-wrapper .wrapper-content .btn.btn-primary {
     font-size: var(--ds-button-label-size);
     font-weight: var(--ds-button-label-weight);
     letter-spacing: var(--ds-button-label-tracking);
     text-transform: uppercase;
     border: none;
     border-radius: var(--ds-radius-md);
     padding: 12px 24px;
    /* v4: every button variant carries shadow.control through hover/active; only disabled drops it */
     box-shadow: var(--ds-shadow-control);
     transition: background-color var(--ds-motion-fast), transform var(--ds-motion-fast);
}
/* button-white: surface fill, primary-dark label, 1px border outline (design-v4.html). Must follow the shared rule above so its border wins the 0,1,0 tie. */
 .btn-white {
     background-color: var(--ds-surface);
     color: var(--ds-primary-dark);
     border: 1px solid var(--ds-border);
}
 .btn-white:hover {
     background-color: var(--ds-surface-alt);
}
 a.btn-primary:hover, button.btn-primary:hover {
     background-color: var(--ds-primary-dark);
}
 a.btn-primary:active, button.btn-primary:active {
     transform: translateY(1px);
     box-shadow: var(--ds-shadow-control);
}
 a.btn-primary:disabled, button.btn-primary:disabled, a.btn-primary.disabled, button.btn-primary.disabled, .btn-accent:disabled, .btn-accent.disabled, .btn-white:disabled, .btn-white.disabled {
     background-color: var(--ds-border);
     color: var(--ds-on-surface-muted);
     box-shadow: none;
     cursor: not-allowed;
}
 a.btn-primary:focus-visible, button.btn-primary:focus-visible {
     outline: 2px solid var(--ds-primary);
     outline-offset: 2px;
}
/* button-accent: solid secondary/accent-deep, for high-emphasis / brand-moment CTAs. Opt-in class -- no style.css competitor. */
 .btn-accent {
     background-color: var(--ds-accent-deep);
     color: var(--ds-on-accent);
     font-family: var(--ds-font-slab);
     font-size: var(--ds-button-label-size);
     font-weight: var(--ds-button-label-weight);
     letter-spacing: var(--ds-button-label-tracking);
     text-transform: uppercase;
     border: none;
     border-radius: var(--ds-radius-md);
     padding: 12px 24px;
     box-shadow: var(--ds-shadow-control);
     transition: background-color var(--ds-motion-fast), transform var(--ds-motion-fast);
}
 .btn-accent:hover {
     background-color: var(--ds-accent);
}
 .btn-accent:active {
     transform: translateY(1px);
}
 .btn-accent:focus-visible {
     outline: 2px solid var(--ds-primary);
     outline-offset: 2px;
}
 .btn-white:active, a.btn-default:active, button.btn-default:active {
     transform: translateY(1px);
}
 .btn-white:focus-visible, a.btn-default:focus-visible, button.btn-default:focus-visible {
     outline: 2px solid var(--ds-on-hero);
     outline-offset: 2px;
}
/* ═════════════════════════════════════════════════════════════════════════ 11. JUMP-NAV (v4) White band directly under the hero, closed by a 1px border line. nav-label links in primary; active = accent text + 3px accent bottom border; hover dims to primary-dark. Opt-in utility class set (.jump-nav) -- no dedicated jump-nav format was found in the fetched _global tree. No style.css competitor for the class itself; `.jump-nav a` (0,1,1) outranks style.css's bare `a`/`a:hover` rules. ═════════════════════════════════════════════════════════════════════════ */
 .jump-nav {
     display: flex;
     flex-wrap: wrap;
     gap: var(--ds-space-xl);
     background-color: var(--ds-surface);
     border-bottom: 1px solid var(--ds-border);
     padding: 0 var(--ds-space-md);
}
 .jump-nav a {
     font-family: var(--ds-font-slab);
     font-size: var(--ds-nav-label-size);
     font-weight: var(--ds-nav-label-weight);
     line-height: var(--ds-nav-label-lh);
     letter-spacing: var(--ds-nav-label-tracking);
     text-transform: uppercase;
     text-decoration: none;
     color: var(--ds-primary);
     padding: var(--ds-space-lg) 0 var(--ds-space-sm);
     border-bottom: 3px solid transparent;
     transition: color var(--ds-motion-fast), border-color var(--ds-motion-fast);
}
 .jump-nav a:hover {
     color: var(--ds-primary-dark);
}
 .jump-nav a.active, .jump-nav a[aria-current] {
     color: var(--ds-accent);
     border-bottom-color: var(--ds-accent);
}
 .jump-nav a:focus-visible {
     outline: 2px solid var(--ds-primary);
     outline-offset: 2px;
}
/* ═════════════════════════════════════════════════════════════════════════ 12. SECTION BAND SYSTEM (v3) Live style.css (lines 8364-8384) owns ALL band background-colors with !important -- this section intentionally never sets background-color on any rowX selector. We only style content sitting on top of each band. See the header comment's "BAND SYSTEM" section for the full mapping and the .rowAccent-as-third-solid-band correction vs. v2. ═════════════════════════════════════════════════════════════════════════ */
/* Legacy neutral gray band — demoted (tints preferred) but still valid */
 .surface-alt {
     background-color: var(--ds-surface-alt);
}
/* ── Tinted bands (rowPrimary5 / rowAccent5 / rowSecondary5): cards drop the 3px top bar (border + wash carry the separation instead) ── */
 section.rowPrimary5 .about-wrapper::before, section.rowPrimary5 .faculty-container::before, section.rowPrimary5 .subject-filter::before, section.rowPrimary5 .subject-wrapper::before, section.rowAccent5 .about-wrapper::before, section.rowAccent5 .faculty-container::before, section.rowAccent5 .subject-filter::before, section.rowAccent5 .subject-wrapper::before, section.rowSecondary5 .about-wrapper::before, section.rowSecondary5 .faculty-container::before, section.rowSecondary5 .subject-filter::before, section.rowSecondary5 .subject-wrapper::before {
     display: none;
}
/* ── rowAccent5/rowSecondary5 kicker exception: the kicker may echo the band's own hue, same rationale design.md gives for the accent tint ── */
 section.rowAccent5 .kicker-heading, section.rowSecondary5 .kicker-heading {
     color: var(--ds-accent);
}
/* ── Solid bands (rowPrimary / rowSecondary / rowAccent): full white inversion. .rowAccent is included here as a THIRD solid band (v3 correction -- see header comment) alongside rowPrimary/rowSecondary. ── */
 section.rowPrimary, section.rowSecondary, section.rowAccent, section.rowPrimary p, section.rowSecondary p, section.rowAccent p, section.rowPrimary h2, section.rowSecondary h2, section.rowAccent h2, section.rowPrimary h3, section.rowSecondary h3, section.rowAccent h3, section.rowPrimary h4, section.rowSecondary h4, section.rowAccent h4, section.rowPrimary .section-title h2, section.rowSecondary .section-title h2, section.rowAccent .section-title h2, section.rowPrimary .kicker-heading, section.rowSecondary .kicker-heading, section.rowAccent .kicker-heading, section.rowPrimary .wrapper-content p, section.rowSecondary .wrapper-content p, section.rowAccent .wrapper-content p {
     color: var(--ds-on-hero);
}
/* Headline accent word is suppressed on solid bands — a colored word cannot hold contrast or hierarchy on a saturated background. */
 section.rowPrimary .accent-word, section.rowSecondary .accent-word, section.rowAccent .accent-word {
     color: inherit;
}
/* Links invert to white, underlined */
 section.rowPrimary a:not(.btn):not(.btn-primary):not(.btn-white), section.rowSecondary a:not(.btn):not(.btn-primary):not(.btn-white), section.rowAccent a:not(.btn):not(.btn-primary):not(.btn-white) {
     color: var(--ds-on-hero);
     text-decoration: underline;
}
/* Cards on solid bands: white, bordered, NO top bar */
 section.rowPrimary .about-wrapper::before, section.rowPrimary .faculty-container::before, section.rowPrimary .subject-filter::before, section.rowPrimary .subject-wrapper::before, section.rowSecondary .about-wrapper::before, section.rowSecondary .faculty-container::before, section.rowSecondary .subject-filter::before, section.rowSecondary .subject-wrapper::before, section.rowAccent .about-wrapper::before, section.rowAccent .faculty-container::before, section.rowAccent .subject-filter::before, section.rowAccent .subject-wrapper::before {
     display: none;
}
/* Card interior text stays dark inside white cards on solid bands */
 section.rowPrimary .about-wrapper .wrapper-content p, section.rowPrimary .subject-filter .wrapper-content p, section.rowSecondary .about-wrapper .wrapper-content p, section.rowSecondary .subject-filter .wrapper-content p, section.rowAccent .about-wrapper .wrapper-content p, section.rowAccent .subject-filter .wrapper-content p {
     color: var(--ds-on-surface-muted);
}
 section.rowPrimary .about-wrapper h4, section.rowPrimary .about-wrapper h3, section.rowSecondary .about-wrapper h4, section.rowSecondary .about-wrapper h3, section.rowAccent .about-wrapper h4, section.rowAccent .about-wrapper h3, section.rowPrimary .subject-filter h3, section.rowSecondary .subject-filter h3, section.rowAccent .subject-filter h3 {
     color: var(--ds-on-surface);
}
/* rowPrimary actions: ghost buttons (ghost lives only on the solid blue band, never on white or on the other solid bands) */
 section.rowPrimary .btn-primary, section.rowPrimary .btn.btn-primary {
     background-color: rgba(255, 255, 255, 0.08);
     border: 1px solid rgba(255, 255, 255, 0.15);
     color: var(--ds-on-hero);
     padding: 11px 26px;
     box-shadow: var(--ds-shadow-control);
}
 section.rowPrimary .btn-primary:hover, section.rowPrimary .btn.btn-primary:hover {
     background-color: rgba(255, 255, 255, 0.18);
}
/* rowSecondary + rowAccent actions: button-white — the single CTA on either solid maroon-family closer band */
 section.rowSecondary .btn-primary, section.rowSecondary .btn.btn-primary, section.rowSecondary .btn-accent, section.rowAccent .btn-primary, section.rowAccent .btn.btn-primary, section.rowAccent .btn-accent {
     background-color: var(--ds-surface);
     border: 1px solid var(--ds-border);
     color: var(--ds-primary-dark);
     box-shadow: var(--ds-shadow-control);
}
 section.rowSecondary .btn-primary:hover, section.rowSecondary .btn.btn-primary:hover, section.rowSecondary .btn-accent:hover, section.rowAccent .btn-primary:hover, section.rowAccent .btn.btn-primary:hover, section.rowAccent .btn-accent:hover {
     background-color: var(--ds-surface-alt);
}
/* No chips on the maroon-family solid bands (v3 extends suppression from rowSecondary-only in v2 to also rowAccent, since rowAccent is now a solid band under the same "no blue/maroon component on its own solid band" rule) */
 section.rowSecondary .category-chip, section.rowSecondary .eyebrow-chip, section.rowSecondary .hero__eyebrow, section.rowAccent .category-chip, section.rowAccent .eyebrow-chip, section.rowAccent .hero__eyebrow {
     display: none;
}
/* Focus rings switch to white inside all three solid bands */
 section.rowPrimary :focus-visible, section.rowPrimary .btn-primary:focus-visible, section.rowPrimary .btn.btn-primary:focus-visible, section.rowSecondary :focus-visible, section.rowSecondary .btn-primary:focus-visible, section.rowSecondary .btn.btn-primary:focus-visible, section.rowAccent :focus-visible, section.rowAccent .btn-primary:focus-visible, section.rowAccent .btn.btn-primary:focus-visible {
     outline: 2px solid var(--ds-on-hero);
     outline-offset: 2px;
}
/* ── Progress fill: success-text for 3:1 non-text contrast ── */
 .progress-track {
     height: 6px;
     background-color: var(--ds-border);
     border-radius: var(--ds-radius-pill);
     overflow: hidden;
}
 .progress-fill, .progress .progress-bar {
     background-color: var(--ds-success-text);
     border-radius: var(--ds-radius-pill);
}
/* ═════════════════════════════════════════════════════════════════════════ 13. MOTION — prefers-reduced-motion Everything collapses to instant under reduced motion. See the header comment's "!important INVENTORY" for full justification of these 3 !important declarations (the only !important in this file). ═════════════════════════════════════════════════════════════════════════ */
 @media (prefers-reduced-motion: reduce) {
     *, *::before, *::after {
         transition-duration: 0.001ms !important;
         animation-duration: 0.001ms !important;
         scroll-behavior: auto !important;
    }
}