:root{
  --bg:#000;
  --fg:#dcdcdc;
  --muted:#8a8a8a;
  --accent:#39ff14;
  --accent-hover:#2dd10f;
  --maxw:900px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;
  --border: #111;
  --border-light: #222;
  --shadow: rgba(0,0,0,0.6);
  --transition: all 0.3s ease;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--mono);
  line-height:1.6;
  padding:3rem 1rem;
  display:flex;
  justify-content:center;
  scroll-behavior: smooth;
}
.wrap{width:100%;max-width:var(--maxw)}

header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:1.2rem;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  width: 100%;
  max-width: var(--maxw);
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(10px);
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  z-index: 100;
  transition: transform 0.3s ease;
}

header.visible{
  transform: translateX(-50%) translateY(0);
}

body{
  padding-top: 80px;
}

/* Increase top padding on small screens to avoid header overlap */
@media (max-width: 1024px) {
  body{
    padding-top: 12px;
  }
  header{
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: var(--maxw) !important;
    margin: 0 auto !important;
    z-index: auto !important;
  }
}
.brand{
  display: flex;
  align-items: center;
  gap: 1rem;
}

.logo-link {
  text-decoration: none;
  display: inline-block;
}

.logo {
  height: 40px;
  width: auto;
  /* filter: brightness(0) saturate(100%) invert(100%); */
  transition: var(--transition);
}

.logo:hover {
  /* filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(10000%) hue-rotate(90deg); */
}

nav a{
  color:var(--muted) !important;
  text-decoration:none;
  margin-left:1rem;
  font-size:0.95rem;
  transition: var(--transition);
  position: relative;
}

nav a:hover{
  color:var(--fg);
}

/* General link styles */
a {
  color: var(--accent);
  text-decoration: none;
  transition: var(--transition);
}

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

a:visited {
  color: #8a2be2; /* Purple for visited links */
}

a:visited:hover {
  color: #9932cc; /* Darker purple on hover */
}

/* Keep green color for visited links in content bodies (news, publications, front page) */
article a:visited,
.pane a:visited,
#hero a:visited {
  color: var(--accent);
}

article a:visited:hover,
.pane a:visited:hover,
#hero a:visited:hover {
  color: var(--accent-hover);
}

/* Hero section styling */
#hero {
  padding-top: 1rem !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0.5rem !important;
}

#hero pre {
  font-size: 0.8rem !important;
  margin-bottom: 0.3rem !important;
  padding: 0;
  background: transparent;
  border: none;
  font-family: 'Courier New', monospace;
}

#hero h1 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

#hero h2 {
  margin-bottom: 0.8rem;
}

#hero p {
  margin-bottom: 0;
  text-align: justify;
}

nav a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: var(--accent);
  transition: var(--transition);
}
nav a:hover::after {
  width: 100%;
}

hr.sep{border:none;border-top:1px dashed var(--border-light);margin:1rem 0}

main>section{margin:1rem 0;padding:0.6rem 0}

h1,h2{margin:.2rem 0}
h1{font-size:1.6rem;color:var(--fg)}
h2{font-size:1.05rem;color:var(--muted)}
h3{font-size:1.0rem;color:var(--fg);margin: 1rem 0 0.5rem 0}
p,ul{color:var(--fg);margin:0.6rem 0}

.pane{
  background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));
  border:1px solid var(--border);
  padding:1.5rem;
  border-radius:8px;
  box-shadow:0 6px 18px var(--shadow);
  transition: var(--transition);
  margin-bottom: 1.5rem;
}
.pane:hover {
  box-shadow: 0 8px 25px var(--shadow);
  border-color: var(--border-light);
}

