:root {
  --bg: #f8f7f1;
  --surface: #ffffff;
  --ink: #27312a;
  --muted: #5e6a60;
  --accent: #5f7a55;        /* sage green */
  --accent-dark: #455a3d;
  --accent-soft: #e5ebdd;
  --sage: #a4b497;
  --sage-soft: #ede8dc;
  --line: #e3e5d9;
  --radius: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 1.08rem;
  line-height: 1.65;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, .site-name {
  font-family: "Playfair Display", Georgia, serif;
}

a { color: inherit; }

/* ---------- Header & navigation ---------- */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  max-width: 68rem;
  width: 100%;
  margin: 0 auto;
  padding: 1.4rem 1.5rem;
}

.site-name {
  font-weight: 600;
  font-size: 1.2rem;
  text-decoration: none;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.site-nav a {
  color: var(--muted);
  font-size: 0.95rem;
  text-decoration: none;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  transition: background 0.15s, color 0.15s;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--ink);
  background: var(--accent-soft);
}

.site-nav a[aria-current="page"] {
  color: var(--accent-dark);
  background: var(--accent-soft);
  font-weight: 500;
}

/* ---------- Homepage ---------- */
.home {
  flex: 1;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  align-items: center;
  gap: 4rem;
  max-width: 68rem;
  width: 100%;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}

.home-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--accent-dark);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 0.35rem 1rem;
  margin-bottom: 1.5rem;
}

.badge::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
}

.home h1 {
  font-weight: 600;
  font-size: clamp(2.4rem, 5.2vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin-bottom: 1.1rem;
}

.role {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--accent-dark);
  margin-bottom: 0.35rem;
}

.affiliation {
  font-size: 1.15rem;
  color: var(--muted);
  margin-bottom: 2rem;
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

.email-btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  padding: 0.8rem 1.7rem;
  border-radius: 999px;
  box-shadow: 0 6px 16px -8px rgba(95, 122, 85, 0.7);
  transition: background 0.15s, transform 0.15s;
}

.email-btn:hover,
.email-btn:focus-visible {
  background: var(--accent-dark);
  transform: translateY(-1px);
}

.profiles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.profiles a {
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0.55rem 1.1rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  transition: border-color 0.15s, color 0.15s;
}

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

/* Photo (scrapbook style: square print, washi tape, slightly askew) */
.photo {
  justify-self: center;
  width: 100%;
  max-width: 20rem;
  padding: 1.5rem 0.5rem;
}

.photo-frame {
  position: relative;
  background: #fffdf8;
  padding: 0.9rem 0.9rem 2.6rem;
  transform: rotate(-3deg);
  box-shadow:
    0 1px 2px rgba(39, 49, 42, 0.12),
    0 12px 28px -10px rgba(39, 49, 42, 0.35);
  transition: transform 0.3s ease;
}

.photo-frame:hover {
  transform: rotate(-1.5deg) scale(1.01);
}

.photo img,
.photo .photo-placeholder {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.photo-placeholder {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-style: italic;
}

/* Washi tape strips with torn ends */
.tape {
  position: absolute;
  top: -1.25rem;
  left: 50%;
  width: 10rem;
  height: 2.4rem;
  transform: translateX(-50%) rotate(5deg);
  z-index: 2;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.22) 0 6px,
      rgba(255, 255, 255, 0) 6px 12px
    ),
    #e5ebdd;
  box-shadow: 0 1px 3px rgba(39, 49, 42, 0.18);
  clip-path: polygon(
    0% 8%, 4% 0%, 8% 10%, 12% 2%, 16% 6%, 100% 0%,
    96% 14%, 100% 30%, 95% 48%, 100% 66%, 96% 84%, 100% 100%,
    88% 92%, 84% 100%, 0% 100%,
    4% 84%, 0% 66%, 5% 48%, 0% 30%, 4% 14%
  );
}

/* ---------- Inner pages ---------- */
.page {
  flex: 1;
  max-width: 46rem;
  width: 100%;
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
}

.page h1 {
  font-weight: 600;
  font-size: clamp(2.2rem, 5vw, 3rem);
  line-height: 1.1;
  margin-bottom: 2.5rem;
}

.page h1::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 4px;
  border-radius: 4px;
  background: var(--accent);
  margin-top: 1rem;
}

.page section {
  margin-bottom: 3.25rem;
}

.page h2 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  font-size: 1.45rem;
  margin-bottom: 1.1rem;
}

