/* ===== ACE Lab: site-wide responsive CSS ===== */
:root{
  --uw-purple:#4b2e83;
  --uw-gold:#b7a57a;
  --ink:#1a1a1a;
  --ink-2:#444;
  --bg:#fff;
  --bg-2:#f7f7f8;
  --maxw:1100px;
  --radius:16px;
  --gap:1rem;
  --shadow:0 6px 18px rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:var(--bg);
}

/* Skip link */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:1rem; top:1rem; width:auto; height:auto; z-index:9999;
  background:#fff; padding:.5rem .75rem; border:2px solid var(--uw-purple); border-radius:.5rem;
}

/* ===== Header / Branding ===== */
.site-header{
  border-bottom:4px solid var(--uw-gold);
  background:linear-gradient(0deg,#fff,#fafafa);
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 1rem}

.brandbar{
  display:grid; align-items:center; gap:.75rem;
  grid-template-columns:auto 1fr; padding:.75rem 0;
}
.brand-logos{display:flex; gap:.5rem; flex-wrap:wrap}
.brand-logos img{height:36px; width:auto}

.site-title a{
  display:inline-flex; align-items:center; gap:.5rem;
  color:var(--uw-purple); text-decoration:none; font-weight:700; letter-spacing:.2px;
}
.site-title img{height:40px; width:auto}

/* ===== Primary Nav ===== */
.navbar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.25rem 0 .8rem;
}
.navbar .nav-toggle{
  appearance:none; border:0; background:transparent; padding:.5rem; border-radius:.5rem;
}
.navbar .nav-toggle:focus{outline:2px solid var(--uw-purple)}
.navbar .nav-toggle svg{width:26px; height:26px}

.nav-list{
  list-style:none; margin:0; padding:0;
  display:none; flex-direction:column; gap:.25rem;
}
.nav-list a{
  text-decoration:none; color:var(--ink); padding:.6rem .5rem; border-radius:.5rem;
  font-size:1.06rem;   /* larger on mobile */
}
.nav-list a[aria-current="page"]{color:var(--uw-purple); font-weight:700}
.nav-list a:focus,.nav-list a:hover{background:var(--bg-2)}
.nav-open .nav-list{display:flex}

/* <768px: stack affiliation logos left; place hamburger below, aligned right */
@media (max-width:767px){
  .brandbar{
    grid-template-columns:1fr;
    align-items:start;
  }

  .brand-logos{
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:flex-start;
  }

  .navbar{
    flex-direction:column;
    align-items:stretch;
    gap:.25rem;
  }

  .navbar .nav-toggle{
    align-self:flex-end;
  }

  .nav-list{
    width:100%;
  }
}

/* >=768px: inline nav, slightly larger text */
@media (min-width:768px){
  .navbar .nav-toggle{display:none}
  .nav-list{display:flex; flex-direction:row; gap:.5rem}
  .nav-list a{font-size:1.125rem; padding:.6rem .75rem}
}

/* ===== Sections & Cards ===== */
.section{padding:1.25rem 0}
.section h1{margin:.25rem 0 1rem}
.section h2{margin:.25rem 0 .75rem; font-size:1.5rem}
.section h3{margin:.2rem 0 .4rem}

.card{
  background:#fff; border:1px solid #e9e9ee; border-radius:var(--radius);
  padding:1rem; box-shadow:var(--shadow);
}

/* ===== Grid Utilities ===== */
.grid{display:grid; gap:var(--gap)}
.grid-2{grid-template-columns:1fr}
@media (min-width:768px){ .grid-2{grid-template-columns:1fr 1fr} }

.grid-3{grid-template-columns:1fr}
@media (min-width:768px){ .grid-3{grid-template-columns:1fr 1fr} }
@media (min-width:1024px){ .grid-3{grid-template-columns:1fr 1fr 1fr} }

/* ===== Hero row (top-of-home 3 cards) ===== */
.hero{align-items:start; grid-auto-rows:1fr; padding:1rem 0 1.25rem}
.hero .card{height:100%; display:flex; flex-direction:column}

/* ===== Media framing (images & iframes) ===== */
.media-frame{
  width:100%;
  aspect-ratio:16 / 9;      /* consistent tile height (videos, generic images) */
  overflow:hidden;
  border-radius:var(--radius);
}
.media-frame > img,
.media-frame > iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
}
.media-frame > img{
  object-fit:cover;         /* crop images nicely by default */
}

/* Show the whole lab photo (no crop) */
.media-frame.photo{
  aspect-ratio:auto;        /* let intrinsic photo height decide */
}
.media-frame.photo > img{
  height:auto;
  object-fit:contain;       /* never crop */
  background:#fff;          /* clean edges if letterboxed */
}

/* Mission logo under text */
.inline-logo{
  display:block; margin:.75rem auto 0;
  width:clamp(220px, 70%, 600px);
  height:auto;
}

/* Intro / helper text */
.intro{font-size:1.05rem; color:var(--ink-2)}

/* ===== People page cards ===== */
.person{
  display:grid; grid-template-columns:64px 1fr; gap:.75rem; align-items:center;
}
.person img{
  width:64px; height:64px; object-fit:cover;
  border-radius:50%; border:2px solid var(--uw-gold);
}
.person .meta{font-size:.95rem}
.badge{
  display:inline-block; font-size:.85rem; background:var(--bg-2);
  padding:.35rem .6rem; border-radius:.6rem; border:1px solid #e2e2ea;
}

/* ===== Projects page accordion ===== */
.accordion details{
  background:#fff; border:1px solid #e9e9ee; border-radius:12px;
  padding:.75rem .9rem; box-shadow:var(--shadow)
}
.accordion details + details{margin-top:.5rem}
.accordion summary{
  cursor:pointer; list-style:none; font-weight:700; color:var(--uw-purple);
}
.accordion summary::-webkit-details-marker{display:none}

/* ===== News list ===== */
.news{padding-left:1.1rem}
.news li{margin:.55rem 0}
.news time{color:var(--ink-2); font-size:.9rem}

/* ===== Footer ===== */
.site-footer{
  margin-top:2rem; border-top:1px solid #ececf3; background:#fafafc; color:#555;
}
.site-footer .foot{padding:1rem 0; font-size:.95rem}
.site-footer a{color:inherit}

/* ===== Generic images (safety) ===== */
img{max-width:100%; height:auto}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
}

/* ===== Print ===== */
@media print{
  .nav-toggle,.nav-list{display:none!important}
  .card,.accordion details{box-shadow:none!important}
}