/* ---------- Design tokens (original color scheme) ---------- */
:root{
  --bg:#f9f9f9;
  --text:#333333;
  --muted:#555555;
  --brand:#006680;      /* nav / accents */
  --brand-600:#005a73;  /* hover */
  --brand-700:#004d66;  /* header / headings / footer */
  --card:#ffffff;
  --ring:0 0 0 3px rgba(0,102,128,.25);
  --radius:14px;
  --shadow:0 8px 24px rgba(0,0,0,.08);
  --border:#cccccc;     /* new: for dividers */
  --card-border: var(--border);
  --muted-2: #7a8a94; /* slightly lighter than --muted */
}

html{ scroll-behavior:smooth; }
*{ box-sizing:border-box }

body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  margin:0; padding:0;
  line-height:1.65;
  font-size: 18px;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Header */
header{
  background:var(--brand-700);
  color:#fff; /* fixed contrast */
  text-align:center;
  padding: clamp(1.25rem, 2vw + .5rem, 2rem) 0;
}
header h1{
  margin:0;
  font-size: clamp(1.4rem, 2vw + .6rem, 2.25rem);
  letter-spacing:.2px;
}

/* Nav */
nav{
  position:sticky; top:0; z-index:50;
  background:var(--brand);
  /* Optional translucency if you want backdrop-filter visible: 
     background: rgba(0,102,128,.92); */
  display:flex; gap:.25rem; justify-content:center; align-items:center;
  padding:.35rem;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  backdrop-filter:saturate(120%) blur(6px);
}
nav a{
  color:#fff; /* fixed contrast */
  text-decoration:none; font-weight:700;
  padding:.65rem .9rem;
  border-radius:999px;
  transition:transform .12s ease, background-color .12s ease, opacity .12s ease;
  opacity:.95; outline:none;
}
nav a:hover{ background:var(--brand-600); opacity:1; transform:translateY(-1px); }
nav a:focus-visible{ box-shadow:var(--ring); background:var(--brand-600); }
/* Optional: mark current section */
nav a.active{ background:#fff; color:var(--brand-700); }

/* Layout */
.container{
  max-width:1100px;
  width:min(92%,1100px);
  margin:auto;
  padding: clamp(1.25rem, 2vw + .25rem, 2rem) 0;
}

section{
  margin-bottom: clamp(2rem, 6vw, 4rem);
  scroll-margin-top: 80px; /* offset for sticky nav */
}

h2{
  color:var(--brand-700);
  font-size: clamp(1.25rem, 1.2vw + 1rem, 1.75rem);
  margin:0 0 1rem 0;
  padding-bottom:.5rem;
  border-bottom:2px solid var(--border);
}

/* Grids */
.members, .projects, .publications{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

/* tight, neat list spacing */
.list-tight{
  margin: .4rem 0 1rem;
  padding-left: 1.25rem;
}
.list-tight li{ margin: .15rem 0; }

/* Cards */
.card{
  background:var(--card);
  border-radius:var(--radius);
  padding:1.1rem;
  box-shadow:var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.12); }
.card h3{
  margin:.2rem 0 .6rem 0;
  color:var(--brand);
  font-size:1.05rem;
}
.card p{ color:var(--muted); margin:.25rem 0 0 0 }

/* Footer */
footer{
  background:var(--brand-700);
  color:#fff;
  text-align:center;
  padding:1.1rem 0;
}

/* Hyperlinks */
p a{
  color: var(--brand);           /* use tokens */
  text-decoration: underline;
}
p a:hover{ color: var(--brand-700); }

/* Mobile */
@media (max-width: 720px){
  nav{ overflow-x:auto; justify-content:flex-start; padding:.4rem .5rem; }
  nav a{ white-space:nowrap; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  nav a, .card{ transition:none }
}

/* ---------- Publications ---------- */
#publications{
  /* if #publications lives INSIDE .container, this won’t fight layout;
     if it's outside, these keep it centered nicely */
  max-width:1100px;
  width:min(92%,1100px);
  margin:0 auto;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
}

#publications h2{
  /* keep your section heading look; only adjust spacing */
  margin:0 0 1rem;
  font-size: clamp(1.25rem, 1.2vw + 1rem, 1.5rem);
}