.page h2::before {
  content: "";
  flex-shrink: 0;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--sage);
}

.org {
  color: var(--muted);
  font-size: 0.95rem;
  margin: -0.5rem 0 1rem;
}

/* Citations (APA hanging indent) */
.citations {
  list-style: none;
}

.citations li {
  padding-left: 1.75rem;
  text-indent: -1.75rem;
  margin-bottom: 1.1rem;
  font-size: 0.98rem;
}

.citations strong {
  font-weight: 700;
  color: var(--accent-dark);
}

.tag {
  display: inline-block;
  text-indent: 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--accent-dark);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 0.1rem 0.65rem;
  margin-left: 0.35rem;
  vertical-align: 0.1em;
}

/* Title + date entries, as soft cards */
.entries {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.entries li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}

.entries.compact li {
  padding: 0.7rem 1.25rem;
}

.entry-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
}

.entry-title {
  font-weight: 500;
}

.entry-date {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}

.entries p {
  color: var(--muted);
  font-size: 0.95rem;
  margin-top: 0.2rem;
}

/* Teaching ratings */
.ratings {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.9rem;
}

.rating {
  display: flex;
  flex-direction: column;
  background: var(--accent-soft);
  border-radius: var(--radius);
  padding: 0.85rem 1.25rem;
  min-width: 9rem;
}

.rating-num {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: 1.8rem;
  line-height: 1.1;
  color: var(--accent-dark);
}

.rating-num small {
  font-size: 0.95rem;
  color: var(--muted);
  font-weight: 400;
}

.rating-label {
  font-size: 0.85rem;
  color: var(--muted);
}

.entries p.note {
  font-size: 0.85rem;
  margin-top: 0.6rem;
}

/* Skills */
.skills {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 1.5rem;
}

.skills dt { font-weight: 500; }
.skills dd { color: var(--muted); }

/* Placeholder blocks (temporary, until text is written) */
.placeholder-box {
  background: var(--surface);
  border: 1.5px dashed #cdd6c3;
  border-radius: var(--radius);
  padding: 1.5rem;
  min-height: 6rem;
  color: var(--muted);
  font-style: italic;
}

.intro .placeholder-box {
  background: var(--accent-soft);
  border-color: transparent;
}

/* ---------- About page (scannable layout) ---------- */
.page.about { max-width: 52rem; }

.todo {
  background: #fff6d6;
  color: #7a5c00;
  border-radius: 4px;
  padding: 0 0.25rem;
}

.about-intro {
  display: grid;
  grid-template-columns: 1fr 11rem;
  gap: 2.5rem;
  align-items: center;
}

.lead {
  font-size: 1.3rem;
  line-height: 1.6;
}

.lead-first {
  font-weight: 700;
}

.lead-first em {
  font-style: normal;
  color: var(--accent-dark);
}

.mini-photo {
  position: relative;
  background: #fffdf8;
  padding: 0.6rem 0.6rem 1.6rem;
  transform: rotate(3deg);
  box-shadow: 0 1px 2px rgba(39, 49, 42, 0.12), 0 10px 22px -10px rgba(39, 49, 42, 0.35);
}

.mini-photo .photo-placeholder,
.snap .photo-placeholder,
.mini-photo img,
.snap img {
  display: flex;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.mini-photo .tape {
  width: 6rem;
  height: 1.6rem;
  top: -0.9rem;
}

/* Research theme flip cards */
.themes {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
}

.flip {
  display: block;
  height: 10.5rem;
  perspective: 900px;
  text-decoration: none;
  border-radius: var(--radius);
}

.flip-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.flip:hover .flip-inner,
.flip:focus-visible .flip-inner {
  transform: rotateY(180deg);
}

.flip-front,
.flip-back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 1rem;
  text-align: center;
  border-radius: var(--radius);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.flip-front {
  background: var(--accent-soft);
}

.flip-back {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.4;
  transform: rotateY(180deg);
}

.theme-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
}

.theme-icon svg {
  width: 2.4rem;
  height: 2.4rem;
}

.theme-icon svg path[d$="h.01"] {
  stroke-width: 2.6;
}

