/* ---------- Design tokens: pastel impressionist palette ---------- */
:root {
  --color-bg: #fbf3e7;         /* warm linen canvas */
  --color-surface: #fffdf8;
  --color-ink: #3b3355;        /* muted indigo-plum, softer than black */
  --color-ink-soft: #675e7d;
  --color-muted: #9c8fa8;
  --color-accent: #5b56a3;     /* soft indigo-violet */
  --color-accent-soft: #e9e4f5;
  --color-lavender: #7c74a8;   /* Monet water-lily lavender */
  --color-sage: #6f9271;       /* garden sage green */
  --color-rose: #d98bbd;       /* Monet rose-pink, for nav accent */
  --color-navy: #3a3d6b;       /* Starry Night indigo */
  --color-border: #e9dcc8;
  --max-width: 1040px;
  --nav-max-width: 1220px;
  --radius: 14px;
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  max-width: 100%;
  overflow-x: hidden;
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--color-bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

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

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

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.2;
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 600; }
h2 {
  font-size: 1.55rem;
  margin-top: 2.4em;
  position: relative;
  display: inline-block;
}
h3 { font-size: 1.15rem; margin-top: 1.6em; color: var(--color-ink); font-weight: 600; }

p { margin: 0 0 1em; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---------- Header / nav ---------- */
.site-header {
  background: linear-gradient(120deg, #3a3d6b, #514a7d 60%, #6a5580);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 14px rgba(58, 61, 107, 0.25);
}

.nav-bar {
  max-width: var(--nav-max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  min-height: 64px;
}

.brand {
  flex: none;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  color: #fff;
  border: none;
}
.brand:hover { border: none; opacity: 0.85; }

.nav-toggle {
  display: none;
  flex: none;
  background: none;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 6px;
  color: #fff;
  font-size: 0.9rem;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
}

.nav-links {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1.1rem;
  list-style: none;
  margin: 0;
  padding: 0.2rem 0;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.nav-links li { flex: none; }

.nav-links a {
  display: inline-block;
  white-space: nowrap;
  color: rgba(255,255,255,0.82);
  font-size: 0.92rem;
  border: none;
  padding: 0.25rem 0;
}

.nav-links a:hover,
.nav-links a.active {
  color: #fff;
  border-bottom: 2px solid var(--color-rose);
}

/* Below this width the full horizontal menu can no longer fit without
   crowding or overflowing, so it collapses into a toggleable menu instead
   of being allowed to force page-level horizontal scroll. */
@media (max-width: 900px) {
  .nav-toggle { display: inline-block; }
  .nav-bar { flex-wrap: wrap; }
  .nav-links {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 0.7rem;
    padding: 0.6rem 0 1.2rem;
    overflow-x: visible;
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; width: 100%; padding: 0.4rem 0; }
}

/* ---------- Hero banners ---------- */
.hero {
  position: relative;
  background-size: cover;
  background-position: center;
  color: #fff;
  text-align: center;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 16, 35, 0.32), rgba(20, 16, 35, 0.4));
}

.hero .container {
  position: relative;
  z-index: 1;
}

.hero--home {
  padding: 4.5rem 0 3.5rem;
  background-image: url("../images/banner-home.jpg");
  /* The moon in this photo sits well below center (~62-87% down the
     frame). On narrow/short viewports the hero is taller relative to
     the image so background-size:cover crops the sides, not the top/
     bottom, and this has no effect. On wide desktop viewports the hero
     is much wider than it is tall, so cover crops vertically instead —
     a plain center position was cutting the moon off at the bottom.
     Shifting the vertical anchor down reveals the moon fully without
     changing the hero's height, padding, or any other layout rule. */
  background-position: center 85%;
}

.hero--page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 0;
}

.hero--tall {
  min-height: 100vh;
}

.hero--research    { background-image: url("../images/banner-research.jpg"); }
.hero--publications { background-image: url("../images/publications-sculpture.jpg?v=2"); }
.hero--talks        { background-image: url("../images/banner-talks.jpg"); background-position: center 25%; }
.hero--teaching     { background-image: url("../images/banner-teaching.jpg"); }
.hero--conferences  { background-image: url("../images/banner-conferences.jpg"); }
.hero--videos       { background-image: url("../images/banner-videos.jpg"); }

/* On phone-width screens the hero is much taller relative to its width
   than the sculpture photo, so background-size:cover crops the sides
   rather than the top/bottom. A center crop was losing the figure's
   face and raised arm off the left edge; shifting the anchor reveals
   them. Desktop/tablet crop this image height-wise instead, so they
   are unaffected. */
@media (max-width: 600px) {
  .hero--publications { background-position: 17% center; }
}

.hero h1 {
  color: #fff;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

.hero--home h1 { text-transform: uppercase; }

.hero p.tagline {
  color: rgba(255,255,255,0.9);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
}

/* ---------- Layout blocks ---------- */
main {
  padding: 3rem 0 4rem;
}

.bio-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

@media (max-width: 700px) {
  .bio-layout { grid-template-columns: 1fr; }
  .bio-photo { order: -1; max-width: 240px; margin: 0 auto; }
}

.bio-photo img {
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(58, 61, 107, 0.18);
  border: 6px solid var(--color-surface);
}

.contact-links {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.95rem;
}

.social-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-bottom: none !important;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--color-accent);
  transition: opacity 0.15s ease;
}