.people{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.2rem;
  margin-top:1rem;
}
.person{
  padding:1rem;
  border:1px solid var(--border);
  border-radius:8px;
  transition: var(--transition);
  background: rgba(255,255,255,0.01);
}
.person:hover {
  border-color: var(--accent);
  background: rgba(57, 255, 20, 0.05);
  transform: translateY(-2px);
}
.person .name{
  color:var(--accent);
  font-weight:700;
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
}
.person .muted{
  color:var(--muted);
  font-size:.9rem;
  margin-bottom: 0.2rem;
}
.person p {
  margin: 0.8rem 0;
  font-size: 0.95rem;
  line-height: 1.5;
}
.person-links {
  margin-top: 0.8rem;
  font-size: 0.9rem;
}
.person-links a {
  color: var(--muted);
  text-decoration: none;
  transition: var(--transition);
}
.person-links a:hover {
  color: var(--accent);
}

.muted{color:var(--muted);font-size:.95rem}

.pubs{list-style:none;padding-left:0;margin:0}
.pubs li{
  padding:.6rem 0;
  border-bottom:1px dashed var(--border);
  transition: var(--transition);
}
.pubs li:hover {
  background: rgba(255,255,255,0.02);
  padding-left: 0.5rem;
}
.pubs li:last-child {
  border-bottom: none;
}

/* Publication list with images */
.pub-with-image {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1rem 0;
}

.pub-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pub-list-image {
  width: 120px;
  height: 80px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.pub-list-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: var(--transition);
}

.pub-with-image:hover .pub-list-image img {
  filter: grayscale(0%);
}

.collaborators {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.collaborator {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(255,255,255,0.01);
}

footer{
  margin-top:2rem;
  font-size:.9rem;
  color:var(--muted);
  border-top:1px dashed var(--border);
  padding-top:1rem;
}

figure{margin:0}
figure img{
  width:100%;
  height:auto;
  display:block;
  filter:grayscale(100%);
  border:1px solid var(--border);
  border-radius:6px;
  transition: var(--transition);
}
figure:hover img{
  filter:none;
  transform: scale(1.02);
}
figure figcaption{
  color:var(--muted);
  font-size:.9rem;
  margin-top:.4rem;
}

/* Post page video and image styles */
.post-video {
  width: 100%;
  max-width: 800px;
  margin: 1.5rem 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 16 / 9;
}

.post-video iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.post-image {
  width: 100%;
  max-width: 800px;
  margin: 1.5rem 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.post-image img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(100%);
  transition: var(--transition);
}

.post-image:hover img {
  filter: grayscale(0%);
}

.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1rem;
}
.img-frame{
  background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));
  border:1px solid var(--border);
  border-radius:8px;
  padding:.8rem;
  transition: var(--transition);
}
.img-frame:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.badge{
  display:inline-block;
  font-size:.75rem;
  color:var(--bg);
  background:var(--accent);
  padding:.2rem .4rem;
  border-radius:4px;
  margin-bottom:.4rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.badge-experiment {
  background: #ff6b35;
}
.badge-simulation {
  background: #4ecdc4;
}
.badge-theory {
  background: #45b7d1;
}

.avatar{
  width:80px;
  height:80px;
  border-radius:50%;
  border:2px solid var(--border);
  object-fit:cover;
  filter:grayscale(100%);
  margin-bottom:.6rem;
  transition: var(--transition);
  background: transparent;
}
.person:hover .avatar {
  filter: grayscale(0%);
  border-color: var(--accent);
}

.cursor{
  display:inline-block;
  width:.5ch;
  background:var(--accent);
  margin-left:.25ch;
  animation:blink 1s steps(2,start) infinite;
}
@keyframes blink{50%{background:transparent}}

/* Responsive Design */
@media (max-width: 768px) {
  body {
    padding: 1rem 0.5rem;
  }
  
  header {
    flex-direction: column;
    gap: 1rem;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    width: 100%;
    max-width: var(--maxw);
    margin-bottom: 2rem;
  }
  
  nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  nav a {
    margin: 0;
    padding: 0.5rem;
  }
  
  .people {
    grid-template-columns: 1fr;
  }
  
  .gallery {
    grid-template-columns: 1fr;
  }
  
  .collaborators {
    grid-template-columns: 1fr;
  }
  
  .pane {
    padding: 1rem;
  }
}

@media (max-width: 480px) {
  .brand {
    font-size: 1rem;
  }
  
  h1 {
    font-size: 1.4rem;
  }
  
  .person {
    padding: 0.8rem;
  }
  
  .avatar {
    width: 60px;
    height: 60px;
  }
}

/* Accessibility Improvements */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .cursor {
    animation: none;
  }
}