.pub-grid{
  display:grid;
  gap:1rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.pub-card{
  border:1px solid var(--card-border);
  border-radius: var(--radius);
  padding:16px;
  background: var(--card);                 /* match your cards */
  box-shadow: 0 1px 2px rgba(0,0,0,.04);   /* subtler than .card */
  transition: transform .15s ease, box-shadow .15s ease;
}
.pub-card:hover{
  transform: translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,.10);
}

.pub-journal{
  font-size:12px;
  letter-spacing:.02em;
  text-transform:uppercase;
  color: var(--muted);
  margin-bottom:6px;
}

.pub-title{
  font-size:16px;
  line-height:1.35;
  margin:0 0 6px;
}
.pub-title a{
  text-decoration:none;
  color: var(--text);               /* default text */
}
.pub-title a:hover{
  color: var(--brand-700);          /* brand on hover */
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pub-authors{
  font-size:14px;
  color: var(--text);
  opacity:.9;
  margin-bottom:10px;
}

.pub-ids{
  font-size:13px;
  color: var(--text);
}
.pub-ids a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pub-links a{
  text-decoration:none;
  color: var(--brand);
}
.pub-links a:hover{
  color: var(--brand-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pub-links a:not(:last-child)::after{
  content:" · ";
  color: var(--muted-2);
  margin:0 .15rem;
}

.badge{
  display:inline-block;
  font-size:.75rem;
  padding:.15rem .5rem;
  border-radius:.5rem;
  background:#f1f5f9; /* neutral chip; keep as-is */
  color:#334155;
  margin-right:.35rem;
}





/* ---------- Citations / References (reduced size) ---------- */
.refs{
  margin: 1.1rem 0 0;
  padding: .9rem 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: 0.94rem;        /* reduced base size */
}

.refs h3{
  margin: 0 0 .6rem 0;
  font-size: 0.98rem;        /* smaller heading */
  color: var(--brand-700);
  border-bottom: 2px solid var(--border);
  padding-bottom: .35rem;
}

/* Ordered list with hanging indent */
.refs ol{
  margin: 0;
  padding-left: 1.5rem;      /* space for numbers */
  list-style: decimal;
}
.refs li{
  margin: .4rem 0;
  line-height: 1.5;
  color: var(--text);
  text-indent: -1rem;        /* hanging indent */
  padding-left: 1rem;
}

/* Parts inside a reference */
.ref-authors{ font-weight: 600; }
.ref-year{ color: var(--muted); }
.ref-title{ font-weight: 500; }
.ref-title a{
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ref-title a:hover{ color: var(--brand-700); }
.ref-source{
  color: var(--muted);
  font-style: italic;
}
.ref-ids{
  color: var(--text);
  opacity: .9;
  font-size: 0.95em;         /* slightly smaller metadata */
}

/* DOI / links */
.refs a{
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.refs a:hover{ color: var(--brand-700); }

/* Compact list option via class */
.refs-compact li{ margin: .25rem 0; }

/* Mobile tweaks */
@media (max-width: 720px){
  .refs{ padding: .8rem .9rem; font-size: 0.92rem; }
  .refs li{ text-indent: -.9rem; padding-left: .9rem; }
}

/* ---------- Current Research (sub-page) ---------- */
#current-research{
  margin: 1.5rem 0 0;
  /* Slightly larger base text within this section */
  font-size: clamp(1rem, 0.4vw + 0.95rem, 1.125rem);
}

.cr-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

/* Panel card */
.cr-panel{
  aspect-ratio: 1 / 1;            /* keeps each panel square */
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.35rem;               /* a touch more breathing room */
  display: grid;
  place-items: center;            /* centers the text */
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  overflow: hidden;

  /* Background image support (set --bg-image per panel) */
  background-image: var(--overlay), var(--bg-image);
  background-size: var(--bg-size), var(--bg-size);      /* match both layers */
  background-position: var(--bg-position), var(--bg-position);
  background-repeat: var(--bg-repeat), var(--bg-repeat);


  /* Background image control */

  --bg-image: none;
  --bg-size: cover;                 /* default: fill panel, may crop */
  --bg-position: center;            /* default alignment */
  --bg-repeat: no-repeat;
  --overlay: linear-gradient(to bottom, rgba(0,0,0,.12), rgba(0,0,0,.38));




  /* If an image is present, switch text to light for contrast */
  color: var(--card);
}

.cr-panel:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  filter: saturate(1.05);
}

/* Centered bold text — bigger & responsive */
.cr-panel .cr-title{
  margin: 0;
  font-weight: 800;
  /* Up from 1.05rem -> responsive bump */
  font-size: clamp(1.1rem, 0.8vw + 1rem, 1.5rem);
  line-height: 1.2;
  /* If no image, use brand color; with image, keep high contrast */
  color: color-mix(in oklab, var(--brand-700) 92%, #000 8%);
}

/* Make sure text stays readable when image is present */
.cr-panel[style*="--bg-image"] .cr-title{
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* Optional: clickable panels */
.cr-link{
  display: block;
  color: inherit;
  text-decoration: none;
}
.cr-link:focus-visible{
  outline: none;
  box-shadow: var(--ring);
  border-radius: calc(var(--radius) - 2px);
}

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce){
  .cr-panel{ transition: none; }
  .cr-panel:hover{ transform: none; filter: none; }
}

/* Responsive: stack on small screens */
@media (max-width: 720px){
  .cr-grid{ grid-template-columns: 1fr; }
}

/* ---------- News (sub-section) ---------- */
#news{
  margin: 1.5rem 0 0;
}

.news-intro{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1.1rem;
  color: var(--text);
}

.news-intro p{
  margin: .4rem 0;
}

/* List */
.news-list{
  margin-top: 1rem;
  display: grid;
  gap: .9rem;
}

/* Item layout: date pill + content card */
.news-item{
  display: grid;
  grid-template-columns: 140px 1fr;           /* date / content */
  gap: 1rem;
  align-items: start;
}

.news-date{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: .4rem .6rem;
  border: 1px solid var(--border);
  border-radius: .75rem;
  background: #f4f8f9;                        /* subtle brand-tinted bg */
  color: var(--brand-700);
  font-weight: 700;
  text-align: center;
}

/* Card */
.news-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .95rem 1.05rem;
  transition: transform .12s ease, box-shadow .12s ease;
}
.news-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}


/* Text elements */
.news-title{
  margin: 0 0 .35rem 0;
  font-weight: 800;
  color: var(--brand-700);
  font-size: 1.02rem;
}
.news-meta{
  margin: 0 0 .35rem 0;
  color: var(--muted);
  font-size: .95rem;
}
.news-body{
  margin: 0;
  color: var(--text);
  line-height: 1.55;
}

/* Links */
.news-title a,
.news-title a:link,
.news-title a:visited {
  color: inherit;
  text-decoration: none;
  font: inherit;              /* inherits weight/size from .news-title */
}

.news-title a:focus-visible {
  outline: 2px solid var(--brand-700);
  outline-offset: 2px;
}


/* Responsive */
@media (max-width: 720px){
  .news-item{
    grid-template-columns: 1fr;               /* stack date above card */
  }
  .news-date{
    justify-self: start;
    padding: .35rem .55rem;
  }
}

.center { 
  text-align: center; 
}


/* === News Carousel === */
.news-carousel {
  position: relative;
  margin: 1rem 0 2rem;
}

.news-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 420px);
  gap: 1rem;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: .5rem .5rem 1rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--brand) transparent;
}