.social-icon-link:hover { opacity: 0.65; }

.social-icon-link svg {
  width: 20px;
  height: 20px;
  display: block;
}

.contact-social {
  align-items: center;
}
.contact-social .social-icon-link svg {
  width: 22px;
  height: 22px;
}

.link-button {
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--color-accent);
  cursor: pointer;
}

.link-button:hover,
.link-button:focus {
  border-bottom-color: var(--color-accent);
}

.site-footer .link-button {
  color: var(--color-muted);
  font-size: 0.85rem;
}

.site-footer .link-button:hover {
  color: var(--color-accent);
}

/* ---------- Contact dialog ---------- */
dialog.contact-dialog {
  border: none;
  border-radius: var(--radius);
  padding: 0;
  max-width: 380px;
  width: calc(100% - 2.5rem);
  box-shadow: 0 20px 50px rgba(58, 61, 107, 0.3);
  background: var(--color-surface);
}

dialog.contact-dialog::backdrop {
  background: rgba(58, 61, 107, 0.45);
}

.contact-dialog-inner {
  position: relative;
  padding: 2.2rem 1.8rem 1.8rem;
  text-align: center;
}

.contact-dialog-inner h2 {
  margin-top: 0;
  font-size: 1.4rem;
}

.contact-dialog-inner p {
  color: var(--color-ink-soft);
}

.contact-email a {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--color-accent);
}

.contact-social {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  font-size: 0.9rem;
}

.dialog-close {
  position: absolute;
  top: 0.6rem;
  right: 0.8rem;
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--color-muted);
  cursor: pointer;
  padding: 0.3rem;
}

.dialog-close:hover { color: var(--color-accent); }

.note {
  margin-top: 2.5rem;
  padding: 1rem 1.2rem;
  background: var(--color-accent-soft);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 6px 6px 0;
  font-size: 0.95rem;
  color: var(--color-ink-soft);
}

.cv-link {
  margin-top: 1.4rem;
  text-align: center;
}

.cv-link a {
  font-family: var(--font-serif);
  font-size: 0.95rem;
}

/* ---------- Swing (small playful detail) ---------- */
.swing-widget {
  margin: 2rem 0 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.swing-svg {
  width: 76px;
  height: auto;
  overflow: visible;
}

.swing-bar,
.swing-leg {
  stroke: var(--color-navy);
  stroke-width: 4;
  stroke-linecap: round;
  fill: none;
}

.swing-leg {
  stroke-width: 3;
  opacity: 0.55;
}

.swing-group {
  transform-box: view-box;
  transform-origin: 50px 10px;
}

.swing-rope {
  stroke: var(--color-muted);
  stroke-width: 2;
  stroke-linecap: round;
}

.swing-seat {
  fill: var(--color-accent);
}

.swing-caption {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.72rem;
  color: var(--color-muted);
  margin: 0;
  letter-spacing: 0.02em;
}

/* ---------- Lists / cards ---------- */
.entry-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.entry-list li {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--color-border);
}

