/* ==========================================================================
   Academic personal site — shared stylesheet
   Edit the variables below to change colors, fonts, and spacing site-wide.
   ========================================================================== */

:root {
  /* --- Colors (light) --- */
  --bg:            #ffffff;
  --bg-soft:       #f7f7f5;
  --text:          #1a1a1a;
  --text-muted:    #5c5c5c;
  --text-faint:    #8a8a8a;
  --rule:          #e4e4e0;
  --accent:        #7a1f2b;   /* muted crimson — nods to Penn red. Change freely. */
  --accent-soft:   #fdf3f4;

  /* --- Typography --- */
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
                Georgia, "Times New Roman", serif;
  --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
                "Helvetica Neue", Arial, sans-serif;
  --font-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* --- Layout --- */
  --measure: 46rem;      /* max content width */
  --gutter: 1.5rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #14140f;
    --bg-soft:     #1d1d18;
    --text:        #ececE6;
    --text-muted:  #a8a8a0;
    --text-faint:  #7d7d76;
    --rule:        #2f2f28;
    --accent:      #e88b96;
    --accent-soft: #241a1c;
  }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rule);
}

.nav__inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0.75rem var(--gutter);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.nav__name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}

.nav__links {
  display: flex;
  gap: 1.125rem;
  flex-wrap: wrap;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

.nav__links a {
  color: var(--text-muted);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.nav__links a:hover,
.nav__links a:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* On narrow screens keep the nav to one line and let it scroll sideways,
   rather than wrapping onto two rows and eating the top of the screen. */
@media (max-width: 40rem) {
  .nav__inner { flex-wrap: nowrap; align-items: center; gap: 0.875rem; }
  .nav__name { font-size: 0.875rem; }
  .nav__links {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 0.9375rem;
    padding-bottom: 1px;
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  }
  .nav__links::-webkit-scrollbar { display: none; }
  .nav__links a { white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   Header / hero
   -------------------------------------------------------------------------- */

.hero {
  padding: 4rem 0 2.75rem;
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.hero__text { flex: 1 1 auto; min-width: 0; }

.hero h1 {
  font-size: clamp(2rem, 5vw, 2.75rem);
  line-height: 1.1;
  margin: 0 0 0.5rem;
  letter-spacing: -0.015em;
  font-weight: 600;
}

.hero__role {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--text-muted);
  margin: 0 0 1.25rem;
  line-height: 1.5;
}

.hero__role strong { color: var(--text); font-weight: 600; }

/* Avatar: swap the <div class="avatar"> for
   <img class="avatar" src="photo.jpg" alt="Your Name"> when you have a photo. */
.avatar {
  flex: 0 0 auto;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  display: grid;
  place-items: center;
  font-family: var(--font-sans);
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-faint);
}

@media (max-width: 34rem) {
  .hero { flex-direction: column-reverse; align-items: flex-start; gap: 1.5rem; padding-top: 2.5rem; }
  .avatar { width: 96px; height: 96px; font-size: 1.5rem; }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

section { padding: 2.5rem 0; border-top: 1px solid var(--rule); }
section:first-of-type { border-top: 0; }

h2 {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  margin: 0 0 1.5rem;
}

h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 0.375rem;
  line-height: 1.35;
}

p { margin: 0 0 1.125rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

strong { font-weight: 600; }

/* --------------------------------------------------------------------------
   News list
   -------------------------------------------------------------------------- */

.news { list-style: none; margin: 0; padding: 0; }

.news li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 1rem;
  padding: 0.625rem 0;
  border-bottom: 1px dotted var(--rule);
  font-size: 0.9375rem;
}

.news li:last-child { border-bottom: 0; }

.news time {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--text-faint);
  letter-spacing: 0.02em;
  padding-top: 0.2rem;
  white-space: nowrap;
}

@media (max-width: 34rem) {
  .news li { grid-template-columns: 1fr; gap: 0.125rem; }
  .news time { padding-top: 0; }
}

/* --------------------------------------------------------------------------
   Research themes
   -------------------------------------------------------------------------- */

.themes { display: grid; gap: 1.75rem; margin-top: 0.5rem; }

.theme__label {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  display: block;
  margin-bottom: 0.375rem;
}

/* --------------------------------------------------------------------------
   Publications
   -------------------------------------------------------------------------- */

.pubs { list-style: none; margin: 0; padding: 0; counter-reset: pub; }

.pubs li {
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9688rem;
  line-height: 1.55;
}

.pubs li:last-child { border-bottom: 0; }

.pubs .authors { color: var(--text-muted); }
.pubs .me { color: var(--text); font-weight: 600; }
.pubs .title { display: block; margin: 0.15rem 0; font-weight: 600; }
.pubs .venue { font-style: italic; color: var(--text-muted); }

.pub-links {
  margin-top: 0.4rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

.pub-links a {
  color: var(--text-muted);
  text-decoration: none;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.1rem 0.45rem;
  transition: all 0.15s ease;
}

.pub-links a:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.pub-group {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 1.75rem 0 0.25rem;
}
.pub-group:first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   Teaching
   -------------------------------------------------------------------------- */

.teaching { list-style: none; margin: 0; padding: 0; }

.teaching li {
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
}
.teaching li:last-child { border-bottom: 0; }

.teaching .meta {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--text-faint);
  letter-spacing: 0.02em;
  display: block;
  margin-top: 0.2rem;
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 0.5rem 1rem;
  font-size: 0.9375rem;
  align-items: baseline;
}

.contact-grid dt {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

.contact-grid dd { margin: 0; }

@media (max-width: 34rem) {
  .contact-grid { grid-template-columns: 1fr; gap: 0.1rem; }
  .contact-grid dd { margin-bottom: 0.75rem; }
}

/* --------------------------------------------------------------------------
   Blog
   -------------------------------------------------------------------------- */

.post-list { list-style: none; margin: 0; padding: 0; }

.post-list li {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--rule);
}
.post-list li:last-child { border-bottom: 0; }

.post-list h3 { margin-bottom: 0.25rem; }
.post-list h3 a { color: var(--text); text-decoration: none; }
.post-list h3 a:hover { color: var(--accent); text-decoration: underline; }

.post-list time,
.post-meta {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.35rem;
}

.post-list p { font-size: 0.9375rem; color: var(--text-muted); margin: 0.35rem 0 0; }

/* Article body (blog posts) */
.article { padding: 3rem 0 1rem; }
.article h1 {
  font-size: clamp(1.75rem, 4.5vw, 2.375rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 0.5rem;
  font-weight: 600;
}
.article h2 {
  font-family: var(--font-serif);
  font-size: 1.3125rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
  margin: 2.25rem 0 0.75rem;
}
.article blockquote {
  margin: 1.5rem 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 2px solid var(--accent);
  color: var(--text-muted);
  font-style: italic;
}
.article code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--bg-soft);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}
.article ul, .article ol { padding-left: 1.25rem; margin: 0 0 1.125rem; }
.article li { margin-bottom: 0.4rem; }

.back-link {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--text-muted);
  text-decoration: none;
  margin-bottom: 2rem;
}
.back-link:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--rule);
  margin-top: 3rem;
  padding: 2rem 0 3rem;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--text-faint);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer a { color: var(--text-muted); text-decoration: none; }
.footer a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.muted { color: var(--text-muted); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 100;
  font-family: var(--font-sans);
  font-size: 0.875rem;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

@media print {
  .nav, .footer, .skip-link { display: none; }
  body { font-size: 11pt; }
  section { break-inside: avoid; }
}