/* ==========================================================================
   VVU SCHOLAR — research portal
   ==========================================================================
   Everything is scoped under .vvus so none of it leaks into the global theme,
   and so the legacy stylesheets (bootstrap.css, style.css, materialize.css)
   that this site still loads cannot reach inside.

   Two things about the environment worth knowing before editing:
     • bootstrap.css sets html{font-size:10px}, so 1rem is 10px here. Every
       length below is therefore written in px.
     • style.css hard-codes 15px/#636363 on p, li, a and span. The :where()
       reset near the top undoes that at zero specificity, so ordinary rules
       further down win without needing !important.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Palette
   -------------------------------------------------------------------------- */
.vvus {
    --navy:        #0b2350;
    --navy-soft:   #12336d;
    --navy-deep:   #071633;
    --gold:        #a16207;
    --gold-lit:    #e9b833;

    --ink:         #0f172a;
    --ink-soft:    #475569;
    --ink-muted:   #64748b;
    --ink-faint:   #94a3b8;

    --surface:     #ffffff;
    --surface-2:   #f8fafc;
    --canvas:      #f4f6fb;
    --line:        #e2e8f0;
    --line-soft:   #eef2f7;

    --shadow-sm:   0 1px 2px rgba(15, 23, 42, .05);
    --shadow:      0 1px 2px rgba(15, 23, 42, .04), 0 12px 28px -16px rgba(15, 23, 42, .28);
    --shadow-lg:   0 2px 4px rgba(15, 23, 42, .04), 0 32px 60px -28px rgba(15, 23, 42, .34);

    --radius:      16px;
    --radius-sm:   10px;
    --radius-lg:   24px;

    font-family: 'Open Sans', system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--canvas);
    -webkit-font-smoothing: antialiased;
}

/* Per-card accent. The inline style on a card sets --acc-l / --acc-d; --acc is
   resolved on the element that carries them, not once on the scope, or every
   card in the grid would come out the same blue. */