.theme-title {
  font-weight: 700;
  color: var(--accent-dark);
  font-size: 1.05rem;
  line-height: 1.3;
  min-height: 2.6em;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.flip-front { justify-content: flex-start; padding-top: 1.4rem; }

@media (prefers-reduced-motion: reduce) {
  .flip-inner { transition: none; }
}

/* Method tags: three rows, shades of green */
.tag-rows {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.tags li {
  border-radius: 999px;
  padding: 0.45rem 1.1rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.tags .g1, .tags .g2 { background: #d3dfc8; color: #27312a; }
.tags .g3, .tags .g4 { background: #a4b897; color: #1f2a22; }
.tags .g5, .tags .g6, .tags .g7, .tags .g8 { background: #4f6847; color: #fff; }

/* Education timeline */
.timeline {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  position: relative;
}

/* connecting line runs between the first and last dot centres */
.timeline::before {
  content: "";
  position: absolute;
  top: 4.45rem;
  left: calc(100% / 6);
  right: calc(100% / 6);
  height: 2px;
  background: var(--accent);
  opacity: 0.45;
}

.timeline li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.2rem;
}

.tl-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.1rem;
  height: 3.1rem;
  margin-bottom: 0.45rem;
  color: var(--accent);
}

.tl-icon svg {
  width: 100%;
  height: 100%;
}

.tl-icon svg path[d$="h.01"] { stroke-width: 2.4; }


.tl-dot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  margin-bottom: 0.6rem;
}

.tl-done .tl-dot {
  background: var(--accent);
  color: #fff;
}

.tl-done .tl-dot svg {
  width: 1.05rem;
  height: 1.05rem;
}

.tl-current .tl-dot {
  background: var(--bg);
  border: 3px solid var(--accent);
  box-shadow: 0 0 0 5px var(--accent-soft);
}

.tl-current .tl-dot::after {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--accent);
}

.tl-year {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--accent-dark);
  line-height: 1.2;
}

.tl-degree { font-weight: 600; line-height: 1.35; max-width: 15rem; }
.tl-place { color: var(--muted); font-size: 0.92rem; line-height: 1.45; }

/* Outside the lab snapshots */
.snapshots {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
  padding: 0.5rem 0.5rem 0;
}

.snapshots li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.snap {
  width: 100%;
  background: #fffdf8;
  padding: 0.55rem 0.55rem 1.5rem;
  box-shadow: 0 1px 2px rgba(39, 49, 42, 0.12), 0 10px 22px -10px rgba(39, 49, 42, 0.35);
  transition: transform 0.3s ease;
}

.snapshots li:nth-child(1) .snap { transform: rotate(-3deg); }
.snapshots li:nth-child(2) .snap { transform: rotate(2deg); }
.snapshots li:nth-child(3) .snap { transform: rotate(-1.5deg); }
.snapshots li .snap:hover { transform: rotate(0) scale(1.03); }

.snap-caption {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.4;
  text-align: center;
  color: var(--muted);
  max-width: 15rem;
}

@media (max-width: 760px) {
  .about-intro { grid-template-columns: 1fr; }
  .mini-photo { max-width: 10rem; order: -1; }
  .themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flip { height: 9.5rem; }
  .timeline { grid-template-columns: 1fr; gap: 1.5rem; }
  .timeline::before { top: 0.9rem; bottom: 0.9rem; left: 0.9rem; right: auto; width: 2px; height: auto; }
  .timeline li { display: grid; grid-template-columns: 1.8rem 1fr; column-gap: 1rem; align-items: start; text-align: left; }
  .timeline li > :not(.tl-dot) { grid-column: 2; }
  .tl-dot { grid-row: 1 / span 4; margin-bottom: 0; }
  .tl-icon { width: 1.8rem; height: 1.8rem; margin-bottom: 0.1rem; }
  .snapshots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Research page ---------- */
.theme-groups {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.theme-group { scroll-margin-top: 1.5rem; }
.themes li { scroll-margin-top: 6rem; }

.theme-group h3 {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent-dark);
  margin-bottom: 0.7rem;
}

.theme-icon.sm { width: 2.4rem; height: 2.4rem; }
.theme-icon.sm svg { width: 1.45rem; height: 1.45rem; }

.project {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 0;
  padding: 1rem 1.25rem;
  margin-bottom: 0.6rem;
}

.project-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.25rem;
}

.project h4 { font-size: 1.05rem; font-weight: 700; }

.status {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-dark);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
}

.project p { color: var(--muted); font-size: 0.97rem; }

.mini-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.mini-tags li {
  font-size: 0.8rem;
  font-weight: 600;
  background: #d3dfc8;
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
}