/* Focus styles for keyboard navigation */
a:focus,
button:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Publication-specific styles */
.publication-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
  padding: 1rem;
  background: rgba(255,255,255,0.02);
  border-radius: 6px;
  border: 1px solid var(--border);
}

.stat {
  text-align: center;
}

.stat strong {
  display: block;
  font-size: 1.5rem;
  color: var(--accent);
  margin-bottom: 0.2rem;
}

.pub-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.3rem;
}

.pub-links {
  display: flex;
  gap: 0.5rem;
}

.pub-link {
  font-size: 0.8rem;
  color: var(--accent);
  text-decoration: none;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  transition: var(--transition);
}

.pub-link:hover {
  color: var(--accent-hover);
  border-color: var(--accent);
}

.pub-link:visited {
  color: var(--accent);
}

.pub-link:visited:hover {
  color: var(--accent-hover);
  border-color: var(--accent);
}

/* Ensure PDF and DOI links are always green */
a[href*="pdf"]:visited,
a[href*="doi.org"]:visited,
a[href*="doi"]:visited {
  color: var(--accent) !important;
}

a[href*="pdf"]:visited:hover,
a[href*="doi.org"]:visited:hover,
a[href*="doi"]:visited:hover {
  color: var(--accent-hover) !important;
}

.pub-title {
  margin-bottom: 0.3rem;
}

.pub-title a {
  color: var(--fg);
  text-decoration: none;
  font-weight: 600;
  transition: var(--transition);
}

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

.pub-title a:visited {
  color: var(--fg);
}

/* News title link styles (home preview and news list) */
.news-preview-title a,
.news-title a {
  color: var(--fg) !important;
  text-decoration: none;
  transition: var(--transition);
}

.news-preview-title a:hover,
.news-title a:hover {
  color: var(--accent) !important;
}

.news-preview-title a:visited,
.news-title a:visited {
  color: var(--fg) !important;
}

/* Publication preview title link styles (home preview) */
.pub-preview-title a {
  color: var(--fg) !important;
  text-decoration: none;
  transition: var(--transition);
}

.pub-preview-title a:hover {
  color: var(--accent) !important;
}

.pub-preview-title a:visited {
  color: var(--fg) !important;
}

.pub-title a:visited:hover {
  color: var(--accent-hover);
}

.pub-meta {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

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

.pub-venue {
  color: var(--muted);
}

.pub-volume {
  color: var(--muted);
  font-style: italic;
}

.pub-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.5rem;
}

.tag {
  font-size: 0.75rem;
  color: var(--bg);
  background: var(--muted);
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
  text-transform: lowercase;
}

.research-areas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.area {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(255,255,255,0.01);
  transition: var(--transition);
}

.area:hover {
  border-color: var(--accent);
  background: rgba(57, 255, 20, 0.03);
}

.area h3 {
  color: var(--accent);
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.area p {
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0;
}

/* News-specific styles */
.news-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
  padding: 1rem;
  background: rgba(255,255,255,0.02);
  border-radius: 6px;
  border: 1px solid var(--border);
}

.news-list {
  display: grid;
  gap: 1.5rem;
  margin-top: 1rem;
}

.news-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.01);
  transition: var(--transition);
  margin-bottom: 1.5rem;
}

.news-item:hover {
  border-color: var(--accent);
  background: rgba(57, 255, 20, 0.03);
  transform: translateY(-2px);
}

.news-header {
  margin-bottom: 0;
}

.news-meta {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.9rem;
}

.news-date {
  color: var(--accent);
  font-weight: 600;
}

.news-category {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
}

