/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #FBF6F1;
  color: #4B301A;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

a {
  color: #CE5B32;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Focus styles for keyboard navigation */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #CE5B32;
  outline-offset: 2px;
}

.hero-links a:focus-visible {
  outline-color: #fff;
}

.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Offset anchor links to clear the sticky navbar */
section[id] {
  scroll-margin-top: 48px;
}

.pub-list li {
  scroll-margin-top: 64px;
}


/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  background: #CE5B32;
  color: #fff;
  padding: 8px 16px;
  border-radius: 4px;
  z-index: 200;
  font-weight: 600;
  font-size: 0.85rem;
}

.skip-link:focus {
  top: 8px;
  text-decoration: none;
}


#navbar {
  position: sticky;
  top: 0;
  background: #FFF9F4;
  border-bottom: 1px solid #e8e8e8;
  z-index: 100;
}

.nav-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-brand {
  font-weight: 700;
  font-size: 1.1rem;
  color: #4B301A;
  transition: color 0.15s;
}

.nav-brand:hover {
  text-decoration: none;
  color: #CE5B32;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 28px;
}

.nav-links a {
  color: #6B4D35;
  font-size: 0.85rem;
  font-weight: 500;
  transition: color 0.15s;
}

.nav-links a:hover {
  color: #CE5B32;
  text-decoration: none;
}

.nav-links a.active {
  color: #CE5B32;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: #4B301A;
}

/* Sections */
section {
  padding: 32px 0;
}

section:nth-child(even) {
  background: #EDE0D4;
}

h1 {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 4px;
}

h2 {
  font-size: 1.4rem;
  font-weight: 700;
  color: #CE5B32;
  margin-bottom: 16px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(206, 91, 50, 0.3);
}

/* Hero / About */
#about {
  position: relative;
  padding: 48px 0 32px;
  background-color: #CE5B32;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='968' height='210' viewBox='0 0 968 210'><g fill='none' stroke='white' stroke-width='1.5' stroke-linejoin='round' opacity='0.2'><path d='M66.5,30L119,74L124,137L56.5,182L-4,145L3,64Z M178.5,39L247,67L237,146L186.5,171L124,137L119,74Z M306.5,29L359,75L365,136L299.5,181L237,146L247,67Z M418.5,38L486,63L481,147L427.5,170L365,136L359,75Z M550.5,31L600,73L609,135L539.5,179L481,147L486,63Z M661.5,40L730,66L724,143L668.5,169L609,135L600,73Z M789.5,28L844,76L852,134L782.5,182L724,143L730,66Z M901.5,39L971,64L964,145L912.5,172L852,134L844,76Z M-4,-65L56.5,-28L66.5,30L3,64L-66.5,39L-55.5,-38Z M124,-73L186.5,-39L178.5,39L119,74L66.5,30L56.5,-28Z M237,-64L299.5,-29L306.5,29L247,67L178.5,39L186.5,-39Z M365,-74L427.5,-40L418.5,38L359,75L306.5,29L299.5,-29Z M481,-63L539.5,-31L550.5,31L486,63L418.5,38L427.5,-40Z M609,-75L668.5,-41L661.5,40L600,73L550.5,31L539.5,-31Z M724,-67L782.5,-28L789.5,28L730,66L661.5,40L668.5,-41Z M852,-76L912.5,-38L901.5,39L844,76L789.5,28L782.5,-28Z M-4,145L56.5,182L66.5,240L3,274L-66.5,249L-55.5,172Z M124,137L186.5,171L178.5,249L119,284L66.5,240L56.5,182Z M237,146L299.5,181L306.5,239L247,277L178.5,249L186.5,171Z M365,136L427.5,170L418.5,248L359,285L306.5,239L299.5,181Z M481,147L539.5,179L550.5,241L486,273L418.5,248L427.5,170Z M609,135L668.5,169L661.5,250L600,283L550.5,241L539.5,179Z M724,143L782.5,182L789.5,238L730,276L661.5,250L668.5,169Z M852,134L912.5,172L901.5,249L844,286L789.5,238L782.5,182Z'/></g></svg>");
  background-size: 968px 210px;
  background-repeat: repeat;
  color: #fff;
}

/* Avatar */
#about .container {
  position: relative;
  z-index: 2;
}

/* Avatar */
.avatar-wrap {
  position: relative;
  width: 120px;
  height: 140px;
  margin-bottom: 12px;
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(54% 0%, 97% 28%, 100% 72%, 47% 100%, 1% 76%, 3% 23%);
}

.title {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  margin-bottom: 10px;
  padding-bottom: 0;
  border-bottom: none;
}

.bio {
  max-width: 680px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 16px;
}

