/* =========================================
   Labs overview (template: labs) – also imported by lab.css
   ========================================= */

:root {
  --labs-inner: calc(min(var(--container-max), 100vw) - 3rem);
  --labs-strip-ratio: 1.67;
  --labs-strip-overlap: calc(var(--labs-inner) / var(--labs-strip-ratio) * 0.72);
  --lab-violet: #6d28d9;
  --lab-teal: #3fb8c4;
  --lab-yellow: #e9a825;
  --lab-orange: #f07a2b;
  --lab-green: #2fb38a;
  --lab-text: #213342;
  --lab-border: #cfd5dc;
}

/* ---------- Hero ---------- */
.hero--labs {
  padding: clamp(4.5rem, 8vw, 7rem) 0 clamp(4rem, 7vw, 6rem);
}
/* header photo and the gradient over it: the same on all sub pages (.hero--photo in components.css) - here only
   the part of the photo that is shown */
.hero.hero--dark.hero--labs.hero--photo { background-position: center 40%; }
.hero--labs .hero__title { margin-bottom: 1.6rem; }
.hero--labs .hero__subtitle {
  max-width: 24em;
  margin-bottom: 0;
  color: #fff;
  text-wrap: balance;
}
.hero--labs.hero--with-strip {
  padding-bottom: calc(var(--labs-strip-overlap) + clamp(3rem, 6vw, 5rem));
}