.news-card {
  scroll-snap-align: start;
  border: 1px solid var(--border);
  border-radius: .9rem;
  background: #fff;
  padding: 1rem;
  min-height: 180px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.news-title { margin: 0 0 .35rem; font-size: 1.05rem; }
.news-meta  { margin: 0; font-size: .95rem; opacity: .85; }
.news-body  { margin: .5rem 0 0; }

/* Group label (month/year) */
.news-group-label {
  font-weight: 700;
  color: var(--brand);
  margin: 0 0 .5rem;
}

/* Controls */
.carousel-controls {
  display: flex;
  gap: .5rem;
  align-items: center;
  justify-content: flex-end;
  margin: .25rem .5rem 0;
}

.carousel-btn {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: .6rem;
  padding: .4rem .6rem;
  cursor: pointer;
  font: inherit;
}
.carousel-btn:hover { background: rgba(0,0,0,.04); }
.carousel-btn[disabled] { opacity: .4; cursor: not-allowed; }

/* Dots (optional) */
.carousel-dots { display: flex; gap: .4rem; margin-left: auto; }
.carousel-dot {
  width: .45rem; height: .45rem; border-radius: 50%;
  background: #d1d5db; border: none;
}
.carousel-dot[aria-current="true"] { background: var(--brand); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .news-track { scroll-behavior: auto; }
}

.news-badge {
  display: inline-block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--brand);
  background: rgba(0,0,0,.03);
  border: 1px solid var(--border);
  border-radius: .5rem;
  padding: .2rem .5rem;
  margin: 0 0 .5rem;
}


