/* BioRoLa site styles. Keeps the original black frame, grey menu and hexagon
   sidebar (formerly one PNG per page), with a fluid layout:
     desktop  >= 1024px  hexagon sidebar beside the content
     tablet   640-1023px hexagons in a row above the content
     phone    < 640px    section links as pills; the menu collapses below 900px */

:root {
  --menu-bg: #ccc;
  --menu-hover: #666;
  --content-bg: #fff;
  --text: #111;
  --muted: #555;
  --link: #1a4f9c;
  --rule: #999;            /* line under page titles */
  --border: #e8ebf0;       /* table and list separators */
  --note-bg: #fff7d6;
  --note-edge: #e0b000;
  --card-bg: #fff;
  --card-border: #dde2ea;
  --card-shadow: 0 1px 3px rgb(0 0 0 / 0.08), 0 4px 14px rgb(0 0 0 / 0.06);
  --radius: 8px;
  --focus: #ffd200;

  /* Hexagon sidebar */
  --hex-w: 6.25rem;
  --hex-h: 5.375rem;
  --hex-step: 5.75rem;         /* vertical distance between rows */
  --hex-col: 5rem;             /* horizontal offset of the right column */
  --hex-border: 3px;
  --hex-filler: #0f233e;
  --sidebar-bg: #000;          /* behind the hexagons; matches the content panel in dark mode */

  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans TC", "PingFang TC",
    "Microsoft JhengHei", Arial, sans-serif;
}

/* Dark mode follows the visitor's system setting. */
@media (prefers-color-scheme: dark) {
  :root {
    --content-bg: #14181f;
    --text: #e4e6ea;
    --muted: #a9b1bd;
    --link: #8ab4f8;
    --rule: #4a5361;
    --border: #2a313c;
    --note-bg: #3a3212;
    --note-edge: #c9a400;
    --card-bg: #1c222c;
    --card-border: #2e3644;
    --card-shadow: 0 1px 3px rgb(0 0 0 / 0.4), 0 4px 14px rgb(0 0 0 / 0.3);
    --sidebar-bg: var(--content-bg);
  }
}

* { box-sizing: border-box; }

/* Everything is sized in rem, so the design grows with the screen: 16px up to
   ~1600px wide, ~20px at 2500px, ~26px on a 4K screen at 100% scaling, at most 32px. */
html { font-size: clamp(100%, 0.45vw + 0.55rem, 200%); }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: #000;
  color: var(--text);
}

/* The frame fills the whole window; only the banner and running text are capped. */
.frame {
  min-height: 100vh;
  background: #000;
  display: flex;
  flex-direction: column;
}
/* The content panel stretches so the footer sits at the bottom of the window. */
.frame > main { flex: 1; display: flex; flex-direction: column; }
.frame > main > .page { flex: 1; }
.page > .content { align-self: stretch; }

img { max-width: 100%; height: auto; }
/* The image plugin wraps images in <picture>; lay them out as if it weren't there. */
picture { display: contents; }

a { color: var(--link); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -3rem;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: var(--focus);
  color: #000;
  font-weight: bold;
}
.skip-link:focus { top: 0.5rem; }
main:focus { outline: none; }

/* ---------- Masthead ---------- */

/* The banner's left and right edges share one vertical gradient (sampled from
   logo.png every 5%). It fills the masthead behind the banner at any window width,
   and the banner's outer 1% fades into it, hiding small colour shifts from WebP. */
