/* Minimal White theme for Dianzhuo Wang
 * Adapted from the AmberLJC minimal layout, with a Harvard crimson accent.
 * Clean, lots of white space, serif typography, centered hero.
 */

:root {
  --primary: #1a1a1a;
  --accent: #666;
  --crimson: #750014;
  --crimson-light: #a51c30;
  --crimson-glow: rgba(117, 0, 20, 0.08);
  --crimson-glow-strong: rgba(117, 0, 20, 0.14);
  --text: #333;
  --text-light: #888;
  --bg: #fff;
  --bg-secondary: #fafafa;
  --border: #ececec;
}

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

::selection {
  background: var(--crimson-glow-strong);
  color: var(--primary);
}
::-moz-selection {
  background: var(--crimson-glow-strong);
  color: var(--primary);
}

body {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 16px;
  line-height: 1.8;
  color: var(--text);
  background-color: var(--bg);
  overflow-x: hidden;
}

/* Top navigation */
.topnav {
  background: transparent;
  border-bottom: 1px solid var(--border);
  padding: 20px 40px;
  display: flex;
  gap: 40px;
}

.topnav a {
  color: var(--text-light);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: color 0.3s;
}

.topnav a:hover,
.topnav a.active {
  color: var(--crimson);
}

/* Main layout */
.wrapper {
  max-width: 1000px;
  margin: 0 auto;
  padding: 60px 40px;
}

/* Profile hero */
.profile-section {
  text-align: center;
  margin-bottom: 70px;
}

.profile-picture {
  position: relative;
  width: 180px;
  margin: 0 auto 28px;
  line-height: 0;
}

.profile-picture img {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(30%);
  transition: filter 0.3s, box-shadow 0.3s;
}

.profile-picture img:hover {
  filter: grayscale(0%);
  box-shadow: 0 0 30px var(--crimson-glow-strong);
}

/* Cherry-blossom rain on hover (the photo is taken under sakura) */
.petals {
  position: absolute;
  inset: -6px 0 0 0;
  pointer-events: none;
  overflow: visible;
  z-index: 3;
}

.petals i {
  position: absolute;
  top: -6px;
  width: 10px;
  height: 8px;
  background: linear-gradient(135deg, #fbe0ea 0%, #f3a9c2 70%, #e98aab 100%);
  border-radius: 100% 0 100% 0;
  opacity: 0;
  will-change: transform, opacity;
}

/* Each petal: its own column, drift, speed and head-start */
.petals i:nth-child(1)  { left:  6%; --drift: -18px; animation-duration: 2.8s; animation-delay: 0.0s; }
.petals i:nth-child(2)  { left: 16%; --drift:  12px; animation-duration: 3.2s; animation-delay: 0.6s; }
.petals i:nth-child(3)  { left: 26%; --drift: -10px; animation-duration: 2.4s; animation-delay: 1.1s; }
.petals i:nth-child(4)  { left: 36%; --drift:  16px; animation-duration: 3.0s; animation-delay: 0.3s; }
.petals i:nth-child(5)  { left: 46%; --drift: -14px; animation-duration: 2.6s; animation-delay: 0.9s; }
.petals i:nth-child(6)  { left: 56%; --drift:  10px; animation-duration: 3.4s; animation-delay: 0.2s; }
.petals i:nth-child(7)  { left: 66%; --drift: -16px; animation-duration: 2.5s; animation-delay: 1.3s; }
.petals i:nth-child(8)  { left: 76%; --drift:  14px; animation-duration: 2.9s; animation-delay: 0.5s; }
.petals i:nth-child(9)  { left: 86%; --drift: -12px; animation-duration: 3.1s; animation-delay: 1.0s; }
.petals i:nth-child(10) { left: 12%; --drift:   8px; animation-duration: 3.3s; animation-delay: 1.5s; }
.petals i:nth-child(11) { left: 50%; --drift:  -8px; animation-duration: 2.7s; animation-delay: 1.8s; }
.petals i:nth-child(12) { left: 70%; --drift:  18px; animation-duration: 3.5s; animation-delay: 0.8s; }

.profile-picture:hover .petals i {
  animation-name: petal-fall;
  animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  animation-iteration-count: infinite;
}

@keyframes petal-fall {
  0%   { transform: translate3d(0, -6px, 0) rotate(0deg);   opacity: 0; }
  12%  { opacity: 0.95; }
  70%  { opacity: 0.9; }
  100% { transform: translate3d(var(--drift, 0), 178px, 0) rotate(420deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .petals { display: none; }
}

.profile-section h1 {
  font-size: 34px;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 14px;
  position: relative;
  display: inline-block;
}

.profile-section h1::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--crimson-light), var(--crimson));
  border-radius: 2px;
}

