/* ── CONNECT Lab · main.css ── */

:root {
  --ink:     #1E3847;
  --slate:   #667984;
  --terra:   #D47C4A;
  --apricot: #E5AD8C;
  --peach:   #EAC7B3;
  --sage:    #CBD0C8;
  --ivory:   #FBF4E7;
  --cream:   #FFF9EF;
  --taupe:   #B6A79A;
  --white:   #ffffff;

  --font-serif: 'Lora', Georgia, serif;
  --font-sans:  'Inter', system-ui, sans-serif;
  --nav-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--cream);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
}
a { color: var(--terra); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

/* ── NAV ── */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(255,249,239,0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--peach);
  height: var(--nav-h);
}
.nav-inner {
  max-width: 1100px; margin: 0 auto;
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2rem;
}
.nav-logo {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}
.nav-logo strong { color: var(--terra); }
.nav-links {
  display: flex; align-items: center; gap: 0.25rem;
  list-style: none;
}
.nav-links a {
  font-size: 0.875rem; font-weight: 500;
  color: var(--slate);
  padding: 0.4rem 0.75rem;
  border-radius: 4px;
  text-decoration: none;
  transition: color 0.2s, background 0.2s;
}
.nav-links a:hover, .nav-links a.active { color: var(--ink); background: var(--ivory); }
.nav-links .btn-nav {
  background: var(--terra); color: var(--white);
  border-radius: 4px;
}
.nav-links .btn-nav:hover { background: var(--ink); color: var(--white); }
.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 4px;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; }

/* ── LAYOUT ── */
main { padding-top: var(--nav-h); }
.container { max-width: 1100px; margin: 0 auto; padding: 0 2rem; }
.section { padding: 4.5rem 2rem; max-width: 1100px; margin: 0 auto; }
.section-alt { background: var(--ivory); }
.section-alt > .section { background: transparent; }

/* ── TYPOGRAPHY ── */
.section-eyebrow {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--terra);
  margin-bottom: 0.5rem;
}
.section-title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 700; color: var(--ink);
  line-height: 1.25; margin-bottom: 1rem;
}
.section-intro {
  font-size: 1rem; color: var(--slate);
  max-width: 62ch; line-height: 1.8;
  margin-bottom: 2.5rem;
}
.divider {
  width: 40px; height: 3px;
  background: var(--apricot);
  border-radius: 2px; margin-bottom: 1rem;
}

/* ── BUTTONS ── */
.btn {
  display: inline-block;
  font-size: 0.875rem; font-weight: 500;
  padding: 0.6rem 1.4rem;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer; border: none;
  transition: background 0.2s, color 0.2s;
}
.btn-primary { background: var(--ink); color: var(--white); }
.btn-primary:hover { background: var(--terra); color: var(--white); text-decoration: none; }
.btn-outline {
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--apricot);
}
.btn-outline:hover { border-color: var(--terra); color: var(--terra); text-decoration: none; }
.btn-terra { background: var(--terra); color: var(--white); }
.btn-terra:hover { background: var(--ink); color: var(--white); text-decoration: none; }

/* ── CARDS ── */
.card {
  background: var(--white);
  border: 1px solid var(--peach);
  border-radius: 8px;
  padding: 1.5rem 1.75rem;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

/* ── HOME HERO ── */
.hero {
  background: var(--ivory);
  padding: 5rem 2rem 4rem;
}
.hero-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4rem; align-items: center;
}
.hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700; line-height: 1.2;
  color: var(--ink); margin-bottom: 1.25rem;
}
.hero h1 em { font-style: italic; color: var(--terra); }
.hero-lead {
  font-size: 1.05rem; color: var(--slate);
  max-width: 48ch; margin-bottom: 2rem; line-height: 1.8;
}
.hero-btns { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.hero-pillars { display: flex; flex-direction: column; gap: 1.25rem; }
.pillar {
  display: flex; align-items: flex-start; gap: 1rem;
  background: var(--white);
  border: 1px solid var(--peach);
  border-radius: 8px; padding: 1.25rem 1.5rem;
}
.pillar-icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
}
.pillar h3 { font-family: var(--font-serif); font-size: 1rem; font-weight: 600; margin-bottom: 0.25rem; }
.pillar p { font-size: 0.875rem; color: var(--slate); line-height: 1.55; }

