/* ========== Coral Greenery palette ========== */
:root {
  --font-hero: 'Syne', -apple-system, sans-serif;
  --font-accent: 'Fraunces', Georgia, serif;
  --color-primary: #2F3020;
  --color-primary-soft: rgba(47, 48, 32, 0.08);
  --color-secondary: #596235;
  --color-secondary-soft: rgba(89, 98, 53, 0.12);
  --color-accent: #D96846;
  --color-accent-hover: #c25a3a;
  --color-bg: #e8e7eb;
  --color-bg-lavender: #CDCBD6;
  --scroll-ratio: 0;
  --color-surface: #ffffff;
  --color-text: #2F3020;
  --color-text-muted: #5a5b4d;
  --color-border: rgba(47, 48, 32, 0.12);
  --content-max-width: 1280px;
  --section-padding: clamp(32px, 6vw, 64px);
  --section-padding-x: clamp(24px, 5vw, 80px);
  --space-section: clamp(40px, 8vw, 72px);
  --radius: 12px;
  --shadow-sm: 0 1px 3px rgba(47, 48, 32, 0.06);
  --shadow-md: 0 4px 12px rgba(47, 48, 32, 0.08);
  --transition: 0.25s ease;
  /* Design tokens — keep these in sync across components */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --border-accent: 3px;
  --hairline-color: rgba(47, 48, 32, 0.12);
}

:root {
  --color-navy: var(--color-primary);
  --color-navy-soft: var(--color-primary-soft);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

::selection {
  background: rgba(217, 104, 70, 0.25);
  color: var(--color-primary);
}

/* Page load / section animations */
@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  section,
  main.page-content,
  .reveal,
  .timeline-year.reveal .timeline-item {
    animation: none;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .update-list li:hover,
  .publication-list li:hover,
  .pub-item:hover,
  .contact-item:hover,
  .contact-links a:hover,
  .timeline-item:hover,
  .about-photo:hover,
  .chip:hover,
  button.resume-button:hover,
  header .logo a:hover {
    transform: none;
  }
}

body {
  font-family: var(--font-accent);
  background-color: var(--color-bg);
  background-image:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(205, 203, 214, 0.6) 0%, transparent 50%),
    radial-gradient(ellipse 70% 50% at 100% 90%, rgba(217, 104, 70, 0.08) 0%, transparent 45%),
    radial-gradient(ellipse 60% 40% at 0% 80%, rgba(89, 98, 53, 0.1) 0%, transparent 45%);
  background-attachment: fixed;
  color: var(--color-text);
  line-height: 1.65;
  margin: 0;
  position: relative;
}

/* Scroll-linked wash: smooth overlay that intensifies as you scroll */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: calc(0.12 + 0.45 * var(--scroll-ratio));
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(89, 98, 53, 0.03) 20%,
    rgba(89, 98, 53, 0.06) 40%,
    rgba(217, 104, 70, 0.05) 55%,
    rgba(217, 104, 70, 0.08) 75%,
    rgba(47, 48, 32, 0.08) 100%);
  transition: opacity 0.25s ease-out;
}

body > * {
  position: relative;
  z-index: 1;
}

/* Main content wrapper: gentle entrance on load */
main.page-content {
  animation: pageEnter 0.5s ease-out forwards;
}

/* Sections: full-width flow, no card; gradient bands separate sections */
section {
  position: relative;
  padding: var(--section-padding) var(--section-padding-x);
  margin: 0 auto var(--space-section);
  max-width: var(--content-max-width);
}

/* Section eyebrow: small uppercase tag with a numeral.
   Sits tight above the H2 — should read as a category cue, not a competing
   heading. The light plate behind it (on .section-head) guarantees contrast,
   so we can keep this small and quiet. */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-hero);
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-text-muted);
  margin: 0 0 0.4rem;
  text-align: left;
}

.section-eyebrow .section-num {
  font-family: var(--font-hero);
  font-weight: 700;
  color: var(--color-accent);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding-right: 0.55rem;
  border-right: 1px solid var(--color-border);
}

.section-eyebrow .section-label {
  display: inline-block;
  color: var(--color-text-muted);
}

