/* ---------- Design tokens (new) ---------- */
:root{
  --bg: #f5f7fb;
  --panel: #ffffff;
  --text: #1f2937;
  --muted:#6b7280;
  --brand:#007acc;
  --brand-dark:#005fa3;
  --ring: rgba(0,122,204,.25);

  --radius:12px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --s1:.5rem; --s2:.75rem; --s3:1rem; --s4:1.5rem; --s5:2rem;
  --maxw: 72ch; /* comfortable reading width */
}

/* Respect user preference for dark mode */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1020; --panel:#111831; --text:#E6ECF3; --muted:#A8B3C7;
    --brand:#7AA2F7; --brand-dark:#4f7bd9; --ring:rgba(122,162,247,.28);
  }
}

/* ---------- Base & layout ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior:smooth; }

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    line-height: 1.65;
    color: var(--text);
    margin: 0;
    padding: 0;
    background-color: var(--bg);
}

.container {
    width: 92%;
    max-width: 1000px;                /* wider canvas */
    margin: 0 auto;
    padding: 24px;
    background: var(--panel);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
}

/* Optional: keep long paragraphs readable if you wrap them in .prose */
.prose { max-width: var(--maxw); }

/* ---------- Header & nav ---------- */
header {
    position: sticky;                 /* sticky bar */
    top: 0;
    z-index: 100;
    background-color: #0b3b6e;       /* deeper blue for contrast */
    color: white;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(6px);
}

header h1 {
    font-style: normal;               /* cleaner */
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    color: #ffd166;                   /* warmer accent */
    text-align: center;
    margin: 6px 0 10px;
    font-weight: 600;
    line-height: 1.2;
}

/* Show a slim tagline if you have one */
header p.tagline{ 
    margin: 0 0 8px; color: rgba(255,255,255,.9); font-size:.95rem 
}

/* Nav: horizontal on desktop */
nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0 auto;
    display: flex;
    gap: .5rem;
    justify-content: center;
    flex-wrap: wrap;
}

nav ul li { margin: 0; }

nav ul li a {
    text-decoration: none;
    color: white;                     /* visible on the blue bar */
    padding: 8px 12px;
    font-weight: 600;
    border-radius: 8px;
    transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}

nav ul li a:hover {
    background-color: rgba(255,255,255,.12);
    color: #fff;
    box-shadow: 0 0 0 3px var(--ring) inset;
}

/* Highlight current page by adding class="active" to the link */
nav ul li a.active{
    background: rgba(255,255,255,.18);
    color:#fff;
}

/* Hamburger menu toggle hidden by default */
.menu-toggle { display: none; }

.menu-icon {
    display: none;
    font-size: 1.8em;
    cursor: pointer;
    padding: 10px 20px;
    color: black;
    position: absolute;
    top: 10px;
    right: 20px;
    z-index: 1001;
}

/* ---------- Links & buttons ---------- */
a {
    color: var(--brand);
    text-decoration: none;
    transition: color 0.25s ease, box-shadow .25s ease;
}
a:hover { color: var(--brand-dark); }

.button {
    display: inline-block;
    padding: 10px 14px;
    color: #fff;
    background-color: var(--brand);
    border: none;
    border-radius: 10px;
    text-align: center;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    transition: background-color 0.25s ease, transform .05s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.button:hover { background-color: var(--brand-dark); }
.button:active{ transform: translateY(1px); }

/* ---------- Images & gallery ---------- */
img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    border: 1px solid #e5e7eb;       /* subtle frame */
}

/* Remove the heavy default border from generic images */
img:not(.custom-image):not(.custom-image2):not(.custom-image3){ border-width:1px }

/* Float helpers (if you still need them) */
img.float-right { float: right; margin-left: 15px; margin-bottom: 15px; }

/* Your custom image classes—cleaned and fixed typos */
.custom-image,
.custom-image2,
.custom-image3{
    max-width: 50%;
    height: auto;
    border-radius: 8px;
    border: 2px solid #333;
    display: inline-block;
    margin: 10px;
}
.custom-image{ float: right; }
.custom-image2{ float: right; }
.custom-image3{ /* no float; center by default */ }

