/* Site-specific overrides on top of the hugo-profile theme's CSS.
   Loaded last (via params.customScripts in hugo.yaml) so it wins the
   cascade without needing !important everywhere. */

/* Theme default sizes the hero name/title like a marketing landing page
   (up to 80px/60px, via clamp(40px, 8vw, ...)) -- too large for a
   professional/academic personal site, and it read as wildly inconsistent
   next to the rest of the page. Scale down. */
#hero h1 {
    font-size: clamp(28px, 4vw, 44px);
}

#hero h2 {
    font-size: clamp(18px, 2.2vw, 26px);
}

/* Theme's #about ul is a 2-column grid with each column capped at
   140-200px, sized for short one-word tags like "HTML"/"CSS". Our
   Research Interests are full phrases, so they were folding awkwardly
   inside that narrow column. Single full-width column instead. */
#about ul {
    display: block;
}

/* Belt-and-suspenders on top of font.css: force one family on every
   element inside Experience (tab labels, job titles, bullets, dates),
   in case any Bootstrap component in there sets its own font-family
   instead of inheriting. */
#experience, #experience * {
    font-family: "Roboto", sans-serif !important;
}