/* Eyebrow sits as a small chapter mark above the H2 — gap is comfortable
   but not so wide that the two feel separated. */
.section-head .section-eyebrow {
  margin: 0 0 0.55rem;
}

/* Section lede: muted intro paragraph under the H2 */
.section-lede {
  font-family: var(--font-accent);
  font-size: 1.05rem;
  color: var(--color-text-muted);
  margin: 0 0 1.5rem;
  max-width: 60ch;
}

/* All H2s inside sections share the visual treatment.
   Back on Syne (matches the H1 and the rest of the site's display type), but
   at weight 600 instead of 700 so it still reads subtler than the original. */
section h2 {
  font-family: var(--font-hero);
  font-size: clamp(2.05rem, 4.6vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.05;
  color: var(--color-primary);
}

/* Direct-child H2 (pages without a section-head wrapper): get the coral mark */
section > h2 {
  position: relative;
  margin: 0 0 1.25rem;
  padding-left: 1rem;
}

section > h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.32em;
  bottom: 0.32em;
  width: 3px;
  background: var(--color-accent);
  border-radius: 2px;
}

/* Unified section header: eyebrow + H2 + lede sit on their own light "plate"
   so the title always reads cleanly, regardless of section gradients or the
   scroll wash drifting darker behind it. */
.section-head {
  position: relative;
  padding: 1rem 1.5rem 1.1rem 1.25rem;
  margin-bottom: 1.75rem;
  width: 100%;
  background: rgba(255, 255, 255, 0.62);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 0 rgba(47, 48, 32, 0.04);
}

.section-head h2 {
  margin: 0;
}

.section-head .section-lede {
  margin: 0.95rem 0 0;
}


/* Reveal-on-scroll: elements start hidden, fade up when in view */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children of revealed timeline-list and update-list */
.timeline-year.reveal .timeline-item {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.timeline-year.in-view .timeline-item {
  opacity: 1;
  transform: translateY(0);
}
.timeline-year.in-view .timeline-item:nth-child(1) { transition-delay: 0.05s; }
.timeline-year.in-view .timeline-item:nth-child(2) { transition-delay: 0.1s; }
.timeline-year.in-view .timeline-item:nth-child(3) { transition-delay: 0.15s; }
.timeline-year.in-view .timeline-item:nth-child(4) { transition-delay: 0.2s; }
.timeline-year.in-view .timeline-item:nth-child(5) { transition-delay: 0.25s; }
.timeline-year.in-view .timeline-item:nth-child(6) { transition-delay: 0.3s; }
.timeline-year.in-view .timeline-item:nth-child(7) { transition-delay: 0.35s; }
.timeline-year.in-view .timeline-item:nth-child(8) { transition-delay: 0.4s; }

/* Sections no longer paint their own gradient bands — the body's page-wide
   ambient gradient + scroll wash provide continuous color depth without
   creating visible section boundaries. */

section:first-of-type {
  margin-top: var(--space-section);
}

/* ========== Landing row: hero left, research right ========== */
.landing-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 64px);
  max-width: var(--content-max-width);
  margin: var(--space-section) auto var(--space-section);
  padding: 0 var(--section-padding-x);
  align-items: flex-start;
}

.hero-col {
  flex: 1 1 320px;
  min-width: 0;
}

.research-col {
  flex: 1 1 400px;
  min-width: 0;
}

.research-col #research-directions {
  margin-bottom: 0;
  margin-top: 0;
}

@media (max-width: 768px) {
  .landing-row {
    flex-direction: column;
  }

  .landing-row .hero {
    max-width: none;
    text-align: left;
  }

  /* Promote hero-col's children to direct landing-row children so we can
     reorder them. Mobile reading order should be: hero → graph → panel,
     instead of the desktop nesting (hero + panel on the left, graph on the right). */
  .landing-row .hero-col {
    display: contents;
  }

  .landing-row .hero { order: 1; }
  .landing-row .research-col { order: 2; }
  .landing-row #research-panel { order: 3; margin-top: 0.5rem; }
}

/* ========== Hero (left column) ========== */
.landing-row .hero {
  max-width: 38em;
  margin: 0;
  text-align: left;
  opacity: 0;
  animation: fadeInUp 0.6s ease-out forwards;
}