.vvus,
.vvus * { --acc: var(--acc-l, #1d4ed8); }

.vvus :where(p, li, a, span, h1, h2, h3, h4, h5, h6, summary, strong, em, small, td, th, label, input, select, button) {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    font-family: inherit;
    letter-spacing: normal;
}

.vvus *, .vvus *::before, .vvus *::after { box-sizing: border-box; }

/* The UA rule for [hidden] is display:none at element specificity, so any
   class below that sets display (the clamped abstract, for one) silently
   un-hides it. Pin it here so toggling the attribute always works. */
.vvus [hidden] { display: none !important; }

/* The legacy theme draws a bottom rule under every input and gives selects a
   fixed height of its own. Reset them here rather than fighting it field by
   field; each control below then styles itself from scratch. */
.vvus :where(input, select, textarea, button) {
    margin: 0;
    border-radius: 0;
    background-image: none;
    box-shadow: none;
}
/* :where() keeps this at .vvus-only specificity, so the component rules further
   down (.vvus-input, .vvus-search__input) win on source order rather than
   having to out-specify their own reset. */
.vvus :where(input[type="search"], input[type="text"], input[type="email"], select, textarea) {
    border: 0;
    border-bottom: 0;
    outline: none;
    height: auto;
    width: 100%;
    box-shadow: none;
    transition: none;
}
.vvus :where(nav) {
    background: transparent;
    box-shadow: none;
    height: auto;
    line-height: inherit;
    color: inherit;
}
/* materialize.css turns every <i> inside a <nav> into a 56px-tall navbar icon
   (display:block; font-size:24px; height:56px; line-height:56px). Three of this
   page's landmarks are <nav> elements — the sub-navigation, the breadcrumb and
   the pager — so their icons were floating above their own text. */
.vvus nav i {
    display: inline-block;
    font-size: inherit;
    height: auto;
    line-height: inherit;
    vertical-align: baseline;
}
.vvus input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

.vvus :where(h1, h2, h3, h4) {
    font-family: 'Cinzel', 'Libre Baskerville', Georgia, serif;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -.01em;
}
.vvus :where(p)  { margin: 0; }
.vvus :where(ul) { margin: 0; padding: 0; list-style: none; }
.vvus :where(ol) { margin: 0; padding-left: 20px; }
.vvus :where(a)  { text-decoration: none; transition: color .18s ease; }
.vvus :where(img) { max-width: 100%; }
.vvus :where(dl, dd, dt) { margin: 0; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.vvus__wrap {
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: 20px;
}

.vvus__band { padding-block: 72px; }
.vvus__band--tight { padding-block: 48px; }
.vvus__band--alt   { background: var(--surface); }
.vvus__band--ink   { background: var(--navy); color: #e8eefc; }

.vvus__head { max-width: 760px; margin-bottom: 36px; }
.vvus__head--center { margin-inline: auto; text-align: center; }

.vvus__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 12px;
}
.vvus__eyebrow::before {
    content: '';
    width: 26px;
    height: 2px;
    background: var(--gold-lit);
    border-radius: 2px;
}
.vvus__head--center .vvus__eyebrow { justify-content: center; }

.vvus__title    { font-size: 30px; color: var(--navy); }
.vvus__subtitle { margin-top: 10px; font-size: 16px; line-height: 1.65; color: var(--ink-soft); }
.vvus__note     { margin-top: 14px; font-size: 13px; line-height: 1.7; color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   Portal sub-navigation — sticky, so the four views are always one tap away
   -------------------------------------------------------------------------- */
.vvus-subnav {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}
.vvus-subnav__inner {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 58px;
}
.vvus-subnav__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 800;
    font-size: 16px;
    color: var(--navy);
    white-space: nowrap;
}
.vvus-subnav__brand i { color: var(--gold); font-size: 18px; }
.vvus-subnav__links {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    overflow-x: auto;
    scrollbar-width: none;
}
.vvus-subnav__links::-webkit-scrollbar { display: none; }
.vvus-subnav__links a {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 15px;
    border-radius: 999px;
    font-size: 13.5px;
    line-height: 1;
    font-weight: 600;
    color: var(--ink-soft);
    white-space: nowrap;
}
.vvus-subnav__links a:hover { background: var(--surface-2); color: var(--navy); }
.vvus-subnav__links a.is-active { background: var(--navy); color: #fff; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.vvus-hero {
    position: relative;
    isolation: isolate;
    padding-block: 96px 84px;
    background: var(--navy-deep);
    color: #fff;
    overflow: hidden;
}
.vvus-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-position: center;
    animation: vvusZoom 26s linear infinite alternate;
}
.vvus-hero__veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(130% 100% at 12% 20%, rgba(11, 35, 80, .82), transparent 70%),
        linear-gradient(180deg, rgba(7, 22, 51, .90) 0%, rgba(7, 22, 51, .86) 45%, rgba(7, 22, 51, .95) 100%);
}
@keyframes vvusZoom { from { transform: scale(1); } to { transform: scale(1.09); } }

.vvus-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 16px;
    border: 1px solid rgba(233, 184, 51, .45);
    background: rgba(233, 184, 51, .14);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #f7dc95;
}
.vvus-hero__badge i { color: #f7dc95; }

.vvus-hero h1 {
    margin-top: 20px;
    font-size: clamp(30px, 5.2vw, 52px);
    line-height: 1.1;
    color: #fff;
    max-width: 16ch;
}
.vvus-hero__lead {
    margin-top: 16px;
    max-width: 62ch;
    font-size: 17px;
    line-height: 1.7;
    color: rgba(232, 238, 252, .9);
}
.vvus-hero__desc {
    margin-top: 12px;
    max-width: 70ch;
    font-size: 14.5px;
    line-height: 1.8;
    color: rgba(219, 228, 248, .72);
}

/* Search ------------------------------------------------------------------ */
.vvus-search { position: relative; margin-top: 26px; max-width: 560px; }
.vvus-search__field {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 4px 4px 15px;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .55);
}
.vvus-search__field > i { color: var(--ink-faint); font-size: 13.5px; }
.vvus .vvus-search__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 36px;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 14px;
    color: var(--ink);
    box-shadow: none;
}
.vvus-search__input::placeholder { color: var(--ink-faint); }
.vvus-search__btn {
    flex: 0 0 auto;
    height: 36px;
    padding-inline: 20px;
    border: 0;
    border-radius: 999px;
    background: var(--gold);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s ease, transform .18s ease;
}
.vvus-search__btn:hover { background: #8a5306; transform: translateY(-1px); }

.vvus-search__results {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 10px);
    z-index: 30;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    max-height: 420px;
    overflow-y: auto;
    text-align: left;
}
.vvus-search__results[hidden] { display: none; }
.vvus-search__group {
    padding: 10px 18px 4px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.vvus-search__hit {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 18px;
    color: var(--ink);
    border-top: 1px solid var(--line-soft);
}
.vvus-search__hit:first-of-type { border-top: 0; }
.vvus-search__hit:hover,
.vvus-search__hit.is-cursor { background: var(--surface-2); }
.vvus-search__hit strong { display: block; font-size: 14px; font-weight: 700; line-height: 1.35; }
.vvus-search__hit small  { display: block; font-size: 12px; color: var(--ink-muted); margin-top: 2px; }
.vvus-search__hit-icon {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 9px;
    background: var(--surface-2);
    color: var(--navy-soft);
    font-size: 13px;
}
.vvus-search__empty { padding: 20px 18px; font-size: 13.5px; color: var(--ink-muted); }

.vvus-hero__quick {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
    align-items: center;
}
.vvus-hero__quick span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(219, 228, 248, .6);
}
.vvus-hero__quick a {
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(232, 238, 252, .92);
}
.vvus-hero__quick a:hover { background: rgba(255, 255, 255, .14); color: #fff; }

.vvus-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    gap: 48px;
    align-items: center;
}
/* A grid item's default min-width is auto, so a long unbreakable run inside
   either column would widen its track past the viewport. Both columns opt out. */