.masthead {
  background: linear-gradient(to bottom, #000000 0%, #020306 5%, #050b13 10%, #08121f 15%,
    #0b1a2d 20%, #0f213a 25%, #112846 30%, #142f53 35%, #173660 40%, #1b3e6c 45%, #1e4579 50%,
    #1d4274 55%, #193b67 60%, #16335b 65%, #132c4e 70%, #112542 75%, #0d1e35 80%, #0a1727 85%,
    #07101b 90%, #04080e 95%, #000101 100%);
}
.masthead a { display: block; }
/* The banner is 2055x389; cap it so it doesn't dominate wide screens. */
.masthead img {
  display: block; width: 100%; max-width: 66rem; margin: 0 auto;
  mask-image: linear-gradient(to right, transparent, #000 1%, #000 99%, transparent);
}

/* ---------- Top menu ---------- */

.menu { background: var(--menu-bg); position: relative; z-index: 10; }

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

.menu__bar { display: flex; flex-wrap: wrap; }

.menu__item, .menu__lang { position: relative; flex: 1 1 auto; }
/* Label and ▾ button sit together in the middle of the cell; the whole cell lights up. */
.menu__item { display: flex; flex-wrap: wrap; justify-content: center; }
.menu__item:hover,
.menu__item:focus-within,
.menu__item.is-open { background: var(--menu-hover); }
.menu__item:hover > a,
.menu__item:focus-within > a,
.menu__item.is-open > a,
.menu__item:hover > .menu__expand,
.menu__item:focus-within > .menu__expand { color: #fff; }

.menu a {
  display: block;
  padding: 0.5em 0.75em;
  color: #000;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
}

.menu a:hover,
.menu a:focus-visible,
.menu li:focus-within > a { background: var(--menu-hover); color: #fff; outline: none; }

.menu__item.is-current > a { font-weight: bold; }

.menu__lang a { background: #999; color: #fff; }

.menu__drop,
.menu__fly {
  display: none;
  position: absolute;
  min-width: 12em;
  background: var(--menu-bg);
  box-shadow: 0 4px 10px rgb(0 0 0 / 0.35);
}
/* A dropdown lines up with its menu cell: the same width, items centred under the label. */
.menu__drop { top: 100%; left: 0; min-width: max(12em, 100%); }
.menu__fly { top: 0; left: 100%; }
.menu__drop a { text-align: center; }
.menu__fly a { text-align: left; }

.menu li:hover > ul,
.menu li:focus-within > ul,
.menu__item.is-open > ul { display: block; }

/* Buttons added by menu.js; hidden when JavaScript is off. */
.menu__toggle, .menu__expand {
  display: none;
  font: inherit;
  color: #000;
  background: none;
  border: 0;
  cursor: pointer;
}
.js .menu__expand { display: block; padding: 0 0.6em 0 0; margin-left: -0.6em; }
.menu__expand:hover, .menu__item.is-open > .menu__expand { background: var(--menu-hover); color: #fff; }
.menu__item.is-open > .menu__expand span { display: inline-block; transform: rotate(180deg); }

@media (max-width: 899px) {
  .js .menu__toggle {
    display: block;
    width: 100%;
    padding: 0.6em 1em;
    text-align: left;
    font-weight: bold;
  }
  .js .menu__bar { display: none; }
  .js .menu.is-open .menu__bar { display: block; border-top: 1px solid #999; }

  .js .menu__item, .js .menu__lang { border-bottom: 1px solid #bbb; }
  .js .menu__item { justify-content: stretch; }
  .js .menu__item > a { flex: 1 1 auto; }
  .js .menu__item:hover, .js .menu__item:focus-within { background: none; }
  .js .menu__item:hover > a, .js .menu__item:focus-within > a, .js .menu__item:hover > .menu__expand { color: #000; }
  .js .menu a:hover, .js .menu a:focus-visible { background: var(--menu-hover); color: #fff; }
  .js .menu a { text-align: left; padding: 0.7em 1em; }
  .js .menu__expand { padding: 0 1.2em; margin: 0; border-left: 1px solid #bbb; }

  /* Submenus open inline, indented, and only by their button. */
  .js .menu__drop, .js .menu__fly { position: static; flex-basis: 100%; box-shadow: none; background: #ddd; }
  .js .menu__drop a { padding-left: 2em; }
  .js .menu__fly a { padding-left: 3em; }
  .js .menu li:hover > ul, .js .menu li:focus-within > ul { display: none; }
  .js .menu .menu__item.is-open > ul, .js .menu .menu__item.is-open .menu__fly { display: block; }
}

/* ---------- Page: sidebar + content ---------- */

.page {
  background: var(--sidebar-bg);
  display: grid;
  /* On wide screens the hexagons and the content column (66rem, the banner's
     width, plus 2 x 2.5rem padding) are centred together; the sidebar's
     background fills the space to their left. */
  grid-template-columns: max(11.25rem, (100% - 82.25rem) / 2 + 11.25rem) 1fr;
  align-items: start;
}
.page > .honeycomb { width: 11.25rem; justify-self: end; }

.content {
  background: var(--content-bg);
  /* Content is at most 66rem wide, next to the hexagons; extra width goes on the right. */
  --pad: clamp(1rem, 3vw, 2.5rem);
  padding: 0.5rem max(var(--pad), 100% - 66rem - var(--pad)) 2.5rem var(--pad);
  font-size: 1.0625rem;
  line-height: 1.75;
}

/* Keep running text to a readable line length; grids and tables use the full width. */
.content > :where(p, ul:not(.cards), ol, dl, h2, h3, blockquote) { max-width: 80ch; }

.content h1 {
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem);
  margin: 0.6rem 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
}

.content p { margin: 0 0 1em; }

/* Pages outside the hexagon nav (e.g. the research overview) use the full width. */
.page--wide { grid-template-columns: 1fr; }
/* Without hexagons, the content column is centred. */
.page--wide > .content { padding-inline: max(var(--pad), (100% - 66rem) / 2); }
:lang(zh-Hant-TW) .content p { text-align: justify; }

/* Coloured words used on the introduction page. */
.accent-orange { color: #c93; font-size: 1.5em; }
.accent-green { color: #0c6; font-size: 1.5em; }

/* ---------- Members ---------- */

.content h2 { font-size: 1.2rem; margin: 1.6rem 0 0.5rem; }

.people {
  columns: 2 16em;
  column-gap: 2rem;
  margin: 0;
  padding-left: 1.2rem;
}
.people li { break-inside: avoid; }

.group-photo { margin: 0 0 1rem; }
.group-photo img,
.director-photo img { display: block; width: 100%; max-width: 35.5rem; margin: 0 auto; }

.group-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16.25rem, 1fr));
  gap: 0.75rem;
  margin-top: 2rem;
}
.group-photos img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.staff { list-style: none; padding: 0; }
.staff li { margin-bottom: 0.6rem; }
.staff__role { display: block; color: var(--muted); font-size: 0.9em; }

.projects { list-style: none; padding: 0; }
.projects h2 { margin-top: 1.2rem; }
.projects p { margin: 0.2rem 0; }
.cohort { display: inline-block; min-width: 3em; font-weight: bold; color: var(--muted); }

.profile {
  display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start;
  max-width: 51.25rem;
  padding: 1.25rem;
  background: var(--card-bg, #fff);
  border: 1px solid var(--card-border, #dde2ea);
  border-radius: var(--radius, 8px);
  box-shadow: var(--card-shadow, none);
}
.profile__photo { width: 17.5rem; max-width: 100%; height: auto; border-radius: 6px; }
.profile__photo--none {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 7 / 8; background: var(--border); color: var(--muted);
}
.profile__fields { flex: 1 1 16em; margin: 0; }
.profile__fields dt { font-weight: bold; margin-top: 0.6rem; }
.profile__fields dd { margin: 0; overflow-wrap: anywhere; }

.contact-list { padding-left: 1.2rem; }

/* ---------- News and publications ---------- */

.citations { padding-left: 1.2rem; }

.pubfilter {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem 1.25rem;
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
}
.pubfilter label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.9em; font-weight: bold; }
.pubfilter select, .pubfilter input {
  font: inherit;
  font-weight: normal;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--card-border);
  border-radius: 4px;
  background: var(--content-bg);
  color: var(--text);
}
.pubfilter input { min-width: min(22rem, 70vw); }
.pubfilter__count { margin: 0 0 0.35rem !important; color: var(--muted); font-size: 0.9em; }
.pubyear h2 { border-bottom: 1px solid var(--border); padding-bottom: 0.2rem; }
.news li, .citations li { margin-bottom: 0.55rem; }
.news { list-style: none; padding-left: 0; }
.news li { padding: 0.35rem 0; border-bottom: 1px solid var(--border); }
.news__date {
  display: inline-block;
  min-width: 3.4em;
  margin-right: 0.5em;
  padding: 0.05em 0.5em;
  border-radius: 4px;
  background: #17355d;
  color: #fff;
  font-size: 0.85em;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}

.theses { border-collapse: collapse; width: 100%; }
.theses td { vertical-align: top; padding: 0.35rem 0.5rem 0.35rem 0; border-bottom: 1px solid var(--border); }
.theses__cohort { font-weight: bold; color: var(--muted); white-space: nowrap; }
.theses__name { white-space: nowrap; }

/* ---------- Home: tile ring and slideshow ---------- */

.ring { position: relative; width: 100%; margin: 0.5rem auto 1rem; max-width: 57.3rem; }

.tile { position: absolute; z-index: 1; width: var(--tile); display: block; }
.tile img { display: block; width: 100%; height: auto; }
.tile .tile__hover { position: absolute; inset: 0; opacity: 0; }
.tile:hover .tile__hover,
.tile:focus-visible .tile__hover { opacity: 1; }
.tile:focus-visible { outline: 3px solid var(--focus); outline-offset: -6px; }

/* Seven slides, 6s each, fading with a slow zoom (the old Ken Burns effect).
   The photo sits under the tiles with its edges along the middle of the tile
   rows, so it fills the whole centre with no black between the hexagons. The
   bottom corners are cut because no tile covers them. */
.slideshow {
  position: absolute;
  left: 6%;
  top: 11%;
  width: 88%;
  height: 77%;
  clip-path: polygon(0 0, 100% 0, 100% 89.6%, 93.2% 100%, 6.8% 100%, 0 89.6%);
  overflow: hidden;
  background: #000;
}
.slideshow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: slide 42s infinite;
  animation-delay: calc(var(--i) * 6s);
}
@keyframes slide {
  0% { opacity: 0; transform: scale(1); }
  3% { opacity: 1; }
  14.3% { opacity: 1; }
  17% { opacity: 0; transform: scale(1.12); }
  100% { opacity: 0; transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .slideshow img { animation: none; }
  .slideshow img:first-child { opacity: 1; }
}

/* ---------- About, research, media ---------- */

.year-table { border-collapse: collapse; width: 100%; }
.year-table td { vertical-align: top; padding: 0.35rem 0.75rem 0.35rem 0; border-bottom: 1px solid var(--border); }
.year-table__year { font-weight: bold; color: var(--muted); white-space: nowrap; }

.floorplan { position: relative; margin: 1rem 0; }
.floorplan img { display: block; width: 100%; height: auto; }
.floorplan__spot {
  position: absolute;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.floorplan__spot:hover,
.floorplan__spot:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; }

.tour-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: 0.75rem; }
.tour-photos figure { margin: 0; scroll-margin-top: 1rem; }
.tour-photos img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.tour-photos figcaption { font-size: 0.9em; color: var(--muted); }
.tour-photos figure:target { outline: 4px solid var(--focus); outline-offset: 3px; }

.project + .project { margin-top: 2rem; }
.project__years { font-weight: normal; color: var(--muted); }
.project__photo { display: block; max-width: 34.375rem; width: 100%; margin: 0.5rem auto 1rem; }
.coming-soon { color: var(--muted); }
.note { background: var(--note-bg); border-left: 4px solid var(--note-edge); padding: 0.5rem 0.75rem; }

.videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(16.25rem, 1fr)); gap: 1rem; }
.video { margin: 0; }
.video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.video figcaption { font-size: 0.9em; color: var(--muted); }

.albums {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  gap: 1rem;
}
.albums img { display: block; width: 100%; aspect-ratio: 300 / 196; object-fit: cover; }
.albums span { display: block; font-size: 0.95em; margin-top: 0.3rem; }

.map { display: block; width: 100%; max-width: 40rem; margin-top: 1rem; }

/* ---------- Cards ---------- */

.cards {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: grid;
  gap: 1rem;
}
.cards--people { grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr)); }
.cards--albums { grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); }
.cards--research { grid-template-columns: repeat(auto-fill, minmax(16.25rem, 1fr)); }

.person-card, .album-card, .research-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}
a.person-card, a.album-card, a.research-card { transition: transform 0.15s, box-shadow 0.15s; }
a.person-card:hover, a.album-card:hover, a.research-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgb(0 0 0 / 0.14); }

.person-card img, .person-card__nophoto { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.person-card__nophoto {
  display: flex; align-items: center; justify-content: center;
  background: #17355d; color: #fff; font-size: 2.5rem; font-weight: bold;
}
.person-card__name { padding: 0.5rem 0.75rem 0; font-weight: bold; }
.person-card__alt { padding: 0 0.75rem 0.6rem; color: var(--muted); font-size: 0.85em; }

.album-card img { display: block; width: 100%; aspect-ratio: 300 / 196; object-fit: cover; }
.album-card__title { padding: 0.5rem 0.75rem 0.7rem; font-size: 0.95em; line-height: 1.4; }

.research-card { border-top: 5px solid var(--light); }
.research-card__photo { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: contain; background: #fff; padding: 0.5rem; }
.research-card__icon { display: flex; justify-content: center; align-items: center; aspect-ratio: 16 / 10; background: var(--dark); }
.research-card__icon img { width: 6.875rem; height: auto; }
.research-card__body { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem 1rem 1rem; }
.research-card__title { font-weight: bold; font-size: 1.1em; }
.research-card__robots { color: var(--link); font-weight: 600; font-size: 0.95em; }
.research-card__text { color: var(--muted); font-size: 0.92em; line-height: 1.55; }

/* ---------- Home: latest news ---------- */

.latest {
  background: var(--content-bg);
  border-radius: var(--radius);
  width: 100%;
  margin: 0 auto 1.5rem;
  max-width: 57.3rem;
  padding: 0.25rem clamp(1rem, 3vw, 2rem) 0.75rem;
  line-height: 1.7;
}
.latest h2 { font-size: 1.25rem; margin: 1rem 0 0.5rem; }

/* ---------- Hexagon sidebar ---------- */

.honeycomb {
  position: relative;
  height: calc(var(--hex-step) * var(--rows) + var(--hex-step) / 2);
  margin-top: 0.3125rem;
}

.hex {
  --dark: var(--hex-filler);
  --light: var(--hex-filler);
  --fill: var(--dark);
  --edge: #fff;
  position: absolute;
  left: calc(var(--col) * var(--hex-col));
  top: calc(var(--row) * var(--hex-step) + var(--col) * var(--hex-step) / 2);
  width: var(--hex-w);
  height: var(--hex-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.3125rem;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background: var(--edge);
  color: #fff;
  font-weight: bold;
  font-size: 0.75rem;
  line-height: 1.15;
  hyphens: auto;
  text-align: center;
  text-decoration: none;
}

.hex::before {
  content: "";
  position: absolute;
  inset: var(--hex-border);
  clip-path: inherit;
  background: var(--fill);
}

.hex span { position: relative; }

.hex--filler { --edge: var(--hex-filler); }

.hex--blue   { --dark: #17355d; --light: #548bd4; }
.hex--green  { --dark: #50632a; --light: #9dbb61; }
.hex--red    { --dark: #612621; --light: #c05046; }
.hex--grey   { --dark: #262626; --light: #7f7f7f; }
.hex--purple { --dark: #54426a; --light: #ab9ac0; }

.hex.is-current,
a.hex:hover { --fill: var(--light); }

a.hex:focus-visible { --edge: var(--focus); outline: none; }

/* ---------- Footer ---------- */

.footer {
  background: #000 url(../../pic/logo/box.png) repeat-x left top;
  background-size: auto 100%;
  color: #fff;
  font-size: 0.875rem;
  text-align: center;
  padding: 1.25rem 1rem 1rem;
}
.footer p { margin: 0.15rem 0; }
.footer a { color: #fff; }
.footer__cols {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 3rem;
  text-align: left;
  font-weight: normal;
  line-height: 1.6;
}
.footer__cols strong { font-size: 1.05em; }
.footer__copy { margin-top: 0.6rem !important; opacity: 0.8; font-weight: normal; font-size: 0.9em; }

/* ---------- Tablet: hexagons in a row above the content ---------- */

@media (max-width: 1023px) {
  /* Stacked: hexagons, then the content panel, which reaches down to the footer. */
  .page { display: flex; flex-direction: column; }
  .page > .content { flex: 1; }

  .page > .honeycomb, .honeycomb {
    width: auto;
    justify-self: auto;
    height: auto;
    margin: 0;
    padding: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.15rem;
  }
  .hex { position: relative; left: auto; top: auto; flex: none; }
  .hex--filler { display: none; }

  .content { min-height: 0; }
}

/* ---------- Phone: section links as pills ---------- */

@media (max-width: 639px) {
  .honeycomb { gap: 0.4rem; padding: 0.6rem; }

  .hex {
    width: auto;
    height: auto;
    padding: 0.45rem 0.9rem;
    clip-path: none;
    border-radius: 999px;
    background: var(--fill);
    font-size: 0.875rem;
  }
  .hex::before { content: none; }
  a.hex:focus-visible { outline: 3px solid var(--focus); }

  .content { padding: 0.5rem 1rem 1.5rem; font-size: 1rem; }

  /* The whole banner would be too small to read; show its logo end, larger. */
  .masthead img { height: 7.5rem; object-fit: cover; object-position: 100% 50%; mask-image: none; }

  /* Home: just the slideshow. The 28 tiles are 14 pages twice over and too many
     for a phone; the menu links to all of them. */
  .ring { aspect-ratio: auto !important; }
  .tile { display: none; }
  .slideshow { position: relative; left: auto; top: auto; width: auto; height: auto; aspect-ratio: 5 / 3; clip-path: none; }

  .theses tr { display: grid; grid-template-columns: auto 1fr; padding: 0.4rem 0; border-bottom: 1px solid var(--border); }
  .theses td { border: 0; padding: 0 0.5rem 0 0; }
  .theses td:last-child { grid-column: 1 / -1; }
}