.hero-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-links a {
  font-weight: 600;
  font-size: 0.85rem;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  color: #fff;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.hero-links a:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border-color: #fff;
  text-decoration: none;
}

.hero-links a:active {
  transform: scale(0.97);
}

/* Employer groups */
.employer-group {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #999;
}

.employer-group:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.employer-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.employer-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #4B301A;
}

.employer-meta {
  font-size: 0.85rem;
  color: #9C7A5E;
  border: 1px solid #ccc;
  border-radius: 999px;
  padding: 2px 12px;
}

/* Experience & Education Items */
.experience-item,
.education-item {
  margin-bottom: 10px;
  padding: 0 0 10px 16px;
  border-bottom: 1px solid #eee;
}

.employer-group .experience-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.experience-item:last-child,
.education-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

.item-title {
  font-weight: 700;
  font-size: 1.1rem;
}

.item-date {
  font-size: 0.85rem;
  color: #9C7A5E;
  white-space: nowrap;
}

.item-subtitle {
  color: #CE5B32;
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 4px;
}

.experience-item ul {
  padding-left: 20px;
  color: #6B4D35;
}

.experience-item ul li {
  margin-bottom: 4px;
}

.item-grade,
.item-role {
  font-size: 0.85rem;
  font-style: italic;
  color: #CE5B32;
  font-weight: 400;
}

.education-item p {
  color: #6B4D35;
  font-size: 0.85rem;
  margin-top: 2px;
}

/* Publications & Patents — reverse-numbered [n] markers */
#publications .pub-list,
#patents .pub-list {
  list-style: none;
  padding-left: 3em;
}

#publications .pub-list li,
#patents .pub-list li {
  position: relative;
}

#publications .pub-list li::before,
#patents .pub-list li::before {
  content: "[" counter(list-item) "]";
  position: absolute;
  left: -3em;
  color: #CE5B32;
  font-weight: 600;
  font-size: 0.85rem;
}


.pub-list {
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pub-list li {
  /* keep display: list-item (browser default) so ::marker and reversed counter work */
}

.pub-title {
  display: block;
  font-weight: 600;
  font-size: 1rem;
}

.pub-authors {
  display: block;
  font-size: 0.85rem;
  color: #6B4D35;
  font-style: italic;
}

.pub-authors .self {
  text-decoration: underline;
}

.pub-venue {
  display: block;
  font-size: 0.85rem;
  color: #8B6B50;
}

.pub-link {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 2px;
  margin-right: 8px;
  border: 1px solid #ccc;
  border-radius: 999px;
  padding: 1px 10px;
  transition: background 0.15s, border-color 0.15s;
}

.pub-link:hover {
  background: #EDE0D4;
  border-color: #CE5B32;
  text-decoration: none;
}

.pub-link:active {
  transform: scale(0.97);
}

/* Contact */
#contact {
  background-color: #CE5B32;
  color: #fff;
}

#contact h2 {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.3);
}

#contact p {
  color: rgba(255, 255, 255, 0.85);
}

.contact-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 0.85rem;
  font-weight: 600;
}

.contact-links a {
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  color: #fff;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.contact-links a:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border-color: #fff;
  text-decoration: none;
}

.contact-links a:focus-visible {
  outline-color: #fff;
}

.contact-links a:active {
  transform: scale(0.97);
}

/* Footer */
footer {
  background: #2A1B0F;
  color: #9C7A5E;
  text-align: center;
  padding: 16px 0;
  font-size: 0.85rem;
}

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

  *, *::before, *::after {
    transition-duration: 0s !important;
  }
}

/* Print */
@page {
  size: letter;
  margin: 0.4in 0.6in;
}