.vvus-hero__grid > * { min-width: 0; }
.vvus-hero__main { min-width: 0; }

.vvus-hero__panel {
    padding: 28px 26px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .07);
    backdrop-filter: blur(14px);
    box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .9);
}
.vvus-hero__panel h2 {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #f7dc95;
    font-family: 'Open Sans', system-ui, sans-serif;
}
.vvus-hero__rows { margin-top: 18px; display: grid; gap: 2px; }
.vvus-hero__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.vvus-hero__row:last-child { border-bottom: 0; }
.vvus-hero__row dt {
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(219, 228, 248, .74);
}
.vvus-hero__row dd {
    margin: 0;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.vvus-hero__lede {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}
.vvus-hero__lede .vvus-avatar { width: 42px; height: 42px; font-size: 13px; flex: 0 0 auto; }

/* The text is wrapped in its own class rather than being targeted as
   ".vvus-hero__lede span": the avatar beside it is a <span> too, and a bare
   descendant selector was overriding its centring, size and colour. */
.vvus-hero__lede-text { min-width: 0; }
.vvus-hero__lede-text small {
    display: block;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(219, 228, 248, .58);
}
.vvus-hero__lede-text b {
    display: block;
    margin-top: 3px;
    font-size: 14px;
    color: #fff;
    line-height: 1.3;
}
.vvus-hero__lede-text > span {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--gold-lit);
}

.vvus-hero__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 26px 40px;
    margin-top: 40px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, .16);
}
.vvus-hero__pill b {
    display: block;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 30px;
    line-height: 1;
    color: var(--gold-lit);
}
.vvus-hero__pill span {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(219, 228, 248, .72);
}

/* --------------------------------------------------------------------------
   Stat tiles
   -------------------------------------------------------------------------- */
/* Two rows of three. Six tiles across one row left no room for a label like
   "Institutional h-index", which wrapped and made the cards different heights. */
.vvus-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    /* Held in from the full band width so the figure and its label sit as a
       block rather than hugging the left edge of a very wide card. */
    max-width: 1060px;
}
.vvus-stat {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.vvus-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: color-mix(in srgb, var(--acc) 32%, var(--line));
}
.vvus-stat__icon {
    flex: 0 0 auto;
    width: 52px; height: 52px;
    display: grid; place-items: center;
    border-radius: 14px;
    background: color-mix(in srgb, var(--acc) 11%, transparent);
    color: var(--acc);
    font-size: 18px;
}
.vvus-stat__text { min-width: 0; }
.vvus-stat__value {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.015em;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
}
/* Sentence case, not uppercase: the labels are phrases, and letter-spaced caps
   were what pushed "Institutional h-index" onto a second line. */
