/* =========================================
   Teaching page
   ========================================= */
.section__text--wide {
  max-width: 800px;
  font-size: var(--fs-body);
  line-height: 1.65;
}

.section--lectures {
  padding: 2.5rem 0 3rem;
}

.course-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 1.75rem;
}

.course-grid .course-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--color-light-border);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--color-primary);
}

.course-card--violet { border-left-color: #7c3aed; }
.course-card--teal   { border-left-color: #14b8a6; }
.course-card--yellow { border-left-color: #f59e0b; }
.course-card--orange { border-left-color: #f97316; }

.course-card__number {
  position: absolute;
  top: 1.1rem;
  right: 1.25rem;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #000;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}

.course-card__title {
  font-size: var(--fs-body);
  font-weight: 700;
  margin: 0 0 0.5rem;
  padding-right: 2.5rem;
  color: var(--color-text-primary);
}

.course-card__description {
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin: 0 0 0.85rem;
}

.course-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.85rem;
}

.course-card__tag {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  background: var(--color-light-surface);
  border: 1px solid var(--color-light-border);
  border-radius: 999px;
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
}

.course-card__meta {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--color-light-border);
  border-bottom: 1px solid var(--color-light-border);
  margin-bottom: 0.85rem;
}

.course-card__meta-row {
  display: flex;
  gap: 1rem;
  font-size: var(--fs-small);
}

.course-card__meta-label {
  flex: 0 0 60px;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--fs-small);
  font-weight: 700;
}

.course-card__meta-value {
  color: var(--color-text-primary);
}

.course-card__more {
  display: inline-block;
  font-size: var(--fs-body);
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
}

.course-card__more:hover { text-decoration: underline; }

/* Semester guide */
.section--semester-guide {
  background: var(--color-light-surface);
  padding: 2.5rem 0;
}

.semester-guide {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 1.75rem;
}

.semester-guide__box {
  background: #fff;
  border: 1px solid var(--color-light-border);
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  border-top: 4px solid var(--color-primary);
}

.semester-guide__box--winter { border-top-color: #7c3aed; }
.semester-guide__box--summer { border-top-color: #14b8a6; }

.semester-guide__header { margin-bottom: 0.85rem; }

.semester-guide__title {
  font-size: var(--fs-body);
  font-weight: 700;
  margin: 0 0 0.25rem;
  color: var(--color-text-primary);
}

.semester-guide__period {
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.semester-guide__list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: var(--fs-body);
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.semester-guide__item { margin-bottom: 0.25rem; }

/* FAQ */
.section--faq {
  padding: 2.5rem 0;
}

.faq-accordion {
  max-width: 760px;
  margin: 1.5rem auto 0;
}

.faq-accordion__item {
  border-bottom: 1px solid var(--color-light-border);
}

.faq-accordion__item:last-child { border-bottom: 0; }

.faq-accordion__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-body);
  color: var(--color-text-primary);
  font-weight: 500;
}

.faq-accordion__question::-webkit-details-marker { display: none; }

.faq-accordion__question:hover { color: var(--color-primary); }

.faq-accordion__icon {
  flex: 0 0 14px;
  transition: transform 0.2s ease;
}

.faq-accordion__item[open] .faq-accordion__icon {
  transform: rotate(180deg);
}

.faq-accordion__answer {
  padding: 0 0 1.1rem;
  font-size: var(--fs-body);
  color: var(--color-text-secondary);
  line-height: 1.65;
}

/* Teaching Contact CTA */
.section--teaching-contact {
  padding: 2.5rem 0 3rem;
}

.teaching-contact {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}

.teaching-contact__title {
  font-size: var(--fs-body);
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--color-text-primary);
}

.teaching-contact__text {
  font-size: var(--fs-body);
  color: var(--color-text-secondary);
  margin: 0 0 1.25rem;
  line-height: 1.6;
}

.teaching-contact__actions {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  justify-content: center;
}

.teaching-contact__link {
  font-size: var(--fs-body);
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

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

/* =========================================
   Publications page
   ========================================= */

/* Featured Publications carousel (dark) */
.section--featured-pubs {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.featured-pubs {
  position: relative;
  display: grid;
  grid-template-columns: 50px 1fr 50px;
  align-items: center;
  gap: 1rem;
  max-width: 820px;
  margin: 1.5rem auto 1.25rem;
}

.featured-pubs__arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.featured-pubs__arrow:hover {
  background: rgba(255,255,255,0.15);
}

.featured-pubs__track {
  position: relative;
  min-height: 280px;
}

.featured-pubs__slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1.5rem;
  align-items: start;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
}

.featured-pubs__slide.is-active {
  opacity: 1;
  visibility: visible;
}

.featured-pubs__cover {
  width: 200px;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-dark-surface);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

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

.featured-pubs__body {
  color: #fff;
}

.featured-pubs__title {
  font-size: var(--fs-body);
  font-weight: 700;
  margin: 0 0 0.6rem;
  line-height: 1.4;
}

.featured-pubs__abstract {
  font-size: var(--fs-small);
  color: var(--color-text-on-dark-muted);
  line-height: 1.6;
  margin: 0 0 0.75rem;
}

.featured-pubs__authors {
  font-size: var(--fs-small);
  color: var(--color-text-on-dark-muted);
  margin: 0 0 0.2rem;
}

.featured-pubs__journal {
  font-size: var(--fs-small);
  color: var(--color-text-on-dark-muted);
  margin: 0 0 0.85rem;
}

.featured-pubs__btn {
  font-size: var(--fs-body);
  padding: 0.4rem 1rem;
}

.featured-pubs__dots {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.75rem;
}

.featured-pubs__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease;
}

.featured-pubs__dot.is-active {
  background: var(--color-primary-light, #A78BFA);
}

.featured-pubs__highlight {
  margin: 2rem auto 0;
  max-width: 700px;
  text-align: center;
  color: var(--color-text-on-dark-muted);
  font-size: var(--fs-body);
  line-height: 1.65;
}

.featured-pubs__highlight strong {
  color: var(--color-accent-orange, #f97316);
  display: block;
  font-size: var(--fs-body);
  margin-bottom: 0.4rem;
}

/* All publications table */
.section--pub-table {
  padding: 3rem 0;
}

.pub-table-wrapper {
  margin-top: 1.5rem;
  overflow-x: auto;
}

.pub-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
  background: #fff;
  border: 1px solid var(--color-light-border);
  border-radius: 8px;
  overflow: hidden;
}

.pub-table__th {
  text-align: left;
  padding: 0.85rem 1rem;
  font-weight: 700;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  background: var(--color-light-surface);
  border-bottom: 1px solid var(--color-light-border);
  cursor: pointer;
}

.pub-table__th--num { text-align: right; width: 80px; }

.pub-table__row {
  border-bottom: 1px solid var(--color-light-border);
}

.pub-table__row:last-child { border-bottom: 0; }

.pub-table__td {
  padding: 0.9rem 1rem;
  vertical-align: top;
  color: var(--color-text-primary);
}

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

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

.pub-table__meta {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
}

.pub-table__meta .pub-table__authors { display: block; }
.pub-table__meta .pub-table__journal { display: block; margin-top: 0.1rem; }

.pub-table__td--cited,
.pub-table__td--year {
  text-align: right;
  white-space: nowrap;
  color: var(--color-text-secondary);
}

/* Impact stories */
.section--impact {
  padding: 3rem 0;
}

.section--impact .section__title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.impact-icon {
  font-size: 1.1rem;
  color: var(--color-primary-light, #A78BFA);
}

.impact-stories__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.impact-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 1.5rem;
}

.impact-card__title {
  font-size: var(--fs-body);
  font-weight: 700;
  margin: 0 0 0.85rem;
  color: #fff;
}

.impact-card__list {
  list-style: disc;
  padding-left: 1.2rem;
  margin: 0;
  font-size: var(--fs-body);
  color: var(--color-text-on-dark-muted);
  line-height: 1.65;
}

.impact-card__list li { margin-bottom: 0.4rem; }

/* Publications Contact CTA */
.section--pub-contact {
  padding: 2.5rem 0 3rem;
}

.pub-contact {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}

.pub-contact__title {
  font-size: var(--fs-body);
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--color-text-primary);
}

.pub-contact__text {
  font-size: var(--fs-body);
  color: var(--color-text-secondary);
  margin: 0 0 1.25rem;
  line-height: 1.6;
}

.pub-contact__actions {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  justify-content: center;
}

.pub-contact__link {
  font-size: var(--fs-body);
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

@media (max-width: 700px) {
  .featured-pubs { grid-template-columns: 36px 1fr 36px; }
  .featured-pubs__slide { grid-template-columns: 1fr; }
  .featured-pubs__cover { width: 160px; margin: 0 auto; }
  .impact-stories__grid { grid-template-columns: 1fr; }
}

/* =========================================
   Useful Info (Knowledge Base)
   ========================================= */

/* Intro video */
.knowledge-video {
  padding: 0;
  margin-top: -2rem;
  position: relative;
  z-index: 2;
}

.knowledge-video__wrap {
  width: 100%;
  max-width: 720px;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: #888;
  position: relative;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}

.knowledge-video__wrap--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #94a3b8, #64748b);
}

.knowledge-video__play {
  font-size: 4rem;
  color: rgba(255,255,255,0.85);
}

.knowledge-video__wrap iframe,
.knowledge-video__player {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* 3D Printables */
.section--printables {
  background: var(--color-light-surface);
  padding: 3rem 0 2.5rem;
}

.printables-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 760px;
  margin: 1.75rem auto 1.5rem;
}

.printable-card {
  text-align: center;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
}

.printable-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 0.75rem;
  color: var(--color-text-primary);
}

.printable-card__title {
  font-size: var(--fs-body);
  font-weight: 600;
  margin: 0 0 0.25rem;
  color: var(--color-text-primary);
  line-height: 1.35;
}

.printable-card__type {
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  margin: 0 0 0.75rem;
}

.printable-card__btn {
  font-size: var(--fs-body);
  padding: 0.4rem 1.1rem;
}

/* Guides */
.section--guides {
  padding: 3rem 0;
}

.guides-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 820px;
  margin: 1.75rem auto 1rem;
}

.guide-card {
  text-align: center;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
}

.guide-card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-light-surface);
  margin-bottom: 0.75rem;
}

.guide-card__thumb-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #cbd5e1, #94a3b8);
}

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

.guide-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.75rem;
  color: rgba(255,255,255,0.95);
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.guide-card__title {
  font-size: var(--fs-small);
  font-weight: 600;
  margin: 0 0 0.4rem;
  color: var(--color-text-primary);
  line-height: 1.4;
}

.guide-card__link {
  display: inline-block;
  font-size: var(--fs-body);
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
}

.guide-card__link:hover { text-decoration: underline; }

/* Lectures embed (dark) */
.section--knowledge-lectures {
  padding: 2rem 0 2.5rem;
}

.section--knowledge-lectures .section__title { color: #fff; }

.lecture-embed {
  display: grid;
  grid-template-columns: 50px 1fr 50px;
  align-items: center;
  gap: 1rem;
  max-width: 540px;
  margin: 1.5rem auto 1rem;
}

.lecture-embed__arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lecture-embed__arrow:hover {
  background: rgba(255,255,255,0.16);
}

.lecture-embed__player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #0f1530;
}

.lecture-embed__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1f2664, #2a3370);
}

.lecture-embed__play {
  font-size: 2.5rem;
  color: rgba(255,255,255,0.85);
}

.lecture-embed__video {
  width: 100%;
  height: 100%;
  border: 0;
}

.lecture-embed__caption {
  position: absolute;
  left: 0.85rem;
  bottom: 0.85rem;
  background: rgba(124, 58, 237, 0.85);
  color: #fff;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: var(--fs-small);
}

.section--knowledge-lectures .section__footer {
  text-align: center;
}

/* Knowledge labs section */
.section--knowledge-labs {
  padding: 2.5rem 0 3rem;
}

@media (max-width: 700px) {
  .printables-grid { grid-template-columns: 1fr; }
  .guides-grid { grid-template-columns: 1fr; }
}

/* =========================================
   News listing page
   ========================================= */
.hero__content--centered { text-align: center; }
.hero__content--centered .hero__title,
.hero__content--centered .hero__subtitle { margin-left: auto; margin-right: auto; }

.section--news-list {
  padding: 2.5rem 0 3rem;
}

.news-list {
  display: flex;
  flex-direction: column;
}

.news-list-item {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 1.75rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--color-light-border);
}

.news-list-item:first-child { padding-top: 0; }
.news-list-item:last-child  { border-bottom: 0; }

.news-list-item__media {
  display: block;
  width: 180px;
  height: 180px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #c084fc 0%, #8b5cf6 50%, #4f46e5 100%);
  position: relative;
}

.news-list-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-list-item__media-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.55);
  font-size: 0.75rem;
}

.news-list-item__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.news-list-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
}

.news-list-item__date {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text-primary);
}

.news-list-item__author {
  color: var(--color-text-secondary);
}

.news-list-item__title {
  font-size: var(--fs-body);
  font-weight: 700;
  margin: 0;
  line-height: 1.35;
}

.news-list-item__title a {
  color: var(--color-text-primary);
  text-decoration: none;
}

.news-list-item__title a:hover { color: var(--color-primary); }

.news-list-item__excerpt {
  font-size: var(--fs-body);
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin: 0.15rem 0 0.25rem;
}

.news-list-item__excerpt p { margin: 0 0 0.5rem; }

.news-list-item__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.25rem;
}

.news-list-item__tag {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  background: var(--color-light-surface);
  border: 1px solid var(--color-light-border);
  border-radius: 999px;
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
}

.news-list-item__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 0.35rem;
}

.news-list-item__link {
  font-size: var(--fs-body);
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

.news-list-item__link:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .news-list-item { grid-template-columns: 1fr; }
  .news-list-item__media { width: 100%; height: 200px; }
}

/* =========================================
   Labs listing page
   ========================================= */

/* Lab photos strip (overlap dark/white transition) */
.labs-photos-strip {
  padding: 0;
  margin-top: -4rem;
  position: relative;
  z-index: 2;
}

.labs-photos-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

.labs-photos-strip__item {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-dark-surface);
  border: 2px solid rgba(255,255,255,0.05);
  transition: transform 0.25s ease;
}

.labs-photos-strip__item:hover {
  transform: scale(1.03);
}

.labs-photos-strip__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.labs-photos-strip__placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1e2856 0%, #131838 100%);
}

.labs-heading {
  padding-top: 2.5rem;
  padding-bottom: 0.5rem;
}

/* Lab block cards (stacked) */
.labs-list {
  padding-top: 1rem;
  padding-bottom: 3rem;
}

.labs-list .lab-block {
  display: grid;
  grid-template-columns: 1fr 240px;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "head media"
    "details media"
    "footer footer";
  gap: 1.25rem 1.5rem;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.25rem;
  background: #fff;
  border: 1px solid var(--color-light-border);
  border-radius: 14px;
  position: relative;
  scroll-margin-top: 80px;
}

