:root{
  --ucsb-blue:#003660;
  --ucsb-gold:#febc11;
  --ink:#14213d;
  --muted:#536477;
  --soft:#f5f9fc;
  --card:#ffffff;
  --line:rgba(0,54,96,.13);
  --shadow:0 12px 36px rgba(0,25,50,.09);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;color:var(--ink);background:white;line-height:1.6}
a{color:var(--ucsb-blue);text-decoration:none}
.site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:14px 5vw;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.65rem;font-weight:800;color:var(--ucsb-blue);font-size:1.15rem}
.brand img{height:42px;width:auto}
nav{display:flex;gap:1rem;flex-wrap:wrap;justify-content:flex-end}
nav a{font-size:.93rem;color:#24384c}
nav a:hover{color:var(--ucsb-blue)}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:3rem;align-items:center;padding:80px 8vw 70px;background:radial-gradient(circle at 80% 20%, #e9f6ff, transparent 32%),linear-gradient(135deg,#f8fbff 0%,#ffffff 58%,#eef7ff 100%)}
.hero h1{font-size:clamp(2.5rem,5vw,5.2rem);line-height:1.02;margin:.3rem 0 1.1rem;color:var(--ucsb-blue);letter-spacing:-.04em}
.hero p{font-size:1.25rem;max-width:760px;color:#3f5267}
.hero-graphic img{width:100%;max-width:420px;display:block;margin:auto;filter:drop-shadow(0 22px 28px rgba(0,54,96,.16))}
.eyebrow{text-transform:uppercase;letter-spacing:.13em;font-size:.76rem;font-weight:800;color:#0b7294}
.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:999px;padding:.75rem 1.15rem;background:white;color:var(--ucsb-blue);font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.04)}
.btn.primary{background:var(--ucsb-blue);color:white;border-color:var(--ucsb-blue)}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,54,96,.14)}
.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.3rem}
.section{padding:72px 8vw}
.soft-bg{background:var(--soft)}
.two-col{display:grid;grid-template-columns:.85fr 1.15fr;gap:3rem;align-items:start}
.section-heading{max-width:900px;margin-bottom:2rem}
.section-heading.compact{margin-top:3rem}
h2{font-size:clamp(1.8rem,3.1vw,3rem);line-height:1.12;margin:.15rem 0;color:var(--ucsb-blue);letter-spacing:-.025em}
h3{color:var(--ucsb-blue);margin-top:0}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.1rem}
.research-card,.funding-card,.info-card,.faculty-card,.director-card,.event-card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:1.25rem;box-shadow:0 4px 22px rgba(0,0,0,.035);transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease}
.research-card:hover,.funding-card:hover,.info-card:hover,.faculty-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(0,54,96,.32)}
.research-card h3,.funding-card h3,.info-card h3{font-size:1.1rem}
.funding-meta{font-size:.84rem;color:#0b7294;font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.5rem}
.achievement-strip{overflow:hidden;background:var(--ucsb-blue);color:white;padding:.85rem 0}
.ticker{display:flex;gap:3rem;white-space:nowrap;animation:ticker 30s linear infinite;font-weight:700}
.ticker span{display:inline-block;padding-left:3rem}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.director-card{display:grid;grid-template-columns:220px 1fr;gap:1.5rem;align-items:start;margin-bottom:2.5rem}
.director-card img{width:220px;aspect-ratio:1/1;object-fit:cover;border-radius:24px;border:1px solid var(--line)}
.role{font-weight:700;color:#415367}
.people-subsection{margin-top:2.5rem}
.faculty-group{margin:1.5rem 0}
.faculty-group h3{font-size:1.05rem;margin-bottom:.8rem}
.faculty-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.8rem}
.faculty-card{display:flex;align-items:center;gap:.85rem;color:var(--ink);padding:.85rem}
.faculty-card span{display:block;font-size:.86rem;color:#64748b}
.avatar-initial{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#eef5ff,#dff7fb);font-weight:800;color:var(--ucsb-blue);border:1px solid var(--line);flex:0 0 48px}
.clean-list{list-style:none;padding:0;margin:0;display:grid;gap:.65rem}
.clean-list.two-col{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.clean-list li{background:white;border:1px solid var(--line);border-radius:14px;padding:.85rem 1rem;font-weight:650}
.partner-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.partner-row div{background:white;border:1px solid var(--line);border-radius:20px;padding:1.5rem;text-align:center;font-weight:800;color:var(--ucsb-blue);box-shadow:0 6px 20px rgba(0,0,0,.04)}
.centered-note{text-align:center;max-width:850px;margin:1.5rem auto 0;color:var(--muted)}
.event-card{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:linear-gradient(135deg,#ffffff,#f4fbff)}
footer{padding:30px 8vw;background:#0d2135;color:white;text-align:center}
@media(max-width:800px){
  .hero,.two-col,.director-card{grid-template-columns:1fr}
  .site-header{align-items:flex-start;gap:.7rem;flex-direction:column}
  nav{justify-content:flex-start}
  .director-card img{width:180px}
  .event-card{flex-direction:column;align-items:flex-start}
}


/* CSFAI v9 compact refinement */
.section { padding-top: 54px; padding-bottom: 54px; }
.hero { padding-top: 58px; padding-bottom: 54px; gap: 2.2rem; }
.hero h1 { font-size: clamp(2.25rem, 4.3vw, 4.45rem); }
.hero p { font-size: 1.13rem; }
.section-heading { margin-bottom: 1.35rem; }
.cards-grid { gap: .9rem; }
.research-card, .funding-card, .info-card, .faculty-card, .director-card, .event-card {
  border-radius: 18px;
  padding: 1rem;
}
.director-card {
  grid-template-columns: 180px 1fr;
  gap: 1.15rem;
  margin-bottom: 1.7rem;
}
.director-card img { width: 180px; border-radius: 18px; }
.director-card p { margin-top: .35rem; margin-bottom: .7rem; }
.people-subsection { margin-top: 1.75rem; }
.faculty-group { margin: 1rem 0 1.25rem; }
.faculty-group h3 { margin-bottom: .55rem; }
.faculty-list {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .65rem;
}
.profile-card {
  min-height: 76px;
  padding: .7rem .75rem;
}
.profile-photo, .profile-photo-fallback {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 52px;
}
.profile-text strong {
  display: block;
  line-height: 1.2;
  font-size: .96rem;
}
.profile-text span {
  margin-top: .12rem;
}
.clean-list.two-col { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .5rem; }
.clean-list li { padding: .65rem .85rem; border-radius: 12px; }
.funding-card h3 { font-size: 1rem; line-height: 1.25; }
.funding-meta { font-size: .78rem; line-height: 1.35; }
.partner-row { gap: .75rem; }
.partner-row div { padding: 1rem; border-radius: 16px; }
.event-card { padding: 1.1rem 1.25rem; }
@media(max-width:800px){
  .section { padding-top: 42px; padding-bottom: 42px; }
  .director-card { grid-template-columns: 1fr; }
  .director-card img { width: 160px; }
}



/* CSFAI v11 faculty accordions */
.faculty-accordion {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  padding: 0;
  margin: .75rem 0;
  overflow: hidden;
}
.faculty-accordion summary {
  cursor: pointer;
  list-style: none;
  padding: .9rem 1rem;
  font-weight: 800;
  color: var(--ucsb-blue);
  background: linear-gradient(135deg, #ffffff, #f6fbff);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.faculty-accordion summary::-webkit-details-marker { display: none; }
.faculty-accordion summary::after {
  content: "＋";
  font-weight: 800;
  color: #0b7294;
  margin-left: 1rem;
}
.faculty-accordion[open] summary::after { content: "−"; }
.faculty-accordion .faculty-list {
  padding: .85rem;
  border-top: 1px solid var(--line);
}
.faculty-accordion:not([open]) .faculty-list {
  display: none;
}



.small-note {
  color: var(--muted);
  font-size: .92rem;
  margin: -.35rem 0 1rem 0;
}
.affiliated-faculty .faculty-group { display: block; }
.affiliated-faculty .faculty-list { display: grid; }


/* CSFAI v13 compact trainee columns */
.trainee-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: .9rem;
  align-items: start;
}
.trainee-column {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.035);
}
.trainee-column h3 {
  font-size: 1rem;
  margin-bottom: .65rem;
}
.compact-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.compact-list li {
  padding: .35rem 0;
  border-bottom: 1px solid rgba(0,54,96,.08);
  font-weight: 650;
}
.compact-list li:last-child {
  border-bottom: 0;
}
@media(max-width:900px){
  .trainee-columns { grid-template-columns: 1fr; }
}



/* v14: differentiate subsection headings */
.people-subsection h3{
  color:#0b7294;
}

.trainee-column:nth-child(1) h3{
  color:#8B1E3F; /* burgundy */
}
.trainee-column:nth-child(2) h3{
  color:#006C67; /* teal */
}
.trainee-column:nth-child(3) h3{
  color:#8A5A00; /* gold/brown */
}

.faculty-accordion summary{
  color:#003660;
}



/* v15: featured research, publication highlights, news, and subtle logo animation */
.section-intro {
  color: var(--muted);
  max-width: 760px;
  margin: .35rem 0 0;
}
.featured-research {
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}
.featured-grid, .pub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
  gap: .9rem;
}
.feature-card, .pub-card, .news-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.05rem;
  box-shadow: 0 4px 18px rgba(0,0,0,.035);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.feature-card:hover, .pub-card:hover, .news-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
  border-color: rgba(0,54,96,.28);
}
.feature-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, var(--ucsb-blue), #0b7294);
  margin-bottom: .75rem;
  letter-spacing: .02em;
}
.pub-card span {
  display: inline-flex;
  font-size: .76rem;
  font-weight: 900;
  color: #0b7294;
  border: 1px solid rgba(11,114,148,.25);
  border-radius: 999px;
  padding: .22rem .55rem;
  margin-bottom: .55rem;
  background: #f5fcff;
}
.pub-card h3, .feature-card h3, .news-item h3 {
  font-size: 1rem;
  line-height: 1.25;
  margin-bottom: .45rem;
}
.section-actions {
  margin-top: 1.15rem;
}
.news-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: .9rem;
  position: relative;
}
.news-item time {
  display: inline-flex;
  color: #fff;
  background: var(--ucsb-blue);
  font-weight: 900;
  border-radius: 999px;
  padding: .16rem .58rem;
  font-size: .78rem;
  margin-bottom: .55rem;
}
.news-item a {
  font-weight: 800;
}
.animated-logo {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
}
.animated-logo img {
  position: relative;
  z-index: 1;
  animation: logoFloat 7s ease-in-out infinite;
}
.beam-sweep {
  position: absolute;
  width: 50%;
  height: 110%;
  top: -5%;
  left: -55%;
  background: linear-gradient(105deg, transparent 0%, rgba(254,188,17,.13) 45%, rgba(254,188,17,.28) 52%, transparent 65%);
  transform: skewX(-16deg);
  animation: beamSweep 6.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes beamSweep {
  0%, 18% { left: -60%; opacity: 0; }
  36% { opacity: 1; }
  58% { left: 105%; opacity: 0; }
  100% { left: 105%; opacity: 0; }
}
@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .beam-sweep, .animated-logo img, .ticker { animation: none !important; }
}



/* v21: rebuilt News section */
.news-year {
  margin-top: 1.5rem;
}
.news-year > h3 {
  color: var(--ucsb-blue);
  font-size: 1.35rem;
  margin-bottom: .75rem;
  border-left: 5px solid var(--ucsb-gold);
  padding-left: .75rem;
}
.news-year + .news-year {
  margin-top: 2rem;
}


.faculty-card{min-height:58px}
.profile-text strong{font-size:.9rem}
.external-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.6rem}
.ext-member{border:1px solid var(--line);border-radius:12px;padding:.7rem .8rem;background:#fff}
.ext-member strong{display:block;color:var(--ucsb-blue);font-size:.92rem}
.ext-member span{font-size:.82rem;color:#566}


/* v24: People tabs for UCSB faculty and external affiliates */
.people-tabs {
  margin-top: 1.75rem;
}
.tab-buttons {
  display: inline-flex;
  gap: .35rem;
  padding: .35rem;
  background: #eef5fb;
  border: 1px solid var(--line);
  border-radius: 999px;
  margin-bottom: 1rem;
}
.tab-button {
  border: 0;
  border-radius: 999px;
  padding: .65rem 1rem;
  font-weight: 800;
  color: var(--ucsb-blue);
  background: transparent;
  cursor: pointer;
}
.tab-button.active {
  background: var(--ucsb-blue);
  color: #fff;
  box-shadow: 0 8px 22px rgba(0,54,96,.18);
}
.tab-panel {
  display: none;
}
.tab-panel.active {
  display: block;
}
.tab-panel-content {
  margin-top: 0;
}
.external-affiliates .external-grid {
  margin-top: .25rem;
}
@media(max-width:640px){
  .tab-buttons { width: 100%; display: grid; grid-template-columns: 1fr; border-radius: 18px; }
  .tab-button { border-radius: 14px; }
}