.hero-name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 1rem;
  margin-bottom: 0.4em;
}

.landing-row .hero h1 {
  font-family: var(--font-hero);
  font-size: clamp(2.25rem, 5.5vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 0;
  color: var(--color-primary);
  line-height: 1.05;
}

.hero-meta {
  font-family: var(--font-accent);
  font-size: clamp(0.9rem, 1.8vw, 1.05rem);
  color: var(--color-secondary);
  font-feature-settings: "ss01";
}

.landing-row .hero .tagline {
  font-family: var(--font-accent);
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  font-weight: 400;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.55;
}

/* "Currently" status line: small accent stripe with a pulsing dot */
.hero-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-family: var(--font-accent);
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin: 1.1rem 0 0;
  padding: 0.5rem 0.85rem;
  background: var(--color-secondary-soft);
  border-left: 2px solid var(--color-secondary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  line-height: 1.45;
}

.hero-status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 0 rgba(217, 104, 70, 0.5);
  animation: statusPulse 2.2s ease-out infinite;
  flex-shrink: 0;
}

.hero-status-label {
  font-family: var(--font-hero);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-primary);
}

.hero-status a {
  color: var(--color-secondary);
  text-decoration: underline;
  text-decoration-color: rgba(89, 98, 53, 0.45);
  text-underline-offset: 3px;
}

.hero-status a:hover {
  color: var(--color-primary);
  text-decoration-color: var(--color-primary);
}

@keyframes statusPulse {
  0%   { box-shadow: 0 0 0 0 rgba(217, 104, 70, 0.45); }
  70%  { box-shadow: 0 0 0 8px rgba(217, 104, 70, 0); }
  100% { box-shadow: 0 0 0 0 rgba(217, 104, 70, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-status-dot { animation: none; }
}

/* ========== Research directions (network + descriptions) ========== */
#research-directions .research-network-viz {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 0 1.5rem;
  cursor: default;
  overflow: visible;
}

/* Edges: subtle by default, brighten + flow when incident to active node */
#research-directions .research-network-viz .edge {
  stroke: var(--color-border);
  stroke-width: 1;
  stroke-linecap: round;
  transition: stroke 0.35s ease, stroke-width 0.35s ease, opacity 0.35s ease;
  opacity: 0.85;
}

#research-directions .research-network-viz .edge.active {
  stroke: var(--color-accent);
  stroke-width: 1.6;
  opacity: 1;
  stroke-dasharray: 4 7;
  animation: edgeFlow 1.4s linear infinite;
}

@keyframes edgeFlow {
  to { stroke-dashoffset: -22; }
}

#research-directions .research-network-viz .ring-guide {
  opacity: 0.55;
}

#research-directions .research-network-viz .ring-guide--outer {
  opacity: 0.35;
}

/* Always-on subtle glow behind the center node */
#research-directions .research-network-viz .center-glow {
  fill: var(--color-secondary);
  pointer-events: none;
}

#research-directions .research-network-viz .center-glow--lg { opacity: 0.05; }
#research-directions .research-network-viz .center-glow--md { opacity: 0.09; }

@media (prefers-reduced-motion: reduce) {
  #research-directions .research-network-viz .edge.active {
    animation: none;
  }
}

#research-directions .research-network-viz .node {
  cursor: pointer;
}

/* Layered halos: inner halo blooms on hover/active, outer halo ripples out on active */
#research-directions .research-network-viz .node .node-halo,
#research-directions .research-network-viz .node .node-halo-outer {
  fill: var(--color-accent);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.55);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}

#research-directions .research-network-viz .node:hover .node-halo {
  opacity: 0.16;
  transform: scale(1);
}

#research-directions .research-network-viz .node.active .node-halo {
  opacity: 0.24;
  transform: scale(1);
  animation: nodePulse 2.6s ease-in-out infinite;
}

#research-directions .research-network-viz .node.active .node-halo-outer {
  opacity: 0.18;
  transform: scale(1);
  animation: haloRipple 2.6s ease-out infinite;
}