/* lab detail hero */
.hero--lab { padding: clamp(3.5rem, 6vw, 5.5rem) 0; }
.hero--lab .hero__title { margin-bottom: 0; }
.hero__eyebrow {
  margin: 0 0 0.75rem;
  font-size: var(--fs-ui);
  font-weight: 500;
}
.hero__eyebrow a { color: rgba(255, 255, 255, 0.8); text-decoration: none; transition: color 0.2s; }
.hero__eyebrow a:hover { color: #fff; text-decoration: none; }

/* ---------- Photo strip: an accordion of the labs' photos ----------
   One frame that overlaps the hero's lower edge, with one strip per lab side by side - each shows a part of that
   lab's photo (feedback 30.09.; before, ONE photo was cut into six strips). Pointing at a strip, or reaching it with
   the keyboard, opens it to the whole photo like an accordion: the others draw back to narrow strips, and the lab's
   name appears. A click leads down to that lab. The photo keeps its size while its strip opens - it is uncovered,
   not enlarged. Touch screens cannot point: there one strip is always open, a tap opens another one and a tap on
   the open one leads to the lab (assets/js/pages/labs.js, class is-sticky / is-open). On phones the strips lie one
   below the other ("phones" at the end of this file). */
.labs-strip {
  position: relative;
  z-index: 3;
  margin-top: calc(var(--labs-strip-overlap) * -1);
  scroll-margin-top: 6rem;                          /* (links to #labs-overview land here, below the header) */
}
/* without the section title the labs follow the strip: the same room as between two labs */
.labs-strip--last { padding-bottom: clamp(3.5rem, 6vw, 5.5rem); }
.labs-accordion {
  --gap: 4px;                                       /* white line between two strips */
  --frame-ratio: var(--labs-strip-ratio);           /* width : height of the frame (1.67, also used for the overlap with the hero) */
  /* width of a strip while another one is open - 2.25rem since 01.10. (1.25rem before: hard to catch with the mouse).
     All closed strips alike: wider only the two next to the open one was tried - opening one of them then moved its
     outer edge back under the pointer, and the strip after it opened instead (12 of 21 pointing tests). */
  --rest: 2.25rem;
  --time: 0.9s;                                     /* (0.6 s before - feedback 01.10.: open and close a little slower) */
  /* starts gently, speeds up, lands softly (feedback 01.10.: "a bit hectic next to the rest of the site"). Before:
     cubic-bezier(0.3, 0.7, 0.2, 1) - full speed from the first moment (2.3 times the average) and a long creep at
     the end. Now the highest speed is 1.7 times the average, in the middle of the movement. */
  --ease: ease-in-out;
  container-type: inline-size;                      /* (the open strip's size is given in parts of the frame's width: cqw) */
  display: flex;
  aspect-ratio: var(--frame-ratio);
  border-radius: 10px;
  overflow: hidden;                                 /* (no background of its own: at the rounded edge it shone through as a light hairline) */
  box-shadow: 6px 10px 18px rgba(8, 15, 30, 0.35);
}
.labs-accordion__strip {
  /* width of the open strip: the whole photo at the frame's height (photo ratio : frame ratio, in parts of the
     frame's width) - but not more than the other strips leave at their least width */
  --open: min(100cqw * var(--ar, 1.5) / var(--frame-ratio) + var(--gap), 100cqw + var(--gap) - (var(--n, 5) - 1) * var(--rest));
  position: relative;
  z-index: 0;                                       /* its own stacking order: veil and name stay inside, the focus ring on top */
  flex: 1 1 0;
  min-width: var(--rest);
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  transition: flex-grow var(--time) var(--ease), flex-basis var(--time) var(--ease);
}
/* the white lines are the strips' own left borders, not gaps: the pointer is always on a strip while it crosses the
   frame, so the accordion does not fall shut for a moment between two strips */
@media (min-width: 601px) {
  /* every strip is built the same: a white line on its left (the first one's lies outside the frame, hidden), it
     starts from the line's width, its least width (--rest) includes the line. So all strips shrink alike and reach
     their least width together - before, the first one (without a line) stopped earlier, and the open strip's photo
     still slid 2 px sideways at the end of opening (feedback 30.09.). Starting from 0 instead of the line's width, a
     strip first had to grow through its own line: it narrowed by a fraction of a pixel before it opened. */
  .labs-accordion__strip {
    flex-basis: var(--gap);
    border-left: var(--gap) solid #fff;
  }
  .labs-accordion__strip:first-child { margin-left: calc(var(--gap) * -1); border-left-color: transparent; }
}
.labs-accordion__strip:hover { color: #fff; text-decoration: none; }
/* keyboard focus: a ring inside the strip, above photo, veil and name (an outline would lie below them; the
   transparent one is for Windows' high-contrast mode, which draws it in its own colour) */
.labs-accordion__strip:focus-visible { outline: 3px solid transparent; outline-offset: -3px; }
.labs-accordion__strip:focus-visible::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  box-shadow: inset 0 0 0 3px #a78bfa;
  pointer-events: none;
}
.labs-accordion__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;                                /* as high as the frame - the strip shows the part around the photo's focus point */
  object-position: center;
  background: #1a2b47;                              /* (until the photo is there) */
}
/* the strips that drew back step into the dark a little: a dark veil over the photo, below the name. Not a filter on
   the photo: while a filter changes, the browser draws the photo on a layer of its own, a little differently - all
   photos jumped slightly the moment a strip began to open, and back the moment it had closed (feedback 30.09.).
   The veil is an inner shadow, not a background colour: a changing background colour also gets a layer of its own
   (its edges were drawn differently for a moment); a shadow is always drawn with the page. */
.labs-accordion__strip::after {
  --veil: 0;
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, var(--veil));  /* (a fixed size: in vmax it changed with the window's height - on phones with every scroll - and set the transition off each time) */
  transition: box-shadow var(--time) ease;
  pointer-events: none;
}
/* the lab's name at the foot of the open strip, on a dark gradient from the strip's left edge to its right one -
   the caption is tied to both edges, whatever the strip's width is (feedback 30.09.: its width was calculated before
   and ended 12 px short of the photo's right edge). Only the name has a fixed width - the one it has in the open
   strip -, so its lines do not re-break while the strip opens. */
