/* ═══════════════════════════════════════════════════════════════════════
 * FACULTY PAGES: professors.html and each professor's page
 * The home blue, the see-through header and the cursor dot grid of the home
 * and course pages (css/course-hero.css), in place of the purple hero with
 * particles. Load after site.css, professors.css and course-hero.css; the
 * <body> also carries .course-hero-page and includes/hero.js runs the header
 * and the dot grid.
 * ═══════════════════════════════════════════════════════════════════════ */

/* ═══ SHARED HERO PIECES ═══════════════════════════════════════════════ */
body.page-professors .hero .hero-eyebrow,
body[class*="page-prof-"] .hero .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    padding: 8px 18px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #fff;
    font: 700 13px/1.6 Inter, -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
body.page-professors .hero .hero-eyebrow i,
body[class*="page-prof-"] .hero .hero-eyebrow i {
    color: #64d2ff;
}
body.page-professors .hero .hero-ctas,
body[class*="page-prof-"] .hero .hero-ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
body.page-professors .hero .hero-cta,
body[class*="page-prof-"] .hero .hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 14px 28px;
    border-radius: 100px;
    border: 1.5px solid transparent;
    background: linear-gradient(135deg, #0071e3 0%, #1a8fff 50%, #005bb5 100%);
    box-shadow: 0 6px 22px rgba(0, 113, 227, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    color: #fff;
    font: 700 15px/1.6 Inter, -apple-system, BlinkMacSystemFont, sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
body.page-professors .hero .hero-cta i,
body[class*="page-prof-"] .hero .hero-cta i {
    font-size: 13px;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
body.page-professors .hero .hero-cta:hover,
body[class*="page-prof-"] .hero .hero-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 113, 227, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    color: #fff;
}
body.page-professors .hero .hero-cta:hover .fa-arrow-right,
body[class*="page-prof-"] .hero .hero-cta:hover .fa-arrow-right {
    transform: translateX(4px);
}
body.page-professors .hero .hero-cta:hover .fa-arrow-down {
    transform: translateY(3px);
}
/* the glass button next to the blue one, as on the home */
body.page-professors .hero .hero-cta.hero-cta-ghost,
body[class*="page-prof-"] .hero .hero-cta.hero-cta-ghost {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: none;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
body.page-professors .hero .hero-cta.hero-cta-ghost:hover,
body[class*="page-prof-"] .hero .hero-cta.hero-cta-ghost:hover {
    background: #fff;
    border-color: #fff;
    color: #0071e3;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
body[class*="page-prof-"] .hero .hero-cta.hero-cta-ghost .fa-play {
    font-size: 11px;
}
body.page-professors .hero .hero-cta:focus-visible,
body[class*="page-prof-"] .hero .hero-cta:focus-visible {
    outline: 3px solid #64d2ff;
    outline-offset: 3px;
}
@media (max-width: 768px) {
    body.page-professors .hero .hero-eyebrow,
    body[class*="page-prof-"] .hero .hero-eyebrow {
        margin-bottom: 12px;
        padding: 7px 14px;
        font-size: 11.5px;
    }
    body.page-professors .hero .hero-ctas,
    body[class*="page-prof-"] .hero .hero-ctas {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
}

/* ═══ PROFESSOR PAGE HERO (.hero.hero-photo) ═══════════════════════════
 * Same layout as the course pages: the studio portrait (a landscape photo
 * on a navy backdrop) fills the right side and dissolves into the hero
 * blue; name, course, a one-line bio, the buttons and three facts on the
 * left. Up to 1024px the portrait opens the hero and fades downward.
 * ═══════════════════════════════════════════════════════════════════════ */
body[class*="page-prof-"] .hero.hero-photo {
    border-bottom: 0;
    color: #fff;
}
/* the hero is a flex row on desktop: without this the container shrinks to the copy and centers it */
body[class*="page-prof-"] .hero.hero-photo > .container {
    width: 100%;
}
body[class*="page-prof-"] .hero.hero-photo .hero-photo-bg {
    --hero-photo-pos: 50% 30%;
    --hero-photo-pos-mobile: 50% 22%;
}
body[class*="page-prof-"] .hero.hero-photo .hero-text h1 {
    margin: 0 0 10px;
    color: #fff;
    font: 800 clamp(44px, 5vw, 74px)/1.04 Inter, -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: -0.035em;
    text-wrap: balance;
    text-shadow: 0 4px 24px rgba(0, 12, 28, 0.45);
}
body[class*="page-prof-"] .hero.hero-photo .hero-role {
    margin: 0 0 18px;
    color: #64d2ff;
    font: 600 clamp(18px, 1.55vw, 22px)/1.35 Inter, -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: -0.01em;
}
body[class*="page-prof-"] .hero.hero-photo .hero-text .lead {
    max-width: 540px;
    margin: 0 0 28px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.65;
    text-align: left;
}
body[class*="page-prof-"] .hero.hero-photo .hero-facts {
    margin-top: 30px;
}
@media (min-width: 1025px) {
    /* the copy column needs less room than a course title */
    body[class*="page-prof-"] .hero.hero-photo .hero-container {
        grid-template-columns: minmax(0, min(580px, 44vw));
    }
    /* The portraits are close-ups (head and shoulders filling the frame), so
       at full hero height the face came out life-size and touched the menu.
       The photo sits on the bottom edge instead, a bit shorter, and its top
       melts into the navy. --prof-photo-h adjusts one page if needed. */
    body[class*="page-prof-"] .hero.hero-photo .hero-photo-bg {
        top: auto;
        bottom: 0;
        height: var(--prof-photo-h, min(calc(100% - var(--pl-hero-top) - 44px), 720px));
        width: min(58%, 960px);
        /* left: the course-page fade; an ellipse rising from the bottom
           dissolves the top corners, so the backdrop leaves no edge line */
        -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.45) 80px, rgba(0, 0, 0, 0.9) 160px, #000 220px), radial-gradient(85% 120% at 58% 100%, #000 80%, transparent 100%), linear-gradient(180deg, transparent 0, #000 28px);
        mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.45) 80px, rgba(0, 0, 0, 0.9) 160px, #000 220px), radial-gradient(85% 120% at 58% 100%, #000 80%, transparent 100%), linear-gradient(180deg, transparent 0, #000 28px);
        -webkit-mask-composite: source-in, source-in;
        mask-composite: intersect, intersect;
    }
}
@media (max-width: 1024px) {
    body[class*="page-prof-"] .hero.hero-photo {
        padding-bottom: 48px;
    }
    /* no photo on file (Russell Rogers): the copy starts below the header,
       not under it (the photo used to make that room) */
    body[class*="page-prof-"] .hero.hero-photo:not(:has(.hero-photo-bg)) {
        padding-top: calc(var(--pl-hero-top) + 36px);
    }
    body[class*="page-prof-"] .hero.hero-photo:not(:has(.hero-photo-bg)) > .container {
        margin-top: 0;
    }
    body[class*="page-prof-"] .hero.hero-photo .hero-photo-bg {
        height: min(78vw, 520px);
    }
}
@media (max-width: 768px) {
    body[class*="page-prof-"] .hero.hero-photo .hero-text h1 {
        font-size: clamp(36px, 10vw, 44px);
    }
    body[class*="page-prof-"] .hero.hero-photo .hero-role {
        font-size: 17px;
        margin-bottom: 14px;
    }
    body[class*="page-prof-"] .hero.hero-photo .hero-text .lead {
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 22px;
    }
}

/* Below the hero: the home blue instead of indigo (professors.css reads
   these variables), and blue background orbs. */
body[class*="page-prof-"] {
    --accent: #0071e3;
    --accent-light: #42a1ff;
    --accent-bg: rgba(0, 113, 227, 0.07);
    --accent-border: rgba(0, 113, 227, 0.18);
}
body[class*="page-prof-"] .orb-1 {
    background: radial-gradient(circle, #bfdbfe 0%, #e0f2fe 70%, transparent 100%);
}
body[class*="page-prof-"] .orb-2 {
    background: radial-gradient(circle, #dbeafe 0%, #60a5fa 70%, transparent 100%);
}
body[class*="page-prof-"] .prof-section:hover {
    box-shadow: 0 12px 48px rgba(0, 113, 227, 0.1);
}

/* Intro video popup (includes/faculty.js) */
.faculty-video {
    width: min(960px, calc(100vw - 32px));
    max-width: none;
    margin: auto; /* professors.css zeroes every margin, which pinned the popup to the corner */
    padding: 0;
    border: 0;
    border-radius: 20px;
    overflow: visible;
    background: transparent;
}
.faculty-video::backdrop {
    background: rgba(0, 8, 20, 0.82);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.faculty-video-frame {
    aspect-ratio: 16 / 9;
    border-radius: 20px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.faculty-video-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
.faculty-video-close {
    position: absolute;
    top: -52px;
    right: 0;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}
.faculty-video-close:hover {
    background: #fff;
    color: #0071e3;
}

/* ═══ FACULTY LIST HERO (professors.html, .hero.faculty-hero) ═════════
 * The home hero: full screen, centered copy, and a frame of professor
 * portraits floating on both sides (each one links to that professor's
 * page and shows the name on hover). On phones the portraits become one
 * row that drifts slowly sideways above the title.
 * ═══════════════════════════════════════════════════════════════════════ */
body.page-professors .hero.faculty-hero {
    --pl-content-w: min(760px, calc(100vw - 380px));
    --pl-gutter: calc((100% - var(--pl-content-w)) / 2);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    margin-top: calc(-1 * var(--pl-hero-top));
    padding: calc(var(--pl-hero-top) + 48px) 0 56px;
    overflow: hidden;
    border-bottom: 0;
    background:
        radial-gradient(80% 70% at 50% 30%, rgba(0, 82, 155, 0.9) 0%, rgba(0, 60, 120, 0.7) 25%, rgba(0, 40, 90, 0.4) 50%, transparent 75%),
        radial-gradient(100% 100% at 50% 45%, rgba(0, 100, 180, 0.5) 0%, rgba(0, 70, 140, 0.3) 30%, transparent 60%),
        linear-gradient(135deg, #000 0%, #001525 30%, #002a4a 50%, #001a35 70%, #000 100%);
    background-color: #000305;
}
body.page-professors .hero.faculty-hero .hero-container {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: var(--pl-content-w);
    padding: 0;
}
body.page-professors .hero.faculty-hero .hero-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
body.page-professors .hero.faculty-hero .hero-text h1 {
    margin: 0 0 18px;
    color: #fff;
    font: 800 clamp(44px, min(5.6vw, 9vh), 92px)/1.02 Inter, -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: -0.035em;
    text-shadow: none;
    text-wrap: balance;
}
body.page-professors .hero.faculty-hero .hero-text .lead {
    max-width: 600px;
    margin: 0 auto 30px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 19px;
    font-weight: 400;
    line-height: 1.55;
    text-align: center;
}
body.page-professors .hero.faculty-hero .hero-ctas {
    justify-content: center;
}
body.page-professors .hero.faculty-hero .hero-facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 24px;
    margin: 30px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    list-style: none;
}
body.page-professors .hero.faculty-hero .hero-facts li {
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, 0.84);
    font: 500 14px/1.5 Inter, -apple-system, BlinkMacSystemFont, sans-serif;
}
body.page-professors .hero.faculty-hero .hero-facts li::before {
    content: "";
    flex: none;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #64d2ff;
}

/* dot grid behind the title (same rules as css/course-hero.css) */
body.page-professors .hero.faculty-hero .hero-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.46) 1.3px, transparent 2px);
    background-size: 26px 26px;
    --hg-open: 0;
    -webkit-mask-image: radial-gradient(max(1px, calc((var(--hg-tw, 360px) + var(--hg-sx, 0px)) * var(--hg-open))) max(1px, calc((var(--hg-th, 110px) + var(--hg-sy, 0px)) * var(--hg-open))) at var(--hg-lx, 50%) var(--hg-ly, 45%), #000 20%, rgba(0, 0, 0, 0.55) 60%, transparent 100%);
    mask-image: radial-gradient(max(1px, calc((var(--hg-tw, 360px) + var(--hg-sx, 0px)) * var(--hg-open))) max(1px, calc((var(--hg-th, 110px) + var(--hg-sy, 0px)) * var(--hg-open))) at var(--hg-lx, 50%) var(--hg-ly, 45%), #000 20%, rgba(0, 0, 0, 0.55) 60%, transparent 100%);
    opacity: 0;
    transition: opacity 0.5s ease, --hg-open 1s cubic-bezier(0.22, 1, 0.36, 1);
}
body.page-professors .hero.faculty-hero.is-grid-on .hero-grid {
    opacity: 1;
    --hg-open: 1;
}

/* the portraits */
body.page-professors .faculty-float {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    /* cards near the top come out from under the see-through header */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent calc(var(--pl-hero-top) - 24px), #000 calc(var(--pl-hero-top) + 56px));
    mask-image: linear-gradient(to bottom, transparent 0, transparent calc(var(--pl-hero-top) - 24px), #000 calc(var(--pl-hero-top) + 56px));
}
body.page-professors .ff-card {
    position: absolute;
    display: block;
    width: clamp(110px, calc(var(--pl-gutter) * 0.44), 210px);
    color: #fff;
    text-decoration: none;
    pointer-events: auto;
}
body.page-professors .ff-card:hover,
body.page-professors .ff-card:focus-visible {
    z-index: 5;
}
body.page-professors .ff-bob {
    display: block;
    animation: ffFloat 7.6s ease-in-out infinite;
}
@keyframes ffFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}
body.page-professors .ff-photo {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    border-radius: 26px;
    overflow: hidden;
    background: #001a35;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2), box-shadow 0.35s ease, border-color 0.35s ease;
    animation: ffPop 0.8s cubic-bezier(0.2, 0.9, 0.3, 1.2) backwards;
}
body.page-professors .ff-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 12%;
}
@keyframes ffPop {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.84);
    }
}
body.page-professors .ff-card:hover .ff-photo,
body.page-professors .ff-card:focus-visible .ff-photo {
    transform: scale(1.1);
    border-color: rgba(100, 210, 255, 0.75);
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.55), 0 0 0 4px rgba(100, 210, 255, 0.18);
}
body.page-professors .ff-card:focus-visible {
    outline: none;
}
body.page-professors .ff-card:focus-visible .ff-photo {
    outline: 3px solid #64d2ff;
    outline-offset: 3px;
}
/* name and course: shown on hover, over the dark bottom of the portrait */
body.page-professors .ff-tag {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 11px;
    border-radius: 14px;
    background: rgba(0, 16, 38, 0.62);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
body.page-professors .ff-tag strong {
    font: 700 12.5px/1.25 Inter, -apple-system, BlinkMacSystemFont, sans-serif;
    color: #fff;
}
body.page-professors .ff-tag span {
    font: 500 11px/1.3 Inter, -apple-system, BlinkMacSystemFont, sans-serif;
    color: #9fdcff;
}
body.page-professors .ff-card:hover .ff-tag,
body.page-professors .ff-card:focus-visible .ff-tag {
    opacity: 1;
    transform: none;
}
/* positions in side-gutter units, mirrored left/right, as on the home */
body.page-professors .ff-l1 { left: calc(var(--pl-gutter) * 0.44); top: calc(var(--pl-hero-top) - 28px); }
body.page-professors .ff-l2 { left: calc(var(--pl-gutter) * -0.12); top: calc(var(--pl-hero-top) + (100% - var(--pl-hero-top)) * 0.13); }
body.page-professors .ff-l3 { left: calc(var(--pl-gutter) * -0.26); top: calc(var(--pl-hero-top) + (100% - var(--pl-hero-top)) * 0.5); }
body.page-professors .ff-l4 { left: calc(var(--pl-gutter) * 0.375); top: 76%; }
body.page-professors .ff-r1 { right: calc(var(--pl-gutter) * 0.44); top: calc(var(--pl-hero-top) - 28px); }
body.page-professors .ff-r2 { right: calc(var(--pl-gutter) * -0.12); top: calc(var(--pl-hero-top) + (100% - var(--pl-hero-top)) * 0.13); }
body.page-professors .ff-r3 { right: calc(var(--pl-gutter) * -0.26); top: calc(var(--pl-hero-top) + (100% - var(--pl-hero-top)) * 0.5); }
body.page-professors .ff-r4 { right: calc(var(--pl-gutter) * 0.375); top: 76%; }
/* cards that bleed off the edge keep their tag on the visible part */
body.page-professors .ff-l2 .ff-tag,
body.page-professors .ff-l3 .ff-tag { left: 32%; }
body.page-professors .ff-r2 .ff-tag,
body.page-professors .ff-r3 .ff-tag { right: 32%; }
/* mirrored pairs float on the same rhythm */
body.page-professors .ff-l1 .ff-bob, body.page-professors .ff-r1 .ff-bob { animation-duration: 7.4s; animation-delay: -1.2s; }
body.page-professors .ff-l2 .ff-bob, body.page-professors .ff-r2 .ff-bob { animation-duration: 8.2s; animation-delay: -4.6s; }
body.page-professors .ff-l3 .ff-bob, body.page-professors .ff-r3 .ff-bob { animation-duration: 7.8s; animation-delay: -2.4s; }
body.page-professors .ff-l4 .ff-bob, body.page-professors .ff-r4 .ff-bob { animation-duration: 8.6s; animation-delay: -6s; }
body.page-professors .ff-l1 .ff-photo, body.page-professors .ff-r1 .ff-photo { animation-delay: 0.2s; }
body.page-professors .ff-l2 .ff-photo, body.page-professors .ff-r2 .ff-photo { animation-delay: 0.35s; }
body.page-professors .ff-l3 .ff-photo, body.page-professors .ff-r3 .ff-photo { animation-delay: 0.5s; }
body.page-professors .ff-l4 .ff-photo, body.page-professors .ff-r4 .ff-photo { animation-delay: 0.65s; }

@media (min-width: 1400px) {
    body.page-professors .hero.faculty-hero {
        --pl-content-w: min(820px, calc(100vw - 520px));
    }
}
@media (max-width: 1024px) {
    body.page-professors .hero.faculty-hero .hero-grid {
        display: none;
    }
}

/* Tablets and phones: the portraits become one row above the pill,
   drifting from one end to the other and back (a full-screen frame left a
   tall empty hero on a portrait tablet). */
@media (max-width: 1024px) {
    body.page-professors .hero.faculty-hero {
        display: block;
        min-height: 0;
        padding: calc(var(--pl-hero-top) + 22px) 0 52px;
    }
    body.page-professors .faculty-float {
        position: relative;
        inset: auto;
        display: flex;
        gap: 12px;
        width: max-content;
        margin: 0 0 30px;
        padding: 0 20px;
        -webkit-mask-image: none;
        mask-image: none;
        animation: ffDrift 38s ease-in-out infinite alternate;
    }
    @keyframes ffDrift {
        from { transform: translateX(0); }
        to { transform: translateX(calc(100vw - 100%)); }
    }
    body.page-professors .ff-card {
        position: relative;
        inset: auto;
        flex: none;
        width: 112px;
    }
    body.page-professors .ff-bob {
        animation: none;
    }
    body.page-professors .ff-photo {
        border-radius: 18px;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    }
    body.page-professors .ff-tag {
        display: none;
    }
    body.page-professors .hero.faculty-hero .hero-container {
        max-width: 720px;
        margin: 0 auto;
        padding: 0 20px;
    }
}
@media (max-width: 768px) {
    body.page-professors .hero.faculty-hero .hero-container {
        max-width: none;
    }
    /* phones read left-aligned across the site (site.css), so the pill and facts follow */
    body.page-professors .hero.faculty-hero .hero-text {
        align-items: flex-start;
    }
    body.page-professors .hero.faculty-hero .hero-text h1 {
        font-size: clamp(38px, 11vw, 48px);
        margin-bottom: 14px;
    }
    body.page-professors .hero.faculty-hero .hero-text .lead {
        font-size: 16.5px;
        margin-bottom: 24px;
    }
    body.page-professors .hero.faculty-hero .hero-ctas {
        width: 100%;
    }
    body.page-professors .hero.faculty-hero .hero-facts {
        justify-content: flex-start;
        width: 100%;
        gap: 6px 18px;
        margin-top: 24px;
        padding-top: 16px;
    }
    body.page-professors .hero.faculty-hero .hero-facts li {
        font-size: 13.5px;
    }
}
@media (prefers-reduced-motion: reduce) {
    body.page-professors .ff-bob,
    body.page-professors .ff-photo,
    body.page-professors .faculty-float {
        animation: none !important;
    }
}

/* The list below the hero: the home blue instead of indigo. */
body.page-professors {
    --accent-prof: #0071e3;
    --accent-prof-light: #42a1ff;
    --grad-prof: linear-gradient(135deg, #0071e3 0%, #1a8fff 100%);
}
body.page-professors .professors-body {
    scroll-margin-top: 70px;
}
body.page-professors .orb-1 {
    background: radial-gradient(circle, #bfdbfe 0%, #e0f2fe 70%, transparent 100%);
}
body.page-professors .orb-2 {
    background: radial-gradient(circle, #dbeafe 0%, #60a5fa 70%, transparent 100%);
}
body.page-professors .prof-card:hover {
    box-shadow: 0 12px 48px rgba(0, 113, 227, 0.12);
}
body.page-professors .prof-subject-badge {
    background: rgba(0, 113, 227, 0.07);
    border-color: rgba(0, 113, 227, 0.2);
}
body.page-professors .prof-link {
    box-shadow: 0 4px 14px rgba(0, 113, 227, 0.3);
}
body.page-professors .prof-link:hover {
    box-shadow: 0 6px 20px rgba(0, 113, 227, 0.4);
}
body.page-professors .prof-video-wrapper.video-placeholder .custom-play-btn {
    background: rgba(0, 113, 227, 0.88);
    box-shadow: 0 8px 24px rgba(0, 113, 227, 0.4);
}
body.page-professors .prof-video-wrapper.video-placeholder:hover .custom-play-btn {
    background: #0071e3;
    box-shadow: 0 12px 32px rgba(0, 113, 227, 0.6), 0 0 0 6px rgba(0, 113, 227, 0.22);
}
body.page-professors .prof-video-label {
    background: linear-gradient(135deg, #001a35 0%, #002a4a 100%);
}
body.page-professors .prof-video-label span {
    color: #9fdcff;
}