/* ===========================
   USC-like theme + Arial font
   =========================== */
:root{
  /* USC Cardinal + Gold */
  --usc-cardinal: #990000;
  --usc-gold: #FFC72C;

  --bg: #ffffff;
  --fg: #111111;
  --muted: #555555;
  --card: #f7f7f9;
  --border: #e5e7eb;

  --accent: var(--usc-cardinal);
  --link: var(--usc-cardinal);
  --link-visited: #7a0000;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b0b10;
    --fg: #f4f4f5;
    --muted: #c3c3c7;
    --card: #14141b;
    --border: #2a2a33;
    --accent: #b30000;
    --link: #ff8a80;
    --link-visited: #ff5252;
  }
}

/* Fonts */
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--fg);
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  line-height:1.55;
}

*{box-sizing:border-box}
a{color:var(--link);text-decoration-thickness:.08em;text-underline-offset:.18em}
a:visited{color:var(--link-visited)}
img{max-width:100%;height:auto}

/* Layout */
.container{max-width:980px;margin:0 auto;padding:24px}
.site-header{display:flex;align-items:center;gap:18px;padding-top:18px;padding-bottom:6px;border-bottom:1px solid var(--border);margin-bottom:18px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit}
.brand img{display:none} /* ensure no header logo */
.brand .name{font-weight:700;font-size:1.25rem}
.brand .tagline{font-size:.95rem;color:var(--muted)}
.nav{margin-left:auto;display:flex;gap:16px;flex-wrap:wrap}
.nav a{padding:6px 10px;border-radius:8px;border:1px solid transparent}
.nav a.active,.nav a:hover{background:var(--card);border-color:var(--accent)}

.hero{margin-top:18px}
.hero h1{font-size:clamp(1.6rem, 2.2vw + 1rem, 2.4rem);margin:.2rem 0}
.section{margin:28px 0}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px}
.footer{margin-top:36px;padding-top:16px;border-top:1px solid var(--border);color:var(--muted);font-size:.95rem}

/* Two-column hero with portrait */
.hero.two-col{
  display:grid; grid-template-columns: 1.2fr 0.8fr; gap:24px; align-items:center;
}
.lede{font-size:1.05rem;margin:.25rem 0 1rem}
.hero-photo{text-align:center}
img.portrait{
  width: 220px; height: 220px; object-fit: cover;
  border-radius: 999px; border: 4px solid var(--link-visited);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
@media (max-width: 820px){
  .hero.two-col{grid-template-columns:1fr}
  img.portrait{width: 180px; height: 180px; margin-top:10px}
}

/* Affiliations logos row */
.logo-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:8px 0 12px}
.logo-row .logo{
  display:flex; align-items:center; gap:8px;
  background:var(--card); border:1px solid var(--border);
  border-radius:999px; padding:6px 10px;
}
.logo-row .logo img{height:22px;width:auto;display:block}
.logo-row .logo .label{font-size:.95rem;color:var(--muted)}

/* Badges (quick links) */
.badges{display:flex;flex-wrap:wrap;gap:10px}
.badges a{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border:1px solid var(--accent);
  background:var(--card);border-radius:999px;text-decoration:none;color:inherit;font-weight:600
}
.badges a:hover{filter:brightness(1.03)}

/* Stacked cards (Education/Work) */
.stack-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.stack-list .item{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px 14px}
.stack-list .title{font-weight:700}
.stack-list .sub{color:var(--muted);margin-top:2px}
.stack-list .meta{color:var(--muted);font-size:.95rem;margin-top:2px}

/* Chips */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:8px 0 0}
.chip{font-size:.92rem;padding:6px 10px;border:1px solid var(--border);background:var(--card);border-radius:999px}