.news-author {
  color: var(--muted);
  font-size: 0.85rem;
}

.news-image {
  width: 300px;
  min-height: 150px;
  max-height: 400px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.news-image img {
  width: 100%;
  height: auto;
  min-height: 150px;
  max-height: 400px;
  object-fit: contain;
  filter: grayscale(100%);
  transition: var(--transition);
}

.news-item:hover .news-image img {
  filter: grayscale(0%);
}

.news-video {
  width: 300px;
  height: 180px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.news-video iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Mobile: stack news image/video below text on news page */
@media (max-width: 700px) {
  .news-item {
    grid-template-columns: 1fr;
  }
  .news-content {
    order: 1;
  }
  .news-image,
  .news-video {
    order: 2;
    width: 100%;
    max-width: 100%;
  }
}

.news-content {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.news-title {
  margin-bottom: 0.8rem;
}

.news-title a {
  color: var(--fg);
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 600;
  transition: var(--transition);
}

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

.news-excerpt {
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 1rem;
}

.news-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 1rem;
}

.tag-news {
  background: var(--accent);
  color: var(--bg);
}

.news-footer {
  margin-top: 1rem;
}

.read-more {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  transition: var(--transition);
}

.read-more:hover {
  color: var(--fg);
}

/* Homepage news preview */
.news-preview {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}


.news-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.news-preview-date {
  color: var(--accent);
  font-weight: 600;
}

.news-preview-category {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
}

.news-preview-title {
  margin-bottom: 0.5rem;
}

.news-preview-title a {
  color: var(--fg);
  text-decoration: none;
  font-weight: 600;
  transition: var(--transition);
}

.news-preview-title a:hover {
  color: var(--accent);
}

.news-preview-excerpt {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.4;
  margin-bottom: 0.8rem;
}


.news-preview-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: var(--transition);
}

.news-preview-item:hover .news-preview-image img {
  filter: grayscale(0%);
}

/* Enhanced publication preview styles */
.pub-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.3rem;
}

.pub-preview-links {
  display: flex;
  gap: 0.5rem;
}

.pub-preview-title {
  margin-bottom: 0.3rem;
}

.pub-preview-title a {
  color: var(--fg) !important;
  text-decoration: none;
  font-weight: 600;
  transition: var(--transition);
}

.pub-preview-title a:hover {
  color: var(--accent) !important;
}

.pub-preview-title a:visited {
  color: var(--fg) !important;
}

.pub-preview-title a:visited:hover {
  color: var(--accent) !important;
}

.pub-preview-meta {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.pub-preview-authors {
  color: var(--fg);
}

.pub-preview-venue {
  color: var(--muted);
}

.pub-preview-image {
  width: 100%;
  height: 100px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border);
  margin-top: 0.5rem;
}

.pub-preview-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: var(--transition);
}

.pubs li:hover .pub-preview-image img {
  filter: grayscale(0%);
}

/* News categories */
.news-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.category {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(255,255,255,0.01);
  transition: var(--transition);
}

.category:hover {
  border-color: var(--accent);
  background: rgba(57, 255, 20, 0.03);
}

.category h3 {
  color: var(--accent);
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.category p {
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0;
}

/* Homepage news preview with alternating layout */
.news-preview {
  display: grid;
  gap: 2rem;
  margin-top: 1rem;
}

.news-preview-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.01);
  transition: var(--transition);
}

.news-preview-item:hover {
  border-color: var(--accent);
  background: rgba(57, 255, 20, 0.03);
  transform: translateY(-2px);
}

.news-preview-item.news-preview-right {
  grid-template-columns: auto 1fr;
}

.news-preview-item.news-preview-right .news-preview-content {
  order: 2;
}

.news-preview-item.news-preview-right .news-preview-image {
  order: 1;
}

.news-preview-content {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.news-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
}

.news-preview-date {
  color: var(--accent);
  font-weight: 600;
}

.news-preview-category {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
}

.news-preview-title {
  margin: 0;
}