.lab-block__color-tag {
  position: absolute;
  top: 1.5rem;
  left: -8px;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: var(--color-primary);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.lab-block--violet .lab-block__color-tag { background: #7c3aed; }
.lab-block--teal .lab-block__color-tag { background: #14b8a6; }
.lab-block--yellow .lab-block__color-tag { background: #f59e0b; }
.lab-block--orange .lab-block__color-tag { background: #f97316; }

.lab-block__head { grid-area: head; }
.lab-block__media { grid-area: media; }
.lab-block__details { grid-area: details; }
.lab-block__footer { grid-area: footer; }

.lab-block__title {
  font-size: var(--fs-body);
  font-weight: 700;
  margin: 0 0 0.6rem;
  color: var(--color-text-primary);
}

.lab-block__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.7rem;
}

.lab-block__tag {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  background: var(--color-light-surface);
  border: 1px solid var(--color-light-border);
  border-radius: 999px;
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
}

.lab-block__description {
  font-size: var(--fs-body);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
}

.lab-block__media img,
.lab-block__placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  background: linear-gradient(135deg, #cbd5e1, #94a3b8);
  display: block;
}

.lab-block__details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.lab-block__info-box {
  background: var(--color-light-surface);
  border: 1px solid var(--color-light-border);
  border-radius: 10px;
  padding: 0.85rem 1rem;
}

.lab-block__sub-title {
  font-size: var(--fs-small);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.5rem;
  color: var(--color-text-primary);
}

.lab-block__info-box ul {
  margin: 0;
  padding-left: 1rem;
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  line-height: 1.55;
}

.lab-block__info-box li {
  margin-bottom: 0.25rem;
}

.lab-block__pub-list a {
  color: var(--color-text-primary);
  text-decoration: none;
  font-weight: 500;
}

.lab-block__pub-list a:hover {
  color: var(--color-primary);
}

.lab-block__pub-meta {
  display: block;
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  margin-top: 0.15rem;
}

.lab-block__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.4rem;
  border-top: 1px solid var(--color-light-border);
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
}

.lab-block__location strong {
  color: var(--color-text-primary);
}

.lab-block__more {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
}

.lab-block__more:hover { text-decoration: underline; }

/* Bottom "Our Research" section */
.labs-research {
  background: var(--color-light-surface);
  padding: 2.5rem 0 3rem;
}

.labs-research__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 1.5rem 0 1rem;
}

@media (max-width: 900px) {
  .labs-photos-strip__grid { grid-template-columns: repeat(2, 1fr); }
  .labs-list .lab-block {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "media"
      "details"
      "footer";
  }
  .lab-block__details { grid-template-columns: 1fr; }
  .labs-research__grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================
   Team listing page
   ========================================= */
.team-group-photo {
  margin-top: -3rem;
  position: relative;
  z-index: 2;
}

.team-group-photo img {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}

.section--team-profiles {
  padding: 2.5rem 0 3rem;
}

.profiles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem 1rem;
  margin: 1.75rem auto 1.5rem;
}

.profile-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease;
}

.profile-tile:hover { transform: translateY(-3px); }

.profile-tile__portrait {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-light-surface);
  margin-bottom: 0.65rem;
  filter: grayscale(15%);
}

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

.profile-tile__portrait-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #cbd5e1, #94a3b8);
}

.profile-tile__name {
  font-size: var(--fs-body);
  font-weight: 700;
  margin: 0 0 0.15rem;
  color: var(--color-text-primary);
  line-height: 1.3;
}

.profile-tile__role {
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.4;
}

.profile-tile--small .profile-tile__portrait { width: 80px; height: 80px; }

.profiles-grid--alumni {
  grid-template-columns: repeat(6, 1fr);
}

/* Our Journey (dark carousel) */
.section--journey {
  padding: 2.5rem 0 1.5rem;
}

