:root{
  --color-bg: #f7f9fb;
  --color-foreground: #0f1724;
  --color-primary: #0b5ed7;
  --color-accent: #0ea5a4;
  --card-bg: #ffffff;
  --muted: #6b7280;
  --radius: 8px;
  --max-width: 1100px;
  --kb-duration: 24s; /* Ken Burns loop duration */
  --on-bg: #ffffff;
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial}
body{background:var(--color-bg);color:var(--on-bg);-webkit-font-smoothing:antialiased}

.container{max-width:var(--max-width);margin:0 auto;padding:1rem}

/* Header / Navigation */
.site-header{background:#fff;border-bottom:1px solid #e6eef6;color:var(--color-foreground)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 0}
.brand{font-weight:700;color:var(--color-foreground);text-decoration:none;font-size:1.05rem;display:flex;align-items:center;gap:0.5rem}
.brand img{height:40px;width:auto;object-fit:contain}
.nav-toggle{display:none;background:transparent;border:0;font-size:1.25rem;cursor:pointer}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1rem}
.main-nav a{color:var(--muted);text-decoration:none;padding:0.5rem;border-radius:6px}
.main-nav a:hover{color:var(--color-primary);background:rgba(11,94,215,0.05)}

/* Hero */
.hero{padding:3rem 0;background:linear-gradient(90deg, #eef6ff 0%, #f7fffd 100%)}
.hero .lead{color:var(--muted);margin-top:0.5rem}
.hero h1{margin:0 0 0.5rem 0;font-size:1.8rem;color:var(--color-foreground)}

/* Sections */
h2{margin-top:0}
.about, .faculty, .contact{padding:2rem 0}
/* keep cards readable on light background */
.card{color:var(--color-foreground)}

/* Labs grid */
.labs .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1rem}
.card{display:block;background:var(--card-bg);padding:1rem;border-radius:var(--radius);box-shadow:0 1px 4px rgba(2,6,23,0.06);color:var(--color-foreground);text-decoration:none;transition:all 180ms ease}
.card:hover{transform:translateY(-4px);box-shadow:0 6px 20px rgba(2,6,23,0.08)}
.card-desc{display:block;color:var(--muted);font-size:0.9rem;margin-top:0.5rem}
.small{color:var(--muted);font-size:0.9rem}

/* Footer */
.site-footer{padding:1.25rem 0;background:#fff;border-top:1px solid #e6eef6;margin-top:2rem;color:var(--color-foreground)}
.footer-contact{margin-top:1rem;padding-top:1rem;border-top:1px solid #e6eef6}
.footer-contact p{margin:0.5rem 0;font-size:0.95rem}
.footer-contact a{color:var(--color-primary);text-decoration:none;transition:color 180ms ease}
.footer-contact a:hover{color:var(--color-accent);text-decoration:underline}
.social-links{margin-top:1.5rem;padding-top:1rem;border-top:1px solid #e6eef6}
.social-links p{margin-bottom:0.75rem;font-weight:600}
.social-links a{display:inline-block;margin-right:1.5rem;margin-bottom:0.5rem;padding:0.5rem;border-radius:6px;background:rgba(11,94,215,0.08);color:var(--color-primary);text-decoration:none;transition:all 180ms ease}
.social-links a:hover{background:rgba(11,94,215,0.15);transform:translateY(-2px);box-shadow:0 2px 8px rgba(11,94,215,0.15)}

/* Responsive */
@media (max-width:800px){
  .labs .grid{grid-template-columns:1fr}
  .nav-toggle{display:block}
  .main-nav{position:absolute;right:1rem;top:60px;background:#fff;border:1px solid #e6eef6;padding:0.75rem;border-radius:8px;display:none}
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column}
}
@media (min-width:801px){
  .main-nav{display:block}
}

/* Accessibility focus */
a:focus{outline:3px solid rgba(11,94,215,0.15);outline-offset:2px}

/* Utilities */
.lead{font-size:1rem}

/* Make selected elements white while keeping other text dark */
.hero, .hero h1, .hero .lead, h1, h2, h3 {
  color: var(--on-bg);
  text-shadow: 0 2px 6px rgba(0,0,0,0.45);
}

/* Ken Burns background slideshow (full-bleed, decorative) */
.bg-kenburns{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.kb-slide{position:absolute;inset:0;background-size:cover;background-position:center center;opacity:0;will-change:transform,opacity;animation:kb var(--kb-duration) linear infinite}
.kb-slide:nth-child(1){animation-delay:0s}
.kb-slide:nth-child(2){animation-delay:calc(var(--kb-duration) / 3 * 1)}
.kb-slide:nth-child(3){animation-delay:calc(var(--kb-duration) / 3 * 2)}

@keyframes kb{
  0%   {opacity:0;transform:scale(1) translateY(0)}
  6%   {opacity:1}
  33%  {opacity:1;transform:scale(1.08) translateY(-4%)}
  39%  {opacity:0}
  100% {opacity:0;transform:scale(1.08) translateY(-4%)}
}

@media (max-width:800px){
  .kb-slide{filter:blur(6px);animation-duration:calc(var(--kb-duration) * 0.9)}
}

@media (prefers-reduced-motion: reduce){
  .kb-slide{animation:none;opacity:1}
  .kb-slide:not(:first-child){display:none}
}

/* Simple decorative blurred shapes (optional) */
.bg-animations{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden}
.bg-animations .shape{position:absolute;border-radius:50%;filter:blur(36px);opacity:0.6;mix-blend-mode:screen}

/* Small helpers for printed output */
@media print{
  .bg-kenburns,.bg-animations{display:none}
}

/* Responsive layout adjustments */
/* Mobile-first styles are already present; add tablet and desktop overrides */

/* Small devices / phones */
@media (max-width:599px){
  .hero{padding:2rem 0}
  .hero h1{font-size:1.4rem;line-height:1.2}
  .hero .lead{font-size:0.9rem}
  .container{padding:0.75rem}
  .labs .grid{gap:0.75rem}
  .card{padding:0.9rem;border-radius:10px}
  .kb-slide{background-position:center 40%}
}

/* Medium devices / tablets */
@media (min-width:600px) and (max-width:1023px){
  .hero{padding:2.5rem 0}
  .hero h1{font-size:1.6rem}
  .hero .lead{font-size:0.95rem}
  .container{padding:1rem}
  .labs .grid{grid-template-columns:repeat(2,1fr);gap:1rem}
  .card{padding:1rem}
}

/* Large devices / desktops */
@media (min-width:1024px){
  .hero{padding:4rem 0}
  .hero h1{font-size:2.6rem}
  .hero .lead{font-size:1.05rem}
  .container{padding:1.5rem}
  .labs .grid{grid-template-columns:repeat(2,1fr);gap:1.25rem}
  .card{padding:1.25rem;border-radius:12px}
  .brand{font-size:1.15rem}
  /* make nav always visible on desktop */
  .main-nav{display:block!important;position:static;background:transparent;border:0;padding:0}
  .main-nav ul{gap:1.25rem}
}

/* Tweak for hero text over images: reduce shadow on mobile to improve legibility */
@media (max-width:600px){
  .hero, .hero h1, .hero .lead{text-shadow:0 1px 3px rgba(0,0,0,0.5)}
}


.hero .container p.leads{
    color: black;
}

.hero .container h1{
    color: black;
}

.hero .container p.lead{
    color: black;
}