.entry-list li:first-child { padding-top: 0; }

.entry-title { font-weight: 600; color: var(--color-ink); }

.entry-meta {
  display: block;
  color: var(--color-muted);
  font-size: 0.88rem;
  margin-top: 0.15rem;
}

.entry-links a {
  font-size: 0.85rem;
  margin-right: 0.9rem;
}

.tag {
  display: inline-block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  margin-right: 0.5rem;
  vertical-align: middle;
}

.tag.upcoming { background: #e3ecdd; color: var(--color-sage); }
.tag.speaker { background: #f7e1ec; color: #c15b8f; }

.section-intro {
  color: var(--color-ink-soft);
  max-width: 65ch;
}

.subgroup-heading {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  margin-top: 2.4rem;
  margin-bottom: 0.4rem;
}

.year-heading {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--color-lavender);
  margin-top: 2.2rem;
  margin-bottom: 0.4rem;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid var(--color-border);
}

.term-block {
  margin: 1.6rem 0;
}

.term-block h3 {
  margin-top: 0;
  margin-bottom: 0.3rem;
}

.term-block .institution {
  color: var(--color-muted);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.course-list {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
}

.course-list li {
  padding: 0.55rem 0;
  border-top: 1px dashed var(--color-border);
}
.course-list li:first-child { border-top: none; }

.role {
  display: block;
  color: var(--color-muted);
  font-size: 0.88rem;
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding: 2rem 0 3rem;
  color: var(--color-muted);
  font-size: 0.85rem;
  text-align: center;
}

.site-footer p { margin: 0.3em 0; }

/* ---------- Page footnotes ---------- */
.page-footnotes {
  border-top: 1px solid var(--color-border);
  padding: 1.6rem 0;
}

.page-footnotes p {
  font-size: 0.68rem;
  line-height: 1.6;
  font-style: italic;
  color: var(--color-muted);
  max-width: 60ch;
  margin: 0 0 0.5rem;
}

.page-footnotes p:last-child { margin-bottom: 0; }

.page-footnotes cite { font-style: italic; }

/* ---------- Photo gallery ---------- */
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  margin: 1.4rem 0 2rem;
}

.photo-gallery img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(58, 61, 107, 0.15);
}

@media (max-width: 700px) {
  .photo-gallery { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 440px) {
  .photo-gallery { grid-template-columns: 1fr; }
  .photo-gallery img { height: 220px; }
}

/* ---------- Single page photo ---------- */
.page-photo {
  margin: 1.8rem 0 2.2rem;
  text-align: center;
}

.page-photo img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 10px 26px rgba(58, 61, 107, 0.18);
}

.page-photo figcaption {
  margin-top: 0.6rem;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--color-muted);
}

/* ---------- Video embed ---------- */
.video-embed {
  margin: 1.6rem 0 2.2rem;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(58, 61, 107, 0.18);
}

.video-embed video {
  width: 100%;
  display: block;
  background: #000;
}

/* ---------- Moon phase widget ---------- */
.moon-widget {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin: 1.8rem 0 2.4rem;
  padding: 1.5rem 1.7rem;
  background: linear-gradient(135deg, #2b2748, #423c6b);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(43, 39, 72, 0.28);
}

.moon-disc {
  flex: none;
  width: 96px;
  height: 96px;
  filter: drop-shadow(0 0 14px rgba(246, 236, 217, 0.25));
}

.moon-disc svg { width: 100%; height: 100%; }

.moon-dark { fill: #1e1a33; }
.moon-lit { fill: #f6ecd9; }

.moon-info { min-width: 0; }

.moon-phase-name {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.2rem;
  color: #fff;
  margin: 0 0 0.6rem;
}

.moon-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.2rem 1.4rem;
}

.moon-stat {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.9);
}

.moon-stat span:first-child {
  color: rgba(255, 255, 255, 0.55);
}

.moon-location {
  margin: 0.7rem 0 0;
  font-size: 0.72rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 560px) {
  .moon-widget { flex-direction: column; text-align: center; }
  .moon-stats { grid-template-columns: 1fr 1fr; }
  .moon-stat { flex-direction: column; gap: 0; text-align: center; }
}