.section--journey .section__title { color: #fff; }

.journey-timeline {
  display: grid;
  grid-template-columns: 50px 1fr 50px;
  align-items: stretch;
  gap: 1rem;
  margin-top: 1.5rem;
}

.journey-timeline__arrow {
  width: 40px;
  height: 40px;
  align-self: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.journey-timeline__arrow:hover { background: rgba(255,255,255,0.16); }

.journey-timeline__track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.journey-timeline__item {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 1rem 1.25rem;
}

.journey-timeline__year {
  display: inline-block;
  font-size: var(--fs-small);
  color: var(--color-primary-light, #A78BFA);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 0.3rem;
}

.journey-timeline__title {
  font-size: var(--fs-body);
  font-weight: 700;
  margin: 0 0 0.4rem;
  color: #fff;
  line-height: 1.35;
}

.journey-timeline__text {
  font-size: var(--fs-small);
  color: var(--color-text-on-dark-muted);
  line-height: 1.5;
  margin: 0;
}

/* Quote section */
.section--team-quote {
  padding: 2.5rem 0;
}

.team-quote {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  border: 0;
  padding: 0;
}

.team-quote__text {
  font-size: var(--fs-body);
  font-style: italic;
  line-height: 1.6;
  color: var(--color-text-primary);
  margin: 0 0 0.85rem;
}

.team-quote__author {
  font-size: var(--fs-body);
  color: var(--color-text-secondary);
  font-style: normal;
}

/* Achievements (dark) */
.section--achievements {
  padding: 2.5rem 0 1.5rem;
}

.section--achievements .section__title { color: #fff; }

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1.75rem;
}

.achievement-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
}

.achievement-card__icon {
  display: inline-block;
  font-size: 2rem;
  margin-bottom: 0.6rem;
}

.achievement-card__title {
  font-size: var(--fs-body);
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: #fff;
  line-height: 1.4;
}

.achievement-card__text {
  font-size: var(--fs-small);
  color: var(--color-text-on-dark-muted);
  line-height: 1.55;
  margin: 0;
}

/* CTA (dark) */
.section--team-cta {
  padding: 2rem 0 3rem;
}

.section--team-cta .section__title { color: #fff; }

.team-cta {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.team-cta__positions {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 1.5rem;
  text-align: left;
  font-size: var(--fs-body);
  color: var(--color-text-on-dark-muted);
}

.team-cta__positions li {
  padding-left: 1.5rem;
  position: relative;
  margin-bottom: 0.6rem;
  line-height: 1.55;
}

.team-cta__positions li::before {
  content: '\2022';
  position: absolute;
  left: 0.3rem;
  color: var(--color-primary-light, #A78BFA);
  font-size: 1.2em;
}

/* Teaching teaser */
.section--team-teaching {
  background: var(--grad-dark);
  padding: 3rem 0;
  color: #fff;
}

.section--team-teaching .section__title { color: #fff; }
.section--team-teaching .section__text { color: var(--color-text-on-dark-muted); max-width: 720px; }

/* Resources */
.section--team-resources {
  padding: 3rem 0;
  background: var(--color-light-surface);
}

.team-resources {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 2rem;
  align-items: start;
}

.team-resources .section__title { text-align: left; margin-bottom: 0.85rem; }
.team-resources .section__text { text-align: left; margin: 0 0 1.5rem; max-width: none; }

.team-resources__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.resource-tile {
  background: #fff;
  border: 1px solid var(--color-light-border);
  border-radius: 12px;
  padding: 1.25rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.resource-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}

.resource-tile__icon {
  display: inline-block;
  font-size: 1.5rem;
  margin-bottom: 0.4rem;
}

.resource-tile__title {
  font-size: var(--fs-body);
  font-weight: 700;
  margin: 0 0 0.4rem;
  color: var(--color-text-primary);
}

.resource-tile__text {
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* Alumni section */
.section--alumni {
  padding: 2.5rem 0 3rem;
}

@media (max-width: 900px) {
  .profiles-grid { grid-template-columns: repeat(3, 1fr); }
  .profiles-grid--alumni { grid-template-columns: repeat(3, 1fr); }
  .achievements-grid { grid-template-columns: 1fr; }
  .team-resources { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .profiles-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================
   Team member profile page
   ========================================= */
.hero--profile .hero__content--profile {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 3rem;
  align-items: center;
}

.profile-hero__name {
  margin-bottom: 0.5rem;
}

.profile-hero__role {
  font-size: var(--fs-body);
  color: var(--color-text-on-dark-muted);
  margin-bottom: 1rem;
}

.profile-hero__bio {
  font-size: var(--fs-body);
  color: var(--color-text-on-dark-muted);
  line-height: 1.65;
  margin-bottom: 1.25rem;
  max-width: 540px;
}

.profile-hero__bio p {
  margin: 0 0 0.5rem;
}

.profile-hero__social {
  display: flex;
  gap: 0.6rem;
}

.profile-hero__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  font-size: var(--fs-body);
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.profile-hero__social-link:hover {
  transform: translateY(-2px);
}

.profile-hero__social-link--orcid { background: #A6CE39; }
.profile-hero__social-link--linkedin { background: #0A66C2; }
.profile-hero__social-link--rg { background: #00CCBB; }

.profile-hero__portrait {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 280px;
  justify-self: end;
}

.profile-hero__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.profile-hero__portrait-placeholder {
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
}

.section--profile-cards {
  background: var(--color-light-surface);
  padding: 3rem 0;
}

.section--profile-cards .container {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 760px;
}

.profile-card {
  background: #fff;
  border: 1px solid var(--color-light-border);
  border-radius: 12px;
  padding: 1.5rem 2rem;
}

.profile-card__header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  justify-content: center;
  margin-bottom: 1rem;
}

.profile-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--color-primary);
}

.profile-card__icon svg {
  display: block;
}

.profile-card__title {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--color-text-primary);
}

.profile-card__list {
  margin: 0;
  padding-left: 1.2rem;
  font-size: var(--fs-body);
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.profile-card__list li {
  margin-bottom: 0.35rem;
}

.profile-card__publications {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.profile-publication__title {
  margin: 0;
  font-size: var(--fs-body);
  color: var(--color-text-primary);
  font-weight: 500;
}

.profile-publication__meta {
  margin: 0.2rem 0;
  font-size: var(--fs-body);
  color: var(--color-text-secondary);
}

.profile-publication__doi {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
}

.profile-publication__doi a {
  color: var(--color-primary);
}

.profile-card__link {
  display: inline-block;
  margin-top: 1rem;
  font-size: var(--fs-body);
  color: var(--color-primary);
}

/* Other SPECTRE's section */
.other-members-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.other-member-card {
  text-align: center;
}

.other-member-card__portrait {
  width: 120px;
  height: 120px;
  margin: 0 auto 0.75rem;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
}

.other-member-card__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.other-member-card__placeholder {
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.08);
}

.other-member-card__name {
  margin: 0.4rem 0 0.1rem;
  font-size: var(--fs-body);
  color: #fff;
}

.other-member-card__role {
  margin: 0 0 0.85rem;
  font-size: var(--fs-body);
  color: var(--color-text-on-dark-muted);
}

.other-member-card__btn {
  font-size: var(--fs-body);
  padding: 0.45rem 1.1rem;
}

@media (max-width: 768px) {
  .hero--profile .hero__content--profile {
    grid-template-columns: 1fr;
  }
  .profile-hero__portrait {
    justify-self: center;
    max-width: 240px;
  }
  .other-members-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   Research page
   ========================================= */

/* 4 small topic cards overlapping hero/white */
.research-summary {
  padding: 0;
  margin-top: -3.5rem;
  position: relative;
  z-index: 2;
}

.research-summary__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.research-summary__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.25rem 1rem;
  background: #fff;
  border: 1px solid var(--color-light-border);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.research-summary__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.22);
}

.research-summary__icon {
  width: 42px;
  height: 42px;
  object-fit: contain;
  margin-bottom: 0.6rem;
}

.research-summary__title {
  font-size: var(--fs-body);
  font-weight: 700;
  margin: 0 0 0.35rem;
  line-height: 1.25;
}

.research-summary__card--green .research-summary__title { color: var(--color-accent-green); }
.research-summary__card--yellow .research-summary__title { color: var(--color-accent-yellow); }
.research-summary__card--teal .research-summary__title { color: var(--color-accent-teal); }
.research-summary__card--orange .research-summary__title { color: var(--color-accent-orange); }

.research-summary__tagline {
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
  font-style: italic;
}

.research-summary__footer {
  text-align: center;
  margin-top: 1.5rem;
}

/* Intro section text */
.research-intro {
  padding-top: 1rem;
  padding-bottom: 1.5rem;
}

.research-intro__text {
  max-width: 760px;
  line-height: 1.7;
}

/* Detail blocks */
.research-details {
  padding-top: 1.5rem;
  padding-bottom: 3rem;
}

.research-details .area-block {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 2rem;
  padding: 1.75rem;
  margin-bottom: 1.75rem;
  background: #fff;
  border: 1px solid var(--color-light-border);
  border-radius: 14px;
  align-items: start;
  scroll-margin-top: 80px;
}

.area-block--green   { border-left: 5px solid var(--color-accent-green); }
.area-block--yellow  { border-left: 5px solid var(--color-accent-yellow); }
.area-block--teal    { border-left: 5px solid var(--color-accent-teal); }
.area-block--orange  { border-left: 5px solid var(--color-accent-orange); }

.area-block__media img,
.area-block__placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  background: linear-gradient(135deg, #cbd5e1, #94a3b8);
  display: block;
}

.area-block__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.area-block__media img.area-block__placeholder-icon {
  width: 45%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: none;
  border-radius: 0;
  opacity: 0.9;
  filter: brightness(0) invert(1);
}

.area-block__title {
  font-size: var(--fs-body);
  font-weight: 800;
  letter-spacing: 0.05em;
  margin: 0 0 0.85rem;
  color: var(--color-text-primary);
}

.area-block__description {
  font-size: var(--fs-body);
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin-bottom: 0.85rem;
}

.area-block__description p {
  margin: 0 0 0.6rem;
}

.area-block__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.area-block__tag {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  background: var(--color-light-surface);
  border: 1px solid var(--color-light-border);
  border-radius: 999px;
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
}

.area-block__columns {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 1.25rem;
  align-items: start;
  margin-top: 0.25rem;
}

.area-block__sub-title {
  font-size: var(--fs-small);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 0.5rem;
  color: var(--color-text-primary);
}

.area-block__questions ul {
  margin: 0;
  padding-left: 1rem;
  font-size: var(--fs-body);
  color: var(--color-text-secondary);
  line-height: 1.55;
}

.area-block__questions li {
  margin-bottom: 0.4rem;
}

.area-block__highlight-card {
  background: var(--color-light-surface);
  border: 1px solid var(--color-light-border);
  border-radius: 10px;
  padding: 0.85rem 0.95rem;
}

.area-block__highlight-title {
  font-size: var(--fs-small);
  font-weight: 600;
  margin: 0 0 0.25rem;
  color: var(--color-text-primary);
  line-height: 1.4;
}

.area-block__highlight-meta {
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  margin: 0;
}

.area-block__footer {
  margin-top: 1rem;
}

.area-block__more {
  font-size: var(--fs-body);
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
}

.area-block__more:hover { text-decoration: underline; }

/* Research CTA */
.research-cta {
  padding-top: 1.5rem;
  padding-bottom: 3rem;
}

.research-cta__inner {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.research-cta__title {
  font-size: var(--fs-body);
  font-weight: 700;
  margin: 0 0 0.6rem;
  color: var(--color-text-primary);
}

.research-cta__text {
  font-size: var(--fs-body);
  color: var(--color-text-secondary);
  margin: 0 0 1.25rem;
  line-height: 1.6;
}

.research-cta__actions {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
}

.research-cta__link {
  font-size: var(--fs-body);
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

@media (max-width: 900px) {
  .research-summary__grid { grid-template-columns: repeat(2, 1fr); }
  .research-summary { margin-top: -2rem; }
}

@media (max-width: 768px) {
  .research-details .area-block { grid-template-columns: 1fr; }
  .area-block__columns { grid-template-columns: 1fr; }
}

/* =========================================
   SPECTRE Website – Component Styles
   =========================================
   Supplement to styles.css.
   Uses SPECTRE design-system variables.
   ========================================= */

/* =========================================
   Wave dividers between sections
   ========================================= */
.wave-divider {
  display: block;
  width: 100%;
  height: 90px;
  line-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.wave-divider svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Above is dark indigo, below is white */
.wave-divider--dark-to-light {
  background: var(--color-dark-bg);
}

/* Above is the deep-dark hero/intro tone, below is white */
.wave-divider--deep-to-light {
  background: var(--color-dark-deep);
}

/* Above is white, below is dark indigo */
.wave-divider--light-to-dark {
  background: #ffffff;
}

/* Above is indigo, below is darker indigo (Publications -> Positions) */
.wave-divider--indigo-to-darker {
  background: var(--color-dark-bg);
}

/* Above is darker indigo, below is white (Positions -> Teaching) */
.wave-divider--darker-to-light {
  background: var(--color-dark-darker);
}

/* Section-specific overrides */
.section--intro.dark-bg {
  background: var(--color-dark-deep);
}

.section--positions.dark-bg {
  background: var(--color-dark-darker);
}

/* Center all section titles and subtitle texts (per Mockup) */
.section__title,
.section__text,
.labs-carousel__label,
.section--news .section__footer,
.section--publications .section__footer,
.section--positions .section__footer {
  text-align: center;
}

/* Publication covers grid (centered, no card chrome) */
.publications-covers {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 2.5rem;
  margin: 2rem 0 1.5rem;
}

.publication-cover {
  display: inline-block;
  flex: 0 0 auto;
  max-width: 220px;
  position: relative;
  transition: transform 0.25s ease;
}

.publication-cover:hover {
  transform: translateY(-4px) scale(1.02);
}

/* from tablet width on: the covers as wide as the open positions grid below - three covers fill the full width,
   above 1024px exactly its three columns (same gap); fewer covers stay centred. Phones (positions stacked): as before */
@media (min-width: 769px) {
  .publications-covers { gap: 1.3rem; }
  .publication-cover { flex-basis: calc((100% - 2 * 1.3rem) / 3); max-width: none; }
}

.publication-cover__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 262 / 348;   /* one format for all covers of the row (journals differ slightly), as the typographic one */
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.publication-cover__reflection {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 262 / 348;
  object-fit: cover;
  top: calc(100% + 18px);
  transform: scaleY(-1);
  filter: blur(3px);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.02) 80%, rgba(0,0,0,0.07) 90%, rgba(0,0,0,0.15) 100%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.02) 80%, rgba(0,0,0,0.07) 90%, rgba(0,0,0,0.15) 100%);
  pointer-events: none;
}

/* typographic journal cover (snippet cards/pub-cover) when no cover image is uploaded - same format as the real
   covers: journal name as masthead, year, the article title as cover story and a thin laser beam as the picture.
   Its type scales with the cover (cqw) like a picture - an exception to the five font sizes, as the ECTS badge. */
.pub-cover-type {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  aspect-ratio: 262 / 348;
  padding: 10% 8% 9%;
  overflow: hidden;
  container-type: inline-size;
  border-radius: 4px;
  color: #fff;
  text-align: left;
  background:
    radial-gradient(55% 32% at 74% 58%, rgba(60, 200, 240, 0.26), rgba(60, 200, 240, 0) 70%),
    linear-gradient(165deg, #1d3468 0%, #0e1b3d 55%, #070e22 100%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.pub-cover-type--reflection { position: absolute; }
/* the beam comes in from the left and ends in a bright point - as in the home hero */
.pub-cover-type::before,
.pub-cover-type::after { content: ""; position: absolute; top: 58%; pointer-events: none; }
.pub-cover-type::before {
  left: 0;
  width: 74%;
  height: 0.7%;
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(150, 235, 255, 0) 0%, rgba(150, 235, 255, 0.6) 45%, #eafcff 100%);
  box-shadow: 0 0 6px 1px rgba(60, 200, 240, 0.5);
}
.pub-cover-type::after {
  left: 74%;
  width: 10%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(210, 248, 255, 0.95) 22%, rgba(90, 210, 245, 0.45) 48%, rgba(40, 170, 230, 0) 72%);
}
.pub-cover-type__masthead {
  font-size: 8.4cqw;
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.pub-cover-type__issue {
  margin-top: 4cqw;
  padding-top: 2.6cqw;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 4cqw;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.7);
}
.pub-cover-type__story {
  margin-top: auto;
  font-size: 5.3cqw;
  font-weight: 500;
  line-height: 1.28;
  color: rgba(255, 255, 255, 0.9);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

/* "See all our publications" link visible on dark bg */
.section--publications .section__link {
  color: #ffffff;
}

.section--publications .section__link:hover {
  color: var(--color-primary-light, #A78BFA);
}

@media (max-width: 768px) {
  .wave-divider { height: 50px; }
}

/* =========================================
   Generic helpers & shared modifiers
   ========================================= */

/* Default content section (used on default.php) */
.content-section {
  padding: var(--section-padding) 0;
}

.content-section p {
  line-height: 1.8;
  margin-bottom: 1.25rem;
}

/* Section intro paragraph (slightly smaller than section__text) */
.section__intro {
  color: var(--color-text-secondary);
  max-width: 650px;
  margin-bottom: 2rem;
  font-size: var(--fs-body);
  line-height: 1.7;
}

/* Section footer: centered CTA area after card grids */
.section__footer {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

.section__footer--split {
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Hero dark variant (re-uses base hero; explicit modifier for clarity) */
.hero--dark {
  background: linear-gradient(135deg, var(--color-dark-gradient-start), var(--color-dark-gradient-end));
  color: var(--color-text-on-dark);
}

/* Tags displayed inside the hero */
.hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* Pill-shaped tag variant */
.tag--pill {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-text-on-dark);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

/* Generic back link */
.link {
  font-weight: 500;
  font-size: var(--fs-body);
}

.link--back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--color-text-secondary);
  transition: color 0.2s;
}

.link--back:hover {
  color: var(--color-primary);
}

/* Inline icon inside buttons */
.btn__icon {
  flex-shrink: 0;
}

/* =========================================
   News grid (home-page variant)
   ========================================= */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.news-grid .news-item {
  background: var(--color-light-bg);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  border: 1px solid var(--color-light-border);
  border-left: 3px solid var(--color-primary);
}

.dark-bg .news-grid .news-item {
  border-color: transparent;
  border-left-color: var(--color-primary);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  color: #0f172a;
}

.dark-bg .news-grid .news-item__title,
.dark-bg .news-grid .news-item__title a,
.dark-bg .news-grid .news-item__excerpt,
.dark-bg .news-grid .news-item__date,
.dark-bg .news-grid .news-item__author,
.dark-bg .news-grid .news-item__meta {
  color: #0f172a;
}

.dark-bg .news-grid .news-item__toggle {
  color: var(--color-primary);
}

.news-grid .news-item__title {
  font-size: var(--fs-body);
}

.news-grid .news-item__toggle {
  font-size: var(--fs-body);
}

/* =========================================
   Research card colour variants
   ========================================= */
/* Color variants: no additional border overrides (bracket borders from styles.css) */

/* Accent bar hidden (redesign: centered cards without border) */
.research-card__accent {
  display: none;
}

/* =========================================
   Research overview page
   ========================================= */
.research-page {}

.research-intro {
  text-align: center;
}

.research-intro__title {
  font-size: var(--fs-h2);
  margin-bottom: 1rem;
}

.research-intro__text {
  max-width: 700px;
  margin: 0 auto;
  color: var(--color-text-secondary);
  line-height: 1.8;
}

/* Research areas grid & detail container */
.research-areas {}

.research-areas__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.research-areas__detail {
  margin-top: 2rem;
}

/* =========================================
   Area detail (inline & standalone)
   ========================================= */
.area-detail {
  background: var(--color-light-surface);
  border: 1px solid var(--color-light-border);
  border-radius: var(--radius-card);
  padding: 2rem;
  margin-bottom: 2rem;
}

.area-detail--standalone {
  background: transparent;
  border: none;
  padding: 0;
}

.area-detail--sibling {
  margin-bottom: 1.5rem;
}

/* Colour accent on area-detail via data-color attribute */
.area-detail[data-color="green"]  { border-left: 4px solid var(--color-accent-green); }
.area-detail[data-color="yellow"] { border-left: 4px solid var(--color-accent-yellow); }
.area-detail[data-color="teal"]   { border-left: 4px solid var(--color-accent-teal); }
.area-detail[data-color="orange"] { border-left: 4px solid var(--color-accent-orange); }

.area-detail__header {
  margin-bottom: 1.5rem;
}

.area-detail__title {
  font-size: var(--fs-h3);
  margin-bottom: 0.35rem;
}

.area-detail__title a {
  color: inherit;
  text-decoration: none;
}

.area-detail__title a:hover {
  color: var(--color-primary);
}

.area-detail__tagline {
  font-size: var(--fs-body);
  color: var(--color-text-secondary);
}

.area-detail__description {
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.area-detail__description p {
  margin-bottom: 1rem;
}

/* Method tags row */
.area-detail__methods {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

/* Two-column layout: questions + highlights */
.area-detail__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.area-detail__col-title {
  font-size: var(--fs-body);
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--color-text-primary);
}

.area-detail__question-list {
  list-style: disc;
  padding-left: 1.25rem;
}

.area-detail__question-list li {
  margin-bottom: 0.5rem;
  font-size: var(--fs-body);
  color: var(--color-text-secondary);
}

.area-detail__highlight-list {
  list-style: none;
  padding: 0;
}

.area-detail__highlight-item {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-light-border);
}

.area-detail__highlight-item:last-child {
  border-bottom: none;
}

.area-detail__highlight-link {
  font-weight: 600;
  font-size: var(--fs-body);
  display: block;
  margin-bottom: 0.15rem;
}

.area-detail__highlight-meta {
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
}

/* Footer actions */
.area-detail__footer {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-light-border);
}

.area-detail__back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--color-primary);
  padding: 0;
  transition: color 0.2s;
}

.area-detail__back:hover {
  color: var(--color-primary-hover);
}

.area-detail__compare {}

/* =========================================
   Research CTA
   ========================================= */
.research-cta {
  background: var(--color-light-surface);
  border-radius: var(--radius-lg);
}

.research-cta__inner {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.research-cta__title {
  font-size: var(--fs-h2);
  margin-bottom: 1rem;
}

.research-cta__text {
  color: var(--color-text-secondary);
  margin-bottom: 1.5rem;
  line-height: 1.7;
}

.research-cta__btn {}

/* =========================================
   Research siblings (on research-area page)
   ========================================= */
.research-siblings {}

.research-siblings__heading {
  font-size: var(--fs-h3);
  margin-bottom: 1.5rem;
}

/* =========================================
   Research area page body
   ========================================= */
.research-area-page {}

/* =========================================
   Method tag (clickable pill)
   ========================================= */
.method-tag {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  background: var(--color-light-bg);
  border: 1px solid var(--color-light-border);
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.method-tag:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-light-surface);
}

/* =========================================
   Method modal (HTML <dialog>)
   ========================================= */
.method-modal {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(90vw, 640px);
  max-height: 80vh;
  padding: 0;
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
  background: var(--color-light-bg);
  overflow: hidden;
}

.method-modal::backdrop {
  background: rgba(15, 23, 42, 0.6);
}

.method-modal__inner {
  display: flex;
  flex-direction: column;
  max-height: 80vh;
}

.method-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--color-light-border);
}

.method-modal__title {
  font-size: var(--fs-h3);
  letter-spacing: 0.05em;
}

.method-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: background 0.2s, color 0.2s;
}

.method-modal__close:hover {
  background: var(--color-light-surface);
  color: var(--color-text-primary);
}

.method-modal__body {
  padding: 2rem;
  overflow-y: auto;
  line-height: 1.8;
}

.method-modal__body p {
  margin-bottom: 1rem;
}

.method-modal__footer {
  padding: 1rem 2rem;
  border-top: 1px solid var(--color-light-border);
  background: var(--color-light-surface);
}

.method-modal__area-label {
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  font-weight: 600;
}

/* =========================================
   Team — Featured PI & Variants
   ========================================= */
.team-grid--featured {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

.team-card--pi {
  max-width: 320px;
  padding: 2rem 1.5rem;
}

.team-card--pi .team-card__name {
  font-size: var(--fs-h3);
}

.team-card__portrait--lg img {
  width: 180px;
  height: 180px;
}

.team-card__placeholder--lg {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: var(--color-light-surface);
  margin-bottom: 1rem;
}

.team-card__tagline {
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  font-style: italic;
  margin-top: 0.25rem;
}

.team-card__link {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--color-primary);
  transition: color 0.2s;
}

.team-card__link:hover {
  color: var(--color-primary-hover);
}

/* =========================================
   Profile hero — extended info
   ========================================= */
.profile-hero__info {
  flex: 1;
}

.profile-hero__role {
  font-size: var(--fs-body);
  color: var(--color-text-on-dark-muted);
  margin-top: 0.5rem;
}

.profile-hero__tagline {
  font-size: var(--fs-body);
  color: var(--color-text-on-dark-muted);
  font-style: italic;
  margin-top: 0.25rem;
}

.profile-section__meta {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: var(--fs-body);
  color: var(--color-text-secondary);
}

.profile-section__year {
  display: inline-block;
  margin-left: 0.35rem;
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  font-weight: 600;
}

/* Publication list (profile page) */
.publication-list {
  display: flex;
  flex-direction: column;
}

/* =========================================
   Achievements grid
   ========================================= */
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

/* (legacy .achievement-card rules removed — new dark-bg version defined earlier) */

/* =========================================
   Resources grid
   ========================================= */
.resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.resource-card {
  background: var(--color-light-surface);
  border: 1px solid var(--color-light-border);
  border-radius: var(--radius-card);
  padding: 2rem;
  transition: transform 0.2s, box-shadow 0.2s;
}

.resource-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.resource-card__icon {
  display: block;
  font-size: 2rem;
  margin-bottom: 1rem;
}

.resource-card__title {
  font-size: var(--fs-body);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.resource-card__text {
  font-size: var(--fs-body);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.resource-card__link {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--color-primary);
  transition: color 0.2s;
}

.resource-card__link:hover {
  color: var(--color-primary-hover);
}

/* =========================================
   Positions CTA (team page bottom)
   ========================================= */
.positions-cta {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.positions-cta .section__title {
  margin-bottom: 1rem;
}

.positions-cta .section__text {
  margin: 0 auto 1.5rem;
}

/* =========================================
   Contact CTA (publications & jobs pages)
   ========================================= */
.contact-cta {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.contact-cta__title {
  font-size: var(--fs-h2);
  margin-bottom: 1rem;
  color: var(--color-text-on-dark);
}

.contact-cta__text {
  color: var(--color-text-on-dark-muted);
  margin-bottom: 1.5rem;
  line-height: 1.7;
}

/* =========================================
   Teaching contact (teaching page bottom)
   ========================================= */
.teaching-contact {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
  padding: 3rem 2rem;
  background: var(--color-light-surface);
  border-radius: var(--radius-lg);
}

.teaching-contact__title {
  font-size: var(--fs-h3);
  margin-bottom: 1rem;
}

.teaching-contact__text {
  color: var(--color-text-secondary);
  margin-bottom: 1.5rem;
  line-height: 1.7;
}

.teaching-contact__btn {}

/* =========================================
   FAQ accordion – <details> variant
   (teaching.php uses native <details>)
   ========================================= */
.faq-accordion__item {
  border-bottom: 1px solid var(--color-light-border);
}

.faq-accordion__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1.25rem 0;
  cursor: pointer;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--color-text-primary);
  list-style: none;
}

/* Remove default marker in webkit */
.faq-accordion__question::-webkit-details-marker {
  display: none;
}

.faq-accordion__question-text {
  flex: 1;
}

.faq-accordion__icon {
  flex-shrink: 0;
  transition: transform 0.3s;
  color: var(--color-text-secondary);
}

.faq-accordion__item[open] .faq-accordion__icon {
  transform: rotate(45deg);
}

.faq-accordion__answer {
  padding-bottom: 1.25rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.faq-accordion__answer p {
  margin-bottom: 0.75rem;
}

/* =========================================
   Semester guide – enhanced variant
   (teaching.php uses box/header/period)
   ========================================= */
.semester-guide__box {
  background: var(--color-light-surface);
  border: 1px solid var(--color-light-border);
  border-radius: var(--radius-card);
  padding: 1.5rem;
}

.semester-guide__box--winter {
  border-top: 3px solid var(--color-accent-teal);
}

.semester-guide__box--summer {
  border-top: 3px solid var(--color-accent-orange);
}

.semester-guide__header {
  margin-bottom: 1rem;
}

.semester-guide__title {
  font-size: var(--fs-body);
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.semester-guide__period {
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  font-weight: 500;
}

.semester-guide__list {
  list-style: disc;
  padding-left: 1.25rem;
}

.semester-guide__item {
  margin-bottom: 0.5rem;
  font-size: var(--fs-body);
}

/* =========================================
   Course card – tags, syllabus, meta grid
   ========================================= */
.course-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.course-card__tag {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  background: var(--color-primary);
  color: #fff;
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Syllabus expandable */
.course-card__syllabus {
  margin: 1rem 0;
  border: 1px solid var(--color-light-border);
  border-radius: var(--radius-sm);
}

.course-card__syllabus-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  cursor: pointer;
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--color-text-primary);
  list-style: none;
}

.course-card__syllabus-toggle::-webkit-details-marker {
  display: none;
}

.course-card__syllabus-icon {
  flex-shrink: 0;
  transition: transform 0.3s;
  color: var(--color-text-secondary);
}

.course-card__syllabus[open] .course-card__syllabus-icon {
  transform: rotate(180deg);
}

.course-card__syllabus-content {
  padding: 0 1rem 1rem;
  font-size: var(--fs-body);
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.course-card__syllabus-content ul {
  list-style: disc;
  padding-left: 1.25rem;
}

.course-card__syllabus-content li {
  margin-bottom: 0.35rem;
}

/* Metadata grid inside course card */
.course-card__meta-item {
  display: flex;
  justify-content: space-between;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--color-light-border);
  font-size: var(--fs-body);
}

.course-card__meta-item:last-child {
  border-bottom: none;
}

.course-card__meta-label {
  font-weight: 600;
  color: var(--color-text-secondary);
}

.course-card__meta-value {
  color: var(--color-text-primary);
}

/* PDF download row */
.course-card__download {
  margin-top: 1rem;
}

.course-card__pdf-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--color-primary);
  transition: color 0.2s;
}

.course-card__pdf-link:hover {
  color: var(--color-primary-hover);
}

.course-card__pdf-icon {
  flex-shrink: 0;
}

/* =========================================
   Course detail page
   ========================================= */
.course-detail {}

.course-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.course-detail__tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-text-on-dark);
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.course-detail__description {
  line-height: 1.8;
  margin-bottom: 2rem;
}

.course-detail__description p {
  margin-bottom: 1rem;
}

/* Syllabus expandable on detail page */
.course-detail__syllabus {
  margin: 0 0 2rem;
  border: 1px solid var(--color-light-border);
  border-radius: var(--radius-md);
}

.course-detail__syllabus-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  cursor: pointer;
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--color-text-primary);
  list-style: none;
}

.course-detail__syllabus-toggle::-webkit-details-marker {
  display: none;
}

.course-detail__syllabus-icon {
  flex-shrink: 0;
  transition: transform 0.3s;
  color: var(--color-text-secondary);
}

.course-detail__syllabus[open] .course-detail__syllabus-icon {
  transform: rotate(180deg);
}

.course-detail__syllabus-content {
  padding: 0 1.25rem 1.25rem;
  line-height: 1.8;
  color: var(--color-text-secondary);
}

.course-detail__syllabus-content ul {
  list-style: disc;
  padding-left: 1.25rem;
}

.course-detail__syllabus-content li {
  margin-bottom: 0.5rem;
}

/* Metadata grid on detail page */
.course-detail__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: var(--color-light-surface);
  border-radius: var(--radius-md);
}

.course-detail__meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.course-detail__meta-label {
  font-size: var(--fs-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
}

.course-detail__meta-value {
  font-size: var(--fs-body);
  color: var(--color-text-primary);
}

.course-detail__download {
  margin-bottom: 2rem;
}

.course-detail__back {
  padding-top: 2rem;
  border-top: 1px solid var(--color-light-border);
}

/* =========================================
   Labs page
   ========================================= */
.labs-page {}

/* Intro two-card layout */
.labs-intro {}

.labs-intro__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.labs-intro__card {
  background: var(--color-light-surface);
  border: 1px solid var(--color-light-border);
  border-radius: var(--radius-card);
  padding: 2rem;
}

.labs-intro__card-title {
  font-size: var(--fs-h3);
  margin-bottom: 0.75rem;
}

.labs-intro__card-text {
  font-size: var(--fs-body);
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

.labs-intro__card-btn {}

/* Labs topics section */
.labs-topics {}

.labs-topics__heading {
  font-size: var(--fs-h3);
  margin-bottom: 1.5rem;
}

.labs-topics__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

/* Labs list (stacked cards) */
.labs-list {}

/* Labs carousel wrapper */
.labs-carousel {
  position: relative;
}

/* =========================================
   Lab card – expanded states
   ========================================= */
.lab-card__header {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  padding: 1.5rem;
}

.lab-card__header-left {
  flex: 1;
}

.lab-card__header-right {
  flex-shrink: 0;
}

.lab-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
}

.lab-card__description {
  font-size: var(--fs-body);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: 0.5rem;
}

.lab-card__pi {
  font-size: var(--fs-body);
  color: var(--color-text-secondary);
}

.lab-card__label {
  font-size: var(--fs-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  margin-bottom: 0.5rem;
}

.lab-card__thumb {
  width: 200px;
  height: 130px;
  object-fit: cover;
  border-radius: var(--radius-md);
}

/* Expanded body */
.lab-card__body {
  padding: 0 1.5rem 1.5rem;
}

.lab-card__columns {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.lab-card__col {}
.lab-card__col--left {}
.lab-card__col--right {}

.lab-card__full-description {
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.lab-card__full-description p {
  margin-bottom: 1rem;
}

.lab-card__equipment {
  margin-bottom: 1.5rem;
}

.lab-card__equipment-list {
  list-style: disc;
  padding-left: 1.25rem;
}

.lab-card__equipment-item {
  margin-bottom: 0.35rem;
  font-size: var(--fs-body);
}

.lab-card__publications {
  margin-bottom: 1.5rem;
}

.lab-card__publication-list {
  list-style: none;
  padding: 0;
}

.lab-card__publication-item {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-light-border);
  font-size: var(--fs-body);
}

.lab-card__publication-item:last-child {
  border-bottom: none;
}

.lab-card__publication-item a {
  font-weight: 600;
}

.lab-card__publication-meta {
  display: block;
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  margin-top: 0.15rem;
}

.lab-card__highlight {
  margin-bottom: 1.5rem;
}

.lab-card__highlight-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.lab-card__highlight-date {
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
}

.lab-card__location {
  margin-bottom: 1rem;
  font-size: var(--fs-body);
}

.lab-card__coordinator {
  margin-bottom: 1rem;
  font-size: var(--fs-body);
}

/* Footer */
.lab-card__footer {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-light-border);
}

.lab-card__back {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--color-primary);
  padding: 0;
  transition: color 0.2s;
}

.lab-card__back:hover {
  color: var(--color-primary-hover);
}

.lab-card__detail-link {}

/* Toggle button */
.lab-card__toggle {
  display: block;
  width: 100%;
  padding: 0.75rem 1.5rem;
  background: var(--color-light-surface);
  border: none;
  border-top: 1px solid var(--color-light-border);
  cursor: pointer;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--color-primary);
  text-align: center;
  transition: background 0.2s;
}

.lab-card__toggle:hover {
  background: var(--color-light-border);
}

.lab-card__toggle-text {}

/* =========================================
   Lab detail page (standalone)
   ========================================= */
.lab-detail-page {}

.lab-detail {}

.lab-detail__layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 3rem;
  align-items: start;
}