.profile-section .tagline {
  color: var(--text-light);
  font-size: 15px;
  margin-bottom: 4px;
}

.profile-section .tagline a {
  color: var(--text-light);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.profile-section .tagline a:hover {
  color: var(--crimson);
  border-bottom-color: var(--crimson);
}

/* Social icon row */
.list-inline {
  margin-top: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  list-style: none;
  flex-wrap: wrap;
}

.social-icon {
  color: var(--text-light) !important;
  font-size: 26px !important;
  transition: color 0.3s, transform 0.3s;
  text-decoration: none;
}

.social-icon:hover {
  color: var(--crimson) !important;
  transform: translateY(-2px);
}

/* Typography */
h2 {
  font-size: 22px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--text-light);
  margin-top: 60px;
  margin-bottom: 30px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  transition: color 0.3s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

h2:hover {
  color: var(--crimson);
}

h2 i {
  color: var(--crimson);
  font-size: 18px;
}

/*------------------
 * Inline SVG icons (replaced the Font Awesome / Academicons webfonts, so
 * the site no longer depends on an external icon CDN). Each <svg> inherits
 * currentColor, so existing colour rules keep working.
 *------------------*/
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  flex: none;
}

h2 .icon {
  width: 18px;
  height: 18px;
  color: var(--crimson);
}

.social-icon .icon {
  width: 24px;
  height: 24px;
  vertical-align: middle;
}

.contact-info .icon {
  width: 13px;
  height: 13px;
  opacity: 0.85;
  margin-right: 3px;
}

.content-section > section:first-of-type h2 {
  margin-top: 0;
}

p {
  margin-bottom: 18px;
  color: var(--text);
}

a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.3s;
}

a:hover {
  color: var(--crimson);
}

.section-note {
  font-size: 13px;
  color: var(--text-light);
  margin-bottom: 24px;
  line-height: 1.7;
}

.section-note .representative-key {
  background: var(--crimson-glow-strong);
  color: var(--crimson);
  padding: 1px 7px;
  border-radius: 3px;
  font-style: normal;
}

/* About */
#about-me p {
  font-size: 16px;
  line-height: 1.95;
  margin-bottom: 20px;
}

#about-me .cta {
  border-left: 3px solid var(--crimson);
  background: var(--crimson-glow);
  padding: 14px 18px;
  border-radius: 0 4px 4px 0;
  font-size: 15px;
  margin-bottom: 0;
}

/* News */
.news-item {
  display: flex;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
  transition: padding-left 0.3s, border-color 0.3s;
}

.news-item:hover {
  padding-left: 8px;
  border-bottom-color: var(--crimson);
}

.news-date {
  flex: 0 0 90px;
  font-size: 13px;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.news-content {
  flex: 1;
  font-size: 15px;
  /* Justified so the right edge is flush instead of ragged. */
  text-align: justify;
  text-justify: inter-word;
  /* Reserve two lines so single-line entries match the taller ones and
     every row in the list is the same height. */
  min-height: 3.6em;
}

/* Keep the date column from shrinking or wrapping, so the dates line up
   in a clean column regardless of entry length. */
.news-date {
  white-space: nowrap;
}

@media (max-width: 600px) {
  /* Stacked on mobile: justification and a two-line floor both hurt in a
     narrow column, so drop them. */
  .news-content {
    text-align: left;
    min-height: 0;
  }
}

/* Publications */
.pub-item {
  display: flex;
  gap: 26px;
  align-items: flex-start;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
  transition: background-color 0.3s ease, box-shadow 0.3s ease,
              border-color 0.3s ease, transform 0.3s ease;
}

/* Plain item hover — soft tint, like the Education rows */
.pub-item:hover {
  background: var(--crimson-glow);
}

.pub-item.representative {
  background: var(--crimson-glow);
  border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--crimson);
  padding: 22px 22px;
  margin: 6px 0;
  border-radius: 0 4px 4px 0;
}