.datasets {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.datasets li {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  background: var(--accent-soft);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
}

.ds-name { font-weight: 700; color: var(--accent-dark); line-height: 1.35; font-size: 1.02rem; }

.ds-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1rem;
  margin-top: 0.4rem;
  font-size: 0.92rem;
  align-items: center;
}
.ds-facts dt { color: var(--muted); }
.ds-facts dd { font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }

.ds-more {
  margin-left: auto;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent-dark);
  text-decoration: none;
  white-space: nowrap;
}
.ds-more span { display: inline-block; transition: transform 0.2s; }
.ds-more:hover, .ds-more:focus-visible { text-decoration: underline; }
.ds-more:hover span { transform: translateX(3px); }
.ds-type, .ds-focus {
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.1rem 0.65rem;
}
.ds-type { background: var(--surface); color: var(--accent-dark); }
.ds-focus { background: var(--accent); color: #fff; }

@media (max-width: 560px) { .datasets { grid-template-columns: 1fr; } }
.ds-desc { color: var(--muted); font-size: 0.93rem; align-self: flex-start; }
.ds-link { font-weight: 600; font-size: 0.9rem; color: var(--accent-dark); text-decoration: none; align-self: flex-start; margin-top: 0.3rem; }

.lab-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
}

.lab-card { flex-wrap: nowrap; }
.lab-text { display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; }
.lab-text .email-btn { margin-top: 0.2rem; }
.lab-text .lab-pi { margin-top: -0.75rem; }
.lab-logo { order: 2; flex-shrink: 0; display: block; }
.lab-logo img { display: block; max-width: 7rem; max-height: 7rem; width: auto; height: auto; }
.lab-name { font-weight: 700; font-size: 1.1rem; }
@media (max-width: 560px) {
  .lab-card { flex-wrap: wrap; }
  .lab-logo { order: 0; }
}
.lab-pi { color: var(--muted); font-size: 0.95rem; }

.more summary {
  display: inline-flex;
  cursor: pointer;
  font-weight: 600;
  color: var(--accent-dark);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 0.5rem 1.2rem;
  list-style: none;
  margin: 0.25rem 0 1.1rem;
}

.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: " ↓"; margin-left: 0.35rem; }
.more[open] summary::after { content: " ↑"; }

.section-intro { color: var(--muted); margin: -0.25rem 0 1.1rem; }

/* Current Work: featured first-author projects */
.features { display: flex; flex-direction: column; }
.feature + .anchor, .feature { margin-bottom: 0; }
.features .feature { margin-bottom: 1rem; }
.anchor { display: block; scroll-margin-top: 1.5rem; }

.feature {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.2s, box-shadow 0.25s, transform 0.25s;
}
.feature:hover { border-color: var(--sage); transform: translateY(-2px); box-shadow: 0 10px 24px -16px rgba(39, 49, 42, 0.5); }
.feature[open] { border-color: var(--accent); transform: none; }