/* Publications: tidy list, only DOI is linked */
.publist{list-style:none;margin:0;padding:0}
.publist li{margin:0 0 12px 0;padding:0 0 12px 0;border-bottom:1px dashed var(--border)}
.pub-line{font-size:1rem}
.pub-line a{font-weight:400} /* DOI links only */
.small{font-size:.95rem;color:var(--muted)}
/* --- Section heading icons (small, consistent) --- */
.with-ico{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.secticon{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:999px;
  background: rgba(153,0,0,.12); /* USC cardinal tint */
  font-size:16px;line-height:1;
}
@media (prefers-color-scheme: dark){
  .secticon{ background: rgba(255,82,82,.18); }
}

/* --- Hero two-column (keep your existing rules; ensure these exist) --- */
.hero.two-col{
  display:grid; grid-template-columns: 1.2fr 0.8fr; gap:24px; align-items:center;
}
.lede{font-size:1.05rem;margin:.25rem 0 1rem}
.hero-photo{text-align:center}
img.portrait{
  width: 220px; height: 220px; object-fit: cover;
  border-radius: 999px; border: 4px solid var(--link-visited);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
@media (max-width: 820px){
  .hero.two-col{grid-template-columns:1fr}
  img.portrait{width: 180px; height: 180px; margin-top:10px}
}

/* ===== Affiliations strip at top (under header) ===== */
.affiliations-top{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  padding:10px 24px; margin:0 auto 8px; max-width:980px;
  border-bottom:1px solid var(--border);
}
.affiliations-top .affil{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--card); border:1px solid var(--border);
  border-radius:999px; padding:6px 10px; text-decoration:none; color:inherit;
}
.affiliations-top .affil img{ height:20px; width:auto; display:block }
.affiliations-top .affil span{ font-size:.95rem; color: var(--muted) }

/* Keep hero tidy (no background crest, only your portrait) */
.hero.two-col{ display:grid; grid-template-columns:1.2fr 0.8fr; gap:24px; align-items:center }
.hero-photo{ text-align:center }
img.portrait{
  width:220px; height:220px; object-fit:cover; border-radius:999px;
  border:4px solid var(--link-visited); box-shadow:0 10px 30px rgba(0,0,0,.12);
}
@media (max-width:820px){
  .hero.two-col{ grid-template-columns:1fr }
  img.portrait{ width:180px; height:180px; margin-top:10px }
}

/* Section heading icons (small round) */
.with-ico{ display:flex; align-items:center; gap:8px; margin:0 0 8px }
.secticon{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:999px;
  background: rgba(153,0,0,.12);
  font-size:16px; line-height:1;
}
@media (prefers-color-scheme: dark){ .secticon{ background: rgba(255,82,82,.18) } }

/* Stacked cards and chips (unchanged from your current design) */
.stack-list{ list-style:none; margin:0; padding:0; display:grid; gap:12px }
.stack-list .item{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:12px 14px }
.stack-list .title{ font-weight:700 }
.stack-list .sub{ color:var(--muted); margin-top:2px }
.stack-list .meta{ color:var(--muted); font-size:.95rem; margin-top:2px }
.chips{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:8px 0 0 }
.chip{ font-size:.92rem; padding:6px 10px; border:1px solid var(--border); background:var(--card); border-radius:999px }

/* Publications list (only DOI is linked) */
.publist{ list-style:none; margin:0; padding:0 }
.publist li{ margin:0 0 12px 0; padding:0 0 12px 0; border-bottom:1px dashed var(--border) }
.pub-line{ font-size:1rem }
.pub-line a{ font-weight:400 }
.small{ font-size:.95rem; color:var(--muted) }
/* Keep USC + Leonard Davis logos on one row (desktop) */
.affiliations-top{
  display: flex;               /* already set, but safe */
  gap: 12px;
  flex-wrap: nowrap;           /* force single row */
}
.affiliations-top .affil{
  flex: 1 1 0;                 /* split row into two equal pills */
  min-width: 0;                /* allow shrinking below content width */
  white-space: nowrap;         /* keep label on one line */
}
.affiliations-top .affil span{
  overflow: hidden;
  text-overflow: ellipsis;     /* add … if text gets too long */
}
.affiliations-top .affil img{
  height: 18px;                /* keep logos compact so both fit */
  width: auto;
}

/* Mobile fallback: stack gracefully */
@media (max-width: 700px){
  .affiliations-top{
    flex-wrap: wrap;           /* allow two rows on small screens */
  }
  .affiliations-top .affil{
    flex: 1 1 100%;
  }
}
/* === Put USC + Leonard Davis on the SAME ROW (desktop) === */
.affiliations-top{
  display: grid !important;               /* override any earlier flex */
  grid-template-columns: 1fr 1fr;         /* two equal columns */
  gap: 12px;
}

/* Make each pill shrink nicely and avoid wrapping */
.affiliations-top .affil{
  display: flex;                          /* keep logo + label inline */
  align-items: center;
  gap: 8px;
  min-width: 0;                           /* allow shrinking below content width */
  white-space: nowrap;                    /* keep label in one line */
  text-decoration: none !important;       /* remove link underline */
  color: inherit;
}

.affiliations-top .affil span{
  overflow: hidden;
  text-overflow: ellipsis;                /* show … if space is tight */
}

.affiliations-top .affil img{
  height: 18px;                           /* slightly smaller logos so both fit */
  width: auto;
}

/* Stack on small screens */
@media (max-width: 720px){
  .affiliations-top{ grid-template-columns: 1fr; }
}
/* === Affiliation pills: slightly larger + single row + no bottom line === */
.affiliations-top{
  /* keep them on one row */
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 16px;

  /* remove the grey line below the pills */
  border-bottom: none !important;
}

.affiliations-top a.affil,
.affiliations-top a.affil:hover,
.affiliations-top a.affil:visited,
.affiliations-top a.affil:focus{
  text-decoration: none !important;   /* no underline on the labels */
}

.affiliations-top .affil{
  padding: 10px 14px;                 /* slightly larger pill */
  border-radius: 999px;
  min-width: 0;
  white-space: nowrap;                 /* keep text on one line */
}

.affiliations-top .affil img{
  height: 26px;                        /* slightly larger logos (was ~18–22) */
  width: auto;
}

.affiliations-top .affil span{
  font-size: 1.05rem;                  /* slightly larger text */
  overflow: hidden;
  text-overflow: ellipsis;             /* add … if it ever gets too long */
}

/* Stack on small screens */
@media (max-width: 720px){
  .affiliations-top{ grid-template-columns: 1fr; }
}
/* === Bigger logo buttons (Scholar / ORCID / ResearchGate) === */
.icon-badges{ gap: 14px; }

.icon-badges .icon-btn{
  width: 56px;                /* was 44px */
  height: 56px;               /* was 44px */
  border-width: 2px;          /* slightly stronger ring */
  border-radius: 999px;
}

.icon-badges .icon-btn img{
  width: 34px !important;     /* override width="28" in HTML */
  height: 34px !important;    /* override height="28" in HTML */
  object-fit: contain;
}

/* Make the "Email" pill visually balanced next to bigger icons */
.icon-badges .badge{
  padding: 12px 18px;         /* was ~10px 14px */
  border-width: 2px;
  font-weight: 600;
}

/* Optional: scale down a bit on very small screens */
@media (max-width: 480px){
  .icon-badges .icon-btn{ width: 50px; height: 50px; }
  .icon-badges .icon-btn img{ width: 30px !important; height: 30px !important; }
  .icon-badges .badge{ padding: 10px 16px; }
}