/* Representative item hover — deepen the tint and gently lift the card */
.pub-item.representative:hover {
  background: var(--crimson-glow-strong);
  box-shadow: 0 6px 22px var(--crimson-glow);
  transform: translateY(-2px);
}

.pub-item.representative:hover .pub-figure img {
  border-color: var(--crimson);
}

.pub-figure {
  flex: 0 0 210px;
}

.pub-figure img {
  width: 210px;
  max-width: 100%;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: #fff;
  display: block;
}

.pub-body {
  flex: 1;
  min-width: 0;
}

.pub-title {
  font-size: 17px;
  line-height: 1.5;
  margin-bottom: 6px;
}

.pub-title a {
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
}

.pub-title a:hover {
  color: var(--crimson);
  text-decoration: underline;
}

.pub-authors {
  font-size: 14px;
  color: var(--text-light);
  margin-bottom: 6px;
  line-height: 1.6;
}

.pub-authors me {
  color: var(--crimson);
  font-weight: 700;
  font-style: normal;
}

/* Co-first authors — hovering a paper passes a crimson "baton" along the
   equal-contribution (*) authors to signal shared first authorship.

   On hover, a faint hairline appears under every co-first name, so the
   group reads as a set. A crimson gradient underline then travels through
   them one at a time: it draws in from the left on arrival and retracts to
   the right on departure, so the highlight reads as moving along the
   byline rather than blinking on and off. The active name also warms to
   crimson and lifts a hair.

   Only colour, opacity and transform are animated, so nothing reflows as
   the baton moves. JS adds .cofirst to each starred name and toggles .spot
   on the currently-lit one. */
.pub-authors .cofirst {
  position: relative;
  display: inline-block;
  transition: color 0.45s ease,
              transform 0.45s cubic-bezier(0.22, 0.9, 0.24, 1),
              text-shadow 0.45s ease;
}

/* faint hairline: reveals the whole co-first group while hovering */
.pub-authors .cofirst::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0;
  transition: opacity 0.45s ease;
}

#publications .pub-item:hover .pub-authors .cofirst::before {
  opacity: 0.18;
}

/* the travelling baton */
.pub-authors .cofirst::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--crimson-light), var(--crimson));
  transform: scaleX(0);
  transform-origin: right; /* retracts rightward on the way out */
  transition: transform 0.5s cubic-bezier(0.22, 0.9, 0.24, 1);
}

.pub-authors .cofirst.spot {
  color: var(--crimson);
  transform: translateY(-1px);
  text-shadow: 0 0 16px var(--crimson-glow-strong);
}

.pub-authors .cofirst.spot::after {
  transform: scaleX(1);
  transform-origin: left; /* draws in from the left on arrival */
}

@media (prefers-reduced-motion: reduce) {
  .pub-authors .cofirst,
  .pub-authors .cofirst::before,
  .pub-authors .cofirst::after {
    transition: none;
  }
  .pub-authors .cofirst.spot {
    transform: none;
  }
}

/*------------------
 * Benchmarks — distinct "spec card" style, set apart from the crimson
 * publication rows: a grid of outlined cards with a mono tag, headline
 * stat tiles, and a crimson top-accent that draws on hover.
 *------------------*/
.bench-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 8px;
}

.bench-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px 24px 20px;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* crimson accent that sweeps across the top edge on hover */
.bench-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--crimson-light), var(--crimson));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s ease;
}

.bench-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(117, 0, 20, 0.10);
  border-color: var(--crimson-light);
}

.bench-card:hover::before {
  transform: scaleX(1);
}

.bench-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.bench-tag {
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--crimson);
  background: var(--crimson-glow);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.bench-id {
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--text-light);
}

.bench-title {
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: 10px;
}