.news-preview-title a {
  color: var(--fg);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  transition: var(--transition);
}

.news-preview-title a:hover {
  color: var(--accent);
}

.news-preview-excerpt {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

.news-preview-footer {
  margin-top: 0.5rem;
}

.news-preview-image {
  width: 300px;
  min-height: 150px;
  max-height: 400px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.news-preview-image img {
  width: 100%;
  height: auto;
  min-height: 150px;
  max-height: 400px;
  object-fit: contain;
  filter: grayscale(100%);
  transition: var(--transition);
}

.news-preview-item:hover .news-preview-image img {
  filter: grayscale(0%);
}

.news-preview-video {
  width: 300px;
  height: 180px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.news-preview-video iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Homepage publications preview with alternating layout */
.pubs-preview {
  display: grid;
  gap: 2rem;
  margin-top: 1rem;
}

.pub-preview-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.01);
  transition: var(--transition);
}

.pub-preview-item:hover {
  border-color: var(--accent);
  background: rgba(57, 255, 20, 0.03);
  transform: translateY(-2px);
}

.pub-preview-item.pub-preview-right {
  grid-template-columns: auto 1fr;
}

.pub-preview-item.pub-preview-right .pub-preview-content {
  order: 2;
}

.pub-preview-item.pub-preview-right .pub-preview-image {
  order: 1;
}

.pub-preview-content {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.pub-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
}

.pub-preview-links {
  display: flex;
  gap: 0.5rem;
}

.pub-preview-title {
  margin: 0;
}

.pub-preview-title a {
  color: var(--fg) !important;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  transition: var(--transition);
}

.pub-preview-title a:hover {
  color: var(--accent) !important;
}

.pub-preview-title a:visited {
  color: var(--fg) !important;
}

.pub-preview-title a:visited:hover {
  color: var(--accent) !important;
}

.pub-preview-meta {
  font-size: 0.9rem;
}

.pub-preview-authors {
  color: var(--fg);
}

.pub-preview-venue {
  color: var(--muted);
}

.pub-preview-volume {
  color: var(--muted);
  font-style: italic;
}

.pub-preview-pages {
  color: var(--muted);
}

.pub-preview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.3rem;
}

.pub-preview-tags .tag {
  background: var(--border-light);
  color: var(--muted);
  padding: 0.2rem 0.5rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

.pub-preview-footer {
  margin-top: 0.5rem;
}

.pub-preview-image {
  width: 300px;
  height: 180px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.pub-preview-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: var(--transition);
}

.pub-preview-item:hover .pub-preview-image img {
  filter: grayscale(0%);
}

/* Responsive adjustments for alternating layout */
@media (max-width: 768px) {
  .news-preview-item,
  .pub-preview-item {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }
  
  .news-preview-item.news-preview-right .news-preview-content,
  .pub-preview-item.pub-preview-right .pub-preview-content {
    order: 1;
  }
  
  .news-preview-item.news-preview-right .news-preview-image,
  .pub-preview-item.pub-preview-right .pub-preview-image {
    order: 2;
  }
  
  .news-preview-image,
  .news-preview-video,
  .news-video,
  .pub-preview-image {
    width: 100%;
    min-height: 150px;
    max-height: 300px;
  }
  
  .news-preview-image img,
  .news-image img {
    max-height: 300px;
  }
  
  .post-video {
    aspect-ratio: 16 / 9;
    max-width: 100%;
  }
}

/* Badge styles for news */
.badge-news {
  background: #9b59b6;
}

/* Contact page styles */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin: 1.5rem 0;
}

.contact-item {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(255,255,255,0.01);
}

.contact-item h3 {
  color: var(--accent);
  margin-bottom: 0.8rem;
  font-size: 1.1rem;
}

.links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin: 1.5rem 0;
}

.link-group {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(255,255,255,0.01);
}

.link-group h3 {
  color: var(--accent);
  margin-bottom: 0.8rem;
  font-size: 1rem;
}