/* ── TEAM PAGE ── */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1.5rem;
}
.team-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--peach);
  border-radius: 8px; overflow: hidden;
  transition: box-shadow 0.2s;
}
.team-card:hover { box-shadow: 0 4px 20px rgba(30,56,71,0.08); }
.team-card.pi { grid-column: 1 / -1; max-width: 480px; }
.team-photo {
  width: 100%; aspect-ratio: 1;
  background: var(--ivory);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; border-bottom: 1px solid var(--peach);
}
.team-card.pi .team-photo {
  aspect-ratio: unset; height: 200px;
  background: linear-gradient(135deg, var(--ink), #2a4f63);
}
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-photo-placeholder {
  font-family: var(--font-serif);
  font-size: 3rem; font-weight: 700;
  color: rgba(30,56,71,0.2);
}
.team-card.pi .team-photo-placeholder { color: rgba(255,255,255,0.2); font-size: 4rem; }
.team-info { padding: 1.25rem 1.5rem; }
.team-info h3 { font-family: var(--font-serif); font-size: 1rem; font-weight: 600; margin-bottom: 0.2rem; }
.team-role { font-size: 0.8rem; color: var(--terra); font-weight: 500; margin-bottom: 0.5rem; }
.team-info p { font-size: 0.875rem; color: var(--slate); line-height: 1.6; margin-bottom: 0.75rem; }
.team-links { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.team-links a { font-size: 0.8rem; color: var(--slate); border: 1px solid var(--peach); padding: 0.2rem 0.5rem; border-radius: 4px; }
.team-links a:hover { color: var(--terra); border-color: var(--apricot); text-decoration: none; }
.research-interests { list-style: none; margin-top: 0.5rem; }
.research-interests li {
  font-size: 0.8rem; color: var(--slate);
  padding: 0.15rem 0;
}
.research-interests li::before { content: "·"; color: var(--apricot); margin-right: 0.4rem; }

/* ── PROJECTS PAGE ── */
.project-card {
  background: var(--white);
  border: 1px solid var(--peach);
  border-left: 4px solid var(--terra);
  border-radius: 0 8px 8px 0;
  padding: 1.75rem 2rem;
  margin-bottom: 1.25rem;
}
.project-card h3 { font-family: var(--font-serif); font-size: 1.15rem; margin-bottom: 0.5rem; }
.project-card .project-body { font-size: 0.95rem; color: var(--slate); line-height: 1.75; }
.tag {
  display: inline-block; font-size: 0.73rem; font-weight: 500;
  padding: 0.2rem 0.55rem; border-radius: 20px;
  margin-right: 0.35rem; margin-bottom: 0.6rem;
}
.tag-fnirs    { background: var(--sage);   color: var(--ink); }
.tag-context  { background: var(--peach);  color: var(--ink); }
.tag-teen     { background: var(--apricot);color: var(--ink); }
.tag-method   { background: var(--ivory);  color: var(--slate); border: 1px solid var(--peach); }
.status-badge {
  font-size: 0.72rem; font-weight: 600; padding: 0.2rem 0.5rem;
  border-radius: 20px; margin-left: 0.5rem;
  background: var(--ivory); color: var(--slate);
  border: 1px solid var(--peach);
}
.status-badge.active { background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7; }

/* ── PUBLICATIONS PAGE ── */
.pub-item {
  display: grid; grid-template-columns: 52px 1fr;
  gap: 1.25rem; align-items: start;
  background: var(--white);
  border: 1px solid var(--peach);
  border-radius: 8px;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1rem;
}
.pub-year {
  font-family: var(--font-serif); font-size: 1.05rem;
  font-weight: 700; color: var(--terra); padding-top: 0.1rem;
}
.pub-content h3 { font-family: var(--font-serif); font-size: 0.975rem; line-height: 1.45; margin-bottom: 0.3rem; }
.pub-authors { font-size: 0.85rem; color: var(--slate); margin-bottom: 0.2rem; }
.pub-journal { font-size: 0.85rem; color: var(--terra); font-style: italic; margin-bottom: 0.5rem; }
.pub-links { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pub-links a {
  font-size: 0.78rem; color: var(--slate);
  border: 1px solid var(--peach); padding: 0.15rem 0.5rem;
  border-radius: 4px;
}
.pub-links a:hover { color: var(--terra); border-color: var(--apricot); text-decoration: none; }
.pub-status { font-size: 0.75rem; color: var(--slate); font-style: italic; }

/* ── RESOURCES PAGE ── */
.fnirs-banner {
  background: linear-gradient(135deg, var(--ink) 0%, #2a4f63 100%);
  color: var(--white); border-radius: 12px;
  padding: 3rem; margin-bottom: 2.5rem;
}
.fnirs-banner h2 {
  font-family: var(--font-serif); font-size: 1.75rem;
  margin-bottom: 1rem; line-height: 1.3;
}
.fnirs-banner p { opacity: 0.85; max-width: 60ch; line-height: 1.8; }
.vs-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; background: var(--white); border-radius: 8px; overflow: hidden; border: 1px solid var(--peach); }
.vs-table th { background: var(--ink); color: var(--white); padding: 0.75rem 1rem; text-align: left; font-weight: 500; font-size: 0.85rem; }
.vs-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--ivory); color: var(--slate); vertical-align: top; }
.vs-table tr:last-child td { border-bottom: none; }
.vs-table tr:nth-child(even) td { background: var(--cream); }
.vs-table td:first-child { font-weight: 500; color: var(--ink); }

/* ── UPDATES PAGE ── */
.update-card {
  background: var(--white); border: 1px solid var(--peach);
  border-radius: 8px; overflow: hidden; margin-bottom: 1.25rem;
}
.update-header {
  background: var(--ivory); padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--peach);
  display: flex; align-items: center; justify-content: space-between;
}
.update-date { font-size: 0.82rem; color: var(--terra); font-weight: 500; }
.update-body { padding: 1.25rem 1.5rem; }
.update-body h3 { font-family: var(--font-serif); font-size: 1rem; margin-bottom: 0.5rem; line-height: 1.4; }
.update-body p, .update-body li { font-size: 0.9rem; color: var(--slate); line-height: 1.65; }
.category-badge {
  font-size: 0.72rem; font-weight: 600; padding: 0.2rem 0.5rem;
  border-radius: 20px; background: var(--apricot); color: var(--ink);
}