.bench-title a {
  color: var(--primary);
  text-decoration: none;
}

.bench-title a:hover {
  color: var(--crimson);
}

.bench-authors {
  font-size: 12px;
  line-height: 1.65;
  color: var(--text-light);
  margin-bottom: 20px;
}

.bench-authors me {
  color: var(--crimson);
  font-weight: 700;
  font-style: normal;
}

.bench-stats {
  display: flex;
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.bench-stats .stat {
  flex: 1;
  text-align: center;
  padding: 0 8px;
}

.bench-stats .stat + .stat {
  border-left: 1px solid var(--border);
}

.bench-stats .num {
  display: block;
  font-size: 21px;
  color: var(--crimson);
  line-height: 1.1;
}

.bench-stats .label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-light);
  margin-top: 6px;
  line-height: 1.35;
}

.bench-links {
  margin-top: 16px;
  font-size: 13px;
}

.bench-links a {
  color: var(--text-light);
  text-decoration: none;
  transition: color 0.3s;
}

.bench-links a:hover {
  color: var(--crimson);
}

.bench-links .sep {
  color: var(--border);
  margin: 0 4px;
}

/* Featured benchmark — spans the full grid width */
.bench-card.wide {
  grid-column: 1 / -1;
}

@media (prefers-reduced-motion: reduce) {
  .bench-card,
  .bench-card::before {
    transition: none;
  }
  .bench-card:hover {
    transform: none;
  }
}

@media (max-width: 768px) {
  .bench-grid {
    grid-template-columns: 1fr;
  }
}

.pub-links {
  font-size: 14px;
}

.pub-links a {
  color: var(--text-light);
  text-decoration: none;
  transition: color 0.3s;
}

.pub-links a:hover {
  color: var(--crimson);
}

.pub-links .venue a {
  color: var(--primary);
  font-weight: 700;
}

.pub-links .venue a:hover {
  color: var(--crimson);
}

.pub-links .sep {
  color: #b8b8b8;
  margin: 0 4px;
}

/* Bibtex collapse + code snippet */
.collapse {
  display: none;
}

.collapse.show {
  display: block;
}

.snippet {
  position: relative;
  background: #f6f6f6;
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
  margin-top: 12px;
  border-radius: 4px;
  border: 1px solid var(--border);
}

.representative .snippet {
  background: #fff;
}

.snippet code {
  display: block;
  padding: 14px 16px;
  overflow-x: auto;
  white-space: pre;
  color: #444;
}

.snippet .copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  font-family: 'Georgia', serif;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-light);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 3px 8px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.snippet .copy-btn:hover {
  color: var(--crimson);
  border-color: var(--crimson);
}

/* Tables (Education) */
table {
  width: 100%;
  margin: 10px 0 0;
  border-collapse: collapse;
}

tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background-color 0.3s;
}

tbody tr:hover {
  background-color: var(--crimson-glow);
}

td {
  padding: 16px 12px;
  vertical-align: middle;
  font-size: 15px;
}

td.edu-logo {
  width: 56px;
  text-align: center;
}

td.edu-logo img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  vertical-align: middle;
}

td .edu-school {
  font-weight: 700;
  color: var(--primary);
}

td .edu-school a {
  color: var(--primary);
  text-decoration: none;
}

td .edu-school a:hover {
  color: var(--crimson);
}

td .edu-degree {
  color: var(--text);
}

td .edu-meta {
  color: var(--text-light);
  font-size: 13px;
}

td.edu-time {
  text-align: right;
  white-space: nowrap;
  color: var(--text-light);
  font-size: 13px;
}

/* Mentoring / Services plain text blocks */
.text-block {
  font-size: 15px;
  line-height: 1.9;
}

.text-block a {
  color: var(--primary);
}

.text-block a:hover {
  color: var(--crimson);
}

/* Footer / contact */
footer {
  margin-top: 80px;
  padding-top: 36px;
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--crimson), transparent) 1;
  text-align: center;
}

footer h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--crimson);
  margin-bottom: 14px;
  font-weight: 400;
}

.contact-info {
  font-size: 14px;
  color: var(--text-light);
  line-height: 1.9;
}