.vvus-stat__label {
    margin-top: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   Trend chart
   -------------------------------------------------------------------------- */
.vvus-trend {
    display: grid;
    grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
}
.vvus-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.vvus-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line-soft);
}
.vvus-card__head h3 { font-size: 16px; color: var(--navy); }
.vvus-card__body { padding: 22px; }

.vvus-legend { display: flex; gap: 16px; margin-left: auto; flex-wrap: wrap; }
.vvus-legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-muted);
}
.vvus-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

.vvus-chart { position: relative; height: 320px; }

.vvus-facts { display: grid; gap: 2px; background: var(--line-soft); border-radius: var(--radius-sm); overflow: hidden; }
.vvus-fact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 18px;
    background: var(--surface);
}
.vvus-fact dt { font-size: 13px; color: var(--ink-muted); font-weight: 500; }
.vvus-fact dd {
    margin: 0;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 19px;
    font-weight: 700;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Leaderboard
   -------------------------------------------------------------------------- */
.vvus-board { display: grid; gap: 12px; }
.vvus-rank {
    display: grid;
    grid-template-columns: 46px 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.vvus-rank:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: color-mix(in srgb, var(--navy) 22%, var(--line));
}
.vvus-rank__pos {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
}
.vvus-rank:nth-child(1) .vvus-rank__pos { color: #b8860b; }
.vvus-rank:nth-child(2) .vvus-rank__pos { color: #7d8590; }
.vvus-rank:nth-child(3) .vvus-rank__pos { color: #a4632c; }

.vvus-avatar {
    width: 56px; height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-2);
    display: grid;
    place-items: center;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    background-image: linear-gradient(135deg, var(--navy-soft), var(--navy));
    flex: 0 0 auto;
}
.vvus-avatar--lg { width: 118px; height: 118px; font-size: 34px; }
.vvus-avatar--sm { width: 40px; height: 40px; font-size: 13px; }

.vvus-rank__who { min-width: 0; }
.vvus-rank__name {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--navy);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vvus-rank__name:hover { color: var(--gold); }
.vvus-rank__meta {
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--ink-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vvus-rank__nums { display: flex; gap: 22px; text-align: right; }
.vvus-rank__num b {
    display: block;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 18px;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.vvus-rank__num span {
    display: block;
    margin-top: 2px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   Scholar cards (directory grid)
   -------------------------------------------------------------------------- */
.vvus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
    gap: 18px;
}
.vvus-person {
    display: flex;
    flex-direction: column;
    padding: 24px 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.vvus-person:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: color-mix(in srgb, var(--acc) 36%, var(--line));
}
.vvus-person__top { display: flex; align-items: center; gap: 14px; }
.vvus-person__name { font-size: 16px; font-weight: 700; color: var(--navy); line-height: 1.3; }
.vvus-person__name:hover { color: var(--gold); }
.vvus-person__role { margin-top: 3px; font-size: 12.5px; color: var(--ink-muted); line-height: 1.45; }
.vvus-person__unit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding: 4px 11px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--acc) 10%, transparent);
    color: var(--acc);
    font-size: 11.5px;
    font-weight: 700;
    align-self: flex-start;
}
.vvus-person__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.vvus-tag {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-soft);
}
.vvus-person__nums {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: auto;
    padding-top: 18px;
}
.vvus-person__num {
    padding: 10px 6px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    text-align: center;
}
.vvus-person__num b {
    display: block;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 17px;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.vvus-person__num span {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   Faculty / unit cards
   -------------------------------------------------------------------------- */
.vvus-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.vvus-unit {
    display: flex;
    flex-direction: column;
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
}
.vvus-unit:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.vvus-unit__icon {
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: 13px;
    background: color-mix(in srgb, var(--acc) 12%, transparent);
    color: var(--acc);
    font-size: 18px;
}
.vvus-unit h3 { margin-top: 16px; font-size: 17px; color: var(--navy); line-height: 1.3; }
.vvus-unit__desc { margin-top: 8px; font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); }
.vvus-unit__bar {
    height: 7px;
    margin-top: 18px;
    border-radius: 999px;
    background: var(--line-soft);
    overflow: hidden;
}
.vvus-unit__bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--acc);
    width: 0;
    transition: width 1.1s cubic-bezier(.22, 1, .36, 1);
}
.vvus-unit__nums {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin-top: 14px;
    font-size: 12.5px;
    color: var(--ink-muted);
}
.vvus-unit__nums b { color: var(--navy); font-weight: 700; font-variant-numeric: tabular-nums; }
/* Departments listed inside their faculty's card. */
.vvus-unit__depts {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
    display: grid;
    gap: 2px;
}
.vvus-unit__depts a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--ink-soft);
}
.vvus-unit__depts a:hover { background: var(--surface-2); color: var(--navy); }
.vvus-unit__depts i { color: var(--acc); font-size: 12px; width: 16px; text-align: center; flex: 0 0 auto; }
.vvus-unit__depts span { flex: 1 1 auto; min-width: 0; }
.vvus-unit__depts b {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
}