/* ── CONTACT PAGE ── */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.contact-detail { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1.1rem; }
.contact-icon {
  width: 36px; height: 36px; background: var(--ivory);
  border: 1px solid var(--peach); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
.contact-detail strong { display: block; font-size: 0.78rem; color: var(--terra); font-weight: 600; margin-bottom: 0.1rem; }
.contact-detail span { font-size: 0.9rem; }
.join-card {
  background: linear-gradient(135deg, var(--ink) 0%, #2a4f63 100%);
  border-radius: 12px; padding: 2.5rem; color: var(--white);
}
.join-card h3 { font-family: var(--font-serif); font-size: 1.35rem; margin-bottom: 1rem; line-height: 1.35; }
.join-card p { opacity: 0.85; font-size: 0.95rem; line-height: 1.75; margin-bottom: 1.5rem; }
.join-perks { list-style: none; margin-bottom: 1.75rem; }
.join-perks li { padding: 0.35rem 0; font-size: 0.875rem; opacity: 0.9; display: flex; gap: 0.5rem; align-items: flex-start; }
.join-perks li::before { content: "→"; color: var(--apricot); font-weight: 600; flex-shrink: 0; }

/* ── FOOTER ── */
.site-footer {
  background: var(--ink); color: rgba(255,255,255,0.65);
  padding: 2.5rem; text-align: center; font-size: 0.85rem; line-height: 1.9;
}
.site-footer a { color: var(--apricot); }
.site-footer strong { color: var(--white); }
.footer-tagline { margin-top: 0.75rem; font-size: 0.75rem; opacity: 0.4; letter-spacing: 0.08em; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .hero-inner { grid-template-columns: 1fr; gap: 2rem; }
  .hero { padding: 3rem 1.25rem 2.5rem; }
  .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
  .section { padding: 3rem 1.25rem; }
  .nav-inner { padding: 0 1.25rem; }
  .nav-toggle { display: flex; }
  .nav-links {
    display: none; flex-direction: column;
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: var(--cream); border-bottom: 1px solid var(--peach);
    padding: 1rem 1.25rem; gap: 0.25rem;
  }
  .nav-links.open { display: flex; }
  .pub-item { grid-template-columns: 1fr; }
  .fnirs-banner { padding: 2rem; }
  .vs-table { font-size: 0.8rem; }
  .card-grid { grid-template-columns: 1fr; }
}

/* ── PUBLICATION CATEGORIES ── */
.pub-category { margin-bottom: 3rem; }
.pub-cat-title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--ink);
  margin: 2rem 0 0.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--apricot);
}
.pub-subcat {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--slate);
  font-weight: 600;
  margin: 1.25rem 0 0.75rem;
  font-style: italic;
}

/* ── COLLABORATORS PAGE ── */
.collaborator-list { display: flex; flex-direction: column; gap: 1rem; }
.collaborator-card {
  background: var(--white);
  border: 1px solid var(--peach);
  border-radius: 8px;
  padding: 1.25rem 1.75rem;
  display: flex; align-items: center; gap: 1.25rem;
}
/* A monogram of the person's initials, not an emoji — it scales with
   the text, reads the same on every platform, and looks deliberate. */
.collaborator-icon {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--ivory);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--peach);
  font-size: 0.875rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: var(--text);
}
.collaborator-card:hover .collaborator-icon {
  border-color: var(--orange);
  color: var(--orange-txt);
}
[data-theme="dark"] .collaborator-card:hover .collaborator-icon { color: var(--orange-lt); }
.collaborator-info h3 { font-family: var(--font-serif); font-size: 1rem; color: var(--ink); margin-bottom: 0.15rem; }
.collaborator-info p { font-size: 0.875rem; color: var(--slate); }

/* ── TEAM PAGE: group headings ── */
.team-section-heading {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--peach);
}
.team-pronouns { font-weight: 400; font-size: 0.8rem; color: var(--slate); }
.team-title { font-size: 0.82rem; margin-bottom: 0.6rem; }
.team-info { display: flex; flex-direction: column; flex: 1; }
.team-bio { font-size: 0.875rem; color: var(--slate); line-height: 1.6; margin-bottom: 0.75rem; }
.bio-more { margin: -0.35rem 0 0.75rem; }
.bio-more summary {
  cursor: pointer; list-style: none;
  font-size: 0.8rem; font-weight: 500; color: var(--terra);
}
.bio-more summary::-webkit-details-marker { display: none; }
.bio-more summary::after { content: " ↓"; font-size: 0.75rem; }
.bio-more[open] summary::after { content: " ↑"; }
.bio-more summary:hover { text-decoration: underline; }
.bio-more[open] summary { margin-bottom: 0.5rem; }
.team-links { margin-top: auto; padding-top: 0.5rem; }


/* ═══════════════════════════════════════════════════════════════
   CONNECT LAB — 2026 THEME LAYER
   ───────────────────────────────────────────────────────────────
   Everything below restyles the site. It is appended deliberately
   so it overrides the rules above without rewriting them — delete
   from this banner to the end of the file to return to the
   original look.

   Palette: Auburn navy #0C2340 + Auburn orange #E87722
   Change the six values in the first block to rebrand everything.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Brand */
  --navy:       #0c2340;
  --navy-2:     #17395f;
  --navy-deep:  #081628;
  --orange:     #e87722;
  --orange-lt:  #f59a55;
  --orange-txt: #b85c0d;   /* darker orange — readable as text on light */

  /* Semantic */
  --text:    #0f1b2d;
  --surface: #ffffff;      /* card backgrounds */

  /* Remap of the original variable names */
  --ink:     var(--navy);  /* stays navy in BOTH modes: it paints dark surfaces */
  --slate:   #5b6b7f;
  --terra:   var(--orange-txt);
  --apricot: var(--orange);
  --peach:   #e3e8ee;
  --sage:    #dcebe3;
  --ivory:   #f4f6f9;
  --cream:   #ffffff;
  --taupe:   #8795a5;

  --font-serif: 'Inter', system-ui, -apple-system, sans-serif;
  --nav-h: 64px;
}

/* ── Dark mode ────────────────────────────────────────────────
   Only the tokens that mean "light surface" or "dark text" flip.
   --ink stays navy so footers, buttons and gradients keep working. */
[data-theme="dark"] {
  --text:    #e8eef6;
  --surface: #1a2433;
  --slate:   #a3b3c6;
  --terra:   var(--orange-lt);
  --peach:   #2b3850;
  --sage:    #24483c;
  --ivory:   #141e2d;
  --cream:   #0e1622;
  --taupe:   #8294aa;
}

body { background: var(--cream); color: var(--text); }

/* Card surfaces route through --surface so they can flip safely */
.card, .pillar, .team-card, .project-card, .pub-item,
.update-card, .collaborator-card, .vs-table { background: var(--surface); }