.contact-info a {
  color: var(--text-light);
}

.contact-info a:hover {
  color: var(--crimson);
}

.copyright {
  font-size: 12px;
  color: var(--text-light);
  margin-top: 22px;
}

/* Easter egg — a quiet heart in the footer */
.lovebug {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
  vertical-align: middle;
}

.lovebug .heart {
  color: #dcdcdc;
  text-decoration: none;
  font-size: 13px;
  line-height: 1;
  transition: color 0.35s ease, transform 0.35s ease;
}

.lovebug .heart:hover {
  color: var(--crimson);
  animation: heartbeat 1s ease-in-out infinite;
}

.lovebug .note {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  font-size: 11px;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.5px;
  color: var(--crimson);
  transition: max-width 0.6s ease, opacity 0.6s ease;
}

.lovebug:hover .note {
  max-width: 260px;
  opacity: 1;
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1.2); }
  50% { transform: scale(1.45); }
}

/* Easter egg, hidden in plain sight — disguised as the copyright's period.
   Reads as ordinary punctuation until hovered, then blooms into a heart. */
.lovebug-secret {
  position: relative;
  white-space: nowrap;
}

.lovebug-secret a {
  text-decoration: none;
  cursor: default;
}

.lovebug-secret a::after {
  content: '.';
  display: inline-block;
  color: var(--text-light);
  transition: color 0.35s ease;
}

.lovebug-secret a:hover {
  cursor: pointer;
}

.lovebug-secret a:hover::after {
  content: '\2665';
  color: var(--crimson);
  animation: heartbeat 1s ease-in-out infinite;
}

.lovebug-secret .note {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  vertical-align: bottom;
  opacity: 0;
  font-size: 11px;
  font-style: italic;
  letter-spacing: 0.5px;
  color: var(--crimson);
  transition: max-width 0.6s ease, opacity 0.6s ease;
}

.lovebug-secret:hover .note {
  max-width: 260px;
  opacity: 1;
  margin-left: 6px;
}

/* Screen-reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .wrapper {
    padding: 40px 20px;
  }

  .topnav {
    padding: 16px 20px;
    gap: 24px;
  }

  .profile-section h1 {
    font-size: 27px;
  }

  .pub-item,
  .pub-item.representative {
    flex-direction: column;
    gap: 14px;
  }

  .pub-figure {
    flex-basis: auto;
  }

  .pub-figure img {
    width: 100%;
    max-width: 320px;
  }

  .news-item {
    flex-direction: column;
    gap: 2px;
  }

  /* In column layout the 90px flex-basis becomes the date's HEIGHT,
     leaving a big gap before each headline — reset it to content size. */
  .news-date {
    flex: 0 0 auto;
  }

  td.edu-time {
    font-size: 12px;
  }
}

/* Phones: the Education table's fixed date column overflows the screen.
   Reflow each row so the logo floats left and school/degree/date stack. */
@media (max-width: 600px) {
  #education table,
  #education tbody,
  #education tr,
  #education td {
    display: block;
  }

  #education tr {
    position: relative;
    padding: 14px 0 14px 50px;
    border-bottom: 1px solid var(--border);
  }

  #education td {
    padding: 0;
    border: 0;
  }

  #education td.edu-logo {
    position: absolute;
    left: 0;
    top: 16px;
    width: auto;
  }

  #education td.edu-logo img {
    width: 34px;
    height: 34px;
  }

  #education td.edu-time {
    text-align: left;
    margin-top: 4px;
    font-size: 12px;
  }
}

/*------------------
 * Hide MapMyVisitors widget (visitor tracking runs, badge stays hidden)
 *------------------*/
#mapmyvisitors,
iframe[src*="mapmyvisitors"],
img[src*="mapmyvisitors"],
a[href*="mapmyvisitors"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
}