@keyframes nodePulse {
  0%, 100% { opacity: 0.22; transform: scale(1); }
  50%      { opacity: 0.36; transform: scale(1.16); }
}

@keyframes haloRipple {
  0%   { opacity: 0.22; transform: scale(0.7); }
  60%  { opacity: 0.04; transform: scale(1.25); }
  100% { opacity: 0;    transform: scale(1.55); }
}

@media (prefers-reduced-motion: reduce) {
  #research-directions .research-network-viz .node.active .node-halo,
  #research-directions .research-network-viz .node.active .node-halo-outer {
    animation: none;
  }
}

/* Node dots */
#research-directions .research-network-viz .node .node-dot {
  fill: var(--color-primary);
  stroke: var(--color-surface);
  stroke-width: 1.5;
  transition: fill 0.3s ease, stroke 0.3s ease, r 0.3s ease;
}

#research-directions .research-network-viz .node:hover .node-dot,
#research-directions .research-network-viz .node.active .node-dot {
  fill: var(--color-accent);
  stroke: var(--color-primary);
}

#research-directions .research-network-viz .node.active .node-dot {
  r: 8;
}

#research-directions .research-network-viz .node--center .node-dot {
  fill: var(--color-secondary);
}

#research-directions .research-network-viz .node--center.active .node-dot {
  fill: var(--color-accent);
}

/* Labels outside dots */
#research-directions .research-network-viz .node text {
  font-size: 13px;
  font-family: var(--font-hero);
  font-weight: 500;
  fill: var(--color-text-muted);
  pointer-events: none;
  transition: fill 0.3s ease, font-weight 0.3s ease;
  letter-spacing: 0.01em;
}

#research-directions .research-network-viz .node--center text {
  font-weight: 600;
  fill: var(--color-primary);
}

#research-directions .research-network-viz .node:hover text,
#research-directions .research-network-viz .node.active text {
  fill: var(--color-primary);
  font-weight: 600;
}

/* Accent ball: moves along network, rests at each node (never intercept clicks) */
.accent-ball-wrap {
  transform-origin: 0 0;
  pointer-events: none;
}

.accent-ball {
  fill: var(--color-accent);
  stroke: var(--color-surface);
  stroke-width: 2;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
  pointer-events: none;
}

/* Panel uses grid-stack so all descriptions share the same cell. The panel
   itself is invisible — it just reserves the height of the tallest description
   so the page never shifts. The visible card (bg + border) lives on each
   description and is sized to its own content via align-self: start. Result:
   short descriptions look like a small card; long ones grow naturally; the
   layout below stays anchored either way. */
#research-panel {
  display: grid;
  margin-top: 1.5rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  opacity: 1;
  transform: none;
}

#research-panel > .hint,
#research-panel > .research-description {
  grid-row: 1;
  grid-column: 1;
  align-self: start;
  margin: 0;
  padding: 0.95rem 1.15rem;
  background: var(--color-primary-soft);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

/* Hint is the default state until a theme is shown */
#research-panel > .hint {
  opacity: 1;
  visibility: visible;
}

#research-panel.visible > .hint {
  opacity: 0;
  visibility: hidden;
}

#research-panel > .research-description.visible {
  opacity: 1;
  visibility: visible;
}

#research-panel h3 {
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
  color: var(--color-accent);
  letter-spacing: -0.005em;
}

#research-panel p {
  font-size: 0.95rem;
  margin: 0;
  color: var(--color-text);
  line-height: 1.55;
}

#research-panel .hint {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: 0;
}

/* ========== Blog index ========== */
.blog-list {
  list-style: none;
  padding: 0;
}

.blog-list li {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
  transition: opacity var(--transition);
}

.blog-list li:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.blog-list .post-meta {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: 0.35rem;
}

.blog-list .post-title {
  font-size: 1.25rem;
  margin-bottom: 0.4rem;
}

.blog-list .post-title a {
  text-decoration: none;
  color: var(--color-accent);
  transition: color var(--transition);
}

.blog-list .post-title a:hover {
  color: var(--color-accent);
}

.blog-list .post-excerpt {
  font-size: 1rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0;
}

/* Blog post single page */
#blog-post .post-meta,
#blog-post .post-meta a {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}