.vvus-unit__cta {
    margin-top: 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--acc);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.vvus-unit__cta i { transition: transform .18s ease; }
.vvus-unit:hover .vvus-unit__cta i { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Research areas
   -------------------------------------------------------------------------- */
.vvus-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.vvus-area {
    position: relative;
    padding: 26px 22px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}
.vvus-area::after {
    content: '';
    position: absolute;
    inset: auto -30px -40px auto;
    width: 130px; height: 130px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--acc) 8%, transparent);
}
.vvus-area:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.vvus-area__icon {
    position: relative;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: var(--acc);
    color: #fff;
    font-size: 17px;
}
.vvus-area h3 { position: relative; margin-top: 15px; font-size: 15.5px; color: var(--navy); line-height: 1.35; }
.vvus-area p  { position: relative; margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
.vvus-area__count {
    position: relative;
    margin-top: 16px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--acc);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.vvus-area__sdg { position: relative; display: flex; gap: 5px; margin-top: 12px; flex-wrap: wrap; }
.vvus-area__sdg b {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 9px;
    border-radius: 6px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--ink-soft);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Publications
   -------------------------------------------------------------------------- */
.vvus-pubs { display: grid; gap: 14px; }
.vvus-pub {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    padding: 22px 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s ease, border-color .2s ease;
}
.vvus-pub:hover { box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--navy) 18%, var(--line)); }
.vvus-pub__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.vvus-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: color-mix(in srgb, var(--acc) 12%, transparent);
    color: var(--acc);
}
.vvus-chip--plain { background: var(--surface-2); color: var(--ink-muted); border: 1px solid var(--line); }
.vvus-chip--oa    { background: rgba(21, 128, 61, .1); color: #15803d; }
.vvus-pub__title {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--navy);
}
.vvus-pub__title:hover { color: var(--gold); }
.vvus-pub__authors { margin-top: 8px; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }
.vvus-pub__authors a { color: var(--navy-soft); font-weight: 600; }
.vvus-pub__authors a:hover { color: var(--gold); }
.vvus-pub__venue { margin-top: 6px; font-size: 13px; color: var(--ink-muted); font-style: italic; }
.vvus-pub__abstract {
    margin-top: 12px;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--ink-soft);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.vvus-pub__tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.vvus-pub__aside {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    min-width: 92px;
    padding: 14px 10px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    align-self: start;
}
.vvus-pub__aside b {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 24px;
    line-height: 1;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
}
.vvus-pub__aside span {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    text-align: center;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.vvus-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 11px 22px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    background: var(--navy);
    color: #fff;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease, color .18s ease, border-color .18s ease;
}
.vvus-btn:hover { background: var(--navy-soft); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow); }
.vvus-btn--gold  { background: var(--gold); }
.vvus-btn--gold:hover { background: #8a5306; }
.vvus-btn--ghost { background: transparent; color: var(--navy); border-color: var(--line); }
.vvus-btn--ghost:hover { background: var(--surface-2); color: var(--navy); border-color: var(--navy); }
.vvus-btn--light { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .3); }
.vvus-btn--light:hover { background: rgba(255, 255, 255, .22); }
.vvus-btn--sm { padding: 7px 14px; font-size: 12.5px; gap: 7px; }

.vvus-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.vvus-actions--center { justify-content: center; }

/* --------------------------------------------------------------------------
   Filter bar (directory + catalogue pages)
   -------------------------------------------------------------------------- */