/*==================================================================
 * >>> BEGIN: RESEARCH REDESIGN (2026-09) — rollback marker <<<
 * To restore the OLD Research look: delete everything from this
 * marker down to the matching END marker at the very bottom of this
 * file. See docs/DESIGN_NOTES.md.
 *
 * Research redesign — editorial paper cards.
 * Scoped to #publications so it only affects the Research section.
 * Every paper carries .representative, so the old crimson wash read
 * as monotony rather than emphasis; these are clean white cards that
 * keep crimson for accents (venue badge, hover rail, author name).
 * Markup is unchanged — delete this whole block to roll back.
 *==================================================================*/
#publications .pub-item,
#publications .pub-item.representative {
  position: relative;
  display: flex;
  gap: 28px;
  align-items: flex-start;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 26px;
  margin: 16px 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.4s ease, border-color 0.4s ease;
}

/* crimson rail that draws down the left edge on hover */
#publications .pub-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--crimson-light), var(--crimson));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.45s ease;
}

#publications .pub-item:hover,
#publications .pub-item.representative:hover {
  background: var(--bg);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(117, 0, 20, 0.10);
  border-color: var(--crimson-light);
}

#publications .pub-item:hover::before {
  transform: scaleY(1);
}

/* --- Figure: a uniform frame, "contain" so nothing is cropped ---- */
#publications .pub-figure {
  flex: 0 0 212px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #fff;
  overflow: hidden;
  padding: 8px;
  transition: border-color 0.4s ease;
}

#publications .pub-figure a {
  display: block;
  line-height: 0;
}

#publications .pub-figure img {
  width: 100%;
  height: 122px;
  max-width: none;
  object-fit: contain;
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#publications .pub-item:hover .pub-figure {
  border-color: var(--crimson-light);
}

#publications .pub-item:hover .pub-figure img {
  transform: scale(1.05);
}

/* --- Text ------------------------------------------------------- */
#publications .pub-title {
  font-size: 18px;
  line-height: 1.45;
  margin-bottom: 9px;
}

#publications .pub-title a {
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
}

#publications .pub-title a:hover {
  color: var(--crimson);
  text-decoration: none;
}

#publications .pub-authors {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-light);
  margin-bottom: 14px;
}

/* --- Link row: venue badge + quiet action chips ----------------- */
#publications .pub-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
}

#publications .pub-links .sep {
  display: none;
}

#publications .pub-links .venue {
  font-weight: 400;
}

#publications .pub-links .venue a {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--crimson);
  background: var(--crimson-glow);
  border: 1px solid var(--crimson-glow-strong);
  border-radius: 999px;
  padding: 4px 12px;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

#publications .pub-links .venue a:hover {
  background: var(--crimson);
  border-color: var(--crimson);
  color: #fff;
}

#publications .pub-links > a {
  font-size: 10.5px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--text-light);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
  text-decoration: none;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

#publications .pub-links > a:hover {
  color: var(--crimson);
  border-color: var(--crimson-light);
  background: var(--crimson-glow);
}

/* --- Bibtex snippet (cards are white now, so tint the code) ----- */
#publications .snippet,
#publications .representative .snippet {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 9px;
}

#publications .collapse.show {
  margin-top: 4px;
}

@media (prefers-reduced-motion: reduce) {
  #publications .pub-item,
  #publications .pub-item::before,
  #publications .pub-figure img {
    transition: none;
  }
  #publications .pub-item:hover {
    transform: none;
  }
  #publications .pub-item:hover .pub-figure img {
    transform: none;
  }
}

@media (max-width: 768px) {
  #publications .pub-item,
  #publications .pub-item.representative {
    flex-direction: column;
    gap: 16px;
    padding: 20px;
  }
  #publications .pub-figure {
    flex-basis: auto;
    width: 100%;
  }
  #publications .pub-figure img {
    height: 165px;
  }
}

/*==================================================================
 * >>> END: RESEARCH REDESIGN (2026-09) — rollback marker <<<
 *==================================================================*/

/*------------------
 * Publication year — sits top-right of each card so the years form a
 * scannable column down the list. The title reserves room for it.
 *------------------*/
#publications .pub-year {
  position: absolute;
  top: 24px;
  right: 26px;
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text-light);
  transition: color 0.4s ease;
}

#publications .pub-item:hover .pub-year {
  color: var(--crimson);
}

#publications .pub-title {
  padding-right: 56px;
}