#blog-post .post-meta a:hover {
  color: var(--color-accent);
}

#blog-post h2 {
  margin-bottom: 1rem;
}

#blog-post code {
  font-size: 0.9em;
  padding: 0.15em 0.4em;
  background: var(--color-primary-soft);
  border-radius: 4px;
  color: var(--color-primary);
}

#blog-post ol, #blog-post ul {
  margin: 1rem 0 1rem 1.5rem;
  padding: 0;
}

#blog-post li {
  margin-bottom: 0.5rem;
}

/* ========== Resume page: embedded PDF ========== */
.resume-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.resume-updated {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  padding: 0.35rem 0.75rem;
  background: var(--color-secondary-soft);
  border-radius: 6px;
}

.resume-download {
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.4rem 1rem;
  background: var(--color-accent);
  color: var(--color-surface);
  border-radius: 8px;
  text-decoration: none;
  transition: background var(--transition), transform var(--transition);
}

.resume-download:hover {
  background: var(--color-accent-hover);
  transform: translateY(-1px);
}

.resume-intro {
  margin-bottom: 1.25rem;
  font-size: 1.05em;
  color: var(--color-text);
}

.resume-embed-wrap {
  margin-top: 0;
  margin-bottom: 1.5rem;
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid var(--color-border);
  box-shadow: var(--shadow-md);
  background: var(--color-surface);
}

.resume-embed-wrap object,
.resume-embed-wrap iframe {
  display: block;
  width: 100%;
  min-height: 70vh;
  height: 800px;
}

.resume-embed-wrap .fallback-link {
  display: inline-block;
  margin-top: 1rem;
  font-size: 1rem;
  font-weight: 600;
}

.resume-contact {
  padding: 1.25rem 1.5rem;
  background: var(--color-primary-soft);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 8px 8px 0;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-hero);
  color: var(--color-navy);
  margin-bottom: 0.5em;
  font-weight: 600;
}

h2 {
  font-size: clamp(1.6rem, 4vw, 2rem);
  letter-spacing: -0.01em;
  padding-bottom: 0.35em;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: 1.25rem;
}

/* Updates Section */
#updates {
  margin-top: var(--space-section);
}

#updates > p:not(.section-eyebrow):not(.section-lede) {
  color: var(--color-text-muted);
  margin-bottom: 1.5rem;
  font-size: 1.05em;
}

/* Legacy list (used by other pages) */
.update-list {
  list-style: none;
  padding: 0;
}

.update-list li {
  background: var(--color-navy-soft);
  border-left: 3px solid var(--color-navy);
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
  border-radius: 0 8px 8px 0;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}

.update-list li:hover {
  background: var(--color-secondary-soft);
  transform: translateX(4px);
  box-shadow: var(--shadow-sm);
}

.update-list li strong {
  color: var(--color-accent);
}

/* ========== Timeline (Recent Updates) ========== */
.timeline {
  position: relative;
  padding-left: 0;
  /* All dots/lines use these values so everything stays aligned */
  --tl-indent: 2.25rem;   /* padding-left of each year column */
  --tl-line-x: 10px;      /* x of the vertical line center */
}

.timeline-year {
  position: relative;
  padding-left: var(--tl-indent);
  margin-bottom: 1.5rem;
}

.timeline-year::before {
  content: '';
  position: absolute;
  left: calc(var(--tl-line-x) - 1px); /* 2px line centered on tl-line-x */
  top: 0.4rem;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg,
    var(--color-border) 0%,
    var(--color-border) 85%,
    transparent 100%);
}

.timeline-year:last-child::before {
  background: var(--color-border);
}

.timeline-year-label {
  position: relative;
  font-family: var(--font-hero);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 0.02em;
  margin-bottom: 0.75rem;
  margin-left: calc(var(--tl-indent) * -1);
  padding-left: var(--tl-indent);
}

.timeline-year-label::before {
  content: '';
  position: absolute;
  left: calc(var(--tl-line-x) - 7px); /* 14px dot centered on the line */
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-secondary);
  box-shadow: 0 0 0 3px var(--color-bg);
  transition: background var(--transition), transform var(--transition);
}