.vvus-filters {
    display: grid;
    grid-template-columns: minmax(220px, 2fr) repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.vvus-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vvus-field > label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
/* Qualified with .vvus so these reach (0,2,0): style.css carries an
   element-level rule for input[type=search] at (0,1,1), which a single class
   would lose to, leaving the search field as a bare underline. */
.vvus .vvus-input, .vvus .vvus-select {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: 14px;
    color: var(--ink);
    outline: 0;
    box-shadow: none;
    display: block;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.vvus .vvus-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748b'%3E%3Cpath d='M4.5 6l3.5 4 3.5-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 16px;
    cursor: pointer;
}
.vvus .vvus-input:focus, .vvus .vvus-select:focus {
    border-color: var(--navy-soft);
    box-shadow: 0 0 0 3px rgba(18, 51, 109, .12);
}
/* The Apply cell can land alone on a wrapped grid row, where a stretched
   button would run the full width of the form. Size it to its own label. */
.vvus-field--go { justify-content: flex-end; }
.vvus-field--go .vvus-btn { align-self: flex-start; min-width: 132px; }

.vvus-resultbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 24px 0 18px;
}
.vvus-resultbar__count { font-size: 14px; color: var(--ink-muted); }
.vvus-resultbar__count b { color: var(--navy); font-weight: 700; }
.vvus-resultbar__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.vvus-empty {
    padding: 56px 24px;
    text-align: center;
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
}
.vvus-empty i { font-size: 30px; color: var(--ink-faint); }
.vvus-empty h3 { margin-top: 14px; font-size: 18px; color: var(--navy); }
.vvus-empty p  { margin-top: 8px; font-size: 14px; color: var(--ink-muted); }

/* Pagination -------------------------------------------------------------- */
.vvus-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 32px; }
.vvus-pager a, .vvus-pager span {
    min-width: 40px;
    height: 40px;
    padding-inline: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-soft);
}
.vvus-pager a:hover { border-color: var(--navy); color: var(--navy); }
.vvus-pager .is-current { background: var(--navy); border-color: var(--navy); color: #fff; }
.vvus-pager .is-gap { border: 0; background: transparent; }

/* --------------------------------------------------------------------------
   Highlights & partners
   -------------------------------------------------------------------------- */
.vvus-highlights { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.vvus-highlight {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}
.vvus-highlight:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.vvus-highlight__img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; background: var(--surface-2); }
.vvus-highlight__body { padding: 22px; display: flex; flex-direction: column; flex: 1 1 auto; }
/* A column flex container stretches its children, which turned the type
   chip into a full-width bar. Keep it the width of its own text. */
.vvus-highlight__body > .vvus-chip { align-self: flex-start; }
.vvus-highlight h3 { margin-top: 12px; font-size: 16px; color: var(--navy); line-height: 1.35; }
.vvus-highlight__sub { margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--acc); }
.vvus-highlight p { margin-top: 10px; font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); }
.vvus-highlight__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-top: auto;
    padding-top: 16px;
    font-size: 12.5px;
    color: var(--ink-muted);
}
.vvus-highlight__amount {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--acc);
}

.vvus-partners {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px;
}
.vvus-partner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 118px;
    padding: 20px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-align: center;
    transition: transform .18s ease, box-shadow .18s ease;
}
.vvus-partner:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.vvus-partner img { max-height: 44px; width: auto; object-fit: contain; }
.vvus-partner__name { font-size: 13px; font-weight: 700; color: var(--navy); line-height: 1.35; }
.vvus-partner__where { font-size: 11.5px; color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   Closing call to action
   -------------------------------------------------------------------------- */
.vvus-cta {
    position: relative;
    isolation: isolate;
    padding: 56px 44px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 55%, #1b4a96 100%);
    color: #fff;
    overflow: hidden;
    text-align: center;
}
.vvus-cta::after {
    content: '';
    position: absolute;
    inset: -60% -20% auto auto;
    width: 380px; height: 380px;
    border-radius: 50%;
    background: rgba(233, 184, 51, .16);
    z-index: -1;
}
.vvus-cta h2 { font-size: clamp(22px, 3.4vw, 32px); color: #fff; }
.vvus-cta p  { margin: 14px auto 0; max-width: 62ch; font-size: 15.5px; line-height: 1.75; color: rgba(232, 238, 252, .88); }
.vvus-cta .vvus-actions { margin-top: 28px; }

/* --------------------------------------------------------------------------
   Profile page
   -------------------------------------------------------------------------- */
.vvus-profile { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 24px; align-items: start; }
.vvus-profile__side { position: sticky; top: 78px; display: grid; gap: 18px; }
.vvus-idcard {
    padding: 28px 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    text-align: center;
}
.vvus-idcard .vvus-avatar { margin: 0 auto 16px; }
.vvus-idcard h1 { font-size: 22px; color: var(--navy); line-height: 1.25; }
.vvus-idcard__role { margin-top: 8px; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }
.vvus-idcard__unit { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--acc); }
.vvus-idcard__contact { display: grid; gap: 8px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-soft); text-align: left; }
.vvus-idcard__contact a, .vvus-idcard__contact span {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--ink-soft);
    word-break: break-word;
}
.vvus-idcard__contact i { width: 16px; color: var(--ink-faint); text-align: center; flex: 0 0 auto; }
.vvus-idcard__contact a:hover { color: var(--navy); }