.feature summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.3rem 4rem 1.3rem 1.5rem;
}
.feature summary::-webkit-details-marker { display: none; }
.feature summary::after {
  content: "+";
  position: absolute;
  right: 1.25rem;
  top: 1.25rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s, background 0.25s, color 0.25s;
}
.feature:hover summary::after { background: var(--accent); color: #fff; }
.feature[open] summary::after { transform: rotate(45deg); background: var(--accent); color: #fff; }

.feature-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.feature-tags a {
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.feature-tags a:hover,
.feature-tags a:focus-visible {
  background: var(--accent);
  color: #fff;
}
.feature-tags span,
.feature-tags a {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--accent-dark);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 0.12rem 0.65rem;
}
.feature-title {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.3;
}
.feature-line { color: var(--muted); align-self: flex-start; }
.feature-status { font-size: 0.88rem; color: var(--accent-dark); font-weight: 600; }

.feature-body {
  border-top: 1px solid var(--line);
  padding: 1.1rem 1.5rem 1.4rem;
}
.feature-body dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1.25rem;
  margin-bottom: 1rem;
}
.feature-body dt { font-weight: 600; color: var(--accent-dark); }
.feature-body dd { justify-self: start; }

.outputs { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.outputs li {
  font-size: 0.9rem;
  color: var(--muted);
  padding-left: 1rem;
  border-left: 3px solid var(--accent-soft);
}
.outputs strong { color: var(--accent-dark); }

/* ---------- Teaching page ---------- */
.page.teaching { max-width: 52rem; }
.philosophy .lead { align-self: flex-start; }
.philosophy .lead strong { font-weight: 700; color: var(--accent-dark); }

.course summary { padding-bottom: 1.5rem; }
.course-ratings { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.6rem; }
.big-rating {
  display: flex;
  flex-direction: column;
  background: var(--accent-soft);
  border-radius: var(--radius);
  padding: 0.9rem 1.3rem;
  min-width: 9.5rem;
}
.big-rating .rating-num { font-size: 2.3rem; }
.big-rating .rating-num small { font-size: 1.3rem; font-weight: 600; color: var(--accent-dark); margin-left: 0.1rem; }
.big-rating.plain { background: var(--bg); }

.student-quote {
  margin-top: 0.4rem;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: 1.15rem;
  color: var(--accent-dark);
  border-left: 3px solid var(--accent);
  padding: 0.2rem 0 0.2rem 1rem;
  display: inline-block;
}

.ta-ratings { margin: 0 0 0.4rem; }
.ta-ratings .big-rating.plain { background: var(--surface); border: 1px solid var(--line); }
.ta-note { margin: 0 0 1.4rem; }
.ta-groups { display: flex; flex-direction: column; gap: 1.1rem; }
.ta-group h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent-dark);
  margin-bottom: 0.5rem;
}
.tags .yr { font-weight: 400; opacity: 0.8; margin-left: 0.35rem; }

.mini-cards {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.mini-cards li {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
}
.mini-cards li.mini-focus { background: var(--accent-soft); border-color: transparent; }
.mini-kicker { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); align-self: flex-start; }
.mini-title { font-family: "Playfair Display", Georgia, serif; font-weight: 600; font-size: 1.15rem; line-height: 1.3; align-self: flex-start; }
.mini-sub { color: var(--muted); font-size: 0.93rem; align-self: flex-start; }

@media (max-width: 760px) {
  .mini-cards { grid-template-columns: 1fr; }
}

/* Instructor evaluation scale chart */
.open-card:hover { transform: none; box-shadow: none; border-color: var(--line); }
.course-head { display: flex; flex-direction: column; gap: 0.45rem; padding: 1.3rem 1.5rem 1.4rem; }

.scale-head, .scale-row {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 3rem;
  column-gap: 1rem;
  row-gap: 0;
  align-items: center;
}
.scale-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.3rem;
}
.scale-chart { list-style: none; display: flex; flex-direction: column; }
.scale-row {
  position: relative;
  padding: 0.55rem 0.5rem;
  margin: 0 -0.5rem;
  border-radius: 8px;
  transition: background 0.2s;
  outline: none;
}
.scale-row:hover, .scale-row:focus-visible { background: var(--accent-soft); }
.scale-label { font-size: 0.93rem; line-height: 1.35; }
.scale-track {
  position: relative;
  height: 0.5rem;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent calc(25% - 1px), #fff calc(25% - 1px), #fff calc(25% + 1px), transparent calc(25% + 1px),
      transparent calc(50% - 1px), #fff calc(50% - 1px), #fff calc(50% + 1px), transparent calc(50% + 1px),
      transparent calc(75% - 1px), #fff calc(75% - 1px), #fff calc(75% + 1px), transparent calc(75% + 1px)),
    var(--line);
}
.scale-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--p);
  border-radius: 999px;
  background: var(--sage);
  transform-origin: left;
  animation: scale-grow 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.scale-dot {
  position: absolute; top: 50%;
  left: var(--p);
  width: 1.05rem; height: 1.05rem;
  border-radius: 50%;
  background: var(--accent-dark);
  border: 3px solid #fff;
  box-shadow: 0 1px 3px rgba(39, 49, 42, 0.35);
  transform: translate(-50%, -50%);
  animation: dot-in 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.scale-val { font-weight: 700; color: var(--accent-dark); text-align: right; font-variant-numeric: tabular-nums; }
.scale-tip {
  grid-column: 1 / -1;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent-dark);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  transition: max-height 0.2s, opacity 0.2s, margin 0.2s;
}
.scale-row:hover .scale-tip, .scale-row:focus-visible .scale-tip { max-height: 2rem; opacity: 1; margin-top: 0.3rem; }
.scale-note { font-size: 0.85rem; color: var(--muted); margin: 0.8rem 0 1rem; }