/* Smooth anchor scrolling for the in-page nav */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/*------------------
 * In-page section navigation (index). Sticks to the top once the hero
 * scrolls away; the active section is highlighted as you scroll.
 *------------------*/
.section-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  margin: 0 0 50px;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}

.section-nav a {
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-light);
  text-decoration: none;
  padding: 5px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  white-space: nowrap;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}

.section-nav a:hover {
  color: var(--crimson);
  border-color: var(--crimson);
}

.section-nav a.active {
  color: #fff;
  background: var(--crimson);
  border-color: var(--crimson);
}

/* offset anchor targets so the sticky bar never covers a heading */
.content-section > section {
  scroll-margin-top: 76px;
}

@media (max-width: 600px) {
  .section-nav {
    gap: 6px;
    padding: 12px 14px;
  }
  .section-nav a {
    font-size: 10px;
    padding: 4px 10px;
    letter-spacing: 1px;
  }
}

/*==================================================================
 * >>> BEGIN: DARK MODE (2026-09) — rollback marker <<<
 * Follows the OS setting via prefers-color-scheme. Implemented as a
 * token swap on :root, plus explicit overrides for the handful of
 * hardcoded colours that a token swap cannot reach (code snippets,
 * card surfaces, shadows). Crimson is lightened for legibility: the
 * print crimson #750014 fails contrast on a dark ground.
 * To remove dark mode entirely, delete down to the matching END
 * marker at the bottom of this file. See docs/DESIGN_NOTES.md.
 *==================================================================*/

/* Let the browser theme scrollbars, form controls and the like. */
:root {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #f2f0ee;
    --accent: #a8a5a1;
    /* lightened crimson — keeps the Harvard identity, passes contrast */
    --crimson: #e2707f;
    --crimson-light: #f0949f;
    --crimson-glow: rgba(226, 112, 127, 0.12);
    --crimson-glow-strong: rgba(226, 112, 127, 0.22);
    --text: #cfccc8;
    --text-light: #938f8a;
    --bg: #14151a;
    --bg-secondary: #1b1d23;
    --border: #2c2f37;
  }

  /* --- Raised surfaces: cards must sit above the page, not match it */
  #publications .pub-item,
  #publications .pub-item.representative,
  .bench-card {
    background: #1c1e25;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  }

  #publications .pub-item:hover,
  #publications .pub-item.representative:hover {
    background: #21242c;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  }

  .bench-card:hover {
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
  }

  /* --- Figure plates stay light so scientific figures stay legible,
         but dim slightly at rest so nine white tiles don't glare. */
  #publications .pub-figure {
    background: #fff;
    filter: brightness(0.9);
    transition: filter 0.4s ease, border-color 0.4s ease;
  }

  #publications .pub-item:hover .pub-figure {
    filter: none;
  }

  .pub-figure img {
    background: #fff;
  }

  /* --- Code / bibtex snippets ------------------------------------ */
  .snippet,
  .representative .snippet,
  #publications .snippet,
  #publications .representative .snippet {
    background: #101217;
    border-color: var(--border);
  }

  .snippet code {
    color: #c4c8d0;
  }

  .snippet .copy-btn {
    background: #1c1e25;
    border-color: var(--border);
    color: var(--text-light);
  }

  .snippet .copy-btn:hover {
    color: var(--crimson);
    border-color: var(--crimson);
  }

  /* --- Misc hardcoded greys -------------------------------------- */
  .pub-links .sep {
    color: #4a4e57;
  }

  .lovebug .heart {
    color: #4a4e57;
  }

  /* Profile photo: lift the grayscale so it doesn't muddy on dark */
  .profile-picture img {
    filter: grayscale(15%);
  }

  /* Venue badge text stays readable when it fills on hover */
  #publications .pub-links .venue a:hover {
    color: #14151a;
  }

  .collection-nav a.active,
  .section-nav a.active {
    color: #14151a;
  }

  .section-nav {
    background: rgba(20, 21, 26, 0.85);
  }
}
/*==================================================================
 * >>> END: DARK MODE (2026-09) — rollback marker <<<
 *==================================================================*/