@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;600&family=Libre+Baskerville:wght@400;700&display=swap');

:root {
  --accent: #172b4d; /* deep navy */
  --accent-soft: #e9eef8;
  --ink: #0f1724;
  --muted: #5b6b72;
  --surface: #ffffff;
  --bg: #fbfbfb;
}

/* Base typography */
body {
  font-family: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: underline; }
a:hover { text-decoration: underline; }

/* Headings use a refined serif */
h1, h2, h3, h4, h5, h6, .navbar-brand {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  color: var(--ink);
  margin-top: 0.2rem;
  margin-bottom: 0.6rem;
}

h1 { font-size: clamp(1.8rem, 3.6vw, 3.2rem); letter-spacing: -0.5px; }
h2 { font-size: clamp(1.2rem, 2.2vw, 1.6rem); }

/* Minimal, elegant navbar */
.navbar {
  background: transparent;
  border-bottom: 1px solid rgba(15,23,36,0.06);
  padding: 0.6rem 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--bg);
}
.navbar a { color: var(--ink); font-weight: 500; font-size: 0.95rem; }
.navbar a:hover { color: var(--accent); }

/* Page containers */
.hero { padding: 2rem 2.4rem; background: transparent; border: none; box-shadow: none; }

.card-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; padding: 0; list-style: none; }
.card-list li { border: 1px solid rgba(15,23,36,0.06); border-radius: 6px; padding: 1rem; background: var(--surface); }

blockquote { border-left: 4px solid var(--accent); padding-left: 1rem; color: var(--muted); }

.footer { margin-top: 3rem; padding: 1.5rem 0; border-top: 1px solid rgba(15,23,36,0.06); color: var(--muted); }

/* Publication list styling - refined and typographic */
.publication-item { display: flex; gap: 1.25rem; margin-bottom: 2.25rem; align-items: flex-start; padding-bottom: 1.25rem; border-bottom: 1px solid rgba(15,23,36,0.04); }
.publication-item:last-child { border-bottom: none; }

.publication-image {
  position: relative;
  flex-shrink: 0;
  width: 160px;
  height: 140px;
  max-width: 160px;
  max-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 6px;
  box-sizing: border-box;
}

.publication-image img {
  width: 100%;
  height: 100%;
  max-width: 160px;
  max-height: 140px;
  object-fit: cover;
  display: block;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.publication-image img:hover {
  transform: scale(1.05);
}

.publication-content { flex: 1; }
.publication-content h3 { margin: 0 0 0.35rem 0; font-family: 'Playfair Display', serif; font-size: 1.05rem; }
.publication-content p { margin-bottom: 0.6rem; color: var(--muted); font-size: 0.96rem; }

/* Portrait image on bio page */
.column img { height: auto; border-radius: 4px; margin-bottom: 1.25rem; display: block; max-width: 100%; }
.column[style*="32%"] img { max-width: 100%; }

/* Floating portrait for text wrap */
.portrait-float {
  float: right;
  margin: 0 0 1.5rem 1.5rem;
  border-radius: 4px;
  max-width: 300px;
}

/* Banner / hero overlay */
/* Legacy banner-hero (removed). Keep harmless defaults in case assets remain. */
.banner-hero { display: none; }

/* Plain hero to replace SVG banner: centered serif headline + optional subtitle */
.hero-plain {
  background: linear-gradient(180deg, rgba(23,43,77,0.95), rgba(23,43,77,0.92));
  color: #fff;
  padding: 3.2rem 2rem;
  border-radius: 10px;
  margin: 0 0 2rem 0;
  text-align: left;
}
.hero-inner { max-width: 980px; margin: 0 auto; text-align: left; }
.hero-title { font-family: 'Playfair Display', serif; margin: 0 0 0.6rem 0; font-size: clamp(1.6rem, 4vw, 3rem); line-height: 1.05; }
.hero-sub { font-family: 'Libre Baskerville', serif; color: rgba(255,255,255,0.92); margin: 0 auto; max-width: 70ch; font-size: 1.05rem; }

/* Body text refinements so content fits the classy heading */
body { font-size: 17px; color: #10202b; }
p, li { color: #2e3b42; font-family: 'Libre Baskerville', serif; font-size: 1.02rem; }

/* Reduce contrast on long-form text for a softer, more elegant feel */
main { color: #253136; }

/* Hide the default Quarto title block so only the banner heading shows */
.quarto-title-block { display: none; }

/* Narrow content for better reading */
main { max-width: 960px; margin: 0 auto; padding: 1.2rem; }

/* Utility smaller caps for nav-like labels */
.nav-small { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }

/* Keep publication thumbnails constrained even when Quarto wraps images in <p>. */
.publication-image p {
  margin: 0;
  width: 100%;
  height: 100%;
}

.publication-image p img {
  width: 100%;
  height: 100%;
  max-width: 160px;
  max-height: 140px;
  object-fit: cover;
  display: block;
}

/* Lightbox styling for clickable images */
.lightbox {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}
.lightbox.active {
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-content {
  max-width: 90%;
  max-height: 90%;
  position: relative;
}
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
}
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 40px;
  color: white;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  z-index: 2001;
}
.lightbox-close:hover {
  color: #ccc;
}

@media (max-width: 720px) {
  .publication-item { flex-direction: column; }
  .publication-image {
    width: 100%;
    max-width: 100%;
    height: 220px;
    max-height: 220px;
    box-sizing: border-box;
  }
  .publication-image p img {
    max-width: 100%;
    max-height: 220px;
  }
  .publication-image img {
    max-width: 100%;
    max-height: 220px;
  }
  .portrait-float {
    float: none;
    display: block;
    width: min(65vw, 240px);
    max-width: 100%;
    margin: 0 auto 1rem auto;
  }
  .column img { width: 120px; }
  .banner-heading { font-size: 1.6rem; }
}