.vvus-profilelinks { display: grid; gap: 8px; margin-top: 18px; }
.vvus-profilelink {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.vvus-profilelink i { color: var(--acc); font-size: 15px; width: 18px; text-align: center; }
.vvus-profilelink:hover { border-color: var(--acc); color: var(--navy); background: var(--surface-2); }
.vvus-profilelink .fa-arrow-up-right-from-square { margin-left: auto; font-size: 10px; color: var(--ink-faint); }

.vvus-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.vvus-metric {
    padding: 18px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.vvus-metric b {
    display: block;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 26px;
    line-height: 1;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
}
.vvus-metric span {
    display: block;
    margin-top: 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.vvus-prose { font-size: 14.5px; line-height: 1.85; color: var(--ink-soft); }
.vvus-prose p + p { margin-top: 12px; }

.vvus-coauthors { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.vvus-coauthor {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    transition: border-color .18s ease, transform .18s ease;
}
.vvus-coauthor:hover { border-color: var(--navy); transform: translateY(-2px); }
.vvus-coauthor b { display: block; font-size: 13.5px; font-weight: 700; color: var(--navy); line-height: 1.3; }
.vvus-coauthor small { display: block; font-size: 11.5px; color: var(--ink-muted); margin-top: 2px; }

/* Breadcrumb -------------------------------------------------------------- */
.vvus-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: rgba(219, 228, 248, .7);
}
.vvus-crumbs a { color: rgba(232, 238, 252, .88); }
.vvus-crumbs a:hover { color: #fff; }
/* A plain character rather than an icon: an icon-font glyph carries its own
   line box into this flex row and would not sit on the crumb text's baseline. */
.vvus-crumbs__sep { opacity: .45; user-select: none; }

/* Toast (copy citation) --------------------------------------------------- */
.vvus-toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    z-index: 1200;
    transform: translate(-50%, 22px);
    padding: 12px 22px;
    border-radius: 999px;
    background: var(--navy);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}
.vvus-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Reveal-on-scroll -------------------------------------------------------- */
.vvus-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.vvus-reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
    .vvus-profile { grid-template-columns: 1fr; }
    .vvus-profile__side { position: static; }
    .vvus-trend { grid-template-columns: 1fr; }
}

@media (max-width: 1080px) {
    .vvus-hero__grid { grid-template-columns: 1fr; gap: 36px; }
    .vvus-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .vvus__band { padding-block: 54px; }
    .vvus-hero { padding-block: 68px 56px; }
    .vvus__title { font-size: 25px; }
    .vvus-subnav__brand span { display: none; }
    .vvus-pub { grid-template-columns: 1fr; }
    .vvus-pub__aside {
        flex-direction: row;
        align-items: baseline;
        justify-content: flex-start;
        gap: 9px;
        padding: 10px 14px;
    }
    .vvus-pub__aside span { text-align: left; }
    .vvus-cta { padding: 40px 24px; }
}

@media (max-width: 620px) {
    .vvus__wrap { padding-inline: 16px; }
    .vvus-search__field { padding: 6px 6px 6px 14px; }
    .vvus-search__btn { padding-inline: 16px; }
    .vvus-rank {
        grid-template-columns: 32px 44px minmax(0, 1fr);
        gap: 12px;
        padding: 14px 16px;
    }
    .vvus-rank .vvus-avatar { width: 44px; height: 44px; font-size: 14px; }
    .vvus-rank__nums {
        grid-column: 1 / -1;
        justify-content: flex-start;
        text-align: left;
        gap: 20px;
        padding-top: 12px;
        margin-top: 2px;
        border-top: 1px solid var(--line-soft);
    }
    .vvus-hero__panel { padding: 22px 20px; }
    .vvus-hero__row dd { font-size: 21px; }
    .vvus-hero__pills { gap: 20px 28px; }
    .vvus-hero__pill b { font-size: 25px; }
    .vvus-filters { grid-template-columns: 1fr; }
    .vvus-chart { height: 260px; }
    .vvus-stats { grid-template-columns: 1fr; }
    .vvus-stat { padding: 18px 20px; gap: 15px; }
    .vvus-stat__icon { width: 42px; height: 42px; font-size: 15px; }
    .vvus-stat__value { font-size: 29px; }
}

@media (prefers-reduced-motion: reduce) {
    .vvus *, .vvus *::before, .vvus *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .vvus-reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Dark mode. Only the tokens are redefined — every rule above is written
   against them, so nothing else has to change.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    .vvus {
        --ink:       #e8eefc;
        --ink-soft:  #b6c2d9;
        --ink-muted: #93a1bb;
        --ink-faint: #6d7c99;

        --surface:   #111a2e;
        --surface-2: #17223a;
        --canvas:    #0b1324;
        --line:      #24314e;
        --line-soft: #1c2740;

        --navy:      #dbe6ff;
        --navy-soft: #a8c0f0;
        --gold:      #e9b833;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
        --shadow:    0 1px 2px rgba(0, 0, 0, .4), 0 14px 30px -18px rgba(0, 0, 0, .8);
        --shadow-lg: 0 2px 4px rgba(0, 0, 0, .5), 0 34px 64px -30px rgba(0, 0, 0, .9);
    }
    .vvus, .vvus * { --acc: var(--acc-d, #93b4fd); }

    .vvus-subnav { background: rgba(11, 19, 36, .92); border-bottom-color: var(--line); }
    .vvus-subnav__links a.is-active { background: #93b4fd; color: #0b1324; }
    .vvus-search__field { background: var(--surface); box-shadow: 0 20px 44px -18px rgba(0, 0, 0, .9); }
    .vvus .vvus-search__input { color: var(--ink); }
    .vvus-search__results { background: var(--surface); }
    .vvus-search__hit { color: var(--ink); }
    .vvus-search__btn { background: #e9b833; color: #2a1c02; }
    .vvus-search__btn:hover { background: #f2c751; }

    .vvus-btn { background: #2a3d63; color: #eaf0ff; }
    .vvus-btn:hover { background: #35507f; color: #fff; }
    .vvus-btn--gold { background: #e9b833; color: #2a1c02; }
    .vvus-btn--gold:hover { background: #f2c751; color: #2a1c02; }
    .vvus-btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
    .vvus-btn--ghost:hover { background: var(--surface-2); color: var(--ink); border-color: #93b4fd; }

    .vvus-pager .is-current { background: #93b4fd; border-color: #93b4fd; color: #0b1324; }
    .vvus-avatar { background-image: linear-gradient(135deg, #2a3d63, #1b2a47); }
    .vvus-cta { background: linear-gradient(135deg, #14203a 0%, #1d3057 55%, #274779 100%); }
    .vvus-cta h2 { color: #fff; }
    .vvus-chip--oa { background: rgba(134, 239, 172, .12); color: #86efac; }
    .vvus-toast { background: #2a3d63; }
    .vvus .vvus-select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2393a1bb'%3E%3Cpath d='M4.5 6l3.5 4 3.5-4z'/%3E%3C/svg%3E");
    }
    .vvus .vvus-input:focus, .vvus .vvus-select:focus {
        border-color: #93b4fd;
        box-shadow: 0 0 0 3px rgba(147, 180, 253, .18);
    }
}

/* Print — a researcher printing their own profile should get the substance. */
@media print {
    .vvus-subnav, .vvus-hero__quick, .vvus-search, .vvus-pub__tools, .vvus-cta { display: none !important; }
    .vvus { background: #fff; }
    .vvus-card, .vvus-person, .vvus-pub, .vvus-idcard { box-shadow: none; border-color: #ccc; }
}