/* Current year gets the coral accent so it stands out */
.timeline-year--current .timeline-year-label::before {
  background: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 6px rgba(217, 104, 70, 0.18);
}

.timeline-year--current .timeline-year-label {
  color: var(--color-accent);
}

.timeline-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.timeline-item {
  position: relative;
  display: flex;
  gap: 0.85rem;
  padding: 0.7rem 1rem 0.7rem 0.75rem;
  background: transparent;
  border-radius: 8px;
  transition: background var(--transition), transform var(--transition);
}

.timeline-item::before {
  content: '';
  position: absolute;
  /* Center the 11px-wide dot (7px + 2px border each side) on the vertical line */
  left: calc(var(--tl-line-x) - var(--tl-indent) - 5.5px);
  top: 1rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}

.timeline-item:hover {
  background: var(--color-primary-soft);
  transform: translateX(2px);
}

.timeline-item:hover::before {
  border-color: var(--color-accent);
  background: var(--color-accent);
  transform: scale(1.15);
}

.timeline-date {
  flex: 0 0 auto;
  min-width: 5.25em;
  font-family: var(--font-hero);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-top: 0.15rem;
}

.timeline-item p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-text);
}

.timeline-year.is-collapsed {
  display: none;
}

.timeline.is-expanded .timeline-year.is-collapsed {
  display: block;
  animation: fadeInUp 0.45s ease-out;
}

.timeline-toggle {
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  padding: 0.55rem 1rem;
  border-radius: 999px;
  font-family: var(--font-hero);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}

.timeline-toggle:hover {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  transform: translateY(-1px);
}

.timeline-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-surface);
  font-size: 0.9rem;
  line-height: 1;
  transition: transform var(--transition);
}

.timeline-toggle[aria-expanded="true"] .timeline-toggle-icon {
  transform: rotate(45deg);
}

@media (max-width: 600px) {
  .timeline-item {
    flex-direction: column;
    gap: 0.25rem;
  }
  .timeline-date {
    min-width: 0;
  }
}

/* ========== Belief block (rotating statements) ========== */
.belief {
  max-width: var(--content-max-width);
  margin: var(--space-section) auto;
  padding: clamp(24px, 5vw, 48px) var(--section-padding-x);
  position: relative;
}

.belief-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-hero);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-secondary);
  margin: 0 0 1.1rem;
}

.belief-dot-mark {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(217, 104, 70, 0.12);
  flex-shrink: 0;
}

/* Grid-stack: all lines occupy the same cell, container sizes to tallest */
.belief-stack {
  display: grid;
  max-width: 56rem;
}

.belief-stack > .belief-line {
  grid-row: 1;
  grid-column: 1;
  font-family: var(--font-accent);
  font-size: clamp(1.55rem, 3.4vw, 2.4rem);
  line-height: 1.25;
  color: var(--color-primary);
  margin: 0;
  font-weight: 400;
  letter-spacing: -0.01em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
}

.belief-stack > .belief-line.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.belief-line em {
  font-style: normal;
  color: var(--color-accent);
}

.belief-pager {
  display: flex;
  gap: 0.45rem;
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}

.belief-pager-dot {
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: var(--color-border);
  transition: background var(--transition), width var(--transition);
}

.belief-pager-dot.is-active {
  background: var(--color-accent);
  width: 28px;
}

@media (prefers-reduced-motion: reduce) {
  .belief-stack > .belief-line {
    transition: none;
    transform: none;
  }
}

/* ========== Affiliation chips ========== */
.affiliation-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.6rem;
  margin-top: 1.25rem;
}

.chips-label {
  font-family: var(--font-hero);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-right: 0.5rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-hero);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-primary);
  background: var(--color-secondary-soft);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  text-decoration: none !important;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
  letter-spacing: 0.01em;
}

.chip:hover {
  background: var(--color-primary);
  color: var(--color-surface);
  border-color: var(--color-primary);
  transform: translateY(-1px);
}

.chip--quiet {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text-muted);
  cursor: default;
}

.chip--quiet:hover {
  background: transparent;
  color: var(--color-text-muted);
  border-color: var(--color-border);
  transform: none;
}