.lab-detail__primary {}

.lab-detail__description {
  line-height: 1.8;
  margin-bottom: 2rem;
}

.lab-detail__description p {
  margin-bottom: 1rem;
}

.lab-detail__pi {
  margin-bottom: 1.5rem;
}

.lab-detail__pi-name {
  font-weight: 600;
  font-size: var(--fs-body);
}

.lab-detail__label {
  font-size: var(--fs-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  margin-bottom: 0.5rem;
}

.lab-detail__equipment {
  margin-bottom: 2rem;
}

.lab-detail__equipment-list {
  list-style: disc;
  padding-left: 1.25rem;
}

.lab-detail__equipment-item {
  margin-bottom: 0.35rem;
  font-size: var(--fs-body);
}

.lab-detail__publications {
  margin-bottom: 2rem;
}

.lab-detail__publication-list {
  list-style: none;
  padding: 0;
}

.lab-detail__publication-item {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-light-border);
}

.lab-detail__publication-item:last-child {
  border-bottom: none;
}

.lab-detail__publication-link {
  font-weight: 600;
  font-size: var(--fs-body);
  display: block;
  margin-bottom: 0.15rem;
}

.lab-detail__publication-title {
  font-weight: 600;
  font-size: var(--fs-body);
  display: block;
  margin-bottom: 0.15rem;
}

.lab-detail__publication-meta {
  display: block;
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
}

/* Sidebar */
.lab-detail__sidebar {}

.lab-detail__highlight {
  margin-bottom: 1.5rem;
}

.lab-detail__highlight-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.lab-detail__highlight-date {
  display: block;
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
}

.lab-detail__location {
  margin-bottom: 1.5rem;
  font-size: var(--fs-body);
}

.lab-detail__coordinator {
  margin-bottom: 1.5rem;
  font-size: var(--fs-body);
}

.lab-detail__coordinator-link {
  font-weight: 600;
}

.lab-detail__cover {
  margin: 0;
}

.lab-detail__cover img {
  width: 100%;
  border-radius: var(--radius-md);
}

.lab-detail__footer {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-light-border);
}

.lab-detail__back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--color-primary);
  transition: color 0.2s;
}

.lab-detail__back:hover {
  color: var(--color-primary-hover);
}

/* =========================================
   Publications page – extended
   ========================================= */

/* Publication slide extensions */
.publication-slide__badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: var(--color-primary);
  color: #fff;
  font-size: var(--fs-small);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-sm);
}

.publication-slide {
  position: relative;
}

.publication-slide__title {
  font-size: var(--fs-body);
  font-weight: 700;
  margin-bottom: 0.35rem;
  line-height: 1.3;
}

.publication-slide__abstract {
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-bottom: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.publication-slide__authors {
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  margin-bottom: 0.25rem;
}

/* Featured publications highlight text */
.featured-pubs__highlight {
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--color-light-surface);
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--color-text-secondary);
}

/* =========================================
   Publications table – controls & sort
   ========================================= */
.pub-table-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.pub-table-controls__search {
  flex: 1;
  min-width: 200px;
  padding: 0.6rem 1rem;
  border: 1px solid var(--color-light-border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body);
  font-family: var(--font-body);
  transition: border-color 0.2s;
}

.pub-table-controls__search:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.pub-table-controls__search::placeholder {
  color: var(--color-text-secondary);
}

.pub-table-controls__filters {
  display: flex;
  gap: 0.75rem;
}

.pub-table-controls__filter {
  padding: 0.6rem 1rem;
  border: 1px solid var(--color-light-border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body);
  font-family: var(--font-body);
  background: var(--color-light-bg);
  cursor: pointer;
  transition: border-color 0.2s;
}

.pub-table-controls__filter:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* Sortable column headers */
.pub-table__th {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color 0.2s;
}

.pub-table__th:hover {
  color: var(--color-primary);
}

.pub-table__th--num {
  text-align: right;
  min-width: 80px;
}

.pub-table__th--link {
  width: 80px;
}

/* Row & cell classes */
.pub-table__row {}

.pub-table__td {
  vertical-align: top;
}

.pub-table__td--title {
  font-weight: 600;
  max-width: 300px;
}

.pub-table__td--authors {
  font-size: var(--fs-body);
  color: var(--color-text-secondary);
  max-width: 200px;
}

.pub-table__td--journal {
  font-size: var(--fs-body);
  font-style: italic;
}

.pub-table__td--cited {
  text-align: right;
  font-weight: 600;
}

.pub-table__td--year {
  text-align: right;
}

.pub-table__td--link {
  text-align: center;
}

/* =========================================
   Impact card – extended children
   ========================================= */
.impact-card__title {
  font-size: var(--fs-body);
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.impact-card__list {
  list-style: none;
  padding: 0;
}

.impact-card__item {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-light-border);
  font-size: var(--fs-body);
}

.impact-card__item:last-child {
  border-bottom: none;
}

.impact-card__link {
  font-weight: 500;
}

.impact-card__source {
  display: block;
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  margin-top: 0.15rem;
}