/* Header */
.site-header{
  background: var(--brand-700);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.site-header a{ color: inherit; text-decoration: none; }

.site-header__inner{
  display: flex;
  align-items: center;
  justify-content: center; /* centered brand */
  gap: 0.75rem;
  padding: clamp(0.6rem, 1.2vw, 1rem) 0;
}

/* Brand block (logo + title) */
.site-brand{
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  line-height: 1;
}

/* Logo sizing (SVG/PNG) */
.site-logo{
  display: block;
  height: clamp(28px, 3.5vw, 44px);
  width: auto;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.08));
}

/* Title style (slightly larger) */
.site-title{
  font-weight: 800;
  font-size: clamp(1.05rem, 1.2vw + 0.8rem, 1.6rem);
  letter-spacing: .2px;
}

/* Optional: darken on hover slightly */
.site-brand:hover .site-title{ opacity: .95; }

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce){
  .site-brand, .site-logo { transition: none; }
}

/* ---------- Team cards ---------- */
/* Container (optional grid helper) */
.team-cards{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(1rem, 2vw, 1.25rem);
}

/* Card wrapper */
.team-card{
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;                 /* round the image corners */
  transition: transform .15s ease, box-shadow .15s ease, filter .2s ease;
  display: grid;
  grid-template-rows: auto 1fr;     /* media (top) + body (bottom) */
}

/* Hover like .card */
.team-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  filter: saturate(1.03);
}

/* Top media panel */
/* Fixed box; cards stay same height */
.team-card__media{
  aspect-ratio: 4 / 3;        /* tweak to 3/2 or 1/1 if you prefer */
  background: var(--card);    /* shows behind “letterbox” */
  display: grid;
  place-items: center;        /* centers the image */
  overflow: hidden;
}