@keyframes scale-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes dot-in { from { left: 0; opacity: 0; } to { left: var(--p); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .scale-fill, .scale-dot { animation: none; } }
@media (max-width: 560px) {
  .scale-head { display: none; }
  .scale-row { grid-template-columns: 1fr 3rem; row-gap: 0.4rem; }
  .scale-tip { max-height: none; opacity: 1; margin-top: -0.2rem; font-weight: 400; color: var(--muted); }
  .scale-label { grid-column: 1 / -1; }
}

.quotes {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
.quotes li {
  position: relative;
  background: var(--accent-soft);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  border-left: 3px solid var(--accent);
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--accent-dark);
}
.quotes-note { margin-top: 0.5rem; margin-bottom: 0; }
@media (max-width: 760px) { .quotes { grid-template-columns: 1fr; } }

/* Homepage divider + work link */
.home-divider {
  align-self: stretch;
  max-width: 34rem;
  border: 0;
  height: 2px;
  background: var(--accent);
  margin: 2.25rem 0 1.75rem;
}

.work-bubble {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 600;
  text-decoration: none;
  padding: 0.55rem 0.6rem 0.55rem 1.1rem;
  border-radius: 999px;
  animation: bubble-float 4s ease-in-out infinite;
  transition: color 0.3s ease, box-shadow 0.3s ease;
}

/* Sage fill that sweeps in from the left on hover */
.work-bubble::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Soft shimmer that passes across every few seconds */
.work-bubble::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 30%;
  z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  transform: skewX(-20deg);
  animation: bubble-shimmer 5s ease-in-out infinite;
}

.pulse {
  position: relative;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent);
  animation: bubble-pulse 2s ease-out infinite;
}

.work-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  transition: transform 0.35s ease, background 0.3s ease, color 0.3s ease;
}

.work-bubble:hover,
.work-bubble:focus-visible {
  color: #fff;
  box-shadow: 0 10px 22px -10px rgba(69, 90, 61, 0.65);
  animation-play-state: paused;
}

.work-bubble:hover::before,
.work-bubble:focus-visible::before {
  transform: scaleX(1);
}

.work-bubble:hover .pulse,
.work-bubble:hover .pulse::after,
.work-bubble:focus-visible .pulse,
.work-bubble:focus-visible .pulse::after {
  background: #fff;
}

.work-bubble:hover .work-arrow,
.work-bubble:focus-visible .work-arrow {
  background: #fff;
  color: var(--accent-dark);
  transform: translateX(4px) rotate(-45deg);
}

@keyframes bubble-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes bubble-shimmer {
  0%, 60% { left: -40%; }
  100% { left: 130%; }
}

@keyframes bubble-pulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .work-bubble,
  .work-bubble::after,
  .pulse::after {
    animation: none;
  }
}

/* Smooth scroll when jumping to a section */
html { scroll-behavior: smooth; }

#current-projects { scroll-margin-top: 1.5rem; }

/* Closing quote on every page */
.closing-quote {
  max-width: 46rem;
  width: 100%;
  margin: 0 auto;
  padding: 1rem 1.5rem 2.5rem;
  text-align: center;
}

.closing-quote p {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: 1.375rem;
  line-height: 1.35;
  color: var(--accent-dark);
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  margin-top: auto;
}

.site-footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  max-width: 68rem;
  margin: 0 auto;
  padding: 1.5rem;
  font-size: 0.9rem;
  color: var(--muted);
}

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

.site-footer a:hover { text-decoration: underline; }

/* ---------- Small screens ---------- */
@media (max-width: 760px) {
  .home {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding-top: 1.5rem;
  }
  .site-nav { margin-left: -0.95rem; }
  .photo {
    order: -1;
    max-width: 13rem;
    justify-self: start;
  }
}

@media (max-width: 560px) {
  .entry-head {
    flex-direction: column;
    gap: 0.1rem;
  }
}

/* Highlight the interest card you arrive at from a Research tag */
.themes li:target .flip-front {
  box-shadow: 0 0 0 3px var(--accent);
  animation: target-pulse 1.4s ease-out 2;
}

@keyframes target-pulse {
  0% { box-shadow: 0 0 0 3px var(--accent), 0 0 0 3px rgba(95, 122, 85, 0.5); }
  100% { box-shadow: 0 0 0 3px var(--accent), 0 0 0 14px rgba(95, 122, 85, 0); }
}