.impact-stories__subtitle {
  color: var(--color-text-secondary);
  margin-bottom: 1.5rem;
}

/* =========================================
   Jobs page
   ========================================= */
.jobs-intro {
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--color-text-secondary);
}

.jobs-intro p {
  margin-bottom: 1rem;
}

.jobs-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.job-card {
  background: var(--color-light-bg);
  border: 1px solid var(--color-light-border);
  border-radius: var(--radius-card);
  padding: 2rem;
  transition: box-shadow 0.2s;
}

.job-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.job-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.job-card__title {
  font-size: var(--fs-h3);
  font-weight: 700;
}

.job-card__type {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: var(--color-primary);
  color: #fff;
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.job-card__description {
  font-size: var(--fs-body);
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: 1rem;
}

.job-card__description p {
  margin-bottom: 0.75rem;
}

.job-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-bottom: 1.25rem;
  font-size: var(--fs-body);
  color: var(--color-text-secondary);
}

.job-card__department,
.job-card__location,
.job-card__deadline {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.job-card__apply {
  display: inline-flex;
}

/* =========================================
   Pagination link modifiers
   ========================================= */
.pagination__link--prev,
.pagination__link--next {
  font-size: var(--fs-body);
}

/* =========================================
   Nav item (header)
   ========================================= */
.site-nav__item {
  display: flex;
  align-items: center;
}

/* =========================================
   News item link type modifiers
   ========================================= */
.news-item__link--doi,
.news-item__link--paper,
.news-item__link--external {
  /* Inherit base .news-item__link styles;
     add type-specific icon or color as needed */
}

/* =========================================
   Responsive overrides for new components
   ========================================= */
@media (max-width: 768px) {

  .area-detail__columns {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .area-detail__footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .lab-card__header {
    flex-direction: column;
  }

  .lab-card__thumb {
    width: 100%;
    height: auto;
  }

  .lab-card__columns {
    grid-template-columns: 1fr;
  }

  .lab-detail__layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .course-detail__meta {
    grid-template-columns: 1fr;
  }

  .pub-table-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .pub-table-controls__search {
    min-width: auto;
  }

  .section__footer--split {
    flex-direction: column;
    align-items: center;
  }

  .team-grid--featured {
    margin-bottom: 1.5rem;
  }

  .team-card--pi {
    max-width: none;
  }

  .labs-intro__grid {
    grid-template-columns: 1fr;
  }

  .method-modal {
    width: 95vw;
    max-height: 90vh;
  }

  .method-modal__inner {
    max-height: 90vh;
  }

  .method-modal__header {
    padding: 1rem 1.25rem;
  }

  .method-modal__body {
    padding: 1.25rem;
  }

  .job-card__header {
    flex-direction: column;
  }
}


/* --- Research: method tags inside area blocks, footer actions, highlight list --- */
.area-block__tags .method-tag {
  padding: 0.25rem 0.7rem;
  font-size: var(--fs-small);
  font-weight: 500;
  font-family: inherit;
}
.method-tag--static { cursor: default; }
.method-tag--static:hover {
  border-color: var(--color-light-border);
  color: var(--color-text-secondary);
  background: var(--color-light-bg);
}
.area-block__highlight + .area-block__highlight {
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--color-light-border);
}
.area-block__highlight-meta a { color: var(--color-primary); text-decoration: none; }
.area-block__highlight-meta a:hover { text-decoration: underline; }
.area-block__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}
.area-block__back {
  margin-left: auto;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-decoration: none;
}
.area-block__back { display: inline-flex; align-items: center; gap: 0.3rem; }
.area-block__back:hover { color: var(--color-primary); }


/* --- Inline icons --- */
.icon { flex: none; vertical-align: -0.15em; }

/* --- News list: expandable article --- */
.news-list-item__full { margin-top: 0.25rem; }
.news-list-item__content {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--color-text-secondary);
  margin-bottom: 1rem;
}
.news-list-item__content p { margin: 0 0 0.75rem; }
.news-list-item__content h2,
.news-list-item__content h3 { font-size: var(--fs-body); margin: 1.25rem 0 0.5rem; color: var(--color-text-primary); }
.news-list-item__content img { max-width: 100%; height: auto; border-radius: 8px; }
.news-list-item__content a { color: var(--color-primary); }
.news-list-item__full .news-list-item__links {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}
.news-list-item__link { display: inline-flex; align-items: center; gap: 0.4rem; }
.news-list-item__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.75rem;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}
.news-list-item__toggle:hover { text-decoration: underline; }
.news-list-item__toggle .icon { transition: transform 0.2s; }
.news-list-item__toggle[aria-expanded="true"] .icon { transform: rotate(90deg); }
.hero__title a { color: inherit; text-decoration: none; }

/* --- Home news cards: image area --- */
.news-item__image {
  margin: -1.5rem -1.5rem 1rem;
  height: 160px;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  overflow: hidden;
  background: var(--color-light-surface);
}
.news-item__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-item__image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  opacity: 0.6;
}


/* --- Labs: meta info (PI, highlight, location, coordinator) --- */
.lab-meta__pi {
  margin: 0 0 0.6rem;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--color-primary);
}
.lab-meta__pi a { color: inherit; text-decoration: none; }
.lab-meta__pi a:hover { text-decoration: underline; }
.lab-meta__boxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}
.lab-meta__box {
  border: 1px solid var(--color-light-border);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  background: var(--color-light-bg);
}
.lab-meta__label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.35rem;
  font-size: var(--fs-small);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-primary);
}
.lab-meta__label .icon { color: var(--color-primary); }
.lab-meta__text { margin: 0; font-size: var(--fs-body); line-height: 1.45; color: var(--color-text-secondary); }
.lab-meta__text a { color: var(--color-primary); text-decoration: none; }
.lab-meta__text a:hover { text-decoration: underline; }
.lab-meta__date { display: block; margin-top: 0.25rem; font-size: var(--fs-small); color: var(--color-text-secondary); opacity: 0.8; }
.lab-meta__coordinator { display: inline-flex; align-items: center; gap: 0.45rem; }
.lab-block__footer { flex-wrap: wrap; gap: 0.75rem 1.25rem; }
.lab-block__back {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: auto;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-decoration: none;
}
.lab-block__back:hover { color: var(--color-primary); }
.lab-block__sub-title .icon { color: var(--color-primary); }
a.research-card { text-decoration: none; }


/* --- Publications: contact actions with icons --- */
.pub-contact__btn,
.pub-contact__link { display: inline-flex; align-items: center; gap: 0.45rem; }


/* --- Team: journey as single-slide timeline --- */
.journey-timeline { grid-template-columns: 50px 1fr 50px; row-gap: 1.5rem; }
.journey-timeline__track { display: block; min-height: 9rem; }
.journey-timeline__item {
  display: none;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  max-width: 760px;
  margin: 0 auto;
  animation: journeyFade 0.35s ease;
}
.journey-timeline__item.is-active { display: block; }
@keyframes journeyFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.journey-timeline__title { font-size: var(--fs-h3); margin-bottom: 0.75rem; }
.journey-timeline__year { display: inline; font-size: inherit; margin: 0 0.35rem 0 0; letter-spacing: 0; }
.journey-timeline__text { font-size: var(--fs-body); line-height: 1.65; color: var(--color-text-on-dark-muted); }
.journey-timeline__text p { margin: 0 0 0.6rem; }
.journey-timeline__quote {
  margin: 1rem 0 0;
  padding-left: 1rem;
  border-left: 2px solid var(--color-primary-light, #A78BFA);
  font-style: italic;
  font-size: var(--fs-body);
  color: #fff;
}
.journey-timeline__steps {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  position: relative;
  gap: 0;
}
.journey-timeline__step {
  flex: 0 1 140px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-text-on-dark-muted);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}