/* Show entire image (no cropping) */
.team-card__media img{
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Bottom info panel */
.team-card__body{
  padding: 1rem 1.1rem 1.1rem;
}

/* Name/title */
.team-card__name{
  margin: .2rem 0 .4rem 0;
  color: var(--brand);
  font-weight: 800;
  font-size: clamp(1rem, .4vw + .95rem, 1.15rem);
  line-height: 1.2;
}

/* Affiliation / text */
.team-card__meta{
  color: var(--muted);
  margin: .25rem 0 .5rem 0;
}

/* Links row */
.team-card__links{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1rem;
  margin-top: .25rem;
}
.team-card__links a{
  color: var(--brand-700);
  text-decoration: none;
  font-weight: 700;
}
.team-card__links a:hover{ text-decoration: underline; }

/* Keyboard focus */
.team-card:focus-within{
  outline: none;
  box-shadow: var(--shadow), var(--ring);
}

.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.25rem;margin-top:1rem}
.team-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:1rem;transition:transform .12s ease,box-shadow .12s ease}
.team-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.12)}
.team-card__name{margin:0 0 .25rem;color:var(--brand-700);font-weight:700}
.team-card__meta{margin:0;font-size:.95rem;color:var(--muted);line-height:1.4}



/* Styles for alternating cards */

/* Alternating org rows */
.alt-orgs { margin-block: clamp(1.5rem, 2vw, 3rem); }
.alt-orgs > h3 { margin-bottom: clamp(1rem, 1.5vw, 1.5rem); }

.org-row {
display: grid;
grid-template-columns: minmax(260px, 420px) 1fr;
gap: clamp(1rem, 2vw, 2rem);
align-items: center;
padding: clamp(1rem, 2vw, 1.5rem);
border: 1px solid var(--border, #e5e5e5);
border-radius: var(--radius, 12px);
background: var(--card, #fff);
box-shadow: var(--shadow, 0 2px 10px rgba(0,0,0,.04));
}
.org-row + .org-row { margin-top: clamp(1rem, 2vw, 1.5rem); }

.org-row--reverse { grid-template-columns: 1fr minmax(260px, 420px); }
.org-row--reverse .org-row__logo { order: 2; }
.org-row--reverse .org-row__names { order: 1; }

.org-row__logo figure { margin: 0; display: grid; place-items: center; }
.org-row__logo img { max-width: 100%; height: auto; object-fit: contain; filter: saturate(1.05) contrast(1.05); }

.org-row__heading { margin: 0 0 .5rem 0; font-size: clamp(1.05rem, 1.2vw, 1.25rem); color: var(--text, #222); }

.org-row__list { margin: 0; padding: 0; list-style: none; columns: 1; column-gap: 2rem; }
@media (min-width: 900px) { .org-row__list { columns: 2; } }

.org-row__person { break-inside: avoid; padding: .15rem 0; }
.org-row__person-name { font-weight: 500; }

/* a11y utility */
.sr-only {
position: absolute !important;
width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}

/* Optional entrance animation */
@media (prefers-reduced-motion: no-preference) {
.org-row { opacity: 0; transform: translateY(8px); animation: fadeInUp .5s ease forwards; }
.org-row:nth-child(2) { animation-delay: .05s; }
.org-row:nth-child(3) { animation-delay: .1s; }
.org-row:nth-child(4) { animation-delay: .15s; }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }
}


/* ---------- Other Collaborators: smaller cards (~75%) ---------- */
/* Shrink the grid's minimum card width a bit so more columns can fit */
.team-cards.team-cards--others{
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: calc(clamp(1rem, 2vw, 1.25rem) * .9);
}

/* Tighter card paddings and a touch smaller type */
.team-cards--others .team-card{
  padding: .85rem;
}

/* Keep media box but slightly reduce its perceived size */
.team-cards--others .team-card__media{
  aspect-ratio: 4 / 3;         /* same ratio as your base */
  /* reduce perceived image size a touch without cropping */
}
.team-cards--others .team-card__media img{
  max-width: 90%;
  max-height: 90%;
}

/* Slightly smaller heading and body text inside the card */
.team-cards--others .team-card__name{
  font-size: clamp(.92rem, .35vw + .9rem, 1.02rem);
}
.team-cards--others .team-card__body{
  padding: .85rem .95rem .95rem;
}