.labs-accordion__caption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  overflow: hidden;
  padding: 4.5rem 1.5rem 1.35rem;
  background: linear-gradient(180deg, rgba(4, 10, 26, 0) 0%, rgba(4, 10, 26, 0.5) 55%, rgba(4, 10, 26, 0.8) 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  /* always on a layer of its own, so the name is drawn the same way while it fades and afterwards (else its letters
     changed their look the moment the fade ended) */
  will-change: opacity;
}
.labs-accordion__name {
  flex: none;
  width: calc(var(--open) - var(--gap) - 3rem);     /* the open strip less its white line and the caption's padding */
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.25;
  text-wrap: balance;
}
.labs-accordion__name::before {                     /* a short line in the lab's colour, as its bookmark below */
  content: "";
  display: block;
  width: 2.25rem;
  height: 3px;
  margin-bottom: 0.7rem;
  border-radius: 2px;
  background: var(--tab, #fff);
}
/* arrow in a circle at the caption's right end: "a tap leads down to the lab". Only where one strip is always open
   and the open one is the link - touch screens and phones (frame with is-sticky). With a mouse there is no arrow
   (feedback 30.09.): there the strips are links like any other. */
.labs-accordion__caption .icon {
  display: none;
  position: absolute;
  right: 1.5rem;
  bottom: 1.35rem;
  box-sizing: content-box;
  width: 1.2rem;
  height: 1.2rem;
  padding: 0.5rem;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  transition: transform 0.25s ease, background-color 0.25s ease;
}
.labs-accordion.is-sticky .labs-accordion__caption .icon { display: block; }
.labs-accordion.is-sticky .labs-accordion__name { width: calc(var(--open) - var(--gap) - 6.75rem); }   /* less the arrow's room, too */

/* open: as wide as the whole photo at the frame's height (--open above) */
.labs-accordion__strip.is-open { flex: 0 1 var(--open); }
.labs-accordion__strip.is-open .labs-accordion__caption { opacity: 1; transition: opacity 0.6s ease 0.3s; }
.labs-accordion.is-sticky .labs-accordion__strip:not(.is-open)::after { --veil: 0.4; }
@media (hover: hover) and (min-width: 601px) {
  .labs-accordion:not(.is-sticky) .labs-accordion__strip:hover,
  .labs-accordion:not(.is-sticky) .labs-accordion__strip:focus-visible { flex: 0 1 var(--open); }
  .labs-accordion:not(.is-sticky) .labs-accordion__strip:hover .labs-accordion__caption,
  .labs-accordion:not(.is-sticky) .labs-accordion__strip:focus-visible .labs-accordion__caption { opacity: 1; transition: opacity 0.6s ease 0.3s; }
  /* the strips that drew back step into the dark a little */
  .labs-accordion:not(.is-sticky):has(.labs-accordion__strip:hover) .labs-accordion__strip:not(:hover)::after,
  .labs-accordion:not(.is-sticky):has(.labs-accordion__strip:focus-visible) .labs-accordion__strip:not(:focus-visible)::after { --veil: 0.4; }
}
@media (hover: hover) {
  /* (a narrow window with a mouse: the arrow of the band under the pointer) */
  .labs-accordion__strip:hover .icon { transform: translateY(3px); background-color: rgba(255, 255, 255, 0.16); }
}
/* touch screens with the strips side by side (tablets): wide enough for a finger */
.labs-accordion.is-sticky { --rest: 2.75rem; }
/* ---------- Section heading ---------- */
.labs-heading {
  text-align: center;
  padding: clamp(3rem, 5.5vw, 4.5rem) 0 clamp(2.5rem, 5vw, 4rem);
}
.labs-heading .section__title { color: #333; margin-bottom: 1.1rem; }
.labs-heading .section__text {
  margin: 0 auto;
  max-width: 21em;
  color: #333;
  text-wrap: balance;
}

/* ---------- Lab list / entry ---------- */
.labs-list { background: #fff; padding: 0 0 clamp(1rem, 3vw, 2.5rem); }
/* without photo strip and section title the labs follow the hero directly: the first lab hangs from the hero's lower
   edge with the same soft shadow line as all the others (feedback 27.09. / 28.09.) */
.labs-list--first { padding-top: 0; }
.labs-list__item {
  position: relative;
  padding: 0 0 clamp(3.5rem, 6vw, 5.5rem);
}
/* soft shadow line above every lab */
.labs-list__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(82rem, 100%);
  height: 24px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 100% at 50% 0, rgba(15, 23, 42, 0.22) 0%, rgba(15, 23, 42, 0.1) 40%, rgba(15, 23, 42, 0.03) 75%, rgba(15, 23, 42, 0) 100%);
  pointer-events: none;
}

.lab-entry {
  --tab: var(--lab-violet);
  /* darker shade of the tab colour for hover states */
  --tab-dark: color-mix(in srgb, var(--tab) 78%, #000);
  color: var(--lab-text);
  scroll-margin-top: 5rem;
}
.lab-entry--teal { --tab: var(--lab-teal); }
.lab-entry--yellow { --tab: var(--lab-yellow); }
.lab-entry--orange { --tab: var(--lab-orange); }
.lab-entry--green { --tab: var(--lab-green); }

.lab-entry__tab {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 2.9rem;
  height: 3.75rem;
  /* the icon's frame is centred on the middle of the shape: 45.65 % of its height, the point below counts less than the
     body. (Half the shape's height less half the icon: 1.712rem - 0.725rem. Feedback 30.10.: 0.75rem was too high.) */
  padding-top: 0.987rem;
  margin-bottom: 2rem;
  background: var(--tab);
  color: #fff;
  clip-path: polygon(0 0, 100% 0, 100% 82%, 50% 100%, 0 82%);
  position: relative;
  z-index: 1;
}
.lab-entry__tab .icon { width: 1.45rem; height: 1.45rem; stroke-width: 1.5; }

.lab-entry__main {
  display: grid;
  grid-template-columns: minmax(0, 40fr) minmax(0, 57fr);
  gap: 1.5rem 3%;
  align-items: start;
}
.lab-entry--no-media .lab-entry__main { grid-template-columns: minmax(0, 1fr); }

.lab-entry__title {
  margin: 0 0 0.45rem;
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.25;
  color: var(--lab-text);
}
.lab-entry__title a { color: inherit; text-decoration: none; transition: color 0.2s; }
.lab-entry__title a:hover { color: var(--tab); }

.lab-entry .lab-meta__pi {
  margin: 0 0 0.85rem;
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--tab);
}
.lab-entry .lab-meta__pi a { color: inherit; text-decoration: none; transition: color 0.2s; }
.lab-entry .lab-meta__pi a:hover { color: var(--tab-dark); text-decoration: none; }

.lab-entry__description {
  margin: 0 0 1rem;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--lab-text);
}
/* lab page: the first paragraph of the description as text (a div with a paragraph inside) */
.lab-entry__description p { margin: 0; }
.lab-entry__description a { color: var(--tab); text-decoration: none; }
.lab-entry__description a:hover { color: var(--tab-dark); text-decoration: none; }