.journey-timeline__step::before {
  content: "";
  position: absolute;
  top: 6px;
  left: -50%;
  width: 100%;
  border-top: 2px dashed rgba(255, 255, 255, 0.25);
}
.journey-timeline__step:first-child::before { display: none; }
.journey-timeline__step.is-active::before,
.journey-timeline__step.is-done::before { border-top-color: var(--color-primary-light, #A78BFA); }
.journey-timeline__step-dot {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #1e2856;
  border: 2px solid rgba(255, 255, 255, 0.35);
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.journey-timeline__step.is-done .journey-timeline__step-dot { border-color: var(--color-primary-light, #A78BFA); }
.journey-timeline__step.is-active .journey-timeline__step-dot {
  background: var(--color-primary-light, #A78BFA);
  border-color: var(--color-primary-light, #A78BFA);
  transform: scale(1.25);
}
.journey-timeline__step.is-active { color: #fff; }
@media (max-width: 640px) {
  .journey-timeline { grid-template-columns: 1fr; }
  .journey-timeline__arrow { display: none; }
}

/* --- Team: profile tiles / detail hero additions --- */
.profile-tile__more {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--color-primary);
}
.profile-tile:hover .profile-tile__more { text-decoration: underline; }
.profile-hero__tagline { margin: 0.15rem 0 0.75rem; font-size: var(--fs-body); opacity: 0.8; }
.profile-hero__social-link--mail { display: inline-flex; align-items: center; justify-content: center; }
.team-mission { margin-bottom: 1.5rem; }


/* --- Useful info: lecture slider, icons --- */
.lecture-embed__slide { display: none; width: 100%; height: 100%; }
.lecture-embed__slide.is-active { display: block; }
.lecture-embed__slide iframe,
.lecture-embed__slide video { width: 100%; height: 100%; border: 0; display: block; }
.lecture-embed__arrow[hidden] { display: none; }
.lecture-embed--single { grid-template-columns: 1fr; }

.section__link--button { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.section__link--button:hover { text-decoration: underline; }

.teaching-contact__btn,
.teaching-contact__link { display: inline-flex; align-items: center; gap: 0.45rem; }


/* =========================================
   Course tiles (teaching overview) - mockup layout
   ========================================= */
.course-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem 0.9rem;
  margin-top: 2rem;
  align-items: start;
}
.course-tile {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1rem 0.9rem;
  background: #fff;
  border: 1px solid var(--color-primary);
  border-bottom-width: 3px;
  border-right-width: 2px;
  border-radius: 8px;
  text-align: left;
}
.course-tile__head { display: grid; grid-template-columns: auto 1fr auto; gap: 0.5rem; align-items: start; }
.course-tile__icon { color: var(--color-text-primary); padding-top: 0.15rem; }
.course-tile__title { margin: 0; font-size: var(--fs-body); font-weight: 500; line-height: 1.3; color: var(--color-text-primary); }
.course-tile__title a { color: inherit; text-decoration: none; }
.course-tile__title a:hover { color: var(--color-primary); }
.course-tile__ects { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; }
.course-tile__ects-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  background: #1e293b;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}
.course-tile__ects-label { font-size: 0.5rem; font-weight: 700; letter-spacing: 0.06em; color: var(--color-text-primary); }
.course-tile__description { margin: 0; font-size: var(--fs-small); line-height: 1.45; color: var(--color-text-secondary); }
.course-tile__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.course-tile__tag {
  padding: 0.12rem 0.6rem;
  border-radius: 999px;
  background: #eef0f3;
  font-size: var(--fs-small);
  color: var(--color-text-primary);
}
.course-tile__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; margin: 0; }
.course-tile__meta-item { border: 1px solid var(--color-light-border); border-radius: 5px; padding: 0.45rem 0.6rem; min-height: 2.9rem; }
.course-tile__meta dt { font-size: var(--fs-small); color: var(--color-text-secondary); }
.course-tile__meta dd { margin: 0.1rem 0 0; font-size: var(--fs-small); font-weight: 600; color: var(--color-text-primary); line-height: 1.3; }
.course-tile__syllabus { border-bottom: 1px solid var(--color-light-border); padding-bottom: 0.55rem; }
.course-tile__syllabus summary {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  list-style: none;
  cursor: pointer;
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
}
.course-tile__syllabus summary::-webkit-details-marker { display: none; }
.course-tile__syllabus summary .icon--chevron-down { margin-left: auto; transition: transform 0.2s; }
.course-tile__syllabus[open] summary .icon--chevron-down { transform: rotate(180deg); }
.course-tile__syllabus-body { padding-top: 0.5rem; font-size: var(--fs-small); line-height: 1.5; color: var(--color-text-secondary); }
.course-tile__syllabus-body ul { margin: 0; padding-left: 1rem; }
.course-tile__syllabus-body p { margin: 0 0 0.4rem; }
.course-tile__foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
.course-tile__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}
.course-tile__link:hover { text-decoration: underline; }
@media (max-width: 900px) { .course-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .course-tiles { grid-template-columns: 1fr; } }

/* teaching overview: left aligned like the mockup */
.section--lectures .section__title,
.section--lectures .section__text { text-align: left; margin-left: 0; }

/* =========================================
   Team member cards - framed box, figure rises above the frame
   ========================================= */
.member-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3rem 1.25rem;
  margin-top: 2.5rem;
  text-align: left;
}
.member-card { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.member-card__frame {
  position: relative;
  height: 165px;
  margin-top: 90px;            /* room for the head above the frame */
  border: 1px solid #64748b;
  border-radius: 6px;
  background: #fff;
}
.member-card__frame--photo { margin-top: 0; height: 255px; overflow: hidden; border-color: transparent; }
.member-card__img { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.member-card__img--cutout {
  left: 50%;
  transform: translateX(-50%);
  /* the point it zooms around lives on the base state: leaving the hover, the figure tweens back around the same
     point - with it only on :hover it switched to the middle at once and the figure jumped ~4px (feedback 29.09.:
     "Other SPECTRE's" on the member pages; the team page had this fix in team.css only) */
  transform-origin: center bottom;
  width: auto;
  max-width: 100%;
  height: 255px;
  object-fit: contain;
  object-position: center bottom;
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  /* own compositing layer from the start: otherwise the browser moves the figure onto a layer only while
     the hover animation runs and rounds its fractional position differently there - the figure then gets
     1 px narrower before the zoom and wider again afterwards (visible in the left column) */
  will-change: transform;
}
.member-card:hover .member-card__img--cutout { transform: translateX(-50%) scale(1.03); }
/* wide cut-outs (the team's since 29.09.: shoulders widened with AI, face in the middle; class set in the snippet when
   the picture is wider than high): the height sets the size as with the narrow ones - a narrow frame cuts the
   shoulders at its sides instead of shrinking the figure; the head still rises above the frame */
.member-card__img--wide { max-width: none; }
.member-card__frame:has(.member-card__img--wide) { overflow-x: clip; }
.member-card__silhouette { fill: #9a9a9a; }
.member-card__name { margin: 1rem 0 0.5rem; font-size: var(--fs-h3); font-weight: 400; line-height: 1.25; color: var(--color-text-primary); }
.member-card__role { margin: 0 0 1rem; font-size: var(--fs-body); line-height: 1.5; color: var(--color-text-secondary); max-width: 16rem; }
.member-card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  font-size: var(--fs-body);
  color: var(--color-primary);
}
.member-card:hover .member-card__more { text-decoration: underline; }
.member-grid--small { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1rem; }
.member-card--small .member-card__frame { height: 110px; margin-top: 60px; }
.member-card--small .member-card__frame--photo { height: 170px; margin-top: 0; }
.member-card--small .member-card__img--cutout { height: 170px; }
.member-card--small .member-card__name { font-size: var(--fs-body); }
.member-card--small .member-card__role { font-size: var(--fs-small); margin-bottom: 0.5rem; }
.member-card--small .member-card__more { font-size: var(--fs-body); }
@media (max-width: 800px) { .member-grid, .member-grid--small { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .member-grid { grid-template-columns: 1fr; } }


/* =========================================
   Home hero with image / looping video
   ========================================= */
.hero--has-media { background-size: cover; background-position: center right; background-color: #020a14; }
.hero--has-media .hero__gradient {
  animation: none;
  opacity: 1;
  transform: none;
  background: linear-gradient(90deg,
    rgba(2, 10, 20, var(--hero-overlay, 0.55)) 0%,
    rgba(2, 10, 20, calc(var(--hero-overlay, 0.55) * 0.6)) 35%,
    rgba(2, 10, 20, 0) 65%);
}
.hero--home.hero--has-media { min-height: min(78vh, 760px); display: flex; align-items: center; }
.hero--home.hero--has-media .hero__content { width: 100%; }
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } }
@media (max-width: 768px) {
  .hero--has-media { background-position: 72% center; }
  .hero--has-media .hero__video { object-position: 72% center; }
  .hero--has-media .hero__gradient { background: rgba(2, 10, 20, calc(var(--hero-overlay, 0.55) * 0.9)); }
}

/* header floats transparently above the home hero */
.site-header--overlay {
  position: fixed;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom-color: transparent;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.site-header--overlay.is-scrolled,
.site-header--overlay:has(.site-nav.is-open) {
  background: var(--color-dark-bg);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* hero text split around the horizontal centre line (light beam passes between) */
.hero--home.hero--has-media { padding: 72px 0 0; }
.hero__content--split {
  display: grid;
  grid-template-rows: 1fr 1fr;
  row-gap: 3.5rem;
  min-height: min(calc(78vh - 72px), 688px);
  transform: translateY(-36px);   /* compensate header offset so the gap sits on the image centre */
}
.hero__content--split .hero__top { align-self: end; }
.hero__content--split .hero__bottom { align-self: start; }
.hero__content--split .hero__title { margin-bottom: 0; }
.hero__content--split .hero__subtitle { color: rgba(255, 255, 255, 0.85); }

/* hero canvas animation sits between image and text overlay */
/* screen: the canvas light adds to the photo like real light - with normal blending the pulse of the
   beam (same colour as the beam in the photo) stays practically invisible */
.hero__fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; mix-blend-mode: screen; }
/* 3D parallax layer (hero-fx.js): the photo redrawn by WebGL, fades in over the identical CSS background */
.hero__depth { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 0.6s ease; }
.hero__depth.is-ready { opacity: 1; }
/* real 3D scene (hero-3d.js): fades in with its first frame; the 2D layers below are no longer needed then */
.hero__3d { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 0.9s ease; }
.hero__3d.is-ready { opacity: 1; }
.hero--3d-ready .hero__fx,
.hero--3d-ready .hero__depth { visibility: hidden; }
/* the scene is expected (desktop with a mouse - <html class="has-hero-3d"> is set in the <head>, snippet hero-3d-head):
   the hero starts on the scene's dark stage, no photo in between (not even downloaded), no 2D animation, and the
   scene fades in there. Without the class (touch, reduced motion, error, timeout): photo + 2D animation as before. */
.has-hero-3d .hero--home.hero--has-media { background-image: none !important; background-color: #030a17; }
.has-hero-3d .hero__fx { visibility: hidden; }
.has-hero-3d .hero__3d { transition-duration: 0.6s; }
/* easter egg (hero-3d.js): after a minute of moving the mouse the scene turns into a bright studio - dark text on it,
   also in the header while it floats over the hero. hero-3d-light-fade only while it changes (slow colour fade). */
.hero-3d-light .hero--home .hero__title { color: #0b1433; }
.hero-3d-light .hero--home .hero__subtitle { color: rgba(11, 20, 51, 0.74); }
.hero-3d-light .hero--home .hero__gradient { opacity: 0; }
.hero-3d-light .site-header--overlay:not(.is-scrolled) .site-logo { color: #0b1433; }
.hero-3d-light .site-header--overlay:not(.is-scrolled) .site-nav__link { color: rgba(11, 20, 51, 0.7); }
.hero-3d-light .site-header--overlay:not(.is-scrolled) .site-nav__link:hover,
.hero-3d-light .site-header--overlay:not(.is-scrolled) .site-nav__link.is-active { color: #0b1433; }
.hero-3d-light-fade .hero--home .hero__title,
.hero-3d-light-fade .hero--home .hero__subtitle,
.hero-3d-light-fade .hero--home .hero__gradient,
.hero-3d-light-fade .site-header--overlay .site-logo,
.hero-3d-light-fade .site-header--overlay .site-nav__link { transition: color 0.6s ease-in-out 0.75s, opacity 1.8s ease; }
/* (the text flips quickly when the scene's background passes mid-grey, ~1 s in - so it never sits grey on grey for long) */


/* =========================================
   TYPOGRAPHY SCALE (from the mockup PDFs, design width 1920 / container 1000)
   Mockup px:  hero h1 61 · h2 44-50 · lead 24-26 · nav 22 · card title 23-25
               card text 18 · text links 27 · buttons 25
   The root size grows with the viewport, so every rem based size and spacing
   scales together; phones keep 16px.
   ========================================= */
html { font-size: clamp(16px, 0.5vw + 11.5px, 20px); }

body { font-weight: 400; }

/* headings: Inter semibold instead of extra bold, like the mockup */
.hero__title {
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.01em;
  max-width: 16em;
}
.hero__subtitle {
  font-size: var(--fs-h3);
  line-height: 1.5;
  max-width: 27rem;
  color: rgba(255, 255, 255, 0.92);
}
.hero__content--centered .hero__subtitle { max-width: 36rem; }
.section__title {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.section__text {
  font-size: var(--fs-h3);
  line-height: 1.55;
  max-width: 34rem;
}
.section__text--wide { max-width: 46rem; }
.section__link { font-size: var(--fs-body); font-weight: 500; }
.btn { font-size: var(--fs-body); font-weight: 500; padding: 0.7rem 1.9rem; }
.btn--small { font-size: var(--fs-body); padding: 0.45rem 1.1rem; }

/* header: 9 menu items have to fit next to the logo */
.site-nav__link { font-size: var(--fs-small); font-weight: 400; }
.site-nav__list { gap: clamp(1rem, 1.8vw, 1.75rem); }
.site-logo__text { font-size: 1.2rem; }

/* home intro band */
.intro-text {
  font-size: var(--fs-h3);
  font-weight: 300;
  line-height: 1.55;
  max-width: none;
  text-align: left;
  color: #fff;
}
.intro-text strong { font-weight: 700; color: #894ff7; }

/* =========================================
   Research topic cards (home, labs) - mockup: centred icon, dark title, bracket frame
   ========================================= */
.research-topics-grid,
.labs-research__grid { gap: 1rem; }
.research-card {
  padding: 1.5rem 1rem 1.75rem;
  border-left: 1.5px solid #9ca3af;
  border-right: 1.5px solid #9ca3af;
  border-radius: 14px;
  font-family: inherit;
}
.research-card__icon {
  width: 4.25rem;
  height: 4.25rem;
  object-fit: contain;
  margin: 0 auto 1rem;
  display: block;
}
.research-card .research-card__title,
.research-card--green .research-card__title,
.research-card--yellow .research-card__title,
.research-card--teal .research-card__title,
.research-card--orange .research-card__title {
  color: #213342;
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.25;
  margin-bottom: 0.9rem;
}
.research-card__tagline {
  font-size: var(--fs-small);                      /* as on the research and labs pages (feedback 29.09.) */
  font-style: normal;
  line-height: 1.5;
  color: #333;
  max-width: 11rem;
  margin: 0 auto;
}

/* research page: topic cards over the hero - same look as on home */
.research-summary__icon { width: 4rem; height: 4rem; object-fit: contain; margin: 0 auto 0.9rem; display: block; }
.research-summary__card .research-summary__title { color: #213342; font-size: var(--fs-h3); font-weight: 500; line-height: 1.25; }
.research-summary__tagline { font-style: normal; font-size: var(--fs-body); color: #333; }
.hero--home .hero__title { max-width: 11.5em; }


/* =========================================
   COLOUR WORLD per mockup: navy gradient instead of flat indigo
   ========================================= */
:root {
  --color-dark-bg: #12264a;
  --color-dark-deep: #030b1a;
  --color-dark-darker: #020817;
  --grad-dark: linear-gradient(90deg, #1a3560 0%, #122649 45%, #0a1730 100%);
}
.dark-bg,
.wave-divider--dark-to-light,
.wave-divider--indigo-to-darker,
.wave-divider--light-to-dark { background: var(--grad-dark); }
.site-header { background: #061226; }
.site-header--overlay { background: transparent; }
.site-header--overlay.is-scrolled,
.site-header--overlay:has(.site-nav.is-open) { background: #061226; }
.section--intro.dark-bg { background: #1a2b47; }
/* the glow: the full image over a tiny copy of it right here (480 x 320 WebP, 2 KB) - the copy is there with the
   page's first frame, the image covers it once loaded (it looks the same). Before, the hero showed plain navy until
   the image had arrived and the glow then popped in - behind the transparent header it looked as if the header
   flickered on every page change (feedback 28.09., e.g. with the browser cache off or on a first visit) */
.hero--dark {
  background:
    url("../img/hero-glow.webp") center / cover no-repeat,
    url("data:image/webp;base64,UklGRuQIAABXRUJQVlA4INgIAABQVACdASrgAUABPj0cjEUiIaMQSNRkMAPEtLdwfFst5O/05DCe+UIGPIsP/h+/QDQ/uL1v8ACDFYcdczp8TPvzPwxf35t7tvrRvuzMMaqrQRQHRdthFtQ2u+37MkhW/khsYtJ7RdvTRywoA9hoGY6AW8bTbbJWCHJfXF86e7JqYkr5lMeuqXeHOA475fYxaQGvgFL2yaSkFAzaPidl0Pme9LlGNe5ztfV7X45M7cJ+e07cyEq+i7uJrnXEgt/jYyamTxwndRBed2CLlvztiUN/IXL/ltuOe9p32cjkCgDSHFwcKuRKQxSAcchm+GS2EeP+5Ruf1JRBpGq4TSPd/NgNkjRt02Yak2fSNz//VZhAgesZA5z7r9n+cQdax2+Hke26vjXxgS9dvJVx2rk++q7SoxsfFaR8s32xazP5goBk5UcwTw4agRoOT4Ugic/YTX7ZPoupfsBi9gyO6yTQo4K649lfwjEwp3V9c/qy/16TrNArwKc1BF+HoSr7xRhcC1MAnEPK7WFjObC9/K0OoGPJGhC8YAVZzNHNN3aWbbbla+eIuBD//VJKIpYOWRw0Mq5RnUxex7y2MmOUyVKKmflH933GI0LgKiVQPr07x6LKfM402tzENLuato8d2pUkcVQVx1Ac/wurNR6nDnPBsIYRE+cD9xozSu8tKdn6PyZY2MURHAdJBpaC2Tf1/6PycjpNgMXgpwQ7753pvEtNYCUyPAqF05BkG7ls7KZIVJdlG9yxovBFlUDN9cXtx+W+eGIffUmEboAP+wc54v5j1QIjrNVB7to3qVwnhDg07XuJC8KhffvGvKYaun797ZPtsokUJX/vAntV8TFVmAZKWnEaaw4iMzoR4DWYfk/KklI7rtlWxEvc8st997HEmb8GlDsUroEnW6VdbPpgwAD+93e/ztpphDHO5eAqypzknwWNNEB3hGdFxPDGNBP46SUSeyKOxczNv/z0KBV5SIKng/XwtWyhFmRlAMk3cBFrv4sYPoOXdYYMcWJXAlo5crxhP0ghzYPxko5zMrmZpqUCwQWg/iAAAvIVPiL1VBGIK12HgRLwHgKWKl0McJ1fNsTq122tItLj3WZdEZNTYXEPsLM3vp4cZdTdhAnV6OqJNrujKZdzOHh03268/LiZdxHei9Jxb6UudRPgOzsCByvxm0itXULsbwIl4CW5PkoKT97AWXCuH7f1jv0VcMhgIy1xH6TVrQ7VKlZ5du/MR6FKqRalmfxSwHINn3O/LlQ6TENUgxYDKyaiHyfHNFdbsLG10LvPyT3OSIyMrs57HAsaDsEpU1rHhmO5+xZjkrJMWhywyTGiap/AplZF7srXI29mqxv9sup7WPEQ6V1WMbrapHFm1Y5ySgBdrSClnW3cO2XitpHGdkeZiLjcTqcT6G3+k9TLD/HqOvmMjz+c8otwiTTZe3Jw+IiIUorDiZadJIIDdkHmuqwI86ecBQreEUtrl60lHDN+q4M+IiNTHi/B/SUSgJDLqH1ADnRsq59T2oaNRrpgUhWdBOw+sXwX80cNZno9+wp1P+cM3Lne+rVrXFn6UbVJgEwD2ehNiWEy3HRCcV6spQx/pcAhwo0NqDuGmvNhrLqnB6/RElynGHqrEUvJV7DZ+W3N5ad3VOMrh63mrm4KMdxB/8Un8CLSI9xSKBgEbXPfUZAzhxHZrlCVpeihev1EQKX2SOQS6jdC8J/Ubj0mVmudY3vrHi61FGc99IFmiYUKOtRK9hHezlGnZ12GkpB9Gr/4VP1k4cul4lQ9GKnczqOd00A52Sa6bbwuQZmeT6LcWB7YiQozzaFNXKOYmgs+NTiMNu35676Mmx28kGmzEDWPZTNYnaOL20MNeJvRXKgibQL7wcN85tfMPdepHunFdU1o5rz0IEo5qH2rBU7yKt7x4p+zhFZsYZa3h+hozuCMyGJm+Tc25UzIXp2uu9nhFhCfUePurhe1VEnnLHESqXDWEatEajzl3HuvQCSjZTmf9fpIQzQMxFpY1BxE50DL2K0Hpvke9vV9V1I6Jd97gOpn/E6dulSjhiOUWK9HwuVna4HxZv0WL4mdOHdsVdCtJJAYvsaEDKSlCWE9AT9z1Wlw5l1n7q72zypX9g//zzKc+ZPoYEEZqnOBsEvyPfCSewZU4UjnjWog/SeKPh5w//FKkuFzUKzhBSAvVqR5FEGpNMJsIvw4c4OgpOtKkIAhqDES0SaTS9PUCOPpIuAWhFAYobP7rCq4kEL3427W1WwmqApCfGTTsVfDnieDqZWDwrqazF4XXzzzydSK4UriPCNQvhGNQIfn97pAO+U1cmt+2KcUpzegAcuIJK6ggR1oQQw3K3storyKQpHA+Bkm85jwA0hCSzlm6yntFR2SBKyeqR5Gg9GDDoF3z+XPu62ekR8tATLEXlzdvCKcdGBKpKegShBQIdtEzUuhIVD2gtOOhcgZ25wukdwFQ5TrSPrR0sETmJTyuKZ2VF0CjdpbbGl/XPG6bw4+90FH+LiVI58oh8JUElqhG2sUF6GWcYuHSaZZYEH4RfOTGhx/lV4k977lAK0KKqstPtrXnceSKQz1BCaijRufzlX0ndsddqOg2GjiUyvO4akp57TtVatSepcEG/wc4wU4heUQ2D/EkSgZCE2HhWIOTH9DkVkk3LFMiIS0rJm8Y6TSEQrYM7JOzUvOh9nKrJoQ6PcURQ5JQXWZn2ewqXGU9IUot6f8A7wyiuvJbhUYoTjbVagvrdP9LQbaZw7LR8iWrnp4HvmDrlS1jd/LZ3Ndilr/oNuHMBBTnktOmysrU54RPKSckRr3MVzBlF3h9z5LC2Ia8maiXaxiaNGpec1rp7+EtmqK+jgt4TCO4zvZInkfWEPRSonEPX7qg99tO2yQ1yWSVce3/DEAgQ6XAJEzsEZY1cGczGRuMeZYONdpS3QQ1Jk7XbbaWGTOzU92TiFF8pbJ+PRkm9Ey17kyVi1BvhRQvGnn9nbQua5GZdezOjq8+XNJGC6nlqRJRKXLrzwqf1hopvYZ55GXtyQAAA==") center / cover no-repeat,
    #030b1a;
}
.hero--dark .hero__gradient { display: none; }

/* text links with arrow icon */
.section__link { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.section__link--on-dark { color: #fff; }
.section__link--dark { color: #1c2e40; }
.section__link--on-dark:hover,
.section__link--dark:hover { text-decoration: underline; }
.section__footer--inline { display: flex; justify-content: center; align-items: center; gap: 2rem; flex-wrap: wrap; }
.btn--dark-outline { border-color: #5b21b6; color: #1c2e40; background: #fff; }
.btn--dark-outline:hover { background: #5b21b6; color: #fff; }
.btn--outline-violet { border: 2px solid #5b21b6; border-radius: 8px; color: #fff; background: transparent; font-size: var(--fs-body); padding: 0.55rem 1.4rem; }
.btn--outline-violet:hover { background: #5b21b6; }

/* =========================================
   Home: news teaser cards
   ========================================= */
.news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.3rem; max-width: 1000px; margin: 0 auto; }
.news-teaser {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 8px;
  border-bottom: 6px solid #6d28d9;
  color: #213342;
  text-decoration: none;
  overflow: hidden;
  min-height: 26rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.news-teaser:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3); }
.news-teaser__date { padding: 1.1rem 1.4rem 0.9rem; font-size: var(--fs-body); }
.news-teaser__image {
  height: 9.6rem;
  margin: 0 0.8rem;
  border-top: 1.5px solid #8a8f98;
  border-bottom: 1.5px solid #8a8f98;
  display: flex;
  align-items: center;
  justify-content: center;
}
.news-teaser__image:has(img) { margin: 0; border: 0; }
.news-teaser__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-teaser__placeholder { font-size: 1.3rem; font-weight: 300; color: #213342; }
.news-teaser__title { margin: 1.2rem 1.4rem 1rem; font-size: var(--fs-h3); font-weight: 500; line-height: 1.35; color: #213342; }
.news-teaser__more { margin: auto 1.4rem 1.3rem; font-size: var(--fs-body); font-weight: 500; color: #722be2; }
.news-teaser:hover .news-teaser__more { text-decoration: underline; }
@media (max-width: 860px) { .news-grid { grid-template-columns: 1fr; max-width: 28rem; } .news-teaser { min-height: 0; } }

/* =========================================
   Home: team teaser (round b/w photos, no card chrome)
   ========================================= */
.team-grid { gap: 1rem; }
.team-card { background: none; border: 0; box-shadow: none; padding: 0.5rem; }
.team-card:hover { transform: none; box-shadow: none; }
.team-card__portrait img,
.team-card__placeholder { width: 9.3rem; height: 9.3rem; border-radius: 50%; margin: 0 auto 1.4rem; display: block; }
.team-card__portrait img { object-fit: cover; filter: grayscale(1); transition: filter 0.3s ease; }
.team-card:hover .team-card__portrait img { filter: none; }
.team-card__placeholder { background: #6e7c8a; }
.team-card__name { font-size: var(--fs-h3); font-weight: 500; line-height: 1.25; color: #213342; max-width: 9em; margin: 0 auto 0.9rem; }
.team-card__role { font-size: var(--fs-small); line-height: 1.45; color: #213342; max-width: 13em; margin: 0 auto; }   /* small (feedback 29.09.), as wide as the name */

/* =========================================
   Home: open positions
   ========================================= */
.section--positions.dark-bg { background: #020817 center / cover no-repeat; }
.positions-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.3rem; max-width: 1000px; margin: 2.5rem auto 0; }
.position-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3rem 1rem 2.5rem;
  min-height: 16.5rem;
  background: rgba(5, 9, 26, 0.72);
  border: 1px solid rgba(120, 140, 200, 0.18);
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
a.position-card:hover { border-color: rgba(137, 79, 247, 0.7); transform: translateY(-4px); box-shadow: none; }
.position-card__icon { font-size: 3rem; line-height: 1; margin-bottom: 1.6rem; }
.position-card__icon--image { width: 5.4rem; height: 5.4rem; object-fit: contain; }
.position-card__title { font-size: var(--fs-h3); font-weight: 500; line-height: 1.25; color: #fff; max-width: 8em; margin: 0; }
@media (max-width: 760px) { .positions-grid { grid-template-columns: 1fr; max-width: 22rem; } .position-card { min-height: 0; } }

/* =========================================
   Home: teaching band (full width, image background)
   ========================================= */
.section--teaching-teaser { padding: 0; }
.teaching-teaser { border-radius: 0; padding: 0; background-color: #030b1a; background-size: cover; background-position: center; }
.teaching-teaser::before { border-radius: 0; background: linear-gradient(90deg, rgba(3, 11, 26, 0.35), rgba(3, 11, 26, 0) 60%); }
.teaching-teaser:not(.teaching-teaser--image)::before { background: none; }
.teaching-teaser__content { padding-top: 13rem; padding-bottom: 3.5rem; text-align: left; }
.teaching-teaser__content h2 { font-size: var(--fs-display); font-weight: 600; margin-bottom: 1.2rem; color: #fff; }
.teaching-teaser__content p { font-size: var(--fs-h3); line-height: 1.35; color: #fff; max-width: 25em; margin-bottom: 1.8rem; }
@media (max-width: 760px) { .teaching-teaser__content { padding-top: 7rem; } .teaching-teaser { background-position: 30% center; } }

/* =========================================
   Team page: group photo + banner
   ========================================= */
.hero--team { padding-bottom: 20rem; }
.team-group-photo { margin-top: -17rem; position: relative; z-index: 2; }
.team-group-photo img { display: block; width: 100%; max-width: 1000px; margin: 0 auto; border-radius: 8px; }
.team-banner { display: flex; justify-content: center; margin: 1.2rem 0 0; }
.team-banner span {
  display: inline-block;
  padding: 0.35rem 4.5rem;
  background: #000;
  color: #fff;
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.2;
  clip-path: polygon(0 0, 100% 0, calc(100% - 2.4rem) 100%, 2.4rem 100%);
}
.team-banner::before,
.team-banner::after { content: ""; width: 3rem; background: #000; margin: 0 0.5rem; }
.team-banner::before { clip-path: polygon(0 0, 45% 0, 100% 100%, 55% 100%); }
.team-banner::after  { clip-path: polygon(55% 0, 100% 0, 45% 100%, 0 100%); }

/* research cards: titles are laid out for two lines so the four cards line up */
.research-card .research-card__title,
.research-summary__card .research-summary__title { min-height: 2.5em; max-width: 8.5em; margin-left: auto; margin-right: auto; text-wrap: balance; }
.research-card__tagline { text-wrap: balance; }


/* =========================================
   TYPE SCALE - the only five font sizes of the site.
   (root size is fluid: 16px on phones -> 20px on wide screens)
   display  hero titles                         61px max
   h2       section titles                      47px max
   h3       card titles, names, lead paragraphs 25px max
   body     running text, buttons, text links   20px max
   small    card text, meta, tags, navigation   17px max
   ========================================= */
:root {
  --fs-display: clamp(2.1rem, 4.2vw, 3.05rem);
  --fs-h2:      clamp(1.7rem, 3.2vw, 2.35rem);
  --fs-h3:      clamp(1.1rem, 1.9vw, 1.25rem);
  --fs-body:    1rem;
  --fs-small:   0.85rem;
}
/* every clickable button / text link: same size and weight */
.btn, .btn--small, .btn--outline-violet, .section__link,
[class*="__link"]:not(.site-nav__link):not([class*="social"]), [class*="__more"], [class*="__toggle"]:not(.site-header__toggle), [class*="__back"] {
  font-size: var(--fs-body);
  font-weight: 500;
}
.site-nav__link, .site-footer a, .site-footer { font-size: var(--fs-small); }


/* curved edge overlapping the following section (publications -> positions) */
.wave-divider--overlap { position: relative; z-index: 2; background: transparent; margin-bottom: -90px; pointer-events: none; }
.wave-divider--overlap + .section { padding-top: calc(90px + 4rem); }


/* =========================================
   Header bar: prism logo, spacing, single-line navigation
   ========================================= */
.site-header__inner { gap: 2.5rem; height: 4.5rem; }
.site-logo { gap: 0.7rem; flex: none; position: relative; isolation: isolate; }
/* the lettering is part of the logo: it keeps its colour on hover (the global a:hover would turn it violet) -
   instead main.js lights a short flare of light behind it, then a calm glow (canvas below icon and lettering) */
.site-logo:hover, .site-logo:focus-visible { color: var(--color-text-on-dark); }
.site-logo__glow { position: absolute; z-index: -1; pointer-events: none; }
.site-logo__icon { width: 2.6rem; height: auto; display: block; }
.site-logo__image { height: 2.4rem; width: auto; display: block; }
.site-logo__text { font-size: 1.2rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1; }
.site-nav { min-width: 0; }
.site-nav__list { gap: clamp(0.9rem, 1.7vw, 1.6rem); flex-wrap: nowrap; }
.site-nav__link { white-space: nowrap; }
.hero--home.hero--has-media { padding-top: 4.5rem; }
@media (max-width: 768px) {
  .hero--team { padding-bottom: 9rem; }
  .team-group-photo { margin-top: -7rem; }
  .team-banner span { font-size: var(--fs-h3); padding: 0.3rem 2.5rem; }
}


/* =========================================
   Labs teaser carousel (home, useful info) - portrait photos, labels left, plain violet chevrons
   ========================================= */
.labs-carousel { position: relative; max-width: 1000px; margin: 2.5rem auto 0; padding: 0 3.5rem; }
.labs-carousel__track { gap: 1.2rem; scroll-padding: 0; }
.labs-carousel__track > .labs-carousel__slide {
  flex: 0 0 calc((100% - 3 * 1.2rem) / 4);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: #213342;
  text-decoration: none;
  text-align: left;
}
.labs-carousel__photo { display: block; width: 100%; aspect-ratio: 232 / 365; object-fit: cover; border-radius: 6px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.labs-carousel__photo--placeholder { background: linear-gradient(160deg, #cbd5e1, #94a3b8); }
.labs-carousel__slide:hover .labs-carousel__photo { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); }
.labs-carousel__label { font-size: var(--fs-h3); font-weight: 500; line-height: 1.25; text-align: left; }
.labs-carousel .carousel-btn {
  position: absolute;
  top: 38%;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--color-primary);
  cursor: pointer;
}
.labs-carousel .carousel-btn:hover { background: none; color: #4c1d95; }
/* the arrow towards the end that is reached (main.js): greyed out - a little lighter than the section's subtitle
   (#64748b) - and without a hover */
.labs-carousel .carousel-btn { transition: color 0.25s ease; }
.labs-carousel .carousel-btn.is-disabled,
.labs-carousel .carousel-btn.is-disabled:hover { color: #94a3b8; cursor: default; }
.labs-carousel .carousel-btn--prev { left: 0; }
.labs-carousel .carousel-btn--next { right: 0; }
@media (max-width: 900px) { .labs-carousel__track > .labs-carousel__slide { flex-basis: calc((100% - 1.2rem) / 2); } }
/* swipe with the mouse (spectreSwipe in main.js - carousels, featured publications, journey, lectures, photo viewer):
   the grabbing hand and no text selection while dragging */
.is-swiping, .is-swiping * { cursor: grabbing !important; user-select: none; }
/* dragging the labs row with the mouse (main.js): it follows the pointer without snapping; at the first / last card
   it gives a little (--pull) and springs back */
.labs-carousel__track.is-dragging { scroll-snap-type: none; }
.labs-carousel__track.is-dragging > * { transform: translateX(var(--pull, 0px)); }
.labs-carousel__track.is-settling > * { transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); }
@media (max-width: 520px) { .labs-carousel { padding: 0 2.2rem; } .labs-carousel__track > .labs-carousel__slide { flex-basis: 100%; } }


/* =========================================
   Transparent header on sub pages: stays sticky in the flow, the hero slides underneath it
   ========================================= */
/* header = 4.5rem + 1px border: pull the hero up by the full height, otherwise 1px of page background shows above it */
.site-header--inflow { position: sticky; top: 0; margin-bottom: calc(-4.5rem - 1px); }
.site-header--inflow ~ main > .hero:first-child > .container { border-top: 4.5rem solid transparent; }
/* buttons use the darker mockup violet, links keep the lighter one */
.btn--primary { background: #5912b5; border-color: #5912b5; }
.btn--primary:hover { background: #4a0f98; border-color: #4a0f98; }

/* carousel: the scrolling track clips anything outside its box, so reserve room inside it for the hover lift (top) and the shadow (bottom/sides) */
.labs-carousel__track { padding: 0.75rem 0.75rem 2rem; margin: -0.75rem -0.75rem -2rem; scroll-padding-inline: 0.75rem; }
.labs-carousel__label { overflow-wrap: break-word; hyphens: auto; }

/* carousel labels one step smaller than card titles: the columns are narrow */
.labs-carousel__label { font-size: var(--fs-body); }

/* short violet rule separating two light sections (home: Our Team -> Labs & Facilities) */
.section--team + .section--labs { padding-top: 0; }
.section--team + .section--labs::before {
  content: "";
  display: block;
  width: 4.6rem;
  height: 2px;
  margin: 0 auto clamp(3rem, 6vw, 4.5rem);
  background: #5912b5;
}
/* keep "Spectroscopy of / Energy Materials" on two lines and clear of the glass pane */
.hero--home .hero__title { max-width: 9.6em; text-wrap: balance; }

/* =========================================
   FEEDBACK ROUND 1 (22.09.2026) - global adjustments
   ========================================= */
/* type scale: smaller h3, slightly smaller h2, buttons/links below body size */
:root {
  --fs-h2:  clamp(1.6rem, 2.9vw, 2.1rem);   /* max 42px */
  --fs-h3:  clamp(1rem, 1.3vw, 1.05rem);    /* max 21px */
  --fs-ui:  0.9rem;                          /* buttons, text links */
}
.btn, .btn--small, .btn--outline-violet, .section__link,
[class*="__link"]:not(.site-nav__link):not([class*="social"]), [class*="__more"], [class*="__toggle"]:not(.site-header__toggle), [class*="__back"] {
  font-size: var(--fs-ui);
}
.btn { padding: 0.6rem 1.6rem; }
/* running text in cards, lists and FAQ answers one step smaller than body */
.section__text, .hero__subtitle, .intro-text { font-size: var(--fs-body); }
.hero__subtitle { max-width: 30rem; }
.hero__content--split .hero__subtitle { font-size: var(--fs-body); }
ul li, ol li, dd, .faq-accordion__answer, .team-cta__positions { font-size: var(--fs-small); }
.site-nav__list li { font-size: inherit; }

/* hero: taller on wide screens so the glass pane is fully visible; slightly bluer/violet tint */
.hero--home.hero--has-media { min-height: clamp(520px, 56vw, 92vh); background-color: #050f2c; }
.hero--has-media .hero__gradient {
  background:
    linear-gradient(90deg, rgba(8, 16, 56, var(--hero-overlay, 0.25)) 0%, rgba(8, 16, 56, calc(var(--hero-overlay, 0.25) * 0.6)) 35%, rgba(8, 16, 56, 0) 65%),
    linear-gradient(180deg, rgba(60, 40, 140, 0.10), rgba(20, 40, 110, 0.12));
}

/* intro band: less vertical space */
.section--intro.dark-bg { padding: 2.75rem 0; }

/* research topics: more air above the headline (4rem), less below the cards; hover = shadow only */
.section--research-topics { padding-top: 4rem; padding-bottom: 2.5rem; }
.section--research-topics .section__title { margin-bottom: 4rem; }  /* same distance as above the headline (padding-top) */
.research-card:hover { background: transparent; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10); transform: translateY(-4px); }

/* links: no underline on hover - the arrow moves towards the word instead */
.section__link:hover, .section__link--on-dark:hover, .section__link--dark:hover, .area-block__more:hover, .area-block__highlight-meta a:hover,
.news-teaser:hover .news-teaser__more, .team-card:hover .team-card__name, .member-card:hover .member-card__more,
.news-list-item__toggle:hover, .labs-carousel__slide:hover .labs-carousel__label, .lab-block__more:hover, .course-tile__link:hover,
.section__link--button:hover, .research-cta__link:hover, .pub-contact__link:hover, .teaching-contact__link:hover { text-decoration: none; }
.section__link .icon, .news-teaser__more, .member-card__more .icon, .news-list-item__toggle .icon, [class*="__link"] .icon { transition: transform 0.2s ease; }
.section__link:hover .icon:first-child, .member-card:hover .member-card__more .icon { transform: translateX(4px); }
.section__link:hover .icon:last-child:not(:first-child) { transform: translateX(-3px); }
.news-teaser__more::after { content: "\2192"; display: inline-block; margin-left: 0.35em; transition: transform 0.2s ease; }
.news-teaser:hover .news-teaser__more::after { transform: translateX(4px); }

/* labs carousel: lift only, no blurry shadow */
.labs-carousel__slide:hover .labs-carousel__photo { box-shadow: none; }

/* wave dividers: no seam line along their edges at any zoom (feedback 29.09.: a 1px line at 75 % / 125 %). At zoom
   levels the edges fall between screen pixels; where two areas meet, the colour behind them showed through.
   Two kinds of edges: the divider's own background meets the area next to it (same colour) - the divider reaches
   2px into that area and lies above it; the drawn curve's straight edge meets the area next to it (the curve's
   colour) - the curve reaches 2px beyond the divider. Both overlaps have the colour that is there anyway; 2px:
   at 75 % one CSS pixel is less than one screen pixel. (Before: 1px, and the curve's extra pixel was cut off.) */
.wave-divider { position: relative; z-index: 1; margin-top: -2px; margin-bottom: -2px; overflow: visible; }
/* (moved up with top, not with a margin: a negative margin would merge with the divider's own) */
.wave-divider svg { display: block; position: relative; top: -2px; height: calc(100% + 4px); overflow: visible; }
/* lying on the next area: only the curve reaches up into the area above */
.wave-divider--overlap { z-index: 2; margin-top: 0; margin-bottom: -90px; }
@media (max-width: 768px) { .section--research-topics .section__title { margin-bottom: 2rem; } }  /* mirrors the reduced section padding on small screens */
/* home: headline-only sections (News, Selected Publications) - same gap above and below the headline as in Research Topics */
.section--news, .section--publications { padding-top: 4rem; }
.section--news .section__title, .section--publications .section__title { margin-bottom: 4rem; }
@media (max-width: 768px) { .section--news .section__title, .section--publications .section__title { margin-bottom: 2rem; } }

/* news: teaser / article cross-fade stack (both visible only while swapping) */
.news-list-item__swap.is-swapping { display: grid; overflow: hidden; }
.news-list-item__swap.is-swapping > * { grid-area: 1 / 1; align-self: start; }
/* wrapper always establishes its own formatting context so child margins are measured the same way in flow and while swapping (no jump at the end) */
.news-list-item__swap { display: flow-root; }
.news-list-item__swap.is-swapping { display: grid; }

/* very wide screens (21:9 etc.): show the whole light-beam image instead of cropping top/bottom -
   full height, centred, the dark image edges blend into the matching background colour */
@media (min-aspect-ratio: 27/10) {
  .hero--home.hero--has-media { background-size: auto 100%; background-position: center center; background-repeat: no-repeat; background-color: #020a14; }
  .hero--home.hero--has-media .hero__gradient { background:
    linear-gradient(90deg, rgba(8, 16, 56, var(--hero-overlay, 0.25)) 0%, rgba(8, 16, 56, 0) 45%),
    linear-gradient(180deg, rgba(60, 40, 140, 0.10), rgba(20, 40, 110, 0.12)); }
}
/* wide hero image (3200px, glass at ~62%): anchor so the glass pane sits in the right third at any viewport */
.hero--home.hero--has-media { background-position: 42% center; }
@media (max-width: 768px) { .hero--home.hero--has-media { background-position: 55% center; } .hero--home.hero--has-media .hero__video { object-position: 55% center; } }
@media (min-aspect-ratio: 27/10) { .hero--home.hero--has-media { background-position: center center; } }

/* =========================================================
   Content blocks - "More images and texts" of guides, 3D files, labs, research areas and news
   (snippets/blocks/kb-*.php, snippets/media/video-embed.php, assets/js/content-blocks.js).
   The doubled selectors beat the older rules for figures inside the long texts of these pages.
   ========================================================= */
/* image: the full text width - smaller images are enlarged to it - or half the width, centred (phones: full) */
.kb-image { margin: 2em 0; }
figure.kb-image img { display: block; width: 100%; max-width: none; height: auto; max-height: none; border-radius: 8px; }
.kb-image.kb-image--full { max-width: none; }
.kb-image.kb-image--half { width: 50%; max-width: none; margin-left: auto; margin-right: auto; }
.kb-image.kb-image--cover { margin-top: 0; margin-bottom: 2.5rem; }          /* cover image of guides and 3D files */
.kb-image figcaption,
.kb-gallery figcaption,
.kb-video figcaption { margin-top: 0.5em; font-size: var(--fs-small); line-height: 1.5; color: #667085; }
.kb-image--half figcaption { text-align: center; }

/* gallery: photos in a grid (4:3), a click opens them large */
.kb-gallery { margin: 2em 0; }
.kb-gallery.kb-gallery,
.kb-video.kb-video { max-width: none; }
.kb-gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.75rem; }
.kb-gallery__item { display: block; overflow: hidden; border-radius: 8px; cursor: zoom-in; }
.kb-gallery .kb-gallery__item img { display: block; width: 100%; height: auto; max-height: none; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; transition: transform 0.3s ease; }
.kb-gallery__item:hover img { transform: scale(1.04); }
.kb-gallery__item:focus-visible { outline: 2px solid #5912b5; outline-offset: 3px; }

/* video: YouTube / Vimeo, loaded only after a click on the play button */
.kb-video { margin: 2em 0; }
.kb-video.kb-video--cover { margin-top: 0; margin-bottom: 2.5rem; }             /* video at the top of a guide */
.kb-video__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: #0b1530; }
.kb-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kb-video__play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  width: 100%;
  padding: 1.5rem;
  border: 0;
  background: radial-gradient(circle at 50% 42%, #1f3170 0%, #0b1530 72%);
  color: #fff;
  font: inherit;
  text-align: center;
  cursor: pointer;
}
.kb-video__icon {
  display: grid;
  place-items: center;
  width: 4.2rem;
  height: 4.2rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  transition: transform 0.2s ease, background 0.2s ease;
}
.kb-video__icon svg { width: 1.7rem; height: 1.7rem; margin-left: 0.2rem; }
.kb-video__play:hover .kb-video__icon { transform: scale(1.07); background: rgba(255, 255, 255, 0.22); }
.kb-video__label { font-weight: 600; }
.kb-video__note { max-width: 26rem; font-size: var(--fs-small); line-height: 1.45; color: rgba(255, 255, 255, 0.72); }
.kb-video__play:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }

@media (max-width: 600px) {
  .kb-image.kb-image--half { width: 100%; }
  .kb-video__note { display: none; }
}

/* ---------- photo viewer of all galleries (lab pages and gallery blocks), assets/js/content-blocks.js ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(3.5rem, 6vw, 5rem) clamp(1rem, 7vw, 6.5rem) clamp(1.5rem, 3vw, 2.5rem);
  background: rgba(2, 8, 30, 0.9);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.lightbox.is-open { opacity: 1; }
.lightbox[hidden] { display: none; }
.lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
}
.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: calc(100% - 2.6rem);
  min-height: 0;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  transition: opacity 0.25s ease;
}
.lightbox.is-loading .lightbox__img { opacity: 0.35; }
.lightbox__bar {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  margin-top: 0.9rem;
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.85);
}
.lightbox__count { color: rgba(255, 255, 255, 0.6); font-variant-numeric: tabular-nums; }
.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.lightbox__close { top: clamp(0.8rem, 2vw, 1.4rem); right: clamp(0.8rem, 2vw, 1.4rem); width: 2.25rem; height: 2.25rem; }
.lightbox__prev,
.lightbox__next { top: 50%; width: 1.7rem; height: 2.8rem; margin-top: -1.4rem; opacity: 0.85; }
.lightbox__prev { left: clamp(0.5rem, 2.5vw, 2.2rem); }
.lightbox__next { right: clamp(0.5rem, 2.5vw, 2.2rem); }
.lightbox__prev[hidden],
.lightbox__next[hidden] { display: none; }
.lightbox__close svg,
.lightbox__prev svg,
.lightbox__next svg { display: block; width: 100%; height: 100%; }
.lightbox__close:hover { transform: scale(1.1); }
.lightbox__prev:hover { opacity: 1; transform: translateX(-3px); }
.lightbox__next:hover { opacity: 1; transform: translateX(3px); }
.lightbox button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox__img, .kb-gallery__item img { transition: none; }
}


/* =========================================
   Hero spacing on all subpages - the same everywhere (feedback 29.09.)
   - above: from the header to the top of the capitals of the first line (the title, or the back link / eyebrow
     above it) 1.5 x the title size
   - title -> subtitle: 1rem, as on Jobs
   - below: from the baseline of the last line to the hero's edge 4rem - as far as the first text below it (Jobs,
     News); the photo heroes Teaching, Labs and Useful Info alike. Not where something reaches into the hero from
     below (Research cards, Team photo, Publications curve, Labs photo strip, Knowledge intro video).
   The profile heroes of the team members keep their own layout (portrait next to the text).
   Lines are measured at their letters, not at their line boxes: the first line is pulled up by the room above its
   capitals, the last one down to its baseline - both (1lh - 1.211em) / 2 + 0.242em (Inter: ascent 0.969, cap
   height 0.727, descent 0.242 em). The container starts right below the header (4.5rem border, see
   .site-header--inflow).
   ========================================= */
.site-header--inflow ~ main > .hero:first-child:not(.member-hero) {
  padding-top: calc(1.5 * var(--fs-display) + 1px);              /* (+ the header's 1px overlap) */
}
.site-header--inflow ~ main > .hero:first-child:not(.member-hero) > .hero__content > :first-child {
  margin-top: calc((1.211em - 1lh) / 2 - 0.242em);
}
.site-header--inflow ~ main > .hero:first-child:not(.member-hero) .hero__title:has(+ .hero__subtitle) { margin-bottom: 1rem; }
.site-header--inflow ~ main > .hero:first-child:not(.member-hero, .hero--research, .hero--team, .hero--publications, .hero--with-strip, .hero--knowledge:not(.hero--knowledge-no-video)) {
  padding-bottom: 4rem;
}
.site-header--inflow ~ main > .hero:first-child:not(.member-hero, .hero--research, .hero--team, .hero--publications, .hero--with-strip, .hero--knowledge:not(.hero--knowledge-no-video)) > .hero__content > :last-child {
  margin-bottom: 0;
}
.site-header--inflow ~ main > .hero:first-child:not(.member-hero, .hero--research, .hero--team, .hero--publications, .hero--with-strip, .hero--knowledge:not(.hero--knowledge-no-video)) > .hero__content > :is(.hero__title, .hero__subtitle):last-child {
  margin-bottom: calc((1.211em - 1lh) / 2 - 0.242em);
}
/* tablets and phones: the sections start closer there (Jobs: 2.75rem + the first line), so the hero ends closer to
   its last line too; on phones the title is set in the h2 size (responsive.css) */
@media (max-width: 900px) {
  .site-header--inflow ~ main > .hero:first-child:not(.member-hero, .hero--research, .hero--team, .hero--publications, .hero--with-strip, .hero--knowledge:not(.hero--knowledge-no-video)) {
    padding-bottom: 3.25rem;
  }
}
@media (max-width: 480px) {
  .site-header--inflow ~ main > .hero:first-child:not(.member-hero) { padding-top: calc(1.5 * var(--fs-h2) + 1px); }
  .site-header--inflow ~ main > .hero:first-child:not(.member-hero, .hero--research, .hero--team, .hero--publications, .hero--with-strip, .hero--knowledge:not(.hero--knowledge-no-video)) {
    padding-bottom: 3rem;
  }
}