@media print {
  #navbar {
    display: none;
  }

  body {
    font-size: 7.5px;
    line-height: 1.2;
    orphans: 2;
    widows: 2;
  }

  /* Display — 1.4rem */
  h1 {
    font-size: 1.4rem;
    margin-bottom: 2px;
  }

  /* Heading — 0.9rem */
  h2,
  .title,
  .employer-name,
  .item-title,
  .pub-title {
    font-size: 0.9rem;
  }

  h2 {
    margin-bottom: 6px;
    padding-bottom: 3px;
  }

  .title {
    margin-bottom: 4px;
  }

  /* Body — 0.75rem */
  .bio,
  .experience-item ul,
  .education-item p,
  .pub-authors,
  .pub-venue,
  .item-date,
  .item-subtitle,
  .employer-meta,
  .item-grade,
  .item-role,
  .hero-links a,
  footer {
    font-size: 0.75rem;
  }

  .bio {
    color: #6B4D35;
    line-height: 1.2;
    margin-bottom: 8px;
  }

  .item-subtitle {
    margin-bottom: 1px;
  }

  /* Marker — 0.65rem */
  #publications .pub-list li::before,
  #patents .pub-list li::before {
    font-size: 0.65rem;
    left: -2.2em;
  }

  section {
    padding: 8px 0;
  }

  /* Strip hero background */
  #about {
    padding: 34px 0 10px;
    background-color: transparent;
    background-image: none;
    color: #4B301A;
  }

  .experience-item,
  .education-item {
    margin-bottom: 4px;
    padding: 2px 0 4px 10px;
    break-inside: avoid;
  }

  .experience-item ul {
    padding-left: 14px;
  }

  .experience-item ul li {
    margin-bottom: 1px;
  }

  .employer-group {
    margin-bottom: 6px;
    padding-bottom: 6px;
    break-inside: avoid;
  }

  .employer-header {
    margin-bottom: 3px;
  }

  .item-header {
    margin-bottom: 1px;
  }

  .education-item p {
    margin-top: 0;
  }

  #publications {
    break-before: page;
  }

  .pub-list {
    display: block;
  }

  .pub-list li {
    margin-bottom: 3px;
    break-inside: avoid;
  }

  #publications .pub-list,
  #patents .pub-list {
    padding-left: 2.2em;
  }

  #about .container {
    position: relative;
  }

  #about h1 {
    color: #CE5B32;
  }

  #about .title {
    color: #4B301A;
  }

  .hero-links {
    position: absolute;
    top: 0;
    right: 24px;
    gap: 6px;
    margin-top: 0;
  }

  .hero-links a {
    border: 1px solid #ccc;
    border-radius: 999px;
    padding: 1px 10px;
    color: #CE5B32;
  }

  .pub-link {
    display: none;
  }

  .avatar-wrap {
    display: none;
  }

  #contact {
    display: none;
  }

  .contact-links {
    gap: 8px;
    margin-top: 4px;
  }

  footer {
    display: none;
  }
}
@media (max-width: 640px) {
  h1 {
    font-size: 2rem;
  }

  .nav-links {
    display: none;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    background: #FFF9F4;
    border-bottom: 1px solid #e8e8e8;
    padding: 12px 24px;
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links li {
    padding: 0;
    border-bottom: 1px solid #f0f0f0;
  }

  .nav-links li a {
    display: block;
    padding: 10px 0;
  }

  .nav-links li:last-child {
    border-bottom: none;
  }

  .nav-toggle {
    display: block;
  }

  .item-header {
    flex-direction: column;
  }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #1C1208;
    color: #e0e0e0;
  }

  #navbar {
    background: #2D1D10;
    border-bottom-color: #333;
  }

  .nav-brand {
    color: #e0e0e0;
  }

  .nav-links a {
    color: #bbb;
  }

  .nav-links a:hover,
  .nav-links a.active {
    color: #E07A55;
  }

  section:nth-child(even) {
    background: #261910;
  }

  h2 {
    color: #E07A55;
    border-bottom-color: rgba(224, 122, 85, 0.3);
  }

  .employer-name {
    color: #e0e0e0;
  }

  .employer-meta {
    color: #999;
    border-color: #7A5B40;
  }

  .item-title {
    color: #e0e0e0;
  }

  .item-date {
    color: #999;
  }

  .item-subtitle {
    color: #E07A55;
  }

  .item-grade,
  .item-role {
    color: #E07A55;
  }

  .experience-item,
  .education-item {
    border-bottom-color: #333;
  }

  .employer-group {
    border-bottom-color: #6B4D35;
  }

  .experience-item ul {
    color: #bbb;
  }

  .education-item p {
    color: #aaa;
  }

  .pub-title {
    color: #e0e0e0;
  }

  .pub-authors {
    color: #bbb;
  }

  .pub-venue {
    color: #999;
  }

  .pub-link {
    border-color: #7A5B40;
  }

  .pub-link:hover {
    background: #3F2A18;
    border-color: #E07A55;
  }

  /* Focus outline in dark mode */
  a:focus-visible,
  button:focus-visible {
    outline-color: #E07A55;
  }

  #publications .pub-list li::before,
  #patents .pub-list li::before {
    color: #E07A55;
  }

  a {
    color: #E07A55;
  }

  footer {
    background: #130C05;
    color: #666;
  }

  .skip-link {
    background: #E07A55;
  }

  /* Mobile nav dark */
  .nav-toggle {
    color: #e0e0e0;
  }

  @media (max-width: 640px) {
    .nav-links {
      background: #2D1D10;
      border-bottom-color: #333;
    }

    .nav-links li {
      border-bottom-color: #333;
    }
  }
}