.lab-entry__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  margin: 0 0 1.1rem;
  padding: 0;
  list-style: none;
}
/* the ovals: a soft tint of the lab's colour without an outline, like the tags of the course cards (feedback 30.09.:
   the outlined white pills before looked like buttons). Since 28.10. each one leads to the page of its technique:
   the same look, a stronger tint when pointed at */
.lab-entry__tag {
  display: inline-block;
  padding: 0.15rem 0.7rem;
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 1.4;
  color: var(--lab-text);
  background: #eef0f3;
  background: color-mix(in srgb, var(--tab) 12%, #fff);
  text-decoration: none;
  transition: background-color 0.2s;
}
a.lab-entry__tag:hover,
a.lab-entry__tag:focus-visible {
  color: var(--lab-text);
  background: color-mix(in srgb, var(--tab) 26%, #fff);
  text-decoration: none;
}

/* coordinator button + links - below the Key Equipment box; on a lab's own page at the very end (feedback 28.10.) */
.lab-entry__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.1rem;
  margin-top: 1.25rem;
}
.lab-entry__actions--end { margin-top: 2.5rem; }
.lab-entry .lab-meta__coordinator {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.28rem 0.8rem;
  border: 1.5px solid var(--tab);
  border-radius: 7px;
  font-size: var(--fs-ui);
  font-weight: 500;
  line-height: 1.4;
  color: var(--lab-text);
  background: #fff;
  text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.lab-entry .lab-meta__coordinator .icon { color: var(--tab); width: 1rem; height: 1rem; transition: color 0.2s; }
.lab-entry .lab-meta__coordinator:hover { background: var(--tab); border-color: var(--tab); color: #fff; text-decoration: none; }
.lab-entry .lab-meta__coordinator:hover .icon { color: #fff; }

.lab-entry__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fs-ui);
  font-weight: 500;
  color: var(--tab);
  text-decoration: none;
  transition: color 0.2s;
}
.lab-entry__link .icon { width: 1rem; height: 1rem; transition: transform 0.2s ease; }
.lab-entry__link:hover { color: var(--tab-dark); text-decoration: none; }
.lab-entry__link:hover .icon:last-child:not(:first-child) { transform: translateX(4px); }
.lab-entry__link--back:hover .icon:first-child { transform: translateX(3px); }
/* on a lab's own page the arrows point left (back to the Labs page) and move that way on hover */
.lab-entry__link--back:hover .icon--chevrons-left:first-child { transform: translateX(-3px); }

/* photo */
.lab-entry__media {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 2.1;
  background: #e8ecf1;
}
.lab-entry__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* full description (detail page) */
.lab-entry__body {
  margin-top: 2.25rem;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--lab-text);
}
.lab-entry__body > * + * { margin-top: 0.9em; }
.lab-entry__body ul,
.lab-entry__body ol { padding-left: 1.3em; }
.lab-entry__body ul { list-style: disc; }
.lab-entry__body ol { list-style: decimal; }
.lab-entry__body li + li { margin-top: 0.3em; }
.lab-entry__body a { color: var(--tab); text-decoration: none; transition: color 0.2s; }
.lab-entry__body a:hover { color: var(--tab-dark); text-decoration: none; }
.lab-entry__body h3 { margin-top: 1.6em; font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; }
.lab-entry__body .lab-formula { display: inline-block; padding: 0.55rem 1rem; font-family: "Cambria Math", "Times New Roman", serif; font-style: italic; background: #f3f4f7; border-radius: 8px; }
/* images inserted into the description with (image: ...) */
.lab-entry__body figure { margin: 1.6rem 0; max-width: 760px; }
.lab-entry__body figure img { display: block; width: 100%; height: auto; border-radius: 10px; }
.lab-entry__body figcaption { margin-top: 0.5rem; font-size: var(--fs-small); line-height: 1.5; color: #555; }

/* photo gallery (detail page) */
.lab-entry__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}
.lab-entry__gallery-item { display: block; overflow: hidden; border-radius: 10px; aspect-ratio: 3 / 2; background: #eef0f3; }
.lab-entry__gallery-item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.lab-entry__gallery-item:hover img { transform: scale(1.03); }

/* equipment / publications */
.lab-entry__details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.lab-entry__box {
  padding: 0.9rem 1.1rem 1.1rem;
  border: 1px solid var(--lab-border);
  border-radius: 10px;
  background: #fff;
}
.lab-entry__box:only-child { grid-column: 1 / -1; }
.lab-entry__box-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.7rem;
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.3;
  color: var(--lab-text);
}
.lab-entry__box-title .icon { flex: none; width: 1.1rem; height: 1.1rem; color: var(--tab); }
.lab-entry__list {
  margin: 0;
  padding: 0 0 0 1.15rem;
  list-style: disc;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--lab-text);
}
.lab-entry__list li { padding-left: 0.2rem; }
.lab-entry__list li + li { margin-top: 0.3rem; }
.lab-entry__list li::marker { font-size: 0.8em; }
.lab-entry__box:only-child .lab-entry__list { columns: 2; column-gap: 2.5rem; }
.lab-entry__box:only-child .lab-entry__list li { break-inside: avoid; }
.lab-entry__list a { color: inherit; text-decoration: none; transition: color 0.2s; }
.lab-entry__list a:hover { color: var(--tab); text-decoration: none; }
.lab-entry__pub-meta { display: block; }

/* detail page */
.labs-list--single { padding-bottom: clamp(1rem, 3vw, 2rem); }
.labs-list--single .labs-list__item::before { display: none; }
.labs-list--single .lab-entry__tab { margin-bottom: 2.25rem; }

/* ---------- Our Research teaser ---------- */
.labs-research {
  background: #eff0f2;
  text-align: center;
  padding: clamp(3.5rem, 6vw, 5rem) 0 clamp(2.5rem, 4vw, 3.5rem);
}
.labs-research .section__title { color: #333; margin-bottom: 1.4rem; }
.labs-research .section__text {
  margin: 0 auto;
  color: var(--lab-text);
  text-wrap: balance;
}
.labs-research .section__text { max-width: none; }
.labs-research__grid { margin: clamp(2rem, 4vw, 3rem) 0 0; }
/* cards: same bracket look as on the home page (no fill, side borders only, lift + subtle shadow on hover) */
.labs-research .research-card {
  background: #fff;
  border: 0;
  border-left: 1.5px solid #9ca3af;
  border-right: 1.5px solid #9ca3af;
  border-radius: 14px;
  box-shadow: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.labs-research .research-card:hover {
  background: #fff;
  border-color: #9ca3af;
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}
.labs-research .research-card__tagline { font-size: var(--fs-small); }
.labs-research .section__footer { margin-top: clamp(2.5rem, 4vw, 3.5rem); text-align: center; }
.labs-research .section__footer .labs-research__link {
  font-size: var(--fs-ui);
  font-weight: 500;
  gap: 0.35rem;
  color: #5912b5;
  transition: color 0.2s;
}
.labs-research__link .icon { stroke-width: 2.4; width: 1.1rem; height: 1.1rem; transition: transform 0.2s ease; }
.labs-research__link:hover { color: #4a0e99; text-decoration: none; }
.labs-research__link:hover .icon { transform: translateX(4px); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  :root { --labs-inner: calc(100vw - 2rem); }
  .lab-entry__main { grid-template-columns: minmax(0, 1fr); }
  /* the whole photo, as tall as it is (feedback 28.10.: the 16:9 cut took too much off at the top and bottom) */
  .lab-entry__media { order: -1; aspect-ratio: auto; }
  .lab-entry__media img { height: auto; }
  .lab-entry__tab { margin-bottom: 1.5rem; }
}
@media (max-width: 600px) {
  :root { --labs-inner: calc(100vw - 1.5rem); }
  /* photo strip on phones: the strips lie one below the other - bands across the full width, each with the lab's
     name; the open one shows the whole photo (as high as the photo is at this width). One band is always open
     (labs.js), so the frame keeps its height while another one opens. Without the script all bands are closed
     and each is a plain link to its lab. */
  .labs-accordion {
    --gap: 3px;
    --rest: 3.25rem;                                /* height of a closed band */
    flex-direction: column;
    aspect-ratio: auto;
    border-radius: 8px;
  }
  .labs-accordion.is-sticky { --rest: 3.25rem; }
  .labs-accordion__strip,
  .labs-accordion__strip.is-open {
    flex: none;
    min-width: 0;
    height: var(--rest);
    transition: height var(--time) var(--ease);
  }
  .labs-accordion__strip.is-open { height: calc(100cqw / var(--ar)); }
  .labs-accordion__strip + .labs-accordion__strip { border-left: 0; border-top: var(--gap) solid #fff; }
  /* the name stands in every band: in the middle of the closed ones, at the foot of the open one. Name and arrow
     share the band's width (nothing opens sideways here). The caption is always the band's lowest part, as high as
     a closed band (--rest), with name and arrow in its middle: so they stand in the middle of a closed band and at
     the foot of the open one, and while a band opens or closes they only move with its lower edge. (Before, the
     caption of a closed band reached over the whole band: a closing band's name jumped at once from the foot to the
     middle of the still open photo and then slid up with it - feedback 28.10.) Line and gradient fade over instead
     of switching, the name keeps its size. */
  .labs-accordion__caption {
    min-height: var(--rest);
    align-items: center;
    overflow: visible;                              /* (the open band's gradient reaches above the caption) */
    padding: 0 0.9rem 0 1rem;
    background: none;
    opacity: 1;
  }
  /* the two gradients below name and arrow: across a closed band dark on the left, at the open band's foot dark at
     the bottom (from 3rem above the caption). Each on a layer of its own for good, so name and photo are drawn the
     same way while they fade and afterwards. */
  .labs-accordion__caption::before,
  .labs-accordion__caption::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    transition: opacity var(--time) var(--ease);
    will-change: opacity;
  }
  .labs-accordion__caption::before { background: linear-gradient(90deg, rgba(4, 10, 26, 0.78) 0%, rgba(4, 10, 26, 0.45) 60%, rgba(4, 10, 26, 0.15) 100%); }
  .labs-accordion__caption::after {
    top: -3rem;
    background: linear-gradient(180deg, rgba(4, 10, 26, 0) 0%, rgba(4, 10, 26, 0.5) 55%, rgba(4, 10, 26, 0.8) 100%);
    opacity: 0;
  }
  .labs-accordion__strip.is-open .labs-accordion__caption::before { opacity: 0; }
  .labs-accordion__strip.is-open .labs-accordion__caption::after { opacity: 1; }
  .labs-accordion__name,
  .labs-accordion.is-sticky .labs-accordion__name { position: relative; flex: 0 1 auto; width: auto; font-size: var(--fs-body); }
  /* the line in the lab's colour above the name: only in the open band, outside the name's flow (else the name
     moved up when it came) */
  .labs-accordion__name::before {
    position: absolute;
    bottom: 100%;
    left: 0;
    opacity: 0;
    transition: opacity var(--time) var(--ease);
  }
  .labs-accordion__strip.is-open .labs-accordion__name::before { opacity: 1; }
  .labs-accordion__caption .icon { position: static; width: 1rem; height: 1rem; padding: 0.35rem; border-color: rgba(255, 255, 255, 0.55); }
  .labs-accordion.is-sticky .labs-accordion__strip:not(.is-open)::after { --veil: 0.25; }
  .lab-entry__details { grid-template-columns: minmax(0, 1fr); }
  .lab-entry__box:only-child .lab-entry__list { columns: 1; }
  .labs-research__grid { grid-template-columns: repeat(2, 1fr); }
}
/* "Our Research" on small phones: the cards one below the other (feedback 28.10.: two side by side were too narrow -
   titles and texts broke into many short lines; from 481 px two per row again, one card across 600 px was too wide) */
@media (max-width: 480px) {
  .labs-research__grid { grid-template-columns: minmax(0, 1fr); }
  .labs-research .research-card { padding: 1.4rem 1.5rem 1.6rem; }
  /* (narrow and two lines high only for two columns side by side) */
  .labs-research .research-card .research-card__title { max-width: none; min-height: 0; }
  .labs-research .research-card .research-card__tagline { max-width: 22rem; }
}