/* FIX: margin-bottom typo (was using ';' as value) */
.custom-image2,
.custom-image3{ margin-bottom: 20px; }

/* Modern, tidy gallery */
.image-gallery {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0,1fr));
    align-items: start;
    justify-items: center;
    margin: var(--s4) 0;
}
.image-gallery img {
    width: 100%;
    aspect-ratio: 4 / 3;             /* consistent tiles */
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
}
.image-gallery figure { 
    margin: 0; width: 100%; 
}
.image-gallery figcaption {
    font-size: 0.9em;
    color: var(--muted);
    margin-top: 6px;
    text-align: center;
}

/* Keep galleries off the footer line */
.image-gallery-container {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0,1fr));
    margin-bottom: 24px;
}

/* ---------- Headings ---------- */
h2, h3 {
    color: var(--text);
    padding-bottom: 6px;
    border-bottom: 2px solid var(--brand);
}

h2 {
    font-size: clamp(1.4rem, 2.2vw, 1.8rem);
    margin-top: 28px;
}

h3 {
    font-size: clamp(1.15rem, 1.8vw, 1.4rem);
    margin-top: 20px;
}

/* ---------- Lists ---------- */
ul { padding-left: 20px; margin: 10px 0; }
li { margin-bottom: 6px; }

/* ---------- Footer ---------- */
footer {
    text-align: center;
    padding: 20px;
    background-color: #1f2937;
    color: #e5e7eb;
    font-size: 0.95em;
    border-top: 1px solid rgba(255,255,255,.08);
}
footer a { color: #9ac5ff; }
footer a:hover { color: #cfe1ff; }

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

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .image-gallery,
  .image-gallery-container{ grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    /* Hamburger icon shown */
    .menu-icon { display: block; }

    /* Hide the nav links initially */
    nav ul {
        display: none;
        flex-direction: column;
        background-color: #0b3b6e;
        position: absolute;
        top: 60px;
        right: 0;
        width: 100%;
        padding: 10px 0;
        z-index: 1000;
        text-align: center;
    }

    .menu-toggle:checked + .menu-icon + nav ul { display: flex; }

    nav ul li a {
        color: white;
        font-size: 1.1em;
        padding: 12px 0;
        border-radius: 0;
    }

    header { position: relative; }
}

/* ——— About page layout helpers ——— */
.about-grid{
  display:grid;
  grid-template-columns: 250px 1fr;
  gap: 24px;
  align-items: start;
  margin: 16px 0 24px;
}
.headshot{
  width: 180px;         /* smaller image */
  border-radius: 12px;
  margin: 0 auto;
}
@media (max-width: 820px){
  .about-grid{ grid-template-columns: 1fr; }
  .headshot{ width: 160px; }
}

/* ——— Home hero helpers ——— */
.home-hero{
  display:grid;
  grid-template-columns: minmax(0,1fr) 420px;
  gap: 24px;
  align-items: center;
  margin: 24px 0;
}
.tagline-chip{
  display:inline-block;
  padding:.3rem .6rem;
  border-radius:999px;
  border:1px solid var(--ring, rgba(0,122,204,.25));
  color: var(--muted, #6b7280);
  font-size:.95rem;
  margin-bottom:.6rem;
}
.hero-cta{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.5rem; }

/* ——— Quote callout used at bottom of pages ——— */
.quote-callout{
  margin-top:20px;
  padding:12px 16px;
  border-left:4px solid var(--brand, #007acc);
  background: var(--panel, #fff);
  border-radius:8px;
  color: var(--muted, #6b7280);
}

/* ——— Preferred image gallery (grid) ——— */
.image-gallery {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0,1fr));
  align-items: start;
  justify-items: center;
  margin: 24px 0;
}
.image-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}
.image-gallery figure { margin: 0; width: 100%; }
.image-gallery figcaption {
  font-size: 0.9em;
  color: var(--muted, #6b7280);
  margin-top: 6px;
  text-align: center;
}
@media (max-width: 900px){
  .home-hero{ grid-template-columns: 1fr; }
  .image-gallery{ grid-template-columns: 1fr; }
}

.socials{
  display:flex; gap:10px; margin-top:12px;
}
.socials a{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:999px;
  border:1px solid var(--ring, rgba(0,122,204,.25));
  color: var(--text, #1f2937); text-decoration:none;
}
.socials a:hover{ box-shadow: 0 0 0 3px var(--ring, rgba(0,122,204,.25)) inset; }

/* --- Research: alternating layout with consistent text width --- */
/* --- Research: alternating layout that keeps text wide --- */
.research-section{
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 32vw, 360px); /* text | media */
  gap: 20px;
  align-items: start;
}
.research-section .content{ grid-column: 1; min-width: 0; overflow-wrap: anywhere; }
.research-section .media{   grid-column: 2; }

/* Flipped rows: media | text (media stays narrow) */
.research-section.flip{
  grid-template-columns: clamp(280px, 32vw, 360px) minmax(0, 1fr);
}
.research-section.flip .content{ grid-column: 2; min-width: 0; overflow-wrap: anywhere; }
.research-section.flip .media{   grid-column: 1; }

/* Optional: shorter thumbnails on flipped rows */
.research-section.flip .media img{ aspect-ratio: 5 / 4; object-fit: cover; }

/* Kill any lingering 'order' styles from older CSS */
.research-section .content,
.research-section .media{ order: initial !important; }

/* Stack only on small screens */
@media (max-width: 720px){
  .research-section,
  .research-section.flip{ grid-template-columns: 1fr; }
  .research-section .content,
  .research-section .media,
  .research-section.flip .content,
  .research-section.flip .media{ grid-column: auto; }
}

/* Publications list */
.pub-year{ margin: 18px 0 8px; }

.pub-list{
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: grid;
  gap: 10px;
}
.pub-item{
  background: var(--panel, #fff);
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.03);
}
.pub-main{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
}
.pub-title{
  font-weight: 700;
  text-decoration: none;
}
.pub-title:hover{ text-decoration: underline; }
.pub-venue{ color: var(--muted, #6b7280); }
.pub-meta{
  margin-top: 6px;
  color: var(--muted, #6b7280);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.badge{
  display: inline-block;
  font-size: .85rem;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--ring, rgba(0,122,204,.25));
  color: var(--muted, #6b7280);
}
.badge-link{
  display: inline-block;
  font-size: .85rem;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--ring, rgba(0,122,204,.25));
  text-decoration: none;
}
.badge-link:hover{ box-shadow: 0 0 0 3px var(--ring, rgba(0,122,204,.25)) inset; }

.pub-updated{ color: var(--muted, #6b7280); margin-top: -6px; }

/* Talks page */
.talk-year{ margin: 18px 0 8px; }

.talk-item{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:12px 14px;
  box-shadow:0 2px 10px rgba(0,0,0,.03);
  margin-bottom:10px;
}

.talk-header{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.talk-title{ margin:0; line-height:1.2; }

.talk-type{
  display:inline-block;
  font-size:.8rem;
  padding:2px 8px;
  border-radius:999px;
  background:#eef2ff;
  border:1px solid #c7d2fe;
  color:#3730a3;
}

.talk-meta{ color:#6b7280; margin-top:4px; display:flex; flex-wrap:wrap; gap:6px; }
.talk-coauthors{ color:#4b5563; margin-top:6px; }
.talk-notes{ margin:6px 0 0; }

.talk-links{ margin-top:8px; display:flex; gap:8px; flex-wrap:wrap; }
.talk-links .badge-link{
  display:inline-block; font-size:.85rem; padding:2px 8px; border-radius:999px;
  border:1px solid rgba(0,122,204,.25); text-decoration:none;
}
.talk-links .badge-link:hover{ box-shadow:0 0 0 3px rgba(0,122,204,.15) inset; }

/* Talks: make year headings bold and keep tidy spacing */
.talk-year{
  font-weight: 700;
  margin: 18px 0 8px;
}

/* Code page cards */
/* --- Code page: improve card contrast & readability --- */
.project-card{
  background: #f8fafc;                 /* soft gray-blue so it pops on white */
  border: 1px solid #dbe2ea;            /* clearer edge than #e5e7eb */
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,.06); /* stronger shadow so it separates */
}

.project-card h3{ margin: 0 0 6px; line-height: 1.25; }
.project-card h3 a{ color: #0f172a; text-decoration: none; }
.project-card h3 a:hover{ text-decoration: underline; }

.project-card p{ 
  margin: 0; 
  color: #1f2937;                      /* darker body text */
  line-height: 1.55;
}

.project-meta{
  margin-top: 8px;
  display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center;
  color: #475569;                      /* clearer than the very light gray */
  font-size: .95rem;
}

.tag{
  display: inline-block; font-size: .8rem; padding: 2px 8px;
  border-radius: 999px;
  background: #eef2ff;                 /* subtle tint behind tags */
  border: 1px solid #c7d2fe;
  color: #3730a3;
}

.badge-link{
  display: inline-block; font-size: .85rem; padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(0,122,204,.25);
  background: #ffffff;
  text-decoration: none;
}
.badge-link:hover{ box-shadow: 0 0 0 3px rgba(0,122,204,.15) inset; }

/* Optional: gentle lift on hover so cards feel clickable */
.project-card:hover{
  transform: translateY(-1px);
  transition: box-shadow .2s ease, transform .2s ease;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

/* Optional dark-mode refinement (won’t affect light users) */
@media (prefers-color-scheme: dark){
  .project-card{
    background: #0b1220;
    border-color: #1e293b;
    box-shadow: 0 6px 18px rgba(0,0,0,.4);
  }
  .project-card h3 a,
  .project-card p,
  .project-meta{ color: #e6edf3; }
  .tag{
    background: rgba(56,139,253,.15);
    border-color: rgba(56,139,253,.35);
    color: #cfe3ff;
  }
  .badge-link{ color: #e6edf3; border-color: rgba(56,139,253,.35); background: transparent; }
}

/* Contact page layout */
.contact-grid{
  display: grid;
  grid-template-columns: minmax(0,1fr) 360px; /* text | card */
  gap: 20px;
  align-items: start;
  margin: 8px 0 20px;
}
@media (max-width: 820px){
  .contact-grid{ grid-template-columns: 1fr; }
}

/* Card */
.contact-card{
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.03);
}
.contact-row{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.contact-row .label{
  font-weight: 600;
  color: #374151;
}

/* Actions */
.contact-actions{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.button.button-secondary{
  background: transparent;
  color: #007acc;
  border: 1px solid #007acc;
}

/* Small muted text */
.muted{ color: #6b7280; }

/* Contact page layout */
/* Contact page layout */
.contact-grid{
  display: grid;
  grid-template-columns: minmax(0,1fr) 360px; /* text | card */
  gap: 20px;
  align-items: start;
  margin: 8px 0 20px;
}
@media (max-width: 820px){
  .contact-grid{ grid-template-columns: 1fr; }
}

/* Card */
.contact-card{
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.03);
}
.contact-row{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.contact-row .label{
  font-weight: 600;
  color: #374151;
}

/* Actions */
.contact-actions{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.button.button-secondary{
  background: transparent;
  color: #007acc;
  border: 1px solid #007acc;
}

/* Small muted text */
.muted{ color: #6b7280; }

/* Contact card: higher contrast background + clear icon buttons */
.contact-card{
  background: #f0f5ff;           /* soft indigo tint for contrast */
  border: 1px solid #c7d2fe;
}

.contact-card .label,
.contact-card a{ color: #0f172a; }     /* darker text/links on tinted bg */
.contact-card a:hover{ text-decoration: underline; }

/* Make the social icons stand out as circular buttons */
.contact-card .socials{
  display: flex; gap: 10px; margin-top: 10px;
}
.contact-card .socials a{
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: #ffffff;               /* white puck against the tinted card */
  border: 1px solid rgba(0,0,0,.08);
  color: #0f172a;                    /* SVGs use currentColor */
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  text-decoration: none;
}
.contact-card .socials a:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}

/* Optional: dark-mode refinement */
@media (prefers-color-scheme: dark){
  .contact-card{
    background: #0b1220;
    border-color: #1e293b;
  }
  .contact-card .label,
  .contact-card a{ color: #e6edf3; }
  .contact-card .socials a{
    background: #111827;
    border-color: #2b3443;
    color: #e6edf3;
  }
}