.link-group ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.link-group li {
  margin-bottom: 0.5rem;
}

.link-group a {
  color: var(--fg);
  text-decoration: none;
  transition: var(--transition);
}

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

/* Research page styling */
.research-content {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  margin: 1.5rem 0;
}

/* Research page h2 titles in green */
.research-content h2 {
  color: var(--accent);
}

/* Research page section h2 titles in green */
.research-content + h2,
section:has(.research-content) h2 {
  color: var(--accent);
}

.research-content-right {
  grid-template-columns: auto 1fr;
}

.research-content-right .research-text {
  order: 2;
}

.research-content-right .research-image {
  order: 1;
}

.research-text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.research-text p {
  margin: 0;
  line-height: 1.6;
  text-align: justify;
}

.research-image {
  width: 300px;
  height: 200px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.research-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: var(--transition);
}

.research-image:hover img {
  filter: grayscale(0%);
}

/* Responsive research layout */
@media (max-width: 768px) {
  .research-content,
  .research-content-right {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }
  
  .research-content-right .research-text,
  .research-content-right .research-image {
    order: unset;
  }
  
  .research-image {
    width: 100%;
    height: 200px;
  }
}

/* Research page h2 titles in green */
/* Teaching page styles */
.teaching-page h2 {
  color: var(--accent);
}

.course-details {
  margin-top: 1rem;
  padding: 1.5rem;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
  border: 1px solid var(--border);
  line-height: 1.6;
}

.course-details p {
  margin: 0.8rem 0;
}

.course-details p:first-child {
  margin-top: 0;
}

.course-details p:last-child {
  margin-bottom: 0;
}

.course-info {
  margin-top: 1rem;
  padding: 1rem;
  background: rgba(57, 255, 20, 0.05);
  border-radius: 6px;
  border: 1px solid var(--border);
}

.course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.9rem;
}

.course-semester {
  color: var(--accent);
  font-weight: 600;
}

.course-type {
  color: var(--muted);
}

.course-evaluation {
  color: var(--accent);
  font-weight: 600;
}

.access-info {
  margin-top: 1rem;
}

.access-item {
  padding: 1rem;
  background: rgba(255,255,255,0.02);
  border-radius: 6px;
  border: 1px solid var(--border);
}

/* Equipment page styles */
.equipment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

.equipment-item {
  padding: 1.5rem;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
  border: 1px solid var(--border);
  transition: var(--transition);
}

.equipment-item:hover {
  border-color: var(--accent);
  background: rgba(57, 255, 20, 0.03);
  transform: translateY(-2px);
}

.equipment-item h3 {
  margin: 0 0 0.5rem 0;
  color: var(--accent);
  font-size: 1.1rem;
}

.equipment-specs {
  margin: 1rem 0;
  padding: 1rem;
  background: rgba(57, 255, 20, 0.05);
  border-radius: 6px;
  border: 1px solid var(--border);
}

.spec-item {
  margin: 0.5rem 0;
  font-size: 0.9rem;
}

/* Contact page styles */
.contact-info {
  margin: 2rem 0;
  padding: 2rem;
  background: rgba(57, 255, 20, 0.05);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.contact-info h2 {
  margin: 0 0 1rem 0;
  color: var(--accent);
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.contact-details p {
  margin: 0;
  font-size: 1.1rem;
}

.address-info {
  margin: 1rem 0;
  padding: 1.5rem;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
  border: 1px solid var(--border);
  line-height: 1.6;
}

.address-info p {
  margin: 0.3rem 0;
}

/* Responsive adjustments for new pages */
@media (max-width: 768px) {
  .equipment-grid {
    grid-template-columns: 1fr;
  }
  
  .contact-details {
    font-size: 1rem;
  }
  
  .course-meta {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* Print styles */
@media print {
  body {
    background: white;
    color: black;
  }
  
  .pane {
    border: 1px solid #ccc;
    box-shadow: none;
  }
  
  nav {
    display: none;
  }
  
  .pub-links {
    display: none;
  }
}