/* Publications Section */
#publications h2 {
  margin-top: 1.5rem;
}

#publications h2:first-of-type {
  margin-top: 0;
}

.publication-list {
  list-style: none;
  padding: 0;
}

.pub-item {
  background: var(--color-primary-soft);
  border-left: 3px solid var(--color-primary);
  padding: 1.35rem 1.5rem;
  margin-bottom: 1.25rem;
  border-radius: 0 8px 8px 0;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}

.pub-item:hover {
  background: var(--color-secondary-soft);
  transform: translateX(4px);
  box-shadow: var(--shadow-sm);
}

.pub-title {
  font-size: 1.2em;
  margin-bottom: 0.5rem;
  color: var(--color-primary);
  font-weight: 600;
}

.pub-badge {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  background: var(--color-secondary);
  color: var(--color-surface);
  margin-bottom: 0.6rem;
  letter-spacing: 0.02em;
}

.pub-badge--muted {
  background: var(--color-text-muted);
  color: var(--color-surface);
}

.pub-authors {
  font-size: 0.95em;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
  line-height: 1.5;
}

.pub-authors strong {
  color: var(--color-accent);
}

.pub-note {
  font-size: 0.9em;
  color: var(--color-text-muted);
  font-style: italic;
  margin-bottom: 0;
}

.pub-abstract-details {
  margin: 0.75rem 0 1rem;
}

.pub-abstract-details summary {
  font-size: 0.9em;
  color: var(--color-accent);
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  transition: color var(--transition);
}

.pub-abstract-details summary::-webkit-details-marker {
  display: none;
}

.pub-abstract-details summary:hover {
  color: var(--color-accent-hover);
}

.pub-abstract-details[open] summary {
  margin-bottom: 0.5rem;
}

.pub-abstract {
  font-size: 0.95em;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
}

.pub-link {
  display: inline-block;
  font-size: 0.95em;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition), transform var(--transition);
}

.pub-link:hover {
  color: var(--color-accent-hover);
  transform: translateX(2px);
}

#contact p {
  font-size: 1.05em;
  margin-bottom: 1.25rem;
  color: var(--color-text);
}

.contact-intro {
  font-size: 1.1em;
  line-height: 1.65;
  color: var(--color-text);
  margin-bottom: 2rem;
}

.contact-list {
  list-style: none;
  padding: 0;
}

.contact-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 1.5rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 0.75rem;
  background: var(--color-primary-soft);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 8px 8px 0;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.contact-item:hover {
  background: var(--color-secondary-soft);
  transform: translateX(4px);
  box-shadow: var(--shadow-sm);
}

.contact-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  min-width: 4.5em;
}

.contact-item a {
  font-size: 1.05em;
  font-weight: 600;
  word-break: break-all;
}

.contact-links {
  list-style: none;
  padding: 0;
}

.contact-links li {
  margin-bottom: 0.75rem;
}

.contact-links a {
  text-decoration: none;
  font-size: 1.1em;
  color: var(--color-accent);
  font-weight: 600;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  display: inline-block;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}

.contact-links a:hover {
  color: var(--color-surface);
  background: var(--color-primary);
  transform: translateX(4px);
}

/* Links */
a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition), text-decoration-color var(--transition);
}

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

/* Underlined body links: scoped to prose areas so nav/buttons stay clean */
section p a,
.bio p a,
.timeline-item p a,
.blog-list .post-excerpt a,
#research-panel p a,
.contact-intro a,
.pub-authors a,
.section-lede a {
  text-decoration: underline;
  text-decoration-color: rgba(217, 104, 70, 0.35);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

section p a:hover,
.bio p a:hover,
.timeline-item p a:hover,
.blog-list .post-excerpt a:hover,
#research-panel p a:hover,
.contact-intro a:hover,
.pub-authors a:hover,
.section-lede a:hover {
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
}

strong, b {
  color: var(--color-accent);
  font-weight: 600;
}

footer {
  text-align: center;
  padding: clamp(20px, 4vw, 28px);
  background: var(--color-primary);
  color: var(--color-surface);
  font-size: 0.95em;
  margin-top: var(--space-section);
  transition: opacity var(--transition);
}

footer p {
  padding: 0 10px;
}

#contact ul {
  text-align: left;
  padding-left: 0;
}