/* Text that was hard-coded to navy follows --text instead */
.section-title, .hero h1, .nav-logo, .btn-outline, .pub-cat-title,
.team-section-heading, .collaborator-info h3, .vs-table td:first-child,
.nav-links a:hover, .nav-links a.active { color: var(--text); }

/* ── Header: dark bar, like the preview ─────────────────────── */
.site-nav {
  background: rgba(12, 35, 64, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.nav-logo, .site-nav .nav-logo { color: #fff; }
.nav-logo strong { color: var(--orange-lt); }
.nav-links a { color: rgba(255, 255, 255, 0.76); }
.site-nav .nav-links a:hover,
.site-nav .nav-links a.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}
.nav-links .btn-nav { background: var(--orange); color: #fff; }
.nav-links .btn-nav:hover { background: var(--orange-lt); color: #fff; }
.nav-toggle span { background: #fff; }

/* Theme switch button */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-left: 0.4rem;
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px; cursor: pointer; color: #fff;
  font-size: 0.95rem; line-height: 1;
  transition: background 0.2s, border-color 0.2s;
}
.theme-toggle:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.4); }
.theme-toggle .icon-dark { display: none; }
[data-theme="dark"] .theme-toggle .icon-dark { display: inline; }
[data-theme="dark"] .theme-toggle .icon-light { display: none; }

/* ── Hero: navy gradient with an orange glow ────────────────── */
.hero {
  background:
    radial-gradient(ellipse at 78% 18%, rgba(232,119,34,0.42) 0%, rgba(232,119,34,0) 58%),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  color: #fff;
  padding: 5.5rem 2rem 5rem;
}
.hero h1 { color: #fff; letter-spacing: -0.02em; font-weight: 700; }
.hero h1 em { color: var(--orange-lt); font-style: normal; }
.hero-lead { color: rgba(255, 255, 255, 0.82); }
.hero .btn-primary { background: var(--orange); color: #fff; }
.hero .btn-primary:hover { background: #fff; color: var(--navy); }
.hero .btn-outline { color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.hero .btn-outline:hover { background: rgba(255,255,255,0.12); color: #fff; border-color: #fff; }

/* Pillars become translucent glass cards on the gradient */
.hero .pillar {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
}
.hero .pillar h3 { color: #fff; }
.hero .pillar p { color: rgba(255, 255, 255, 0.74); }
.hero .pillar-icon { background: rgba(255, 255, 255, 0.14); }

/* ── Cards: lift and glow on hover ──────────────────────────── */
.card, .pillar, .team-card, .project-card, .pub-item,
.update-card, .collaborator-card {
  border-color: var(--peach);
  border-radius: 10px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.card:hover, .team-card:hover, .project-card:hover,
.pub-item:hover, .update-card:hover, .collaborator-card:hover {
  transform: translateY(-2px);
  border-color: var(--orange);
  box-shadow: 0 8px 24px rgba(12, 35, 64, 0.1);
}
[data-theme="dark"] .card:hover, [data-theme="dark"] .team-card:hover,
[data-theme="dark"] .project-card:hover, [data-theme="dark"] .pub-item:hover,
[data-theme="dark"] .update-card:hover, [data-theme="dark"] .collaborator-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.project-card { border-left: 4px solid var(--orange); }

/* ── Typography ─────────────────────────────────────────────── */
.section-title { letter-spacing: -0.02em; font-weight: 700; }
.section-eyebrow { color: var(--terra); }
.divider { background: var(--orange); }
.pub-cat-title { border-bottom-color: var(--orange); }

/* ── Buttons ────────────────────────────────────────────────── */
.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { background: var(--navy); color: #fff; }
.btn-terra { background: var(--orange); color: #fff; }
.btn-terra:hover { background: var(--navy); color: #fff; }
.btn-outline { border: 1.5px solid var(--peach); }
.btn-outline:hover { border-color: var(--orange); color: var(--terra); }

/* ── Tags and badges (need explicit dark-mode values) ───────── */
[data-theme="dark"] .tag-context { background: #2d4766; color: #dce8f5; }
[data-theme="dark"] .tag-fnirs   { background: #234a3d; color: #d4efe3; }
[data-theme="dark"] .tag-teen    { background: var(--orange); color: #17120a; }
[data-theme="dark"] .tag-method,
[data-theme="dark"] .status-badge { background: #1a2433; color: var(--slate); border-color: var(--peach); }
[data-theme="dark"] .status-badge.active { background: #14321f; color: #8ddfa6; border-color: #246039; }
[data-theme="dark"] .category-badge { color: #17120a; }
[data-theme="dark"] .vs-table tr:nth-child(even) td { background: rgba(255, 255, 255, 0.03); }
[data-theme="dark"] .team-links a,
[data-theme="dark"] .pub-links a { color: var(--slate); border-color: var(--peach); }

/* ── Dark-surface blocks keep white text in both modes ──────── */
.fnirs-banner, .join-card { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%); }
.team-card.pi .team-photo { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%); }
.vs-table th { background: var(--navy); color: #fff; }
.site-footer { background: var(--navy-deep); }
.site-footer a { color: var(--orange-lt); }
.join-perks li::before { color: var(--orange-lt); }

/* ── Mobile menu sits on the dark bar ───────────────────────── */
@media (max-width: 768px) {
  .nav-links {
    background: rgba(12, 35, 64, 0.98);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .hero { padding: 3.25rem 1.25rem 3rem; }
  .theme-toggle { margin-left: 0; margin-right: 0.5rem; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .card, .team-card, .project-card, .pub-item, .update-card, .collaborator-card { transition: none; }
  .card:hover, .team-card:hover, .project-card:hover,
  .pub-item:hover, .update-card:hover, .collaborator-card:hover { transform: none; }
}

/* Logo reads as a crisp badge against the dark bar */
.nav-logo img {
  background: #fff;
  border-radius: 50%;
  padding: 1px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}
/* Keep the theme switch hard right, after the nav links */
.nav-inner { gap: 0.5rem; }
.nav-links { margin-left: auto; }

/* ── Accessibility: solid orange needs dark text ──────────────
   White on #E87722 measures 2.96:1, below the WCAG AA minimum.
   Navy on the same orange measures 5.33:1 and is more on-brand. */
.btn-primary,
.btn-terra,
.hero .btn-primary,
.nav-links .btn-nav {
  background: var(--orange);
  color: var(--navy);
  font-weight: 600;
}
.btn-primary:hover,
.btn-terra:hover { background: var(--navy); color: #fff; }
.hero .btn-primary:hover { background: #fff; color: var(--navy); }
.nav-links .btn-nav:hover { background: var(--orange-lt); color: var(--navy); }

/* Link and muted-text colours nudged darker to clear WCAG AA (4.5:1) */
:root {
  --orange-txt: #af5709;   /* 5.0:1 on white */
  --taupe:      #64748b;   /* 4.8:1 on white */
}
/* must come after the :root block above, or it loses the cascade */
[data-theme="dark"] { --taupe: #9aacc2; }

/* ── LAB PHOTO BANNER (home page) ─────────────────────────────
   Two stacked photos. The candid one sits underneath and fades
   in when the pointer is over the banner (or on tap, via the
   .is-flipped class that main.js adds).
   To change the photos, replace these two files:
     assets/images/lab-photo-formal.jpg
     assets/images/lab-photo-fun.jpg                            */
.lab-banner {
  position: relative;
  width: 100%;
  height: clamp(320px, 56vh, 620px);
  overflow: hidden;
  background: var(--navy);
  cursor: pointer;
}
.lab-banner img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
  transition: opacity 0.55s ease;
}
.lab-banner-formal { opacity: 1; z-index: 1; }
.lab-banner-fun    { opacity: 0; z-index: 2; }

.lab-banner:hover .lab-banner-formal,
.lab-banner:focus-within .lab-banner-formal,
.lab-banner.is-flipped .lab-banner-formal { opacity: 0; }
.lab-banner:hover .lab-banner-fun,
.lab-banner:focus-within .lab-banner-fun,
.lab-banner.is-flipped .lab-banner-fun { opacity: 1; }

/* Blends the bottom of the photo into the navy hero below it */
.lab-banner::after {
  content: "";
  position: absolute; inset: auto 0 0 0;
  height: 42%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(12,35,64,0) 0%, rgba(12,35,64,0.55) 62%, var(--navy) 100%);
}

.lab-banner-hint {
  position: absolute;
  right: 1.5rem; bottom: 1.25rem;
  z-index: 4;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(12, 35, 64, 0.5);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 20px;
  padding: 0.35rem 0.85rem;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.lab-banner:hover .lab-banner-hint,
.lab-banner.is-flipped .lab-banner-hint { opacity: 0; }

/* The hero sits directly beneath, so drop its top padding */
.lab-banner + .hero { padding-top: 2.5rem; }

@media (max-width: 768px) {
  .lab-banner { height: clamp(240px, 40vh, 360px); }
  .lab-banner-hint { right: 0.9rem; bottom: 0.9rem; font-size: 0.66rem; }
  .lab-banner + .hero { padding-top: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lab-banner img, .lab-banner-hint { transition: none; }
}

/* ── LAB LOGO: bigger mark, taller header ─────────────────────
   Size the logo with --logo-size; the header grows to match.
   The rest of the layout follows --nav-h automatically.        */
:root {
  --logo-size: 58px;
  --nav-h: 88px;
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 1.2rem;
  line-height: 1.1;
}
.nav-logo-mark,
.nav-logo img {
  height: var(--logo-size);
  width: var(--logo-size);
  object-fit: contain;
  flex-shrink: 0;
  background: #fff;
  border-radius: 50%;
  padding: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28);
}

/* Nav links tighten slightly so the taller logo still fits on one row */
@media (max-width: 1180px) {
  .nav-links a { padding: 0.4rem 0.55rem; font-size: 0.84rem; }
  :root { --logo-size: 50px; --nav-h: 78px; }
}

@media (max-width: 768px) {
  :root { --logo-size: 46px; --nav-h: 72px; }
  .nav-logo { font-size: 1.05rem; }
  .nav-links a { font-size: 0.9rem; padding: 0.5rem 0.75rem; }
}

/* ── Header layout for the larger logo ────────────────────────
   Eight nav links plus a bigger mark no longer fit in the old
   1100px bar, so the bar gets wider, labels never wrap, and the
   menu collapses to the hamburger earlier (below 1024px).      */
.nav-inner { max-width: 1240px; }
.nav-links { flex-wrap: nowrap; }
.nav-links a { white-space: nowrap; }
.nav-logo { white-space: nowrap; }

@media (max-width: 1300px) {
  :root { --logo-size: 52px; --nav-h: 80px; }
  .nav-links a { padding: 0.4rem 0.5rem; font-size: 0.82rem; }
  .nav-logo { font-size: 1.1rem; gap: 0.5rem; }
}

@media (max-width: 1024px) {
  :root { --logo-size: 50px; --nav-h: 76px; }
  .nav-logo { font-size: 1.15rem; }
  .nav-toggle { display: flex; margin-left: auto; }
  .theme-toggle { margin-left: 0.4rem; }
  .nav-links {
    display: none;
    flex-direction: column;
    flex-wrap: wrap;
    position: absolute;
    top: var(--nav-h); left: 0; right: 0;
    margin-left: 0;
    background: rgba(12, 35, 64, 0.98);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem 1.25rem;
    gap: 0.25rem;
  }
  .nav-links.open { display: flex; }
  .nav-links a { font-size: 0.95rem; padding: 0.55rem 0.75rem; }
  .nav-links .btn-nav { align-self: flex-start; }
}

/* ── Bio toggle: preview is REPLACED by the full bio, not repeated ──
   Collapsed: 32-word preview + "Read full bio"
   Expanded:  full bio + "Show less"                                 */
.bio-more { margin: 0 0 0.75rem; }
.bio-more > summary {
  display: block;
  cursor: pointer;
  list-style: none;
}
.bio-more > summary::-webkit-details-marker { display: none; }
.bio-more .bio-preview {
  display: block;
  font-size: 0.875rem;
  color: var(--slate);
  line-height: 1.6;
  margin-bottom: 0.3rem;
}
.bio-more[open] .bio-preview { display: none; }

.bio-more .bio-toggle {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--terra);
}
.bio-more .bio-toggle::before { content: "Read full bio ↓"; }
.bio-more[open] .bio-toggle::before { content: "Show less ↑"; }
.bio-more > summary:hover .bio-toggle { text-decoration: underline; }
.bio-more[open] > summary { margin-top: 0.35rem; order: 2; }
.bio-more .bio-full { margin-bottom: 0.35rem; }
/* When open, put the full bio above the "Show less" control.
   Applied only to [open] so the closed state keeps the browser's
   default hide-the-content behaviour. */
.bio-more[open] { display: flex; flex-direction: column; }
.bio-more[open] > summary { order: 2; }
.bio-more[open] > .bio-full { order: 1; }
/* The first version of this control drew its own arrow; the label
   now carries one, so suppress the old pseudo-element. */
.bio-more > summary::after,
.bio-more[open] > summary::after { content: none; }

/* ── PI card: square photo, matching everyone else ────────────
   The original styling gave the PI a short 200px banner crop.
   Square keeps the whole team page consistent.                 */
.team-card.pi { max-width: 400px; }
.team-card.pi .team-photo {
  aspect-ratio: 1;
  height: auto;
}

/* ── PI card: fixed photo, text fills the rest ────────────────
   The photo is 400px square at every screen width and in both
   layouts — it never resizes. Below 1024px the card is stacked
   exactly like any other member's. At 1024px and up the card
   spans the full content width and the bio takes ALL the
   remaining space beside the photo, with no cap, so the intro
   fills the row instead of stopping short.                     */
@media (min-width: 1024px) {
  .team-card.pi {
    max-width: none;
    flex-direction: row;
    align-items: flex-start;
  }
  .team-card.pi .team-photo {
    flex: 0 0 400px;
    width: 400px;
    aspect-ratio: 1;
    height: auto;
    border-bottom: 0;
  }
  .team-card.pi .team-info {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.75rem 2rem;
    /* Divider on the text column, not the photo, so it runs the
       full height of the card rather than stopping at the photo. */
    border-left: 1px solid var(--peach);
  }
  .team-card.pi .team-info h3 { font-size: 1.25rem; }
  .team-card.pi .team-role { font-size: 0.875rem; }
}

/* ── WHAT IS fNIRS page ───────────────────────────────────────── */
.fnirs-h3 {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 1rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--peach);
}
.fnirs-term {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 650;
  color: var(--text);
  margin-bottom: 0.4rem;
}
.fnirs-body {
  font-size: 0.925rem;
  color: var(--slate);
  line-height: 1.75;
}
.fnirs-cite {
  font-size: 0.8rem;
  /* --taupe is tuned for white; on the tinted section-alt panel it
     falls to 4.4:1, so this is a shade darker. Dark mode keeps the
     token, which already clears the bar there. */
  color: #64707f;
  line-height: 1.7;
  max-width: 68ch;
}

/* Neural activity → ↑ blood flow → ↑ HbO + ↓ HbR */
.fnirs-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  margin: 0 0 2rem;
  padding: 1.1rem 1.4rem;
  border: 1px solid var(--peach);
  border-left: 4px solid var(--orange);
  border-radius: 0 10px 10px 0;
  background: var(--surface);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}
.fnirs-chain .fnirs-arrow { color: var(--orange); font-weight: 700; }

/* Numbered walkthrough */
.fnirs-steps {
  list-style: none;
  counter-reset: fnirs;
  margin: 0 0 2.5rem;
  padding: 0;
  max-width: 72ch;
}
.fnirs-steps > li {
  counter-increment: fnirs;
  position: relative;
  padding-left: 3rem;
  margin-bottom: 1.4rem;
  font-size: 0.925rem;
  color: var(--slate);
  line-height: 1.75;
}
.fnirs-steps > li::before {
  content: counter(fnirs);
  position: absolute;
  left: 0; top: 0.1rem;
  width: 2rem; height: 2rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--orange);
  color: var(--navy);
  font-size: 0.85rem;
  font-weight: 700;
}
.fnirs-steps > li strong { color: var(--text); }

.fnirs-list {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
  max-width: 68ch;
}
.fnirs-list > li {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: 0.65rem;
  font-size: 0.925rem;
  color: var(--slate);
  line-height: 1.7;
}
.fnirs-list > li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
}
.fnirs-list > li strong { color: var(--text); }

@media (max-width: 768px) {
  .fnirs-chain { font-size: 0.9rem; padding: 0.9rem 1rem; }
  .fnirs-steps > li { padding-left: 2.6rem; }
}
/* arrows are text, so they need the readable orange, not the bright one */
.fnirs-chain .fnirs-arrow { color: var(--terra); }

/* ── Photos on content pages ──────────────────────────────────── */
.photo-wide {
  margin: 0 0 2.5rem;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--peach);
  background: var(--surface);
}
.photo-wide img { width: 100%; height: auto; display: block; }
.photo-wide figcaption,
.photo-figure figcaption {
  font-size: 0.8rem;
  color: var(--taupe);
  line-height: 1.6;
  padding: 0.75rem 1rem;
}
.photo-split {
  display: grid;
  grid-template-columns: minmax(240px, 0.85fr) 1.15fr;
  gap: 2rem;
  align-items: start;
}
.photo-figure {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--peach);
  background: var(--surface);
}
.photo-figure img { width: 100%; height: auto; display: block; }
.photo-split .fnirs-body { margin-bottom: 1rem; }
@media (max-width: 768px) {
  .photo-split { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* ── Publications page ────────────────────────────────────────── */
.pub-title {
  font-family: var(--font-serif);
  font-size: 0.975rem;
  font-weight: 650;
  line-height: 1.45;
  color: var(--text);
  margin-bottom: 0.3rem;
}
.pub-authors strong { color: var(--text); font-weight: 650; }
.pub-status-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.15rem 0.55rem;
  margin-bottom: 0.5rem;
  border-radius: 20px;
  background: var(--ivory);
  color: var(--slate);
  border: 1px solid var(--peach);
}
.pub-status-badge.in-press { background: var(--orange); color: var(--navy); border-color: var(--orange); }
.pub-subcat + .pub-item { margin-top: 0.25rem; }

/* ── Join Us page: the undergraduate block leads the page ─────── */
.join-card--lead { padding: 2.75rem 3rem; }
.join-card--lead h3 { font-size: 1.5rem; line-height: 1.3; margin-bottom: 1.1rem; }
.join-card--lead p { max-width: 70ch; }
.join-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange-lt);
  margin-bottom: 0.6rem;
  opacity: 1;
}
.join-subhead {
  font-weight: 650;
  color: #fff;
  margin: 1.6rem 0 0.5rem;
  opacity: 1;
}
.join-card a:not(.btn) { color: var(--orange-lt); text-decoration: underline; }
.join-card a:not(.btn):hover { color: #fff; }
.join-card .join-perks { margin-bottom: 0.5rem; }
.join-card .btn { margin-top: 1.5rem; }
@media (max-width: 768px) {
  .join-card--lead { padding: 1.75rem 1.5rem; }
  .join-card--lead h3 { font-size: 1.25rem; }
}
.footer-links { margin-top: 0.6rem; font-size: 0.82rem; }
.footer-links a { color: var(--orange-lt); }

/* The personal paragraph sits a little apart from the research bio */
.bio-personal { border-top: 1px solid var(--peach); padding-top: 0.7rem; }

/* The lab's name picked out of the heading. --orange-txt is tuned
   for light backgrounds; the dark panel gets the lighter orange. */
.word-connect { color: var(--orange-txt); font-weight: 800; }
/* Headings resolve to Inter: the theme layer remaps --font-serif to it.
   Italic is requested in the layout's font URL; if Google has no italic
   cut for Inter the browser slants the upright instead. */
.section-title--italic { font-style: italic; }
[data-theme="dark"] .word-connect { color: var(--orange-lt); }

/* ── "CONNECT Is More Than Our Name" ─────────────────────────
   Four parallel statements, two per row on desktop, stacked on
   a phone. Each lead-in carries the lab's orange so the
   repeated "... connect." reads as the pattern it is.          */
.connect-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem 2.5rem;
  margin-top: 0.5rem;
}
.connect-item h3 {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 650;
  color: var(--orange-txt);
  margin-bottom: 0.4rem;
}
.connect-item p {
  font-size: 0.925rem;
  color: var(--slate);
  line-height: 1.75;
  margin: 0;
  max-width: 52ch;
}
/* --orange-txt is tuned for white; on the dark ivory panel it drops
   to 3.3:1, so the lead-ins switch to the lighter orange there. */
[data-theme="dark"] .connect-item h3 { color: var(--orange-lt); }
@media (max-width: 760px) {
  .connect-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ── Hero tagline and backdrop ───────────────────────────────
   Two-line tagline with the second line italic in pale sage, a
   smaller supporting line under it, and the sweeping lines on the
   right. Typeface is untouched — this is size, colour and layout
   only.                                                          */
.hero { position: relative; overflow: hidden; }
.hero-inner { position: relative; z-index: 1; }
.hero-deco {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(52%, 640px);
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 900px) {
  .hero-deco { display: none; }
}

/* ── Hero is a single column now that the three pillars are gone ──
   .hero-inner is a 1fr 1fr grid, which would strand the text in the
   left half with an empty right half.                              */
.hero-inner { grid-template-columns: 1fr; gap: 0; }
.hero-text { max-width: 46rem; }

/* The eyebrow uses --terra, which is tuned for white backgrounds and
   reads at only 3.1:1 on the navy hero. Lighten it just there.      */
.hero .section-eyebrow { color: var(--orange-lt); }

[data-theme="dark"] .fnirs-cite { color: var(--taupe); }

/* ── Homepage About lede ─────────────────────────────────────
   Single column now that the three cards have been removed.
   Capped at a readable measure rather than running the full
   width of the page.                                           */
.home-lede { max-width: 68ch; }
.home-lede p {
  color: var(--slate);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

/* ── Lab update photos ───────────────────────────────────────
   On the list, a thumbnail sits beside the text and links to the
   post. Images keep their own proportions rather than being
   cropped to a common box, so a portrait poster shot and a
   landscape slide both stay whole.                              */
.update-body.has-media {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}
.update-text { flex: 1 1 auto; min-width: 0; }
.update-media {
  flex: 0 0 190px;
  width: 190px;
  display: block;
}
.update-media img {
  display: block;
  max-width: 100%;
  max-height: 260px;
  width: auto;
  height: auto;
  margin: 0 auto;
  border-radius: 6px;
  border: 1px solid var(--peach);
}
.update-media:hover img { border-color: var(--orange); }

/* The full picture on the post's own page */
.update-figure { margin: 0 0 1.9rem; }
.update-figure img {
  display: block;
  max-width: 100%;
  max-height: 540px;
  width: auto;
  height: auto;
  margin: 0 auto;
  border-radius: 8px;
  border: 1px solid var(--peach);
}

@media (max-width: 640px) {
  .update-body.has-media { flex-direction: column; gap: 1.1rem; }
  .update-media { flex: none; width: 100%; }
  .update-media img { max-height: 300px; }
}

/* ── Projects page ────────────────────────────────────────────── */
.project-cat {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 2.5rem 0 1rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--peach);
}
.project-cat:first-of-type { margin-top: 1.5rem; }
.project-subtitle {
  font-size: 0.9rem;
  color: var(--slate);
  font-style: italic;
  line-height: 1.6;
  margin: -0.25rem 0 0.7rem;
}
.project-tags { margin-bottom: 0.5rem; }
.project-card h3 { font-size: 1.3rem; letter-spacing: -0.01em; margin-bottom: 0.45rem; }
/* Status, as a line at the foot of the card rather than a badge */
.project-status {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--slate);
  margin: 1.1rem 0 0;
}
.project-status-label { font-weight: 650; color: var(--text); }

/* "NIRSPipe: github.com/..." rather than a bare GitHub button */
.project-links { margin-top: 0.3rem; }
.project-link { font-size: 0.875rem; line-height: 1.6; margin: 0 0 0.3rem; }
.project-link:last-child { margin-bottom: 0; }
.project-link-label { font-weight: 650; color: var(--text); }
.project-links a {
  color: var(--accent, var(--terra));
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  word-break: break-word;
}
.project-links a:hover { text-decoration-thickness: 2px; }

/* Per-project accent: titles and the left stripe.
   Each color has a light-mode and a dark-mode value so the text stays
   legible on both the white card and the dark one. */
/* ── CONNECT Lab project palette ──────────────────────────────
   --brand  is the palette color exactly as specified; it paints the
            card's left stripe, where there is no legibility concern.
   --accent is the same color nudged just far enough to stay readable
            as text on white (light mode) or on the dark card.
   Add a project with   accent: <slot>   in its front matter.          */
.project-card { --brand: var(--orange); --accent: var(--orange); }
.project-card.accent-slate      { --brand: #52758A; --accent: #52758A; }  /* NIRSPipe */
.project-card.accent-sky        { --brand: #7396B2; --accent: #537998; }  /* fNIRS Methods Review */
.project-card.accent-terracotta { --brand: #B66D52; --accent: #aa6248; }  /* Sync-A-Thon */
.project-card.accent-violet     { --brand: #8A78A3; --accent: #806c9b; }  /* Sync & Switch */
.project-card.accent-sage       { --brand: #738C76; --accent: #657a67; }  /* Neighborhood, Brain, and Health */
.project-card.accent-rose       { --brand: #B46465; --accent: #b05c5e; }  /* AI-Human Interaction Review */

[data-theme="dark"] .project-card.accent-slate      { --accent: #6b91a7; }
[data-theme="dark"] .project-card.accent-sky        { --accent: #7396B2; }
[data-theme="dark"] .project-card.accent-terracotta { --accent: #bd7c63; }
[data-theme="dark"] .project-card.accent-violet     { --accent: #9585ac; }
[data-theme="dark"] .project-card.accent-sage       { --accent: #7a927d; }
[data-theme="dark"] .project-card.accent-rose       { --accent: #be7979; }

.project-card.has-accent { border-left-color: var(--brand); }
/* Hovering a project lights the whole frame in that project's own
   colour, matching its left bar, instead of the generic orange the
   other card types use. --brand falls back to orange for a card
   with no accent, so uncoloured projects behave as before. */
.project-card:hover { border-color: var(--brand); }
/* Headings resolve to Inter: the theme layer remaps --font-serif to it.
   Italic is requested in the layout's font URL; if Google has no italic
   cut for Inter the browser slants the upright instead. */
.project-card.has-accent h3 {
  color: var(--accent);
  font-style: italic;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.015em;
}

/* Text column + optional picture beside it */
.project-main { display: flex; gap: 2rem; align-items: flex-start; }
.project-text { flex: 1 1 auto; min-width: 0; }
.project-media {
  flex: 0 0 128px;
  width: 128px;
  margin: 0.2rem 0 0;
}
.project-media--wide {
  flex-basis: 250px;
  width: 250px;
}
.project-media img { display: block; width: 100%; height: auto; }
.project-media a { display: block; }
/* A QR code has to stay on white to scan, in either theme. */
.project-media--qr img {
  background: #fff;
  padding: 9px;
  border-radius: 8px;
  border: 1px solid rgba(12, 35, 64, 0.14);
  box-sizing: border-box;
}
.project-media--cover img {
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(12, 35, 64, 0.16);
}
.project-media--wide img {
  border-radius: 8px;
  border: 1px solid rgba(12, 35, 64, 0.14);
  background: #fff;
}
.project-media figcaption {
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--slate);
  text-align: center;
  margin-top: 0.5rem;
}
/* Source credit under a figure — its own line, wrapping on the slashes
   rather than overflowing the narrow media column. */
.figcaption-link {
  display: block;
  margin-top: 0.25rem;
  color: var(--accent, var(--terra));
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.figcaption-link:hover { text-decoration-thickness: 2px; }

/* Study / partner logos: white chips so they read in dark mode too */
.project-logos { margin-top: 1.2rem; }
.project-logos-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 0.55rem;
}
.project-logo-row { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }
.project-logo {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid rgba(12, 35, 64, 0.14);
  border-radius: 8px;
  padding: 0.55rem 0.9rem;
}
.project-logo img { display: block; height: 60px; width: auto; }
a.project-logo { transition: border-color 0.15s, box-shadow 0.15s; }
a.project-logo:hover,
a.project-logo:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(12, 35, 64, 0.18);
}

@media (max-width: 700px) {
  .project-main { flex-direction: column; gap: 1.2rem; }
  .project-media { flex: none; width: 132px; align-self: flex-start; }
  .project-media--wide { width: 100%; max-width: 320px; }
  .project-logo img { height: 46px; }
}