#contact ul li {
  font-size: 1.05em;
  margin-bottom: 0.5rem;
}

/* Header */
header {
  background: var(--color-primary);
  padding: 0.9rem clamp(24px, 5vw, 80px);
  position: sticky;
  top: 0;
  z-index: 10;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 18px rgba(47, 48, 32, 0.12);
  transition: box-shadow var(--transition);
}

header.is-scrolled {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 32px rgba(47, 48, 32, 0.22);
}

header .logo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

header .logo a {
  font-family: var(--font-hero);
  color: var(--color-surface);
  font-size: clamp(1.35rem, 3vw, 1.65rem);
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -0.02em;
  transition: color var(--transition), transform var(--transition);
}

header .logo a:hover {
  color: var(--color-accent);
  transform: translateY(-1px);
}

.pronunciation-badge {
  font-family: var(--font-accent);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(217, 104, 70, 0.25);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  border: 1px solid rgba(217, 104, 70, 0.4);
  white-space: nowrap;
}

nav ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: clamp(16px, 3vw, 28px);
}

nav ul li a {
  position: relative;
  text-decoration: none;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 500;
  padding: 0.4rem 0.2rem;
  transition: color var(--transition);
}

nav ul li a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.05rem;
  height: 2px;
  border-radius: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}

nav ul li a:hover {
  color: var(--color-accent);
}

nav ul li a:hover::after,
nav ul li a:focus-visible::after {
  transform: scaleX(1);
}

nav ul li a.active {
  color: var(--color-accent);
}

nav ul li a.active::after {
  transform: scaleX(1);
  background: var(--color-accent);
}

/* Progress bar */
#progress-bar {
  height: 3px;
  background: rgba(47, 48, 32, 0.2);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 20;
}

#progress-bar .progress {
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover));
  width: 0%;
  transition: width 0.12s ease-out;
}

/* Mobile header: wrap horizontally instead of stacking vertically so the
   sticky bar stays short and doesn't eat half the viewport. */
@media (max-width: 768px) {
  header {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1rem;
    padding: 0.7rem 1rem;
    min-height: 0;
  }

  header .logo {
    justify-content: center;
  }

  nav ul {
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(12px, 3vw, 20px);
  }

  nav ul li {
    margin-left: 0;
    margin-top: 0;
  }
}

@media (max-width: 480px) {
  .pronunciation-badge {
    display: none;
  }

  .section-head {
    padding: 0.85rem 1rem 0.95rem 1rem;
  }
}

/* ========== About Me: horizontal 2-column grid ========== */
#about-me {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-section);
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.about-photo {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--color-border);
  transition: transform var(--transition), box-shadow var(--transition);
  margin-top: 0.25rem;
}

.about-photo:hover {
  transform: scale(1.03);
  box-shadow: var(--shadow-md);
}

.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-text > p {
  font-size: 1.08em;
  line-height: 1.65;
  color: var(--color-text);
  margin: 0;
  text-align: left;
}

.about-text > p + p {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}

.about-text .affiliation-chips {
  margin-top: 1.5rem;
}

@media (max-width: 640px) {
  .about-grid {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .about-photo {
    margin: 0 0 1rem;
  }
}


/* Paragraphs (shared) */
p {
  font-size: 1.05em;
  line-height: 1.65;
  color: var(--color-text);
  margin-bottom: 1rem;
  text-align: left;
}

/* Resume button */
button.resume-button {
  background: var(--color-navy);
  color: var(--color-surface);
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: inline-block;
  margin-top: 1rem;
  transition: background var(--transition), transform var(--transition), color var(--transition);
}

button.resume-button:hover {
  background: var(--color-accent);
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
  section {
    padding: clamp(20px, 4vw, 28px) clamp(20px, 4vw, 32px);
  }

  nav ul {
    gap: 12px;
  }
}

/* Resume page (inherits section styles) */
#resume p {
  font-size: 1.05em;
}

#resume a:hover {
  color: var(--color-accent);
}